Použití třídy TagBuilder k vytváření pomocných rutin HTML (C#)

Stephen Walther

Stephen Walther vás seznámí s užitečnou třídou nástrojů v architektuře ASP.NET MVC s názvem TagBuilder třída. Ke snadnému vytváření značek HTML můžete použít třídu TagBuilder.

Rozhraní ASP.NET MVC obsahuje užitečnou třídu nástrojů s názvem TagBuilder třídy, kterou můžete použít při vytváření pomocných rutin HTML. TagBuilder Třída, jak naznačuje název třídy, umožňuje snadno vytvářet značky HTML. V tomto krátkém kurzu máte k dispozici přehled třídy TagBuilder a naučíte se používat tuto třídu při vytváření jednoduchého pomocníka HTML, který vykresluje značky HTML <img> .

Přehled třídy TagBuilder

Třída TagBuilder je obsažena v oboru názvů System.Web.Mvc. Má pět metod:

• AddCssClass() – umožňuje přidat do značky nový atribut class="" .
• GenerateId() – umožňuje přidat atribut id do značky. Tato metoda automaticky nahradí tečky v ID (ve výchozím nastavení jsou tečky nahrazeny podtržítky).
• MergeAttribute() – umožňuje přidat atributy do značky. Existuje několik přetížení této metody.
• SetInnerText() – umožňuje nastavit vnitřní text značky. Vnitřní text se kóduje automaticky ve formátu HTML.
• ToString() – umožňuje vykreslit značku. Můžete určit, jestli chcete vytvořit normální značku, počáteční, koncovou nebo samouzavírací značku.

Třída TagBuilder má čtyři důležité vlastnosti:

• Atributy – představuje všechny atributy značky.
• IdAttributeDotReplacement – představuje znak používaný metodou GenerateId() k nahrazení období (výchozí je podtržítko).
• InnerHTML – představuje vnitřní obsah značky. Přiřazení řetězce k této vlastnosti nezakóduje řetězec ve formátu HTML.
• TagName – představuje název značky.

Tyto metody a vlastnosti poskytují všechny základní metody a vlastnosti, které potřebujete k vytvoření značky HTML. Ve skutečnosti nemusíte používat třídu TagBuilder. Místo toho můžete použít třídu StringBuilder. Třída TagBuilder však usnadňuje váš život.

Vytvoření pomocné rutiny HTML obrázku

Při vytváření instance TagBuilder třídy, předáte název značky, kterou chcete sestavit TagBuilder konstruktoru. Dále můžete volat metody, jako jsou AddCssClass a MergeAttribute(), a upravit atributy značky. Nakonec zavoláte metodu ToString() pro vykreslení značky.

Například výpis 1 obsahuje nápovědu html obrázku. Pomocník image je implementovaný interně s TagBuilder, který představuje značku HTML <img> .

Výpis 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);
        }

    }
}

Třída v výpisu 1 obsahuje dvě statické přetížené metody s názvem Image. Při volání metody Image() můžete předat objekt, který představuje sadu atributů HTML, nebo ne.

Všimněte si, jak TagBuilder.MergeAttribute() metoda se používá k přidání jednotlivých atributů, jako je atribut src do TagBuilder. Všimněte si také, jak TagBuilder.MergeAttributes() metoda se používá k přidání kolekce atributů do TagBuilder. Metoda MergeAttributes() přijímá řetězec slovníku,parametr<objektu> . Třída RouteValueDictionary se používá k převodu objektu představujícího kolekci atributů na řetězec slovníku<, objekt>.

Po vytvoření pomocné rutiny image můžete tuto pomocnou rutinu použít v zobrazeních ASP.NET MVC stejně jako všechny ostatní standardní pomocné rutiny HTML. Zobrazení v seznamu 2 používá pomocník pro obrázek k zobrazení stejného obrázku Xboxu dvakrát (viz Obrázek 1). Pomocník Image() se nazývá s kolekcí atributů HTML i bez této kolekce.

Výpis 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>

Obrázek 01: Použití pomocné rutiny obrázku (kliknutím zobrazíte obrázek v plné velikosti)

Všimněte si, že musíte importovat obor názvů přidružený k pomocné rutině Image v horní části zobrazení Index.aspx. Pomocník se importuje s následující direktivou:

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

PředchozíDalší