Thursday, 28 April 2016

Multi Select Dropdown in MVC 5

2 comments

Don't you know how to create multi select drop down list in MVC 5.It is very easy in traditional HTML and ASP.NET webform. But when comes to the MVC it is a little bit difficult.But, binding database values to the dropdown list very easy in MVC compared to HTML.
In normal dropdown list we can allow to select single option from drop down but using multi select list box we can able to select multiple options.

In this tutorial i am going to share you how to populate multi select drop down List  in mvc by comparing normal dropdown list.

Step 1: create an ASP.NET MVC web application
1.Add Controller name it as HomeController.cs
2.Create action method Index()

Step 2: create data source for drop down list
1.create List data to populate a drop down.
2.Replace Index action with following code.

public ActionResult Index()
        {
            //Using ViewBag
            List item=new List();
            item.Add(new SelectListItem{Text="India",Value="India"});
            item.Add(new SelectListItem{Text="China",Value="china"});
            item.Add(new SelectListItem { Text = "United Sates", Value = "3" });
            item.Add(new SelectListItem { Text = "Srilanka", Value = "4" });
            item.Add(new SelectListItem { Text = "Germany", Value = "5" });
            item.Add(new SelectListItem { Text = "Japan", Value = "6" });
            item.Add(new SelectListItem { Text = "Nepal", Value = "7" });
            item.Add(new SelectListItem { Text = "Russia", Value = "8" });
            item.Add(new SelectListItem { Text = "Spain", Value = "9" });
            item.Add(new SelectListItem { Text = "Frans", Value = "10" });
            item.Add(new SelectListItem { Text = "Canada", Value = "11" });
            item.Add(new SelectListItem { Text = "brazil", Value = "12" });
            item.Add(new SelectListItem { Text = "Koria", Value = "13" });
            item.Add(new SelectListItem { Text = "England", Value = "14" });
            //using ViewData
            //Data for drop down list
            ViewBag.countrylist = item;   
            //data sent for multiselect dropdown.
            ViewBag.MultiselectCountry = GetCountries(null);
            return View();
        }

Step 3:Prepare data for multi select listbox
1.Here i created a GetCountries() method with type as 'MultiSelectList'.
2.Data for Multi select drop down List box comes from here.

 private MultiSelectList GetCountries(string[] SelectedValues)
        {
            List items = new List();
            items.Add(new SelectListItem { Text = "India", Value = "1" });
            items.Add(new SelectListItem { Text = "China", Value = "2" });
            items.Add(new SelectListItem { Text = "United Sates", Value = "3" });
            items.Add(new SelectListItem { Text = "Srilanka", Value = "4" });
            items.Add(new SelectListItem { Text = "Germany", Value = "5" });
            items.Add(new SelectListItem { Text = "Japan", Value = "6" });
            items.Add(new SelectListItem { Text = "Nepal", Value = "7" });
            items.Add(new SelectListItem { Text = "Russia", Value = "8" });
            items.Add(new SelectListItem { Text = "Spain", Value = "9" });
            items.Add(new SelectListItem { Text = "Frans", Value = "10" });
            items.Add(new SelectListItem { Text = "Canada", Value = "11" });
            items.Add(new SelectListItem { Text = "brazil", Value = "12" });
            items.Add(new SelectListItem { Text = "Koria", Value = "13" });
            items.Add(new SelectListItem { Text = "England", Value = "14" });
            return new MultiSelectList(items, "Value", "Text", SelectedValues);
        }

3.I passed this data using ViewBag to Index view in Index Action Method.You can see the code in first code snippet.

Step 4:Create Index View
1.Right click on Index action -->Add View-->click ok
2.Index view created .
3.Replace the Index view code with following code

@{
    ViewBag.Title = "Multiselect List box";
}
<link href="~/Content/Bootstrap.min.css" rel="stylesheet" />
<h2 style="margin-top:60px;">Chosen Js plugin</h2>
@using (Html.BeginForm()) { 
@Html.Label("1. Single select")<br/>    
@Html.DropDownList("countrylist",null,"select single country",new { style="width:200px;"})<br/><br/>
@Html.Label("2.Choosen Multiple select")<br/>       
@Html.ListBox("multiselectcountries", ViewBag.MultiselectCountry as MultiSelectList, new { style = "width:200px;" })<br/><br/>    
}

Now run the application and see browser window.
we can select multiple values by pressing CTRL select.


download this code for this article from here.

Conclusion:
 I hope every reader understand this tutorial.If you recommend any modification please let me know to increase the readability of this article.


2 comments: