DropDownList Helper Data Binding in MVC

In this post 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 helper on the view page and to bind each DDL we will use different approach.

Let’s bind each DDL using different 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 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 compulsory parameter and it should be similar to 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")

If you would like to add any attribute like class attribute, that's the way

@Html.DropDownList("Country", null, "Select Country", new { @class = "form-control" })
 
Then, it will render 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 arranged.

2nd Approach

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

In above code, rather adding data in country.Add(new SelectListItem { Text = "", Value = "", Selected = "" }), I’m adding to Gender properties which is Id and Name.

3rd Approach

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

Again, database has two field Id and Name. Field Name is being used for data value field and data text field. “Male” will be the pre-selected value in DDL.

Complete Action Method Code

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

Complete View Page Code

I created a quick form and placed all three DDL helpers inside, when user will click the submit button form data will be passed to POST version of DDLBinding action method which will be in Home controller. By default, 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 user will click on submit button HTTP POST will execute and selected items will be passed to DDLBinding action method which has POST version with query string.

Here is the POST version of DDLBinding action method.

Hope this helps.