What is DropDownList and explain how to use DropDownList Helper in MVCSeptember 6, 2022

HTML Helper Class

In MVC, we use HTML Helpers to return a string. These classes can create various controls programmatically and can be used in View for HTML render. It is not compulsory to use Helper class. These classes are lightweight compared to ASP.NET Web Form controls because they do not have any event models. MVC has inbuilt helper methods and we can also create custom HTML helpers. Asp.Net MVC has impeccable support for so many updated features and overloading methods in MVC that saves time and provides flawless functionality.

There are three types of Helpers:

1. Inline Helpers
2. Inbuilt Helpers
   1. Standard Helpers
   1. Strongly-Typed Helpers
   1. Templated Helpers
3. Custom Helpers

What is DropDownList?

In computer GUI (Graphical User Interfaces), a menu that offers a list of options. The title of the menu, one of the available options, or the item which is selected is always displayed. Users can view and choose from those options.

In the ASP.NET MVC application, a DropDownList is a collection of SelectListItem objects. According to the needs, we can either write a static code the values or we can retrieve the values from a database.

Few parameters are important to use in the application:

1. MvcHtmlString: This is an HTML code string that is returned by the DropDownList method and shows the selected element of the code in HTML.
2. string name: This is a string parameter that Is passed to the method which also refers to the name of the DropDownList
3. IEnumerable<SelectListItem>: This is a list of the SelectListItem objects specifically the names of the options available to the options and their value IDs.
4. String optionLabel: This is a parameter that helps to specify the first label of the list. This parameter is optional.
5. Object HTML attributes: This is a collection of HTML attributes that helps to specify the dropdown list related objects.

As we discussed in the HTML Helper class, it provides two extension methods to generate the <select> element:

1. DropDownList()
2. DropDownListFor()

• DropDownList() HTML Helper Method

The DropDownList() HTML Helper Method uses the following syntax which takes three parameters:

DropDownList(string name, IEnumerable<SelectListItem> selectList, string optionLabel)

Here is an example of a DropDownList that will generate a list of cities. The first option of the list will be “Select City”.

@Html.DropDownList("Cities", new List
{ 
      new SelectListItem { Text = "Ahmedabad", Value = "1", Selected=true},
      new SelectListItem { Text = "Gandhinagar", Value = "2"},
      new SelectListItem { Text = "Surat", Value = "3"}
}, "Select City")

Usually, we avoid hard-coding the DropDownList values within the code itself because when we need to add or remove the city, then the code needs to be modified every time.

A better approach would be to fetch the data from the database. Here is the example of fetching the data from a database table:

City.cs

namespace HTML_HELPER.Models
{
    public class City
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

We should pass the list of Cities from the Controller store them in a ViewBag as below:

namespace HTML_HELPER.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            List<City> ListCities = new List<City>()
            {
                new City() {Id = 1, Name="Ahmedabad" },
                new City() {Id = 2, Name="Surat" },
                new City() {Id = 3, Name="Gandhinagar" },
            };

            ViewBag.Cities = new SelectList(ListCities, "Id", "Name");

            return View();
        }
    }
}

Or

namespace HTML_HELPER.Controllers
{
    public class EmployeeController : Controller
    {
        public ActionResult Index()
        {
            List<SelectListItem> items = new List<SelectListItem>();
            items.Add(new SelectListItem { Text = "Ahmedabad", Value = "1" });
            items.Add(new SelectListItem { Text = "Surat", Value = "2" });
            items.Add(new SelectListItem { Text = "Gandhinagar", Value = "3" });
            ViewBag.Departments = items;

            return View();
        }
    }
}

After this procedure, the Index view access the City list from ViewBag

@Html.DropDownList(“Cities”, @ViewBag.Cities as List<SelectListItem>, “Select City"{ @class = “form-control”})

• DropDownListFor() HTML Helper Method

This method is a strongly typed extensive method. It is used to generate an <select> element for the lambda function expression property. This method will bind a specific property of a model object to the list of dropdown control. Hence, it automatically displays the list of items in the dropdown.

Here is an example:

Student.cs

namespace HTML_HELPER.Models
{
    public class Student
    {
        public int StudentID{ get; set; }
        public string StudentName { get; set; }    
        public string Gender { get; set; }
        public int DepartmentID { get; set; }
    }
}

Department.cs

namespace HTML_HELPER.Models
{
    public class Department
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    public enum Gender
    {
        Male,
        Female
    }
}

Next, we will modify the StudentConreoller

namespace HTML_HELPER.Controllers
{
    public class StudentController : Controller
    {
        public ActionResult Index()
        {
            List<Department> ListDepartments = new List<Department>()
            {
                new Department() {Id = 1, Name="IT" },
                new Department() {Id = 2, Name="Civil" },
                new Department() {Id = 3, Name="Mech" },
            };
            ViewBag.Departments = ListDepartments;

            Student stu = new Student()
            {
                StudentId = 1,
                StudentName = "Ishan",
                Gender = "Male",
                DepartmentID = 1
            };

            return View(stu);
        }
    }
}

Next, we will modify the index.cshtml file

@using HTML_HELPER.Models

@model Student
@Html.DropDownListFor(stu => stu.Gender,
                    new SelectList(Enum.GetValues(typeof(Gender))),
                    "Select Gender",
                    new { @class = "form-control" })
@Html.DropDownList("Department",
                    new SelectList(ViewBag.Departments, "Id", "Name"),
                    "Select Department",
                    new { @class = "form-control" })

How to Use DropDownList Helper in MVC application?

1. Create an ASP.NET MVC Web Application
2. Choose the option Internet Application
3. Add a Controller StudentController
4. Setup an Entity Framework
5. Connect the Database
6. Create the Data Connection Object
7. Modify the StudentController.cs as below:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using DropDownListApp_MVC.Models;  
  
namespace DropDownListApp_MVC.Controllers  
{  
    public class StudentController : Controller  
    {  
        StudentEntities objStudentEntities = new StudentEntities();  
        public ActionResult Index()  
        {  
            ViewBag.List = new SelectList(objStudentEntities.Departments.Select(r => r.DepartmentName));  
            return View();  
        }    
    }  
}

8. Add View as below:

@{  
    ViewBag.Title = "Index";  
}  
  
<h2>Index</h2>  
  
@Html.DropDownList("List", "------Select List------")

Conclusion

In this article, we have discussed the DropDownList Helper method and its types. We also discussed how to create and manage the DropDownList.

Author Bio: Vinod Satapara – Technical Director, iFour Technolab Pvt. Ltd.

Technocrat and entrepreneur of a reputed Word Add-in Development Company with years of experience in building large scale enterprise web, cloud and mobile applications using latest technologies like ASP.NET, CORE, .NET MVC, Angular and Blockchain. Keen interest in addressing business problems using latest technologies and help organization to achieve goals.