MVC中使用HTML Helper類擴展HTML控件

文章摘自：http://www.cnblogs.com/zhangziqiu/archive/2009/03/18/1415005.html

MVC在view頁面，經常需要用到很多封裝好的HTML控件，這篇文章主要講述，怎么自己擴展和定制自己需要的控件。

----------------------------------------------------------

HTML Helper類是ASP.NET MVC框架中提供的生成HTML控件代碼的類. 本質上與第一種方式一樣, 只是我們可以不必手工書寫HTML代碼,而是借助HTML Helper類中的方法幫助我們生成HTML控件代碼.

同時,我們也可以使用擴展方法為HTML Helper類添加自定義的生成控件的方法.

HTML Helper類的大部分方法都是返回一個HTML控件的完整字符串, 所以可以直接在需要調用的地方使用<% =Html.ActionLink() %>的形式輸出字符串.

(1)ASP.NET MVC中的HtmlHelper類

在ViewPage中提供了Html屬性, 這就是一個HtmlHelper類的實例. ASP.NET MVC框架自帶了下面這些方法:

• Html.ActionLink()
• Html.BeginForm()
• Html.CheckBox()
• Html.DropDownList()
• Html.EndForm()
• Html.Hidden()
• Html.ListBox()
• Html.Password()
• Html.RadioButton()
• Html.TextArea()
• Html.TextBox()

  上面列舉的常用的HtmlHelper類的方法,並不是完整列表.

  下面的例子演示如何使用HtmlHelper類:

   <div>
          <% using (Html.BeginForm())
             { %>
             <label style="width:60px;display:inline-block;">用戶名:</label>
             <% =Html.TextBox("UserName", "ziqiu.zhang", new { style="width:200px;" })%>
             <br /><br /> 
             <label style="width:60px;display:inline-block;">密碼:</label>
             <% =Html.Password("Psssword", "123456", new { style = "width:200px;" })%>                     
          <% }%>
      </div>

  上面的代碼使用Html.BeginForm輸出一個表單對象, 並在表單對象中添加了兩個Input, 一個使用Html.TextBox輸出, 另一個使用Html.Password輸出,區別是Html.Password輸出的input控件的type類型為password.

  (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>