使用选择标记帮助器呈现SELECt元素
在GET操作中，创建视图模型的对象，加载
EmployeeListcollection属性并将其发送到视图。
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>是
Employee实体类具有
Id和
Name属性的，例如
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是您的数据库上下文对象。视图代码与上面相同。
使用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 pred 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方法来获取Employee对象的列表，每个对象都具有
Id和
FirstName属性，并且将这些属性用作
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元素中的默认选项（例如，在编辑屏幕中，您要加载先前保存的选项值）。为此，您可以简单地将
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);}呈现页面时，这将在multi select元素中选择Tom和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>
分组项目
选择标记帮助器方法支持下拉菜单中的分组选项。您要做的就是在您的操作方法中指定
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项目中呈现选项。
