Asp.Net MVC4 系列--进阶篇之Helper(2)
本章接着介绍Asp.NetMVC4中的Helper
首先做准备工作,为了读者方便阅读,笔者把上篇文章中(Asp.Net MVC4系列—进阶篇之Helper(1)) 的代码再复制在这边一份,这篇文章都以此为开始:
Person类(Model中):
public class Person { public int PersonId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public DateTime BirthDate { get; set; } public Address HomeAddress { get; set; } public bool IsApproved { get; set; } public Role Role { get; set; } }
public class Address { public string Line1 { get; set; } public string Line2 { get; set; } public string City { get; set; } public string PostalCode { get; set; } public string Country { get; set; } } public enum Role { Admin, User, Guest }
PersonController.cs
public class PersonController : Controller { public ActionResult CreatePerson() { return View(new Person()); } [HttpPost] public ActionResult CreatePerson(Person person) { return View(person); } }
Route:
routes.MapRoute( name: "FormRoute", url:"app/forms/{controller}/{action}" ); }
View(CreatePerson.cshtml)
<html> @modelMVCHelperStudy.Models.Person @{ ViewBag.Title = "CreatePerson"; } <h2>CreatePerson</h2> <body> @using(Html.BeginRouteForm("FormRoute", new {},FormMethod.Post, new { @class ="personClass", data_formType="person"})) { <div class="dataElem"> <label>PersonId</label> @Html.TextBoxFor(m =>m.PersonId) </div> <div class="dataElem"> <label>FirstName</label> @Html.TextBoxFor(m => m.FirstName) </div> <div class="dataElem"> <label>LastName</label> @Html.TextBoxFor(m =>m.LastName) </div> <div class="dataElem"> <label>Role</label> @Html.DropDownListFor(m =>m.Role, new SelectList(Enum.GetNames(typeof(MVCHelperStudy.Models.Role)))) </div> <input type="submit" value="Submit" /> } </body> </html>
测试运行:
首先,使用模板方法重构View
把表单中间代码替换为:
<div class="dataElem"> <label>PersonId</label> @Html.Editor("PersonId") </div> <div class="dataElem"> <label>FirstName</label> @Html.Editor("FirstName") </div> <div class="dataElem"> <label>LastName</label> @Html.EditorFor(m =>m.LastName) </div> <div class="dataElem"> <label>Role</label> @Html.EditorFor(m => m.Role) </div> <div class="dataElem"> <label>BirthDate</label> @Html.EditorFor(m =>m.BirthDate) </div>
代码说明:使用了Html.Editor替代以前的实现。
看一下生成的html
<form action="/app/forms/Person/CreatePerson" class="personClass" data-formType="person" method="post"><div class="dataElem"> <label>PersonId</label> <input class="text-box single-line" data-val="true" data-val-number="The field PersonId must be anumber." data-val-required="The PersonId field is required." id="PersonId" name="PersonId" type="number" value="0" /> </div> <div class="dataElem"> <label>FirstName</label> <input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="" /> </div> <div class="dataElem"> <label>LastName</label> <input class="text-boxsingle-line" id="LastName" name="LastName" type="text" value="" /> </div> <div class="dataElem"> <label>Role</label> <input class="text-boxsingle-line" data-val="true" data-val-required="The Rolefield is required." id="Role" name="Role" type="text" value="Admin" /> </div> <div class="dataElem"> <label>BirthDate</label> <input class="text-boxsingle-line" data-val="true" data-val-date="The fieldBirthDate must be a date." data-val-required="The BirthDate field isrequired." id="BirthDate" name="BirthDate" type="datetime" value="1/1/0001 12:00:00 AM" /> </div> <input type="submit" value="Submit" /> </form>
对比之前生成的html,区别就是多了“type”属性,好处是它使得html5根据不同的type显示不同,这需要支持html5的浏览器来实现。
常用的MVC模板helper方法
Html.Display(“name”) |
Html.DisplayFor(m=>m.name) |
Html.Editor(“name”) |
Html.EditorFor(m=>m.name) |
Html.Label(“name”) |
Html.LabelFor(m=>m.name) |
Label 方法和Display方法
调整Controller代码:
public ActionResult CreatePerson() { return View(newPerson() { FirstName = "iori", LastName = "l", PersonId = 100, BirthDate = DateTime.Now.AddYears(-20) }); }
返回一个默认的Person。
调整View代码:
<div class="dataElem"> @Html.Label("PersonId") @Html.Display("PersonId") </div> <div class="dataElem"> @Html.Label("FirstName") @Html.Display("FirstName") </div> <div class="dataElem"> @Html.LabelFor(m => m.LastName) @Html.DisplayFor(m => m.LastName) </div> <div class="dataElem"> @Html.LabelFor(m => m.Role) @Html.DisplayFor(m => m.Role) </div> <div class="dataElem"> @Html.LabelFor(m => m.BirthDate) @Html.DisplayFor(m => m.BirthDate) </div>
为了对比Display和Label,因此分别显示。测试结果:
可以看到,Display是显示Property的Value,而Label是显示Property的Name
再对比一下生成的html:
<form action="/app/forms/Person/CreatePerson" class="personClass" data-formType="person" method="post"> <div class="dataElem"> <label for="PersonId">PersonId</label> 100 </div> <div class="dataElem"> <label for="FirstName">FirstName</label> iori </div> <div class="dataElem"> <label for="LastName">LastName</label> l </div> <div class="dataElem"> <label for="Role">Role</label> Admin </div> <div class="dataElem"> <label for="BirthDate">BirthDate</label> 13/4/1994 9:24:09 PM </div> <input type="submit" value="Submit"/> </form>
可以看到,label自动生成的for属性,而display则直接把值打在了页面上,甚至没有conver任何标签。
Whole-Model Template
Whole-Model Template 主要包括:
Html.DisplayForModel() |
根据当前model每个property的类型,生成相应html(只读) |
Html.EditForModel() |
根据当前model的每个property的类型,生成相应可编辑的html |
Html.LabelForModel() |
根据当前的model生成标签 |
使用Html.EditForModel重构View代码:
@using(Html.BeginRouteForm("FormRoute", new {},FormMethod.Post, new { @class = "personClass",data_formType="person"})) { @Html.EditorForModel() <input type="submit" value="Submit" /> }
运行,查看结果
使用model metadata
1. hiddenInput
给PersonId加一个属性:
[HiddenInput(DisplayValue=false)]
运行,测试:
点击submit
Debug查看Person的值,可以看到PersonId被提交了,值为100。原因是我们的attribute告诉mvcframework把这个input解析为Hidden,查看html:
<input data-val="true" data-val-number="The field PersonId must be a number. " data-val-required="The PersonId field is required." id="PersonId" name="PersonId" type="hidden" value="100"/>
可以看到,type已经被解析为了hidden
使用[ScaffoldColumn]属性
一个类中不是每个字段都是需要mvc frame解析为html的,如果希望跳过某个property,可以使用这个属性。例如:
[ScaffoldColumn(false)] public int PersonId { get; set; }
这样的话,PersonId根本不会参与从property解析到html的过程。
使用[Display(Name=”XXX”)]
如果希望html解析出来的Label显示成别的字,可以使用这个属性。例如:
[Display(Name = "Birth Date")] public DateTime BirthDate { get; set; }
对应的html标签:
<label for="BirthDate">BirthDate</label>
使用 [DataType(type)]
如果想改变mvc frame 解析的类型,可以使用此属性,例如:
[DataType(DataType.Date)] public DateTime BirthDate { get; set; }
这样mvc解析这个property就会当做Date类型,而不是DateTime了。
相应的html标签:
<input class="text-boxsingle-line" data-val="true" data-val-date="The field BirthDate mustbe a date." data-val-required="The BirthDate field is required." id="BirthDate" name="BirthDate" type="date" value="13/4/1994" />
其他DataType可以选择的类型
DateTime |
Date |
Time |
Text |
PhoneNumber |
MultipleText |
Password |
Url |
EmailAddress |
使用[UIHint(“XX”)]属性
UIHint属性允许指定一个模板名称,mvc framework解析的时候,看到这个属性就会先找到对应的模板,再解析为相应的html,例如:
[UIHint("MultilineText")] public string FirstName { get; set; }
相应的html:
<textarea class="text-box multi-line" id="FirstName" name="FirstName"> iori</textarea>
MVC 自带的模板
Boolean |
DateTime |
Date |
EmailAddress |
HiddenInput |
Html |
MultiLineText |
Number |
Object |
Password |
String |
Time |
Text |
Tel |
Url |
Mvc会为每个模板生成对应的html,读者可以一一尝试,根据自己的需要选择的应用到项目中。每个模板,也是可以被重写的。
使用metadata类
1 . 修改Person类为partial,去掉所有的DataType,Hint(就像一个Entity类):
public int PersonId{ get; set; } public string FirstName { get; set; } public string LastName { get; set; } public DateTime BirthDate { get; set; } public Address HomeAddress { get; set; } public bool IsApproved { get; set; } public Role Role { get; set; }
为了给Person类应用metadata 类型,需要先将其设为partial
2. 创建一个metadata 类
public partial class PersonMetaData { [HiddenInput(DisplayValue=false)] public int PersonId { get; set; } [Display(Name="First")] public string FirstName { get; set; } [Display(Name = "Last")] public string LastName { get; set; } }
3. 在Person类加上metadatatype属性
[MetadataType(typeof(PersonMetaData))]
4. View 中使用EditFormModel
@using(Html.BeginRouteForm("FormRoute",new {}, FormMethod.Post, new { @class = "personClass",data_formType="person"})) { @Html.EditorForModel() <input type="submit" value="Submit" /> }
使用metadata类的目的,希望Entity类和MVC Attribute标记过的类分开,但显示的时候,希望MVCFramework会从medadata类中找到一致的Property,拿出Attribute应用。运行,查看效果,
可以看到标签名字变了,PersonId也隐藏了,因此Metadata类的Display标签和Hidden标签都产生了效果。
解析嵌套类型 : Address
前面的例子,由于HomeAddress字段是class,因此MVCFramework没有识别出来,因此需要手动去再调用一下EditFor:
<p> @Html.EditorFor(m => m.HomeAddress) </p>
运行:
可以看到这样Address类型就可以被识别了。
显示指定Template
Html.EditorFor(m =>m.SomeProperty, "MyTemplate")
可以告诉MVC Framework,使用指定的Template。
Template的查找顺序
1. Customize的template
2. Built-in的template
3. 传入Helper的Template,e.g. : Html.EditorFor(m=>m.name,”T”);
4. UIHint
5. DataType
Customize一个Template
在Shared文件夹建一个EditorTemplates文件夹,因为所有的customize的template,MVCFramework都会来这里找。
创建一个View放在EditorTemplates文件夹,可以反射出枚举的每一个成员并显示:
@model Enum @Html.DropDownListFor(m => m,Enum.GetValues(Model.GetType()) .Cast<Enum>() .Select(m => { string enumVal =Enum.GetName(Model.GetType(), m); return new SelectListItem() { Selected = (Model.ToString() ==enumVal), Text = enumVal, Value = enumVal }; }))
应用,在metadata类给Role成员加UIHint
[UIHint("Enum")] public Role Role { get; set; }
运行,查看结果
可以看到,自定义的Template成功的工作了。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。