ASP.NET MVC 之 TagBuilder

2013-05-02

1041
0

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

使用 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 勝出的。

P.S: 本文為本人之前於 blogspot 發表過，現今將技術相關類別的文章轉移過來。

原文：http://jhshen.blogspot.tw/2010/07/aspnet-mvc-tagbuilder.html

回首頁