ASP.NET MVC HtmlHelper如何扩展

ASP.NET MVC 中HtmlHelper方法为我们提供很多html标签，只需在页面调用就行了，但是微软并没有把所有的html标签都对应有了扩展方法，需要我们自定义HtmlHelper，来满足我们需要。

一、ASP.NET 扩展方法三要素

(1)、静态类

可以从下图看出，InputExtension首先是一个静态类；

(2)、静态方法

既然是静态类，那么其所有的方法必然都是静态方法，例如：public static MvcHtmlString CheckBox()；

(3)、this关键字

可以从方法名定义中看出，第一个参数都是this HtmlHelper htmlHelper，代表对HtmlHelper类的扩展；

二、通过 MVC  HtmlHelper扩展 实例简单说明扩展步骤

实例1、扩展Submit

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace TestMvcHelper {    public static class HtmlExtensions    {      public static MvcHtmlString Submit( this HtmlHelper helper, string value)      {        var builder = new TagBuilder( "input" ); //使我们创建的标签名字设为input        builder.MergeAttribute( "type" , "submit" ); //添加属性 type="submit"        builder.MergeAttribute( "value" , value);        return MvcHtmlString.Create(builder.ToString(TagRenderMode.SelfClosing));      }    } }

上述实例说明

(1)、在使用TagBuilder需要引入命名空间System.Web.Mvc。
(2)、Submit方法名是对应视图中调用的名称。 (如：@Html.Submit("提交") )
(3)、this HtmlHelper

helper 将Submit方法添加到HtmlHelper中，value是传过来的提交按钮上的文字。
(4)、var builder = new TagBuilder("input");     

设置标签名字设为input。
(5)、builder.MergeAttribute("type", "submit")  

设置标签属性type="submit"。
(6)、builder.MergeAttribute("value", value);     

设置标签提交按钮Value值。
(7)、TagRenderMode.SelfClosing                    

表示用于呈现自结束标记（例如，<input />）的模式。
(8)、TagRenderMode是个枚举类，分别为

Normal（表示用于呈现正常文本的模式）

StartTag（表示用于呈现开始标记（例如，<tag>）的模式）

EndTag（表示用于呈现结束标记（例如，</tag>）的模式）

SelfClosing（表示用于呈现自结束标记（例如，<tag />）的模式）。
(9)、MvcHtmlString作为返回值是为了使返回值不被转义，比如"<"不会被转成"<"。

View中调用

?

1	@Html.Submit( "提交" )

实例2、扩展超链接

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

http: //www.CodeHighlighter.com/--> 1 /// <summary> /// 带描述的链接扩展方法 /// </summary> /// <param name="htmlHelper">要扩展的HtmlHelper类</param> /// <param name="title">标题</param> /// <param name="url">链接地址</param> /// <param name="description">描述</param> /// <returns>HTML代码</returns> public static MvcHtmlString LinkWithDescription( this HtmlHelper htmlHelper, string title, string url, string description) {    // 生成与标题链接有关的HTML代码    TagBuilder titleContainer = new TagBuilder( "p" );  // 标题链接容器p    TagBuilder titleLink = new TagBuilder( "a" );  // 标题中的文字要有链接,所以包含在a标签内    titleLink.MergeAttribute( "href" , url);  // 为a添加href属性并指定链接地址    titleLink.SetInnerText(title);  // 标题文字    titleContainer.InnerHtml = titleLink.ToString();  // 将a放到p中    titleContainer.AddCssClass( "LinkTitle" );  // 为标题添加样式      // 生成与链接描述有关的HTML代码    TagBuilder descriptionContainer = new TagBuilder( "p" );  // 连接描述容器p    descriptionContainer.InnerHtml = description;  // 描述文字    descriptionContainer.AddCssClass( "LinkDescription" );  // 为描述添加样式      // 将上述元素放入一个DIV中    TagBuilder div = new TagBuilder( "div" );    div.InnerHtml = string .Format( "{0}{1}" , titleContainer.ToString(), descriptionContainer.ToString());      // 返回生成的HTML代码    return MvcHtmlString.Create(div.ToString()); }

视图中调用

@Html.LinkWithDescription("测试链接1", "#", "这是测试链接1的描述")