Post
Ask Question

DropDownList in ASP.Net MVC

This article explains how to create a dropdownlist, in other words the select element of HTML in ASP.Net MVC application. We create a subject list that will be shown in a Dropdownlist. So let's start.

Step 1

Right-click on the Model folder in Solution Explorer than click on "Add New Item".

We get an Add New Item Window. Select "Class" and give a class name, like SubjectModel.cs then click on the "Add" button.

MVC-01.png

The Model SubjectModel.cs class has a SubjectList property of List type and has a constructor that initializes SubjectList so that a SelectListItem can be added to it.

  1. using System.Collections.Generic;  
  2. using System.ComponentModel;  
  3. using System.Web.Mvc;  
  4.   
  5. namespace MvcApplication.Models  
  6. {  
  7.     public class SubjectModel  
  8.     {  
  9.         public SubjectModel()  
  10.         {  
  11.             SubjectList = new List<SelectListItem>();  
  12.         }  
  13.   
  14.         [DisplayName("Subjects")]  
  15.         public List<SelectListItem> SubjectList  
  16.         {  
  17.             get;  
  18.             set;  
  19.         }  
  20.     }  
  21. } 

Step 2

Create a Controller (HomeController.cs) and define the action "result(Index())" in it. This action creates a list of subjects and passes it to the view.

  1. using System.Web.Mvc;  
  2. using MvcApplication.Models;  
  3. using System.Collections.Generic;  
  4. namespace MvcApplication.Controllers  
  5. {  
  6.     public class HomeController : Controller  
  7.     {  
  8.         public ActionResult Index()  
  9.         {  
  10.             SubjectModel model = new SubjectModel();   
  11.             model.SubjectList.Add(new SelectListItem { Text = "Physics", Value = "1" });  
  12.             model.SubjectList.Add(new SelectListItem { Text = "Chemistry", Value = "2" });  
  13.             model.SubjectList.Add(new SelectListItem { Text = "Mathematics", Value = "3" });  
  14.             return View(model);  
  15.         }       
  16.     }  
  17. } 

Step 3

Create a View (Index.aspx) that has a label and dropdown list. Our Index.aspx view design is:

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication.Models.SubjectModel>" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml" >  
  6. <head runat="server">  
  7.     <title>Index</title>  
  8. </head>  
  9. <body>  
  10.   <%: Html.LabelFor(model=> model.SubjectList) %>  
  11.   <%: Html.DropDownListFor(model => model.SubjectList, Model.SubjectList)%>  
  12. </body>  
  13. </html> 

Now we take a look at the view code.

  1. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication.Models.SubjectModel>" %>  

This line of code means Page directory inherits the model SubjectModel on the view so we can access data on the view through the model.

  1. <%: Html.LabelFor(model=> model.SubjectList) %>  

In this line we are using the HTML Helper LabelFor method to create a label. We are using the SubjectList property of SubjectModel so it shows DisplayName of the property. It generates the following HTML code:

 

  1. <label for="SubjectList">Subjects</label>  
  2.   
  3. <%: Html.DropDownListFor(model => model.SubjectList, Model.SubjectList)%>   

 

In this line we are using the HTML Helper DropDownListFor method to create a dropdownlist, in other words HTML select element. We are using the property SubjectList that contains all list items of subjects that bind to it. It generates the following HTML code.

  1. <select id="SubjectList" name="SubjectList">  
  2.     <option value="1">Physics</option>  
  3.     <option value="2">Chemistry</option>  
  4.     <option value="3">Mathematics</option>  
  5. </select>  

MVC-02.png

We can add "Select" as the first element in the dropdown list by passing "Select" as a parameter in the "DropDownListFor()" method of HTML Helper.

  1. <%: Html.DropDownListFor(model => model.SubjectList, Model.SubjectList,"--Select--")%>  

MVC-03.png


Recommended Ebook

Diving Into ASP.NET WebAPI

Download Now!
Similar Articles