DropDownList in ASP.Net MVC

Sandeep Singh Shekhawat
Jun 12, 2013
207.2k
0
3
Article

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.

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>