使用Select标签帮助程序渲染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);
}
在您的创建视图中，从
EmployeeList属性创建一个新的
SelectList对象，并将其作为
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)
{
}
或者
如果您的视图模型具有 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 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查询获取员工，使用Select方法在LINQ表达式中为每个员工创建一个对象列表。
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 参数。您可以使用
nameof expression 静态链接字段名称。
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()
{
return new List<Employee>
{
new Employee { Id = 1, FirstName = "Shyju" },
new Employee { Id = 2, FirstName = "Bryan" }
};
}
我在此调用
GetEmployees方法以获取一个包含每个员工对象的
Id和
FirstName属性的列表，并将这些属性用作我们创建的
SelectList对象的
DataValueField和
DataTextField。您可以将硬编码列表更改为从数据库表中读取数据的代码。
视图代码将保持不变。
<select asp-for="EmployeeId" asp-items="@Model.Employees" >
<option>Please select one</option>
</select>
从字符串列表中渲染SELECT元素。
有时，您可能想要从字符串列表中渲染选择元素。在这种情况下，您可以使用仅接受 IEnumerable<T> 的 SelectList 构造函数。
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;
return View(vm);
}
这将在页面渲染时选择下拉列表中的Tom选项。
多选下拉列表
如果您想呈现多选下拉列表，只需将视图模型属性更改为数组类型，该属性用于视图中的asp-for属性。
public class MyViewModel
{
public int[] EmployeeIds { get; set; }
public List<SelectListItem> Employees { set; get; }
}
这将呈现具有
multiple属性的选择元素的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和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;
return View(new MyViewModel());
}
并在视图中
<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
<option>Please select one</option>
</select>
分组项目
选择标签助手方法支持在下拉列表中对选项进行分组。您只需在操作方法中指定每个SelectListItem的Group属性值即可。
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项目内。
