第5章 表单和HTML辅助方法(HtmlHelper、辅助方法的使用、HTML辅助方法的工作原理、强类型辅助方法)

一、表单的使用

1、表单

<form action="http://www.bing.com/search" monthod="get">
<input name="q" type="text"/>
<input type="submit" value="Search!"/>
</form>

产出地址：http://www.bing.com/search?q=love

2、get方法还是Post方法

在Web应用程序中，Get请求用于读操作，Post请求用于写操作（通常包括更新、创建、删除）

二、HTML辅助方法

         每一个Razor [ˈrezɚ] 视图都继承了它们基类的Html属性。

         Html属性的类型是System.Web.Mvc.HtmlHelper<T>,这里的T是一个泛型类型参数，代表传递视图的模型类型（默认是dynamic）



ASP.NET MVC 所有的HtmlHelper扩展方法都在名称空间System.Web.Mvc.Html中（在web.Config）

@using (Html.BeginForm("Search", "Home", FormMethod.Get,
new { target="_blank",@class="editForm",data_validatable=true}))
{
<input type="text" name="q"/>
<input type="submit" value="Search"/>
}

生成后Html

<form action="/Home/Search" class="editForm" data-validatable="True" method="get" target="_blank">
<input type="text" name="q"/>
<input type="submit" value="Search"/>
</form>

1、自动编码

许多辅助方法都可以用来输出模型值。所有这些输出模型值的辅助方法都会在渲染之前，对值进行HTML编码(避免XSS工具)。

如：TextArea辅助方法，输出HTML，就进行编码

@Html.TextArea("text","Hello <br/> World")

产生标记

<textarea cols="20" id="text" name="text" rows="2">
Hello <br/> World</textarea>

2、辅助方法的使用

BeginForm辅助方法的另一个重载版本：

@using (Html.BeginForm("Search", "Home", FormMethod.Get, new { target="_blank",@class="editForm",data_validatable=true}))
{}

生成后Html

<form action="/Home/Search" class="editForm" data-validatable="True" method="get" target="_blank"></form>

（1）、其中new { target="_blank",@class="editForm",data_validatable=true}是htmlAttributes参数，它的类型是IDictionary<string, object>，辅助方法利用字典条目（对象的属性名称和属性值）创建辅助方法生成元素的特性。

（2）、class属性前加@,是应为class是c#语言中的一个保留关键字。

（3）、属性名中带下划线生成html代码后转成连字符（第8章介绍框架的Ajax特性时，将看到带连字符的属性名）

3、HTML辅助方法的工作原理

每一个Razor视图都继承了它们基类的Html属性。Html属性的类型是System.Web.Mvc.HtmlHelper<T>,这里的T是一个泛型类型的参数，代表传递给视图的模型类型（默认是dynamic）。这个属性提供了一些可以在视图中调用的实例方法，比如：EnableClientValidation 开启关闭客户端验证.

4、设置专辑编辑表单

@using(Html.BeginForm())
{
@Html.ValidationSummary(excludePropertyErrors:true)

<input type="submit" value="Save"/>
}

Html.BeginForm() 向当前URL发送一个HTTP POST请求。

ValidationSummary辅助方法用来显示ModelState字典中所有验证错误的无序列表（验证摘要）。

如果值为true，只显示ModelState中与模型本身有关的错误。如：ModelState.AddModelError("Title","标题不能为空") 与Title属性关联的错误

如果值为false，只显示ModelState中与模型本身有关的错误。如：ModelState.AddModelError("","标题不能为空")

5、添加输入元素

StoreManager Edit.cshtml视图代码的表单部分，并突出显示了输入辅助方法：

（1）、Html.TextBox和Html.TextArea

（2）、Html.Label

（3）、Html.DropDownList和Html.ListBox

（4）、Html.ValidationSummary

控制器中添加ModelState.AddModelError("Title","错误");

视图中添加@Html.ValidationSummary("Title")

6、辅助方法、模型和视图数据

辅助方法提供了对HTML细粒度控制的同时带走了构建UI的乏味工作。

如：Html.TextBox和Html.DropDownList检查ViewData对象以获得要显示的值（在ViewBag对象中的所有的值也可以通过ViewData得到）
情况一：

控制器：

public ActionResult Edit(int id)
{
ViewBag.Price = 10.0;
return View();
}

视图：

@Html.TextBox("Price")

产生结果：

<input id="Price" name="Price" type="text" value="10"/>

情况二：

控制器：

public ActionResult Edit(int id)
{
ViewBag.Album=new Album{Price=11}
return View();
}

视图：

@Html.TextBox("Album.Price")

产生结果：

<input id="Album.Price" name="Album.Price" type="text" value="11"/>

情况三：

如果想生成的值带小数点，那么 Price=11.0m

7、强类型辅助方法

使用强类型辅助方法时，只需要为其传递一个lambda表达式来指定要渲染的模型属性。

表达式的模型类型必须和为视图指定的模型类型(使用@model指令)一致。

对于强类型视图，需要在视图顶部输入如下所示的代码：

@model MvcMusicStore.Models.Album

使用强类型辅助方法

@Html.LabelFor(model => model.GenreId, "GenreId", new { @class = "control-label col-md-2" })

注意：如果没有提供足够的信息，使其能直接读取模型的Title属性来获取需要的值。

8、辅助方法和模型元数据

如：

@Html.Label("GenreId");

生成HTML标记

<label for="GenrdId">Genre</label>
文本Genre从哪里来的？辅助方法运行时，从装饰Album模型的DisplayName特性中获取的信息。

[DisplayName("Genre")]

public int GenreId{get;set;}

9、模板辅助方法

ASP.NET MVC中模板辅助方法利用元数据和模板构建HTML。

元数据：包括关于模型值（它的名称和类型）的信息和（通过数据注解或自定义提供器添加的）模型元数据。

模型辅助方法：Html.Display和Html.Editor,以及分别与它们对应的强类型方法Html.DisplayFor和Html.EditorFor,还有它们对应的完整模型

Html.DisplayForModel和Html.EditorForModel。

例如：Html.TextBoxFor辅助方法为某个专辑的Title属性生成如下Html标记

<input id="Title" name="Title" type="text" value="值"/>

也可以用EditorFor方法取而代之：

@Html.EditorFor(m=>m.Title)

尽管两种方法生成的同样的HTML标记，但EditorFor方法是使用元数据（数据注释）来改变生成的HTML.

如下：在Title属性添加一个DataType注释。

[Required(ErrorMessage="不能为空")]
[StringLength(160)]
[DataType(DataType.MultilineText)]
public string Title{get;set;}

EditorFor辅助方法生成如下HTML标记：

<textarea class="text-box multi-line" id="Title" name="Title">
内容
</textarea>

10、辅助方法和ModelState

存储模型绑定期间监测到的所有验证错误，以及用户提交用来更新模型的元素值。

三、其他输入辅助方法

1、Html.Hidden 隐藏的输入元素

@Html.Hidden("wizardStep","1")

强类型版本：@Html.HiddenFor(m=>m.wizardStep)

生成如下所示的HTML标记：

<input id="wizardStep" name="wizardStep" type="hidden" value="1"/>

2、Html.Password 密码字段

@Html.Password("UserPassword")

强类型版本：@Html.PasswordFor(m=>m.UserPassword)

3、Html.RadioButton

    @Html.RadioButton("color","red")

    @Html.RadioButton("color","blue",true)

    @Html.RadioButton("color","green")

生成的Html:

    <input id="color" name="color" type="radio" value="red" />

    <input checked="checked" id="color" name="color" type="radio" value="blue" />

    <input id="color" name="color" type="radio" value="green" />

强类型对应方法：

@Html.RadioButtonFor(m=>m.GenreId,"1")

@Html.RadioButtonFor(m=>m.GenreId,"2")

@Html.RadioButtonFor(m=>m.GenreId,"3")

4、Html.CheckBox

@Html.CheckBox("IsDiscounted")

唯一一个渲染两个输入元素的辅助方法。

<input id="IsDiscounted" name="IsDiscounted" type="checkbox" value="true" />

<input name="IsDiscounted" type="hidden" value="false" />

HTML规范中规定浏览器只提交选中的复选框的值。但是第二隐藏输入元素就保证了IsDiscounted有一个值会被提交，即便用户没有选择这个复选框。

四、渲染辅助方法

渲染辅助方法可在应用程序中生成指向其他资源的链接，也可以构建被称为部分视图的可重用UI片段。

1、Html.ActionLink和Html.RouteLink

ActionLink渲染一个超链接。

@Html.ActionLink("编辑","Edit","StoreManager",new {id=1},null)

生成：

<a href="/StoreManager/Edit/1">编辑</a>

Html.RouteLink只接收路由名称

@Html.RouteLink("Link Text",new {action="Edit"})

2、URL辅助方法

(1)、Action 生成一个URL(不是链接)

(2)、RouteUrl和RouteLink一样

(3)、Content 辅助方法：相对路径转换成绝对路径。

<script src="@Url.Content("~/***.js")" type="text/javascript"></scritp>
ASP.Net Mvc5使用的是Razor的第三版本，波浪号当出现在script、style和img元素的src特性时就会被自动解析.

<script src="~/***.js" type="text/javascript"></scritp>

3、Html.Partial和Html.RenderPartial

Partial辅助方法用于将部分视图渲染成字符串。

4、Html.Action和Html.RenderAction

强烈推荐学习下载：MvcMusicStore源码学习

推荐阅读：

【C# - Entity Framework】无法检索"xxxxx"的元数据

HtmlHelper用法大全2：TextBox、Password、TextArea、RadioButton、CheckBox

HtmlHelper用法大全3:Html.LabelFor、Html.EditorFor、Html.RadioButtonFor、Html.CheckBoxFor

HtmlHelper用法大全