書籍転載：ASP.NET MVC 5 実践プログラミング
ASP.NET MVC 5.2： 選択ボックスの選択肢をグループ化する - SelectListクラス［Razor］
ASP.NET MVC 5.2以降。Razorで、選択肢をグルーピングした選択ボックスを生成するにはSelectListクラスを使用する。その使い方を解説。書籍転載の9本目（基礎編「4-2-6」）。
書籍転載について
本コーナーは、秀和システム発行の書籍『ASP.NET MVC 5 実践プログラミング』の中から、特にBuild Insiderの読者に有用だと考えられる項目を編集部が選び、同社の許可を得て転載したものです。
『ASP.NET MVC 5 実践プログラミング』の詳細や購入は秀和システムのサイトや目次ページをご覧ください。
ご注意
本記事は、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどはBuild Insiderのそれとは一致しません。あらかじめご了承ください。
4-2-6 選択ボックスの選択肢をグループ化する［5.2］ - SelectListクラス
選択ボックスでは、<optgroup>要素を利用することで、選択肢をグループで分類できます。たとえば、以下はカテゴリー（Category）の単位でグループ分けした記事タイトルを選択ボックスに表示した例です。
|
<select id="Url" name="Url">
<option value="">選択してください</option>
<optgroup label="Reference">
<option selected="selected"
value="https://www.buildinsider.net/web/jquerymobileref">
jQuery Mobile 逆引きリファレンス
</option>
<option value="https://www.buildinsider.net/web/jqueryuiref">
jQuery UI 逆引きリファレンス
</option>
</optgroup>
<optgroup label="DotNet">
<option value="http://codezine.jp/article/corner/518">
Bootstrap でレスポンシブでリッチなサイトを構築
</option>
<option value="http://codezine.jp/article/corner/511">
ASP.NET Identity 入門
</option>
<option disabled="disabled"
value="http://www.wings.msn.to/mvc5">
ASP.NET MVC 入門
</option>
</optgroup>
<optgroup label="Cloud">
<option value="http://codezine.jp/article/corner/513">
Amazon Web Servicesによるクラウド超入門
</option>
<option value="http://www.wings.msn.to/azure">
Azure 新機能 TIPS
</option>
</optgroup>
</select>
|
選択肢が増えて、かつ、選択肢を意味あるキーでグルーピングできる場合には、積極的に<optgroup>要素を利用することで、選択ボックスが見やすく、選びやすくなります。
では、このような選択ボックスを生成する例を見てみましょう。
|
2
1
|
public ActionResult SelectGroup()
{
// 選択オプションのリスト（Url／Title／Categoryプロパティを持つオブジェクト）
var articles = from a in db.Articles
select new { Url = a.Url, Title = a.Title, Category = a.Category };
// 無効オプションのリスト（Url文字列）
var disabled = from a in db.Articles
where a.Released == false
select a.Url;
// 選択リストを定義
ViewBag.Opts = new SelectList(
articles, "Url", "Title", "Category", null, disabled);
return View(db.Articles.Find(1));
}
|
|
@model MvcRoute.Models.Article
...中略...
@Html.DropDownListFor(Model => Model.Url,
(SelectList)ViewBag.Opts, "選択してください")
|
<optgroup>要素を利用するには、選択オプションをSelectListクラスとして準備します（1）。
【構文】SelectListコンストラクター
SelectList(IEnumerable items, string dataValueField, string dataTextField [[,string dataGroupField],object selectedValue [,IEnumerable disabledValues]])
- items： 選択オプションを表すオブジェクト群
- dataValueField： value属性に割り当てられるプロパティ
- dataTextField： テキストに割り当てられるプロパティ
- dataGroupField： グループとして利用されるプロパティ
- selectedValue： デフォルト値*11
- disabledValues： 無効にする値
- *11 サンプルでは、モデルの値が自動セットされますのでnullとしています。
引数dataGroupField／disabledValuesを指定する場合は、引数selectedValueは省略できませんので、注意してください。一般的に、XxxxxForメソッドを利用する場合には、モデルの現在値が無条件にデフォルト値になりますので、引数selectedValueには無条件にnullを指定します。
選択オプション／無効オプションを取得するには、LINQ to Entitiesというしくみを利用しています（2）。詳しくは5-3節（後日公開予定）で触れますので、それぞれ、
- Url／Title／Categoryプロパティを持つ匿名型のリスト
- Urlプロパティ（文字列）のリスト
を生成している、とだけ理解しておいてください。
| メソッド | 概要 |
|---|---|
| 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回分（第7回～第11回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
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」）。
10. Label／TextBox／TextArea／Password／Hidden／ RadioButton／CheckBoxメソッド［Razor］
XxxxxForメソッドとは異なり、「For」なしのメソッドは、モデルから独立したフォーム要素を生成できる。その使い方を解説。書籍転載の10本目（基礎編「4-2-7」）。
11. リンク／エンコード関連のビューヘルパー｜ハイパーリンクを生成する - ActionLinkメソッド［Razor］
リンク／エンコード関連のビューヘルパー紹介の1つ目として、アンカータグを生成するためのメソッドの基本的な使い方を解説する。書籍転載の11本目（基礎編「4-3-1」）。
