ASP.NET MVC フレームワークにデフォルトで付属する非常に便利なヘルパーが多数ありますが、常に混乱を招くように思われるのは、Html.DropDownListFor() ヘルパー メソッドです。そのため、この投稿では、リストを作成するために使用する手順と、起動して実行した後のファンキーな機能のいくつかについて簡単に説明します。
この例では、国のリストを表示する単一のドロップダウン リストがフォームに表示され、そこから選択して送信できます。
まず、ビューが表示できるデータを決定するコントラクトとなるビュー モデルを構築する必要があります。
public class IndexViewModel
{
// Stores the selected value from the drop down box.
[Required]
public int CountryID { get; set; }
// Contains the list of countries.
public SelectList Countries { get; set; }
}
public class HomeController : Controller
{
[HttpGet]
public ActionResult Index()
{
IndexViewModel viewModel = new IndexViewModel();
viewModel.Countries = new SelectList(GetCountries(), "ID", "Name");
return View(viewModel);
}
[HttpPost]
public ActionResult Index(IndexViewModel viewModel)
{
viewModel.Countries = new SelectList(GetCountries(), "ID", "Name");
if (!ModelState.IsValid)
{ return View(viewModel); }
//TODO: Do something with the selected country...
CMSService.UpdateCurrentLocation(viewModel.CountryID);
return View(viewModel);
}
}
@Html.DropDownListFor(x => x.CountryID, Model.Countries)
@Html.DropDownListFor(x => x.CountryID, Model.Countries, "- please select -")
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")"
type="text/css" rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("></script>
<script type="text/javascript" src="@Url.Content("></script>
<link type="text/css" rel="stylesheet" href="@Url.Content("~/Content/selectmenu.css")" />
<script src="@Url.Content("~/Scripts/selectmenu.js")" type="text/javascript"></script>
<script type="text/javascript">
$('select').selectmenu();
</script>