Dropdown Lists in ASP.NET MVC

Learn to create custom dropdown lists in ASP.NET MVC applications. Define a model for custom items, populate it in the controller, and render the list in the view using HTML helpers. Handle selections in the controller for a seamless user experience. This approach offers precise control over dropdown contents while keeping MVC separation intact.

Introduction

In a web application built using ASP.NET MVC, it often becomes necessary to include dropdown lists for selecting options from a predefined set of values. While ASP.NET MVC provides a way to create dropdown lists using the HTML <select> element, sometimes we may need to display custom items in the dropdown list rather than just a simple list of values from a database table.

In this BLOG, we will explore how to create a dropdown list in ASP.NET MVC that contains custom items and send it to the view using code snippets.

Step 1. Create a Model and Populate Data

First, we need to define a model class that represents the custom item in the dropdown list. Let's call it CustomItemModel and include properties such as Id and Name. Populate this model with the desired custom items in the controller.

public class CustomItemModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class HomeController : Controller
{
    public ActionResult Index()
    {
        List<CustomItemModel> customItems = new List<CustomItemModel>
        {
            new CustomItemModel { Id = 1, Name = "Custom Item 1" },
            new CustomItemModel { Id = 2, Name = "Custom Item 2" },
            new CustomItemModel { Id = 3, Name = "Custom Item 3" }
        };

        ViewBag.CustomItems = customItems;

        return View();
    }
}

Step 2. Create a View and Render the Dropdown List

Next, we need to create a view that will render the dropdown list using the custom items. We can utilize the HTML helper methods provided by ASP.NET MVC to generate the necessary HTML code for the dropdown list.

@{
    List<CustomItemModel> customItems = ViewBag.CustomItems;
    SelectList customItemList = new SelectList(customItems, "Id", "Name");
}

@Html.DropDownList("CustomItemDropdown", customItemList, "--- Select Custom Item ---")

Here, we are creating a SelectList object from the customItems list and passing it to the DropDownList HTML helper method. The first parameter of DropDownList specifies the name of the dropdown list, while the second parameter is the SelectList. The third parameter represents the default option displayed at the top of the dropdown list.

Step 3. Handle the Selected Value in the Controller

Finally, we need to handle the selected value of the dropdown list in the controller to perform further actions. We can access the selected value through the request parameters.

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Index(FormCollection form)
    {
        int selectedItemId = Convert.ToInt32(form["CustomItemDropdown"]);

        // Perform actions based on the selected item

        return View();
    }
}

In the above code snippet, we are using the FormCollection object to retrieve the selected value of the dropdown list. We assume that the dropdown list has the name CustomItemDropdown.

That's it! You have successfully implemented a dropdown list with custom items in ASP.NET MVC and sent it to the view using code snippets. This approach allows for greater control over the items displayed in the dropdown list while maintaining a clean separation between the model, view, and controller.