Create DropDownList Using DropDownList Helper in Web API

Introduction

This article explains how to use the DropDrownList helper for creating a DropDrownList. Here I provide a simple example. The DropDownList control needs two things, first select the value from the ViewData and display the item list in the dropdown list, we use the ViewBag object for displaying the data in the dropdownlist.

Now we see the Method signature of the DropdownList helper:

  1. Html.DropDownList(  
  2. tring name,  
  3. IEnumerable<SelectListItem> selectList,  
  4. String optionLable,  
  5. object htmlAttributes)

Description of the parameters:

  • name: It selects the element. It is a view model property name for binding to the element.
  • selectList: The choice list item of the select list.

  • optionLable: It defines the normal text that is added at the top of the Select list such as "select" and here we add "---select---".

  • htmlAttributes: It is the dictionary type HTML attribute that we can add with the HTML attribute.

The "SelectListItem" Class initializes the new instance of the SelectListItem class. It has the following properties:

  • Text: The use of this, gets and sets the text of the selected item.

  • Value: The use of this gets and sets the value of the selected item.

  • Selected: The use of this, gets or sets the value of the selected item from the SelectList.

Let's see an example of "DropDownList".

Step 1

Create the Web API application as in the following:

  • Start Visual Studio 2012.

  • From the start window select "New Project".

  • In the Template Window select "Installed" -> "Visual C#" -> "Web".

  • Select "ASP.NET MVC 4 Web Application" and click on "OK".

    drop.jpg

  • From the "MVC4 Project" window select "Web API".

    drop1.jpg

Step 2

Create a model class "State.cs":

  • In the "Solution Explorer".

  • Right-click on the "model" -> "add" -> "class".

  • Select "Installed" -> "Visual C#" and select "Class".

    drop2.jpg

  • Click the "OK" button.

Add this code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;   
  5. namespace Dropdownhelper.Models  
  6. {  
  7.     public class States  
  8.     {  
  9.         public string StateName { getset; }  
  10.     }  
  11. } 

Step 3

Now we write a "DropDownList" in the "HomeController" file.

  • In the "Solution Explorer".

  • Select "Controller" -> "HomeController".

Add this code for writing the DropDownList:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using Dropdownhelper.Models;  
  7. namespace Dropdownhelper.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         [HttpGet]   
  12.         public ActionResult Index()  
  13.         {  
  14.         List<SelectListItem> statelist = new List<SelectListItem>();  
  15.             statelist.Add(new SelectListItem  
  16.             {  
  17.                 Text = "Utter Pradesh",  
  18.                 Value = "utter Pradesh"  
  19.             });  
  20.             statelist.Add(new SelectListItem  
  21.             {  
  22.                 Text = "Delhi",  
  23.                 Value = "Delhi"  
  24.             });  
  25.             statelist.Add(new SelectListItem  
  26.             {  
  27.                 Text = "Madhya Pradesh.",  
  28.                 Value = "Madhya Pradesh."  
  29.             });  
  30.             statelist.Add(new SelectListItem  
  31.             {  
  32.                 Text = "Assam",  
  33.                 Value = "Assam"  
  34.             });  
  35.             statelist.Add(new SelectListItem  
  36.             {  
  37.                 Text = "Andra Pradesh",  
  38.                 Value = "Andra Pradesh"  
  39.             });  
  40.             statelist.Add(new SelectListItem  
  41.             {  
  42.                 Text = "Goa",  
  43.                 Value = "Goa"  
  44.             });  
  45.             ViewBag.StateList = statelist;  
  46.             statelist.Add(new SelectListItem  
  47.             {  
  48.                 Text = "Kerala",  
  49.                 Value = "Kerala"  
  50.             });  
  51.             ViewBag.StateList = statelist;  
  52.             statelist.Add(new SelectListItem  
  53.             {  
  54.                 Text = "Rajasthan",  
  55.                 Value = "Rajasthan"  
  56.             });  
  57.             ViewBag.StateList = statelist;  
  58.             return View();  
  59.         }  
  60.         [HttpPost]  
  61.         public string Index(States temp)  
  62.         {  
  63.             return temp.StateName;  
  64.         }  
  65.     }  
  66. } 

Step 4

Now we write the method of the DropDownList Helper in "index.cshtml" as in the following:

  • In the "Solution Explorer".

  • Select "Views' -> "Home" -> "index.cshtml".

    drop3.jpg

Add this line of code:

  1. @model Dropdownhelper.Models.States  
  2. @{  
  3.     ViewBag.Title = "Index";  
  4. }  
  5. <h2>  
  6.    Creating a dropdown list of States in India</h2>  
  7. @using (Html.BeginForm())  
  8. {  
  9.     <label>  
  10.         Select City</label>  
  11.        @Html.DropDownList("StateName", (IEnumerable<SelectListItem>)ViewBag.statelist,"---Select---");  
  12.      <p>  
  13.         <input type="Submit" value="Submit" />  
  14.     </p>  
  15. } 

Step 5

Execute the application "Press F5".

drop4.jpg

Select an item click on the submit button.

drop5.jpg

It displays the selected State:

drop7.jpg


Similar Articles