Menggunakan Kelas TagBuilder untuk Membangun Pembantu HTML (C#)

oleh Stephen Walther

Stephen Walther memperkenalkan Anda ke kelas utilitas yang berguna dalam kerangka kerja MVC ASP.NET bernama kelas TagBuilder. Anda dapat menggunakan kelas TagBuilder untuk membuat tag HTML dengan mudah.

Kerangka kerja MVC ASP.NET mencakup kelas utilitas yang berguna bernama kelas TagBuilder yang dapat Anda gunakan saat membangun pembantu HTML. Kelas TagBuilder, seperti nama kelas yang disarankan, memungkinkan Anda untuk dengan mudah membangun tag HTML. Dalam tutorial singkat ini, Anda diberikan gambaran umum tentang kelas TagBuilder dan Anda mempelajari cara menggunakan kelas ini saat membangun pembantu HTML sederhana yang merender tag img> HTML<.

Gambaran umum Kelas TagBuilder

Kelas TagBuilder terkandung dalam namespace System.Web.Mvc. Ini memiliki lima metode:

• AddCssClass() - Memungkinkan Anda menambahkan atribut class="" baru ke tag.
• GenerateId() - Memungkinkan Anda menambahkan atribut id ke tag. Metode ini secara otomatis mengganti periode dalam id (secara default, titik digantikan oleh garis bawah)
• MergeAttribute() - Memungkinkan Anda menambahkan atribut ke tag. Ada beberapa kelebihan beban metode ini.
• SetInnerText() - Memungkinkan Anda mengatur teks dalam tag. Teks dalam adalah pengodean HTML secara otomatis.
• ToString() - Memungkinkan Anda merender tag. Anda dapat menentukan apakah Anda ingin membuat tag normal, tag mulai, tag akhir, atau tag penutupan mandiri.

Kelas TagBuilder memiliki empat properti penting:

• Atribut - Mewakili semua atribut tag.
• IdAttributeDotReplacement - Mewakili karakter yang digunakan oleh metode GenerateId() untuk mengganti titik (defaultnya adalah garis bawah).
• InnerHTML - Mewakili konten dalam tag. Menetapkan string ke properti ini tidak mengodekan HTML string.
• TagName - Mewakili nama tag.

Metode dan properti ini memberi Anda semua metode dan properti dasar yang Anda butuhkan untuk membangun tag HTML. Anda tidak benar-benar perlu menggunakan kelas TagBuilder. Anda dapat menggunakan kelas StringBuilder sebagai gantinya. Namun, kelas TagBuilder membuat hidup Anda sedikit lebih mudah.

Membuat Pembantu HTML Gambar

Saat Anda membuat instans kelas TagBuilder, Anda meneruskan nama tag yang ingin Anda buat ke konstruktor TagBuilder. Selanjutnya, Anda dapat memanggil metode seperti metode AddCssClass dan MergeAttribute() untuk memodifikasi atribut tag. Terakhir, Anda memanggil metode ToString() untuk merender tag.

Misalnya, Listing 1 berisi pembantu HTML Gambar. Pembantu Gambar diimplementasikan secara internal dengan TagBuilder yang mewakili tag img> HTML<.

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

    }
}

Kelas dalam Listing 1 berisi dua metode statis yang kelebihan beban bernama Image. Saat Anda memanggil metode Image(), Anda dapat meneruskan objek yang mewakili sekumpulan atribut HTML atau tidak.

Perhatikan bagaimana metode TagBuilder.MergeAttribute() digunakan untuk menambahkan atribut individual seperti atribut src ke TagBuilder. Perhatikan, selanjutnya, bagaimana metode TagBuilder.MergeAttributes() digunakan untuk menambahkan kumpulan atribut ke TagBuilder. Metode MergeAttributes() menerima string Kamus<, parameter objek> . Kelas RouteValueDictionary digunakan untuk mengonversi Objek yang mewakili kumpulan atribut menjadi string Kamus<, objek>.

Setelah membuat pembantu Gambar, Anda dapat menggunakan pembantu dalam tampilan MVC ASP.NET sama seperti pembantu HTML standar lainnya. Tampilan di Daftar 2 menggunakan pembantu Gambar untuk menampilkan gambar Xbox yang sama dua kali (lihat Gambar 1). Pembantu Image() dipanggil dengan dan tanpa koleksi atribut HTML.

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

Gambar 01: Menggunakan pembantu Gambar (Klik untuk melihat gambar ukuran penuh)

Perhatikan bahwa Anda harus mengimpor namespace yang terkait dengan pembantu Gambar di bagian atas tampilan Index.aspx. Pembantu diimpor dengan direktif berikut:

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

SebelumnyaBerikutnya