書籍転載：ASP.NET MVC 5 実践プログラミング
TextBoxFor／TextAreaFor／PasswordFor／ HiddenFor／RadioButtonFor／CheckBoxForメソッド［Razor］
モデル内の各プロパティのデータ型や値などの情報に基づいて、テキストボックス、ラジオボタンなどの要素を生成できるXxxxxForメソッドの使い方を解説。書籍転載の6本目（基礎編「4-2-3」）。
書籍転載について
本コーナーは、秀和システム発行の書籍『ASP.NET MVC 5 実践プログラミング』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。
『ASP.NET MVC 5 実践プログラミング』の詳細や購入は秀和システムのサイトや目次ページをご覧ください。
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
4-2-3 モデルに関連付いた<input>、<textarea>要素を生成する - XxxxxForメソッド
XxxxxForメソッドを利用することで、モデル（プロパティ）におけるデータ型、値などの情報に基づいて、テキストボックス、ラジオボタンなどの要素を生成できます。型付けされたビューで、入力フォームを生成するために利用します。
構文はほとんど同じなので、ここではまとめて構文、サンプルと確認してみましょう。
【構文】XxxxxForメソッド
MvcHtmlString TextBoxFor(Expression<Func<TModel, TProperty>> expression [,Object htmlAttributes] [,string format [,Object htmlAttributes]])
MvcHtmlString PasswordFor(Expression<Func<TModel, TProperty>> expression [,Object htmlAttributes])
MvcHtmlString CheckBoxFor(Expression<Func<TModel, TProperty>> expression [,Object htmlAttributes])
MvcHtmlString RadioButtonFor(Expression<Func<TModel, TProperty>> expression [,Object htmlAttributes])
MvcHtmlString HiddenFor(Expression<Func<TModel, TProperty>> expression [,Object htmlAttributes])
MvcHtmlString TextAreaFor(Expression<Func<TModel, TProperty>> expression [,int rows, int columns] [,Object htmlAttributes])
- TModel： モデルの型
- TProperty： 値の型
- expression： プロパティを識別する式
- htmlAttributes： HTML属性
- format： 入力書式*6
- rows： 行数
- columns： 列数
- *6 「{0:d}」（短い日付）のような書式文字列で指定します。詳しくは、以下のページなどを参照してください。
「MSDN： 標準の日付と時刻の書式指定文字列」
具体的なコードは、以下のとおりです。
|
public ActionResult Form()
{
// id = 1である記事情報を取得*7
Article article = db.Articles.Find(1);
return View(article);
}
|
- *7 Articleエンティティ（記事情報）の定義については、4-4-1項を参照してください。
|
1
2
3
4
5
6
7
8
→
11
12
13
14
15
16
→
18
19
20
21
22
23
→
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
→
48
49
50
51
52
→
54
55
56
57
58
59
60
61
→
64
65
66
67
68
69
→
|
@model MvcView.Models.Article
...中略...
テキストボックス：
@Html.TextBoxFor(
model => model.Title, // プロパティ
new { @readonly = "readonly", size = 30, maxlength = 40 } // その他の属性
) <br />
<input id="Title" maxlength="40" name="Title" readonly="readonly" size="30"
type="text" value="jQuery Mobile 逆引きリファレンス" />
パスワードボックス：
@Html.PasswordFor(
model => model.Title, // プロパティ
new { size = 30, maxlength = 40 } // その他の属性
) <br />
<input id="Title" maxlength="40" name="Title" size="30" type="password" />
チェックボックス：
@Html.CheckBoxFor(
model => model.Released, // プロパティ
new { tabindex = 1 } // その他の属性
) <br />
<input checked="checked" ... id="Released" name="Released" tabindex="1"
type= "checkbox" value="true" /><input name="Released" type="hidden" value="false" />
ラジオボタン：
<label>
@Html.RadioButtonFor(
model => model.Title, // プロパティ
"jQuery TIPS", // 値
new { tabindex = 2 } // その他の属性
)
jQuery TIPS</label>
<label>
@Html.RadioButtonFor(
model => model.Title, // プロパティ
"jQuery リファレンス", // 値
new { tabindex = 3 } // その他の属性
)
jQuery リファレンス</label><br />
<label>
<input id="Title" name="Title" tabindex="2" type="radio" value="jQuery TIPS" />
jQuery TIPS</label>
<label>
<input id="Title" name="Title" tabindex="3" type="radio"
value="jQuery リファレンス" />jQuery リファレンス</label>
隠しフィールド：
@Html.HiddenFor(
model => model.Title // プロパティ
) <br />
<input id="Title" name="Title" type="hidden" value="jQuery Mobile 逆引きリファレンス" />
テキストエリア：
@Html.TextAreaFor(
model => model.Description, // プロパティ
5, // 行数
80, // 桁数
new { @class = "desc" } // その他の属性
) <br />
<textarea class="desc" cols="80" id="Description" name="Description" rows= "5">
jQuery Mobileの基本機能を目的別リファレンスの形式でまとめます。</textarea>
テキストボックス（URL）：
@Html.TextBoxFor(
model => model.Url, // プロパティ
new { size = 30, maxlength = 40, type = "url" } // その他の属性
)
<input id="Url" maxlength="40" name="Url" size="30" type="url"
value="https://www.buildinsider.net/web/jquerymobileref" />
|
コードと出力結果とを比べれば使い方は自明ですが、いくつかおさえておきたいポイントもあります。
（1）引数expressionは実在するプロパティであること
引数expressionには、「m => m.プロパティ」のようなラムダ式を指定します。この際、mはビューに関連付いたモデルを表していますので*8、当然、「m.プロパティ」は実在していることが前提です。これによって、それぞれの入力要素には、その時点でのプロパティ値が自動的に反映されます。
- *8 型付けされたヘルパーと呼ばれる所以です。
サンプルでは、便宜上（コンパイルエラーとならないように）、m.Titleのようなプロパティを指定していますが、実際には内容に応じたプロパティを割り当ててください。
（2）予約語を含んだ属性に要注意
その他の属性は、BeginForm／BeginRouteFormメソッドと同じく匿名型として指定できます。匿名型による指定はこれまでにも見てきた通りですが、readonlyやclassなどの属性を指定する場合には要注意です。というのも、readonly／class属性はC#の予約語であるため、そのまま指定しまうと、エラーになってしまうのです。
このような属性を指定する場合には、プロパティ名の頭に「@」を付与します（太字の部分）。これによって、readonlyやclassといったキーワードをキーワードとして見なさないようになるため、readonly／class属性も正しく出力できるようになります。
（3）CheckBoxForメソッドは2つの<input>タグを出力する
CheckBoxForメソッドは、本来の<input type="checkbox">要素と、同名の<input type="hidden">要素とを出力します。これはチェックボックスがチェックされなかった場合にも、チェックされなかったという情報（具体的にはfalse値）をサーバーに送信するための方策です。隠しフィールドが存在せず、かつ、チェックボックスがチェックされなかった場合、ブラウザーはサーバーに対してなんら値を送信しません。
（4）HTML5対応の<input>要素を生成する
HTML5では、さまざまな入力型（type属性）が追加されました。具体的な設定値は、以下のとおりです。
| type属性 | 概要 |
|---|---|
| search | 検索テキスト |
| メールアドレス | |
| url | URL |
| tel | 電話番号 |
| number | 数値 |
| date | 日付 |
| datetime | UTC（協定世界時）による日時 |
| datetime-local | ローカル日時 |
| month | 月 |
| week | 週 |
| time | 時刻 |
| range | 数値範囲（スライダー） |
| color | 色 |
これらのtype属性を利用するには、TextBoxForメソッドの引数htmlAttributesで明示的に指定してください*9。TextBoxForメソッドはデフォルトで<input type="text">要素を出力しますが、これでtype属性を上書きできます。
- *9 あるいは、EditorForメソッドを利用することでも、データ型に応じた<input>要素を生成できます。詳しくは4-4節も参照してください。
ただし、TextBoxFor／PasswordFor／TextAreaFor／CheckBoxFor／RadioButtonFor／HiddenForなどのメソッドをビュースクリプトで直接利用する状況はあまり多くはないでしょう。3-2-1項（※転載対象外）でも触れたように、まずはモデルに応じて適切な出力を生成できるEditorForメソッドを利用すべきだからです。TextBoxFor、RadioButtonForなど、個別のビューヘルパーは、専らEditorForメソッドのテンプレートを生成する際に利用します。テンプレート設計について詳しくは、4-4-2項で改めます。
| メソッド | 概要 |
|---|---|
| BeginForm | フォームを生成（<form>タグ） |
| BeginRouteForm | フォームを生成（<form>タグ。ルートパラメーターで指定可能） |
| EndForm | フォームを終了（</form>閉じタグ） |
| LabelFor／Label | ラベルを生成 |
| TextBoxFor／TextBox | テキストボックスを生成 |
| TextAreaFor／TextArea | テキストエリア（複数行テキストボックス）を生成 |
| PasswordFor／Password | パスワード入力ボックスを生成 |
| HiddenFor／Hidden | 隠しフィールドを生成 |
| RadioButtonFor／RadioButton | ラジオボタンを生成 |
| CheckBoxFor／CheckBox | チェックボックスを生成 |
| DropDownListFor／DropDownList | 選択ボックスを生成 |
| EnumDropDownListFor | Enum型をもとに選択ボックスを生成 |
| ListBoxFor／ListBox | リストボックスを生成 |
※以下では、本稿の前後を合わせて5回分（第4回～第8回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
4. フォームを生成する - BeginFormメソッド［Razor］
＜form＞要素を生成するには、標準のビューヘルパーとして提供されているBeginFormメソッドが便利だ。その使い方を解説。書籍転載の4本目（基礎編「4-2-1」）。
5. ルート定義からフォームを生成する - BeginRouteFormメソッド［Razor］
ポスト先のルートパラメーターを指定した＜form＞要素を生成できるBeginRouteFormメソッドの使い方を解説。書籍転載の5本目（基礎編「4-2-2」）。
6. 【現在、表示中】≫ TextBoxFor／TextAreaFor／PasswordFor／ HiddenFor／RadioButtonFor／CheckBoxForメソッド［Razor］
モデル内の各プロパティのデータ型や値などの情報に基づいて、テキストボックス、ラジオボタンなどの要素を生成できるXxxxxForメソッドの使い方を解説。書籍転載の6本目（基礎編「4-2-3」）。
7. 選択ボックス／リストボックスを生成する - DropDownListFor／ListBoxForメソッド［Razor］
DropDownListFor／ListBoxForメソッドを使って、単一選択式の選択ボックスや複数選択式のリストボックスを生成する方法を解説。書籍転載の7本目（基礎編「4-2-4」）。
8. ASP.NET MVC 5.1： 列挙型から選択ボックスを生成する - EnumDropDownListメソッド［Razor］
ASP.NET MVC 5.1以降。列挙型の情報をもとに選択ボックスを生成するEnumDropDownListメソッドの使い方を解説。書籍転載の8本目（基礎編「4-2-5」）。
