MVC 之HTML辅助方法
MVC 之HTML輔助方法
? ? ? ?顧名思義，HTML輔助方法（HTML Helper）就是用來輔助產(chǎn)生HTML之用，在開發(fā)View的時(shí)候一定會(huì)面對(duì)許多HTML標(biāo)簽，處理這些HTML的工作非常繁瑣，為了降低View的復(fù)雜度，可以使用HTML輔助方法幫助你產(chǎn)生一些HTML標(biāo)簽或內(nèi)容，因這些HTML標(biāo)簽都有固定標(biāo)準(zhǔn)的寫法，所以將其包裝成HTML輔助方法，可讓View開發(fā)更快速，也可以避免不必要的語(yǔ)法錯(cuò)誤。
???? ?ASP.NET MVC中內(nèi)建了許多HTML輔助方法，這些HTML輔助方法都是利用C#3.0的擴(kuò)充方法特性，將各種不同的HTML輔助方法擴(kuò)充在HtmlHelper類別里，并且都擁有多載。
? ? ?通過HTML輔助方法的講解，可以有效協(xié)助你面對(duì)常見但又繁瑣的HTML編寫工作，例如，超鏈接、表單聲明（<form>）、表單元素（<input>、<select>、<textarea>）、HTML編碼與解碼、載入其他分部視圖頁(yè)面（Partial View Page）、顯示Model驗(yàn)證失敗的錯(cuò)誤信息等，撰寫ASP.NET MVC一定少不了它。
1.使用HTML輔助方法輸出超鏈接
? ? ??在開發(fā)View頁(yè)面時(shí)最常用的HTML輔助方法莫過于輸出超鏈接，在View中輸出ASP.NET MVC的超鏈接通常會(huì)用Html.ActionLink輔助方法，該方法用于產(chǎn)生文字鏈接，其文字部分會(huì)自動(dòng)進(jìn)行HTML編碼（HtmlEncode）。具體使用情況如下所示。
| 語(yǔ)法范例 | 說明 |
| @Html.ActionLink("鏈接文字","ActionName") | 這是最基本的用法，要跳轉(zhuǎn)的控制器為本視圖所在的控制器。鏈接文字不可為空字符串、空白字符串或null值，否則會(huì)拋出The Value cannot be null or empty的異常。 |
| @Html.ActionLink("鏈接文字","ActionName","ControllerName") | 指定鏈接文字、動(dòng)作、控制器 |
| @Html.ActionLink("鏈接文字","ActionName",new{id=123,page=5}) | 當(dāng)需要設(shè)定額外的RouteValue時(shí)，可以在第三個(gè)參數(shù)傳入object類型的數(shù)據(jù) |
| @Html.ActionLink("鏈接文字","ActionName",null,new{@class="btnLink"}) | 當(dāng)需要傳入超鏈接額外的HTML屬性時(shí)，可以將參數(shù)加載第四個(gè)參數(shù)上。 請(qǐng)注意：由于HTML標(biāo)簽里在套用CSS樣式類型時(shí)會(huì)用到class屬性名稱，而在C#里class屬于關(guān)鍵字，所以必須使用@class的方式，才能確保C#正確編譯。 此外，如果要輸出HTML屬性包括減號(hào)（-）時(shí)，例如data-value屬性，應(yīng)使用“_”下劃線代替。 |
| ?@Html.ActionLink("鏈接文字","ActionName","ControllerName", null,new{@class="btnLink"}) | ?5個(gè)參數(shù) |
? ? ? 使用Html.AcionLink()時(shí)，第一個(gè)參數(shù)為超鏈接的顯示文字，此參數(shù)不可以輸入空字符串、空白字符串或null值，否則會(huì)跑出The Value cannot be null or empty的異常。
???? ?如果想設(shè)計(jì)一個(gè)包含超鏈接的圖片按鈕，可選擇用<a>超鏈接標(biāo)簽來輸出，并通過CSS加上一個(gè)背景圖，如下。
<a href="@Url.Action("ActionName")" class="lnkButton"></a>ASP.NET MVC還有另一個(gè)Html.RouteLink輔助方法，其用法與Html.ActionLink非常相似，差別僅在于輸入的參數(shù)要以RouteValue為主。
?
2.使用HTML輔助方法輸出表單
（1）產(chǎn)生表單元素
?? ? ? 在使用表單之前，大家應(yīng)該已經(jīng)看過好幾遍關(guān)于Html.BeginForm()的使用，該輔助方法主要用來產(chǎn)生<form>標(biāo)簽，可以通過using語(yǔ)法來使用，也可以配合Html.EndForm()使用以產(chǎn)生適當(dāng)?shù)?lt;/form>表單結(jié)尾。以下是幾個(gè)Html.BeginForm()的代碼范例。
a.使用using語(yǔ)法產(chǎn)生表單標(biāo)簽
@using(Html.BeginForm("About","Home")) //參數(shù)1：actionName 參數(shù)2：controllerName {@Html.TextArea("Date")@Html.TextArea("MEMO")<input type="submit"/> }b.使用Html.BeginForm輔助方法輸出的表單預(yù)設(shè)輸出的method屬性會(huì)是POST，如果想指定為GET的話，可以輸入第三個(gè)參數(shù)，如下。
@using(Html.BeginForm("Search","Home",FormMethod.Get)) {@Html.TextArea("Keyword")<input type="submit" /> }c.如果想要用HTML表單實(shí)現(xiàn)文件上傳的功能，那么必須在輸出的<form>表單標(biāo)簽加上一個(gè)enctype屬性，且內(nèi)容必須設(shè)定為multipart/form-data，如下。
@using(Html.BeginForm("Upload","File",FormMethod.Post,new{enctype="multipart/form-data"})) {@Html.TextBox("File1","",new{type="file",size="25"})<input type="submit"/> }?Html輔助方法并沒有File方法，因此必須用TextBox方法來代替，并傳入第三個(gè)參數(shù)將內(nèi)建的type屬性換成file即可。
（2）常用表單輸入元素
Html.BeginForm()，輸出<form>標(biāo)簽
Html.EndForm()，輸出</form>標(biāo)簽
Html.Label()，輸出<label>標(biāo)簽
Html.TextBox()，輸出<input type="text">標(biāo)簽
Html.TextArea()，輸出<textarea>標(biāo)簽
Html.Password()，輸出<input type="password">標(biāo)簽
Html.CheckBox()，輸出<input type="checkbox">標(biāo)簽
Html.RadionButton()，輸出<input type="radio">標(biāo)簽
Html.DropDownList()，輸出<select>標(biāo)簽。
Html.ListBox()，輸出<select multiple>標(biāo)簽
Html.Hidden()，輸出<input type="hidden">標(biāo)簽
Html.ValidationSummary()，輸出表單驗(yàn)證失敗時(shí)的錯(cuò)誤信息摘要
a.標(biāo)簽的使用
@Html.Label("Username","賬戶") @Html.TextBox("Username")b.文本框的使用
Html.TextBox的重載如下：
@Html.TextBox("Username") //id,name的值為Username@Html.TextBox("Username", "will") //id,name的值為Username; value的值為will@Html.TextBox("Username", "will", new { size=32 })//id,name的值為Username; html屬性值size=3如果要傳遞多個(gè)html屬性值，并且在多處使用，可以按照下面的例子來做。
public ActionResult HelperSample1(){IDictionary<string, object> attr = new Dictionary<string, object>();attr.Add("size", "32");attr.Add("style", "color:red;");ViewData["Dictionary"] = attr;return View();} @{var htmlAttribute = ViewData["Dictionary"] as IDictionary<string, object>; } @Html.TextBox("name","Value",htmlAttribute)<br /> @Html.Password("password","Value",htmlAttribute)<br /> @Html.TextBox("email","Value",htmlAttribute)<br /> @Html.TextBox("tel","Value",htmlAttribute)<br /> @Html.Hidden("id","1")c.Html.DropDownList()的使用
1)不讀取數(shù)據(jù)庫(kù)的下拉列表
public ActionResult HelperSample2(){List<SelectListItem> listItem = new List<SelectListItem>();listItem.Add(new SelectListItem { Text = "是", Value = "1" });listItem.Add(new SelectListItem { Text = "否", Value = "0" });ViewData["List"] = new SelectList(listItem, "Value", "Text", "");return View();} @Html.DropDownList("List", ViewData["List"] as SelectList, "請(qǐng)選擇") //參數(shù)依次為下拉列表的名字，指定的列表項(xiàng)，默認(rèn)選擇項(xiàng)的值2)數(shù)據(jù)來自數(shù)據(jù)庫(kù)的下拉列表
public ActionResult Index(){var list = new SelectList(db.Students, "Id", "Age", "3"); //參數(shù)依次為數(shù)據(jù)集合，數(shù)據(jù)值，數(shù)據(jù)文本，選中項(xiàng)的值ViewBag.List = list;return View();} @Html.DropDownList("List")3)數(shù)據(jù)來自枚舉類型
ViewBag.Role = new SelectList(Enum.GetValues(typeof(SystemRole)), ""); @Html.DropDownList("Role")（3）使用強(qiáng)類型輔助方法
? ? ? ??ASP.NET MVC從2.0版開始更進(jìn)一步地提供了強(qiáng)類型的輔助方法，避免因?yàn)檩斎脲e(cuò)誤而導(dǎo)致數(shù)據(jù)沒有顯示或是編輯時(shí)無法存儲(chǔ)的問題，除此之外，如果能活用這些強(qiáng)類型輔助方法還能提升整體開發(fā)效率。
? ? ? ? 基本上，屬于強(qiáng)類型的輔助方法命名方式皆為“原先的名稱最后加上For”，例如，Html.TextBoxFor()或Html.LabelFor()。使用強(qiáng)類型輔助方法，在View頁(yè)面的最上方一定要用@model定義出這個(gè)View頁(yè)面的參考數(shù)據(jù)模型，如果沒有生命就無法正常使用強(qiáng)類型輔助方法。
Html.LabelFor()，輸出<label>標(biāo)簽，顯示字段的名字。
Html.TextBoxFor()
Html.TextAreaFor()
Html.PasswordFor()
Html.CheckBoxFor()
Html.RadioButtonFor()
Html.DropDownListFor()，輸出<select>標(biāo)簽。
Html.ListBoxFor()，輸出<select multiple>標(biāo)簽。
Html.HiddenFor()?，生成HTML窗體的隱藏域。
Html.DisplayNameFor()，顯示數(shù)據(jù)模型在Metadata定義的顯示名稱。
Html.DisplayTextFor()，顯示數(shù)據(jù)模型的文字資料。
Html.ValidationMessageFor()，顯示數(shù)據(jù)模型當(dāng)輸入驗(yàn)證失敗時(shí)顯示的錯(cuò)誤信息。
Html.EditorFor()，用來輸出表單域可編輯文本框。
?做一個(gè)例子，首頁(yè)顯示商品明細(xì)，點(diǎn)擊添加商品鏈接，打開添加商品頁(yè)面，輸入信息可添加商品。商品的模型類和添加商品頁(yè)面代碼如下：
public class Product{public int Id { get; set; }[Required][DisplayName("產(chǎn)品名稱")]public string Name { get; set; }[MaxLength(200)][DisplayName("產(chǎn)品說明")]public string Description { get; set; }[Required]public int UnitPrice { get; set; }} @model MvcApplication1.Models.Product@using(Html.BeginForm()) {@Html.ValidationSummary(true)<fieldset><legend>產(chǎn)品資訊</legend><div class="editor-lable">@Html.LabelFor(model=>model.Name)</div><div class="editor-field">@Html.TextBoxFor(model=>model.Name)@Html.ValidationMessageFor(model=>model.Name)</div><div class="editor-label">@Html.LabelFor(model=>model.Description)</div><div class="editor-label">@Html.TextAreaFor(model=>model.Description)@Html.ValidationMessageFor(model=>model.Description)</div><p><input type="submit" /></p></fieldset> }3.使用HTML輔助方法載入分部視圖
? ?????以往在ASP.NET Web form的開發(fā)經(jīng)驗(yàn)中，對(duì)于User Control使用非常頻繁，不但可以減少重復(fù)的代碼，也利于將頁(yè)面模塊化，這個(gè)好用的概念也可以用在ASP.NET MVC中，只不過換了一個(gè)名字，稱為“分部視圖（Partial View）”。
（1）什么是分部視圖
? ? ? ??從Partial View的字面上翻譯，很容易了解它就是一個(gè)片段的View，因此，可以利用Partial View把部分的HTML或顯示邏輯包裝起來，方便重復(fù)引用。當(dāng)你將建立出來的分部視圖放置于View\Shared目錄時(shí)，任何Controller下的Action或View都可以載入。公用的Parital View放在Views\Shared目錄。
? ? ? ?分部視圖的應(yīng)用范圍相當(dāng)廣，因?yàn)槭瞧蔚腍TML顯示邏輯，因此，整體重復(fù)性高或某段HTML會(huì)共同出現(xiàn)在多個(gè)視圖頁(yè)面中的網(wǎng)頁(yè)片段，利用分部視圖來開發(fā)會(huì)是不錯(cuò)的選擇，并且基于這個(gè)優(yōu)點(diǎn)，Ajax技術(shù)所需要的片段View也就更適合使用分部視圖。
（2）如何建立一個(gè)分部視圖
? ? ? ?建立分部視圖與建立視圖的步驟一樣，在項(xiàng)目的/Views/Shared目錄上，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“添加”->“視圖”命令。接著，選中“創(chuàng)建為分部視圖”復(fù)選框即可。
????? 使用分部視圖不一定需要建立相關(guān)的Action，因?yàn)樗鼉H僅是片段的HTML，且調(diào)用時(shí)，也不會(huì)調(diào)用Action來執(zhí)行。
（3）使用Html.Partial載入分部視圖
? ASP.NET MVC的HTML輔助方法擁有一個(gè)專門的擴(kuò)充方法來載入分部視圖，稱為Partial，可以讓你在View中直接將分部視圖的執(zhí)行結(jié)果取回。
| 使用方式 | 使用范例 |
| Partial(HtmlHelper, String)? | Html.Partial("ajaxPage") |
| Partial(HtmlHelper, String, Object)?? | Html.Partial("ajaxPage", Model) |
| Partial(HtmlHelper, String, ViewDataDictionary)?? | ?Html.Partial("ajaxPage", ViewData["Model"]) |
| Partial(HtmlHelper, String, Object, ViewDataDictionary) | Html.Partial("ajaxPage", Model, ViewData["Model"]) |
?
??因分部視圖是片段的，必須要選擇一個(gè)完整的頁(yè)面來將它載入。
例子1，分部視圖OnlineUserCounter代碼如下。
?
<span style="color:red">線上人數(shù)：88888</span>?
?在Home/Index視圖中載入分部視圖。
@Html.Partial("OnlineUserCounter")?
? ? ? ?利用上述方式就能將分部視圖載入，因?yàn)槭侵苯拥妮d入，因此，調(diào)用的頁(yè)面若有傳遞數(shù)據(jù)也可以直接調(diào)用出來。
????? 在一個(gè)視圖頁(yè)面里，如果載入了多個(gè)分部視圖，每個(gè)分部視圖里也可以存取到原本頁(yè)面的ViewData、TempData及Model等數(shù)據(jù)，也就代表著這些從Controller傳入的數(shù)據(jù)模型可以共用于各個(gè)分部視圖之間。
????? 不過，載入分部視圖時(shí)，也可以通過Html.Partial輔助方法傳入另一個(gè)Model數(shù)據(jù)，如此一來，就能讓分部視圖里與載入該視圖頁(yè)面時(shí)使用不同的模型數(shù)據(jù)，也可以把視圖頁(yè)面中的一部分?jǐn)?shù)據(jù)當(dāng)成分部視圖頁(yè)面中的數(shù)據(jù)。
????? 我們以AccountController的Login頁(yè)面為例，這一頁(yè)在登錄失敗時(shí)會(huì)傳入上一頁(yè)輸入的數(shù)據(jù)，當(dāng)從視圖頁(yè)面中載入另一個(gè)分部視圖時(shí)，可以傳入一個(gè)object類型的參數(shù)作為分部視圖的模型數(shù)據(jù)，如下視圖頁(yè)面。
@model LoginModel @{ViewBag.Title="登錄"; }@Html.Partila("LoginFail", (object)Model.UserName)接著在/Views/Account目錄下新增一個(gè)名為L(zhǎng)oginFail的分部視圖，其內(nèi)容如下：
@model System.String 從視圖頁(yè)面?zhèn)魅氲哪Ｐ蛿?shù)據(jù)為：@Model由上述范例可以知道，在一般視圖頁(yè)面中的Model與LoginFail這個(gè)分部視圖里的Model已經(jīng)是不同的東西了。
（4）使用Html.Action輔助方法，從控制器載入分部視圖
? ? ? ?分部視圖頁(yè)面除了可以直接從視圖頁(yè)面載入外，也可以像一般視圖頁(yè)面一樣從Controller中使用。如下OnlineUserCount這個(gè)動(dòng)作方法就是利用Controller類型中的PartialView輔助方法來載入分部視圖，而這種載入方式與用View輔助方法唯一的差別，僅在于它不會(huì)套用母版頁(yè)面，其他則都完全相同。
public ActionResult OnlineUserCount() {return PartialView(); }?然后可以在視圖頁(yè)面利用Html.Action來載入這個(gè)Action的執(zhí)行結(jié)果：
@Html.Action("OnlineUserCounter")? ? ? ?通過Html.Action與Html.Partial載入分部視圖結(jié)果是一樣的，但載入的過程卻差別很大。若使用Html.Partial載入分部視圖是通過HtmlHelper直接讀取*.cshtml文件，直接執(zhí)行該視圖并取得結(jié)果。若使用Html.Action的話，則會(huì)通過HtmlHelper對(duì)IIS再進(jìn)行一次處理要求（通過Server.Execute方法），因此，使用Html.Action會(huì)重新執(zhí)行一遍Controller的生命周期。
?
原文鏈接：https://www.cnblogs.com/yytesting/p/4987633.html
?
如果這篇文章對(duì)你有幫助的話,評(píng)論或推薦下吧！(轉(zhuǎn)載請(qǐng)注明原作者！)總結(jié)
以上是生活随笔為你收集整理的MVC 之HTML辅助方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 区块链,使用 Go-Ethereum 搭
- 下一篇： 配置_DruidDataSource参考