使用 jQuery 和 Bootstrap 的多视图控件中带有复选框的 ASP.NET 多选列表框答案

【问题标题】：ASP.NET Multiple Select ListBox with CheckBoxes in a MultiView Control using jQuery and Bootstrap使用 jQuery 和 Bootstrap 的多视图控件中带有复选框的 ASP.NET 多选列表框
【发布时间】：2018-05-21 02:21:21
【问题描述】：

我一直在尝试在here 上实现一个多选下拉列表。

但是，我的情况与示例稍有不同，因为列表框位于 ASP.NET VIEW 控件中，最初未加载此视图。

我注意到当我在页面加载中直接将SampleView2 设置为活动视图时，下拉列表工作正常。但是，如果我稍后在单击按钮事件时加载 SampleView2，则列表框不会正确填充。缺少复选框。

我相信这是因为在回发期间加载 SampleView2 时 JavaScript 没有被触发？谁能告诉我如何实现这一目标？

这是我的代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Bootstrap_MultiSelect_DropDown.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $('[id*=lstFruits]').multiselect({
                    includeSelectAllOption: true
                });
            });
        </script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:MultiView ID="MultiViewMain" runat="server">
<asp:View ID="ViewSampleView1" runat="server">
<p>SampleView1</p>
<asp:Button ID="ButtonLoadSampleView2" runat="server" Text="LoadSampleView2" 
        onclick="ButtonLoadSampleView2_Click" />
</asp:View>
<asp:View ID="ViewSampleView2" runat="server">
<div>
<p>SampleView2</p>
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
    <asp:ListItem Text="Mango" Value="1" />
    <asp:ListItem Text="Apple" Value="2" />
    <asp:ListItem Text="Banana" Value="3" />
    <asp:ListItem Text="Guava" Value="4" />
    <asp:ListItem Text="Orange" Value="5" />
</asp:ListBox>
</div>
</asp:View>
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;

namespace Bootstrap_MultiSelect_DropDown
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                MultiViewMain.SetActiveView(ViewSampleView1);
            }
        }

        protected void ButtonLoadSampleView2_Click(object sender, EventArgs e)
        {
            MultiViewMain.SetActiveView(ViewSampleView2);
        }
    }
}

【问题讨论】：

更新：由于我无法弄清楚这一点，我不得不使用 CheckBoxList 控件来实现该功能。

标签： jquery asp.net twitter-bootstrap listbox asp.net-ajax

【解决方案1】：

您需要在服务器端之后运行客户端代码。所以你可以使用

*.cs

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
       MultiViewMain.SetActiveView(ViewSampleView1);
   }            
}

protected void ButtonLoadSampleView2_Click(object sender, EventArgs e)
{
      MultiViewMain.SetActiveView(ViewSampleView2);
      //Line to add so that you can access client script from server side 
      //where getView is a function on client side
      ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "alertScript", "getView();", true);
}

*.js

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

<script>
    function getView() {
        $('#<%= lstFruits.ClientID %>').multiselect({ includeSelectAllOption: true });
    }
</script>

*.html

<ContentTemplate>
            <asp:MultiView ID="MultiViewMain" runat="server">
                <asp:View ID="ViewSampleView1" runat="server">
                    <p>SampleView1</p>
                    <asp:Button ID="ButtonLoadSampleView2" runat="server" Text="LoadSampleView2" OnClick="ButtonLoadSampleView2_Click" />

                </asp:View>
                <asp:View ID="ViewSampleView2" runat="server">
                    <div>
                        <p>SampleView2</p>
                        <asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple">
                            <asp:ListItem Text="Mango" Value="1" />
                            <asp:ListItem Text="Apple" Value="2" />
                            <asp:ListItem Text="Banana" Value="3" />
                            <asp:ListItem Text="Guava" Value="4" />
                            <asp:ListItem Text="Orange" Value="5" />
                        </asp:ListBox>
                    </div>
                </asp:View>
            </asp:MultiView>
        </ContentTemplate>

【讨论】：