しばやん雑記

Azure とメイドさんが大好きなフリーランスのプログラマーのブログ

ASP.NET MVC 3 開発入門 (16) - HTML ヘルパーを活用

ASP.NET

ASP.NET MVC 3 開発入門 - インデックス

ASP.NET MVC では WebForms のコントロールは使うことができませんが、その代わりとして HTML ヘルパーが用意されています。これまでも特に説明をせずにスキャフォールディング周りで使ってきた Html.LabelFor や Html.EditorFor は HTML ヘルパーとなります。

HTML ヘルパーの実体は HtmlHelper クラスの拡張メソッドで、ビューには HtmlHelper 型の Html プロパティが用意されていますので、これを使います。HTML ヘルパーは非常に機能が多く、複数のオーバーロードが存在していますのでまとめて説明します。

注意点

  • Route と名前が付いているメソッドはルーティングの定義時に指定する名前を利用するメソッドになります
  • 〜For で名前が付いているメソッドはラムダ式で表示などを行うプロパティを指定します

フォームを作成する

form タグを生成します。アクション・コントローラ・メソッド・ルーティングパラメータ・タグの属性を指定可能なオーバーロードが用意されています。

BeginForm と BeginRouteForm は IDisposable を返し、Dispose されたタイミングで form の閉じタグを生成しますので、一般的には using と組み合わせて利用します。その場合は using のブロック内が form タグで囲まれることになります。

using を利用しない場合は手動で EndForm メソッドを呼ぶ必要があります。

メソッド

  • BeginForm
  • BeginRouteForm
  • EndForm

利用方法

@* 現在のアクションへポストするフォームを作成する *@
@using (Html.BeginForm())
{
}

@* 指定した名前のルートで定義されているアクションへポストするフォームを作成する *@
@using (Html.BeginRouteForm("RouteName"))
{
}

リンクを作成する

a タグを作成します。アクション・コントローラ・メソッド・ルーティングパラメータ・タグの属性を指定可能なオーバーロードが用意されています。

メソッド

  • ActionLink
  • RouteLink

利用方法

@* 指定したコントローラのアクションへのリンクを生成する *@
@Html.ActionLink("Anchor Text", "ActionName", "ControllerName")

@* 指定した名前のルートで定義されているアクションへのリンクを生成する *@
@Html.RouteLink("Anchor Text", "RouteName")

@* ルーティングパラメータを指定する *@
@Html.ActionLink("Anchor Text", "ActionName", new { id = 10 })

入力フォームを作成する

プロパティの型に従って入力フォームを自動で作成します。ビューのディレクトリに EditorTemplates というディレクトリを作成し、型名を付けたビューを作成することで、出力されるフォームをカスタマイズすることが可能です。

メソッド

  • Editor
  • EditorFor
  • EditorForModel

利用方法

@* プロパティを文字列で指定する *@
@Html.Editor("Category")

@* プロパティをラムダ式で指定する *@
@Html.EditorFor(model => model.Category)

@* Model が持つプロパティのフォームを作成する *@
@Html.EditorForModel()

ラベルを表示する

アノテーションや言語設定に従ってラベルを自動で表示します。

メソッド

  • Label
  • LabelFor
  • LabelForModel

利用方法

@* プロパティを文字列で指定する *@
@Html.Label("Category")

@* プロパティをラムダ式で指定する *@
@Html.LabelFor(model => model.Category)

@* Model が持つプロパティのラベルを作成する *@
@Html.LabelForModel()

モデルデータを表示する

プロパティの型に従って自動的にデータを表示します。ビューのディレクトリに DisplayTemplates というディレクトリを作成し、型名を付けたビューを作成することで、表示形式をカスタマイズすることが可能です。

メソッド

  • Display
  • DisplayFor
  • DisplayForModel

利用方法

@* プロパティを文字列で指定する *@
@Html.Display("Category")

@* プロパティをラムダ式で指定する *@
@Html.DisplayFor(model => model.Category)

@* Model が持つプロパティを表示する *@
@Html.DisplayForModel()

チェックボックスを作成する

type 属性の値が checkbox な input タグを生成します。タグの属性を指定可能なオーバーロードが用意されています。

メソッド

  • CheckBox
  • CheckBoxFor

利用方法

@* プロパティを文字列で指定する *@
@Html.CheckBox("IsProtected")

@* プロパティをラムダ式で指定する *@
@Html.CheckBoxFor(model => model.IsProtected)

ドロップダウンリストを作成する

select タグと option タグを生成します。option は selectList パラメータで指定すると生成されます。

メソッド

  • DropDownList
  • DropDownListFor

利用方法

@* プロパティを文字列で指定する *@
@Html.DropDownList("Count", selectList)

@* プロパティをラムダ式で指定する *@
@Html.DropDownListFor(model => model.Count, selectList)

隠しデータを作成する

type 属性の値が hidden な input タグを生成します。タグの属性を指定可能なオーバーロードが用意されています。

メソッド

  • Hidden
  • HiddenFor

利用方法

@* プロパティを文字列で指定する *@
@Html.Hidden("HiddenValue")

@* プロパティをラムダ式で指定する *@
@Html.HiddenFor(model => model.HiddenValue)

リストボックスを作成する

select タグと option タグを生成します。option は selectList パラメータで指定すると生成されます。

メソッド

  • ListBox
  • ListBoxFor

利用方法

@* プロパティを文字列で指定する *@
@Html.ListBox("Count", selectList)

@* プロパティをラムダ式で指定する *@
@Html.ListBoxFor(model => model.Count, selectList)

パスワード入力ボックスを作成する

type 属性の値が password な input タグを生成します。タグの属性を指定可能なオーバーロードが用意されています。

メソッド

  • Password
  • PasswordFor

利用方法

@* プロパティを文字列で指定する *@
@Html.Password("Password")

@* プロパティをラムダ式で指定する *@
@Html.PasswordFor(model => model.Password)

ラジオボタンを作成する

type 属性の値が radio な input タグを生成します。値とタグの属性を指定可能なオーバーロードが用意されています。

メソッド

  • RadioButton
  • RadioButtonFor

利用方法

@* プロパティを文字列で指定する *@
@Html.RadioButton("Type", 1)

@* プロパティをラムダ式で指定する *@
@Html.RadioButtonFor(model => model.Type, 2)

テキストボックスを作成する

type 属性の値が text な input タグを生成します。タグの属性を指定可能なオーバーロードが用意されています。

メソッド

  • TextBox
  • TextBoxFor

利用方法

@* プロパティを文字列で指定する *@
@Html.TextBox("Body")

@* プロパティをラムダ式で指定する *@
@Html.TextBoxFor(model => model.Body)

複数行入力可能なテキストボックスを作成する

textarea タグを生成します。タグの属性を指定可能なオーバーロードが用意されています。

メソッド

  • TextArea
  • TextAreaFor

利用方法

@* プロパティを文字列で指定する *@
@Html.TextArea("Body")

@* プロパティをラムダ式で指定する *@
@Html.TextAreaFor(model => model.Body)

HTML エスケープしない

Razor は標準で全て HTML エスケープされますが、それを回避するためのメソッドです。

メソッド

  • Raw

利用方法

@* HTML エスケープせずに表示する *@
@Html.Raw(Model.Body)

エラーメッセージを表示する

メソッド

  • ValidationSummary
  • ValidationMessage
  • ValidationMessageFor

利用方法

@* 全てのプロパティのエラーを表示する *@
@Html.ValidationSummary()

@* プロパティのエラー以外を表示する *@
@Html.ValidationSummary(true)

@* プロパティを文字列で指定してエラーを表示する *@
@Html.ValidationMessage("Body")

@* プロパティを文字列で指定してエラーを表示する *@
@Html.ValidationMessageFor(model => model.Body)

ビューをインライン表示する

アクションとコントローラを指定してビューを親ビューにインラインで表示します。Action メソッドは MvcHtmlString を返すので @ を使って書くことができますが、RenderAction メソッドは直接ストリームに出力を行いますのでコードブロック内で書く必要があります。

メソッド

  • Action
  • RenderAction

利用方法

@Html.Action("Index", "Home")

@{
    Html.RenderAction("Index", "Home")
}

部分ビューを表示する

名前を指定して部分ビューを表示します。Partial メソッドは MvcHtmlString を返すので @ を使って書くことができますが、RenderPartial メソッドは直接ストリームに出力を行いますのでコードブロック内で書く必要があります。

メソッド

  • Partial
  • RenderPartial

利用方法

@Html.Partial("LogOnView")

@{
    Html.RenderPartial("LogOnView")
}

非常に長くなってしまいましたが、ASP.NET MVC 3 に含まれている殆どの HTML ヘルパーについての説明が終わりました。中には日本語の情報が少ないメソッドもありますので、参考にしていただければ幸いです。

次回は HTML ヘルパーを活用して、残していたコメントとタグの投稿機能を実装したいと思います。お疲れ様でした。