選択タグヘルパーを使用したSELECT要素のレンダリング
GETアクションで、ビューモデルのオブジェクトを作成し、EmployeeListコレクションプロパティをロードしてビューに送信します。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.EmployeesList = new List<Employee>
{
new Employee { Id = 1, FullName = "Shyju" },
new Employee { Id = 2, FullName = "Bryan" }
};
return View(vm);
}
そして、作成ビューでSelectList、EmployeeListプロパティから新しいオブジェクトを作成し、それをasp-itemsプロパティの値として渡します。
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<select asp-for="EmployeeId"
asp-items="@(new SelectList(Model.EmployeesList,"Id","FullName"))">
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
そして、送信されたフォームデータを受け入れるためのHttpPostアクションメソッド。
[HttpPost]
public IActionResult Create(MyViewModel model)
{
// check model.EmployeeId
// to do : Save and redirect
}
または
ビューモデルにList<SelectListItem>ドロップダウン項目のプロパティとしてがある場合。
public class MyViewModel
{
public int EmployeeId { get; set; }
public string Comments { get; set; }
public List<SelectListItem> Employees { set; get; }
}
そして、あなたの取得アクションでは、
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(vm);
}
また、ビューでは、のEmployeesプロパティを直接使用できますasp-items。
@model MyViewModel
<form asp-controller="Home" asp-action="Create">
<label>Comments</label>
<input type="text" asp-for="Comments"/>
<label>Lucky Employee</label>
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
<input type="submit"/>
</form>
クラスSelectListItemはMicrosoft.AspNet.Mvc.Rendering名前空間に属しています。
select要素に明示的な終了タグを使用していることを確認してください。自己終了タグアプローチを使用する場合、タグヘルパーは空のSELECT要素をレンダリングします。
以下のアプローチは機能しません
<select asp-for="EmployeeId" asp-items="@Model.Employees" />
しかし、これはうまくいきます。
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
エンティティフレームワークを使用してデータベーステーブルからデータを取得する
上記の例では、オプションにハードコードされたアイテムを使用しています。それで、多くの人々がそれを使用するので、私はエンティティフレームワークを使用してデータを取得するためにいくつかのサンプルコードを追加すると思いました。
さんがあなたのDbContextオブジェクトと呼ばれる性質があると仮定しましょうEmployeesタイプのものであり、エンティティ・クラスが持っていると、このような性質をDbSet<Employee>EmployeeIdName
public class Employee
{
public int Id { set; get; }
public string Name { set; get; }
}
LINQクエリを使用して従業員を取得し、LINQ式でSelectメソッドを使用して、SelectListItem各従業員のオブジェクトのリストを作成できます。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = context.Employees
.Select(a => new SelectListItem() {
Value = a.Id.ToString(),
Text = a.Name
})
.ToList();
return View(vm);
}
想定しているのcontextは、dbコンテキストオブジェクトです。ビューコードは上記と同じです。
SelectListの使用
SelectListオプションのレンダリングに必要なアイテムを保持するためにクラスを使用することを好む人もいます。
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
これでGETアクションで、SelectListコンストラクターを使用しEmployeesてビューモデルのプロパティを設定できます。パラメータdataValueFieldとdataTextFieldパラメータを指定していることを確認して ください。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(),"Id","FirstName");
return View(vm);
}
public IEnumerable<Employee> GetEmployees()
{
// hard coded list for demo.
// You may replace with real data from database to create Employee objects
return new List<Employee>
{
new Employee { Id = 1, FirstName = "Shyju" },
new Employee { Id = 2, FirstName = "Bryan" }
};
}
ここでは、GetEmployeesメソッドを呼び出して、それぞれIdとFirstNameプロパティを持つEmployeeオブジェクトのリストを取得しています。作成したオブジェクトとしてDataValueField、それらのプロパティを使用DataTextFieldしSelectListます。ハードコードされたリストを、データベーステーブルからデータを読み取るコードに変更できます。
ビューコードは同じになります。
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
文字列のリストからSELECT要素をレンダリングします。
文字列のリストから選択要素をレンダリングしたい場合があります。その場合、あなたSelectListだけを取るコンストラクタを使用することができますIEnumerable<T>
var vm = new MyViewModel();
var items = new List<string> {"Monday", "Tuesday", "Wednesday"};
vm.Employees = new SelectList(items);
return View(vm);
ビューコードは同じになります。
選択したオプションの設定
SELECT要素のデフォルトオプションとして1つのオプションを設定したい場合があります（たとえば、編集画面で、以前に保存したオプション値をロードしたい場合）。これを行うには、EmployeeIdプロパティ値を選択するオプションの値に設定します。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeId = 12; // Here you set the value
return View(vm);
}
これにより、ページがレンダリングされるときに、select要素のオプションTomが選択されます。
複数選択ドロップダウン
複数選択ドロップダウンをレンダリングする場合asp-forは、ビューの属性に使用するビューモデルプロパティを配列型に変更するだけです。
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
これmultipleにより、ユーザーが複数のオプションを選択できる属性を持つselect要素のHTMLマークアップがレンダリングされます。
@model MyViewModel
<select id="EmployeeIds" multiple="multiple" name="EmployeeIds">
<option>Please select one</option>
<option value="1">Shyju</option>
<option value="2">Sean</option>
</select>
複数選択で選択したオプションを設定する
単一選択と同様に、EmployeeIdsプロパティ値を必要な値の配列に設定します。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "11"},
new SelectListItem {Text = "Tom", Value = "12"},
new SelectListItem {Text = "Jerry", Value = "13"}
};
vm.EmployeeIds= new int[] { 12,13} ;
return View(vm);
}
これにより、ページがレンダリングされるときに、複数選択要素でオプションのトムとジェリーが選択されます。
ViewBagを使用してアイテムのリストを転送する
オプションのリストをビューに渡すためにコレクションタイプのプロパティを保持したくない場合は、動的なViewBagを使用してこれを行うことができます（viewbagは動的であり、コードがキャッチされない傾向があるため、これは個人的に推奨されるアプローチではありません誤植）
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Sean", Value = "2"}
};
return View(new MyViewModel());
}
とビューで
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
ViewBagを使用して項目のリストを転送し、選択したオプションを設定する
上記と同じです。必要なのは、プロパティ（ドロップダウンをバインドする対象）の値を、選択するオプションの値に設定することだけです。
public IActionResult Create()
{
ViewBag.Employees = new List<SelectListItem>
{
new SelectListItem {Text = "Shyju", Value = "1"},
new SelectListItem {Text = "Bryan", Value = "2"},
new SelectListItem {Text = "Sean", Value = "3"}
};
vm.EmployeeId = 2; // This will set Bryan as selected
return View(new MyViewModel());
}
とビューで
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
アイテムのグループ化
selectタグヘルパーメソッドは、ドロップダウンのグループ化オプションをサポートしています。あなたがしなければならないのは、アクションメソッドGroupでそれぞれのプロパティ値を指定することだけです SelectListItem。
public IActionResult Create()
{
var vm = new MyViewModel();
var group1 = new SelectListGroup { Name = "Dev Team" };
var group2 = new SelectListGroup { Name = "QA Team" };
var employeeList = new List<SelectListItem>()
{
new SelectListItem() { Value = "1", Text = "Shyju", Group = group1 },
new SelectListItem() { Value = "2", Text = "Bryan", Group = group1 },
new SelectListItem() { Value = "3", Text = "Kevin", Group = group2 },
new SelectListItem() { Value = "4", Text = "Alex", Group = group2 }
};
vm.Employees = employeeList;
return View(vm);
}
ビューコードに変更はありません。selectタグヘルパーは、2つのoptgroupアイテム内にオプションをレンダリングします。