[译]Asp.Net MVC 视图(使用TagBuilder类创建HTML Helpers) - Part.4

来源：http://www.cnblogs.com/JimmyZhang/archive/2009/02/08/1371819.html 张子阳

原文链接：http://www.asp.net/learn/mvc/tutorial-04-cs.aspx

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 - HelpersImageHelper.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 - HomeIndex.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" %>