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-02.png]( "MVC Dropdownlist Example")
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-03.png]( "MVC Dropdownlist Example")