在 ASP.NET MVC 中创建自定义 HtmlHelper

在ASP.NET MVC应用程序的开发中，我们常碰到类似Html.Label或Html.TextBox这样的代码，它将在网页上产生一个label或input标记。这些HtmlHelper的扩展方法有些像WebForm中的控件，只需传入一些参数即可生成相应的HTML代码。本文将介绍创建HtmlHelper的方法。

Html.Textbox方法的返回值是MvcHtmlString，它生成了一些HTML代码。创建HtmlHelper，就像在生成HTML代码。下面以一个带有简要描述功能的链接HtmlHelper为例介绍创建自定义HtmlHelper的方法。它将显示一个链接并在下方简要介绍该与该链接内容有关的信息。在某些带有简要描述的项列表页上可能会需要类似的功能。最后的结果预览如下图。

?O)a{]+j|0上面使用了3次自定义的HtmlHelper，每次生成的代码如下

1  <div>
2l7|f Xh6Uq*h1x0 2  <p class="LinkTitle"><a href="#">链接标题</a></p>
gzMn
R1pn;U,x0R'B0 3  <p class="LinkDescription">链接描述</p>
$o5Tx/q;@y @O&D0 4  </div>

 

可能稍微有点复杂，因为有了标签的嵌套。

做好准备工作以后，新建一个静态类LinkWithDescriptionExtensions，添加静态方法LinkWithDescription，代码如下 

代码

 1  /// <summary> ITPUB个人空间.Nk,N?,m3x2B0D|z"Y(B
 2  /// 带描述的链接扩展方法ITPUB个人空间gKw'Y.oW)_
 3  /// </summary> ITPUB个人空间:CQ)} aE/C Kai~
 4  /// <param name="htmlHelper">要扩展的HtmlHelper类</param> ITPUB个人空间2q^
c9EK+R3],WUVA Q
 5  /// <param name="title">标题</param> ITPUB个人空间\JA1`:y[
 6  /// <param name="url">链接地址</param> ITPUB个人空间QuO7T W.d+I x;i cI
 7  /// <param name="description">描述</param>
T)t(}#Xc0  8  /// <returns>HTML代码</returns> ITPUB个人空间S4NtY'Z5Mc`
 9  public static MvcHtmlString LinkWithDescription(this HtmlHelper htmlHelper, string title, string url, string description)ITPUB个人空间T m*M)a~,h4e4T
10  {
a\}6J0uZ+`6s%_011      // 生成与标题链接有关的HTML代码
$p$O!E x1z _x8f4Y012      TagBuilder titleContainer = new TagBuilder("p");    // 标题链接容器p
.u
~tm J-hyl013      TagBuilder titleLink = new TagBuilder("a");    // 标题中的文字要有链接,所以包含在a标签内ITPUB个人空间 |2A3J^~t |2@%P
14      titleLink.MergeAttribute("href", url);    // 为a添加href属性并指定链接地址ITPUB个人空间*t k;@)O%p,D
15      titleLink.SetInnerText(title);    // 标题文字
j'n dyAExZ$C016      titleContainer.InnerHtml = titleLink.ToString();    // 将a放到p中
0J:aHGT7j-l1k5Z017      titleContainer.AddCssClass("LinkTitle");    // 为标题添加样式
(k/\{/tl3c ]"EoC018 
;w5r i&gs s*F3X4Zq0 19      // 生成与链接描述有关的HTML代码
4ge*` [v)|020      TagBuilder descriptionContainer = new TagBuilder("p");    // 连接描述容器p
8@ hdh&WR*f*d021      descriptionContainer.InnerHtml = description;    // 描述文字ITPUB个人空间Xg r"I%H(x
yQ H
22      descriptionContainer.AddCssClass("LinkDescription");    // 为描述添加样式
h:XFX a2k?023  ITPUB个人空间 WGM ZmU8m0Y:~ R!Eq
24      // 将上述元素放入一个DIV中
W"l#giPN"L025      TagBuilder div = new TagBuilder("div");
ts~u$Y [6a b026      div.InnerHtml = string.Format("{0}{1}", titleContainer.ToString(), descriptionContainer.ToString());
3V!Z^p[m(fH$l027 
"w;@-D_/C0_'e0 28      // 返回生成的HTML代码ITPUB个人空间`I8J-i ]0h
29      return MvcHtmlString.Create(div.ToString());
!V:C#u"J_%N({o7? PT4m030  }

 

先理清结构再使用TagBuilder生成HTML代码是比较方便的。这里也可以使用拼接字符串的方式来生成HTML代码，只要最后得到所需的HTML代码就可以，但是我个人不建议使用拼接字符串的方式，这样不仅思维容易混乱而且容易出错。使用TagBuilder既结构清晰，又不容易出错。

在ASPX页中，可以使用

1  <%:Html.LinkWithDescription("测试链接1", "#", "这是测试链接1的描述")%> ITPUB个人空间 WuvC%L p9K"Q u0Wu
2  <%:Html.LinkWithDescription("测试链接2", "#", "这是测试链接2的描述")%> ITPUB个人空间zX%C'K&rh
3  <%:Html.LinkWithDescription("测试链接3", "#", "这是测试链接3的描述")%>

 

来调用上面的扩展方法，这里的链接标题、链接地址和描述等信息可以通过ViewData等方式传入。在Action中写

代码

 1  /// <summary>
_Vxm _] uH0  2  ///  Demo
~Z+b3xW3i0 3  /// </summary> ITPUB个人空间0cKEO T
 4  /// <returns>Demo视图</returns>
d:X%F_ ?GcO0  5  public  ActionResult Demo()ITPUB个人空间'?'T(FH a'kZ
 6  {
i\im7bp8K0 7      // 创建链接信息列表
9B B1sJ4D(a9x*wW0  8      List<LinkInfo> links = new List<LinkInfo> ();ITPUB个人空间I u | u2O
 9      links.Add(new LinkInfo { Description = "这是测试链接1的描述", Title = "测试链接1", Url = "#"  });
eG }MFZtc010      links.Add(new LinkInfo { Description = "这是测试链接2的描述", Title = "测试链接2", Url = "#"  });
JyTa Aw%?:K\011      links.Add(new LinkInfo { Description = "这是测试链接3的描述", Title = "测试链接3", Url = "#"  });ITPUB个人空间`x'\Dps \D#f?
12 
4yX ya D!H&g lu.X0 13 
|d9nN0?0 14      ViewData["Links"] =  links;
6Xg HN z_
q015 
:ttl"FYK0 16      return  View();
+d'\5kSj[y*j Y)n*`017  }

 

在ASPX页中写

1  <%List<LinkInfo> links=ViewData["Links"] as List<LinkInfo> ;ITPUB个人空间\7?Y:w;KX!kw7g+{
2  foreach (var link in links)
;{Dek yY.W8u4M03  {   %>
&}+fo ?%c5wG8vA0 4  <%:Html.LinkWithDescription(link.Title, link.Url, link.Description)%> ITPUB个人空间8{[_P)Ea1hT7h
5  <%} %>