Jul 17, 2016

ASP.NET Core MVC: Enums with Select TagHelper

In this post, we will see how to use select tag helper in ASP.NET Core MVC and how to bind select tag helper to model data or enum values. The following environment is used for this post:

ASP.NET Core 1.0.1

Dapper 1.50.2

Visual Studio 2015 update 3

For the demo, let us assume we have following Department enum


 public enum Department
        {
            SALES,
            FINANCE,
            ENGINEERING,
            MARKETING
        }

In RegisterViewModel, we have property of Department


 public class RegisterViewModel
    {
	public Department Department { get; set; }
	//...other properties
}

On View, Register.cshtml, we can specify the select and bind the select to the property by using the asp-for attribute


<select asp-for="Department">
</select>

Approach 1:

One way to define options is to use HTML Option tag


<select asp-for="Department">
  <option value="0">SALES</option>
  <option value="1">FINANCE</option>
<!-- other options..... -->
</select>

It is not ideal because if there is any change in Enum we have to modify it in all views every time.

Approach 2:

We can iterate enum and create a list of SelectListItem and assign to ViewBag in Controller.


        [HttpGet]
        [AllowAnonymous]
        public IActionResult Register(string returnUrl = null)
        {
            var deptList = new List<SelectListItem>();
            deptList.Add(new SelectListItem
            {
                Text = "Select",
                Value = ""
            });
            foreach (Department eVal in Enum.GetValues(typeof(Department)))
            {
                deptList.Add(new SelectListItem { Text = Enum.GetName(typeof(Department), eVal), Value = eVal.ToString() });
            }
            ViewBag.Departments = deptList;

            ViewData["ReturnUrl"] = returnUrl;
            return View();
        }

and use this ViewBag item as asp-items.



  <select asp-for="Department" asp-items="ViewBag.Departments"></select>

This is good approach if you have to apply conditional filter.

Approach 3:

ASP.NET Core MVC has in built GetEnumSelectList method in HtmlHelper.


<select asp-for="Department" asp-items="Html.GetEnumSelectList<Department>()"></select>

To add default option:


  <select asp-for="Department" asp-items="Html.GetEnumSelectList<Department>()">
                <option selected="selected" value="">Please select</option>
            </select>

If you assign value to Department property, it will automatically assigned to dropdownlist. Suppose you want to select Engineering as default value


 	RegisterViewModel vm = new RegisterViewModel();
            vm.Department = Department.ENGINEERING;
            return View(vm);

then Dropdown will have ENGINEERING option selected.

Conclusion:

In this blog post, we have seen different ways to bind Enum data to dropdown list. The easiest way is to use the inbuilt GetEnumSelectList HtmlHelper method.

Hope, It helps. Enjoy ASP.NET Core MVC !!