Home > DeveloperSection > Articles > Ways to bind Dropdown list in ASP.net MVC

Ways to bind Dropdown list in ASP.net MVC


ASP.Net ASP.Net 
Ratings:
0 Comment(s)
 6789  View(s)
Rate this:

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 dropdown is not simple as we did in Page- controller pattern in asp.net.

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

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

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

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 class).

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

Here we are passing “ListItems”, which has been passed from controller to view.

 

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.

  

Method 2:   Binding using Model.

By this way we will create strongly typed 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

 

2)      Creating controller

Ways to bind Dropdown list in ASP.net MVC

 

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

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

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.

We can use third parameter to display default value

<%= 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

 

 

Description 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

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


Don't want to miss updates? Please click the below button!

Follow MindStick