In this tutorial, I am going to explain you bind how to bind multiple selection (MultiSelect) DropDownList with CheckBox in Grid.MVC in ASP.Net MVC from database using jQuery, Bootstrap and MultiSelect JS. I will be using Visual Studio 2013 and ADO.Net Code to get data from SQL-Server Database.
As you can see in below screen-shot, multi-select dropdownlist is auto-selected. Here in Subject column , subject value is concatenated with comma from database, while binding to MVCGrid subject is auto selected in last column as shown below.
Creating Table and Procedure
Use below script to create a Student Table and procedure to fetch data from database.
CREATE TABLE tbl_Students
(
ID INT PRIMARY KEY IDENTITY,
Name VARCHAR(50),
Subjects VARCHAR(100)
)
GO
INSERT INTO tbl_Students VALUES('Rahul','C#,ASP.Net')
INSERT INTO tbl_Students VALUES('Sumit','SQL,ASP.Net')
INSERT INTO tbl_Students VALUES('Deepak','MVC,ASP.Net,SQL')
GO
CREATE PROCEDURE usp_Students
AS
BEGIN
SELECT ID,Name, Subjects AS 'FavSubjects' FROM tbl_Students
END
Creating ASP.NET MVC Empty Application
Now the next step is to create ASP.NET MVC empty application as shown below.
Go to File → New → Project. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .
Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.
Now, a new project will be created as shown below.
Adding Models
Go to Models folder and add new class file Student.cs. Now replace all code with below code.
using System;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespaceWebApplication1.Models
{
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public string FavSubjects { get; set; }
// collection to store all subjects
public ListSelectListItem> Subjects { get; set; }
// collection to store selected subjects
public ListSelectListItem> AutoSelSubjs { get; set; }
}
public class StudentModel
{
//list for all students
public IEnumerableStudent> StudentList { get; set; }
}
}
Now add a new folder named DALayer to the root directory of the application and add a new class file StudentDAL.cs into DALayer folder and replace all code with below code.
using System;
usingSystem.Collections.Generic;
using System.Configuration;
using System.Data;
usingSystem.Data.SqlClient;
using System.Linq;
using System.Web;
usingWebApplication1.Models;
namespaceWebApplication1.DALayer
{
public class StudentDAL
{
public IEnumerableStudent> GetAllStudent()
{
// fetching connection string from web.config file
// you can also use Entity Framework or Dapper ORM to fetch data from database
// it should return IEnumerable of class
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConString"].ToString()))
{
ListStudent> studentList = new ListStudent>();
SqlCommand cmd = new SqlCommand("usp_Students", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
Student st = new Student();
st.Id = Convert.ToInt32(sdr["ID"].ToString());
st.Name = sdr["Name"].ToString();
st.FavSubjects = sdr["FavSubjects"].ToString();
studentList.Add(st);
}
return studentList;
}
}
}
}
Adding Controller
Next step is to add controller to application. Go to controller folder and add new empty controller named as Home controller. Replace all code with below code.
using System;
usingSystem.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
usingWebApplication1.DALayer;
usingWebApplication1.Models;
namespaceWebApplication1.Controllers
{
public class HomeController : Controller
{
//
StudentDAL dal = new StudentDAL();
public ActionResult Index()
{
StudentModel sm = new StudentModel();
// fetching student details and storing into studentlist collection
sm.StudentList = dal.GetAllStudent();
// iterating over each student and storing All the subjects from C# code
foreach (var item in sm.StudentList)
{
item.Subjects = GetSubjectList();
}
foreach (var obj in sm.StudentList)
{
// spliting subjects for each student using comma which is coming from database
var Statuslist = obj.FavSubjects.Split(',');
// storing favourite subject as SelectListItem into AutoSelSubjs
obj.AutoSelSubjs = Statuslist.Select(i => new SelectListItem() { Text = i.ToString(), Value = i }).ToList();
}
return View(sm);
}
[NonAction]
public ListSelectListItem> GetSubjectList()
{
ListSelectListItem> subjects = new ListSelectListItem>()
{
new SelectListItem (){ Text = "C#", Value = "C#" },
new SelectListItem() { Text = "ASP.Net", Value = "ASP.Net" },
new SelectListItem() { Text = "SQL", Value = "SQL" },
new SelectListItem() { Text = "Java", Value = "Java" },
new SelectListItem() { Text = "MVC", Value = "MVC" }
};
return subjects;
}
}
}
Installing Grid.Mvc using Nuget
Next step is to install Grid.Mvc. Right click on References and go to Manage NuGet Packages as shown below.
After that a new window will open as shown below. Search for Grid.Mvc and install it.
Adding View
Now, right click on home controller index action method, add new view and name Index. Select Empty template and uncheck Use layout page and click on Add as shown below.
Now go to Views / Home folder, open Index.cshtml file and 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 set @multiple = "multiple" for dropdownlist and set j('.multi').multiselect() in jquery code.
In DropDownList, first parameter is Id, second is actual drowdown items , third is items that need to be auto-selected and fourth is property.
Index.cshtml Code:@model WebApplication1.Models.StudentModel
@using GridMvc.Html
@{
Layout = null;
}
title>Grid.MVC with MultiSelect DropDownList with CheckBox auto selected from database in MVCtitle>
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
