目錄：

• 說(shuō)明
• Form表單
• 使用TagBuilder創(chuàng)建自定義標(biāo)簽
• 強(qiáng)類型HtmlHelper
• LabelFor數(shù)據(jù)標(biāo)簽
• DisplayFor 和 EditorFor顯示和編輯Model數(shù)據(jù)
• 思考題

說(shuō)明

本節(jié)接續(xù)上一節(jié)MVC5 + EF6 + Bootstrap3 (8) HtmlHelper用法大全(上)，繼續(xù)討論HtmlHelper的用法。

下面所有HtmlHelper代碼均寫在Views文件夾下DefaultController文件夾里的DefaultAction.cshtml文件中。這個(gè)View文件對(duì)應(yīng)一個(gè)名為DefaultController的控制器。

Form表單

在HtmlHelper中生成表單Form會(huì)用到兩個(gè)函數(shù)：BeginForm和EndForm。有兩種方法可以生成<form>...</form>表單，使用方法如下所示：

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Get)) {@Html.TextBox("NameId")<input type="submit" value="SubmitButton" /> }@{Html.BeginForm("actionName", "controllerName", FormMethod.Post);}@Html.TextBox("NameId")<input type="submit" value="SubmitButton" /> @{Html.EndForm();}

我們?cè)贔orm中寫入了一個(gè)TextBox和一個(gè)提交按鈕。TextBox的HtmlHelper用法上一節(jié)已經(jīng)講過(guò)，而比較奇特的是提交按鈕沒(méi)有對(duì)應(yīng)的HtmlHelper函數(shù)來(lái)生成，需要用HTML語(yǔ)言直接寫。后面我們會(huì)解決這個(gè)問(wèn)題。

仔細(xì)看上面兩種生成Form方法的區(qū)別：第一種方法將Html.BeginForm()函數(shù)放入@using (){}結(jié)構(gòu)中這種方法可以直接生成form的開(kāi)始標(biāo)記和結(jié)束標(biāo)記；第二種方法先寫Html.BeginForm()函數(shù)生成開(kāi)始標(biāo)記，再在最后寫Html.EndForm()函數(shù)生成結(jié)尾標(biāo)記。這兩種方法生成的結(jié)果是一樣的。結(jié)果如下：

<form action="/controllerName/actionName" method="get">
　　<input id="NameId" name="NameId" type="text" value="" />
<input type="submit" value="SubmitButton" /> </form>
<form action="/controllerName/actionName" method="post"> 　　<input id="NameId" name="NameId" type="text" value="" /><input type="submit" value="SubmitButton" /> </form>

從運(yùn)行結(jié)果可以看出BeginForm()的第一個(gè)參數(shù)指定Action的名字，第二個(gè)參數(shù)指定Controller的名字，第三個(gè)參數(shù)指定提交的時(shí)候是用Post方法還是Get方法。上面代碼中第一個(gè)Form用的是Get方法，第二個(gè)Form用的是Post方法。

使用TagBuilder創(chuàng)建自定義標(biāo)簽

前面說(shuō)到?jīng)]有提交按鈕對(duì)應(yīng)的HtmlHelper函數(shù)，那么我們就自己動(dòng)手創(chuàng)建一個(gè)。

上帝關(guān)上了一扇門，就一定會(huì)為我們打開(kāi)一扇窗。這個(gè)窗戶就是TagBuilder。顧名思義，TagBuilder就是標(biāo)簽建造器，我們就用它來(lái)建造屬于我們自己標(biāo)簽生成函數(shù)。

首先在項(xiàng)目中創(chuàng)建一個(gè)Classes文件夾，用來(lái)存放我們將要?jiǎng)?chuàng)建的類。在這個(gè)文件夾中創(chuàng)建一個(gè)名為HtmlExtensions.cs的類，這個(gè)類名不是強(qiáng)制性的，寫什么都可以。在這個(gè)類中寫入如下代碼：

using System.Web.Mvc; public static class HtmlExtensions {/// <summary>/// 自定義一個(gè)@html.Submit()/// </summary>/// <param name="helper"></param>/// <param name="value">value屬性</param>/// <returns></returns>public static MvcHtmlString Submit(this HtmlHelper helper, string value){var builder = new TagBuilder("input");builder.MergeAttribute("type", "submit");builder.MergeAttribute("value", value); return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));
　　}
}

我們來(lái)解讀一下上面的代碼：

• 首先，要用TagBuilder就要引入System.Web.Mvc類庫(kù)。
• 接著我們看這個(gè)函數(shù)的參數(shù)，this HtmlHelper helper保證這個(gè)方法會(huì)被添加到HtmlHelper中，string value對(duì)應(yīng)將來(lái)的提交按鈕顯示的文字，也就是value屬性。
• var builder = new TagBuilder("input");使我們創(chuàng)建的標(biāo)簽名字設(shè)為input。
• MergeAttribute函數(shù)給創(chuàng)建出的元素添加屬性，如MergeAttribute("type", "submit") 就是加入 type="submit" 屬性。
• TagRenderMode.SelfClosing使生成的標(biāo)簽自我關(guān)閉，也就是說(shuō)有<input />這種形式。
• 最后用MvcHtmlString作為返回值是為了使返回值不被轉(zhuǎn)義，比如"<"不會(huì)被轉(zhuǎn)成"&lt"。這是我們不想看到的。

然后我們?cè)赩iew中寫入下面代碼調(diào)用剛才寫好的函數(shù)：

@Html.Submit("SubmitButton")

生成結(jié)果如下：

<input type="submit" value="SubmitButton" />

可以看到我們?cè)诤瘮?shù)中所設(shè)置的標(biāo)簽名、屬性、自包含都做到了。這樣我們就成功生成了自創(chuàng)的submit按鈕。

強(qiáng)類型HtmlHelper

HtmlHelper有強(qiáng)類型和弱類型之分。前面所介紹的這些函數(shù)統(tǒng)統(tǒng)都是弱類型的。那么強(qiáng)類型和弱類型有什么區(qū)別？簡(jiǎn)單點(diǎn)說(shuō)就是強(qiáng)類型會(huì)用到MVC中的Model，而弱類型不用。

Htmlhelper中幾乎每一個(gè)弱類型函數(shù)都會(huì)對(duì)應(yīng)一個(gè)強(qiáng)類型函數(shù)，它們的對(duì)應(yīng)關(guān)系是強(qiáng)類型函數(shù)名比弱類型函數(shù)名多了一個(gè)For。比如TextBox()是一個(gè)弱類型函數(shù)，那么其對(duì)應(yīng)的強(qiáng)類型函數(shù)就是TextBoxFor()。

后面的部分我們需要借助Model來(lái)展示代碼，因此在解決方案中的Models文件夾中創(chuàng)建一個(gè)簡(jiǎn)單的Model，就叫Simple類。文件名為Simple.cs代碼如下：

namespace SlarkInc.Models {public class Simple{public string Name{ get; set; }} }

既然是一個(gè)簡(jiǎn)單的Model，那我們就只給它一個(gè)屬性：Name。

創(chuàng)建好這個(gè)Model之后我們就可以在Controller中給這個(gè)Model初始化并賦值，并把它傳遞給View來(lái)為我們的強(qiáng)類型HtmlHelper做準(zhǔn)備。編輯DefaultControllerController.cs文件，寫入如下代碼：

using System.Web.Mvc; using SlarkInc.Models;namespace SlarkInc.Controllers {public class DefaultControllerController : Controller{// GET: /DefaultController/public ActionResult DefaultAction(){Simple s = new Simple();s.Name= "Slark";return View(s);}} }

圖中黃色部分初始化Model，給Model賦值并將Model傳遞給View。

下面我們就在View中用強(qiáng)類型HtmlHelper將Model中的數(shù)據(jù)顯示出來(lái)。從上面的代碼可以看出DefaultController調(diào)用的是名為DefaultAction的View。因此我們?cè)赩iews文件夾下找到DefaultController文件夾，編輯其中的DefaultAction.cshtml文件。在文件第一行加入如下代碼：

@model SlarkInc.Models.Simple

這行代碼表示這個(gè)View用的是Simple這個(gè)Model。

然后在文件中插入如下代碼：

@Html.TextBoxFor(m =>m.Name)

這就是我們的強(qiáng)類型HtmlHelper函數(shù)的一個(gè)例子TextBoxFor。這個(gè)函數(shù)只有一個(gè)參數(shù)m =>m.Name。這里的m可以換成其他名字，它都指代我們這里的Model。TextBoxFor的這個(gè)參數(shù)的意思就是取Model的Name屬性。由于我們?cè)贑ontroller中初始化了這個(gè)值，那么這個(gè)值應(yīng)該是"Slark"。運(yùn)行結(jié)果如下。

<input id="Name" name="Name" type="text" value="Slark" />

由上面結(jié)果可以看出，屬性的名字Name被賦值給了這個(gè)元素的id和name，屬性值Slark賦值給了value屬性。這樣我們就完成了一個(gè)簡(jiǎn)單的強(qiáng)類型HtmlHelper。

LabelFor數(shù)據(jù)標(biāo)簽

強(qiáng)類型的一大好處是我們可以通過(guò)改動(dòng)Model而改變這個(gè)Model在所有View中的顯示。如下圖的一個(gè)輸入框：

怎么樣可以通過(guò)改動(dòng)Model來(lái)改動(dòng)輸入框前面的文字呢？這里我們就要用到DataAnnotations，有人叫它元數(shù)據(jù)，或者叫數(shù)據(jù)批注。簡(jiǎn)單來(lái)說(shuō)它就是對(duì)數(shù)據(jù)的描述。之后用HtmlHelper的LabelFor就可以讀到這個(gè)信息并顯示出來(lái)。我們把之前的Simple類寫成如下樣子：

using System.ComponentModel.DataAnnotations; namespace SlarkInc.Models { public class Simple{[Display(Name = "Name")]
public string Name { get; set; }[Display(Name = "E-mail")]
　　 　 public string Email { get; set; }} }

代碼中黃色的部分就是我們?yōu)榱耸褂迷獢?shù)據(jù)而增加的代碼。第一行的部分是引入了要使用元數(shù)據(jù)所需要的類庫(kù)。[Display(Name = "E-mail")]這一行表示當(dāng)要顯示這個(gè)變量的名字的時(shí)候我們顯示"E-mail"這個(gè)字符串。HtmlHelper函數(shù)LabelFor()正是從這里獲取到需要顯示的字符串。

在DefaultController中我們要給Email變量賦值，代碼如下：

using System.Web.Mvc; using SlarkInc.Models;namespace SlarkInc.Controllers {public class DefaultControllerController : Controller{// GET: /DefaultController/public ActionResult DefaultAction(){Simple s = new Simple();s.Name = "Slark";s.Email = "xxx@163.com";return View(s);}} }

在對(duì)應(yīng)的View中寫下如下代碼：

@Html.LabelFor(m => m.Email) : @Html.TextBoxFor(m => m.Email)

黃色標(biāo)記的LabelFor函數(shù)獲得的參數(shù)是Simple類的Email屬性，LabelFor函數(shù)就會(huì)去尋找Model中對(duì)應(yīng)Email的屬性的Display元數(shù)據(jù)，進(jìn)而生成結(jié)果如下：

<label for="Email">E-mail</label> : <input id="Email" name="Email" type="text" value="xxx@163.com" />

看生成的結(jié)果LabelFor函數(shù)會(huì)生成<Label>標(biāo)簽，并且其屬性for的值對(duì)應(yīng)變量名"Email"，而標(biāo)簽的內(nèi)部文字InnerText就是Display元數(shù)據(jù)的Name屬性對(duì)應(yīng)的值"E-mail"。

DisplayFor 和 EditorFor顯示和編輯Model數(shù)據(jù)

元數(shù)據(jù)在ASP.NET MVC的一個(gè)最主要的應(yīng)用就是可以通過(guò)Model來(lái)控制數(shù)據(jù)顯示和修改時(shí)所生成的HTML元素的類型。在HtmlHelper中DisplayFor是用來(lái)顯示數(shù)據(jù)的，而EditorFor是用來(lái)編輯數(shù)據(jù)的。它們都會(huì)根據(jù)元數(shù)據(jù)對(duì)數(shù)據(jù)的描述生成不同類型的HTML元素。

將Simple改成如下代碼：

using System.ComponentModel.DataAnnotations; namespace SlarkInc.Models { public class Simple{[Display(Name = "Name")] public string Name { get; set; }[Display(Name = "E-mail")][DataType(DataType.EmailAddress)]
　　　　 public string Email { get; set; }} }

代碼中黃色部分是對(duì)Email數(shù)據(jù)類型的描述。它的數(shù)據(jù)類型是郵件地址EmailAddress。在View中寫下如下代碼：

@Html.DisplayFor(m => m.Email) @Html.EditorFor(m => m.Email)

DisplayFor和EditorFor都將Model的Email屬性作為自己的參數(shù)。運(yùn)行結(jié)果如下：

對(duì)應(yīng)的代碼如下：

<a href="mailto:xxx@163.com">xxx@163.com</a> <input class="text-box single-line" id="Email" name="Email" type="email" value="xxx@163.com" />

?從結(jié)果中可以看到由于數(shù)據(jù)類型是EmailAddress,其在顯示數(shù)據(jù)時(shí)就生成了一個(gè)發(fā)送郵件的超鏈接。在編輯數(shù)據(jù)時(shí)就生成了一個(gè)email專用的輸入框<input type="email">。

思考題

學(xué)而不思則罔，思而不學(xué)則殆。這里出幾個(gè)思考題供大家檢驗(yàn)學(xué)習(xí)效果。

1.HtmlHelper生成Form有幾種方法？分別怎么寫？

2.如何自定義一個(gè)能生成<img>元素的HtmlHelper函數(shù)。

3.LableFor、DisplayFor、EditorFor函數(shù)用法有什么異同？

總結(jié)

以上是生活随笔為你收集整理的HtmlHelper用法大全(下)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。