Select Tag ヘルパーを使用して 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, nameof(Employee.Id), nameof(Employee.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; }
}
そして、あなたの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>
エンティティ フレームワークを使用してデータベース テーブルからデータを取得する
上記の例では、オプションにハードコードされた項目を使用しています。そこで、多くの人が使用している Entity フレームワークを使用してデータを取得するサンプル コードを追加しようと考えました。
DbContext オブジェクトに というプロパティがあり、エンティティ クラスに次のようなandプロパティが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ください。nameof 式を使用して、フィールド名を静的にリンクできます。
public IActionResult Create()
{
var vm = new MyViewModel();
vm.Employees = new SelectList(GetEmployees(), nameof(Employee.Id), nameof(Employee.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" }
};
}
ここでメソッドを呼び出して、それぞれにandプロパティをGetEmployees持つ Employee オブジェクトのリストを取得し、これらのプロパティを作成したオブジェクトのおよびとして使用します。ハードコーディングされたリストを、データベース テーブルからデータを読み取るコードに変更できます。IdFirstNameDataValueFieldDataTextFieldSelectList
ビューコードは同じになります。
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
文字列のリストから 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);
ビューコードは同じになります。
選択したオプションの設定
場合によっては、1 つのオプションを SELECT 要素のデフォルト オプションとして設定したい場合があります (たとえば、編集画面で、以前に保存したオプション値を読み込みたい場合など)。これを行うには、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);
}
これにより、ページがレンダリングされるときに、複数選択要素のオプション Tom and Jerry が選択されます。
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);
}
ビューコードに変更はありません。選択タグ ヘルパーは、2 つのoptgroupアイテム内のオプションをレンダリングするようになりました。