asp.net checkbox inside a data bind dropdown list_问答_开发者

asp.net checkbox inside a data bind dropdown list

开发者 https://www.devze.com 2023-04-06 07:46 出处：网络

how to provide checkboxes inside a data bind dropdown list in asp.net <asp:dropdownlist id=\"ddl\" runat=\"server\" datatextfield=\"Text\" datavaluefield=\"value\" appenddatabounditems=\"true\">

相关专题：asp.net-ajax

how to provide checkboxes inside a data bind dropdown list in asp.net

<asp:dropdownlist id="ddl" runat="server" datatextfield="Text" datavaluefield="value" appenddatabounditems="true">
<asp:listitem text="-select-"value="-开发者_如何学C1"></asp:listitem>
<asp:listitem text="all" value="0"></asp:listitem>
</asp:dropdownlist>

            In ASPX File

In aspx file, create a ListBox control with SelectionMode="Multiple" and bind with some dummy ListItem data as shown below. Here in script JS files, First is jQuery file and Second, Third is bootstrap JS and CSS files and Fourth and Fifth file is MultiSelect JS and CSS Files. Make sure all files is loaded when application runs. Here includeSelectAllOption is set to true to include Select All text at first position in Select List.

    <!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>