Ways to Bind Dropdown List in ASP.Net MVC

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 !!