使用與客製化ASP.NET 4 HTML Helpers

在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.TextArea

用來建立HTML 超連結的擴充方法如下：

• Html.ActionLink
• Html.RouteLink

用來建立HTML Label標籤的擴充方法如下：

• 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編碼過的字串，因此您便不需要再自行撰寫文字編碼的程式。