在ASP.NETMVC中创建自定义HtmlHelper

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

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

上面使用了3次自定义的HtmlHelper，每次生成的代码如下

1

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

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

1 ///

2 /// 带描述的链接扩展方法
3 ///

4 /// 要扩展的HtmlHelper类
5 /// 标题
6 /// 链接地址
7 /// 描述
8 /// HTML代码
9 public static MvcHtmlString LinkWithDescription(this HtmlHelper htmlHelper, string title, string url, string description)
10 {
11 // 生成与标题链接有关的HTML代码
12 TagBuilder titleContainer = new TagBuilder("p"); // 标题链接容器p
13 TagBuilder titleLink = new TagBuilder("a"); // 标题中的文字要有链接,所以包含在a标签内
14 titleLink.MergeAttribute("href", url); // 为a添加href属性并指定链接地址
15 titleLink.SetInnerText(title); // 标题文字
16 titleContainer.InnerHtml = titleLink.ToString(); // 将a放到p中
17 titleContainer.AddCssClass("LinkTitle"); // 为标题添加样式
18
19 // 生成与链接描述有关的HTML代码
20 TagBuilder descriptionContainer = new TagBuilder("p"); // 连接描述容器p
21 descriptionContainer.InnerHtml = description; // 描述文字
22 descriptionContainer.AddCssClass("LinkDescription"); // 为描述添加样式
23
24 // 将上述元素放入一个DIV中
25 TagBuilder div = new TagBuilder("div");
26 div.InnerHtml = string.Format("{0}{1}", titleContainer.ToString(), descriptionContainer.ToString());
27
28 // 返回生成的HTML代码
29 return MvcHtmlString.Create(div.ToString());
30 }


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

在ASPX页中，可以使用

1 <%:Html.LinkWithDescription("测试链接1", "#", "这是测试链接1的描述")%>
2 <%:Html.LinkWithDescription("测试链接2", "#", "这是测试链接2的描述")%>
3 <%:Html.LinkWithDescription("测试链接3", "#", "这是测试链接3的描述")%>


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

2 /// Demo
3 ///

4 /// Demo视图
5 public ActionResult Demo()
6 {
7 // 创建链接信息列表
8 List links = new List();
9 links.Add(new LinkInfo { Description = "这是测试链接1的描述", Title = "测试链接1", Url = "#" });
10 links.Add(new LinkInfo { Description = "这是测试链接2的描述", Title = "测试链接2", Url = "#" });
11 links.Add(new LinkInfo { Description = "这是测试链接3的描述", Title = "测试链接3", Url = "#" });
12
13
14 ViewData["Links"] = links;
15
16 return View();
17 }


在ASPX页中写

1 <%List links=ViewData["Links"] as List;
2 foreach (var link in links)
3 { %>
4 <%:Html.LinkWithDescription(link.Title, link.Url, link.Description)%>
5 <%} %>
在ASP.NET MVC应用程序的开发中，我们常碰到类似Html.Label或Html.TextBox这样的代码，它将在网页上产生一个label或input标记。这些HtmlHelper的扩展方法有些像WebForm中的控件，只需传入一些参数即可生成相应的HTML代码。本文将介绍创建HtmlHelper的方法。

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


上面使用了3次自定义的HtmlHelper，每次生成的代码如下

1

2

链接标题

3

链接描述

4

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

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

1 ///

2 /// 带描述的链接扩展方法
3 ///

4 /// 要扩展的HtmlHelper类
5 /// 标题
6 /// 链接地址
7 /// 描述
8 /// HTML代码
9 public static MvcHtmlString LinkWithDescription(this HtmlHelper htmlHelper, string title, string url, string description)
10 {
11 // 生成与标题链接有关的HTML代码
12 TagBuilder titleContainer = new TagBuilder("p"); // 标题链接容器p
13 TagBuilder titleLink = new TagBuilder("a"); // 标题中的文字要有链接,所以包含在a标签内
14 titleLink.MergeAttribute("href", url); // 为a添加href属性并指定链接地址
15 titleLink.SetInnerText(title); // 标题文字
16 titleContainer.InnerHtml = titleLink.ToString(); // 将a放到p中
17 titleContainer.AddCssClass("LinkTitle"); // 为标题添加样式
18
19 // 生成与链接描述有关的HTML代码
20 TagBuilder descriptionContainer = new TagBuilder("p"); // 连接描述容器p
21 descriptionContainer.InnerHtml = description; // 描述文字
22 descriptionContainer.AddCssClass("LinkDescription"); // 为描述添加样式
23
24 // 将上述元素放入一个DIV中
25 TagBuilder div = new TagBuilder("div");
26 div.InnerHtml = string.Format("{0}{1}", titleContainer.ToString(), descriptionContainer.ToString());
27
28 // 返回生成的HTML代码
29 return MvcHtmlString.Create(div.ToString());
30 }


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

在ASPX页中，可以使用

1 <%:Html.LinkWithDescription("测试链接1", "#", "这是测试链接1的描述")%>
2 <%:Html.LinkWithDescription("测试链接2", "#", "这是测试链接2的描述")%>
3 <%:Html.LinkWithDescription("测试链接3", "#", "这是测试链接3的描述")%>


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

1 ///

2 /// Demo
3 ///

4 /// Demo视图
5 public ActionResult Demo()
6 {
7 // 创建链接信息列表
8 List links = new List();
9 links.Add(new LinkInfo { Description = "这是测试链接1的描述", Title = "测试链接1", Url = "#" });
10 links.Add(new LinkInfo { Description = "这是测试链接2的描述", Title = "测试链接2", Url = "#" });
11 links.Add(new LinkInfo { Description = "这是测试链接3的描述", Title = "测试链接3", Url = "#" });
12
13
14 ViewData["Links"] = links;
15
16 return View();
17 }


在ASPX页中写

1 <%List links=ViewData["Links"] as List;
2 foreach (var link in links)
3 { %>
4 <%:Html.LinkWithDescription(link.Title, link.Url, link.Description)%>
5 <%} %>
在ASP.NET MVC应用程序的开发中，我们常碰到类似Html.Label或Html.TextBox这样的代码，它将在网页上产生一个label或input标记。这些HtmlHelper的扩展方法有些像WebForm中的控件，只需传入一些参数即可生成相应的HTML代码。本文将介绍创建HtmlHelper的方法。

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


上面使用了3次自定义的HtmlHelper，每次生成的代码如下

1

2

链接标题

3

链接描述

4

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

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

2 /// 带描述的链接扩展方法
3 ///

4 /// 要扩展的HtmlHelper类
5 /// 标题
6 /// 链接地址
7 /// 描述
8 /// HTML代码
9 public static MvcHtmlString LinkWithDescription(this HtmlHelper htmlHelper, string title, string url, string description)
10 {
11 // 生成与标题链接有关的HTML代码
12 TagBuilder titleContainer = new TagBuilder("p"); // 标题链接容器p
13 TagBuilder titleLink = new TagBuilder("a"); // 标题中的文字要有链接,所以包含在a标签内
14 titleLink.MergeAttribute("href", url); // 为a添加href属性并指定链接地址
15 titleLink.SetInnerText(title); // 标题文字
16 titleContainer.InnerHtml = titleLink.ToString(); // 将a放到p中
17 titleContainer.AddCssClass("LinkTitle"); // 为标题添加样式
18
19 // 生成与链接描述有关的HTML代码
20 TagBuilder descriptionContainer = new TagBuilder("p"); // 连接描述容器p
21 descriptionContainer.InnerHtml = description; // 描述文字
22 descriptionContainer.AddCssClass("LinkDescription"); // 为描述添加样式
23
24 // 将上述元素放入一个DIV中
25 TagBuilder div = new TagBuilder("div");
26 div.InnerHtml = string.Format("{0}{1}", titleContainer.ToString(), descriptionContainer.ToString());
27
28 // 返回生成的HTML代码
29 return MvcHtmlString.Create(div.ToString());
30 }

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

在ASPX页中，可以使用

1 <%:Html.LinkWithDescription("测试链接1", "#", "这是测试链接1的描述")%>
2 <%:Html.LinkWithDescription("测试链接2", "#", "这是测试链接2的描述")%>
3 <%:Html.LinkWithDescription("测试链接3", "#", "这是测试链接3的描述")%>


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

1 ///

2 /// Demo
3 ///

4 /// Demo视图
5 public ActionResult Demo()
6 {
7 // 创建链接信息列表
8 List links = new List();
9 links.Add(new LinkInfo { Description = "这是测试链接1的描述", Title = "测试链接1", Url = "#" });
10 links.Add(new LinkInfo { Description = "这是测试链接2的描述", Title = "测试链接2", Url = "#" });
11 links.Add(new LinkInfo { Description = "这是测试链接3的描述", Title = "测试链接3", Url = "#" });
12
13
14 ViewData["Links"] = links;
15
16 return View();
17 }


在ASPX页中写
1 <%List links=ViewData["Links"] as List;
2 foreach (var link in links)
3 { %>
4 <%:Html.LinkWithDescription(link.Title, link.Url, link.Description)%>
5 <%} %>