HTML Yardımcıları Oluşturmak için TagBuilder Sınıfını Kullanma (C#)

tarafından Stephen Walther

Stephen Walther, tagbuilder sınıfı adlı ASP.NET MVC çerçevesinde kullanışlı bir yardımcı sınıf tanıtır. Html etiketlerini kolayca oluşturmak için TagBuilder sınıfını kullanabilirsiniz.

ASP.NET MVC çerçevesi, HTML yardımcıları oluştururken kullanabileceğiniz TagBuilder sınıfı adlı kullanışlı bir yardımcı program sınıfı içerir. Sınıfının adından da anlaşılacağı gibi TagBuilder sınıfı, HTML etiketlerini kolayca oluşturmanıza olanak tanır. Bu kısa öğreticide, TagBuilder sınıfına genel bir bakış sağlanır ve HTML <img> etiketlerini işleyen basit bir HTML yardımcısı oluştururken bu sınıfın nasıl kullanılacağını öğrenirsiniz.

TagBuilder Sınıfına Genel Bakış

TagBuilder sınıfı System.Web.Mvc ad alanında yer alır. Beş yöntemi vardır:

• AddCssClass() - Etikete yeni bir class="" özniteliği eklemenizi sağlar.
• GenerateId() - Bir etikete kimlik özniteliği eklemenizi sağlar. Bu yöntem kimlikteki dönemleri otomatik olarak değiştirir (varsayılan olarak, nokta alt çizgilerle değiştirilir)
• MergeAttribute() - Bir etikete öznitelik eklemenizi sağlar. Bu yöntemin birden çok aşırı yüklemesi vardır.
• SetInnerText() - Etiketin iç metnini ayarlamanıza olanak tanır. İç metin otomatik olarak HTML kodlamadır.
• ToString() - Etiketi işlemenizi sağlar. Normal etiket mi, başlangıç etiketi mi, bitiş etiketi mi yoksa kendi kendini kapatma etiketi mi oluşturmak istediğinizi belirtebilirsiniz.

TagBuilder sınıfının dört önemli özelliği vardır:

• Öznitelikler - Etiketin tüm özniteliklerini temsil eder.
• IdAttributeDotReplacement - Dönemleri değiştirmek için GenerateId() yöntemi tarafından kullanılan karakteri temsil eder (varsayılan değer bir alt çizgidir).
• InnerHTML - Etiketin iç içeriğini temsil eder. Bu özelliğe bir dize atamak, HTML dizeyi kodlamaz .
• TagName - Etiketin adını temsil eder.

Bu yöntemler ve özellikler, bir HTML etiketi oluşturmak için ihtiyacınız olan tüm temel yöntemleri ve özellikleri sağlar. TagBuilder sınıfını kullanmanız gerekmez. Bunun yerine bir StringBuilder sınıfı kullanabilirsiniz. Ancak TagBuilder sınıfı hayatınızı biraz daha kolaylaştırır.

Görüntü HTML Yardımcısı Oluşturma

TagBuilder sınıfının bir örneğini oluşturduğunuzda, oluşturmak istediğiniz etiketin adını TagBuilder oluşturucusununa geçirirsiniz. Ardından, etiketin özniteliklerini değiştirmek için AddCssClass ve MergeAttribute() yöntemleri gibi yöntemleri çağırabilirsiniz. Son olarak, etiketi işlemek için ToString() yöntemini çağırırsınız.

Örneğin, Liste 1 bir Resim HTML yardımcısı içerir. Görüntü yardımcısı, BIR HTML <img> etiketini temsil eden bir TagBuilder ile dahili olarak uygulanır.

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

    }
}

Listing 1'deki sınıfı Image adlı iki statik aşırı yüklenmiş yöntem içerir. Image() yöntemini çağırdığınızda, html öznitelikleri kümesini temsil eden veya olmayan bir nesne geçirebilirsiniz.

TagBuilder.MergeAttribute() yönteminin TagBuilder'a src özniteliği gibi tek tek öznitelikleri eklemek için nasıl kullanıldığına dikkat edin. Ayrıca TagBuilder.MergeAttributes() yönteminin TagBuilder'a öznitelik koleksiyonu eklemek için nasıl kullanıldığına da dikkat edin. MergeAttributes() yöntemi Dictionary<string,object> parametresini kabul eder. RouteValueDictionary sınıfı, öznitelik koleksiyonunu temsil eden Object'i bir Sözlük<dizesine(object>) dönüştürmek için kullanılır.

Görüntü yardımcısını oluşturduktan sonra, diğer standart HTML yardımcıları gibi ASP.NET MVC görünümlerinizde yardımcıyı kullanabilirsiniz. Liste 2'deki görünümde, Bir Xbox'ın aynı görüntüsünü iki kez görüntülemek için Görüntü yardımcısı kullanılır (bkz. Şekil 1). Image() yardımcı, HTML öznitelik koleksiyonu ile ve olmadan çağrılır.

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

Şekil 01: Görüntü yardımcısını kullanma (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Index.aspx görünümünün üst kısmındaki Görüntü yardımcısı ile ilişkili ad alanını içeri aktarmanız gerektiğine dikkat edin. Yardımcı aşağıdaki yönergeyle içeri aktarılır:

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

ÖncekiSonraki