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

Autor Stephen Walther

Stephen Walther wprowadza do przydatnej klasy narzędzi w strukturze ASP.NET MVC o nazwie klasy TagBuilder. Można użyć klasy TagBuilder, aby łatwo tworzyć Tagi HTML.

Struktura ASP.NET MVC zawiera użyteczną klasę narzędzi o nazwie Klasa TagBuilder, której można użyć podczas tworzenia pomocników HTML. Klasa TagBuilder, jako nazwa klasy sugeruje, pozwala łatwo tworzyć Tagi HTML. W tym krótkim samouczku udostępniono Przegląd klasy TagBuilder i dowiesz się, jak używać tej klasy podczas kompilowania prostego pomocnika HTML, który renderuje Tagi <IMG> HTML.

Przegląd 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 znacznika. Ta metoda automatycznie zastępuje okresy w identyfikatorze (domyślnie okresy są zamieniane na znaki podkreślenia)
  • Mergeattribute () — umożliwia dodanie atrybutów do tagu. Istnieje wiele przeciążeń tej metody.
  • SetInnerText () — umożliwia ustawienie wewnętrznego tekstu znacznika. Tekst wewnętrzny jest automatycznie zakodowany w formacie HTML.
  • ToString () — umożliwia renderowanie znacznika. Możesz określić, czy chcesz utworzyć tag normalny, tag początkowy, tag końcowy lub tag samozamykający.

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

  • Atrybuty — reprezentuje wszystkie atrybuty znacznika.
  • IdAttributeDotReplacement — reprezentuje znak używany przez metodę GenerateId () do zastępowania kropek (wartość domyślna to podkreślenie).
  • InnerHTML — reprezentuje wewnętrzną zawartość znacznika. Przypisanie ciągu do tej właściwości nie powoduje kodowania ciągu html.
  • TagName-reprezentuje nazwę znacznika.

Te metody i właściwości zawierają wszystkie podstawowe metody i właściwości, które należy wykonać, aby utworzyć tag HTML. Nie musisz naprawdę używać klasy TagBuilder. Zamiast tego można użyć klasy StringBuilder. Jednak Klasa TagBuilder sprawia, że życie jest nieco prostsze.

Tworzenie pomocnika HTML obrazu

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

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

Lista 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);
        }

    }
}

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

Zwróć uwagę, jak Metoda TagBuilder. Mergeattribute () służy do dodawania pojedynczych atrybutów, takich jak atrybut src do TagBuilder. Należy zauważyć, że Ponadto Metoda TagBuilder. MergeAttributes () służy do dodawania kolekcji atrybutów do TagBuilder. Metoda MergeAttributes () akceptuje<słownika,> parametr obiektu. Klasa RouteValueDictionary jest używana do konwersji obiektu reprezentującego kolekcję atrybutów do słownika<ciągu,>obiektu.

Po utworzeniu pomocnika obrazów można używać pomocnika w widokach ASP.NET MVC podobnie jak w przypadku innych pomocników w języku HTML. Widok w liście 2 używa pomocnika obrazu do wyświetlenia tego samego obrazu konsoli Xbox dwa razy (patrz rysunek 1). Pomocnik obrazu () jest wywoływana zarówno z, jak i bez kolekcji atrybutów HTML.

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>

okno dialogowe Nowy projekt

Ilustracja 01. Korzystanie z pomocnika obrazu (kliknij, aby wyświetlić obraz o pełnym rozmiarze)

Należy zauważyć, że należy zaimportować przestrzeń nazw skojarzoną z pomocnikiem obrazu w górnej części widoku index. aspx. Pomocnik zostaje zaimportowany do następującej dyrektywy:

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