Binding Enum Data to DropDownList in ASP.NET Core

Binding enum values to a DropDownList in ASP.NET Core is a common requirement for developers. This article demonstrates how to achieve this using the Syncfusion DropDownList component within an ASP.NET Core application.

Create the View

In your view, use the Syncfusion DropDownList component to display the enum values.

@model SyncfusionCoreWebApplication.Controllers.MovieViewModel

<form method="post">
    <div class="control-wrapper">
        <div id="default" style='padding-top:75px;margin:130px auto;width:350px;'>
            <ejs-dropdownlist id="dropdown" ejs-for="MovieCategory" dataSource="ViewBag.MovieCategory" placeholder="Select a category">
                <e-dropdownlist-fields Text="Text" Value="Value"></e-dropdownlist-fields>
            </ejs-dropdownlist>
            <div id="submitbutton">
                <ejs-button id="submitButton" content="Submit"></ejs-button>
            </div>
        </div>
    </div>
</form>

In the view, the Syncfusion DropDownList component is used to display the enum values. The dataSource attribute is set to ViewBag.MovieCategory which is the list of SelectListItem prepared in the controller. The ejs-for attribute is set to MovieCategory which is the property in the ViewModel that will hold the selected value. When the form is submitted, the selected value is posted back to the server.

Create the ViewModel

First, define a view model that will represent the data structure for your view.

public class MovieViewModel
{
    public string MovieCategory { get; set; }
}

public enum MovieCategory
{
    Action = 1,
    Comedy,
    Drama,
    Horror,
    SciFi
}

In above snippet, a ViewModel named MovieViewModel is created with a property MovieCategory. This property will hold the selected value from the DropDownList. Also, an enum MovieCategory is defined which represents different categories of movies. These enum values will be the options in the DropDownList.

Prepare the Controller

In your controller, create methods to convert the enum values to a list of SelectListItem which can be used by the DropDownList.

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;
using System.Collections.Generic;
using System.Linq;

namespace SyncfusionCoreWebApplication.Controllers
{
    public class HomeController : Controller
    {
        private IEnumerable<SelectListItem> CastMovieCategoryToList()
        {
            return Enum.GetValues(typeof(MovieCategory))
                .Cast<MovieCategory>()
                .Select(mc => new SelectListItem
                {
                    Value = ((int)mc).ToString(),
                    Text = mc.ToString()
                });
        }

        public IActionResult Index()
        {
            var viewModel = new MovieViewModel
            {
                MovieCategory = string.Empty
            };
            ViewBag.MovieCategory = CastMovieCategoryToList();
            return View(viewModel);
        }

        [HttpPost]
        public IActionResult Index(MovieViewModel model)
        {
            var selectedMovieCategory = (MovieCategory)Int32.Parse(model.MovieCategory);
            ViewBag.MovieCategory = CastMovieCategoryToList();
            return View(model);
        }
    }
}

In the controller, a private method CastMovieCategoryToList is defined which converts the enum values to a list of SelectListItem. This list is then assigned to ViewBag.MovieCategory which can be used by the DropDownList in the view. The Index method initializes the ViewModel and returns the view. The [HttpPost] Index method is called when the form is submitted. It parses the selected value back to the enum type.

Sample

For a complete working example, you can refer to the provided sample project by Syncfusion: DropdownList with Enum Data Sample.