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.
- using System.Collections.Generic;
- using System.ComponentModel;
- using System.Web.Mvc;
-
- namespace MvcApplication.Models
- {
- public class SubjectModel
- {
- public SubjectModel()
- {
- SubjectList = new List<SelectListItem>();
- }
-
- [DisplayName("Subjects")]
- public List<SelectListItem> SubjectList
- {
- get;
- set;
- }
- }
- }
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.
- using System.Web.Mvc;
- using MvcApplication.Models;
- using System.Collections.Generic;
- namespace MvcApplication.Controllers
- {
- public class HomeController : Controller
- {
- public ActionResult Index()
- {
- SubjectModel model = new SubjectModel();
- model.SubjectList.Add(new SelectListItem { Text = "Physics", Value = "1" });
- model.SubjectList.Add(new SelectListItem { Text = "Chemistry", Value = "2" });
- model.SubjectList.Add(new SelectListItem { Text = "Mathematics", Value = "3" });
- return View(model);
- }
- }
- }
Step 3
Create a View (Index.aspx) that has a label and dropdown list. Our Index.aspx view design is:
- <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication.Models.SubjectModel>" %>
-
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title>Index</title>
- </head>
- <body>
- <%: Html.LabelFor(model=> model.SubjectList) %>
- <%: Html.DropDownListFor(model => model.SubjectList, Model.SubjectList)%>
- </body>
- </html>
Now we take a look at the view code.
- <%@ 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.
- <%: 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:
- <label for="SubjectList">Subjects</label>
-
- <%: 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.
- <select id="SubjectList" name="SubjectList">
- <option value="1">Physics</option>
- <option value="2">Chemistry</option>
- <option value="3">Mathematics</option>
- </select>
![MVC Dropdownlist Example 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.
- <%: Html.DropDownListFor(model => model.SubjectList, Model.SubjectList,"--Select--")%>
![MVC Dropdownlist Example MVC-03.png]()