ASP.NET MVC 2 Templates, Part 4: Custom Object Templates[翻译]
原文链接
ASP.NET MVC 2 Templates, Part 1: Introduction[翻译]
ASP.NET MVC 2 Templates, Part 2: ModelMetadata[翻译]
ASP.NET MVC 2 Templates, Part 3: Default Templates[翻译]
自定义模版
在Part 3,我们看到把内置模版写成.ascx文件是什么样子的.在这篇文章,我们会讨论Object模版的一些自定义方法,使得其有不同的特性和不同的显示模版UI.
下面就是这个例子的代码:
Models/SampleModel.cs
using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace TemplatesPart4.Models { public class SampleModel { public static SampleModel Create() { return new SampleModel { Boolean = true, EmailAddress = "admin@contoso.com", Decimal = 21.1234M, Integer = 42, Hidden = "Uneditable", HiddenAndInvisible = "Also uneditable", Html = "This is <b>HTML</b> enabled", MultilineText = "This\r\nhas\r\nmultiple\r\nlines", NullableBoolean = null, Password = "supersecret", String = "A simple string", Url = "http://www.cnblogs.com/lemontea", ChildModel = new ChildModel { FirstName = "zhang", LastName = "weiwen", } }; } public bool Boolean { get; set; } [DataType(DataType.EmailAddress)] public string EmailAddress { get; set; } public decimal Decimal { get; set; } [HiddenInput] public string Hidden { get; set; } [HiddenInput(DisplayValue = false)] public string HiddenAndInvisible { get; set; } [DataType(DataType.Html)] public string Html { get; set; } [Required] [Range(10, 100)] public int Integer { get; set; } [DataType(DataType.MultilineText)] public string MultilineText { get; set; } public bool? NullableBoolean { get; set; } [DataType(DataType.Password)] public string Password { get; set; } public string String { get; set; } [DataType(DataType.Url)] public string Url { get; set; } [DisplayFormat(NullDisplayText = "(null value)")] public ChildModel ChildModel { get; set; } } }
Models/ChildModel.cs
using System.ComponentModel.DataAnnotations; namespace TemplatesPart4.Models { [DisplayColumn("FullName")] public class ChildModel { [Required, StringLength(25)] public string FirstName { get; set; } [Required, StringLength(25)] public string LastName { get; set; } [ScaffoldColumn(false)] public string FullName { get { return FirstName + " " + LastName; } } } }
Controllers/HomeController.cs
using System.Web.Mvc; using TemplatesPart4.Models; namespace TemplatesPart4.Controllers { public class HomeController : Controller { static SampleModel model = SampleModel.Create(); public ActionResult Index() { return View(model); } public ViewResult Edit() { return View(model); } [HttpPost] [ValidateInput(false)] public ActionResult Edit(SampleModel editedModel) { if (ModelState.IsValid) { model = editedModel; return RedirectToAction("Details"); } return View(editedModel); } } }
Views/Home/Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<TemplatesPart4.Models.SampleModel>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Index </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Index</h2> <fieldset style="padding: 1em; margin: 0; border: solid 1px #999;"> <%= Html.DisplayForModel() %> </fieldset> <p> <%= Html.ActionLink("Edit", "Edit") %></p> </asp:Content>
Views/Home/Edit.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<TemplatesPart4.Models.SampleModel>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> Edit </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <h2>Edit</h2> <% using (Html.BeginForm()) { %> <fieldset style="padding: 1em; margin: 0; border: solid 1px #999;"> <%= Html.ValidationSummary("Broken stuff:") %> <%= Html.EditorForModel() %> <input type="submit" value=" Submit " /> </fieldset> <% } %> <p> <%= Html.ActionLink("Details", "Index") %></p> </asp:Content>
默认显示
运行,界面如下图,这时没有任何自定义项:
译注:原文中的截图会生成ChildModel,(null value),不知是不是版本原因,ASP.NET MVC 2 RTM版本的Object模版应该是不会渲染这个属性的(!metadata.IsComplexType),前面的文章和下面同理.RTM官方版本的Object模版如下:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <script runat="server"> bool ShouldShow(ModelMetadata metadata) { return metadata.ShowForDisplay && metadata.ModelType != typeof(System.Data.EntityState) && !metadata.IsComplexType && !ViewData.TemplateInfo.Visited(metadata); } </script> <% if (Model == null) { %> <%= ViewData.ModelMetadata.NullDisplayText %> <% } else if (ViewData.TemplateInfo.TemplateDepth > 1) { %> <%= ViewData.ModelMetadata.SimpleDisplayText %> <% } else { %> <% foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => ShouldShow(pm))) { %> <% if (prop.HideSurroundingHtml) { %> <%= Html.Display(prop.PropertyName) %> <% } else { %> <% if (!String.IsNullOrEmpty(prop.GetDisplayName())) { %> <div class="display-label"><%= prop.GetDisplayName() %></div> <% } %> <div class="display-field"><%= Html.Display(prop.PropertyName) %></div> <% } %> <% } %> <% } %>
编辑页面:
表格布局
表格布局是最普通的名值对布局.注意编辑版本的模版在required字段的label前添加星号(*).
Views/Shared/DisplayTemplates/Object.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <% if (Model == null) { %> <%= ViewData.ModelMetadata.NullDisplayText %> <% } else if (ViewData.TemplateInfo.TemplateDepth > 1) { %> <%= ViewData.ModelMetadata.SimpleDisplayText %> <% } else { %> <table cellpadding="0" cellspacing="0" border="0"> <% foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForDisplay && !ViewData.TemplateInfo.Visited(pm))) { %> <% if (prop.HideSurroundingHtml) { %> <%= Html.Display(prop.PropertyName) %> <% } else { %> <tr> <td> <div class="display-label" style="text-align: right;"> <%= prop.GetDisplayName() %> </div> </td> <td> <div class="display-field"> <%= Html.Display(prop.PropertyName) %> </div> </td> </tr> <% } %> <% } %> </table> <% } %>
截图:
Views/Shared/EditorTemplates/Object.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> <% if (ViewData.TemplateInfo.TemplateDepth > 1) { %> <%= ViewData.ModelMetadata.SimpleDisplayText %> <% } else { %> <table cellpadding="0" cellspacing="0" border="0"> <% foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm))) { %> <% if (prop.HideSurroundingHtml) { %> <%= Html.Editor(prop.PropertyName) %> <% } else { %> <tr> <td> <div class="editor-label" style="text-align: right;"> <%= prop.IsRequired ? "*" : "" %> <%= Html.Label(prop.PropertyName) %> </div> </td> <td> <div class="editor-field"> <%= Html.Editor(prop.PropertyName) %> <%= Html.ValidationMessage(prop.PropertyName, "*") %> </div> </td> </tr> <% } %> <% } %> </table> <% } %>
截图:
Shallow Dive vs. Deep Dive
在上面的截图中,ChildModel显示为"(null value)",ChildModel是一个复合model,所以所以它遵循shallow dive的原则,在我们有一个ChildModel对象前,它显示了我们在model设置的NullDisplayText特性值.
注意即使在编辑版本中,我们也不能编辑ChildModel,因为shallow dive原则阻止我们递归呈现编辑UI.
如果我们改变编辑模版,把第一个 if 语句去掉(阻止deep dive的那个),这时就会为ChildModel显示可编辑字段:
在SampleModel的Create()方法中加入:
ChildModel = new ChildModel { FirstName = "zhang", LastName = "weiwen", }
截图:
因为我们还没有改变我们的Object显示模版,我们仍然使用shallow dive原则.另外,它显示全名是因为定义ChildModel时使用了DataAnnotations特性[DisplayColumn]来说明"当要显示这个复合对象时显示这一列",我门指定[DisplayColumn]给命名为FullName的综合属性,这个属性通常不会显示,因为我们附注了[ScaffoldColumn(false)].
如果我们改变Object的显示模版为deep dive,那么显示如下:
结语
这篇文章,我给你介绍了几个自定义Object模版的方法,用于显示不同的界面.包括表格布局代替行布局,required字段前添加星号,而且实现复合对象嵌套复合对象的Deep Dive场景.下一篇文章,我会怎么改变所有模版实现围绕母版页布局,灵感来自Eric Hexter的文章Opinionated Input Builders.
