ASP.NET MVC 之 TagBuilder

使用 ASP.NET MVC 開發專案，沒有以往常使用的控制項，
不過卻也讓頁面的設計更加彈性，但是如果每個標籤都要自己敲，
那其實還挺累人的。

所以我們可以利用上一篇提到的 Extension Methods
把我們自己客製化的 Tag 加到 Html Helper

那建立一個 Tag 只能用兜字串的方式嗎？
以前不知道 TagBuilder 這好東西的時候，還真常這麼做呢！
使用 TagBuilder 建立各種 Tag 至少要知道它可以做些什麼！
最基本，最常用的，就下面兩個方法，和一個屬性，
其他詳情請參考 MSDN/TagBuilder Members

1. 方法
AddCssClass(string value)
在 Tag 加入一個 Class 屬性，其值為 value。
MergeAttribute(string key, string value[, bool replaceExisting])
在 Tag 加入一個屬性，屬性名稱為 key，值為 value，
多載加入 replaceExisting 表示是否取代已經存在的屬性。

2. 屬性
InnerHTML
標籤的內容

看到這，不如就來實際試試看囉。程式碼如下：

using System.Web.Mvc;

namespace Frank.Extensions
{
    public static class Ext
    {
        public static string CLink(
            this HtmlHelper helper, string css, 
            string href, string title, string inner)
        {
            // Create tag builder "a"
            TagBuilder link = new TagBuilder("a");
            // Add class
            link.AddCssClass(css);
            // Add attributes
            link.MergeAttribute("href", href);
            link.MergeAttribute("title", title);
            // Add inner html
            link.InnerHtml = inner;
            // Output string
            return link.ToString();
        }
    }
}

在 View 的部份呢，只需要把 namespace import 進來，就可以使用了。

<%@ Import Namespace="Frank.Extensions" %>
<%= Html.CLink("css_class", "#", "test tag builder", "測試 TagBuilder")%>

這樣我們可以得到，下面的結果：
<a class="css_class" href="#" title="test tag builder">測試 TagBuilder</a>
雖然說，簡單的 Tag 似乎用兜字串的方式比較快，不過想想日後重複利用的可能性，
以及正確性來說還是 TagBuilder 勝出的。