Click here to Skip to main content
11,796,774 members (70,967 online)
Click here to Skip to main content

Easiest way to Create a Multiselect Dropdown in ASP.NET 4.0 using C#

, 22 Mar 2013 CPOL 43.4K 2.2K 42
Rate this:
Please Sign up or sign in to vote.
A multiselect dropdown in ASP.NET.



In this article, I will show you how to create a multi-select control in ASP.NET. I will keep this article short and sweet so you can just use the code in your applications. Previously I referred to many codes for a multiselect dropdown but I found they were all a little complex to implement. So I decided to try it on my own. Let's see how I implemented this.


First, you must install AJAX controls in Visual Studio. I am using VS2010. This is because I am using the popup control extender to implement this control.

Using the code

Place a textbox in Design view and assign the popup extender for that textbox. An important thing to note here is you must place your textbox control within the UpdatePanel.

Afterwards, you create a panel and within this panel, you put a checkboxlist. You then assign this panel to the PopupControlID property of the popup extender.

Now take a look at this code:

<%@ Page Language="C#" AutoEventWireup="true" 
   CodeFile="multidropdown.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" 
  Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager runat="server">

        <asp:UpdatePanel ID="updatepanel1" runat="server">


                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

                    ID="TextBox1_PopupControlExtender" runat="server"
                    Enabled="True" ExtenderControlID="" 
                    PopupControlID="Panel1" OffsetY="22">

                <asp:Panel ID="Panel1" runat="server" 
                     Height="116px" Width="145px" 
                     BorderStyle="Solid" BorderWidth="2px" 
                     ScrollBars="Auto" BackColor="#CCCCCC" 
                     Style="display: none">
                    <asp:CheckBoxList ID="CheckBoxList1" runat="server" 
                          DataSourceID="SqlDataSource1" DataTextField="holiday_name"
                         DataValueField="holiday_name" AutoPostBack="True"

                    <asp:SqlDataSource ID="SqlDataSource1" 
                          runat="server" ConnectionString="<%$ 
                          ConnectionStrings:employeedbConnectionString %>"
                        SelectCommand="SELECT [holiday_name] FROM [tblholidaymas]"> 

Here, you select the datasource from your SQL Server database.


Finally, we need to do one more modification in the code-behind. Each time we click the checkboxlist, the selected value will be added to the textbox control. So in the selected index changed event, you will place this code:

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

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
    protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
        string name = "";
        for (int i = 0; i < CheckBoxList1.Items.Count; i++)
            if (CheckBoxList1.Items[i].Selected)
                name += CheckBoxList1.Items[i].Text + ",";
        TextBox1.Text = name;

That's all.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Junior) CS1401
India India

Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

You may also be interested in...

Comments and Discussions

Questionhow do you load existing items as comma separated strings from a database Pin
Member 99592122-Apr-13 0:12
memberMember 99592122-Apr-13 0:12 
AnswerRe: how do you load existing items as comma separated strings from a database Pin
CS14017-Apr-13 0:23
memberCS14017-Apr-13 0:23 
GeneralMy vote of 5 Pin
WebBHTAN23-Mar-13 17:31
memberWebBHTAN23-Mar-13 17:31 
GeneralCheck all Pin
elaya_627-Jun-12 5:36
memberelaya_627-Jun-12 5:36 
GeneralRe: Check all Pin
CS14011-Jul-12 3:27
memberCS14011-Jul-12 3:27 
GeneralMy vote of 5 Pin
Gariel Martini9-Feb-12 5:30
memberGariel Martini9-Feb-12 5:30 
GeneralRe: My vote of 5 Pin
CS140117-Feb-12 19:10
memberCS140117-Feb-12 19:10 
GeneralMy vote of 3 Pin
Marcelo Ricardo de Oliveira10-Oct-11 0:06
mvpMarcelo Ricardo de Oliveira10-Oct-11 0:06 
GeneralRe: My vote of 3 Pin
CS140110-Oct-11 18:34
memberCS140110-Oct-11 18:34 
GeneralMy vote of 5 Pin
Anurag Gandhi7-Oct-11 1:14
memberAnurag Gandhi7-Oct-11 1:14 
GeneralMy vote of 5 Pin
C133722-Sep-11 23:45
memberC133722-Sep-11 23:45 
GeneralRe: My vote of 5 Pin
CS140123-Sep-11 0:37
memberCS140123-Sep-11 0:37 
QuestionBeware SQL Injection Pin
Stephen Inglish14-Sep-11 1:51
memberStephen Inglish14-Sep-11 1:51 
AnswerRe: Beware SQL Injection Pin
CS140114-Sep-11 2:40
memberCS140114-Sep-11 2:40 
GeneralRe: Beware SQL Injection Pin
Marcus Kramer14-Sep-11 3:11
memberMarcus Kramer14-Sep-11 3:11 
GeneralRe: Beware SQL Injection Pin
CS140114-Sep-11 3:21
memberCS140114-Sep-11 3:21 
GeneralMy vote of 5 Pin
karthi.mkr13-Sep-11 20:02
memberkarthi.mkr13-Sep-11 20:02 
GeneralRe: My vote of 5 Pin
CS140113-Sep-11 20:25
memberCS140113-Sep-11 20:25 
GeneralMy vote of 5 Pin
Professional manpreet13-Sep-11 8:41
memberProfessional manpreet13-Sep-11 8:41 
GeneralRe: My vote of 5 Pin
CS140113-Sep-11 18:40
memberCS140113-Sep-11 18:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.151002.1 | Last Updated 23 Mar 2013
Article Copyright 2011 by CS1401
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid