來源：http://www.cnblogs.com/JimmyZhang/archive/2009/02/08/1371819.html 張子陽
原文連結：http://www.asp.net/learn/mvc/tutorial-04-cs.aspx
1.建立自訂HTML Helper
本篇教程的目的是為你示範如何建立自訂HTML Helper，你可以在MVC視圖中使用它們。通過利用HTML Helpers，你可以減少大量HTML標籤的輸入，你必須輸入這些標籤來建立標準的HTML頁面。
在這篇教程的第一部分，我描述了一些包含在ASP.NET MVC中的現有的HTML Helper。接下來，我描述了兩個建立自訂HTML Helpers的方法：我揭示了如何通過建立靜態方法和建立擴充方法來建立自訂HTML Helpers。
2.理解HTML HelpersHTML Helper只不過是一個返回字串的方法。這個字串可以代表你想要的任何類型。舉個例子，你可以使用HTML Helper來呈現標準的HTML標籤，類似HTML <input>和<img>標籤。你也可以使用HTML Helpers來呈現更加複雜的內容，例如一個標籤頁或者一個資料庫資料的HTML表格。
ASP.NET MVC架構套件含了下面的標準HTML Helpers集合（這裡沒有列全）：
舉個例子，考慮代碼清單1中的表單。這個表單是在兩個標準的HTML Helpers的協助下完成的。這個表單使用了Html.BeginForm()和Html.TextBox()Helper方法來呈現一個簡單的HTML表單。
圖1：使用HTML Helpers呈現的頁面
代碼清單1 - ViewsHomeIndex.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml ">
<head id="Head1" runat="server">
<title>Index</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<label for="firstName">First Name:</label>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<label for="lastName">Last Name:</label>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
</div>
</body>
</html>
Html.BeginForm()Helper方法用於建立HTML<form>的開閉標籤。注意到Html.BeginForm()方法在一個using語句內被調用。using語句確保了<form>標記在using塊末尾關閉。
如果你喜歡，可以不建立using塊，你可以調用Html.EndForm()Helper方法來關閉<form>標籤。使用對你來說感覺最好的方式來建立<form>的開閉標籤。
Html.TextBox()Helper方法用於在代碼清單1中呈現HTML<input>標籤。如果你在你的瀏覽器中選擇“查看源檔案”，那麼你會看到代碼清單2中的HTML原始碼。注意到原始碼中包含了標準的HTML標籤。
NOTE：注意Html.TextBox()，HTML Helper使用<%= %>標籤來呈現，而不是<% %>標籤。如果你不包含這個等號，那麼不會有任何東西呈現至瀏覽器。
ASP.NET MVC架構套件含很少一些Helpers方法。更可能的是，你需要使用自訂HTML Helpers來擴充MVC架構。在這篇教程的剩餘部分，你會學習兩個建立自訂HTML Helpers的方法。
代碼清單2 - Index.aspx原始碼
<%@ Page Language="C#" AutoEventWireup="false" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Index" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
</head>
<body>
<div>
<form action="http://localhost:33102/" method="post">
<label for="firstName">First Name:</label>
<br />
<input id="firstName" name="firstName" type="text" value="" />
<br /><br />
<label for="lastName">Last Name:</label>
<br />
<input id="lastName" name="lastName" type="text" value="" />
<br /><br />
<input id="btnRegister" name="btnRegister" type="submit" value="Register" />
</form>
</div>
</body>
</html>
3.使用靜態方法建立HTML Helpers建立一個新HTML Helper的最簡單方法就是建立一個返回字串的靜態方法。舉個例子，假設你決定建立一個HTML Helper，它呈現一個HTML <label>標籤。你可以使用代碼清單3中的類來呈現一個<label>。
代碼清單3 - HelpersLabelHelper.cs
using System;
namespace MvcApplication1.Helpers
{
public class LabelHelper{
public static string Label(string target, string text){
return String.Format("<label for='{0}'>{1}</label>", target, text);
}
}
}
對於代碼清單2中的類沒有什麼好說的。Label()方法簡單地返回了一個字串。
代碼清單4中修改過了的Index視圖使用了LabelHelper來呈現HTML <label>標籤。注意到視圖包含一個<%@ imports %>指令，它匯入了Application1.Helpers命名空間。
代碼清單4 - ViewsHomeIndex2.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2"%> <%@ Import Namespace="MvcApplication1.Helpers" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index2</title>
</head>
<body>
<div>
<% using (Html.BeginForm())
{ %>
<%= LabelHelper.Label("firstName", "First Name:") %>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<%= LabelHelper.Label("lastName", "Last Name:") %>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
</div>
</body>
</html>
4.使用擴充方法建立HTML Helpers如果你想建立一個HTML Helpers，就好像它包含在ASP.NET MVC架構中一樣，那麼你需要建立擴充方法。擴充方法使你能夠為已有的類添加新的方法。當建立HTML Helper方法的時候，你為HtmlHelper類添加新的方法，該類由視圖的Html屬性所表示。
代碼清單5中的類為HtmlHelper類添加了一個叫做Label()的擴充方法。對於這個類有幾個需要注意的地方。首先，注意到這個類是一個靜態類。你必須將擴充方法定義在靜態類中。
其次，注意到Label()方法的第一個參數前面有一個關鍵字this。擴充方法的第一個參數說明了這個擴充方法所擴充的類。
代碼清單5 - HelpersLabelExtensions.cs
using System;
using System.Web.Mvc;
namespace MvcApplication1.Helpers
{
public static class LabelExtensions {
public static string Label(this HtmlHelper helper, string target, string text) {
return String.Format("<label for='{0}'>{1}</label>", target, text);
}
}
}
在建立了擴充方法，並且成功產生了應用程式之後，擴充方法會出現在Visual Stuidio的智能感知中，就好像這個類的所有其他方法一樣（2）。唯一的區別是擴充方法出現時在它們旁邊有一個特殊的標記（一個向下的箭頭表徵圖）。
圖2：使用Html.Label()擴充方法
代碼清單6中修改後的Index視圖使用了Html.Label()擴充方法來呈現它所有的<label>標籤。
代碼清單6 - ViewsHomeIndex3.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index3.aspx.cs" Inherits="MvcApplication1.Views.Home.Index3" %> <%@ Import Namespace="MvcApplication1.Helpers" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Index3</title>
</head> <body>
<div>
<% using (Html.BeginForm())
{ %>
<%= Html.Label("firstName", "First Name:") %>
<br />
<%= Html.TextBox("firstName")%>
<br /><br />
<%= Html.Label("lastName", "Last Name:") %>
<br />
<%= Html.TextBox("lastName")%>
<br /><br />
<input type="submit" value="Register" />
<% } %>
</div>
</body>
</html>
5.總結在這篇教程中，你學習了兩種建立自訂HTML Helpers的方法。首先，你學習了如何通過建立返回字串的靜態方法來建立自訂Label() HTML Helper。接下來，你學習了如何通過在HtmlHelper類上建立擴充方法來建立自訂Label()Html Helper方法。
在這篇叫程中，我將精力集中在建立極其簡單的HTML Helper方法。應該意識到你想要多麼複雜，HTML Helper就可以多麼複雜。你可以建立HTML Helpers來呈現豐富的內容，例如樹形結構、菜單或者資料庫資料表格。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
