自定義擴展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);

 

        }