为什么我的单选列表在模型绑定上转换为多选列表？

Question

我正在尝试将多个单选列表绑定到我的视图模型中的一个字符串列表我有属性：public List<string> Items {get; set;} 并且在我看来我有 3 个带有单选选项的选择列表，但是当我尝试建模时使用 asp-for="@Model.Items" 将我的选择列表绑定到 Items 属性，我的所有单选列表都转换为多选列表。为什么？

我的看法：

<form asp-controller="Admin" asp-action="Index" method="post">
    <div class="col-12">
        <div class="row">
            <div class="form-group col-4">
                <div class="d-inline-block">
                    <label>Order By Price:</label>
                </div>
                <div class="d-inline-block">
                    <select class="form-control" asp-for="@Model.Items" style="width:150px">
                        <option value="Ascending">Ascending</option>
                        <option value="Descending">Descending</option>
                    </select>
                </div>

            </div>
            <div class="form-group col-4">
                <div class="d-inline-block">
                    <label>Order By Name:</label>
                </div>
                <div class="d-inline-block">
                    <select class="form-control" asp-for="@Model.Items"  style="width:150px">
                        <option value="A-Z">A-Z</option>
                        <option value="Z-A">Z-A</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="d-inline-block">
                    <button type="submit" class="btn btn-secondary">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</form>

控制器：

[HttpPost]
        public IActionResult Index(MangeProductsViewModel vm)
        {
            return View(new MangeProductsViewModel
            {
                Products = productRepository.Products.ToList().SortProducts(vm)
            });
        }

我的视图模型

public IEnumerable<Product> Products { get; set; }
public List<string> Items { get; set; }

当我从列表中选择项目时，它会正确添加它们，问题是用户可以从一个列表中选择多个选项

Answer 1

这是因为asp-for 调用了一个标签助手，并且对于List<string> 类型的道具，生成的HTML 将是一个选择多个。但是，这对您不起作用无论如何，因为它会给所有选择赋予相同的名称。因此，它们只会相互覆盖，而不是相互添加。

为此，您将不得不通过以下方式手动处理事情：

<select name="Items[]">
    @foreach (var option in Model.SelectList1Options)
    {
        <option value="@option.Value">@option.Text</option>
    }
</select>

对于每个下拉菜单。

Answer 2

试试这个！

在您的 HttpGet 方法中创建一个长度为 3 的新列表并将其分配给模型的 Items 属性并将模型传递给查看。

并在视图中写 asp-for 如下

asp-for="@Model.Items[0]"

asp-for=“@Model.Items[1]”

asp-for="@Model.Items[2]"

Answer 3

原因是你使用了asp-for="@Model.Items"，因为你的item类型是List<string>，所以下拉列表设置为多选。

只需改用name="Items"：

<form asp-controller="Managers" asp-action="SelectTest" method="post">
    <div class="col-12">
        <div class="row">
            <div class="form-group col-4">
                <div class="d-inline-block">
                    <label>Order By Price:</label>
                </div>
                <div class="d-inline-block">
                    <select class="form-control" name="Items" style="width:150px">
                        <option value="Ascending">Ascending</option>
                        <option value="Descending">Descending</option>
                    </select>
                </div>

            </div>
            <div class="form-group col-4">
                <div class="d-inline-block">
                    <label>Order By Name:</label>
                </div>
                <div class="d-inline-block">
                    <select class="form-control" name="Items" style="width:150px">
                        <option value="A-Z">A-Z</option>
                        <option value="Z-A">Z-A</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="d-inline-block">
                    <button type="submit" class="btn btn-secondary">Confirm</button>
                </div>
            </div>
        </div>
    </div>
</form>

结果：