Tutorial – Populate ASP.NET MVC Dropdownlist with ViewBag and Model values

Sometimes it our ASP.NET MVC application it becomes necessary to populate dropdown with dynamic values such as from the database. So here in the controller you can create a list object of type SelectListItem, fill it with values and then send this object to the View.

Binding DropDownList with ViewBag

Let’s take a simple example of filling a dropdown list with different states of America. In the controller’s action create a list object of type SelectListItem, add some items to it. Finally send this list object to the View using a ViewBag object. Check the below code:

Controller

public ActionResult Index()
{
    List<SelectListItem> States = new List<SelectListItem>()
    {
       	new SelectListItem() {Text="Alabama", Value="AL"},
        new SelectListItem() { Text="West Virginia", Value="WV"},
        new SelectListItem() { Text="Wisconsin", Value="WI"},
        new SelectListItem() { Text="Wyoming", Value="WY"}
    };

    ViewBag.CategoryList = States;
    return View();
}

View

@Html.DropDownList("state", ViewBag.CategoryList as IEnumerable)

In the View I simply bind the DropDownList with the ViewBag variable. In this way the dropdownlist gets populated with the dynamic values returned from the controller’s action method.

Binding DropDownList from Model

Suppose I have to bind DropDownList from the Model which in my case is the marks of a student in different subjects.

So add a Model class called Marks.cs with the following code.

public class Marks
{
    public string subject { get; set; }
    public int marks { get; set; }
    public Marks(string subjectVal, int marksVal)
    {
        subject = subjectVal;
        marks = marksVal;
    }
}

In the controller create an array of Model Class object and return it to View.

public ActionResult Index()
{
    Marks marks = new Marks[] { new Marks("English", 98), new Marks("Maths", 92), new Marks("Science", 83), new Marks("Physics", 99) };    
    return View(marks);
}

In the View simply use the Html.DropDownListFor() helper. In it’s second parameter pass a SelectList object that should contain 3 things:

• 1. Model
• 2. DataValueField
• 3. DataTextField

@Html.DropDownListFor(m => m.marks, new SelectList(Model.marks, "marks", "subject"))

Note: Use .Concat() method to add initial value (Text=”All” & Value=”All”) to dropdownlist like:

@Html.DropDownListFor(m => m.marks, new List<SelectListItem> { new SelectListItem { Text = "All", Value = "All" } }.Concat(new SelectList(Model.marks, "marks", "subject")))

Binding DropDownList from Model List

You can also pass List of class objects to the View and bind the DropDownList with them. In the same example I can create a List object in the action method and return it to the View.

public ActionResult Index()
{
    List<Marks> marks = new List<Marks>()
    {
        new Marks("Maths", 90),
        new Marks("Science", 80),
        new Marks("Physics", 95)
    };

    return View(marks);
}

Finally in the View do like this:

@model List<demo.Models.Marks>
@Html.DropDownList("myDDL", new SelectList(Model, "marks", "subject"))