Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
書籍転載:ASP.NET MVC 5 実践プログラミング

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

選択ボックス/リストボックスを生成する - DropDownListFor/ListBoxForメソッド[Razor]

2014年10月7日

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 selectList [,String optionLabel] [,Object htmlAttributes])

MvcHtmlString ListBoxFor(Expression<Func<TModel, TProperty>> expression, IEnumerable selectList [,Object htmlAttributes])

  • TModel: モデルの型
  • TProperty: 値の型
  • expression: プロパティを識別する式
  • selectList: 選択リスト
  • optionLabel: 空項目の表示テキスト
  • htmlAttributes: その他の属性

 では、具体的なコードの例を見てみましょう。

C#
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();
}
リスト4-5 Controllers/ViewController.cs
Razor
 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>
リスト4-6 Views/View/Select.cshtml

 選択オプションを表すのはSelectListItemオブジェクトの役割です。

プロパティ概要
Text 表示テキスト(<option>要素配下のテキスト)
Value 値(<option>要素のvalue属性)
Selected 選択状態か(<option>要素のselected属性)
表4-3 SelectListItemクラス(System.Web.Mvc名前空間)のプロパティ

 Selectedプロパティは、データモデルのプロパティ値と選択オプションの値(Valueプロパティ)との比較によって決まりますので、明示的に設定する必要はありません。

 サンプルでは、選択オプションをコントローラーで準備し、ビュー変数SelectOptionsListOptions経由で引き渡ししていますが、もちろん、以下のようにビューの中でもまとめて宣言しても構いません*10

  • *10 ただし、ビューの見通しは悪くなります。準備できるものは、できるだけアクション側で準備しておくのがベターです。
Razor
@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>閉じタグ)
LabelForLabel ラベルを生成
TextBoxForTextBox テキストボックスを生成
TextAreaForTextArea テキストエリア(複数行テキストボックス)を生成
PasswordForPassword パスワード入力ボックスを生成
HiddenForHidden 隠しフィールドを生成
RadioButtonForRadioButton ラジオボタンを生成
CheckBoxForCheckBox チェックボックスを生成
DropDownListForDropDownList 選択ボックスを生成
EnumDropDownListFor Enum型をもとに選択ボックスを生成
ListBoxForListBox リストボックスを生成
表4-1 フォーム関連のビューヘルパー(再掲)

※以下では、本稿の前後を合わせて5回分(第5回~第9回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

書籍転載:ASP.NET MVC 5 実践プログラミング
5. ルート定義からフォームを生成する - BeginRouteFormメソッド[Razor]

ポスト先のルートパラメーターを指定した<form>要素を生成できるBeginRouteFormメソッドの使い方を解説。書籍転載の5本目(基礎編「4-2-2」)。

書籍転載:ASP.NET MVC 5 実践プログラミング
6. TextBoxFor/TextAreaFor/PasswordFor/ HiddenFor/RadioButtonFor/CheckBoxForメソッド[Razor]

モデル内の各プロパティのデータ型や値などの情報に基づいて、テキストボックス、ラジオボタンなどの要素を生成できるXxxxxForメソッドの使い方を解説。書籍転載の6本目(基礎編「4-2-3」)。

書籍転載:ASP.NET MVC 5 実践プログラミング
7. 【現在、表示中】≫ 選択ボックス/リストボックスを生成する - DropDownListFor/ListBoxForメソッド[Razor]

DropDownListFor/ListBoxForメソッドを使って、単一選択式の選択ボックスや複数選択式のリストボックスを生成する方法を解説。書籍転載の7本目(基礎編「4-2-4」)。

書籍転載:ASP.NET MVC 5 実践プログラミング
8. ASP.NET MVC 5.1: 列挙型から選択ボックスを生成する - EnumDropDownListメソッド[Razor]

ASP.NET MVC 5.1以降。列挙型の情報をもとに選択ボックスを生成するEnumDropDownListメソッドの使い方を解説。書籍転載の8本目(基礎編「4-2-5」)。

書籍転載:ASP.NET MVC 5 実践プログラミング
9. ASP.NET MVC 5.2: 選択ボックスの選択肢をグループ化する - SelectListクラス[Razor]

ASP.NET MVC 5.2以降。Razorで、選択肢をグルーピングした選択ボックスを生成するにはSelectListクラスを使用する。その使い方を解説。書籍転載の9本目(基礎編「4-2-6」)。

サイトからのお知らせ

Twitterでつぶやこう!