无法使用 Select TagHelper 创建下拉列表，但脚手架可以

Question

我使用脚手架获得了一个简单的 MVC 页面，它从我的模型中生成了如下代码：

ViewData["CustomersNo"] = new SelectList(_context.Customers, "CustomersId", "Name");

然后我搭建了生成如下标记的视图：

<div class="form-group">
    <label asp-for="CustomersNo" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <select asp-for="CustomersNo" class ="form-control" asp-items="ViewBag.CustomersNo"></select>
    </div>
</div>

在呈现时，它会从我的数据库中生成一个包含我的客户的下拉控件。正是我想要的，我什至不用写一行代码。

但现在我想使用过滤后的数据在更加自定义的视图上创建下拉菜单。无论我做什么，它都会呈现为我绝对不想要的多选。

我想使用视图模型，但我也尝试过 ViewData，因为脚手架就是这样使用的：

proViewModel.Vols = new SelectList(_context.Products.Where(t => t.Type == "Volume"), "ModelId", "ModelId");
ViewData["VolModels"] = new SelectList(_context.Products.Where(t => t.Type == "Volume"), "ModelId", "ModelId");

到目前为止，我的视图模型非常简单：

public class ProductsViewModel
{
    [Key]
    public int ID { get; set; }
    [NotMapped]
    //public IEnumerable<string> Vols { get; set; }
    //public IEnumerable<SelectListItem> Vols { get; set; }
    public SelectList Vols { get; set; }
    [NotMapped]
    public string SelectedModel { get; set; }
}

我尝试了不同的 IEnumerable 类型，因为这是大多数教程使用的类型。但是脚手架使用 SelectList 和 as well as this tutorial 都说 IEnumerable 将创建一个多选并且似乎建议使用 SelectList.

但是有了这个标记，我只能得到多选：

<td>
    <div class="form-group">
        <label asp-for="Vols" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <select asp-for="Vols" class="form-control" asp-items="Model.Vols"></select>
        </div>
    </div>
</td>
<td>
    <div class="form-group">
        <label asp-for="Vols" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <select asp-for="Vols" class="form-control" asp-items="ViewBag.VolModels"></select>
        </div>
    </div>
</td>

我看不出脚手架在做什么和我在做什么有什么区别。但是渲染的输出完全不同，不是我想要的。那么我在这里缺少什么？

Answer 1

您不能将 <select> 绑定到复杂对象的集合，而 Vols 就是这样。 <select> 绑定并回发一个简单类型，<select multiple> 绑定并回发一个简单类型的数组。

此外，您绑定的属性的名称和 SelectList 的名称不能相同（有关详细信息，请参阅）。

因为您绑定的属性是 IEnumerable，所以创建了 <select multiple>。

将代码更改为

<div class="form-group">
    <label asp-for="SelectedModel" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <select asp-for="SelectedModel" class="form-control" asp-items="Model.Vols"></select>
    </div>
</div>

并且所选选项值将绑定到 SelectedModel 属性.

附带说明，删除您的 [Key] 和 [NotMapped] 属性 - 它们是 EF 特定属性，在视图模型中没有位置。

无法使用 Select TagHelper 创建下拉列表，但脚手架可以

Can't create a dropdown using Select TagHelper but scaffolding does

asp.net-mvc

razor

asp.net-core-tag-helpers