11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/

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.
So as to actualize a Multiple Select (MultiSelect) DropDownList with CheckBoxes in ASP.Net we should make use of ListBox control and apply the jQuery Bootstrap Multi-Select Plugin to it.
 You can follow these simple steps to implement a Multiple Select DropdownList with CheckBox. 
I am creating a MVC application and create controller "Home"
In next step create Action to open view "Index" see example.
  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".see example.
  1. @{  
  2.     ViewBag.Title = "Home Page";  
  3.     Layout = null;  
  4. }  
  5.   
  6. <div>  
  7.   <table>  
  8.       <tr>  
  9.           <td><p >Select Expert's Name  </p></td>  
  10.           <td>  
  11.     <select id="EmpList" multiple="multiple">  
  12.     <option value="1">Navdeep-Asp.net</option>  
  13.     <option value="2">Pankaj-C#</option>  
  14.     <option value="3">Bikesh-Asp.Net</option>  
  15.     <option value="4">Pritam-Salesforce</option>  
  16.     <option value="5">Payal-Salesforce</option>  
  17.     <option value="6">Sujata-SSRS</option>  
  18.     <option value="7">Harikant-UI</option>  
  19.   
  20. </select>  
  21.           </td>  
  22.           <td><input type="button" id="btnSelected" value="Get Selected" /></td>  
  23.       </tr>  
  24.   </table>  
  25.      
  26.       
  27. </div>  
In this article i am using hard code value,but you can bind from database .after that add jquery plugins or CDN.like this.
  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 these references in your application .
 After that write js code to implement multiselect with checkbox in dropdown.use this code.
  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 code.
  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 complete code.
  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 application and see output like this.see image.

 According this example i can select any one or multiple,also can see count of selected items.
 We can see item on popup after click on "GetSelected".
I hope you enjoyed with this blog and learned lot of thinks. If you have any confusion regarding this topics you can download project. 
You have just read an article that categorized by title MVC by title Dropdown with Multiple checkbox select with jQuery in MVC 5. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/09/part-38dropdown-with-multiple-checkbox.html. Thank You!
Author: Bikesh Srivastava - Thursday, September 29, 2016

8 comments to "Dropdown with Multiple checkbox select with jQuery in MVC 5"

  1. The plugins used here is creating conflicts and is not allowing to load jqgrid

    ReplyDelete
  2. The plugins used here is creating conflicts and is not allowing to load jqgrid

    ReplyDelete
    Replies
    1. If you are facing conflict problem in j query use given code to resolve
      jQuery.noConflict();

      Delete
  3. Code works .useful for beginners. Keep updating UI online course

    ReplyDelete
  4. Good Day, I am using the code as is and it shows my control as a listbox, am i mussing something

    ReplyDelete
  5. Really Good blog post.provided a helpful information.I hope that you will post more updates like this AngularJS Online Training

    ReplyDelete
  6. Check box not coming inside dropdownlist, plz suggest

    ReplyDelete

Life Is Complicated, But Now programmer Can Keep It Simple.