---
title: "Ways to bind Dropdown list in ASP.net MVC"  
description: "I would like to share the ways to bind the Dropdown list in ASP.net MVC."  
author: "Devesh Omar"  
published: 2014-05-19  
updated: 2020-02-03  
canonical: https://www.mindstick.com/articles/1399/ways-to-bind-dropdown-list-in-asp-dot-net-mvc  
category: "asp.net"  
tags: ["asp.net"]  
reading_time: 4 minutes  

---

# Ways to bind Dropdown list in ASP.net MVC

##### Introduction.

I would like to share the ways to bind the [Dropdown list](https://www.mindstick.com/forum/760/dropdown-list-open-hide-behind-another-dropdown-list-on-ie-7) in [ASP.net MVC](https://www.mindstick.com/articles/1571/start-with-asp-dot-net-mvc-4).

Binding dropdown is not simple as we did in Page- controller [pattern in asp.net](https://answers.mindstick.com/blog/107/repository-pattern-in-asp-dot-net-mvc-why-when-and-how-to-use-it).

##### Objective

##### In this article we will learn following things.

##### \
a) Various ways to bind the dropdown list in MVC

##### \
b) Postback of Dropdown list in MVC

##### Method 1: Binding without using Model.

##### \
1) Adding Controller.

##### \
![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image001.png)

a. We have added BindingDropDownController.cs as a controller.

##### \

b. We have Created list of SelectListItem inside “BindingDropDown” method and passed it to View.

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

\

2) Passing list of object to view.

We are passing items to View and then we will bind the dropdown using this ViewData.

ViewData["ListItems"] = items;

3) Description of SelectListItem.

![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image003.png)\

SelectListitem class contains three fields: Selected, Text, Value.

4) Adding View.

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

\
![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image005.png)\

b. Click on Add button, and then view will be created.

5) Binding Drop down at View

a. We can bind the dropdown list using html.Dropdownlist (it is [HTML helper](https://www.mindstick.com/forum/155772/how-we-create-custom-html-helper-in-asp-dot-net-mvc) class).

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

Here we are passing “ListItems”, which has been passed from [controller to view](https://www.mindstick.com/forum/12918/pass-an-object-from-controller-to-view-with-asp-dot-net).

b. Another overloaded method of html.DropdownList class for binding dropdown list.

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

\
6) Running the Application and following would be output.

![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image007.png)

Method 2: Binding using Model.

\
By this way we will create [strongly typed](https://www.mindstick.com/forum/298/strongly-typed-view-in-mvc) view, means View will to use Model (a class file) as per requirement.

For more details in Binding Model to view kindly follow below link

\

##### 1) Creating model.

##### \
![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image008.png)\

##### 2) Creating controller

##### \![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image009.png)\

##### 3) Code description

##### \
We have created object of UserModel class and passed it to View.

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

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

##### 4) Creating strongly typed View.

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

![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image011.png)\

a. Select strongly-typed view

b. Select “UserModel” from View data class.

c. Click on Add button and we will get strongly typed view.

##### 5) Code at view.

d. We can bind the dropdown list using following line of code.

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

Here we have “Model.ListItems” which has been passed from view.

Here Model is acting as a instance of UserModel class.

\
a. For strongly typed view we have following screen at view.

\
![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image012.png)\

b. When we create strongly typed view, our view will be always inherits from corresponding Model.

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

\
6) Output.

We will get same output as we get on Method 1.

7) Displaying [default values](https://www.mindstick.com/blog/10881/default-values).

We can use third parameter to display [default value](https://www.mindstick.com/forum/23023/default-value-when-using-singleordefault)

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

Postback of DropDownList in MVC.

Here we do not have AutoPostback property in dropdownlist to cause the postback on SelectedIindexChange.

We have to write manual code to cause postback in MVC.

\

##### Code at View

##### ![Ways to bind Dropdown list in ASP.net MVC](http://www.mindstick.com/MindStickArticle/bddcf250-2cc2-4e4e-b8ae-bd7ac3949188/Images/image013.png)\

##### escription of code.

##### \A. We are using :

##### \
<%using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "TheForm" }))

##### Html.BeginForm takes various parameters which are following

##### 1. First parameter: Index which is Action

##### \
2. Second parameter: Home which is controller and calls Homecotroller.cs

##### \
3. Third parameter: Method=post

##### \
4. Fourth parameter: Theform which is id of the form.

B. We are using another overload method of Html.DropDownList in which we have defined onchange event of dropdownlist.

Corresponding HTML code rendered on DOM.

<form action="/Home/Index" id="TheForm" method="post">

<select id="ID" name="ID" onchange="document.getElementById(&#39;TheForm&#39;).submit();"><option value="">--Select One--</option><option value="1">Item1</option><option value="2">Item2</option><option value="3">Item3

</option></select>

\
Running the application

\
After running this application we will have DropDown list at DOM and when we will change the value of dropdown list following would happen.

1) Onchange of dropdown will call.

2) It cause the form submit with [Post method](https://www.mindstick.com/forum/34130/how-to-add-data-into-the-post-method-of-a-form-in-extjs)

3) Homecontroller.cs will call and the Index Action will call.

4) Using Request.Form[“Id”] we can get value of dropdown at selected index change(inside index Action).

\
Conclusion

\
In this article we have learn following things

c) various ways to bind the dropdown

d) Postback of Dropdownlist in MVC

---

Original Source: https://www.mindstick.com/articles/1399/ways-to-bind-dropdown-list-in-asp-dot-net-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.