Ways to Bind Dropdown List in ASP.Net MVC

Introduction

I would like to share the ways to bind the Dropdown list in ASP.Net MVC.

Binding a dropdown is not as simple as we did in the Page-controller pattern in ASP.Net.

Objective

In this article, we will learn the following things.

• Various ways to bind the dropdown list in MVC
• Postback of Dropdown list in MVC

Method 1. Binding dropdown without using Model

1. Adding Controller
   
2. We have added BindingDropDownController.cs as a controller.
3. We have created a list of SelectListItems inside the "BindingDropDown" method and passed it to the View.

   List<SelectListItem> items = new List<SelectListItem>();
   items.Add(new SelectListItem
   {
       Text = "item1",
       Value = "1"
   });
   items.Add(new SelectListItem
   {
       Text = "item2",
       Value = "2"
   });
   

4. Passing a list of objects to the view
5. We are passing items to the View and then we will bind the dropdown using this ViewData

   ViewData["ListItems"] = items;

6. Description of SelectListItem
   
7. The SelectListitem class contains three fields: Selected, Text, and Value.
8. Adding View
9. To create a view, right-click on the BindingDropDown method, we will get the following screen.
   
10. Click on the "Add" button and then the view will be created.
11. Binding Drop down at View
12. We can bind the dropdown list using HTML.Dropdownlist (it is an HTML helper class).

    ListItems: <%= Html.DropDownList("ListItems") %>
    

13. Here we are passing "ListItems" that have been passed from the controller to the view.
14. Another overloaded method of the HTML.DropdownList class for binding a dropdown list.

    <%= Html.DropDownList("SelectedItem", (IEnumerable<SelectListItem>)ViewData["ListItems"]) %>
    

15. Running the application
16. When the application is run the following will be the output:
    

Method 2. Binding dropdown using Model

Using this way we will create a strongly typed view, in other words, the View will use a Model (a class file) as required.

For more details on binding a Model to the view kindly use the following link:

Bind List of Objects to View Using MVC

1. Creating a model

2. Creating a controller

3. Code Description

We have created an object of the UserModel class and passed it to the View.

var model = new UserModel()
{
    ListItems = items,
    SelectedItem = 1
};
return View(model);

Here we have SelectItem = 1 which has been used for the default selected index of the View.

4. Creating strongly typed View

To create a view, right-click on the BindingDropDown method, we will get the following screen.

• Select "strongly-typed view".
• Select "UserModel" from the View data class.
• Click on the "Add" button and we will get a strongly typed view.

5. Code at view

We can bind the dropdown list using the following lines of code.

<%= Html.DropDownList("SelectedItem", Model.ListItems) %>

Here we have "Model.ListItems" that has been passed from the view.

Here the Model is acting as an instance of the UserModel class.

For a strongly typed view, we have the following screen at the view.

When we create a strongly typed view, our view will always be inherited from the corresponding Model as in the following.

System.Web.Mvc.ViewPage<MVCtest.Models.UserModel>

6. Output

We will get the same output as we got in Method 1.

7. Displaying default values

We can use a third parameter to display the default value as in the following.

<%= Html.DropDownList("SelectedItem", Model.ListItems, "-----Select----") %>

Postback of DropDownList in MVC

Here we do not have an AutoPostback property in the dropdown list to cause the postback on SelectedIindexChange.
We need to write manual code to cause the postback in MVC.

Code at View

Description of code

We are using

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "TheForm" }))
{
    // form content here
}

Html.BeginForm takes various parameters that are the following:

1. First parameter: Index which is the Action
2. The second parameter: Is home which is the controller and is called Homecotroller. cs
3. Third parameter: Method=post
4. Fourth parameter: "Theform" which is the id of the form.

We are using another overload method of HTML.DropDownList in which we have defined the on-change event of the dropdown list.

Corresponding HTML code rendered on DOM

<form action="/Home/Index" id="TheForm" method="post">
    <select id="ID" name="ID" onchange="document.getElementById('TheForm').submit();">
        <option value="">--Select One--</option>
        <option value="1">Item1</option>
        <option value="2">Item2</option>
        <option value="3">Item3</option>
    </select>
</form>

Running the application

After running this application we will have a DropDown list in the DOM and when we change the value of the dropdown list the following will happen:

1. "Onchange" of the dropdown will be called.
2. It causes the form to be submitted with a Post method
3. Homecontroller will be called and the Index Action will be called.
4. Using Request.Form["Id"] we can get the value of the dropdown at the selected index (inside the index Action).

Conclusion

In this article we have learned the following:

Various ways to bind the dropdown
Postback of dropdownlist in MVC

Happy Coding !!