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-

• Learn jQuery with ASP.NET
• Learn MVC routing
• Learn ASP.NET MVC
• Learn about Razor
• Learn about Model view controller
• How to use script or CDN in MVC Application
  

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-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DropdownCheckbox.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }


    }
}

Create view name as "Index.cshtml". See the example, given below-

@{
    ViewBag.Title = "Home Page";
    Layout = null;
}


<div>
  <table>
      <tr>
          <td><p >Select Expert's Name  </p></td>
          <td>
    <select id="EmpList" multiple="multiple">
    <option value="1">Navdeep-Asp.net</option>
    <option value="2">Pankaj-C#</option>
    <option value="3">Bikesh-Asp.Net</option>
    <option value="4">Pritam-Salesforce</option>
    <option value="5">Payal-Salesforce</option>
    <option value="6">Sujata-SSRS</option>
    <option value="7">Harikant-UI</option>

</select>
          </td>
          <td><input type="button" id="btnSelected" value="Get Selected" /></td>
      </tr>
  </table>


</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-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
          rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
            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-

<script type="text/javascript">
       $(function () {
           $('#EmpList').multiselect({
               includeSelectAllOption: true
           });
           $('#btnSelected').click(function () {
               var selected = $("#EmpList option:selected");
               var message = "";
               selected.each(function () {
                   message += $(this).text() + " " + $(this).val() + "\n";
               });
               alert(message);
           });
       });
   </script>

Set routing inside "route.config" file. See the code, given below-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace DropdownCheckbox
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

Complete code

You can see and understand the complete code, given below-

@{
    ViewBag.Title = "Home Page";
    Layout = null;
}

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
          rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
          rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
            type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#EmpList').multiselect({
                includeSelectAllOption: true
            });
            $('#btnSelected').click(function () {
                var selected = $("#EmpList option:selected");
                var message = "";
                selected.each(function () {
                    message += $(this).text() + " " + $(this).val() + "\n";
                });
                alert(message);
            });
        });
    </script>
<div>
  <table>
      <tr>
          <td><p >Select Expert's Name  </p></td>
          <td>
    <select id="EmpList" multiple="multiple">
    <option value="1">Navdeep-Asp.net</option>
    <option value="2">Pankaj-C#</option>
    <option value="3">Bikesh-Asp.Net</option>
    <option value="4">Pritam-Salesforce</option>
    <option value="5">Payal-Salesforce</option>
    <option value="6">Sujata-SSRS</option>
    <option value="7">Harikant-UI</option>

</select>
          </td>
          <td><input type="button" id="btnSelected" value="Get Selected" /></td>
      </tr>
  </table>


</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.