TagBuilder クラスを使用した HTML ヘルパーの作成 (C#)

[アーティクル]
05/10/2024

Stephen Walther が、TagBuilder クラスという ASP.NET MVC フレームワークの便利なユーティリティクラスについて紹介します。 TagBuilder クラスを使用すると、簡単に HTML タグを作成できます。

ASP.NET MVC フレームワークには、HTML ヘルパーを作成するときに使用できる TagBuilder クラスという便利なユーティリティクラスが含まれています。 TagBuilder クラスは、クラスの名前が示すように、HTML タグを簡単に作成することを可能にします。この短いチュートリアルでは、TagBuilder クラスの概要を説明し、HTML <img> タグをレンダリングする単純な HTML ヘルパーを作成するときにこのクラスを使用する方法を説明します。

TagBuilder クラスの概要

TagBuilder クラスは System.Web.Mvc 名前空間に含まれています。これは以下の 5 つのメソッドを持っています。

AddCssClass() - タグに新しい class="" 属性を追加できます。
GenerateId() - タグに id 属性を追加できます。このメソッドは、id 内のピリオドを自動的に置き換えます (既定では、ピリオドはアンダースコアに置き換えられます)
MergeAttribute() - タグに属性を追加できます。このメソッドには複数のオーバーロードが存在します。
SetInnerText() - タグの内部テキストを設定できます。内部テキストは自動的に HTML エンコードされます。
ToString() - タグをレンダリングできます。通常タグ、開始タグ、終了タグ、自己終了タグのうちのどれを作成したいかを指定できます。

TagBuilder クラスは、以下の 4 つの重要なプロパティを持っています。

Attributes - タグのすべての属性を表します。
IdAttributeDotReplacement - GenerateId() メソッドによってピリオドを置き換えるために使用される文字を表します (既定値はアンダースコアです)。
InnerHTML - タグの内部コンテンツを表します。このプロパティに文字列を割り当てても、その文字列は HTML エンコード "されません"。
TagName - タグの名前を表します。

これらのメソッドとプロパティによって、HTML タグを作成するために必要となる基本的なメソッドとプロパティのすべてが提供されます。 TagBuilder クラスを実際に使用する必要はありません。代わりに StringBuilder クラスを使用することもできます。しかし、TagBuilder クラスを使用した方が色々なことが少し簡単になります。

イメージ HTML ヘルパーの作成

TagBuilder クラスのインスタンスを作成する際には、作成したいタグの名前を TagBuilder コンストラクターに渡します。次に、AddCssClass や MergeAttribute() メソッドなどのメソッドを呼び出して、タグの属性を変更できます。最後に、ToString() メソッドを呼び出してタグをレンダリングします。

たとえば、リスト 1 にはイメージ HTML ヘルパーが含まれています。このイメージヘルパーは、HTML <img> タグを表す TagBuilder を内部的に使用して実装されています。

リスト 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);
        }

    }
}

リスト 1 のクラスには、Image という名前のオーバーロードされた静的メソッドが 2 つ含まれています。 Image() メソッドを呼び出す際には、HTML 属性のセットを表すオブジェクトを渡すことも、渡さないことも可能です。

src 属性などの個々の属性を TagBuilder に追加するために TagBuilder.MergeAttribute() メソッドがどのように使用されているかに注意してください。さらに、属性のコレクションを TagBuilder に追加するために TagBuilder.MergeAttributes() メソッドがどのように使用されているかに注意してください。 MergeAttributes() メソッドは、Dictionary<string,object> パラメーターを受け取ります。 RouteValueDictionary クラスは、属性のコレクションを表すオブジェクトを Dictionary<string,object> に変換するために使用されます。

イメージヘルパーを作成すると、他の標準 HTML ヘルパーと同様に、ASP.NET MVC ビュー内でそのヘルパーを使用できるようになります。リスト 2 のビューでは、イメージヘルパーを使用して同じ Xbox の画像を 2 回表示します (図 1 を参照)。 Image() ヘルパーは、HTML 属性コレクション有りと無しの両方で呼び出されています。

リスト 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>

図 01: イメージヘルパーの使用 (フルサイズの画像を表示するにはここをクリックしてください)

Index.aspx ビューの先頭でイメージヘルパーに関連付けられている名前空間をインポートする必要があることに注意してください。ヘルパーは、次のディレクティブを使用してインポートされます。

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

前へ次へ

次の方法で共有

TagBuilder クラスを使用した HTML ヘルパーの作成 (C#)

TagBuilder クラスの概要

イメージ HTML ヘルパーの作成

フィードバック

その他のリソース