【翻譯】瞭解ASP.NET MVC的HTML助手
作者：Shailendra Chauhan works as Software Analyst at reputed MNC and has more than 5 years of hand over Microsoft .NET technologies. He is a .NET Consultant and is the founder & chief editor of www.dotnet-tricks.com and www.dotnetinterviewtricks.com blogs. He is author of book ASP.NET MVC Interview Questions and Answers.
He loves to work with web applications and mobile apps using Microsoft technology including ASP.NET, MVC, C#, SQL Server, WCF, Web API, Entity Framework,Cloud Computing, Windows Azure, jQuery, jQuery Mobile, Knockout.js, Angular.js and many more web technologies. More...
HTML助手就是用來返回HTML字串的方法。這些字串可以用來表現你所期望的任何內容。例如，可以使用HTML助手來渲染標準的HTML標記，如HTML的<input>、<button>和<img>等標記。
還可以通過建立自定義的HTML助手來渲染更多更復雜的內容，如選單條或用來顯示資料庫資料的HTML表格。
不同型別的HTML助手
以下列出了三種類下的HTML助手：
內聯式的HTML助手
這些需要在同一檢視內使用Razor的@hepler標記來建立。這些助手可以在同一檢視內被重用。
@helper ListingItems(string[] items) { <ol> @foreach (string item in items) { <li>@item</li> } </ol> } <h3>Programming Languages:</h3> @ListingItems(new string[] { "C", "C++", "C#" }) <h3>Book List:</h3> @ListingItems(new string[] { "How to C", "how to C++", "how to C#" })
內建的HTML助手
內建的HTML助手是HtmlHelper類的擴充套件方法。內建的HTML助手可以劃分為3種類型：
標準的HTML助手
這些助手可以用來渲染最常用的HTML元素型別，如HTML文字輸入框、複選框等。以下是最常用的標準Html助手列表：
HTML元素 | 示例 |
TextBox | @Html.TextBox("Textbox1", "val") |
TextArea | @Html.TextArea("Textarea1", "val", 5, 15, null) |
Password | @Html.Password("Password1", "val") |
Hidden Field | @Html.Hidden("Hidden1", "val") |
CheckBox | @Html.CheckBox("Checkbox1", false) |
RadioButton | @Html.RadioButton("Radiobutton1", "val", true) |
Drop-down list | @Html.DropDownList (“DropDownList1”, new SelectList(new [] {"Male", "Female"})) |
Multiple-select | Html.ListBox(“ListBox1”, new MultiSelectList(new [] {"Cricket", "Chess"})) |
強型別的HTML助手
這些助手主要用來在強型別檢視內渲染最常用的HTML元素型別，如HTML文字輸入框、複選框等等。HTML元素會根據模型屬性來建立。強型別HTML助手需要與lambda表示式一起使用。模型物件會被作為lambda表示式的值來傳遞，而你可以從模型中選擇一個欄位或屬性來設定HTML助手id、名稱和值屬性。以下是最常用的強型別HTML助手的列表：
HTML元素 | 示例 |
TextBox | @Html.TextBoxFor(m=>m.Name) |
TextArea | @Html.TextArea(m=>m.Address , 5, 15, new{})) |
Password | @Html.PasswordFor(m=>m.Password) |
Hidden Field | @Html.HiddenFor(m=>m.UserId) |
CheckBox | @Html.CheckBoxFor(m=>m.IsApproved) |
RadioButton | @Html.RadioButtonFor(m=>m.IsApproved, "val") |
Drop-down list | @Html.DropDownListFor(m => m.Gender, new SelectList(new [] {"Male", "Female"})) |
Multiple-select | Html.ListBoxFor(m => m.Hobbies, new MultiSelectList(new [] {"Cricket", "Chess"})) |
模板化的HTML助手
這些助手需要弄清楚那些HTML元素是被要求基於模型類的屬性進行渲染的。儘管這需要一些細緻和耐心的設定，但這是一種將資料顯示給使用者的非常靈活的做法。為了使用模板化的HTML助手來設定適合的HTML元素，需要使用DataAnnitation類的DataType特性。
例如，當使用DataType作為密碼，模板化的助手會自動渲染密碼型別的HTML的input元素。
模板化助手 | 示例 |
Display | 渲染一個指定模型屬性的只讀檢視，並基於屬性的資料型別和元資料選擇適當的HTML元素。 Html.Display("Name") |
DisplayFor | 前一個的助手的強型別版本。 |
Editor | 為指定的模型屬性渲染一個編輯器，並給予屬性的資料型別和元資料選擇適當的HTML元素。 |
EditorFor | 前一個的助手的強型別版本。 |
自定義的HTML助手
還可以通過建立HtmlHelper類的擴充套件方法或在功能類內建立靜態方法的方式來建立自定義的輔助方法。
public static class CustomHelpers
{
//Submit Button Helper
public static MvcHtmlString SubmitButton(this HtmlHelper helper, string
buttonText)
{
string str = "<input type=\"submit\" value=\"" + buttonText + "\" />";
return new MvcHtmlString(str);
}
//Readonly Strongly-Typed TextBox Helper
public static MvcHtmlString TextBoxFor<TModel, TValue>(this
HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>>
expression, bool isReadonly)
{
MvcHtmlString html = default(MvcHtmlString);
if (isReadonly)
{
html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
expression, new { @class = "readOnly",
@readonly = "read-only" });
}
else
{
html = System.Web.Mvc.Html.InputExtensions.TextBoxFor(htmlHelper,
expression);
}
return html;
}
}