Creating a DropDownList For Enums in ASP.Net MVC

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 another 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 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 Action Controller (ActionController.cs) that returns a view that binds with the model.

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; }
    }
}

Create a View (Index.cshtml) under the sub folder 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.


Figure 1.1 Populate DropDownList by Enums

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 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 sub folder 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. Download the zip folder for the entire source code.