Używanie klasy TagBuilder do kompilowania pomocników HTML (C#)

Autor: Stephen Walther

Stephen Walther przedstawia przydatną klasę narzędziową w strukturze ASP.NET MVC o nazwie klasa TagBuilder. Możesz użyć klasy TagBuilder, aby łatwo tworzyć tagi HTML.

Struktura ASP.NET MVC zawiera przydatną klasę narzędzi o nazwie klasę TagBuilder, której można użyć podczas kompilowania pomocników HTML. Klasa TagBuilder, jak sugeruje nazwa klasy, umożliwia łatwe kompilowanie tagów HTML. W tym krótkim samouczku przedstawiono omówienie klasy TagBuilder i dowiesz się, jak używać tej klasy podczas tworzenia prostego pomocnika HTML, który renderuje tagi HTML <img> .

Omówienie klasy TagBuilder

Klasa TagBuilder jest zawarta w przestrzeni nazw System.Web.Mvc. Ma pięć metod:

• AddCssClass() — umożliwia dodanie nowego atrybutu class="" do tagu.
• GenerateId() — umożliwia dodanie atrybutu id do tagu. Ta metoda automatycznie zastępuje kropki w identyfikatorze (domyślnie kropki są zastępowane przez podkreślenia)
• MergeAttribute() — umożliwia dodawanie atrybutów do tagu. Istnieje wiele przeciążeń tej metody.
• SetInnerText() — umożliwia ustawienie wewnętrznego tekstu tagu. Tekst wewnętrzny jest kodowany automatycznie w formacie HTML.
• ToString() — umożliwia renderowanie tagu. Możesz określić, czy chcesz utworzyć normalny tag, tag startowy, tag końcowy, czy tag samodzielnie zamykający.

Klasa TagBuilder ma cztery ważne właściwości:

• Atrybuty — reprezentuje wszystkie atrybuty tagu.
• IdAttributeDotReplacement — reprezentuje znak używany przez metodę GenerateId(), aby zastąpić kropki (wartość domyślna to podkreślenie).
• InnerHTML — reprezentuje wewnętrzną zawartość tagu. Przypisanie ciągu do tej właściwości nie powoduje zakodowania ciągu w języku HTML.
• TagName — reprezentuje nazwę tagu.

Te metody i właściwości zapewniają wszystkie podstawowe metody i właściwości potrzebne do utworzenia tagu HTML. Nie musisz używać klasy TagBuilder. Zamiast tego można użyć klasy StringBuilder. Jednak klasa TagBuilder sprawia, że twoje życie jest nieco łatwiejsze.

Tworzenie pomocnika HTML obrazu

Podczas tworzenia wystąpienia klasy TagBuilder przekazujesz nazwę tagu, który chcesz skompilować do konstruktora TagBuilder. Następnie można wywołać metody, takie jak AddCssClass i MergeAttribute(), aby zmodyfikować atrybuty tagu. Na koniec wywołasz metodę ToString(), aby renderować tag.

Na przykład lista 1 zawiera pomocnika HTML obrazu. Pomocnik obrazu jest implementowany wewnętrznie za pomocą narzędzia TagBuilder, który reprezentuje tag img> HTML<.

Lista 1 — Pomocnicy\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);
        }

    }
}

Klasa w liście 1 zawiera dwie statyczne przeciążone metody o nazwie Image. Po wywołaniu metody Image() można przekazać obiekt reprezentujący zestaw atrybutów HTML lub nie.

Zwróć uwagę, że metoda TagBuilder.MergeAttribute() służy do dodawania poszczególnych atrybutów, takich jak atrybut src do narzędzia TagBuilder. Zwróć uwagę, że metoda TagBuilder.MergeAttributes() służy do dodawania kolekcji atrybutów do narzędzia TagBuilder. Metoda MergeAttributes() akceptuje ciąg słownika,parametr<obiektu> . Klasa RouteValueDictionary służy do konwertowania obiektu reprezentującego kolekcję atrybutów na ciąg słownika,obiekt<>.

Po utworzeniu pomocnika obrazów możesz użyć pomocnika w widokach ASP.NET MVC tak samo jak w przypadku innych standardowych pomocników HTML. Widok w liście 2 używa pomocnika Obraz do wyświetlania tego samego obrazu konsoli Xbox dwa razy (zobacz Rysunek 1). Pomocnik Image() jest wywoływany zarówno z kolekcją atrybutów HTML, jak i bez tej kolekcji.

Lista 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>

Rysunek 01. Używanie pomocnika obrazów (kliknij, aby wyświetlić obraz pełnowymiarowy)

Zwróć uwagę, że należy zaimportować przestrzeń nazw skojarzona z pomocnikiem obrazów w górnej części widoku Index.aspx. Pomocnik jest importowany z następującą dyrektywą:

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

WsteczDalej