TagBuilder クラスを使用した HTML ヘルパーのビルド (VB)
投稿者: Stephen Walther
Stephen Walther が、ASP.NET MVC フレームワークの TagBuilder クラスという便利なユーティリティ クラスについて説明します。 TagBuilder クラスは、HTML タグを簡単にビルドするために使用できます。
ASP.NET MVC フレームワークには、TagBuilder クラスという便利なユーティリティ クラスが含まれていて、HTML ヘルパーのビルド時に使用できます。 TagBuilder クラスは、その名前が示すように簡単に HTML タグをビルドするために使用できます。 この簡単なチュートリアルでは、TagBuilder クラスの概要を示し、このクラスを使用して HTML <img> タグをレンダリングするシンプルな HTML ヘルパーをビルドする方法について説明します。
TagBuilder クラスの概要
TagBuilder クラスは、System.Web.Mvc 名前空間に含まれています。 これには、5 つのメソッドがあります:
- AddCssClass() – 新しい class="" 属性をタグに追加できます。
- GenerateId() – id 属性をタグに追加できます。 このメソッドは、id に含まれるピリオドを自動的に置き換えます (既定では、ピリオドはアンダースコアに置き換えられます)
- MergeAttribute() – attributes をタグに追加できます。 このメソッドには、複数のオーバーロードが存在します。
- SetInnerText() – タグの内部テキストを設定できます。 内部テキストは、自動的に HTML エンコードされます。
- ToString() – タグをレンダリングできます。 通常のタグ、開始タグ、終了タグ、または自己終了タグのうち、どれを作成するかを指定できます。
TagBuilder クラスには、4 つの重要なプロパティがあります:
- Attributes – タグのすべての属性を表します。
- IdAttributeDotReplacement – ピリオドを置き換えるために GenerateId() メソッドで使用される文字 (既定値はアンダースコア) を表します。
- InnerHTML – タグの内部コンテンツを表します。 このプロパティに文字列を割り当てても、その文字列は HTML エンコードされません。
- TagName – タグの名前を表します。
これらのメソッドとプロパティは、HTML タグをビルドするために必要になるすべての基本的なメソッドとプロパティを提供します。 TagBuilder クラスは使用しなくてもかまいません。 代わりに、StringBuilder クラスを使用できます。 ただし、TagBuilder クラスにより少し楽になります。
Image HTML ヘルパー
TagBuilder クラスのインスタンスを作成するときには、ビルドするタグの名前を TagBuilder コンストラクターに渡します。 次に、AddCssClass メソッドや MergeAttribute() メソッドなど、タグの属性を変更するメソッドを呼び出します。 最後に、タグをレンダリングする ToString() メソッドを呼び出します。
たとえば、リスト 1 には Image HTML ヘルパーが含まれています。 Image ヘルパーは、HTML <img> タグを表す TagBuilder に内部的に実装されます。
リスト 1 – Helpers\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
リスト 1 のモジュールには、Image() という名前の 2 つのオーバーロードしたメソッドが含まれています。 Image() メソッドを呼び出すときには、HTML 属性のセットを渡すこともできます。
TagBuilder.MergeAttribute() メソッドは、src 属性などの個別の属性を TagBuilder に追加するために使用されている点に注目してください。 さらに、TagBuilder.MergeAttributes() メソッドは、属性のコレクションを TagBuilder に追加するために使用されている点にも注目してください。 MergeAttributes() メソッドは、Dictionary<string,object> パラメーターを受け入れます。 RouteValueDictionary クラスは、属性のコレクションを表す Object を Dictionary<string,object> に変換するために使用されています。
Image ヘルパーの作成後には、その他の標準 HTML ヘルパーと同様に、このヘルパーを ASP.NET MVC ビューで使用できます。 リスト 2 のビューでは、Image ヘルパーを使用して Xbox の同じ画像を 2 回表示しています (図 1 を参照)。 Image() ヘルパーは、HTML 属性コレクションの指定ありとなしの両方で呼び出されています。
リスト 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>
図 01: Image ヘルパーの使用 (クリックするとフルサイズの画像が表示されます)
Index.aspx ビューの先頭で、Image ヘルパーに関連付けられた名前空間をインポートする必要がある点に注意してください。 このヘルパーは、次のディレクティブによってインポートされます:
<%@ Import Namespace="MvcApplication1" %>
Visual Basic アプリケーションの場合、既定の名前空間はアプリケーションの名前と同じです。