Display CheckBoxes Inside a Dropdown List using ASP.NET

El Mahdi Archane
8y
20.1k
0
2
25
Blog

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

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="CheckBoxesDropDownList.aspx.cs"Inherits="CheckBoxesInsideDropDownList.CheckBoxesDropDownList"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Checkboxes Inside DropDown List</title>
</head>
<body>
<formid="form1" runat="server">
<div>
<table>
<tr>
<td> Select Multiple Cities </td>
<td>
<asp:DropDownCheckBoxesID="DropDown1" runat="server" AddJQueryReference="true" UseButtons="True" UseSelectAllNode="True" AutoPostBack="false" DataSourceID="SqlDataSource1" DataTextField="CityName" DataValueField="CityId" RepeatDirection="Horizontal">
<StyleSelectBoxWidth="230" DropDownBoxBoxWidth="230" DropDownBoxBoxHeight="100" />
<TextsSelectBoxCaption="Select City" />
</asp:DropDownCheckBoxes>
<asp:SqlDataSourceID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Db_PersonConnectionString2 %>" SelectCommand="SELECT * FROM [City]"></asp:SqlDataSource>
</td>
</tr>
<tr>
<td>
<asp:ButtonID="Button1" runat="server" Text="Run" OnClick="Button1_Click" />
</td>
<td>
<asp:LabelID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</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

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CheckBoxesInsideDropDownList
{
publicpartialclassCheckBoxesDropDownList: System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
}
protectedvoid Button1_Click(object sender, EventArgs e)
{
List < string > CityNameList = newList < string > ();
foreach(ListItem item in DropDown1.Items)
{
if (item.Selected == true)
{
CityNameList.Add(item.Text);
}
Label1.Text = "The Cites Selected are : " + string.Join(",", CityNameList.ToArray());
}
}
}
}