Creating a DropDownList For Enums in ASP.Net MVC

This article explains how to populate a DropDownList by enum type in ASP.NET MVC.

I will 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 following code snippet.

  1. namespace DropdownExample.Models  
  2. {  
  3.     public enum ActionType  
  4.     {  
  5.         Create=1,  
  6.         Read=2,  
  7.         Update=3,  
  8.         Delete=4  
  9.     }  
  10. }   
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.
  1. using System.Collections.Generic;  
  2. using System.ComponentModel.DataAnnotations;  
  3. using System.Web.Mvc;  
  4. namespace DropdownExample.Models  
  5. {  
  6.     public class ActionModel  
  7.     {  
  8.         public ActionModel()  
  9.         {  
  10.             ActionsList = new List<SelectListItem>();  
  11.         }  
  12.         [Display(Name="Actions")]  
  13.         public int ActionId { getset; }  
  14.         public IEnumerable<SelectListItem> ActionsList { getset; }         
  15.     }  
  16. }  
Now create a controller action method in Action Controller (ActionController.cs) that returns a view that binds with the model.
  1. using System.Collections.Generic;  
  2. using System.ComponentModel.DataAnnotations;  
  3. using System.Web.Mvc;  
  4. namespace DropdownExample.Models  
  5. {  
  6.     public class ActionModel  
  7.     {  
  8.         public ActionModel()  
  9.         {  
  10.             ActionsList = new List<SelectListItem>();  
  11.         }  
  12.         [Display(Name="Actions")]  
  13.         public int ActionId { getset; }  
  14.         public IEnumerable<SelectListItem> ActionsList { getset; }         
  15.     }  
  16. }  
Create a View (Index.cshtml) under the sub folder Action under the Views folder.
  1. @model DropdownExample.Models.ActionModel  
  2. @{  
  3.     ViewBag.Title = "Index";  
  4. }   
  5. @Html.LabelFor(model=>model.ActionId)  
  6. @Html.DropDownListFor(model=>model.ActionId, Model.ActionsList)  
Run the application and we get the results as in Figure 1.1.

image1.gif
Figure 1.1 Populate DropDownList by Enumns

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.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Linq.Expressions;  
  5. using System.Web.Mvc;  
  6. using System.Web.Mvc.Html;   
  7. namespace DropdownExample.Models  
  8. {  
  9.     public static class Extension  
  10.     {   
  11.         public static MvcHtmlString EnumDropDownListFor<TModel, TProperty, TEnum>(this HtmlHelper<TModel> htmlHelper,  
  12.                                                                                     Expression<Func<TModel, TProperty>> expression,   
  13.                                                                                     TEnum selectedValue)  
  14.         {  
  15.             IEnumerable<TEnum> values = Enum.GetValues(typeof(TEnum))  
  16.                                         .Cast<TEnum>();   
  17.             IEnumerable<SelectListItem> items = from value in values  
  18.                                                 select new SelectListItem()  
  19.                                                 {  
  20.                                                     Text = value.ToString(),  
  21.                                                     Value = value.ToString(),  
  22.                                                     Selected = (value.Equals(selectedValue))  
  23.                                                 };   
  24.             return SelectExtensions.DropDownListFor(htmlHelper,expression, items);  
  25.         }  
  26.     }  
  27. }  
Create a model (ActionTypeModel class) under the Models folder.
  1. using System.ComponentModel.DataAnnotations;  
  2. namespace DropdownExample.Models  
  3. {  
  4.     public class ActionTypeModel  
  5.     {  
  6.         [Display(Name = "Actions")]  
  7.         public int ActionId { getset; }  
  8.         public ActionType ActionTypeList { getset; }  
  9.     }  
  10. }  

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

  1. public ActionResult ActionTypes()  
  2. {  
  3.      ActionTypeModel model = new ActionTypeModel();  
  4.      return View(model);  
  5. }  
Create a View (ActionTypes.cshtml) under the sub folder Action under the Views folder.
  1. @model DropdownExample.Models.ActionTypeModel  
  2. @using DropdownExample.Models;  
  3. @{  
  4.     ViewBag.Title = "Action Types";  
  5. }  
  6. @Html.LabelFor(model => model.ActionId)  
  7. @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.