Tag: DropDownList

Categories
ASP.NET Core

Group DropDownList Options in ASP.NET Core

Group DropDownList Options in ASP.NET Core

This blog explains how to group options in a DropDownList in ASP.NET Core. Let’s look at it with an example.

This example is going to bind the list of movie names grouped by the release year with the Selected Tag Helper.

The following is the MyViewModelSample class. It has two properties, SelectedMovieID and MoviesList. The SelectedMovieID property will have the selected value of the drop-down list. The MoviesListproperty is what sets up a list of movies.

MyViewModelSample.cs

using Microsoft.AspNetCore.Mvc.Rendering;
public class MyViewModelSample
{
    public int SelectedMovieID { get; set; }
    public List<SelectListItem> MoviesList { get; set; }
}

The following is a controller code. This controller has 2 action methods, Sample() and SampleSubmit(). In the Sample() action method, values are assigned and passed to the view. In SampleSubmit() action method, the selected movie ID is retrieved from the view and passed to another view to be displayed on the page.

HomeController.cs

using Microsoft.AspNetCore.Mvc.Rendering;
public IActionResult Sample()
{
        var vm = new MyViewModelSample();

        var group2018 = new SelectListGroup { Name = “2018” };
        var group2019 = new SelectListGroup { Name = “2019” };

        var movieList = new List<SelectListItem>()
        {
            new SelectListItem() { Value = “1”, Text = “Incredibles 2”, Group = group2018 },
            new SelectListItem() { Value = “2”, Text = “Ralph Breaks the Internet”, Group = group2018 },
            new SelectListItem() { Value = “3”, Text = “Aladdin”, Group = group2019 },
            new SelectListItem() { Value = “4”, Text = “The Lion King”, Group = group2019 },
            new SelectListItem() { Value = “5”, Text = “Frozen II”, Group = group2019 }
        };
        vm.MoviesList = movieList;
        return View(vm);
}

[HttpPost]
public IActionResult SampleSubmit(MyViewModelSample vm)
{
    return View(“SampleResult”, vm.SelectedMovieID);
}

The following is a sample view. @Model.MoviesList is assigned to asp-items to bind a list of movie names. The SelectedMovieID property is assigned to the asp-for, thus providing the selected result.

Sample.cshtml

@{
    Layout = null;
}

@model MyViewModelSample

 <h4>Group DropDownList Options in ASP.NET Core</h4>

<form asp-controller=”Home” asp-action=”SampleSubmit” method=”post”>
      <select asp-items=”@Model.MoviesList” asp-for=”SelectedMovieID”></select>
      <input type=”submit” value=”submit” />
</form>

Below is a result view. The selected move ID will be displayed here.

SampleResult.cshtml

@{
    Layout = null;
}

@model int

<h4>Group DropDownList Options in ASP.NET Core</h4>
<div> The selected movie ID: @Model</div>

The following image is the output of the code above. Here you can see the names of the movies grouped by the movie release year. When the page is submitted it returns the selected movie ID.

Group DropDownList Options

If you have any questions, please leave a comment below.