MVC 自定義HtmlHelper

MVC中為我們提供了一些方便生成html標簽的方法 （HtmlHelper）

例如：

<p class="site-title">@Html.ActionLink("將你的徽標放置在此處", "Index", "Home")</p>

這是一個生成a標簽  超鏈接的htmlHelper , 那看下他生成的html源文件

 <p class="site-title"><a href="/">將你的徽標放置在此處</a></p>

是不不比寫html標簽簡單多了。。。 呵呵 但是不幸的是微軟並沒有把所有的html標簽都對應有help方法 比如 img 標簽

我們今天的任務就是自定義一個HtmlHelper 實現img標簽的功能

首先，新建一個static（靜態）類 注意必須是public的 ，然后再寫一個static方法 注意此方法的方法名就是你Html. 出來的名  比如@Html.ActionLink 其中ActionLink就是方法名。

看下代碼：

 public static class MyHtmlHelper
    {
        /// <summary>
        /// 自定義一個@html.Image()
        /// </summary>
        /// <param name="helper"></param>
        /// <param name="src">src屬性</param>
        /// <param name="alt">alt屬性</param>
        /// <returns></returns>
        public static MvcHtmlString Image(this HtmlHelper helper, string src, string alt)
        {
            var builder = new TagBuilder("img");
            builder.MergeAttribute("src", src);
            builder.MergeAttribute("alt", alt);
            builder.ToString(TagRenderMode.SelfClosing);
            return MvcHtmlString.Create(builder.ToString());
        }
    }

注意：
1. 方法中的第一個參數必須為this HtmlHelper, 然后其后是此標簽需要的參數。
2. 方法的返回值為MvcHtmlString 如果您把返回值定義為String的話 那么返回的字符竄會被轉義，為了防止轉義所以將其的返回值定義為MvcHtmlString
3. 新建一個TagBuilder類 指定要生成的html標簽的名，以及其屬性。

View視圖中的代碼：

1. 引用MyHtmlHelper的命名空間

第一種方法 直接在對應的cshtml文件中寫下面代碼

@using MvcAppAndEF_Test1.Common

第二種方法 打開Views文件夾中的web.config 文件會看到如下代碼

<pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
      </namespaces>
    </pages>

將命名空間添加到這也行

下面看下自定義HtmlHelper的使用方法

<div>
        <!-- html方式寫的 -->
        <img src ="abc.jpg" alt ="abc" />
        <!-- mvc中的 htmlhelper方法寫的 -->
        @Html.Image("abc.jpg","abc")
    </div>

Result： 瀏覽器查看源 看下html生成的源代碼

 <div>
        <!-- html方式寫的 -->
        <img src ="abc.jpg" alt ="abc" />
        <!-- mvc中的 htmlhelper方法寫的 -->
        <img alt="abc" src="abc.jpg"></img>
    </div>

怎么樣 是不是很簡單呢？