扩展HtmlHelper辅助方法

浏览数：13 / 时间：2015年06月09日

1、什么是HtmlHelper辅助方法？其实就是HtmlHelper类的扩展方法，如下所示：

namespace System.Web.Mvc.Html
{
    public static class FormExtensions//表单相关扩展方法，例如创建表单标签等。

    public static class InputExtensions//这里包含了所有input,例如:text,button,readiobutton等等。

    public static class LinkExtensions//链接相关方法

    public class MvcForm : IDisposable//与客户端控件无关

    public static class RenderPartialExtensions//这是输出PartialView

    public static class SelectExtensions//输出下拉框

    public static class TextAreaExtensions//输出多行文本框

    public static class ValidationExtensions//输出相关表单元素验证。
}

比如对于扩展类InputExtensions，MVC框架本身对此已有扩展：

namespace System.Web.Mvc.Html
{
    // Summary:
    //     Represents support for HTML input controls in an application.
    public static class InputExtensions
    {
                public static MvcHtmlString CheckBox(this HtmlHelper htmlHelper, string name);
    }
}

2、通过对HtmlHelper进行扩展来构建自己的HtmlHelper辅助方法

System.Web.Mvc.Html下的HtmlHelper只能完成大部分html控件的输出，有一些我们经常用到的东东它却没有，怎么办？自己动手吧~

在我们扩展之前，有个叫TagBuilder的类（生成标签）比较好用，你不必纠结于它的细节，只要大概知道他有那些方法就行：

    public TagBuilder(string tagName);
    public void AddCssClass(string value);//增加样式
    public void GenerateId(string name);//设置控件ID
    private string GetAttributesString();
    public void MergeAttribute(string key, string value);//设置属性值
    public void MergeAttribute(string key, string value, bool replaceExisting);
    public void MergeAttributes<TKey, TValue>(IDictionary<TKey, TValue> attributes);
    public void MergeAttributes<TKey, TValue>(IDictionary<TKey, TValue> attributes, bool replaceExisting);
    public void SetInnerText(string innerText);//设置显示文本
    public override string ToString();
    public string ToString(TagRenderMode renderMode);//输出控件html

现在可以开始扩展了！

A、扩展img标签

namespace System.Web.Mvc
{
    public static class ImageExtensions
    {
        public static string Image(this HtmlHelper helper, string id, string url, string alternateText)
        {
            return Image(helper, id, url, alternateText, null);
        }
        public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object htmlAttributes)
        {
            // 创建IMG标签
            var builder = new TagBuilder("img");

            // 增加ID属性
            builder.GenerateId(id);

            // 增加属性
            builder.MergeAttribute("src", url);
            builder.MergeAttribute("alt", alternateText);
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            // 输出完整的img标签
            return builder.ToString(TagRenderMode.SelfClosing);
        }

    }
}

调用：@Html.Image("img1", http://img/111.jpg, "这是一张图片", new {border="4px"})

输出：<img id="img1" src="http://img/111.jpg" style="border:4px;" alt="这是一张图片"/>

B、扩展div标签

namespace System.Web.Mvc
{
    public static class DivExtensions
    {
        public static String Div(this HtmlHelper helper, String id, String content, String cssStyle, object htmlAttrs)
        {
            TagBuilder builder = new TagBuilder("div");
            //替换“.”为“_”
            builder.IdAttributeDotReplacement = "_";
            builder.GenerateId(id);       
            builder.MergeAttributes(new RouteValueDictionary(htmlAttrs));
            builder.AddCssClass(cssStyle);
            builder.InnerHtml=content;
            return builder.ToString(TagRenderMode.Normal);    //代表是双面标签
        }
    }
}

调用：

@Html.Div("MyDiv.1", "扩展方法", "MyClassStyle", new { style="border:solid red 1px;" })

输出：

C、扩展Span标签

namespace System.Web.Mvc
{
    public static class SpanExtensions
    {
        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;" })

输出：

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

D、扩展ul、li标签

namespace System.Web.Mvc
{
    public static class UlLiExtensions
    {
        public static MvcHtmlString UlLi(this HtmlHelper helper, string[] listItems)

        {

            TagBuilder ulTag = new TagBuilder("ul");

            foreach (string item in listItems)

            {

                TagBuilder liTag = new TagBuilder("li");

                liTag.SetInnerText(item);

                ulTag.InnerHtml += liTag.ToString();

            }

            return new MvcHtmlString(ulTag.ToString());

        }

    }
}

调用：

@Html.List(new string[]{"苹果","柚子","草莓","火龙果"})

输出：

<ul> 
<li>苹果</li> 
<li>柚子</li> 
<li>草莓</li> 
<li>火龙果</li>  
</ul>

E、扩展截取字符串（某一个字段太长，显示的时候用来截取）

namespace System.Web.Mvc
{
    public static class CutStringExtensions
    {
        public static string CutString(this  System.Web.Mvc.HtmlHelper helper, string content, int length)
        {
            if (content.Length > length)
            {
                return content.Substring(0, length) + "...";
            }
            else
            {
                return content;
            }
        }


    }
}