In this article, I will explain about how to implement Dropdown list in ASP.NET MVC. In traditional ASP.NET it is very easy to implement just by drag and dropping where we want. But in MVC we need some attention to create Drop Downlist.We have Dropdown list Html helper in ASP.NET MVC but we need to know how to bind data to Dropdown list Html helpers.
we can implement Drop down list in ASP.NET MVC in 2 ways.
1.Using normal HTML Controls(select tag):
We can implement dropdownlist using HTML <select/> tag like below
ExampleCode:
<select id="html_dropdown">
<option>--Select--</option>
<option>India</option>
<option>US</option>
<option>China</option>
<option>Russia</option>
<option>United Kingdom</option>
</select>
2.Using HTML helpers:
Method 1:
It is very easy to implement dropdownlist using normal html tags. But, if you want to bind data dynamically to the HTML tags it becomes complicated.To overcome and to make it easy to bind data to Html controls Microsoft introduced HTML helpers Methods.Here we are using Dropdown HTML helper to bind object data to Dropdownlist.
Advantages:
1.It is also easy to implement.
2.Dynamic binding of data is very easy
3.We can easily implement cascading dropdownlists
Note:In method 1 i am sending data from controller using ViewBag.
ExampleCode:
//Using ViewBag
List<selectlistitem> item = new List<selectlistitem>();
item.Add(new SelectListItem { Text = "India", Value = "1" });
item.Add(new SelectListItem { Text = "China", Value = "2" });
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" });
ViewBag.html_helper_dropdown = item;
</selectlistitem></selectlistitem>
View code:
@using (Html.BeginForm())
{
@Html.DropDownList("html_helper_dropdown","--select--")
}
Method 2:
In this i am sending data using ViewData to Controller with the same data source
Code:
List<selectlistitem> item = new List<selectlistitem>();
item.Add(new SelectListItem { Text = "India", Value = "1" });
item.Add(new SelectListItem { Text = "China", Value = "2" });
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" });
ViewData["viewdata_ddl"] = item;
</selectlistitem></selectlistitem>
view code:
<p>Using View data</p>
@using (Html.BeginForm())
{
@Html.DropDownList("viewbag_dropdown",ViewData["viewdata_ddl"] as List<SelectListItem>, "--select--")
}
Method 3:
Model binding.In this method we are binding the data using Model.This method mainly used for Strongly typed Views.
1.First create a model class with the 2 properties. one for Dropdown values and another for storing the selected value.
Model.cs:
using System.Collections.Generic;
using System.Web.Mvc;
namespace Dropdownlist.Models
{
public class Model
{
public string selectedType { get; set; }
public IEnumerable<selectlistitem> CountryList { get; set; }
}
}
</selectlistitem>
Then prepare data source in controller and send the data through return View() method
Controller code:
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Dropdownlist.Models;
namespace Dropdownlist.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
//Using ViewBag
List<selectlistitem> item = new List<selectlistitem>();
item.Add(new SelectListItem { Text = "India", Value = "1" });
item.Add(new SelectListItem { Text = "China", Value = "2" });
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" });
ViewBag.html_helper_dropdown = item;
//using ViewData
ViewData["viewdata_ddl"] = item;
//using Model binding
var model = new Model
{
CountryList = item
};
return View(model);
}
}
}
</selectlistitem></selectlistitem>
View code as follows:
<p>Using Model </p>
@using (Html.BeginForm())
{
@Html.DropDownListFor(x=>x.selectedType,Model.CountryList,"--select--")
}
Index.cshtml:
@using Dropdownlist.Models
@model Model
@{
ViewBag.Title = "Dropdown list demo";
}
<h1>Dropdown list</h1>
<h3>Drop downlist using HTML</h3>
<select id="html_dropdown">
<option>--Select--</option>
<option>India</option>
<option>US</option>
<option>China</option>
<option>Russia</option>
<option>United Kingdom</option>
</select>
<br/>
<h3>Using Html helpers </h3>
<p>Method 1:</p><br/>
<p>Here the data was sent from Controller through ViewBag</p>
@using (Html.BeginForm())
{
@Html.DropDownList("html_helper_dropdown","--select--")
}
<br/>
<p>Method 2:</p>
<p>Using View data</p>
@using (Html.BeginForm())
{
@Html.DropDownList("viewbag_dropdown",ViewData["viewdata_ddl"] as List<SelectListItem>, "--select--")
}
<p>Method 3:</p>
<p>Using Model </p>
@using (Html.BeginForm())
{
@Html.DropDownListFor(x=>x.selectedType,Model.CountryList,"--select--")
}
Note: We can also bind the dropdownlist data using ENUM's and arrays also.But, above are the most reliable and used by many developers (in our company also developers uses this methods only.).
Finally i got output like this.
HostForLIFE.eu ASP.NET MVC 5 Hosting
HostForLIFE.eu revolutionized hosting with Plesk Control Panel, a Web-based interface that provides customers with 24x7 access to their server and site configuration tools. Plesk completes requests in seconds. It is included free with each hosting account. Renowned for its comprehensive functionality - beyond other hosting control panels - and ease of use, Plesk Control Panel is available only to HostForLIFE's customers. They offer a highly redundant, carrier-class architecture, designed around the needs of shared hosting customers.
