asp.net MVC - 小鸟系列之自定义HTML辅助方法

使用HTML辅助方法可以让开发View页面的过程节省不少时间，但MVC内置的HTML辅助方法有限，这时候我们可以自行扩充HTML辅助方法。

一：下面通过一个简单的例子来说明如何扩充HTML辅助方法

1. 先在项目目录下新增一个Helpers目录，并新建一个ImageHelpers类

2. ImageHelpers.cs 类添加一个Img方法

/// <summary>
/// 输出基本 &li;img>标签
/// </summary>
/// <param name="helper">HtmlHelper</param>
/// <param name="url">图片网址</param>
/// <param name="alternateText">说明文字</param>
/// <param name="title">标题文字</param>
/// <returns>string</returns>
public static MvcHtmlString Img(this HtmlHelper helper, string url,string alternateText,
<span style="white-space:pre">				</span>string title)
{
    return MvcHtmlString.Create(String.Format("<img src='{0}' alt='{1}' title='{2}'/>", 
        url, alternateText, title));
}

HTML辅助方法里回传的型别可以是简单的string字符串类型，也可以是System.Web.Mvc.MvcHtmlString型别，差别在于，通过Razor输出HTML预设就会对所有输出进行HTML编码，所以如果回传string字符串类型，其输出的内容将会被HTML编码后输出，如果回传MvcHtmlString的话，如果内容包含标签数据，那么会原封不动的输出HTML标签。所有我们这里使用MvcHtmlString

3. View中调用Img辅助方法

首先引入命名空间

@using MVC4.Helpers;

@Html.Img("http://www.baidu.com/img/bd_logo1.png", "baidu", "百度");

运行效果

这样操作会有个问题，如果我们想要控制这个图片的大小怎么办，目前我们只能通过修改 ImageHelpers.cs 类修改Img方法来达到效果，但这样明显不好。下面的例子就可以解决这个问题。

二：建立一个相对复杂点的HTML辅助方法
ASP.NET MVC 专门为了产生HTML标签的需求而设计了一个 TagBuilder 类别

1. 我们在 ImageHelpers.cs 类添加 Image 方法

public static MvcHtmlString Image(this HtmlHelper helper, string id, string url,string alternateText, 
                                  object htmlAttributes)
{ 
    //建立一个tag builder
    var builder = new TagBuilder("img");

    //赋予它id
    builder.GenerateId(id);

    //增加属性
    builder.MergeAttribute("src", url);
    builder.MergeAttribute("alt", alternateText);
    builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

    //产生
    return new MvcHtmlString(builder.ToString(TagRenderMode.SelfClosing));
}

2.View调用 Image辅助方法

引入命名空间

@using MVC4.Helpers;

@Html.Image("ImgBD", "http://www.baidu.com/img/bd_logo1.png", "百度",
    new { @class = "CsUrl", border = "4px", width = "270px" })

这时候我们看到第4个参数就非常灵活了

生成的HTML代码：