在MVC 6选择标记助手 [英] Select Tag Helper in MVC 6

问题描述

我需要一些帮助，在MVC 6选择标记帮手。

I need some help with the select tag helper in MVC 6.

我有我试图绑定到一个选择标记辅助员工列表。我的员工都在列表与LT;员工＆GT; EmployeesList 和选择的值将进入雇员属性。我的视图模型是这样的：

I have a list of employees that I'm trying to bind to a select tag helper. My employees are in a List<Employee> EmployeesList and selected value will go into EmployeeId property. My view model looks like this:

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

我的员工类看起来是这样的：

My employee class looks like this:

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

我的问题是怎么做的，我告诉我的选择标记辅助使用编号作为同时显示值全名在下拉列表？

My question is how do I tell my select tag helper to use the Id as the value while displaying FullName in the drop down list?

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

我倒是AP preciate一些帮助与此有关。谢谢你。

I'd appreciate some help with this. Thanks.

推荐答案

使用选择标记助手在视图中绘制一个SELECT元素

在你付诸行动，创建您的视图模型的对象，加载 EmployeeList的集合属性并发送到视图。

In your GET action, create an object of your view model, load the EmployeeList collection property and send that to the view.

public IActionResult Create()
{
    var vm = new MyViewModel();
    vm.EmployeesList = new List<Employee>
    {
        new Employee {Id = 1, FullName = "Shyju"},
        new Employee {Id = 2, FullName = "Scot"}
    };
    return View(vm);
}

而在你创建视图，创建从 EmployeeList的属性一个新的的SelectList 对象，并传递作为价值在 ASP-项目属性。

And in your create view, create a new SelectList object from the EmployeeList property and pass that as value for the 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操作方法来接受提交的表单数据。

And your HttpPost action method to accept the submitted form data.

[HttpPost]
public IActionResult Create(MyViewModel model)
{
   //  check model.EmployeeId 
   //  to do : Save and redirect
}

或如果您的视图模式有一个列表＆LT; SelectListItem方式＆gt; 的属性您下拉项

Or if your view model has a List<SelectListItem> as the property for your dropdown items.

public class MyViewModel
{
    public int EmployeeId { get; set; }
    public string Comments { get; set; }
    public List<SelectListItem> Employees { set; get; }
}

而在你的获取动作，

And in your get action,

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

和在视图中，可以直接用于 ASP-项目的员工属性。

And in the view, you can directly use the Employees property for the 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元素的默认选项（例如，在编辑屏幕，你要加载pviously保存的选项值的$ P $）。要做到这一点，你可以简单地雇员属性值设置为你想要选择的选项的值。

Some times,you might want to set one option as the default option in the SELECT element (For example, in an edit screen, you want to load the previously saved option value). To do that, you may simply set the EmployeeId property value to the value of the option you want to be selected.

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

这将选择在当页面呈现的选择元素的选项汤姆。

This will select the option Tom in the select element when the page is rendered.

如果你想呈现一个多选择下拉菜单中，你可以简单地改变你使用您的视图模型属性ASP换属性，在视图中的数组类型。

If you want to render a multi select dropdown, you can simply change your view model property which you use for asp-for attribute in your view to an array type.

public class MyViewModel
{
    public int[] EmployeeIds { get; set; }
    public List<SelectListItem> Employees { set; get; }
}

这将呈现的HTML标记与多个属性，这将允许用户选择多个选项选择元素。

This will render the HTML markup for the select element with the multiple attribute which will allow the user to select multiple options.

@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 属性值到一个数组你想要的值。

Setting selected options in multi select

Similar to single select, set the EmployeeIds property value to the an array of values you want.

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

这将选择的时候，页面呈现多选择元素的选项汤姆和杰里。

This will select the option Tom and Jerry in the multi select element when the page is rendered.

这篇关于在MVC 6选择标记助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！