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>

怎么样 是不是很简单呢？