ビュー開発を効率化する「ビュー・ヘルパー」
ビュー・ヘルパーとは、ビュー・スクリプトを記述する際に役立つメソッドのこと。ASP.NET MVCでは、サーバ・コントロールを利用できない代わりに、ビュー・ヘルパーを利用することで、リンクやフォーム要素の生成などをごくシンプルなコードで表現できる。
以下では、その中でも最もよく利用すると思われるフォーム、リンク系ヘルパーをまとめておく。そのほか、検証系のヘルパーについては前回の記事を参照いただきたい。また、フォーム系ヘルパーの中でもDisplayFor／EditorForメソッドについては、次回あらためて解説の予定である。
■フォームを生成する − Html.BeginFormメソッド −
BeginFormメソッドは、using命令と合わせて宣言することで、usingブロックの開始時に<form>開始タグを、ブロックの終了時に</form>終了タグを、それぞれ出力する。引数を省略した場合、<form>タグのaction属性には現在のアクションがそのままセットされる。
引数を省略した例はこれまでの回でも何度も登場しているので、以下ではもろもろの引数を指定した場合の例を見てみよう。
@using (Html.BeginForm(
"Edit", // アクション名
"Books", // コントローラ名
new { id = "978-4-7981-2344-8", flag = "1" }, // ルート・パラメータ
FormMethod.Post, // HTTPメソッド（method属性）
new { enctype = "multipart/form-data"} // そのほかの属性
)) {
……フォームの内容……
}
|
@Using Html.BeginForm(
"Edit", ' アクション名
"Books", ' コントローラ名
New With {.id = "978-4-7981-2344-8", .flag = "1"}, ' ルート・パラメータ
FormMethod.Post, ' HTTPメソッド（method属性）
New With {.enctype = "multipart/form-data"} ' そのほかの属性
)
……フォームの内容……
End Using
|
|
| リスト22 BeginFormメソッドによるフォームの生成（上：C#、下：VB） |
<form action="/Books/Edit/978-4-7981-2344-8?flag=1"
enctype="multipart/form-data" method="post">〜</form>
|
|
| リスト23 実行時にリスト22により出力されるHTMLコード |
ルート定義に含まれないパラメータを指定した場合、そのパラメータはクエリ情報として追加される点にも注意してほしい。
■ルート定義に基づいてフォームを生成する − Html.BeginRouteFormメソッド −
BeginRouteFormメソッドは、BeginFormメソッドと同じく、<form>タグを生成するためのメソッドであるが、ポスト先を（文字列ではなく）ルート・パラメータを表す匿名型として指定できる点が異なる。
以下は、リスト22のコードをBeginRouteFormメソッドで書き換えたものだ。
@using (Html.BeginRouteForm(
"Default", // ルート名
new {
action = "Edit", // アクション名
controller = "Books", // コントローラ名
id = "978-4-7981-2344-8",
flag = "1" // そのほかのパラメータ
}, // ルート・パラメータ
FormMethod.Post, // HTTPメソッド（method属性）
new { enctype = "multipart/form-data"} // そのほかの属性
)) {
……フォームの内容……
}
|
@Using Html.BeginRouteForm(
"Default", ' ルート名
New With {
.action = "Edit", ' アクション名
.controller = "Books", ' コントローラ名
.id = "978-4-7981-2344-8",
.flag = "1" ' そのほかのパラメータ
}, ' ルート・パラメータ
FormMethod.Post, ' HTTPメソッド（method属性）
New With {.enctype = "multipart/form-data"} ' そのほかの属性
)
……フォームの内容……
End Using
|
|
| リスト24 BeginRouteFormメソッドによるフォームの生成（上：C#、下：VB） |
■ラベルを生成する − Html.LabelForメソッド −
LabelForは、指定されたプロパティの表示名（DisplayName属性）や言語設定に応じて<label>タグを生成するためのメソッドだ。関連付けるプロパティは、「model => model.プロパティ名」のようにラムダ式として指定できる（これは、以降で紹介している「〜For」メソッドについて、すべて同様）。
@Html.LabelFor(model => model.Isbn)
|
@Html.LabelFor(Function(model) model.Isbn)
|
|
| リスト25 LabelForメソッドによるラベルの生成（上：C#、下：VB） |
<label for="Isbn">ISBNコード</label>
|
|
| リスト26 実行時にリスト25により出力されるHTMLコード |
■テキストボックス／テキストエリアを生成する − Html.TextBoxFor／PasswordFor／TextAreaForメソッド −
TextBoxFor／PasswordFor／TextAreaForメソッドは、それぞれ一般的なテキストボックス、パスワード入力ボックス、複数行テキストエリアを生成するためのメソッドだ。テキストボックス／テキストエリアには、プロパティの現在値が反映される。
テキストボックス：
@Html.TextBoxFor(
model => model.Title, // プロパティ
new { size = 15, maxlength = 18 } // そのほかの属性
)
パスワード入力ボックス：
@Html.PasswordFor(
model => model.Password, // プロパティ
new { size = 10, maxlength = 20 } // そのほかの属性
)
テキストエリア：
@Html.TextAreaFor(
model => model.Title, // プロパティ
10, // 行数
70, // 桁数
new { @class = "area" } //そのほかの属性
)
|
テキストボックス：
@Html.TextBoxFor(
Function(model) model.Title, ' プロパティ
New With {.size = 15, .maxlength = 18} ' そのほかの属性
)
パスワード入力ボックス：
@Html.PasswordFor(
Function(model) model.Password, ' プロパティ
New With {.size = 10, .maxlength = 20} ' そのほかの属性
)
テキストエリア：
@Html.TextAreaFor(
Function(model) model.Title, ' プロパティ
10, ' 行数
70, ' 桁数
New With { .class = "area" } ' そのほかの属性
)
|
|
| リスト27 TextBoxFor／PasswordFor／TextAreaForメソッドによるテキストボックスの生成（上：C#、下：VB） |
テキストボックス：
<input id="Title" maxlength="18" name="Title"
size="15" type="text" value="JavaScript本格入門" />
パスワード入力ボックス：
<input id="Password" maxlength="20" name="Password"
size="10" type="password" />
テキストエリア：
<textarea class="area" cols="70" id="Title" name="Title" rows="10">
JavaScript本格入門</textarea>
|
|
| リスト28 実行時にリスト27により出力されるHTMLコード |
エンティティ側で検証属性が定義されている場合には、検証パラメータを表すdata-xxxxx属性も合わせて出力される。本稿では、TextBoxFor／PasswordFor／TextAreaForメソッドがまずデフォルトで出力するコードを分かりやすくするため、これらの属性は割愛しているので注意されたい。
［注意］readonly属性、class属性などに要注意（C#の場合）
そのほかの属性としてclass、readonlyのような属性を指定する場合には要注意だ。というのも、これらのキーワードはC#の予約語であるため、そのまま指定してしまうと、エラーとなってしまうのだ。
このような属性を指定する場合は、キーワードをキーワードとして見なさないようにするため、プロパティ名の先頭に「@」を付与しなければならない（リスト27の太字部分）。
Insider.NET 記事ランキング
本日
月間
