Использование класса TagBuilder для создания вспомогательных средств HTML (C#)

Стивен Уолтер

Стивен Вальтер знакомит вас с полезным служебным классом в ASP.NET платформе MVC с именем Класс TagBuilder. Класс TagBuilder можно использовать для простого создания HTML-тегов.

Платформа MVC ASP.NET включает полезный служебный класс с именем Класс TagBuilder, который можно использовать при создании вспомогательных функций HTML. Класс TagBuilder, как следует из названия класса, позволяет легко создавать теги HTML. В этом кратком руководстве представлен обзор класса TagBuilder и вы узнаете, как использовать этот класс при создании простого вспомогательного средства HTML, который отрисовывает теги HTML <img> .

Обзор класса TagBuilder

Класс TagBuilder содержится в пространстве имен System.Web.Mvc. Он состоит из пяти методов:

• AddCssClass() — позволяет добавить новый атрибут class="" в тег.
• GenerateId() — позволяет добавить атрибут id в тег. Этот метод автоматически заменяет точки в идентификаторе (по умолчанию точки заменяются символами подчеркивания).
• MergeAttribute() — позволяет добавлять атрибуты в тег. Этот метод имеет несколько перегрузок.
• SetInnerText() — позволяет задать внутренний текст тега. Внутренний текст кодируется автоматически.
• ToString() — позволяет отображать тег. Вы можете указать, нужно ли создать обычный тег, начальный тег, конечный тег или самозакрывающийся тег.

Класс TagBuilder имеет четыре важных свойства:

• Атрибуты — представляет все атрибуты тега.
• IdAttributeDotReplacement — представляет символ, используемый методом GenerateId() для замены точек (по умолчанию используется символ подчеркивания).
• InnerHTML — представляет внутреннее содержимое тега. Назначение строки этому свойству не приводит к кодированию строки в ФОРМАТЕ HTML.
• TagName — представляет имя тега.

Эти методы и свойства предоставляют все основные методы и свойства, необходимые для создания HTML-тега. Вам не нужно использовать класс TagBuilder. Вместо этого можно использовать класс StringBuilder. Тем не менее, класс TagBuilder делает вашу жизнь немного проще.

Создание вспомогательной функции HTML изображения

При создании экземпляра класса TagBuilder передается имя тега, который требуется выполнить сборку, конструктору TagBuilder. Затем можно вызвать такие методы, как Методы AddCssClass и MergeAttribute(), чтобы изменить атрибуты тега. Наконец, вызывается метод ToString() для отрисовки тега.

Например, в листинге 1 содержится вспомогатель HTML изображения. Вспомогательное средство изображений реализуется внутри с помощью TagBuilder, представляющего html-тег <img> .

Листинг 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. Обратите внимание, что метод TagBuilder.MergeAttributes() используется для добавления коллекции атрибутов в TagBuilder. Метод MergeAttributes() принимает строку Dictionary<, параметр object> . Класс RouteValueDictionary используется для преобразования объекта, представляющего коллекцию атрибутов, в строку Dictionary,object<>.

После создания вспомогательного средства изображений его можно использовать в ASP.NET представлениях MVC так же, как и другие стандартные вспомогательные функции HTML. В представлении в листинге 2 используется вспомогатель изображений для дваждыго отображения одного и того же изображения Xbox (см. рис. 1). Вспомогатель Image() вызывается как с коллекцией атрибутов 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>

Рис. 01. Использование вспомогательного средства "Изображение" (щелкните для просмотра полноразмерного изображения)

Обратите внимание, что необходимо импортировать пространство имен, связанное со вспомогательной службой image в верхней части представления Index.aspx. Вспомогатель импортируется с помощью следующей директивы:

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

НазадВперед