在MVC的架構下並不能使用Web伺服器控制項,因此要在View之中展現使用者介面接收輸入就要改用別的方式。View是一個標準的HTML文件,其中可以包含HTML標籤或程式碼(VB或C#程式碼,利用<% %>符號包起來),你可以直接在View之中放入HTML元素,如加入<Input type=”text”>標籤便可以產生一個TextBox。本文將介紹一些常用的HTML Helpers以及如何自訂HTML Helpers。
為了能夠更容易建立使用者介面,ASP.NET MVC中提供了HTML Helper,你可在View之中使用HTML Helper來產生HTML標籤,HTML Helper其實是方法,會回傳由MvcHtmlString型別編碼的字串,因此你不需要再利用程式碼手動進行編碼,你可以透過它產生Textbox、Form、CheckBox等等HTML標籤,也能透過它來產生更複雜的Table標籤。因此,它的角色就好像是ASP.NET Web Form之中所稱的控制項(Control)。不過,因為沒有事件模型與檢視狀態資訊,它較控制項短小精幹,較不耗費資源。預設ASP.NET MVC Framework提供很多標準的Helper,以便產生常用的HTML項目。
HTML Helper是System.Web.Mvc.Html命名空間下,HtmlHelper類別的擴充方法。利用這個類別可以建立HTML Form、產生HTML控制項的標籤,或者是做資料輸入驗證的動作。
用來建立HTML Form的擴充方法如下:
- Html.BeginForm
- Html.BeginRouteForm
- Html.EndForm
用來建立HTML Input標籤的擴充方法如下:
- Html.CheckBox
- Html.Hidden
- Html.Password
- Html.RadioButton
- Html.TextBox
用來建立TextArea的擴充方法如下:
用來建立HTML 超連結的擴充方法如下:
- Html.ActionLink
- Html.RouteLink
用來建立HTML Label標籤的擴充方法如下:
用來建立Select標籤的擴充方法如下:
- Html.DropDownList
- Html.ListBox
用來顯示驗證錯誤時要給使用者檢視的訊息,可用的擴充方法如下,你以可以建立新的樣式套用到這些HTML Helpers,以便客製化錯誤的顯示方式:
- Html.ValidationMessage
- Html.ValidationSummary
使用HTML Helper
所有的HTML Helper都是利用View的HTML屬性來呼叫,例如以下程式碼利用Html Helper產生一個TextBox控制項:
<%:Html.TextBox("Name") %>
這個語法會產生出以下的HTML標籤:
<input id = "Name" name = "Name" type = "text" value = "" />
又如以下的Html Helper程式碼:
你喜歡的季節:<br />
<%: Html.RadioButton("favSeason", "春天", true) %> 春天 <br />
<%: Html.RadioButton("favSeason", "夏天", false)%> 夏天<br/>
<%: Html.RadioButton("favSeason", "秋天", false)%> 秋天<br/>
<%: Html.RadioButton("favSeason", "冬天", false)%> 夏天<br/>
將會產生如圖1的圓形按鈕,以便於在網頁上提供單選的功能。

圖 1:圓形按鈕
超連結
若要產生超連結可以使用Html.ActionLink擴充方法,它會連結到Controller的Action。例如以下程式碼利用Html Helper產生一個超連結:
<%:Html.ActionLink("關於這網站","About") %>
傳入兩個參數一為超連結上顯示的文字;二為Controller Action的名稱。此語法會產生以下HTML:
<a href = "/Home/About"> 關於這網站 </a>
圖片超連結
如果要使用圖片的方式來產生超連結,那麼要使用Url.Action擴充方法,例如以下程式片段使用img標籤顯示一張圖片,當點選圖片時,會連接到Controller的About Action。
<a href="<%= Url.Action("About") %>"><img alt="about" src="../../Content/usa.jpg" /></a>
產生Form表單
若要產生一個讓使用者輸入資料的表單,可以利用Html.BeginForm、Html.EndForm擴充方法,
以下程式碼利用Html Helper產生一個表單,讓使用者輸入註冊資訊:
1: <% using ( Html.BeginForm() )
2:
3: { %>
4:
5: <fieldset>
6:
7: <legend> 註冊 </legend>
8:
9: <p>
10:
11: <label for = "Name"> 名稱: </label>
12:
13: <%: Html.TextBox("Name") %>
14:
15: </p>
16:
17: <p>
18:
19: <label for = "BirthDate"> 生日: </label>
20:
21: <%: Html.TextBox("BirthDate") %>
22:
23: </p>
24:
25: <p>
26:
27: <label for="EmailAddress"> 電子郵件: </label>
28:
29: <%:Html.TextBox("EmailAddress") %>
30:
31: </p>
32:
33: <p>
34:
35: <label for = "Password"> 密碼: </label>
36:
37: <%: Html.Password("Password") %>
38:
39: </p>
40:
41: <p>
42:
43: <label for = "IsMarried"> 已婚否? </label>
44:
45: <%: Html.CheckBox("IsMarried") %>
46:
47: </p>
48:
49: <p>
50:
51: <label for = "Note"> 備註: </label>
52:
53: <%: Html.TextArea("Note", new {cols=5,rows=5 }) %>
54:
55: </p>
56:
57: <p>
58:
59: <input type = "submit" value = "送出" />
60:
61: </p>
62:
63: </fieldset>
64:
65: <%} %>
產生出來的表單如圖2所示。

圖 2:使用HTML Helpers產生表單
要產生HTML Form,可以先叫用Html.BeginForm()擴充方法,通常我們會將產生FORM標籤的程式碼包在using區塊,如此會自動產生開頭和結尾的標籤。
<% using ( Html.BeginForm() )
<% } %>
或者是分別叫用Html.BeginForm()和Html.EndForm()方法來產生開頭和結尾標籤:
<% Html.BeginForm(); %>
<% Html.EndForm(); %>
使用這個語法會產生出Form標籤,利用POST動詞提交請求,產生出的HTML標籤如下所示:
<form action = "/Home/Register" method = "post">
</form>
下拉式清單方塊
若要產生下拉式清單方塊可以使用Html.DropDownList擴充方法,例如在Controller中使用以下程式碼建立一個Dictionary泛型集合,利用Add方法將數值/字串組成的配對資料加到集合之中,然後建立一個SelectList物件,SelectList物件的建構函式分別傳入集合、Data Value Field與Data Text Field:
1: public ActionResult Register()
2:
3: {
4:
5: Dictionary<int,string> lvl = new Dictionary<int,string>();
6:
7: lvl.Add(0,"金卡");
8:
9: lvl.Add(1,"銀卡");
10:
11: lvl.Add(2,"銅卡");
12:
13: ViewData["Level"] = new SelectList(lvl, "Key", "Value");
14:
15: return View();
16:
17: }
接著在View中利用Html Helper產生一個下拉式清單方塊:
<p>
<label for = "Level"> 等級: </label>
<%: Html.DropDownList("Level","請選擇..") %>
</p>
執行後產生出的HTML標籤如下所示:
<select id = "Level" name = "Level"> <option value = "" > 請選擇.. </option>
<option value = "0"> 金卡 </option>
<option value = "1"> 銀卡 </option>
<option value = "2"> 銅卡 </option>
</select>

圖 3:使用Html Helper產生下拉式清單方塊
客製化HTML Helper
如果覺得ASP.NET MVC提供的HTML Helper不敷您的使用,您可以利用程式語言擴充方法(Extension Method)的特性來擴充HtmlHelper類別的能力。擴充方法需要在靜態類別之中定義。我們以一個範例來說明,例如在MVC專案中Helpers子目錄內加入以下程式碼利用Html Helper定義一個MyTextboxHelper靜態類別。
1: using System.Web.Mvc;
2:
3: namespace MvcHtmlHelper.Helpers
4: {
5: public static class MyTextboxHelper
6: {
7: public static string MyTextbox( this HtmlHelper helper, string labelText, string txtValue )
8: {
9: return String.Format( "<label for=\"{0}\">{0}</label><input type=\"text\" value=\"{1}\" />", labelText, txtValue);
10: }
11: }
12: }
MyTextboxHelper靜態類別中提供一個MyTextbox擴充方法,回傳一個label和text類型的input HTML元素。MyTextbox擴充方法定義時,第一個參數前方要加上this,代表欲擴充的型別,此例中欲擴充的就是HtmlHelper類別。在View中要使用時,需要先匯入命名空間:
<%@ Import Namespace="MvcHtmlHelper.Helpers" %>
然後在View中就可以直接地使用:
<%=Html.MyTextbox("帳號", "Mary")%>
產生出的HTML為:
<label for = "帳號"> 帳號 </label> <input type = "text" value = "Mary" />
使用TagBuilder類別
ASP.NET MVC架構中,於System.Web.Mvc命名空間下提供一個TagBuilder類別,在你客製化自訂HTML Helpers時,利用TagBuilder類別讓建立HTML標籤的動作變得更為簡單。常用的方法如下:
- AddCssClass方法:用來新增class attribute到HTML標籤。
- GenerateId方法:新增id attribute到HTML標籤。
- SetInnerText方法:設定HTML標籤內部文字,其中的文字會自動編碼。
- ToString方法:用來產生HTML標籤。
- MergeAttribute方法:用來新增Attribute到HTML標籤。
TagBuilder類別常用的屬性如下:
- Attributes:HTML元素所有的Attribute。
- InnerHtml:代表HTML元素的內容,但其中的文字並不會自動作編碼處理。
- TagName:HTML元素的名稱。
我們可以將上例MyTextBox擴充方法改為如下,可以得到一樣的效果:
1: namespace MvcHtmlHelper.Helpers
2: {
3: public static class MyTextboxHelper
4: {
5: public static string MyTextbox( this HtmlHelper helper, string labelText, string txtValue )
6: {
7: TagBuilder lbl = new TagBuilder("label");
8: lbl.MergeAttribute("for", labelText);
9: lbl.SetInnerText( labelText );
10: TagBuilder txt = new TagBuilder("input");
11: txt.MergeAttribute("type", "text");
12: txt.MergeAttribute("value", txtValue);
13: return lbl.ToString()+txt.ToString();
14: }
15: }
16: }
先利用TagBuilder建立一個Label標籤,利用MergeAttribute方法,加入for attribute,然後叫用SetInnerText方法設定標謙籤中的文字為「帳號」。接著利用類似的語法產生Input類型的文字方塊,然後叫用ToString()方法產生標籤後回傳。
HtmlTextWriter類別
除了使用TagBuilder類別之外,您還可以使用HtmlTextWriter類別來建立HTML元素。常用的方法:
- RenderBeginTag方法:產生開始標籤。
- AddAttribute方法:新增HTML Attribute。
- Write方法:輸出文字。
- RenderEndTag方法:產生結尾標籤。
同樣地將先前範例MyTextBox擴充方法改為如下,可以得到一樣的效果:
1: namespace MvcHtmlHelper.Helpers
2: {
3: public static class MyTextboxHelper
4: {
5: public static string MyTextbox( this HtmlHelper helper, string labelText, string txtValue )
6: {
7: var w = new HtmlTextWriter( new StringWriter() );
8: w.AddAttribute("for", labelText);
9: w.RenderBeginTag( HtmlTextWriterTag.Label );
10: w.Write(helper.Encode( labelText ));
11: w.RenderEndTag();
12:
13: var w2 = new HtmlTextWriter( new StringWriter() );
14: w2.AddAttribute("type", "text");
15: w2.AddAttribute("value", txtValue);
16: w2.RenderBeginTag( HtmlTextWriterTag.Input );
17: w2.RenderEndTag();
18: return w.InnerWriter.ToString() + w2.InnerWriter.ToString();
19: }
20: }
21: }
擴充方法中建立HtmlTextWriter類別,在建構函式傳入StringWriter初始化。叫用AddAttribute方法加for attribute;接著以RenderBeginTag方法產生Label開始標籤,然後利用Write方法輸出編碼過的文字;再利用RenderEndTag產生結尾標籤。依此類推產生Input標籤。
總結
ASP.NET利用HTML Helpers以便利用程式碼來動態產生HTML標籤讓View顯示。HTML Helpers可以回傳一個MvcHtmlString字串,它代表HTML編碼過的字串,因此您便不需要再自行撰寫文字編碼的程式。