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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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.

Remember that by using jQuery Validation you can perform client side validation of dropdownlist controls easily.

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.

Model

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

1
2
3
4
5
6
7
8
9
10
public class Marks
{
    public string subject { get; set; }
    public int marks { get; set; }
    public Marks(string subjectVal, int marksVal)
    {
        subject = subjectVal;
        marks = marksVal;
    }
}
Related tutorial – How to send HTML Emails with Attachments in ASP.NET MVC
Controller

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

1
2
3
4
5
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);
}
View

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
1
@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:

1
@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.

1
2
3
4
5
6
7
8
9
10
11
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:

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

I have written 2 very useful tutorial on Validation in ASP.NET MVC. You should check them:

1. Server Side Validation in ASP.NET Core

2. Client Side Validation in ASP.NET Core

< Previous
Next >

SHARE THIS ARTICLE

  • linkedin
  • reddit

Related Tutorials:

Blazor paging sorting Blazor Number Paging and Sorting
How to perform Localization with Portable Object (PO) files in an ASP.NET Core
Kubernetes Volume emptyDir and SSL Mount to volume
yogihosting

ABOUT THE AUTHOR

I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate