articles

Home / DeveloperSection / Articles / Dropdown list helper for creating dropdown list in ASP.NET MVC3

Dropdown list helper for creating dropdown list in ASP.NET MVC3

Anonymous User 25483 17-Apr-2012

In this article I am going to tell you that how to use DropDownList help method in ASP.NET MVC3 for creating simple dropdown list. Here I am using ViewBag object to pass ListItems to dropdown list.

First take a look at Model which I had created for this example.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace DropDownListDemo.Models

{

    public class CityModel

    {

        public string CityName { getset; }

    }

}


Here you can see that I had created one property name CityName which is used to store selected Item from dropdown list.

Now let’s take a look at method signature which is provided by HtmlDropDownList helper.

Html.DropDownList(

    string name,

    IEnumerable<SelectListItem> selectList,

    string optionLabel,

    object htmlAttributes)


And the meaning of the parameters:
  • name – the name of the HTML select element, and also the name of the view model property that is bound to the element
  • selectList – the list of options of the select list
  • optionLabel – the text that will be added at the top of the select list. Usually something like “Select …”
  • htmlAttributes – this is in common with all the other html helper. A dictionary or an anonymous type with the html attributes you want to add to the HTML element

All the parameters except the first one are optional: if only the name is provided, the helper will automatically bind the list item. Otherwise if both the name and selectList are provided, the select item will be bound and the select list will be the one supplied with the parameter.

The SelectListItemClass
This class has three properties:

string Text – the string that will be displayed as text of the option

string Value – the string that will be used as the value of the option

bool Selected – whether the option is selected

Now take a look at HomeController which I had created for populating dropdown list.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using DropDownListDemo.Models;

 

namespace DropDownListDemo.Controllers

{

    public class HomeController : Controller

    {

       

        [HttpGet]

        public ActionResult Index()

        {

            //Create a select list item which needs to be bound in

            //dropdown list.

            List<SelectListItem> cityList = new List<SelectListItem>();

 

            //Add city names in city list.

            cityList.Add(new SelectListItem

            {

                Text = "Allahabad",

                Value = "Allahabad"

            });

 

            cityList.Add(new SelectListItem

            {

                Text = "Agra",

                Value = "Agra"

            });

 

            cityList.Add(new SelectListItem

            {

                Text = "Lucknow",

                Value = "Lucknow"

            });

 

            cityList.Add(new SelectListItem

            {

                Text = "Kanpur",

                Value = "Kanpur"

            });

 

            cityList.Add(new SelectListItem

            {

                Text = "Noida",

                Value = "Noida"

            });

 

            //Add city list in ViewBag object.

            ViewBag.CityList = cityList;

           

 

            return View();

        }

 

        [HttpPost]

        public string Index(CityModel model)

        {

            //Return city name which is selected from dropdownlist

            return model.CityName;

        }

 

    }

}


After creating this controller we will need to create a strongly typed view which is look as follows.

@model DropDownListDemo.Models.CityModel

@{

    ViewBag.Title = "Index";

}

<h2>

    Here I am creating a simple dropdown</h2>

@using (Html.BeginForm())

{

    <label>

        Select City</label>

    @Html.DropDownList("CityName", (IEnumerable<SelectListItem>)ViewBag.cityList);

                                                                                

    <p>

        <input type="Submit" value="Submit" />

    </p>

}


Now after creating this view you need to save and build your application. When you execute your application then following output displayed.

Dropdown list helper for creating dropdown list in ASP.NET MVC3

From here when you select city and click on submit button then selected city will appear.

Kanpur

Thanks for reading this article. Please write your valuable comments so that I can improve this article.


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By