Post
Ask Question

Dropdown With Multiple CheckBox Select With jQuery In MVC 5

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;  
  6.   
  7. namespace DropdownCheckbox.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.   
  16.          
  17.     }  
  18. }   
Create view name as "Index.cshtml". See the example, given below-
  1. @{  
  2.     ViewBag.Title = "Home Page";  
  3.     Layout = null;  
  4. }  
  5.   
  6.     
  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>  
  20.   
  21. </select>  
  22.           </td>  
  23.           <td><input type="button" id="btnSelected" value="Get Selected" /></td>  
  24.       </tr>  
  25.   </table>  
  26.      
  27.       
  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;  
  7.   
  8. namespace DropdownCheckbox  
  9. {  
  10.     public class RouteConfig  
  11.     {  
  12.         public static void RegisterRoutes(RouteCollection routes)  
  13.         {  
  14.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  15.   
  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. }  
  5.   
  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>  
  42.   
  43. </select>  
  44.           </td>  
  45.           <td><input type="button" id="btnSelected" value="Get Selected" /></td>  
  46.       </tr>  
  47.   </table>  
  48.      
  49.       
  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.


Similar Articles