表单提交后能否将ASP.NET Razor下拉列表作为数组绑定到模型属性？

核心结论 #

单个普通<select>仅能提交单个选中值，无法直接绑定为模型列表数组；若需获取多个选中项组成的数组，需使用多选下拉框并配合正确的表单字段命名规则。

当前代码的问题及修复 #

你提交后模型列表为null、FruitId/FruitName绑定失败，核心原因是视图层的表单字段配置错误：

1. Select的name属性配置错误 #

视图中name="@Model.FruitId"是错误写法，这会把当前模型的FruitId值作为表单字段名（比如FruitId为0时，字段名会变成0），导致后端无法匹配到ViewModel的FruitId属性。

修复后的视图代码：

@model Models.FruitViewModel

<form method="post" asp-controller="Home" asp-action="Index">
    <select id="ddlFruits" name="FruitId" asp-items="Model.FruitLists">
        <option value="0">Please select</option>
    </select>
    <!-- 通过JS同步选中项文本到隐藏字段，实现FruitName的提交 -->
    <input type="hidden" name="FruitName" id="hdnFruitName" />
    <input type="submit" value="Submit" />

    <script>
        document.getElementById('ddlFruits').addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            document.getElementById('hdnFruitName').value = selectedOption.text;
        });
    </script>
</form>

2. FruitName隐藏字段未赋值 #

原代码中FruitName隐藏字段无实际值，需通过JavaScript监听下拉框的change事件，将选中项的文本同步到隐藏字段，后端才能接收到FruitName的值。

实现选中项为模型列表数组的方案 #

若需提交多个选中项（即数组），需按以下步骤修改：

1. 更新ViewModel，添加集合属性 #

public class FruitViewModel
{
    public int FruitId { get; set; }
    public string FruitName { get; set; }
    public List<SelectListItem> FruitLists { get; set; }
    // 新增用于接收多选ID的集合属性
    public List<int> SelectedFruitIds { get; set; }
}

2. 修改视图，启用多选下拉框 #

给<select>添加multiple属性，并将name设置为SelectedFruitIds（与ViewModel的集合属性名一致）：

@model Models.FruitViewModel

<form method="post" asp-controller="Home" asp-action="Index">
    <!-- 按住Ctrl键可多选选项 -->
    <select id="ddlFruits" name="SelectedFruitIds" multiple asp-items="Model.FruitLists">
        <option value="0">Please select</option>
    </select>
    <input type="submit" value="Submit" />
</form>

3. 调整后端Post方法 #

[HttpPost]
public IActionResult Index(FruitViewModel fruitViewModel)
{
    // SelectedFruitIds会包含所有选中项的ID数组
    ViewBag.Message = "Selected Fruit IDs: " + string.Join(", ", fruitViewModel.SelectedFruitIds);
    return View(fruitViewModel);
}

修改完成后，提交表单即可在后端接收到选中的多个ID组成的列表数组。

内容的提问来源于stack exchange，提问作者Abdul