c# - 在 ASP.NET Core MVC 中选择 Tag Helper

Question

我需要有关 ASP.NET Core 中的 select 标记助手的一些帮助。

我有一个我试图绑定(bind)到选择标签助手的员工列表。我的员工在 List<Employee> EmployeesList并且选定的值将进入 EmployeeId属性(property)。我的 View 模型如下所示:

public class MyViewModel
{
   public int EmployeeId { get; set; }
   public string Comments { get; set; }
   public List<Employee> EmployeesList {get; set; }
}

我的员工类(class)如下所示:

public class Employee
{
   public int Id { get; set; }
   public string FullName { get; set; }
}

我的问题是如何告诉我的选择标签助手使用 Id作为显示时的值 FullName在下拉列表中？

<select asp-for="EmployeeId" asp-items="???" />

我很感激这方面的一些帮助。谢谢。

Answer 1

使用 Select Tag 助手呈现 SELECT 元素

在您的 GET 操作中，创建您的 View 模型的对象，加载 EmployeeList集合属性并将其发送到 View 。

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);
}

在你的创建 View 中，创建一个新的 SelectList来自 EmployeeList 的对象属性并将其作为 asp-items 的值传递属性(property)。

@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
}

或

如果您的 View 模型有 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);
}

而在 View 中，可以直接使用Employees asp-items 的属性(property).

@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>

类(class)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 Framework 从数据库表中获取数据

上面的示例使用硬编码项目作为选项。所以我想我会添加一些示例代码来使用 Entity Framework 获取数据，因为很多人都在使用它。

假设您的 DbContext 对象有一个名为 Employees 的属性。 , 类型为 DbSet<Employee>哪里Employee实体类有一个 Id和 Name像这样的属性(property)

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是您的数据库上下文对象。 View 代码与上面相同。

使用选择列表

有些人更喜欢使用 SelectList类来保存呈现选项所需的项目。

public class MyViewModel
{
    public int EmployeeId { get; set; }
    public SelectList Employees { set; get; }
}

现在在您的 GET 操作中，您可以使用 SelectList构造函数来填充 Employees View 模型的属性。确保您指定的是 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获取 Employee 对象列表的方法，每个对象都有一个 Id和 FirstName属性，我将这些属性用作 DataValueField和 DataTextField的SelectList我们创建的对象。您可以将硬编码列表更改为从数据库表中读取数据的代码。

View 代码将相同。

<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);

View 代码将相同。

设置选定的选项

有时，您可能希望将一个选项设置为 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 的 View 模型属性即可。在您的 View 中属性为数组类型。

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 传输项目列表

如果你不喜欢保留一个集合类型属性来将选项列表传递给 View ，你可以使用动态 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());
}

并且在 View 中

<select asp-for="EmployeeId" asp-items="@ViewBag.Employees">
    <option>Please select one</option>
</select>

使用 ViewBag 传输项目列表并设置所选选项

它与上述相同。您所要做的就是将属性(您为其绑定(bind)下拉列表)的值设置为您要选择的选项的值。

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());
}

并且在 View 中

<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);
}

View 代码没有变化。选择标签助手现在将呈现 2 optgroup 中的选项项。