Post
Ask Question

DropDownList in ASP.Net MVC

Introduction

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

Step 1. Right-click on the Model folder in Solution Explorer, then 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.

SubjectModel

The Model SubjectModel.cs class has a SubjectList property of List type and 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 the 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 the 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 drop-down list, in other words, an HTML select element. We are using the property SubjectList, which 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>  <option value="4">

Dropdown1

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--")%>  

Dropdown2.jpg


Similar Articles