書籍転載:ASP.NET MVC 5 実践プログラミング

書籍転載:ASP.NET MVC 5 実践プログラミング

TextBoxFor/TextAreaFor/PasswordFor/ HiddenFor/RadioButtonFor/CheckBoxForメソッド[Razor]

2014年10月6日

モデル内の各プロパティのデータ型や値などの情報に基づいて、テキストボックス、ラジオボタンなどの要素を生成できる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: 列数

 具体的なコードは、以下のとおりです。

C#
public ActionResult Form()
{
  // id = 1である記事情報を取得*7
  Article article = db.Articles.Find(1);
  return View(article);
}
リスト4-3 Controllers/ViewController.cs
  • *7 Articleエンティティ(記事情報)の定義については、4-4-1項を参照してください。
Razor
 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="http://www.buildinsider.net/web/jquerymobileref" />
リスト4-4 Views/View/Form.cshtml

 コードと出力結果とを比べれば使い方は自明ですが、いくつかおさえておきたいポイントもあります。

(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 検索テキスト
email メールアドレス
url URL
tel 電話番号
number 数値
date 日付
datetime UTC(協定世界時)による日時
datetime-local ローカル日時
month
week
time 時刻
range 数値範囲(スライダー)
color
表4-2 HTML5で追加されたtype属性

 これらの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>閉じタグ)
LabelForLabel ラベルを生成
TextBoxForTextBox テキストボックスを生成
TextAreaForTextArea テキストエリア(複数行テキストボックス)を生成
PasswordForPassword パスワード入力ボックスを生成
HiddenForHidden 隠しフィールドを生成
RadioButtonForRadioButton ラジオボタンを生成
CheckBoxForCheckBox チェックボックスを生成
DropDownListForDropDownList 選択ボックスを生成
EnumDropDownListFor Enum型をもとに選択ボックスを生成
ListBoxForListBox リストボックスを生成
表4-1 フォーム関連のビューヘルパー(再掲)

※以下では、本稿の前後を合わせて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」)。

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • 日本マイクロソフト株式会社
  • グレープシティ株式会社