Dropdown With Multiple CheckBox Select With jQuery In MVC 5

Bikesh Srivastava
9y
77.4k
0
5

Article

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-

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.