In this article, I will explain how to implement a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.NET with jQuery Bootstrap Multi-Select Plugin.

To actualize a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.NET, we should make use of ListBox control and apply jQuery Bootstrap Multi-Select Plugin to it.
If you are a beginner in ASP.NET MVC and jQuery, I am listing some important links to learn-
You can follow the simple steps, given below, to implement a Multiple Select DropdownList with CheckBox. I am creating a MVC Application and creating controller "Home".

In the next step, create an Action to open the view "Index". See the example, given below-
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace DropdownCheckbox.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. public ActionResult Index()
  12. {
  13. return View();
  14. }
  17. }
  18. }
Create view name as "Index.cshtml". See the example, given below-
  1. @{
  2. ViewBag.Title = "Home Page";
  3. Layout = null;
  4. }
  7. <div>
  8. <table>
  9. <tr>
  10. <td><p >Select Expert's Name </p></td>
  11. <td>
  12. <select id="EmpList" multiple="multiple">
  13. <option value="1">Navdeep-Asp.net</option>
  14. <option value="2">Pankaj-C#</option>
  15. <option value="3">Bikesh-Asp.Net</option>
  16. <option value="4">Pritam-Salesforce</option>
  17. <option value="5">Payal-Salesforce</option>
  18. <option value="6">Sujata-SSRS</option>
  19. <option value="7">Harikant-UI</option>
  21. </select>
  22. </td>
  23. <td><input type="button" id="btnSelected" value="Get Selected" /></td>
  24. </tr>
  25. </table>
  28. </div>
In this article, I am using hard code value, but you can bind from the database. Afterwards, add jQuery Plugins or CDN, as shown below-
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  2. <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
  3. rel="stylesheet" type="text/css" />
  4. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  5. <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
  6. rel="stylesheet" type="text/css" />
  7. <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
  8. type="text/javascript"></script>
Use the references in your Application.

Afterwards, write JS code to implement multiselect with Checkbox in Dropdown. Use the code, given below-
  1. <script type="text/javascript">
  2. $(function () {
  3. $('#EmpList').multiselect({
  4. includeSelectAllOption: true
  5. });
  6. $('#btnSelected').click(function () {
  7. var selected = $("#EmpList option:selected");
  8. var message = "";
  9. selected.each(function () {
  10. message += $(this).text() + " " + $(this).val() + "\n";
  11. });
  12. alert(message);
  13. });
  14. });
  15. </script>
Set routing inside "route.config" file. See the code, given below-
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using System.Web.Routing;
  8. namespace DropdownCheckbox
  9. {
  10. public class RouteConfig
  11. {
  12. public static void RegisterRoutes(RouteCollection routes)
  13. {
  14. routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  16. routes.MapRoute(
  17. name: "Default",
  18. url: "{controller}/{action}/{id}",
  19. defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
  20. );
  21. }
  22. }
  23. }

Complete code

You can see and understand the complete code, given below-
  1. @{
  2. ViewBag.Title = "Home Page";
  3. Layout = null;
  4. }
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  7. <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
  8. rel="stylesheet" type="text/css" />
  9. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  10. <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
  11. rel="stylesheet" type="text/css" />
  12. <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
  13. type="text/javascript"></script>
  14. <script type="text/javascript">
  15. $(function () {
  16. $('#EmpList').multiselect({
  17. includeSelectAllOption: true
  18. });
  19. $('#btnSelected').click(function () {
  20. var selected = $("#EmpList option:selected");
  21. var message = "";
  22. selected.each(function () {
  23. message += $(this).text() + " " + $(this).val() + "\n";
  24. });
  25. alert(message);
  26. });
  27. });
  28. </script>
  29. <div>
  30. <table>
  31. <tr>
  32. <td><p >Select Expert's Name </p></td>
  33. <td>
  34. <select id="EmpList" multiple="multiple">
  35. <option value="1">Navdeep-Asp.net</option>
  36. <option value="2">Pankaj-C#</option>
  37. <option value="3">Bikesh-Asp.Net</option>
  38. <option value="4">Pritam-Salesforce</option>
  39. <option value="5">Payal-Salesforce</option>
  40. <option value="6">Sujata-SSRS</option>
  41. <option value="7">Harikant-UI</option>
  43. </select>
  44. </td>
  45. <td><input type="button" id="btnSelected" value="Get Selected" /></td>
  46. </tr>
  47. </table>
  50. </div>
Now, run the Application and see the output, as shown below-


According to the example, I can select any one or multiple choices. Also, you can see the count of the selected items.

We can see the item on the popup after clicking on "GetSelected".
I hope, you enjoyed this article and learned lots of things. If you have any confusion regarding these topics, you can download the project.