使用 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
}
Or
如果您的视图模型有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 asp-for="EmployeeId" asp-items="@Model.Employees" />
但这会起作用。
<select asp-for="EmployeeId" asp-items="@Model.Employees"></select>
使用实体框架从数据库表中获取数据
上面的示例使用硬编码项作为选项。所以我想我会添加一些示例代码来使用实体框架获取数据,因为很多人都使用它。
假设您的 DbContext 对象有一个名为Employees
,其类型为DbSet<Employee>
哪里的Employee
实体类有一个Id
and 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
类来保存呈现选项所需的项目。
public class MyViewModel
{
public int EmployeeId { get; set; }
public SelectList Employees { set; get; }
}
现在在您的 GET 操作中,您可以使用SelectList
构造函数来填充Employees
视图模型的属性。确保您指定的是dataValueField
and dataTextField
参数。您可以使用表达式名称静态链接字段名称。
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" }
};
}
在这里我打电话给GetEmployees
方法获取 Employee 对象的列表,每个对象都有一个Id
and FirstName
属性,我将这些属性用作DataValueField
and DataTextField
of the 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; }
}
这将使用以下内容呈现 select 元素的 HTML 标记multiple
属性允许用户选择多个选项。
@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>
对项目进行分组
选择标签帮助器方法支持下拉列表中的分组选项。您所要做的就是指定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 items.