现在的位置: 首页 > 综合 > 正文

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

2013年03月05日 ⁄ 综合 ⁄ 共 4178字 ⁄ 字号 评论关闭

我们不仅可以创建相应的模板来根据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类型。如下面的代码片断所示,表示性别、学历、部门和技能的属性分别应用了RadioButtonListAttributeDropdownListAttributeListBoxAttributeCheckBoxListAttribubte四个特性。从名称可以看出来,这四个特性分别代表了目标元素呈现在UI界面上的形式,即对应着传统ASP.NET Web应用中的四种类型的列表控件:RadioButtonList、DropdownList、ListBox和CheckBoxList。特性中指定的字符串表示预定义列表的名称。

   1: public class Employee

   2: {

   3:     [DisplayName("姓名")]

   4:     public string Name { get; set; }

   5:  

   6:     [RadioButtonList("Gender")]

   7:     [DisplayName("性别")]

   8:     public string Gender { get; set; }

   9:  

  10:     [DropdownList("Education")]

  11:     [DisplayName("学历")]

  12:     public string Education { get; set; }

  13:  

  14:     [ListBox("Department")]

  15:     [DisplayName("所在部门")]

  16:     public IEnumerable<string> Departments { get; set; }

  17:  

  18:     [CheckBoxList("Skill")]

  19:     [DisplayName("擅长技能")]

  20:     public IEnumerable<string> Skills { get; set; }

  21: }

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

   1: public class HomeController : Controller

   2: {

   3:     public ActionResult Index()

   4:     {

   5:         Employee employee = new Employee

   6:         {

   7:             Name       = "张三",

   8:             Gender     = "M",

   9:             Education  = "M",

  10:             Departments= new string[] { "HR", "AD" },

  11:             Skills     = new string[] { "CSharp", "AdoNet" }

  12:         };

  13:         return View(employee);

  14:     }

  15: }

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

   1: @model Employee

   2: <table>

   3:     <tr>

   4:         <td>@Html.LabelFor(m => m.Name)</td><td>@Html.EditorFor(m => m.Name)</td>

   5:     </tr>

   6:       <tr>

   7:         <td>@Html.LabelFor(m => m.Gender)</td><td>@Html.EditorFor(m => m.Gender)</td>

   8:     </tr>

   9:       <tr>

  10:         <td>@Html.LabelFor(m => m.Education)</td><td>@Html.EditorFor(m => m.Education)</td>

  11:     </tr>

  12:      <tr>

  13:         <td>@Html.LabelFor(m => m.Departments)</td><td>@Html.EditorFor(m => m.Departments)</td>

  14:     </tr>

  15:      <tr>

  16:         <td>@Html.LabelFor(m => m.Skills)</td><td>@Html.EditorFor(m => m.Skills)</td>

  17:     </tr>    

  18: </table>

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

image

二、ListItem与ListProvider

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

   1: public class ListItem

   2: {

   3:     public string Text { get; set; }

   4:     public string Value { get; set; }

   5: }

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

   1: public interface IListProvider

   2: {

   3:     IEnumerable<ListItem> GetListItems(string listName);

   4: }

   5: public class DefaultListProvider : IListProvider

   6: {

   7:     private static Dictionary<string, IEnumerable<ListItem>> listItems = new Dictionary<string, IEnumerable<ListItem>>();

   8:     static DefaultListProvider()

   9:     {

  10:         var items = new ListItem[]{

  11:         new ListItem{ Text = "男", Value="M"},

  12:         new ListItem{ Text = "女", Value="F"}};

  13:         listItems.Add("Gender", items);

  14:  

  15:         items = new ListItem[]{            

  16:         new ListItem{ Text = "高中", Value="H"}  , 

  17:         new ListItem{ Text = "大学本科", Value="B"},

  18:         new ListItem{ Text = "硕士", Value="M"} ,                

  19:         new ListItem{ Text = "博士", Value="D"}};

  20:         listItems.Add("Education", items);

  21:  

  22:         items = new ListItem[]{            

  23:         new ListItem{ Text = "人事部", Value="HR"}  , 

  24:         new ListItem{ Text = "行政部", Value="AD"},

  25:         new ListItem{ Text = "IT部", Value="IT"}};

  26:         listItems.Add("Department", items);

  27:  

  28:         items = new ListItem[]{            

  29:         new ListItem{ Text = "C#", Value="CSharp"}  , 

  30:         new ListItem{ Text = "ASP.NET", Value="AspNet"},

  31:         new ListItem{ Text = "ADO.NET", Value="AdoNet"}};

  32:         listItems.Add("Skill", items);

  33:     }

  34:     public IEnumerable<ListItem> GetListItems(string listName)

  35:     {

  36:         IEnumerable<ListItem> items;

  37:         if (listItems.TryGetValue(listName, out items))

  38:         {

  39:             return items;

  40:         }

  41:         return new ListItem[0];

【上篇】
【下篇】

抱歉!评论已关闭.