Creating a DropDownList for Enums in ASP.NET MVC

Table of Contents

• Introduction
• Approach 1: Populate DropDownList by SelecteListItem using Enum
• Approach 2: Populate the DropDownList by HTML Helper method for the Enum
• Conclusion

Introduction

I will be using two approaches to populate a DropDownList. The first one is simple in which I populate the DropDownList by an enum using SelectListItem while in the other approach, I create an HTML Helper method to populate the DropDownList. Let's see each one.

Create an enum, ActionType, under the Models folder, as in the following code snippet.

namespace DropdownExample.Models
{
    public enum ActionType
    {
        Create=1,
        Read=2,
        Update=3,
        Delete=4
    }
}

Approach 1: Populate DropDownList by SelecteListItem using Enum

I populate the DropDownList using a SelectListItem type list. So we need to first create a list from an enum and thereafter that list binds with the DropDownListFor method of the HTML Helper class on the view. Create a model (ActionModel class) under the Models folder.

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace DropdownExample.Models
{
    public class ActionModel
    {
        public ActionModel()
        {
            ActionsList = new List<SelectListItem>();
        }
        [Display(Name="Actions")]
        public int ActionId { get; set; }
        public IEnumerable<SelectListItem> ActionsList { get; set; }       
    }
}

Now create a controller action method in the Action Controller (ActionController.cs) that returns a view that binds with the model.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using DropdownExample.Models;
namespace DropdownExample.Controllers
{
    public class ActionController : Controller
    {
        public ActionResult Index()
        {
            ActionModel model = new ActionModel();
            IEnumerable<ActionType> actionTypes = Enum.GetValues(typeof(ActionType))
                                                       .Cast<ActionType>();
            model.ActionsList = from action in actionTypes
                                select new SelectListItem
                                {
                                    Text = action.ToString(),
                                    Value = ((int)action).ToString()
                                };
            return View(model);
        }
    }
}

Create a View (Index.cshtml) under the subfolder Action under the Views folder.

@model DropdownExample.Models.ActionModel
@{
    ViewBag.Title = "Index";
} 
@Html.LabelFor(model=>model.ActionId)
@Html.DropDownListFor(model=>model.ActionId, Model.ActionsList)

Run the application and we get the results as in Figure 1.1.

Approach 2: Populate the DropDownList by HTML Helper method for the Enum

I create an HTML Helper extension method to populate a dropdown list using an enum. Create an extension method EnumDropDownListFor in the Extension class under the Models folder.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Web.Mvc;
using System.Web.Mvc.Html; 
namespace DropdownExample.Models
{
    public static class Extension
    { 
        public static MvcHtmlString EnumDropDownListFor<TModel, TProperty, TEnum>(
                    this HtmlHelper<TModel> htmlHelper,
                    Expression<Func<TModel, TProperty>> expression, 
                    TEnum selectedValue)
        {
            IEnumerable<TEnum> values = Enum.GetValues(typeof(TEnum))
                                        .Cast<TEnum>(); 
            IEnumerable<SelectListItem> items = from value in values
                                                select new SelectListItem()
                                                {
                                                    Text = value.ToString(),
                                                    Value = value.ToString(),
                                                    Selected = (value.Equals(selectedValue))
                                                }; 
            return SelectExtensions.DropDownListFor(htmlHelper,expression, items);
        }
    }
}

Create a model (ActionTypeModel class) under the Models folder.

using System.ComponentModel.DataAnnotations;
namespace DropdownExample.Models
{
    public class ActionTypeModel
    {
        [Display(Name = "Actions")]
        public int ActionId { get; set; }
        public ActionType ActionTypeList { get; set; }
    }
}

Now create a controller action method ActionTypes() in the Action Controller (ActionController.cs) that returns a view that binds with the model.

public ActionResult ActionTypes()
{
     ActionTypeModel model = new ActionTypeModel();
     return View(model);
}

Create a View (ActionTypes.cshtml) under the subfolder Action under the Views folder.

@model DropdownExample.Models.ActionTypeModel
@using DropdownExample.Models;
@{
    ViewBag.Title = "Action Types";
}
@Html.LabelFor(model => model.ActionId)
@Html.EnumDropDownListFor(model => model.ActionId,Model.ActionTypeList)

Run the application and we get the same result as in Figure 1.1.

Conclusion

Finally we have created an HTML helper extension method for a dropdown list that populates by enum type.