MultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net

This article will show you how you can create a jquery multiselect dropdown list with checkboxes for multiple select dropdown with checkboxes in asp.net mvc application. This article we can use in mvc3, mvc4, mvc5.

Some off my previous articles are as follows: Three Level Menus With Disable Menu Item Using jQuery In Asp.Net, Insert, Update, Delete Operation In Asp.Net MVC Using Entity Framework C#.Net ,CRUD Functionality, Multiple File Upload With Asp.Net MVC C# and HTML5 | How to upload files to ASP.NET MVC application, Simple Login From in Asp.Net MVC Using C#.Net, DropdownList AutoPostback Functionality In MVC Using C#.Net, XML File Generation And Data Writing Using C#.Net In Asp.Net MVC, Bind XML File Data to Gridview By Category and SubCategory in Asp.Net MVC Using C#.Net, MVC Pass Multiple Parameters in QueryString or URL in Asp.Net MVC.

So for this article first we will create a new mvc application and add the a model class file in model folder. In this model class file add the below code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MvcApplication1.Models {     public class CountryModel     {         public List<Country> CountryList { get; set; }         public string SelectedCountryId { get; set; }     }     public class Country     {         public string CountryName { get; set; }     } }

Now add a controller class file and add the below code.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication1.Models; namespace MvcApplication1.Controllers {     public class HomeController : Controller     {         //         // GET: /Home/         public ActionResult Index()         {             CountryModel objcountrymodel = new CountryModel();             objcountrymodel.CountryList = new List<Country>();             objcountrymodel.CountryList = CountryDate();             return View(objcountrymodel);         }         public List<Country> CountryDate()         {             List<Country> objcountry = new List<Country>();             objcountry.Add(new Country { CountryName = "America" });             objcountry.Add(new Country { CountryName = "India" });             objcountry.Add(new Country { CountryName = "Sri Lanka" });             objcountry.Add(new Country { CountryName = "China" });             objcountry.Add(new Country { CountryName = "Pakistan" });             return objcountry;         }     } }

In above code I have created a collection of country. This list we will bind with the dropdown list. Now create the view and add the below code into the view.

@model MvcApplication1.Models.CountryModel           @{     ViewBag.Title = "MultiSelect DropdownList Using jQuery in Asp.Net MVC and C#.Net"; }  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="../../Scripts/jquery.sumoselect.js" type="text/javascript"></script> <link href="../../Css/dropdownliststyle.css" rel="stylesheet" type="text/css" />  <script type="text/javascript">      $(document).ready(function () {          window.asd = $('.ddlMultiSlectBox).SumoSelect({ csvDispCount: 4 });      });     </script> Country: @Html.DropDownListFor(m => m.SelectedCountryId, new SelectList(Model.CountryList, "CountryName", "CountryName"), new {@multiple="multiple",@placeholder="Please select country", @class="ddlMultiSlectBox" })

Here in this code I have added the css and jQuery library reference and used sumoselect function to show multi select dropdown list.

Now we have done run  the application to check the output.

DOWNLOAD