ASP.NET MVC 使用 TagBuilder
- 2009-11-24
- 22830
- 0
ASP.NET MVC有一個demo覺得相當吸引人的好處就是可以隨心所欲的操作HTML,想看看之前使用GridView光是想要合併儲存格需要費多少功夫,但在MVC中就不會有這種事情發生了,但相對的自由操控HTML的代價就是HTML會一直需要自己寫,而且重複率很高,因此需要HTML Helper 來幫助產生一些常用的HTML標籤。
之前demo有寫一篇【ASP.NET MVC 你一定要知道怎麼創立HTML Helper】稍微的介紹了 HTML Helper的建造方式,現在要來提到建立HTML Helper 一個另外的寫法 利用Tag Builder。
ASP.NET MVC 包含了一個很好用的類別叫做 TagBuilder ,因考量到使用MVC的時候會有很多機會需要產生 HTML而且內建的 HTML Helper 一定無法滿足我們的需求,在之前我們可能會利用組字串的方式一行一行組出來,但現在有更輕鬆的方法來創建一個 HTML Helper。
TagBuilder 類別必須要知道的方法。 | |
AddCssClass() | 可在標籤添加一個新的 Class='' 屬性。 |
GenerateId() | 可賦予 ID 屬性,此方法可以自動的把ID內的句點轉換為下底線(預設狀況) |
MergeAttribute() | 可在標籤內添加屬性(多載) |
SetInnerText() | 可新增在標籤區塊內的主文而且會自動做編碼動作。 |
ToString() | 建立標籤,擁有多載你可以指定建立一個正常的標籤、一個開始標籤、一個結尾標籤、一個自我結束標籤 |
TagBuilder 類別的屬性。 | |
Attributes | 表示此標籤的所有屬性。 |
IdAttributeDotReplacement | 表示GenerateId()方法用來取代句點使用的(預設是取代成下底線) |
InnerHTML | 表示標籤的內容,你可以傳入字串來產生,但利用此方法的字串並不會被編碼。 |
TagName | 表示此標籤的名稱。 |
http://msdn.microsoft.com/en-us/library/system.web.mvc.tagbuilder_members.aspx
利用TagBuilder建立一個 HTML Helper
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing; namespace MvcApplication.Helpers { public class ImgHelper { public static string Image(this HtmlHelper helper, string id, string url, string alternateText) { return Image(helper, id, url, alternateText, null); } public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes) { // 建立一個 tag builder var builder = new TagBuilder("img"); // 賦予它 id builder.GenerateId(id); // 增加屬性 builder.MergeAttribute("src", url); builder.MergeAttribute("alt", alternateText); builder.MergeAttributes(new RouteValueDictionary(htmlAttributes)); // 產生 return builder.ToString(TagRenderMode.SelfClosing); } } }
頁面上就可以直接呼叫剛剛建立好的ImgHelper
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> <%@ Import Namespace="MvcApplication.Helper" %> <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server"> Home Page </asp:Content> <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> <!-- Calling helper without HTML attributes --> <%= Html.Image("img1", "http://i.msdn.microsoft.com/Platform/Controls/MastheadMSDN/resources/logo_msdn.png", "MSDN") %> <!-- Calling helper with HTML attributes --> <%= Html.Image("img2", "http://i.msdn.microsoft.com/Platform/Controls/MastheadMSDN/resources/logo_msdn.png", " MSDN ", new { border = "4px" })%> </asp:Content>
利用以上的 HTML Helper 就可以順利產生出兩個圖片,因第二張圖我們有傳入HTML 標籤的屬性所以你可以看到有邊框。
現在來看一下產生的HTML語法究竟是什麼樣子。
<!-- Calling helper without HTML attributes --> <img alt="MSDN" id="img1" src="http://i.msdn.microsoft.com/Platform/Controls/MastheadMSDN/resources/logo_msdn.png" /> <!-- Calling helper with HTML attributes --> <img alt="MSDN" border="4px" id="img2" src="http://i.msdn.microsoft.com/Platform/Controls/MastheadMSDN/resources/logo_msdn.png" />
產生出來的HTML非常乾淨不會有任何拖泥帶水的部份,再來我們回頭看一下之前有提到 TagBuilder 的創建方法 ToString() 是擁有多載的,究竟這所謂的正常的標籤、開始標籤、結尾標籤、自我結束標籤的差別在哪以下使用一個很簡單的範例來說明:
public static string Label(this HtmlHelper helper, string id) { TagBuilder builder = new TagBuilder("Label"); builder.GenerateId(id); builder.MergeAttribute("style", "color:red;"); builder.SetInnerText("測試"); return builder.ToString(TagRenderMode.StartTag); }
ToString() 多載 | 產生的HTML ToString() |
ToString() | <Label id="test" style="color:red; ">測試</Label> |
ToString(TagRenderMode.Normal) | <Label id="test" style="color:red; ">測試</Label> |
ToString(TagRenderMode.StartTag) | <Label id="test" style="color:red;"> |
ToString(TagRenderMode.SelfClosing) | <Label id="test" style="color:red;"/> |
ToString(TagRenderMode.EndTag) | </Label> |
因為Tag Builder 的 ToString() 提供了多載的方法所以可以讓我們更彈性的產生出所需要的 HTML Helper。
回應討論