Post
Ask Question

MultiSelect DropDownList With CheckBoxes In ASP.Net With C# And VB.NET Using jQuery Plugin

Introduction  
 
In this blog, I am going to explain MultiSelect DropDownList with CheckBoxes in ASP.Net with C# and VB.NET using jQuery Plugin.
 
Recently, a few days ago, one of my classmates tried to implement MultiSelect DropDownList with CheckBoxes in ASP.Net but unfortunately, we couldn't find a better solution for that. He said there is one MultiSelect DropDownList with CheckBoxes but when he selects the checkbox,  the checked value is not displayed in the drop-down list. Now, what he should do?
 
In this blog, I'll explain in brief how to create a multi-select DropDown list with CheckBoxes in ASP.NET with C# and VB.NET using jQuery Plugin.
 
So, let's take one example for demonstration.
 
For that, you need to download jQuery Bootstrap Multi-Select Plugin.
 
You can get the reference from the given link.

http://davidstutz.de/bootstrap-multiselect/

ASP.NET (HTML CODE)
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>MultiSelect DropDownList with CheckBoxes in ASP.Net</title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  11.     <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"  
  12.         rel="stylesheet" type="text/css" />  
  13.     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>  
  14.     <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"  
  15.         rel="stylesheet" type="text/css" />  
  16.     <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"  
  17.         type="text/javascript"></script>  
  18.     <script type="text/javascript">  
  19.         $(function () {  
  20.             $('[id*=lstEmployee]').multiselect({  
  21.                 includeSelectAllOption: true  
  22.             });  
  23.         });  
  24.     </script>  
  25.    Employee : <asp:ListBox ID="lstEmployee" runat="server" SelectionMode="Multiple">  
  26.         <asp:ListItem Text="Nikunj Satasiya" Value="1" />  
  27.         <asp:ListItem Text="Dev Karathiya" Value="2" />  
  28.         <asp:ListItem Text="Hiren Dobariya" Value="3" />  
  29.         <asp:ListItem Text="Vivek Ghadiya" Value="4" />  
  30.         <asp:ListItem Text="Pratik Pansuriya" Value="5" />  
  31.     </asp:ListBox>  
  32.     <asp:Button Text="Submit" runat="server" OnClick="Submit" />  
  33.     </form>  
  34. </body>  
  35. </html>  
Script
  1. <script type="text/javascript">  
  2.         $(function () {  
  3.             $('[id*=lstEmployee]').multiselect({  
  4.                 includeSelectAllOption: true  
  5.             });  
  6.         });  
  7.     </script>  
C# Code
  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.   
  8. public partial class CS : System.Web.UI.Page  
  9. {  
  10.     protected void Submit(object sender, EventArgs e)  
  11.     {  
  12.         string message = "";  
  13.         foreach (ListItem item in lstEmployee.Items)  
  14.         {  
  15.             if (item.Selected)  
  16.             {  
  17.                 message += item.Text + " " + item.Value + "\\n";  
  18.             }  
  19.         }  
  20.         ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('" + message + "');", true);  
  21.     }  
  22. }  
VB.NET Code
  1. Partial Class VB  
  2.     Inherits System.Web.UI.Page  
  3.     Protected Sub Submit(sender As Object, e As EventArgs)  
  4.         Dim message As String = ""  
  5.         For Each item As ListItem In lstEmployee.Items  
  6.             If item.Selected Then  
  7.                 message += item.Text + " " + item.Value + "\n"  
  8.             End If  
  9.         Next  
  10.         ClientScript.RegisterClientScriptBlock(Me.GetType(), "alert", "alert('" & message & "');", True)  
  11.     End Sub  
  12. End Class  
Output
 
 
Summary
 
Using Query Bootstrap Multi-Select Plugin, you can easily create MultiSelect DropDownList with checkboxes in ASP.NET.
Next Recommended Reading ASP.NET Store, Retrieve Value In Session Using C#, VB.NET

Codingvila
Codingvila is an educational website, developed to help tech specialists/beginners.