[ASP.NET MVC]通过对HtmlHelper扩展简化“列表控件”的绑定

在众多表单元素中,有一类<select>元素用于绑定一组预定义列表。传统的ASP.NET Web Form中,它对应着一组重要的控件类型,即ListControl,我们经常用到DropDownList, ListBox、CheckBoxList和RadioButtonList都是其子类。ASP.NET MVC通过对HtmlHelper和HtmlHelper<TModel>的扩展实现了对不同类型的<select>元素的绑定,它们以扩展方法的形式定义在SelectExtensions中。当我们在操作这些扩展方法的时候,必须手工地提供以 IEnumerable<SelectListItem>对象表示的列表项。如果我们建立一个独立的组件来维护这些预定的列表,那么我们就可以定义一些更加简单的扩展方法以避免手工地指定列表项。[源代码从这里下载]

一、创建一个独立的列表维护组件

我们将这些绑定在<select>元素中的预定义列表中的元素称为Code。作为简单的演示模拟,我们创建了一个名为CodeManager的组件。我们先来看看用于描述单一Code的CodeDescription类型的定义,如下面的代码所示,CodeDescription具有ID、Code、Description、EffectiveStartDate 和EffectiveEndDate。以表示国家的列表为例,Code代表某个国家的代码(比如CN),Description则是一个可读性的描述(比如China)。EffectiveStartDate 和EffectiveEndDate决定了Code的有效期限,比如一组表示“税率”的列表,在不同的时间范围内可能采用不同的列表。换言之,作为统一类别(通过Category属性表示)的列表中可能具有“多套”,它们可以共享相同的Code,我们通过ID来区分这些具有相同Code的列表项。

   1: public class CodeDescription
   2: {
   3:     public string Id { get; set; }
   4:     public string Code { get; set; }
   5:     public string Description { get; set; }
   6:     public string Category{get;set;}
   7:     public DateTime EffectiveStartDate { get; set; }
   8:     public DateTime EffectiveEndDate { get; set; }
   9:  
  10:     public CodeDescription(string code, string description, string category)
  11:     {
  12:         this.Id = Guid.NewGuid().ToString();
  13:         this.Code = code;
  14:         this.Description = description;
  15:         this.Category = category;
  16:         this.EffectiveStartDate = DateTime.MinValue;
  17:         this.EffectiveEndDate = DateTime.MaxValue;
  18:     }
  19: }

如下所示的CodeCollection 表示一组CodeDescription列表,它直接继承自Collection<CodeDescription>类型。由于CodeDescription具有有效期限的概念,我们需要筛选出当前有效的Code,所以我们定义了如下一个GetEffectiveCodes方法。

   1: public class CodeCollection : Collection<CodeDescription>
   2: {
   3:     public IEnumerable<CodeDescription> GetEffectiveCodes()
   4:     {
   5:         return this.Where(code => code.EffectiveStartDate <= DateTime.Today && code.EffectiveEndDate >= DateTime.Today).ToList();
   6:     }
   7: }

在进行Code绑定的时候,我们都是“类别”为单位的。我们总是获取某一个类别(比如国家、性别、婚姻状况和政治面貌等)的Code列表绑定到界面上。如下所示的CodeManager定义了一个GetCode方法获取指定类别的Code列表。而作为Code存储,我们采用了静态字段的形式,从如下所示的代码可以看出我们实际定义了三类Code,即Gender、MaritalStatus和Country,分别表示性别、婚姻状况和国籍。

   1: public static class CodeManager
   2: {
   3:     private static CodeDescription[] codes = new CodeDescription[]
   4:     {
   5:         new CodeDescription("M","Male","Gender"),
   6:         new CodeDescription("F","Female","Gender"),
   7:         new CodeDescription("S","Single","MaritalStatus"),
   8:         new CodeDescription("M","Married","MaritalStatus"),
   9:         new CodeDescription("CN","China","Country"),
  10:         new CodeDescription("US","Unite States","Country"),
  11:         new CodeDescription("UK","Britain","Country"),
  12:         new CodeDescription("SG","Singapore","Country")
  13:     };
  14:     public static CodeCollection GetCodes(string category)
  15:     {
  16:         CodeCollection codeCollection = new CodeCollection();
  17:         foreach(var code in codes.Where(code=>code.Category == category))
  18:         {
  19:             codeCollection.Add(code);
  20:         }
  21:         return codeCollection;
  22:     }
  23: }

二、定义HtmlHelper的扩展方法实现基于“列表类别”的绑定

现在我们来定义针对HtmlHelper的扩展方法通过从CodeManager获取的Code列表来进行“列表控件”的绑定。表示列表项的SelectListItem具有Text和Value两个属性,分别表示显示的文本和对应的值。在默认的情况下,它们应该对应于CodeDescription的Description和Code,但是有时候却需要进行相应的定制。比如说,有时候我们希望通过CodeDescription的ID来作为SelectListItem的值,或者说通过将SelectListItem显示为Code和Description的组合,比如“CN-China”。为此我们定义了如下一个BindingOption类型。

   1: public class BindingOption
   2: {
   3:     public string OptionalLabel { get;  set; }
   4:     public string TextTemplate { get; set; }
   5:     public string ValueTemplate { get; set; }
   6:  
   7:     public BindingOption()
   8:     {
   9:         this.OptionalLabel = null;
  10:         this.TextTemplate = "{Description}";
  11:         this.ValueTemplate = "{Code}";
  12:     }
  13: }

OptionalLabel表示添加的提示性的文本(比如“请选择一个Xxx”),而TextTemplate 和ValueTemplate 表示最终作为SelectListItem的Text和Value属性的模板,模板中包含相应的站位符({Id}、{Code}和{Description})。

我们为HtmlHelper编写了如下4个扩展方法用于针对DropDownList和ListBox的绑定,在参数中我们无须提供SelectListItem列表,而只需要提供Code和类别即可。而BindingOption 决定了最终作为SelectListItem的Text和Value属性,以及是否需要添加一个提示性的文字和文字内容。在真正的项目中,我们可以将BindingOption的设置定义在配置文件中。

   1: public static class SelectExtensions
   2: {
   3:     public static MvcHtmlString DropDownList(this HtmlHelper htmlHelper, string name, string codeCategory, BindingOption bindingOption = null)
   4:     {
   5:         bindingOption = bindingOption ?? new BindingOption();
   6:         var listItems = GenerateListItems(codeCategory, bindingOption);
   7:         return htmlHelper.DropDownList(name, listItems, bindingOption.OptionalLabel);
   8:     }   
   9:     public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string codeCategory, BindingOption bindingOption = null)
  10:     {
  11:         bindingOption = bindingOption ?? new BindingOption();
  12:         var listItems = GenerateListItems(codeCategory, bindingOption);
  13:         return htmlHelper.DropDownListFor<TModel, TProperty>(expression, listItems,bindingOption.OptionalLabel);
  14:     }
  15:  
  16:     public static MvcHtmlString ListBox(this HtmlHelper htmlHelper, string name, string codeCategory, BindingOption bindingOption = null)
  17:     {
  18:         bindingOption = bindingOption ?? new BindingOption();
  19:         var listItems = GenerateListItems(codeCategory, bindingOption);
  20:         return htmlHelper.ListBox(name, listItems, bindingOption.OptionalLabel);
  21:     }
  22:     public static MvcHtmlString ListBoxFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string codeCategory, BindingOption bindingOption = null)
  23:     {
  24:         bindingOption = bindingOption ?? new BindingOption();
  25:         var listItems = GenerateListItems(codeCategory, bindingOption);
  26:         return htmlHelper.ListBoxFor<TModel, TProperty>(expression, listItems);
  27:     }
  28:  
  29:     public static IEnumerable<SelectListItem> GenerateListItems(string codeCategory, BindingOption bindingOption)
  30:     {
  31:         var items = new List<SelectListItem>();
  32:         foreach (var code in CodeManager.GetCodes(codeCategory).GetEffectiveCodes())
  33:         {
  34:             var item = new SelectListItem
  35:             {
  36:                 Text = FormatTemplate(bindingOption.TextTemplate, code),
  37:                 Value = FormatTemplate(bindingOption.ValueTemplate, code)
  38:             };
  39:             items.Add(item);
  40:         }
  41:         return items;
  42:     }
  43:  
  44:     private static string FormatTemplate(string template, CodeDescription code)
  45:     {
  46:         return template.Replace("{Id}", code.Id)
  47:             .Replace("{Code}", code.Code)
  48:             .Replace("{Description}", code.Description);
  49:     }
  50: }

三、使用这些扩展方法

现在我们创建一个简单的ASP.NET MVC应用来演示对DropDownList和ListBox的绑定。为此我们定义了如下一个Person类型,其Gender、MaritalStatus 和Country 属性分别对应于CodeManager维护的三组Code。在创建的HomeController中,我们将初始化Person对象的呈现定义在Index操作中。

   1: public class Person
   2: {
   3:     public string Name { get; set; }
   4:     public string Gender { get; set; }
   5:     [Display(Name = "MaritalStatus")]
   6:     public string MaritalStatus { get; set; }
   7:     public string Country { get; set; }
   8: }
   9:  
  10: public class HomeController : Controller
  11: {
  12:     public ActionResult Index()
  13:     {
  14:         return View(new Person
  15:         {
  16:             Name = "Zhan San",
  17:             Gender = "M",
  18:             Country = "CN",
  19:             MaritalStatus = "S"
  20:         });
  21:     }
  22: }

我们定义的扩展方法是用在Index操作定义的Index.cshtml视图中,下面是Index.cshtml的定义:

   1: @model CodeBinding.Models.Person
   2: @{
   3:     ViewBag.Title = "Index";
   4: }
   5:  
   6: <table>
   7:     <tr>
   8:         <td>@Html.LabelFor(m=>m.Name)</td>
   9:         <td>@Html.TextBoxFor(m=>m.Name)</td>
  10:     </tr>
  11:     <tr>
  12:         <td>@Html.LabelFor(m=>m.Gender)</td>
  13:         <td>@Html.DropDownListFor(m => m.Gender, "Gender", new BindingOption
  14:        {
  15:            OptionalLabel = "Please select your gender...",
  16:            TextTemplate = "{Code}-{Description}",
  17:            ValueTemplate = "{Code}"
  18:        })</td>
  19:     </tr>
  20:      <tr>
  21:         <td>@Html.LabelFor(m=>m.MaritalStatus)</td>
  22:         <td>@Html.DropDownListFor(m => m.MaritalStatus, "MaritalStatus",new BindingOption
  23:        {
  24:            OptionalLabel = "Please select your marital status...",
  25:            TextTemplate = "{Code}-{Description}",
  26:            ValueTemplate = "{Code}"
  27:        })</td>
  28:     </tr>
  29:      <tr>
  30:         <td>@Html.LabelFor(m=>m.Country)</td>
  31:         <td>@Html.ListBoxFor(m => m.Country, "Country")</td>
  32:     </tr>
  33: </table>

最后看看最终呈现出来的效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏函数式编程语言及工具

Akka(4): Routers - 智能任务分配

    Actor模式最大的优点就是每个Actor都是一个独立的任务运算器。这种模式让我们很方便地把一项大型的任务分割成若干细小任务然后分配给不同的Actor去...

2865
来自专栏DOTNET

ASP.NET Web API编程——序列化与内容协商

1 多媒体格式化器 多媒体类型又叫MIME类型,指示了数据的格式。在HTTP协议中多媒体类型描述了消息体的格式。一个多媒体类型包括两个字符串:类型和子类型。 例...

4166
来自专栏生信技能树

两个神奇的R包介绍,外加实用小抄

认识Tidy Data1.Reshape Data2.Handle Missing Values3.Expand Tables4.split cells一、测...

1844
来自专栏生信小驿站

数据处理第3部分:选择行的基本和高级的方法

原文地址:https://suzan.rbind.io/2018/02/dplyr-tutorial-3/ 作者:Suzan Baert 这是系列dplyr...

981
来自专栏草根专栏

.NET Core装饰模式和.NET Core的Stream

Beverage是所有咖啡饮料的抽象类, 里面的cost方法是抽象的. description变量在每个子类里面都需要设置(表示对咖啡的描述).

42513
来自专栏QQ音乐技术团队的专栏

iOS 中的 Promise 设计模式

无论是代理模式,还是闭包,在处理单一任务的时候,都出色的完成了任务。可是当两种模式要相互配合,一起完成一系列任务,并且每个任务之间还要共享信息,相互衔接,雇主就...

2160
来自专栏令仔很忙

观察者模式和Spring的结合

这周给分了一个任务,就是对查询回来的数据进行各种各样的过滤,有七种不同的过滤条件。过滤条件是在数据库中存着的。在我们项目中有一个热发,就是定时的从数据库中把数...

1442
来自专栏TechBox

一份走心的iOS开发规范前言约定(一)命名规范(二)编码规范2.14 内存管理规范本文参考文章其他有价值的文章

6278
来自专栏好好学java的技术栈

Java基于百度API的图片文字识别(支持中文,英文和中英文混合)

具体文档:http://ai.baidu.com/docs#/OCR-API/e1bd77f3

3462
来自专栏大内老A

ASP.NET Core的配置(3): 将配置绑定为对象[上篇]

出于编程上的便利,我们通常不会直接利用ConfigurationBuilder创建的Configuration对象读取某个单一配置项的值,而是倾向于将一组相关的...

2166

扫码关注云+社区

领取腾讯云代金券