ASP.NET?MVC下拉框中顯示枚舉項(xiàng)

更新時(shí)間：2022年07月31日 14:44:35 作者：Darren?Ji

這篇文章介紹了ASP.NET?MVC下拉框中顯示枚舉項(xiàng)的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

我們經(jīng)常會(huì)把類型為Int16的屬性通過枚舉來獲得。比如：

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

對(duì)應(yīng)的枚舉：

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

在MVC視圖中可能會(huì)這樣寫：

<select id="sel">
   <option value="">==選擇狀態(tài)==</option>
   <option value="0">啟用</option>
   <option value="1">禁用</option>
</select>

如果枚舉的項(xiàng)發(fā)生變化怎么辦？比如：

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

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

通過控制器返回List<SelectListItem>類型給前臺(tái)視圖

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

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

為每個(gè)枚舉項(xiàng)打上的屬性需要我們自定義，通過構(gòu)造函數(shù)接收名稱，并提供一個(gè)屬性供外部訪問。

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

為每個(gè)枚舉項(xiàng)打上自定義屬性。

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

我們的目的是在控制器獲取List<SelectListItem>集合，然后傳遞到前臺(tái)視圖?，F(xiàn)在，枚舉和枚舉項(xiàng)上的自定義屬性都有了，有必要?jiǎng)?chuàng)建一個(gè)幫助類來幫我們獲取List<SelectListItem>集合。

using System;
using System.Collections.Generic;
using System.Reflection;
using System.Web.Mvc;
 
namespace MvcApplication1.Extension
{
    public class EnumExt
    {
        /// <summary>
        /// 根據(jù)枚舉成員獲取自定義屬性EnumDisplayNameAttribute的屬性DisplayName
        /// </summary>
        /// <param name="e"></param>
        /// <returns></returns>
        public static string GetEnumCustomDescription(object e)
        {
            //獲取枚舉的Type類型對(duì)象
            Type t = e.GetType();
 
            //獲取枚舉的所有字段
            FieldInfo[] ms = t.GetFields();
 
            //遍歷所有枚舉的所有字段
            foreach (FieldInfo f in ms)
            {
                if (f.Name != e.ToString())
                {
                    continue;
                }
 
                //第二個(gè)參數(shù)true表示查找EnumDisplayNameAttribute的繼承鏈
                if (f.IsDefined(typeof (EnumDisplayNameAttribute), true))
                {
                    return
                        (f.GetCustomAttributes(typeof(EnumDisplayNameAttribute), true)[0] as EnumDisplayNameAttribute)
                            .DisplayName;
                }
            }
 
            //如果沒有找到自定義屬性，直接返回屬性項(xiàng)的名稱
            return e.ToString();
        }
 
        /// <summary>
        /// 根據(jù)枚舉，把枚舉自定義特性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>集合往前臺(tái)傳?？刂破靼?個(gè)方法，一個(gè)方法用來顯示創(chuàng)建視圖界面，另一個(gè)用來顯示編輯視圖界面。

        //創(chuàng)建
        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);
        }

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

@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")
}

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

@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")
}

創(chuàng)建界面：

編輯界面：

通過為枚舉類型屬性打上UIHint屬性讓模版顯示枚舉項(xiàng)

由于模版是根據(jù)屬性類型來判斷的，再定義一個(gè)Model，其中一個(gè)屬性類型是枚舉。

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

在Views/Shared/EditorTemplates文件夾下創(chuàng)建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個(gè)方法用來顯示創(chuàng)建和編輯視圖界面。

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

強(qiáng)類型的創(chuàng)建視圖界面：

@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")
}

強(qiáng)類型的編輯視圖界面：

@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 = "場(chǎng)館名稱")]
        public string Name { get; set; }
 
        [Display(Name = "是否啟用")]
        [UIHint("Enum")]
        public StatusEnum Status { get; set; } 
    }
}

創(chuàng)建視圖界面：

編輯視圖界面：

通過自定義元數(shù)據(jù)提供器DataAnnotationsModelMetadataProvider讓模版顯示枚舉項(xiàng)

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

當(dāng)然自定義的元數(shù)據(jù)提供器是需要在全局中注冊(cè)的。

    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);
 
            //注冊(cè)自定義元數(shù)據(jù)提供其
            ModelMetadataProviders.Current = new CustomMetadataProvider();
        }
    }

現(xiàn)在可以把Stadium的[UIHint("Enum")]注釋掉。