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

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 zamienić 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.vb

Public Module ImageHelper

<System.Runtime.CompilerServices.Extension> _
Function Image(ByVal helper As HtmlHelper, ByVal id As String, ByVal url As String, ByVal alternateText As String) As String
    Return Image(helper, id, url, alternateText, Nothing)
End Function

<System.Runtime.CompilerServices.Extension> _
Function Image(ByVal helper As HtmlHelper, ByVal id As String, ByVal url As String, ByVal alternateText As String, ByVal htmlAttributes As Object) As String
    ' Create tag builder
    Dim 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)
End Function

End Module

Moduł w liście 1 zawiera dwie 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="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcApplication1" %>
<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 With {.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" %>

W aplikacji Visual Basic domyślna przestrzeń nazw jest taka sama jak nazwa aplikacji.

WsteczDalej