自定义扩展mvc的Helper 类(标签为span 和 td)

   参考文献：http://www.cnblogs.com/zhangziqiu/archive/2009/03/18/Aspnet-MVC-4.html

 

(2)扩展Html Helper类

我们可以自己扩展HtmlHelper类, 为HtmlHelper类添加新的扩展方法, 从而实现更多的功能.

在项目中建立Extensions文件夹, 在其中创建SpanExtensions.cs文件.源代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;


namespace System.Web.Mvc
{
    public static class SpanExtensions
    {
        public static string Span(this HtmlHelper helper,string id, string text)
        {
            return String.Format(@"<span id=""{0}"">{1}</span>", id, text);
        }
    }
}

上面的代码我们为HtmlHelper类添加了一个Span()方法, 能够返回一个Span的完整HTML字符串.

因为命名空间是System.Web.Mvc,所以页面使用的时候不需要再做修改,Visual Studio会自动识别出来:

请大家一定要注意命名空间, 如果不使用System.Web.Mvc命名空间, 那么一定要在页面上引用你的扩展方法所在的命名空间, 否则我们的扩展方法将不会被识别.

接下来在页面上可以使用我们的扩展方法:

    <div>
        <!-- 使用自定义的Span方法扩展HTML Helper -->
        <% =Html.Span("textSpan", "使用自定义的Span方法扩展HtmlHelper类生成的Span") %>
    </div>

 

(3) 使用TagBuilder类创建扩展方法

上面自定义的Span()方法十分简单, 但是有时候我们要构造具有复杂结构的Html元素, 如果用字符串拼接的方法就有些笨拙.

ASP.NET MVC框架提供了一个帮助我们构造Html元素的类:TagBuilder

TagBuilder类有如下方法帮助我们构建Html控件字符串:

方法名称	用途
AddCssClass()	添加class=””属性
GenerateId()	添加Id,  会将Id名称中的"."替换为IdAttributeDotReplacement 属性值的字符.默认替换成"_"
MergeAttribute()	添加一个属性,有多种重载方法.
SetInnerText()	设置标签内容, 如果标签中没有再嵌套标签,则与设置InnerHTML 属性获得的效果相同.
ToString()	输出Html标签的字符串, 带有一个参数的重载可以设置标签的输出形式为以下枚举值: TagRenderMode.Normal -- 有开始和结束标签 TagRenderMode.StartTag -- 只有开始标签 TagRenderMode.EndTag -- 只有结尾标签 TagRenderMode.SelfClosing -- 单标签形式,如<br/>

同时一个TagBuilder还有下列关键属性:

属性名称	用途
Attributes	Tag的所有属性
IdAttributeDotReplacement	添加Id时替换"."的目标字符
InnerHTML	Tag的内部HTML内容
TagName	Html标签名, TagBuilder只有带一个参数-TagName的构造函数.所以TagName是必填属性

下面在添加一个自定义的HtmlHelper类扩展方法,同样是输出一个<Span>标签:

        public static string Span(this HtmlHelper helper, string id, string text, string css, object htmlAttributes)
        {
            //创意某一个Tag的TagBuilder
            var builder = new TagBuilder("span");

            //创建Id,注意要先设置IdAttributeDotReplacement属性后再执行GenerateId方法.
            builder.IdAttributeDotReplacement = "-";
            builder.GenerateId(id);
            

            //添加属性            
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            //添加样式
            builder.AddCssClass(css);
            //或者用下面这句的形式也可以: builder.MergeAttribute("class", css);

            //添加内容,以下两种方式均可
            //builder.InnerHtml = text;
            builder.SetInnerText(text);

            //输出控件
            return builder.ToString(TagRenderMode.Normal);

        }

在页面上,调用这个方法:

<% =Html.Span("span.test", "使用TagBuilder帮助构建扩展方法", "ColorRed", new { style="font-size:15px;" })%>

 

生成的Html代码为:

<span id="span-test" class="ColorRed" style="font-size: 15px;">使用TagBuilder帮助构建扩展方法</span>

注意已经将id中的"."替换为了"-"字符.

 

自己操作的实例，实现Tr，Td，Span标签的扩展。

 

 /// <summary>

        /// 扩展Span标签1

        /// </summary>

        /// <param name="helper"></param>

        /// <param name="id">span标签的id</param>

        /// <param name="text">span标签的内容</param>

        /// <returns></returns>

        public static string Span(this HtmlHelper helper, string id, string text)

        {

            return String.Format(@"<span id=""{0}"">{1}</span>", id, text);

        }

            /// <summary>

            /// 扩展Span标签2

            /// </summary>

            /// <param name="helper"></param>

            /// <param name="id"></param>

            /// <param name="text"></param>

            /// <param name="htmlAttributes">设置样式属性</param>

            /// <returns></returns>

        public static string Span(this HtmlHelper helper, string id, string text, object htmlAttributes)

        {

            //创意某一个Tag的TagBuilder

            var builder = new TagBuilder("span");

 

            //创建Id,注意要先设置IdAttributeDotReplacement属性后再执行GenerateId方法.

            builder.IdAttributeDotReplacement = "-";

            builder.GenerateId(id);

 

 

            //添加属性            

            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

 

 

            //添加内容,以下两种方式均可

            //builder.InnerHtml = text;

            builder.SetInnerText(text);

 

            //输出控件

            return builder.ToString(TagRenderMode.Normal);

 

        }

        /// <summary>

        /// 扩展Span标签3

        /// </summary>

        /// <param name="helper"></param>

        /// <param name="id"></param>

        /// <param name="text"></param>

        /// <param name="css">设置该标签的类样式</param>

        /// <param name="htmlAttributes">设置样式属性</param>

        /// <returns></returns>

        public static string Span(this HtmlHelper helper, string id, string text, string css, object htmlAttributes)

        {

            //创意某一个Tag的TagBuilder

            var builder = new TagBuilder("span");

 

            //创建Id,注意要先设置IdAttributeDotReplacement属性后再执行GenerateId方法.

            builder.IdAttributeDotReplacement = "-";

            builder.GenerateId(id);

 

 

            //添加属性            

            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

 

            //添加样式

            builder.AddCssClass(css);

            //或者用下面这句的形式也可以: builder.MergeAttribute("class", css);

 

            //添加内容,以下两种方式均可

            //builder.InnerHtml = text;

            builder.SetInnerText(text);

 

            //输出控件

            return builder.ToString(TagRenderMode.Normal);

 

        }

        /// <summary>

        /// 表格单元格标签

        /// </summary>

        /// <param name="helper"></param>

        /// <param name="id"></param>

        /// <param name="text"></param>

        /// <param name="htmlAttributes"></param>

        /// <returns></returns>

        public static string Td(this HtmlHelper helper, string id, string text, object htmlAttributes)

        {

            //创意某一个Tag的TagBuilder

            var builder = new TagBuilder("td");

 

            //创建Id,注意要先设置IdAttributeDotReplacement属性后再执行GenerateId方法.

            builder.IdAttributeDotReplacement = "-";

            builder.GenerateId(id);

 

 

            //添加属性            

            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

 

            //添加内容,以下两种方式均可

            //builder.InnerHtml = text;

 

            builder.SetInnerText(text);

 

            //输出控件

            return builder.ToString(TagRenderMode.Normal);

 

        }

 

        /// <summary>

        /// 表格行标签

        /// </summary>

        /// <param name="helper"></param>

        /// <param name="id"></param>

        /// <param name="text"></param>

        /// <param name="htmlAttributes"></param>

        /// <returns></returns>

        public static string Tr(this HtmlHelper helper, string id, string text, object htmlAttributes)

        {

            //创意某一个Tag的TagBuilder

            var builder = new TagBuilder("tr");

 

            //创建Id,注意要先设置IdAttributeDotReplacement属性后再执行GenerateId方法.

            builder.IdAttributeDotReplacement = "-";

            builder.GenerateId(id);

 

 

            //添加属性            

            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

 

            //添加内容,以下两种方式均可

            //builder.InnerHtml = text;

 

            builder.SetInnerText(text);

 

            //输出控件

            return builder.ToString(TagRenderMode.Normal);

 

        }