ASP.NET MVC的Model元数据与Model模板：将”ListControl”引入ASP.NET MVC

我们不仅可以创建相应的模板来根据Model元数据控制种类型的数据在UI界面上的呈现方法，还可以通过一些扩展来控制Model元数据本身。在某些情况下通过这两者的结合往往可以解决很多特殊数据的呈现问题，我们接下来演示的实例就是典型的例子。[本文已经同步到《How ASP.NET MVC Works?》中]

传统的ASP.NET具有一组重要的控件类型叫做列表控件（ListControl），它的子类包括DropDownList、ListBox、RadioButtonList和CheckBoxList等。对于ASP.NET MVC来说，我们可以通过HtmlHelper/HtmlHelper<TModel>的扩展方法DropDownList/DropDownListFor和ListBox/ListBox在界面上呈现一个下拉框和列表框，但是我们需要手工指定包含的所有列表选项。在一般的Web应用中，尤其是企业应用中，我们会选择将这些列表进行单独地维护，如果我们在构建“列表控件”的时候能够免去手工提供列表的工作，这无疑会为开发带来极大的遍历，而这实际上很容易实现。[源代码从这里下载]

一、实现的效果

我们先来看看通过该扩展最终实现的效果。在通过Visual Studio的ASP.NET MVC项目模板创建的空Web应用中，我们定义一个作为Model表示员工的Employee类型。如下面的代码片断所示，表示性别、学历、部门和技能的属性分别应用了RadioButtonListAttribute、DropdownListAttribute、ListBoxAttribute和CheckBoxListAttribubte四个特性。从名称可以看出来，这四个特性分别代表了目标元素呈现在UI界面上的形式，即对应着传统ASP.NET Web应用中的四种类型的列表控件：RadioButtonList、DropdownList、ListBox和CheckBoxList。特性中指定的字符串表示预定义列表的名称。

public class Employee
{
    [DisplayName("姓名")]
    public string Name { get; set; }

    [RadioButtonList("Gender")]
    [DisplayName("性别")]
    public string Gender { get; set; }

    [DropdownList("Education")]
    [DisplayName("学历")]
    public string Education { get; set; }

    [ListBox("Department")]
    [DisplayName("所在部门")]
    public IEnumerable<string> Departments { get; set; }

    [CheckBoxList("Skill")]
    [DisplayName("擅长技能")]
    public IEnumerable<string> Skills { get; set; }
}

在创建的默认HomeController中，我们定义了如下一个Index操作方法。在该方法中，我们创建了一个具体的Employee对象并对它的所有属性进行了相应设置，最终将该对象呈现在默认的View中。

public class HomeController : Controller
{
    public ActionResult Index()
    {
        Employee employee = new Employee
        {
            Name       = "张三",
            Gender     = "M",
            Education  = "M",
            Departments= new string[] { "HR", "AD" },
            Skills     = new string[] { "CSharp", "AdoNet" }
        };
        return View(employee);
    }
}

如下所示的是上面的Index操作对应的View定义，这是一个以Model类型为Employee的强类型View，我们通过调用HtmlHelper<TModel>的模板方法EditorFor将作为Model的Employee对象的所有属性以编辑模式呈现出来。

@model Employee
<table>
    <tr>
        <td>@Html.LabelFor(m => m.Name)</td><td>@Html.EditorFor(m => m.Name)</td>
    </tr>
      <tr>
        <td>@Html.LabelFor(m => m.Gender)</td><td>@Html.EditorFor(m => m.Gender)</td>
    </tr>
      <tr>
        <td>@Html.LabelFor(m => m.Education)</td><td>@Html.EditorFor(m => m.Education)</td>
    </tr>
     <tr>
        <td>@Html.LabelFor(m => m.Departments)</td><td>@Html.EditorFor(m => m.Departments)</td>
    </tr>
     <tr>
        <td>@Html.LabelFor(m => m.Skills)</td><td>@Html.EditorFor(m => m.Skills)</td>
    </tr>
</table>

下图体现了该Web应用运行时的效果。我们可以看到，四个属性分别以四种不同的“列表控件”呈现出来，并且对应在它们上面的四个字定义的列表特性（RadioButtonListAttribute、DropdownListAttribute、ListBoxAttribute和CheckBoxListAttribubte）。

二、ListItem与ListProvider

现在对体现在上面演示实例的基于列表数据的UI定制的设计进行简单地介绍。我们首先来定义如下一个表示列表中某个条目（列表项）的类型ListItem，简单起见，我们紧紧定义Text和Value两个属性，它们分别表示显示的文字和代表的值。比如对于一组表示国家的列表，列表项的Text属性表示成国家名称（比如“中国”），具体的值则可能是国家的代码（比如“CN”）。

public class ListItem
{
    public string Text { get; set; }
    public string Value { get; set; }
}

我们将提供列表数据的组件称为ListProvider，它们实现了IListProvider接口。如下面的代码片断所示，IListProvider具有唯一的方法GetListItems根据指定的列表名称获取所有的列表项。通过实现IListProvider，我们定义了一个默认的DefaultListProvider。简单起见，DefaultListProvider直接通过一个静态字段模拟列表的存储，在真正的项目中一般会保存在数据库中。DefaultListProvider维护了四组列表，分别表示性别、学历、部门和技能，它们正好对应着Employee的四个属性。

public interface IListProvider
{
    IEnumerable<ListItem> GetListItems(string listName);
}
public class DefaultListProvider : IListProvider
{
    private static Dictionary<string, IEnumerable<ListItem>> listItems = new Dictionary<string, IEnumerable<ListItem>>();
    static DefaultListProvider()
    {
        var items = new ListItem[]{
        new ListItem{ Text = "男", Value="M"},
        new ListItem{ Text = "女", Value="F"}};
        listItems.Add("Gender", items);

        items = new ListItem[]{
        new ListItem{ Text = "高中", Value="H"}  ,
        new ListItem{ Text = "大学本科", Value="B"},
        new ListItem{ Text = "硕士", Value="M"} ,
        new ListItem{ Text = "博士", Value="D"}};
        listItems.Add("Education", items);

        items = new ListItem[]{
        new ListItem{ Text = "人事部", Value="HR"}  ,
        new ListItem{ Text = "行政部", Value="AD"},
        new ListItem{ Text = "IT部", Value="IT"}};
        listItems.Add("Department", items);

        items = new ListItem[]{
        new ListItem{ Text = "C#", Value="CSharp"}  ,
        new ListItem{ Text = "ASP.NET", Value="AspNet"},
        new ListItem{ Text = "ADO.NET", Value="AdoNet"}};
        listItems.Add("Skill", items);
    }
    public IEnumerable<ListItem> GetListItems(string listName)
    {
        IEnumerable<ListItem> items;
        if (listItems.TryGetValue(listName, out items))
        {
            return items;
        }
        return new ListItem[0];
    }
}

接下来我们定义如下一个ListProviders类型，它的静态只读属性Current表示当前的ListProvider，而对当前ListProvider的注册通过静态方法SetListProvider来实现。如果没有对当前ListProvider进行显式注册，则默认采用DefaultListProvider。

public static class ListProviders
{
    public static IListProvider Current { get; private set; }
    static ListProviders()
    {
        Current = new DefaultListProvider();
    }
    public static void SetListProvider(Func<IListProvider> providerAccessor)
    {
        Current = providerAccessor();
    }
}

三、通过对HtmlHelper/HtmlHelper<TModel>的扩展生成“ListControl”的HTML

基于四种“列表控件”的HTML生成是通过定义HtmlHelper的扩展方法来实现的，如下面的代码所示，定义在ListControlExtensions中的四个扩展方法实现了针对这四种列表控件的UI呈现。参数listName表示使用的预定义列表的名称，而value和values则表示绑定的值。RadioButtonList/DropdownList只允许单项选择，而ListBox/CheckBoxList允许多项选择，所以对应的值类型分别是string和IEnumerable<string>。

public static class ListControlExtensions
{
    //其他成员
   public static MvcHtmlString RadioButtonList( this HtmlHelper htmlHelper,string name, string listName, string value)
    {
        return RadioButtonCheckBoxList(htmlHelper, listName, item =>
           htmlHelper.RadioButton(name, item.Value, value == item.Value));
    }

    public static MvcHtmlString CheckBoxList(this HtmlHelper htmlHelper, string name, string listName, IEnumerable<string> values)
    {
        return RadioButtonCheckBoxList(htmlHelper, listName, item => CheckBoxWithValue(htmlHelper, name,  values.Contains(item.Value), item.Value));
    }

    public static MvcHtmlString ListBox(this HtmlHelper htmlHelper, string name, string listName, IEnumerable<string> values)
    {
        var listItems = ListProviders.Current.GetListItems(listName);
        List<SelectListItem> selectListItems = new List<SelectListItem>();
        foreach (var item in listItems)
        {
            selectListItems.Add(new SelectListItem { Value = item.Value,
                Text = item.Text,
                Selected = values.Any(value => value == item.Value) });
        }
        return htmlHelper.ListBox(name, selectListItems);
    }

    public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name, string listName, string value)
    {
        var listItems = ListProviders.Current.GetListItems(listName);
        List<SelectListItem> selectListItems = new List<SelectListItem>();
        foreach (var item in listItems)
        {
            selectListItems.Add(new SelectListItem { Value = item.Value,
                Text = item.Text, Selected = value == item.Value});
        }
        return htmlHelper.DropDownList(name, selectListItems);
    }
}

从上面的代码片断可以看到，在ListBox和DropDownList方法中我们通过当前的ListProvider获取指定列表名称的所有列表项并生成相应的SelectListItem列表，最终通过调用HtmlHelper现有的扩展方法ListBox和DropDownList实现HTML的呈现。而RadioButtonList和MvcHtmlString最终调用了辅助方法RadioButtonCheckBoxList显示了最终的HTML生成，该方法定义如下。

public static class ListControlExtensions
{
    public static MvcHtmlString CheckBoxWithValue(this HtmlHelper htmlHelper, string name, bool isChecked, string value)
    {
        string fullHtmlFieldName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(name);
        ModelState modelState;

        //将ModelState设置为表示是否勾选布尔值
        if (htmlHelper.ViewData.ModelState.TryGetValue(fullHtmlFieldName, out modelState))
        {
            htmlHelper.ViewData.ModelState.SetModelValue(fullHtmlFieldName, new ValueProviderResult(isChecked, isChecked.ToString(), CultureInfo.CurrentCulture));
        }
        MvcHtmlString html;
        try
        {
            html = htmlHelper.CheckBox(name, isChecked);
        }
        finally
        {
            //将ModelState还原
            if (null != modelState)
            {
                htmlHelper.ViewData.ModelState[fullHtmlFieldName] = modelState;
            }
        }
        string htmlString = html.ToHtmlString();
        var index = htmlString.LastIndexOf('<');
        //过滤掉类型为"hidden"的<input>元素
        XElement element = XElement.Parse(htmlString.Substring(0, index));
        element.SetAttributeValue("value", value);
        return new MvcHtmlString(element.ToString());
    }

    private static MvcHtmlString RadioButtonCheckBoxList(HtmlHelper htmlHelper, string listName, Func<ListItem, MvcHtmlString> elementHtmlAccessor)
    {
        var listItems = ListProviders.Current.GetListItems(listName);
        TagBuilder table = new TagBuilder("table");
        TagBuilder tr = new TagBuilder("tr");
        foreach (var listItem in listItems)
        {
            TagBuilder td = new TagBuilder("td");
            td.InnerHtml += elementHtmlAccessor(listItem).ToHtmlString();
            td.InnerHtml += listItem.Text;
            tr.InnerHtml += td.ToString();
        }
        table.InnerHtml = tr.ToString();
        return new MvcHtmlString(table.ToString());
    }
}

方法RadioButtonCheckBoxList在生成RadioButtonList和CheckBoxList的时候才用<table>进行布局。组成RadioButtonList的单个RadioButton最终是调用HtmlHelper现有的扩展方法RadioButton生成的，而CheckBoxList中的CheckBox则是通过调用我们自定义的CheckBoxWithValue方法生成的。CheckBoxWithValue最终还是调用HtmlHelper现有的扩展方法CheckBox生成单个CheckBox对应的HTML，但是方法值支持布尔值的绑定，并且会生成一个在这里不需要的Hidden元素，所以我们不得不在调用该方法的前后作一些手脚。

四、ListAttribute

现在我们来介绍应用在Employee属性上的四个特性的定义。如下面的代码片断所示，基于四种“列表控件”的特性均继承自抽象特性ListAttribute。ListAttribute实现了IMetadataAware接口，在实现的OnMetadataCreated方法中将在构造函数中指定的代表列表名称的ListName属性添加到表示Model元数据的ModelMetadata对象的AdditionalValues属性中。四个具体的列表特性重写了OnMetadataCreated方法，并在此基础上将ModelMetadata的TemplateHint分别设置为DropdownList、ListBox、RadioButtonList和CheckBoxList。

[AttributeUsage(AttributeTargets.Property)]
public abstract class ListAttribute : Attribute, IMetadataAware
{
    public string ListName { get; private set; }
    public ListAttribute(string listName)
    {
        this.ListName = listName;
    }
    public virtual void OnMetadataCreated(ModelMetadata metadata)
    {
        metadata.AdditionalValues.Add("ListName", this.ListName);
    }
}

[AttributeUsage(AttributeTargets.Property)]
public class DropdownListAttribute : ListAttribute
{
    public DropdownListAttribute(string listName)
        : base(listName)
    { }
    public override void OnMetadataCreated(ModelMetadata metadata)
    {
        base.OnMetadataCreated(metadata);
        metadata.TemplateHint = "DropdownList";
    }
}

[AttributeUsage(AttributeTargets.Property)]
public class ListBoxAttribute : ListAttribute
{
    public ListBoxAttribute(string listName)
        : base(listName)
    { }
    public override void OnMetadataCreated(ModelMetadata metadata)
    {
        base.OnMetadataCreated(metadata);
        metadata.TemplateHint = "ListBox";
    }
}

[AttributeUsage(AttributeTargets.Property)]
public class RadioButtonListAttribute : ListAttribute
{
    public RadioButtonListAttribute(string listName)
        : base(listName)
    { }

    public override void OnMetadataCreated(ModelMetadata metadata)
    {
        base.OnMetadataCreated(metadata);
        metadata.TemplateHint = "RadioButtonList";
    }
}

[AttributeUsage(AttributeTargets.Property)]
public class CheckBoxListAttribute : ListAttribute
{
    public CheckBoxListAttribute(string listName)
        : base(listName)
    { }

    public override void OnMetadataCreated(ModelMetadata metadata)
    {
        base.OnMetadataCreated(metadata);
        metadata.TemplateHint = "CheckBoxList";
    }
}

五、模板View的定义

由于四个具体的ListAttribute已经对表示模板名称的ModelMetadata的TemplateHint进行了设置，那么我们针对它们定义相应的分部View作为对应的模板，那么在调用HtmlHelper/HtmlHelper<TModel>相应模板方法的时候就会按照这些模板对目标元素进行呈现。实现如上图所示的效果的四个模板定义如下，它们被保存在View\Shared\EditorTemplates目录下面。

DropdownList.cshtml：
@model string
@{
    string listName = (string)ViewData.ModelMetadata.AdditionalValues["ListName"];
    @Html.DropDownList("",listName,Model)
}

ListBox.cshtml：
@model IEnumerable<string>
@{
    string listName = (string)ViewData.ModelMetadata.AdditionalValues["ListName"];
    @Html.ListBox("",listName,Model)
}

RadioButtonList.cshtml：
@model string
@{
    string listName = (string)ViewData.ModelMetadata.AdditionalValues["ListName"];
    @Html.RadioButtonList("",listName,Model)
}

CheckBoxList.cshtml：
@model IEnumerable<string>
@{
    string listName = (string)ViewData.ModelMetadata.AdditionalValues["ListName"];
    @Html.CheckBoxList("", listName, Model)
 }

 

ASP.NET MVC的Model元数据与Model模板：预定义模板
ASP.NET MVC的Model元数据与Model模板：模板的获取与执行策略
ASP.NET MVC的Model元数据与Model模板：将ListControl引入ASP.NET MVC