Asp.Net MVC has 2 HTML helper methods to bind DropDownList in input views. This little article will help you understand different ways of dynamically binding DropDownList control by fetching data from database. For simple understanding, let’s assume we have a Department table and want to bind the list of departments in a DropDownList control fetched using Entity Framework.
Assume, you have a view to edit an Employee details which has a DropDownList to change the employee’s department. Let’s see how to bind the DropDownList with Department table data for this edit view.
Using @Html.DropDownListFor()
When we use strongly typed views, we can use the @Html.DropDownListFor() method. This helper method will need the list of departments to first populate the dropdown and then set the employee’s department id passed in model object as selected item.
The below edit action method uses ViewBag.DepartmentListItems to pass the list of departments to view.
Action
public ActionResult edit(int id)
{
Employee emp = db.Employees.Where(e => e.EmployeeId == id).FirstOrDefault();
ViewBag.DepartmentListItems = db.Departments.Distinct().Select(i => new SelectListItem() { Text = i.DepartmentName, Value = i.DepartmentId.ToString() }).ToList();
return View(emp);
}
The list items in view bag will be used to bind the dropddownlist and html helper will set the DepartmentId based on the Employee model passed to the view. View Code below.
View
@Html.DropDownListFor(model => model.DepartmentId, ViewBag.DepartmentListItems as IEnumerable<SelectListItem>,"Select")
Note – It is a good practice to use ViewModels to pass the Department list instead of using ViewBag for binding DropDownList. I have just used ViewBag for easy demonstration.
There are many other overloaded methods available for this helper method for adding HTML properties but all those methods too works similar to the above method.
Using @Html.DropDownList()
This is another HTML helper method to bind the DropDownList in Asp.Net MVC view. Though there are around 8 overloaded methods, the below 3 methods are the primarily used most of the time and other methods available are to just pass the HTML properties in different ways.
-
Bind using IEnumerable<SelectListItem>
This method works similar to first approach (DropDownListFor) but only difference is we are explicitly naming the DropDownList to match the Model property name (Employee.DepartmentId).
Action
public ActionResult edit(int id)
{
Employee emp = db.Employees.Where(e => e.EmployeeId == id).FirstOrDefault();
ViewBag.DepartmentListItems = db.Departments.Distinct().Select(i => new SelectListItem() { Text = i.DepartmentName, Value = i.DepartmentId.ToString() }).ToList();
return View(emp);
}
View
@Html.DropDownList("DepartmentId", ViewBag.DepartmentListItems as IEnumerable<SelectListItem>, "Select")
In the above method, the DropDownList selected item will be automatically set to the Employee object’s DepartmentId value though we did not set the selected item explicitly in the HTML helper.
An alternate way to set the selected item is to set the Selected property to true when adding the SelectListItem object into ViewBag.
new SelectListItem() { Text = i.DepartmentName, Value = i.DepartmentId.ToString(), Selected = true }
-
Bind using List<T>
The above methods passed the list items as a List<SelectListItem> collection which the DropDownList HTML helpers used directly to bind the control. At times, we may also need to bind DropDownList using List<T> object, where T is our business entity. In our case, it is List<Department> object.
We can use the same overload method and use SelectList object for this.
Action
public ActionResult edit(int id)
{
Employee emp = db.Employees.Where(e => e.EmployeeId == id).FirstOrDefault();
ViewBag.DepartmentListItems = db.Departments.Distinct().Select(i => new SelectListItem() { Text = i.DepartmentName, Value = i.DepartmentId.ToString() }).ToList();
return View(emp);
}
View
@Html.DropDownList("DepartmentId", new SelectList(ViewBag.DepartmentList, "DepartmentId","DepartmentName", Model.DepartmentId), "Select")
In the above method, we have set the selected item explicitly in the SelectList object ( SelectList(ViewBag.DepartmentList, "DepartmentId","DepartmentName", Model.DepartmentId)). As indicated in previous approach (i), the above code will also automatically set the selected item even if we don’t specify the selected value explicitly.
-
Bind Using ViewBag.DropDownListId
This is another simple approach where we can use the ViewBag to supply the SelectList object from controller Action method. MVC will automatically bind the DropDownList with the ViewBag property when the name of the DropDownList matches with ViewBag property name. In our case, it is ViewBag.DepartmentId
Action
public ActionResult edit(int id)
{
Employee emp = db.Employees.Where(e => e.EmployeeId == id).FirstOrDefault();
if (emp != null)
ViewBag.DepartmentId = new SelectList(db.Departments.ToList(), "DepartmentId", "DepartmentName", emp.DepartmentId);
return View(emp);
}
View
@Html.DropDownList("DepartmentId","Select")
In the above method, MVC will automatically bind the SelectList object from the ViewBag property “DepartmentId“ to the DropDownList control.
Happy Coding!!