書籍転載：ASP.NET MVC 5 実践プログラミング
選択ボックス／リストボックスを生成する - DropDownListFor／ListBoxForメソッド［Razor］
DropDownListFor／ListBoxForメソッドを使って、単一選択式の選択ボックスや複数選択式のリストボックスを生成する方法を解説。書籍転載の7本目（基礎編「4-2-4」）。
書籍転載について
本コーナーは、秀和システム発行の書籍『ASP.NET MVC 5 実践プログラミング』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。
『ASP.NET MVC 5 実践プログラミング』の詳細や購入は秀和システムのサイトや目次ページをご覧ください。
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
4-2-4 選択ボックス／リストボックスを生成する - DropDownListFor／ListBoxForメソッド
DropDownListForメソッドは単一選択式の選択ボックスを、ListBoxForメソッドは複数選択式のリストボックスを、それぞれ生成します。いずれのメソッドも<select>要素を出力しますが、ListBoxForメソッドではmultiple属性を出力するという点が異なります。
言いかえると、ListBoxForメソッドを使った場合、自動的に複数選択可能なリストボックスが生成されるということです。「単一」選択式のリストボックスを生成するには、（ListBoxForメソッドではなく）DropDownListForメソッドを使って、自分で明示的にsize属性を指定する必要があります。
【構文】DropDownListFor／ListBoxForメソッド
MvcHtmlString DropDownListFor(Expression<Func<TModel, TProperty>> expression, IEnumerable
MvcHtmlString ListBoxFor(Expression<Func<TModel, TProperty>> expression, IEnumerable
- TModel： モデルの型
- TProperty： 値の型
- expression： プロパティを識別する式
- selectList： 選択リスト
- optionLabel： 空項目の表示テキスト
- htmlAttributes： その他の属性
では、具体的なコードの例を見てみましょう。
|
public ActionResult Select()
{
// 選択ボックスのオプションを準備
ViewBag.SelectOptions = new SelectListItem[] {
new SelectListItem() { Value="jQuery Tips", Text="jQuery Tips" },
new SelectListItem() { Value="jQuery リファレンス ", Text="jQuery リファレンス " },
new SelectListItem() { Value="jQuery サンプル集 ", Text="jQuery サンプル集 " }
};
// リストボックスのオプションを準備
ViewBag.ListOptions = new SelectListItem[] {
new SelectListItem() { Value=" 絶品！ ", Text=" 絶品！ " },
new SelectListItem() { Value=" 面白かった ", Text=" 面白かった " },
new SelectListItem() { Value=" 可もなく不可もなく ", Text=" 可もなく不可もなく " },
new SelectListItem() { Value=" イマイチ！ ", Text=" イマイチ！ " }
};
return View();
}
|
|
1
2
3
4
5
6
7
8
9
10
→
17
18
19
20
21
22
23
→
|
@model MvcView.Models.Article
...中略...
選択ボックス：
@Html.DropDownListFor(
model => model.Title, // プロパティ
(IEnumerable<SelectListItem>)ViewBag.SelectOptions, // 選択オプション
" 選択してください ", // 空オプション
new { @class = "title_list" } // その他の属性
) <br />
<select class="title_list" id="Title" name="Title">
<option value="">選択してください</option>
<option value="jQuery Tips">jQuery Tips</option>
<option value="jQuery リファレンス">jQuery リファレンス</option>
<option value="jQuery サンプル集">jQuery サンプル集</option>
</select>
リストボックス：
@Html.ListBoxFor(
model => model.Comments, // プロパティ
(IEnumerable<SelectListItem>)ViewBag.ListOptions, // 選択オプション
new { @class = "comment_list" } // その他の属性
)
<select class="comment_list" id="Comments" multiple="multiple" name="Comments">
<option value="絶品！">絶品！</option>
<option value="面白かった">面白かった</option>
<option value="可もなく不可もなく">可もなく不可もなく</option>
<option value="イマイチ！">イマイチ！</option>
</select>
|
選択オプションを表すのはSelectListItemオブジェクトの役割です。
| プロパティ | 概要 |
|---|---|
| Text | 表示テキスト（<option>要素配下のテキスト） |
| Value | 値（<option>要素のvalue属性） |
| Selected | 選択状態か（<option>要素のselected属性） |
Selectedプロパティは、データモデルのプロパティ値と選択オプションの値（Valueプロパティ）との比較によって決まりますので、明示的に設定する必要はありません。
サンプルでは、選択オプションをコントローラーで準備し、ビュー変数SelectOptions／ListOptions経由で引き渡ししていますが、もちろん、以下のようにビューの中でもまとめて宣言しても構いません*10。
- *10 ただし、ビューの見通しは悪くなります。準備できるものは、できるだけアクション側で準備しておくのがベターです。
|
@Html.DropDownListFor(
model => model.Title,
new SelectListItem[] {
new SelectListItem() { Value="jQuery Tips", Text="jQuery Tips" },
new SelectListItem() { Value="jQuery リファレンス ", Text="jQuery リファレンス " },
new SelectListItem() { Value="jQuery サンプル集 ", Text="jQuery サンプル集 " }
},
"選択してください",
new { @class = "title_list" }
)
|
なお、ListBoxForメソッドの引数expression（プロパティ）は、IEnumerable型でなければならない点に注意してください。冒頭触れたように、リストボックスはデフォルトで複数の選択を許可されているからです。
| メソッド | 概要 |
|---|---|
| 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回分（第5回～第9回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
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」）。
9. ASP.NET MVC 5.2： 選択ボックスの選択肢をグループ化する - SelectListクラス［Razor］
ASP.NET MVC 5.2以降。Razorで、選択肢をグルーピングした選択ボックスを生成するにはSelectListクラスを使用する。その使い方を解説。書籍転載の9本目（基礎編「4-2-6」）。
