ENUM to DropDownList in MVC

Prior to ASP.NET MVC 5, the only way to bind an enum to a drop down list in an MVC view was to roll out our own HtmlHelper, which is the best way to extend MVC's functionality. These days, with MVC 5 at our disposal, we can bind any enum to a view control easily by calling the EnumDropDownListFor HTML helper. It works like any other build in HTML helper, with a model, a model property and a bunch of additional attributes that allow us to decorate our drop down list.


First, let's see what the problem is with the current (i.e. EnumDropDownListFor) implementation in MVC 5. Using the helper, the values in the drop down box, which is bound to the enum in your model, will look like this:

// Enum in ViewModel
public enum TestEnum  

Drop-down values in HTML:


Obviously this is neither readable or overly user-friendly.


The solution to this problem works in two ways:

it provides a handy HTML helper if you have to work with MVC 4 or less
it improves the default output of MVC 5's HTML Helper
To improve the appearance of the values in the bound drop down, we can decorate the enum values with the Description attribute. The description can contain the readable text that you want to display to your users without compromising the ease that comes from binding directly to an enum.


First we need to update the enum we used in the previous example to include description properties for each enum value:

public enum TestEnum  
    [Description("First choice")]

    [Description("Second choice")]

    [Description("Third choice")]

The HTML helper code, where all the magic happens, is right below:

public static MvcHtmlString CustomEnumDropDownListFor<TModel, TEnum>(  
  this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TEnum>> expression, object htmlAttributes)
    var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    var values = Enum.GetValues(typeof(TEnum)).Cast<TEnum>();

    var items =
           value =>
           new SelectListItem
               Text = GetEnumDescription(value),
               Value = value.ToString(),
               Selected = value.Equals(metadata.Model)
           var attributes = HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
   return htmlHelper.DropDownListFor(expression, items, attributes);

public static string GetEnumDescription<TEnum>(TEnum value)  
    var field = value.GetType().GetField(value.ToString());
    var attributes = (DescriptionAttribute[])field.GetCustomAttributes(typeof(DescriptionAttribute), false);
    return attributes.Length > 0 ? attributes[0].Description : value.ToString();

The first method creates the HTML helper while the second one provides a way to retrieve the Description attribute from the enum. Easy as that.

To use this extension, all you have to do in your MVC view is call it like this:

@Html.CustomEnumDropDownListFor(m => m.TestEnum, new { @class = "dropdownstyle" })


Read more posts by this author.

Subscribe to The Magics

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!