ASP.NET MVC HtmlHelper如何擴展

字號:


    一、ASP.NET 擴展方法三要素
    (1)、靜態(tài)類
    可以從下圖看出,InputExtension首先是一個靜態(tài)類;
    (2)、靜態(tài)方法
    既然是靜態(tài)類,那么其所有的方法必然都是靜態(tài)方法,例如:public static MvcHtmlString CheckBox();
    (3)、this關(guān)鍵字
    可以從方法名定義中看出,第一個參數(shù)都是this HtmlHelper htmlHelper,代表對HtmlHelper類的擴展;
    二、通過 MVC  HtmlHelper擴展 實例簡單說明擴展步驟
    實例1、擴展Submit
    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"); //使我們創(chuàng)建的標簽名字設(shè)為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方法名是對應(yīng)視圖中調(diào)用的名稱。 (如:@Html.Submit("提交") )
    (3)、this HtmlHelper
    helper 將Submit方法添加到HtmlHelper中,value是傳過來的提交按鈕上的文字。
    (4)、var builder = new TagBuilder("input");     
    設(shè)置標簽名字設(shè)為input。
    (5)、builder.MergeAttribute("type", "submit")  
    設(shè)置標簽屬性type="submit"。
    (6)、builder.MergeAttribute("value", value);     
    設(shè)置標簽提交按鈕Value值。
    (7)、TagRenderMode.SelfClosing                    
    表示用于呈現(xiàn)自結(jié)束標記(例如,<input />)的模式。
    (8)、TagRenderMode是個枚舉類,分別為
    Normal(表示用于呈現(xiàn)正常文本的模式)
    StartTag(表示用于呈現(xiàn)開始標記(例如,<tag>)的模式)
    EndTag(表示用于呈現(xiàn)結(jié)束標記(例如,</tag>)的模式)
    SelfClosing(表示用于呈現(xiàn)自結(jié)束標記(例如,<tag />)的模式)。
    (9)、MvcHtmlString作為返回值是為了使返回值不被轉(zhuǎn)義,比如"<"不會被轉(zhuǎn)成"<"。
    View中調(diào)用
    @Html.Submit("提交")
    實例2、擴展超鏈接
    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)
    {
      // 生成與標題鏈接有關(guān)的HTML代碼
      TagBuilder titleContainer = new TagBuilder("p");  // 標題鏈接容器p
      TagBuilder titleLink = new TagBuilder("a");  // 標題中的文字要有鏈接,所以包含在a標簽內(nèi)
      titleLink.MergeAttribute("href", url);  // 為a添加href屬性并指定鏈接地址
      titleLink.SetInnerText(title);  // 標題文字
      titleContainer.InnerHtml = titleLink.ToString();  // 將a放到p中
      titleContainer.AddCssClass("LinkTitle");  // 為標題添加樣式
      // 生成與鏈接描述有關(guān)的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());
    }
    視圖中調(diào)用
    @Html.LinkWithDescription("測試鏈接1", "#", "這是測試鏈接1的描述")