■チェックボックス/ラジオボタンを生成する − Html.CheckBoxFor/RadioButtonForメソッド −
CheckBoxFor/RadioButtonForは、指定されたプロパティに対応するチェックボックス/ラジオボタンを生成するためのメソッドだ。checked属性の値は、プロパティ値とvalue属性の値との比較によって決定される。
チェックボックス:
@Html.CheckBoxFor(
model => model.Cd, // プロパティ
new { tabindex = 3 } // そのほかの属性
)
ラジオボタン:
@Html.RadioButtonFor(
model => model.Publish, // プロパティ
"翔泳社", // 値(value属性)
new { tabindex = 3 } // そのほかの属性
)
@Html.RadioButtonFor(
model => model.Publish, // プロパティ
"技術評論社", // 値(value属性)
new { tabindex = 3 } そのほかの属性
)
|
チェックボックス:
@Html.CheckBoxFor(
Function(model) model.Cd, ' プロパティ
New With {.tabindex = 3} ' そのほかの属性
)
ラジオボタン:
@Html.RadioButtonFor(
Function(model) model.Publish, ' プロパティ
"翔泳社", ' 値(value属性)
New With {.tabindex = 3} ' そのほかの属性
)
@Html.RadioButtonFor(
Function(model) model.Publish, ' プロパティ
"技術評論社", ' 値(value属性)
New With {.tabindex = 3} ' そのほかの属性
)
|
|
リスト29 CheckBoxFor/RadioButtonForメソッドによるチェックボックス/ラジオボタンの生成(上:C#、下:VB) |
チェックボックス:
<input id="Cd" name="Cd" tabindex="3" type="checkbox" value="true" />
<input name="Cd" type="hidden" value="false" />
ラジオボタン:
<input id="Publish" name="Publish" tabindex="3" type="radio" value="翔泳社" />
<input checked="checked" id="Publish" name="Publish" tabindex="3"
type="radio" value="技術評論社" />
|
|
リスト30 実行時にリスト29により出力されるHTMLコード |
CheckBoxForメソッドでは、本来のチェックボックスと同名の隠しフィールドを出力している点に注目だ。これはチェックボックスがチェックされなかった場合にも、チェックされなかったという情報(具体的にはfalse値)を送信するための方策だ。
こうした隠しフィールドが存在せず、かつ、チェックボックスが選択されなかった場合、ブラウザはサーバに対して特別に値を送信しない。
■選択ボックス/リストボックスを生成する − Html.DropDownListFor/ListBoxForメソッド −
DropDownListFor/ListBoxForは、指定されたプロパティに対応する選択ボックス/リストボックスを生成するためのメソッドだ。selected属性の値は、プロパティ値と選択オプションの値(SelectListItemオブジェクトのValueプロパティ)との比較によって決定される。
選択ボックス:
@Html.DropDownListFor(
model => model.Publish, // プロパティ
new SelectListItem[] {
new SelectListItem() { Value="翔泳社", Text="翔泳社" },
new SelectListItem() { Value="技術評論社", Text="技術評論社" },
new SelectListItem() { Value="秀和システム", Text="秀和システム" }
}, // オプション・リスト
"選択してください", // 空値のオプション(ラベル・テキスト)
new { @class = "list" } // そのほかの属性
)
リストボックス:
@Html.ListBoxFor(
model => model.Publish, // プロパティ
new SelectListItem[] {
new SelectListItem() { Value="翔泳社", Text="翔泳社" },
new SelectListItem() { Value="技術評論社", Text="技術評論社" },
new SelectListItem() { Value="秀和システム", Text="秀和システム" }
}, // オプション・リスト
new { size = 5 } // そのほかの属性
)
|
選択ボックス:
@Html.DropDownListFor(
Function(model) model.Publish, ' プロパティ
New SelectListItem() {
New SelectListItem() With
{.Value = "翔泳社", .Text = "翔泳社"},
New SelectListItem() With
{.Value = "技術評論社", .Text = "技術評論社"},
New SelectListItem() With
{.Value = "秀和システム", .Text = "秀和システム"}
}, ' オプション・リスト
"選択してください", ' 空値のオプション(ラベル・テキスト)
New With {.class = "list"} ' そのほかの属性
)
リストボックス:
@Html.ListBoxFor(
Function(model) model.Publish, ' プロパティ
New SelectListItem() {
New SelectListItem() With {.Value = "翔泳社", .Text = "翔泳社"},
New SelectListItem() With {.Value = "技術評論社", .Text = "技術評論社"},
New SelectListItem() With {.Value = "秀和システム", .Text = "秀和システム"}
}, ' オプション・リスト
New With {.size = 5} ' そのほかの属性
)
|
|
リスト31 DropDownListFor/ListBoxForメソッドによる選択ボックス/リストボックスの生成(上:C#、下:VB) |
選択ボックス:
<select class="list" id="Publish" name="Publish">
<option value="">選択してください</option>
<option value="翔泳社">翔泳社</option>
<option selected="selected" value="技術評論社">技術評論社</option>
<option value="秀和システム">秀和システム</option>
</select>
リストボックス:
<select id="Publish" multiple="multiple" name="Publish" size="5">
<option value="翔泳社">翔泳社</option>
<option value="技術評論社">技術評論社</option>
<option value="秀和システム">秀和システム</option>
</select>
|
|
リスト32 実行時にリスト31により出力されるHTMLコード |
リスト31では便宜上、オプション・リスト(SelectListItemオブジェクトの配列)をビュー・スクリプトにハード・コーディングしているが、あくまでこれは便宜的なコードである。一般的にはアクション側でビュー変数として用意するのが望ましい。
■隠しフィールドを生成する − HiddenForメソッド −
HiddenForメソッドは、隠しフィールドを生成するためのメソッドである。
@Html.HiddenFor(
model => model.Title, // プロパティ
new { } // そのほかの属性
)
|
@Html.HiddenFor(
Function(model) model.Title, ' プロパティ
Nothing ' そのほかの属性
)
|
|
リスト33 HiddenForメソッドによる隠しフィールドの生成(上:C#、下:VB) |
<input id="Title" name="Title" type="hidden" value="JavaScript本格入門" />
|
|
リスト34 実行時にリスト33により出力されるHTMLコード |
■モデルと関連付かないフォーム要素を生成する − TextBox/Labelメソッドなど −
TextBoxFor、LabelFor、ListBoxForなどのいわゆる「XxxxxFor」メソッドには、「For」なしのTextBox、Label、ListBoxなどのメソッドも用意されている。一般的には、XxxxxForメソッドはモデルに関連付いたフォーム要素を生成するために、Forなしのメソッドはモデルとは連携しないフォーム要素を生成するために、それぞれ利用するものと考えておけばよいだろう*3。
*3 厳密には、Forなしのメソッドでもモデル連携のフォーム要素は生成できる。しかし、Visual StudioでIntelliSense機能が利用できない、ViewBagに同名のプロパティがある場合はそちらが優先して関連付けられてしまうなどの理由から、利用すべきでない。
|
例えば以下は、keywdという名前のテキストボックスを生成する例である。
@Html.TextBox(
"keywd", // 要素名
null, // 値(value属性)
new { size = 15, maxlength = 19 } // そのほかの属性
)
|
@Html.TextBox(
"keywd", ' 要素名
Nothing, ' 値(value属性)
New With {.size = 15, .maxlength = 19} ' そのほかの属性
)
|
|
リスト35 TextBoxメソッドによるテキストボックスの生成(上:C#、下:VB) |
<input id="keywd" maxlength="18" name="keywd" size="15" type="text" value="" />
|
|
リスト36 実行時にリスト35により出力されるHTMLコード |
そのほかのForなしメソッドも、「要素名を文字列で指定する」「必要に応じて、値を指定する必要がある」などの違いがあるほかは、ほぼXxxxxForメソッドと同じ要領で利用できる。詳しい構文については、MSDNライブラリで「System.Web.Mvc.Html 名前空間」を参照してほしい。
■ハイパーリンクを生成する − Html.ActionLinkメソッド −
ActionLinkメソッドは、指定されたコントローラ/アクション名、そのほかのパラメータ値から、ハイパーリンクを生成するためのメソッドだ。
@Html.ActionLink(
"詳細", // リンク・テキスト
"Details", // アクション名
"Books", // コントローラ名
new { id = Model.Isbn }, // ルート・パラメータ
new { @class = "menu" } // そのほかの属性
)
|
@Html.ActionLink(
"詳細", ' リンク・テキスト
"Details", ' アクション名
"Books", ' コントローラ名
New With {.id = Model.Isbn}, ' ルート・パラメータ
New With {.class = "menu"} ' そのほかの属性
)
|
|
リスト37 ActionLinkメソッドによるハイパーリンクの生成(上:C#、下:VB) |
<a class="menu" href="/Books/Details/978-4-7741-4466-5">詳細</a>
|
|
リスト38 実行時にリスト37により出力されるHTMLコード |
よく似たメソッドとして、RouteLinkメソッドも用意されている。RouteLinkメソッドがActionLinkメソッドと異なる点は、リンク先を(文字列ではなく)ルート・パラメータを表す匿名オブジェクトとして指定できる点である(ちょうどBeginFormメソッドとBeginRouteFormメソッドとの違いと同じと考えれば、分かりやすいだろう)。
以下は、リスト37をRouteLinkメソッドで書き換えた例だ。
@Html.RouteLink(
"詳細", // リンク・テキスト
"Default", // ルート名
new {
action = "Details", // アクション名
controller = "Books", // コントローラ名
id = Model.Isbn // そのほかのパラメータ
}, // ルート・パラメータ
new { @class = "menu" } // そのほかの属性
)
|
@Html.RouteLink(
"詳細", ' リンク・テキスト
"Default", ' ルート名
New With {
.action = "Details", ' アクション名
.controller = "Books", ' コントローラ名
.id = Model.Isbn ' そのほかのパラメータ
}, ' ルート・パラメータ
New With {.class = "menu"} ' そのほかの属性
)
|
|
リスト39 リスト37をRouteLinkメソッドで書き換えたコード |
■
以上、今回はRazorの基本文法と、ビュー開発には欠かせないビュー・ヘルパーについて解説した。次回は、今回説明しきれなかったビュー・ヘルパーであるEditFor/DisplayForメソッドについて解説する予定である。