In this tutorial, I am going to explain you how to implement multiple selection (MultiSelect) DropDownList with CheckBox in MVC using jQuery, Bootstrap and MultiSelect JS.
Creating MVC Model
First of all, we need to create model. Write click on Models folder and add a new class name as CountryModel. Replace all code with below code. CountryList property is used to store List of Country and SelCountry property is used to store selected country while passing to the controller.
using System;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespaceWebApplication1.Models
{
public class CountryModel
{
public CountryModel()
{
CountryList = new ListSelectListItem>();
}
public ListSelectListItem> CountryList { get; set; }
public string SelCountry { get; set; }
}
}
Creating MVC Controller
Now right click on Controller folder and add new empty controller name as Home. Replace all code with below code. Here Index action method is used to return SelectListItem of Country and SavaCountry method is called on click of Submit of Button from view. In SaveCountry method, SelCountry parameter stores all the selected item's Id in array.
using System;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
usingWebApplication1.Models;
namespaceWebApplication1.Controllers
{
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
returnView(GetCountryList());
}
[NonAction]
public CountryModelGetCountryList()
{
CountryModel obj = new CountryModel();
obj.CountryList.Add(new SelectListItem { Text = "India", Value = "1" });
obj.CountryList.Add(new SelectListItem { Text = "USA", Value = "2" });
obj.CountryList.Add(new SelectListItem { Text = "UK", Value = "3" });
obj.CountryList.Add(new SelectListItem { Text = "Australia", Value = "4" });
return obj;
}
[HttpPost]
public ActionResultSavaCountry(string[] SelCountry)
{
if (SelCountry != null)
{
string Country = string.Join(",", SelCountry);
//
// write your code to save into database
//
}
return View("Index", GetCountryList());
}
}
}
Creating MVC View
Now, right click on Index action method and add new empty view without any layout view and Give its name 'Index'. Now go to Views/Home folder and Open Index.cshtml file. Replace all code with below code. Here in script JS files, First is jQuery file and Second, Third is bootstrap JS and CSS files and Fourth and Fifth file is MultiSelect JS and CSS Files. Make sure all files is loaded when application runs.
Here includeSelectAllOption is set to true to include Select All text at first position in Select List.
@model WebApplication1.Models.CountryModel
@{
Layout = null;
}
!DOCTYPE html>
html>
head>
meta name="viewport" content="width=device-width" />
title>Indextitle>
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">script>
link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript">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">
var j = jQuery.noConflict();
j(function () {
j('#SelCountry').multiselect({
includeSelectAllOption: true
});
});
script>
head>
body>
@using (Html.BeginForm("SavaCountry", "Home", FormMethod.Post))
{
div style="width:500px;height:auto; border:1px solid red; margin-top:50px;margin-left:150px; padding:5px;">
table>
tr>
td>b>Country Listb>td>
td>
