demoshop

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。