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>

渲染时，我的数据库中的客户生成了一个下拉控件。正是我想要的，我甚至不必写一行代码。

但现在我想使用过滤数据在更自定义的视图上创建下拉列表。无论我做什么，它都会呈现出一种我绝对不想要的多重选择。

我想使用View Model，但我也尝试过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和this SO Q&A以及此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的名称不能相同（有关详细信息，请参阅Can the ViewBag name be the same as the Model property name in a DropDownList?。）

由于您绑定的属性为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创建下拉列表，但脚手架可以

1 个答案: