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" %>
  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;
  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.