ASP.NET MVC下拉框中顯示枚舉項

Posted on by

本篇將通過3種方式，把枚舉項上的自定義屬性填充到下拉框：
1、通過控制器返回List<SelectListItem>類型給前臺視圖
2、通過為枚舉類型屬性打上UIHint屬性讓模版顯示枚舉項
3、通過自定義元數據提供器DataAnnotationsModelMetadataProvider讓模版顯示枚舉項

我們經常會把類型為Int16的屬性通過枚舉來獲得。比如：

public class SomeClass
{
    public int16 Status{get;set;}
}

對應的枚舉：

public enum StatusEnum
{
    Enable = 0,
    Disable = 1
}

在MVC視圖中可能會這樣寫：

<select id="sel">
   <option value="">==選擇狀態==</option>
   <option value="0">啟用</option>
   <option value="1">禁用</option>
</select>

如果枚舉的項發生變化怎麼辦？比如：

public enum StatusEnum
{
    Enable = 0,
    Disable = 1,
    NeverComeback = 2
}

如果修改每一頁的代碼，顯然是不合理的。最理想的做法是：為每一個枚舉項打上屬性，顯示的時候直接讀取枚舉以及枚舉項屬性值。

通過控制器返回List<SelectListItem>類型給前臺視圖

定義一個Model,其中有一個類型為Int16的屬性Status，這個屬性用來接收枚舉值。

using System;
using System.ComponentModel.DataAnnotations;
 
namespace MvcApplication1.Models
{
    public class Stadium
    {
        public int Id { get; set; }
 
        [Display(Name = "場館名稱")]
        public string Name { get; set; }
 
        [Display(Name = "是否啟用")]
        public Int16 Status { get; set; }
    }
}

為每個枚舉項打上的屬性需要我們自定義，通過構造函數接收名稱，並提供一個屬性供外部訪問。

using System;
 
namespace MvcApplication1.Extension
{
    public class EnumDisplayNameAttribute : Attribute
    {
        private string _displayName;
 
        public EnumDisplayNameAttribute(string displayName)
        {
            this._displayName = displayName;
        }
 
        public string DisplayName
        {
            get { return _displayName; }
        }
    }
}

為每個枚舉項打上自定義屬性。

using MvcApplication1.Extension;
 
namespace MvcApplication1.Models.Enum
{
    public enum StatusEnum
    {
        [EnumDisplayName("啟用")]
        Enable = 0,
        [EnumDisplayName("禁用")]
        Disable =  1
    }
}

我們的目的是在控制器獲取List<SelectListItem>集合，然後傳遞到前臺視圖。現在，枚舉和枚舉項上的自定義屬性都有瞭，有必要創建一個幫助類來幫我們獲取List<SelectListItem>集合。

using System;
using System.Collections.Generic;
using System.Reflection;
using System.Web.Mvc;
 
namespace MvcApplication1.Extension
{
    public class EnumExt
    {
        /// <summary>
        /// 根據枚舉成員獲取自定義屬性EnumDisplayNameAttribute的屬性DisplayName
        /// </summary>
        /// <param name="e"></param>
        /// <returns></returns>
        public static string GetEnumCustomDescription(object e)
        {
            //獲取枚舉的Type類型對象
            Type t = e.GetType();
 
            //獲取枚舉的所有字段
            FieldInfo[] ms = t.GetFields();
 
            //遍歷所有枚舉的所有字段
            foreach (FieldInfo f in ms)
            {
                if (f.Name != e.ToString())
                {
                    continue;
                }
 
                //第二個參數true表示查找EnumDisplayNameAttribute的繼承鏈
                if (f.IsDefined(typeof (EnumDisplayNameAttribute), true))
                {
                    return
                        (f.GetCustomAttributes(typeof(EnumDisplayNameAttribute), true)[0] as EnumDisplayNameAttribute)
                            .DisplayName;
                }
            }
 
            //如果沒有找到自定義屬性，直接返回屬性項的名稱
            return e.ToString();
        }
 
        /// <summary>
        /// 根據枚舉，把枚舉自定義特性EnumDisplayNameAttribut的Display屬性值撞到SelectListItem中
        /// </summary>
        /// <param name="enumType">枚舉</param>
        /// <returns></returns>
        public static List<SelectListItem> GetSelectList(Type enumType)
        {
            List<SelectListItem> selectList = new List<SelectListItem>();
            foreach (object e in Enum.GetValues(enumType))
            {
                selectList.Add(new SelectListItem(){Text = GetEnumCustomDescription(e),Value = ((int)e).ToString()});
            }
            return selectList;
        }
    }
}

在控制器中,通過ViewData把List<SelectListItem>集合往前臺傳。控制器包含2個方法，一個方法用來顯示創建視圖界面，另一個用來顯示編輯視圖界面。

        //創建
        public ActionResult Index()
        {
            ViewData["s"] = EnumExt.GetSelectList(typeof (StatusEnum));
            return View(new Stadium());
        }
 
        //編輯
        public ActionResult Edit()
        {
            Stadium s = new Stadium()
            {
                Id = 2,
                Name = "水立方",
                Status = (short)StatusEnum.Disable
            };
            ViewData["s"] = EnumExt.GetSelectList(typeof(StatusEnum));
            return View(s);
        }

在強類型的創建視圖界面中，通過@Html.DropDownListFor(model => model.Status,(List<SelectListItem>)ViewData["s"])接收來自控制器的數據。

@model MvcApplication1.Models.Stadium
 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h2>Index</h2>
 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>Stadium</legend>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Status)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.Status,(List<SelectListItem>)ViewData["s"])
            @Html.ValidationMessageFor(model => model.Status)
        </div>
 
        <p>
            <input type="submit" value="添加" />
        </p>
    </fieldset>
}
 
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

在強類型的編輯視圖界面中，同樣通過@Html.DropDownListFor(model => model.Status,(List<SelectListItem>)ViewData["s"])接收來自控制器的數據。

@model MvcApplication1.Models.Stadium
 
@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h2>Edit</h2>
 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>Stadium</legend>
 
        @Html.HiddenFor(model => model.Id)
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Status)
        </div>
        <div class="editor-field">
             @Html.DropDownListFor(model => model.Status,(List<SelectListItem>)ViewData["s"])
            @Html.ValidationMessageFor(model => model.Status)
        </div>
 
        <p>
            <input type="submit" value="編輯" />
        </p>
    </fieldset>
}
 
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

創建界面：

編輯界面：

通過為枚舉類型屬性打上UIHint屬性讓模版顯示枚舉項

由於模版是根據屬性類型來判斷的，再定義一個Model，其中一個屬性類型是枚舉。

using System.ComponentModel.DataAnnotations;
using MvcApplication1.Models.Enum;
 
namespace MvcApplication1.Models
{
    public class Stadium1
    {
        public int Id { get; set; }
 
        [Display(Name = "場館名稱")]
        public string Name { get; set; }
 
        [Display(Name = "是否啟用")]
        public StatusEnum Status { get; set; } 
    }
}

在Views/Shared/EditorTemplates文件夾下創建Enum.cshtml,用來處理類型為Enum的屬性。

@using System.ComponentModel.DataAnnotations
@using System.Reflection
@using MvcApplication1.Extension
 
@{
    var selectList = new List<SelectListItem>();
    string optionLabel = null;
    object htmlAttributes = null;
    var enumType = (Type)Model.GetType();
    foreach (var value in Enum.GetValues(enumType))
    {
        var field = enumType.GetField(value.ToString());
        var option = new SelectListItem() {Value = value.ToString()};
        var display = field.GetCustomAttributes(typeof (EnumDisplayNameAttribute), false).FirstOrDefault() as EnumDisplayNameAttribute;
        if (display != null)
        {
            option.Text = display.DisplayName;
        }
        else
        {
            option.Text = value.ToString();
        }
        option.Selected = object.Equals(value, Model);
        selectList.Add(option);
    }
}
 
@Html.DropDownList("",selectList, optionLabel, htmlAttributes)

控制器中有2個方法用來顯示創建和編輯視圖界面。

        //創建
        public ActionResult TemplateCreate()
        {
            return View(new Stadium1());
        }
 
        //編輯
        public ActionResult TemplateEdit()
        {
            Stadium1 s = new Stadium1()
            {
                Id = 2,
                Name = "水立方",
                Status = StatusEnum.Disable
            };
            return View(s);
        }

強類型的創建視圖界面：

@model MvcApplication1.Models.Stadium1
 
@{
    ViewBag.Title = "TemplateCreate";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h2>TemplateCreate</h2>
 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>Stadium</legend>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Status)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Status)
            @Html.ValidationMessageFor(model => model.Status)
        </div>
 
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
 
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

強類型的編輯視圖界面：

@model MvcApplication1.Models.Stadium1
 
@{
    ViewBag.Title = "TemplateEdit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h2>TemplateEdit</h2>
 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
 
    <fieldset>
        <legend>Stadium</legend>
 
        @Html.HiddenFor(model => model.Id)
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Status)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Status)
            @Html.ValidationMessageFor(model => model.Status)
        </div>
 
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}
 
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

最後，給Stadium1的枚舉屬性，打上UIHint屬性，指明使用公共Enum類型模版Views/Shared/EditorTemplates/Enum.cshtml。

using System.ComponentModel.DataAnnotations;
using MvcApplication1.Models.Enum;
 
namespace MvcApplication1.Models
{
    public class Stadium1
    {
        public int Id { get; set; }
 
        [Display(Name = "場館名稱")]
        public string Name { get; set; }
 
        [Display(Name = "是否啟用")]
        [UIHint("Enum")]
        public StatusEnum Status { get; set; } 
    }
}

創建視圖界面：

編輯視圖界面：

通過自定義元數據提供器DataAnnotationsModelMetadataProvider讓模版顯示枚舉項

如果覺得為屬性打上[UIHint("Enum")]屬性麻煩的話，還可以通過數據提供器，為所有類型為Enum的屬性指明模版。

當然自定義的元數據提供器是需要在全局中註冊的。

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
 
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
 
            //註冊自定義元數據提供其
            ModelMetadataProviders.Current = new CustomMetadataProvider();
        }
    }

現在可以把Stadium的[UIHint("Enum")]註釋掉。

總結

如果，我們想在下拉框中顯示枚舉項，首先給枚舉項打上自定義屬性，通過反射可以拿到自定義屬性的相關屬性值。

如果，想在控制器方法中獲取List<SelectListItem>集合往前臺傳，我們可以封裝一個方法，根據枚舉返回List<SelectListItem>集合；

如果想根據屬性的類型顯示枚舉模版，要麼給枚舉屬性打上[UIHint("Enum")]，要麼在全局自定義一個DataAnnotationsModelMetadataProvider。

到此這篇關於ASP.NET MVC下拉框中顯示枚舉項的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：