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.

  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 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 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.
  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.


Similar Articles