Post
Ask Question

Display CheckBoxes Inside a Dropdown List using ASP.NET

Here you will find the steps:

Step 1

Here you will find the table used in the application



After creating the table as shown below, you need to fill it using, for example,  the following rows



Step 2

Open Visual Studio and add New Project.



Step 3

Install the DropDownCheckBoxes.dll library.

You can use the link displayed below for downloading the DropDownCheckBoxes.dll.



Step 4

Adding DropDownCheckBoxes.dll in our application.

We should include DropDownCheckBoxes.dll library in our application. For this, you can follow the steps as mentioned below.











Finally, Register control by adding the following line in the web.configsettings which allows us to use <asp: DropDownCheckBoxes></asp:DropDownCheckBoxes> tag

Step 5

Add Web Form page (.aspx).

Right click on project name from solution explorer, then Add>New Item>Select Web Form > Add.



CheckBoxesDropDownList.aspx

  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="CheckBoxesDropDownList.aspx.cs"Inherits="CheckBoxesInsideDropDownList.CheckBoxesDropDownList"%>  
  2.   
  3. <!DOCTYPEhtml>  
  4.   
  5. <htmlxmlns="http://www.w3.org/1999/xhtml">  
  6.     <headrunat="server">  
  7.         <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />  
  8.         <title> Checkboxes Inside DropDown List</title>  
  9.         </head>  
  10.   
  11.         <body>  
  12.             <formid="form1" runat="server">  
  13.                 <div>  
  14.   
  15.                     <table>  
  16.   
  17.                         <tr>  
  18.   
  19.                             <td> Select Multiple Cities </td>  
  20.   
  21.                             <td>  
  22.   
  23.                                 <asp:DropDownCheckBoxesID="DropDown1" runat="server" AddJQueryReference="true" UseButtons="True" UseSelectAllNode="True" AutoPostBack="false" DataSourceID="SqlDataSource1" DataTextField="CityName" DataValueField="CityId" RepeatDirection="Horizontal">  
  24.   
  25.                                     <StyleSelectBoxWidth="230" DropDownBoxBoxWidth="230" DropDownBoxBoxHeight="100" />  
  26.   
  27.                                     <TextsSelectBoxCaption="Select City" />  
  28.   
  29.                                     </asp:DropDownCheckBoxes>  
  30.   
  31.                                     <asp:SqlDataSourceID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Db_PersonConnectionString2 %>" SelectCommand="SELECT * FROM [City]"></asp:SqlDataSource>  
  32.   
  33.                             </td>  
  34.   
  35.                         </tr>  
  36.   
  37.                         <tr>  
  38.   
  39.                             <td>  
  40.                                 <asp:ButtonID="Button1" runat="server" Text="Run" OnClick="Button1_Click" />  
  41.                             </td>  
  42.   
  43.                             <td>  
  44.                                 <asp:LabelID="Label1" runat="server" Text="Label"></asp:Label>  
  45.                             </td>  
  46.   
  47.                         </tr>  
  48.   
  49.                     </table>  
  50.   
  51.                 </div>  
  52.                 </form>  
  53.         </body>  
  54.   
  55.     </html>  
Output



Step 6

Configuring SqlDataSource.













After finishing the configuration related to the SqlDataSource we need to fill our Dropdown List with data included in SqlDataSource. Please follow the steps





CheckBoxesDropDownList.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. namespace CheckBoxesInsideDropDownList  
  8. {  
  9.     publicpartialclassCheckBoxesDropDownList: System.Web.UI.Page  
  10.     {  
  11.         protectedvoid Page_Load(object sender, EventArgs e)  
  12.         {  
  13.         }  
  14.         protectedvoid Button1_Click(object sender, EventArgs e)  
  15.         {  
  16.             List < string > CityNameList = newList < string > ();  
  17.             foreach(ListItem item in DropDown1.Items)  
  18.             {  
  19.                 if (item.Selected == true)  
  20.                 {  
  21.                     CityNameList.Add(item.Text);  
  22.                 }  
  23.                 Label1.Text = "The Cites Selected are : " + string.Join(",", CityNameList.ToArray());  
  24.             }  
  25.         }  
  26.     }  
  27. }  
Step 7

Run Application.

 
Next Recommended Reading Filling Dropdown List (Html Select List) Dynamically Using ASP.NET MVC and JQuery Ajax