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

by Vivid 8. 三月 2011 08:00
 

在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的圓形按鈕,以便於在網頁上提供單選的功能。

clip_image001

圖 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所示。

clip_image003

圖 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>

clip_image005

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

Tags:

ASP.NET | NET 開發 | 許薰尹Vivid Hsu | .NET Magazine國際中文電子雜誌

評論 (1) -

Phil
Phil New Zealand
2011/10/10 上午 07:57:45 #

版主的解說清楚詳盡.感恩啦!

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List