ASP.NET MVC擴展之HtmlHelper輔助方法

什么是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);
 }
}

通過對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;" })

輸出：

<div id="MyDiv_1" class="MyClassStyle" style="border:solid red 1px;">擴展方法</div>

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; } } } }

此處只是拋磚引玉，更多的用法要根據實際需求來進行開發~