在 ASP.Net MVC 的 HTML Helper 中使用 TagBuilder
前言
在 ASP.Net MVC 中最重要的就是有許多好用的 Helper 可以使用,當然也可以很方便的來擴充它,而擴充的方式也很容易,如下所示的程式碼就是最基本的方法,最重要的就是第一個參數是 this HtmlHelper html 就可以囉!
1 2 3 4 |
public static string Img(this HtmlHelper html) { return ""; } |
而在擴充方法裡面的的程式就是產生我們想要的 HTML ,在 .Net 裡也提供了一個新的類別 TagBuilder 來幫助我們快速又方便的建立 Html Tag 的字串,而實作的範例就在後面說明了。
實作
首先先來做一個簡單的範例,因為 ASP.net MVC 內建沒有提供 img 標籤的 Helper,所以我們來實作一個。
1 2 3 4 5 6 7 |
public static MvcHtmlString Img(this HtmlHelper html, string Url) { TagBuilder builer = new TagBuilder("img"); builer.MergeAttribute("src", Url); return new MvcHtmlString(builer.ToString()); } |
其中我們用 img 來當做建構子參數,並且使用 MergeAttribute 方法來新增 Tag 裡面的 Attribute,因為 MVC3 預設會對 string 編碼,為了方便使用我把回傳的類別改成 MvcHtmlString,最後呼叫 ToString 方法來產生字串,如此一來就可以產生如下的 HTML 碼了。
1 |
<img src="/Content/open.jpg"></img> |
而我們要怎麼在 View 裡面呼叫呢?先 using 方法在的 namespace ,然後就是我們一般使用 Helper 的方式來呼叫就可以囉!
1 |
Html.Img("/Content/open.jpg") |
那如果我們要建立像 a 標籤裡面會包含文字的標籤該怎麼做呢?這時候有兩種方式:
- SetInnerText 方法
- InnerHtml 屬性
這兩種方式的差別在於 SetInnerText 方法會把傳入的字串先做 HTML 編碼,因此要使用哪種方式就看個人需求囉!最後程式碼如下:
1 2 3 4 5 6 7 8 |
public static MvcHtmlString Link(this HtmlHelper html, string Url, string LinkText) { TagBuilder builer = new TagBuilder("a"); builer.MergeAttribute("href", Url); builer.SetInnerText(LinkText); return new MvcHtmlString(builer.ToString()); } |
產生的 HTML 如下:
1 |
<a href="http://coding.anyun.idv.tw/">Coding 之路不由分說</a> |
呼叫語法如下:
1 |
Html.Link("http://coding.anyun.idv.tw/", "Coding 之路不由分說") |
但是應該會有網友想說:如果我有很多屬性,或是想自定屬性,如此一來方法的參數不就會烙烙長,這個疑問我們也可以用 MergeAttributes 方法來解決,就可以一次新增一堆我們要的屬性囉!
1 2 3 4 5 6 7 8 |
public static MvcHtmlString Link(this HtmlHelper html, string LinkText, object htmlAttribute) { TagBuilder builer = new TagBuilder("a"); builer.MergeAttributes(new RouteValueDictionary(htmlAttribute)); builer.SetInnerText(LinkText); return new MvcHtmlString(builer.ToString()); } |
產生的 HTML 如下:
1 |
<a href="http://coding.anyun.idv.tw/" style="color: Red;">Coding 之路不由分說</a> |
呼叫方法如下:
1 |
Html.Link("Coding 之路不由分說", new { href = "http://coding.anyun.idv.tw/", style="color: Red;" }) |
結論
上面實作的範例應該就可以處理掉我們許多想自定 Helper 的需求了,此外 TagBuilder 的 ToString 方法還有許多的多載,也可以產生不同結果,有興趣的網友可以參考下面的參考資料囉!
Leave a comment