Asp.Net MVC 视图(使用TagBuilder类创建HTML Helpers)

Asp.Net MVC 视图(使用TagBuilder类创建HTML Helpers)

ASP.NET MVC框架包含了一个有用的实用工具类，叫做TagBuilder类，你可以在创建HTML helpers的时候使用它。TagBuilder类，如其类名所暗示的，允许你轻松地创建HTML标签。在这个简短的教程中，将会为你提供一个TagBuilder类的概览，并且会学习到在创建一个简单的、呈现HTML<img>标签的HTML Helper时，如何来使用这个类。

1.TagBuilder类概览

TagBuilder类包含在System.Web.Mvc命名空间中。它含有5个方法：

• AddCssClass() – 允许你向标签添加一个新的 class = "" 属性。
• GenerateId() - 允许你为标签添加一个id属性。这个方法自动替换id中的句点（默认情况下，句点将会替换为下划线）。
• MergeAttribute() - 允许你为标签添加属性。这个方法拥有大量的重载。
• SetInnerText() - 允许你设置标签内部的文本。内部文本自动进行了HTML编码。
• ToString() - 允许你呈现标签。你可以指定是否想要创建一个正常的标签、一个开始标签、一个结束标签，或者一个自闭合（self-closing）标签。

TagBuilder类拥有四个重要的属性：

• Attributes - 代表这个标签的所有属性。
• IdAttributeDotReplacement - 代表GenerateId()方法所使用的，用来替代句点的字符（默认是下划线）。
• InnerHTML - 代表着标签内部的内容。将一个字符串赋值给这个属性，并不会对这个字符进行HTML编码。
• TagName - 代表着这个标签的名称。

这些方法和属性为你提供了所有的基础方法和属性，你需要使用它们来构建一个HTML标签。你并不是一定要使用TagBuilder类。你也可以使用StringBuilder类。然而，TagBuilder类将会让你的生活更加轻松一点儿。

2.创建一个Image HTML helper

当你创建一个TagBuilder类的实例的时候，你将想要创建的标签的名字传递给TagBuilder构造函数。接下来，你可以调用像AddCssClass()和MergeAttribute()这样的方法来更改标签的属性。最后，你调用ToString()方法来呈现标签。

举个例子，代码清单1包含了一个Image HTML helper。Image helper内部是由一个代表着HTML <img>标签的TagBuilder实现的。

代码清单1 - Helpers\ImageHelper.cs

using System.Web.Mvc;
using System.Web.Routing;

namespace MvcApplication1.Helpers
{
    public static class ImageHelper
    {
        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)
        {
            // Create tag builder
            var builder = new TagBuilder("img");
           
            // Create valid id
            builder.GenerateId(id);

            // Add attributes
            builder.MergeAttribute("src", url);
            builder.MergeAttribute("alt", alternateText);
            builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));

            // Render tag
            return builder.ToString(TagRenderMode.SelfClosing);
        }

    }
}

代码清单1中的类包含两个静态的重载方法，叫做Image。当你调用Image()方法时，你可以传递一个对象，该对象代表一系列的HTML属性。

注意到TagBuilder.MergeAttribute方法是如何用来添加独立属性，例如src 属性，到TagBuilder的。注意，除此以外，MergeAttributes()方法是如何添加属性集合到TagBuilder的。MergeAttributes()方法接受一个Dictionary<string, object>参数。RouteValueDictionary类用于将代表着属性集合的对象转换为一个Dictionary<string, object>。

在你创建好了Image helper之后，你可以再你的ASP.NET MVC视图中使用这个helper，就像使用其他任何标准的HTML helpers一样。代码清单2中的视图使用了这个Image helper来显示两次同一Xbox图片。调用Image()helper时含有或者不含有HTML属性集合。

代码清单2 - Home\Index.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1.Helpers" %>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

    <!-- Calling helper without HTML attributes -->
    <%= Html.Image("img1", ResolveUrl("~/Content/XBox.jpg"), "XBox Console") %>

    <!-- Calling helper with HTML attributes -->
    <%= Html.Image("img1", ResolveUrl("~/Content/XBox.jpg"), "XBox Console", new {border="4px"})%>

</asp:Content>

图1：使用Image Helper

注意到你必须在Index.aspx视图的顶部引入与Image helper关联的命名空间。helper使用下面的指示符进行了引入：

<%@ Import Namespace="MvcApplication1.Helpers" %>