DropDownList Helper Data Binding in MVC

In this article you will learn how to bind data to a DropDownList helper in MVC. We will try binding data to a DropDownList from a List<SelectListItem>, a List<Model> and also from a database.

I've created three DDL helpers on the view page and to bind each DDL we will use a different approach.

Let's bind each DDL using various approaches.

1st Approach

In this approach, I am going to bind a Country DDL with List<SelectListItem> data; here is the code I'm using in the action method.

Notice two things in above code

First: I have created a List<SelectListItem> that is IEnumerable<SelectListItem> and adding 3 items to the country object. The IEnumerable<SelectListItem> created above is added to the ViewBag with the name Country. This is how we pass the IEnumerable<SelectListItem> implicitly to the DDL helper shown below.

@Html.DropDownList("Country", String.Empty)

In the above code, the helper accepts two parameters. The first parameter named DDL ("Country") is a compulsory parameter and it should be similar to the ViewBag (ViewBag.Country) name and the second, optionLabel, is not compulsory. The optionLabel is generally used the for first option in DDL. For example, if I use:

@Html.DropDownList("Country", "Select Country")

Then, it will render the following output.

Second: We can pass the IEnumerable<SelectListItem> explicitly to the DropDownList helper or we can add the IEnumerable<SelectListItem> to the ViewBag using the same name for the SelectListItem as the model property, look at the code how four different overloads are arranged.

2nd Approach

In this approach, I am going to bind Language DDL with List<Gender> data. Here the Gender is a predefined model; here is the code I'm using in the action method.

In the above code, rather than add data in country.Add(new SelectListItem { Text = "", Value = "", Selected = "" }), I'm adding to Gender properties that are Id and Name.

3rd Approach

In this approach, I am going to bind Gender DDL with database data.

Again, the database has two fields, Id and Name. The Name field is for a data value field and data text field. "Male" will be the pre-selected value in the DDL.

Complete Action Method Code

Now let me put all the above approaches in the same action method.

Complete View Page Code

I created a quick form and placed all three DDL helpers inside, when the user clicks the submit button the form data will be passed to the POST version of the DDLBinding action method that will be in the Home controller. By default, the Html.BeginForm overload takes no parameters. The no parameter version defaults to posting the form data to the POST version of the same action method and controller.

Now, when the user clicks on the submit button the HTTP POST will execute and the selected items will be passed to the DDLBinding action method that has a POST version with a query string.

Here is the POST version of the DDLBinding action method:

Hope this helps.