VisualStuidioCommunity2015/Fw4.5.2/C#
前回に続いて基本的なHTMLヘルパーのうち、今回は下記のヘルパー見ていきます。
- DropDownList/ DropDownListFor
- ListBox / ListBoxFor
- EnumDropDownListFor
入力要素のレンダリング
DropDownList/ DropDownListFor
まずはDropDownListです。
ドロップダウンリストの選択肢リストの作成にはIEnumerable<SelectListItem>を使用する方法とSelectListを使用する方法があります。
下記のサンプルはIEnumerable<SelectListItem>を使用した方法です。
選択肢の作成と同時に選択状態を表すselectedプロパティを指定します。
ビューで選択肢リストを作成していますが、コントローラーで作成しViewBag経由で引き渡してもいいですし、ビューモデル経由で引き渡してもいいです。
@{
var items= new List<SelectListItem>()
{
new SelectListItem() {Value = "1", Text = "日曜日" },
new SelectListItem() {Value = "2", Text = "月曜日" },
new SelectListItem() {Value = "3", Text = "火曜日" , Selected = true},
new SelectListItem() {Value = "4", Text = "水曜日" },
new SelectListItem() {Value = "5", Text = "木曜日" },
new SelectListItem() {Value = "6", Text = "金曜日" },
new SelectListItem() {Value = "7", Text = "土曜日" },
};
}
DropDownList:
@Html.DropDownList("DropDownListID", items)
DropDownList(selectListitem)の出力:
<select id="DropDownListID" name="DropDownListID">
<option value="1">日曜日</option>
<option value="2">月曜日</option>
<option selected="selected" value="3">火曜日</option>
<option value="4">水曜日</option>
<option value="5">木曜日</option>
<option value="6">金曜日</option>
<option value="7">土曜日</option>
</select>
次にSelectListを使用する方法です。
SelectListは1つの項目を選択できる一覧を表すクラスです。
IEnumerable<SelectListItem>を実装しています。
まず選択肢リストになるIEnumerableなリストを作成します。
そして選択肢リスト、選択値用フィールド名、表示用フィールド名、および選択値を指定して、SelectListインスタンスを作ります。
DropDownListメソッドには作成したSelectListを指定します。
@{
var items = new List<KeyValuePair<string,string>>()
{
new KeyValuePair<string,string>("1", "日曜日"),
new KeyValuePair<string,string>("2", "月曜日"),
new KeyValuePair<string,string>("3", "火曜日"),
new KeyValuePair<string,string>("4", "水曜日"),
new KeyValuePair<string,string>("5", "木曜日"),
new KeyValuePair<string,string>("6", "金曜日"),
new KeyValuePair<string,string>("7", "土曜日"),
};
var list = new SelectList(items, //選択肢リスト
"Key", //Value値に指定するプロパティ名
"Value", //Text値に指定するプロパティ名
"4"); //選択値
}
DropDownList(SelectList):
@Html.DropDownList("DropDownListID", list)
続いてDropDownListForです。
こちらはIEnumerable<SelectListItem>を使用しても、選択値はモデルから設定できます。
@{
var items = new List<SelectListItem>()
{
new SelectListItem() {Value = "1", Text = "日曜日" },
new SelectListItem() {Value = "2", Text = "月曜日" },
new SelectListItem() {Value = "3", Text = "火曜日" },
new SelectListItem() {Value = "4", Text = "水曜日" },
new SelectListItem() {Value = "5", Text = "木曜日" },
new SelectListItem() {Value = "6", Text = "金曜日" },
new SelectListItem() {Value = "7", Text = "土曜日" },
};
}
DropDownListFor:
@Html.DropDownListFor(mdl => mdl.DropDownValue, items)
SelectListを使用した方法です。
@{
var items = new List<KeyValuePair<string, string>>()
{
new KeyValuePair<string,string>("1", "日曜日"),
new KeyValuePair<string,string>("2", "月曜日"),
new KeyValuePair<string,string>("3", "火曜日"),
new KeyValuePair<string,string>("4", "水曜日"),
new KeyValuePair<string,string>("5", "木曜日"),
new KeyValuePair<string,string>("6", "金曜日"),
new KeyValuePair<string,string>("7", "土曜日"),
};
var list = new SelectList(items,"Key","Value");
}
@Html.DropDownListFor(mdl => mdl.DropDownValue, list)
ListBox/ ListBoxFor
複数選択できるリストボックスです。
ドロップダウンリストの選択肢リストの作成にはIEnumerable<SelectListItem>を使用する方法とMultiSelectListを使用する方法があります。
まずはListBoxです。
下記のサンプルはIEnumerable<SelectListItem>を使用した方法です。
@{
var items= new List<SelectListItem>()
{
new SelectListItem() {Value = "1", Text = "日曜日" },
new SelectListItem() {Value = "2", Text = "月曜日" },
new SelectListItem() {Value = "3", Text = "火曜日" , Selected = true},
new SelectListItem() {Value = "4", Text = "水曜日" },
new SelectListItem() {Value = "5", Text = "木曜日" },
new SelectListItem() {Value = "6", Text = "金曜日" },
new SelectListItem() {Value = "7", Text = "土曜日" , Selected = true},
};
}
ListBox:
@Html.ListBox("ListBoxID", items)
ListBoxの出力:
<select id="ListBoxID" multiple="multiple" name="ListBoxID">
<option value="1">日曜日</option>
<option value="2">月曜日</option>
<option selected="selected" value="3">火曜日</option>
<option value="4">水曜日</option>
<option value="5">木曜日</option>
<option selected="selected" value="6">金曜日</option>
<option value="7">土曜日</option>
</select>
次にMultiSelectListを使用する方法です。
MultiSelectListは複数の項目を選択できる一覧を表すクラスです。
IEnumerable<SelectListItem>を実装しています。
{
var items = new List<KeyValuePair<string, string>>()
{
new KeyValuePair<string,string>("1", "日曜日"),
new KeyValuePair<string,string>("2", "月曜日"),
new KeyValuePair<string,string>("3", "火曜日"),
new KeyValuePair<string,string>("4", "水曜日"),
new KeyValuePair<string,string>("5", "木曜日"),
new KeyValuePair<string,string>("6", "金曜日"),
new KeyValuePair<string,string>("7", "土曜日"),
};
var selectedItems = new String[] { "3", "6" };
var list= new MultiSelectList (items, "Key", "Value", selectedItems);
}
ListBox:
@Html.ListBox("ListBoxID", list)
つづいてListBoxForです。
IEnumerable<SelectListItem>を使用する例です。
ビューモデル
public class HtmlHelperViewModels
{
public string[] ListBoxValues { get; set; }
}
コントローラー
public class HtmlHelperController : Controller
{
public ActionResult Index()
{
var mdl = new Models.HtmlHelperViewModels();
mdl.ListBoxValues = new string[] { "3", "6" };
return View(mdl);
}
}
ビュー
@{
var items = new List<SelectListItem>()
{
new SelectListItem() {Value = "1", Text = "日曜日" },
new SelectListItem() {Value = "2", Text = "月曜日" },
new SelectListItem() {Value = "3", Text = "火曜日" },
new SelectListItem() {Value = "4", Text = "水曜日" },
new SelectListItem() {Value = "5", Text = "木曜日" },
new SelectListItem() {Value = "6", Text = "金曜日" },
new SelectListItem() {Value = "7", Text = "土曜日" },
};
}
ListBoxFor:
@Html.ListBoxFor(mdl => mdl.ListBoxValues, items)
次にMultiSelectListを使用する方法です。
@{
var items = new List<KeyValuePair<string, string<<()
{
new KeyValuePair<string,string>("1", "日曜日"),
new KeyValuePair<string,string>("2", "月曜日"),
new KeyValuePair<string,string>("3", "火曜日"),
new KeyValuePair<string,string>("4", "水曜日"),
new KeyValuePair<string,string>("5", "木曜日"),
new KeyValuePair<string,string>("6", "金曜日"),
new KeyValuePair<string,string>("7", "土曜日"),
};
var selectedItems = new String[] { "3", "6" };
var list = new MultiSelectList(items, "Key", "Value", selectedItems);
}
ListBoxFor(SelectList):
@Html.ListBoxFor(mdl => mdl.ListBoxValues , list)
EnumDropDownListFor
ASP.NET MVC 5.1 からは列挙帯からDropDownListを生成することができます。
モデル
namespace Practice.Models
{
public class HtmlHelperViewModels
{
public WeekdayType EnumValue { get; set; }
}
public enum WeekdayType
{
Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
};
}
コントローラー
namespace Practice.Controllers
{
public class HtmlHelperController : Controller
{
public ActionResult Index()
{
Models.HtmlHelperViewModels mdl = new Models.HtmlHelperViewModels();
mdl.EnumValue = Models.WeekdayType.Thursday;
return View(mdl);
}
}
}
ビュー
@Html.EnumDropDownListFor(mdl => mdl.EnumValue)
EnumDropDownListForの出力:
<select data-val="true" data-val-required="EnumValue フィールドが必要です。" id="EnumValue" name="EnumValue">
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option selected="selected" value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
<option value="6">Sunday</option>
</select>
EnumHelper.GetSelectListメソッドを使用すると、列挙帯からIList<SelectListItem>オブジェクトを生成することもできます。
@{
IList<SelectListItem> enumList =
EnumHelper.GetSelectList(typeof(Practice.Models.WeekdayType));
}
DropDownListFor:
@Html.DropDownListFor(mdl => mdl.EnumDropDownValue, enumList)
DropDownList:
@Html.DropDownList("EnumDropDownListID", new SelectList(enumList,"Value","Text","2"))
DropDownListの表示する値を列挙子の名前ではなく、他の表示名にしたい場合は、列挙子にDisplay属性で表示名を指定します。
using System.ComponentModel.DataAnnotations;
・・・省略・・・
public enum WeekdayType
{
[Display(Name = "月曜")]
Monday,
[Display(Name = "火曜")]
Tuesday,
[Display(Name = "水曜")]
Wednesday,
[Display(Name = "木曜")]
Thursday,
[Display(Name = "金曜")]
Friday,
[Display(Name = "土曜")]
Saturday,
[Display(Name = "日曜")]
Sunday
};
