Asp.net ajax 数据绑定下拉列表中的asp.net复选框_Asp.net Ajax

Asp.net ajax 数据绑定下拉列表中的asp.net复选框

Asp.net ajax 数据绑定下拉列表中的asp.net复选框,asp.net-ajax,Asp.net Ajax,如何在asp.net中的数据绑定下拉列表中提供复选框 <asp:dropdownlist id="ddl" runat="server" datatextfield="Text" datavaluefield="value" appenddatabounditems="true"> <asp:listitem text="-select-"value="-1"></asp:listitem> <asp:listitem text="all" value=

如何在asp.net中的数据绑定下拉列表中提供复选框

<asp:dropdownlist id="ddl" runat="server" datatextfield="Text" datavaluefield="value" appenddatabounditems="true">
<asp:listitem text="-select-"value="-1"></asp:listitem>
<asp:listitem text="all" value="0"></asp:listitem>
</asp:dropdownlist>

在aspx文件中，创建SelectionMode=Multiple的ListBox控件并与一些伪ListItem数据绑定，如下所示。在脚本JS文件中，第一个是jQuery文件，第二个是引导JS和CSS文件，第四个和第五个是引导JS和CSS文件文件是多选JS和CSS文件。确保应用程序运行时加载了所有文件。此处includeSelectAllOption设置为true，以包括选择列表中第一个位置的所有选择文本。

            In ASPX File

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></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 () {
            $('#lbCountry').multiselect({
                includeSelectAllOption: true
            });
        });
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
        <div style="width: 500px; height: auto; border: 1px solid red; margin-top: 50px; margin-left: 150px; padding: 5px;">
            <table>
                <tr>
                    <td><b>Country List</b></td>
                    <td>
                        <asp:ListBox ID="lbCountry" runat="server" SelectionMode="Multiple">
                            <asp:ListItem Text="India" Value="1"></asp:ListItem>
                            <asp:ListItem Text="USA" Value="2"></asp:ListItem>
                            <asp:ListItem Text="UK" Value="3"></asp:ListItem>
                            <asp:ListItem Text="Australia" Value="4"></asp:ListItem>
                        </asp:ListBox>
                    </td>
                    <td>
                        <asp:Button ID="btnSave" Text ="Submit To Database" runat="server" OnClick="btnSave_Click"
                            class ="btn btn-success btn-md" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
    </body>
    </html>


In ASPX.CS File

Here inside button click handler, we are using foreach loop to iterate over ListBox ListItem collection and checking if item is checked or not using Selected property. 
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnSave_Click(object sender, EventArgs e)
    {
        foreach (ListItem item in lbCountry.Items)
        {
            if (item != null && item.Selected)
            {
                string Name = item.Text;
                string Value = item.Value;
                // write your code here to save to database
            }
        }
    }
}
}

Select All by-default

Here, when webform is loaded, no item is selected. To make all items selected by default, add below lines of code in JS code. 

 <script type="text/javascript">
    var j = jQuery.noConflict();
    j(function () {
        j('#SelCountry').multiselect({
            includeSelectAllOption: false
        });
        j("#SelCountry").multiselect('selectAll', false);
        j("#SelCountry").multiselect('updateButtonText');
    });
</script>