HTML Dropdown List with Checkboxes in ASP.NET MVC

HTML.DropDownListFor is a helper method in ASP.NET MVC that is used to create a dropdown list from a collection of items. However, sometimes you may need to allow users to select multiple items from the list. In this scenario, we can enable checkboxes for multiselect in HTML.DropDownListFor. This blog post will provide an example of how to do this using a model class, view, and controller method.

Step 1: Model class

First, we need to create a model class for our example. We will call it Employee, and it will have the following properties:

• Name: a string representing the name of the employee
• FruitList: a list of FavourateFruit objects representing the available fruits
• SelectedFruitIds: a list of integers representing the selected fruit IDs

Our FavourateFruit class will have the following properties:

• Id_PK: an integer representing the ID of the fruit
• Name: a string representing the name of the fruit
• IsSelected: a boolean representing whether or not the fruit is selected

Here is the code for our model class:

public class Employee
{
    public string Name { get; set; }
    public List<FavourateFruit> FruitList { get; set;}
    public List<int> SelectedFruitIds { get; set; }
}

public class FavourateFruit
{
    public int Id_PK { get; set; }
    public string Name { get; set; }
    public bool IsSelected { get; set; }
}

Step 2: View

Next, we need to create a view to display our dropdown list with checkboxes. We will use HTML.DropDownListFor and enable checkboxes for multiselect using jQuery.

@model Employee

@using (Html.BeginForm())
{
    @Html.LabelFor(m => m.Name)
    @Html.TextBoxFor(m => m.Name)

    @Html.LabelFor(m => m.SelectedFruitIds)
    

    @Html.DropDownListFor(m => m.SelectedFruitIds, new MultiSelectList(Model.FruitList, "Id_PK", "Name", Model.SelectedFruitIds), new { @multiple = "multiple" })

    
}

Note: If you have already defined Jquery and Bootstrap CSS and Bootstrap JS Files then do not add this files again.

Step 3: Controller method

Finally, we need to create a controller method to handle the form submission and retrieve the selected fruits from the model. We will pass the model to the view and handle the form submission in the same method.

public ActionResult Index()
{
    var model = new Employee()
    {
        FruitList = new List<FavourateFruit>()
        {
            new FavourateFruit() { Id_PK = 1, Name = "Apple", IsSelected = false },
            new FavourateFruit() { Id_PK = 2, Name = "Banana", IsSelected = false },
            new FavourateFruit() { Id_PK = 3, Name = "Orange", IsSelected = false },
            new FavourateFruit() { Id_PK = 4, Name = "Mango", IsSelected = false },
        },
        SelectedFruitIds = new List<int>()
    };

    return View(model);
}

[HttpPost]
public ActionResult Index(Employee model)
{
    var selectedFruits = model.FruitList.Where(x => model.SelectedFruitIds.Contains(x.Id_PK)).ToList();

    // do something with selectedFruits

    return View(model);
}

Conclusion:

In this blog post, we have demonstrated how to enable checkboxes for multiselect in HTML.DropDownListFor using a model class, view, and controller method. By following these steps, you can allow users to select multiple items from a dropdown list with