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" %>