ASP.NET MVC无需选中即可提交ListBox全部值的最优实现方案

相关场景参考：

核心需求：点击提交/保存按钮时，无需手动选中ListBox内的选项，即可提交所有选项的值。

该需求可以通过Html Helper + jQuery的组合实现，两种常用实现方案如下：

方案1：提交前自动全选（最优推荐） #

完全适配ASP.NET MVC原生模型绑定规则，代码量最小，维护成本最低。

实现步骤 #

1. 用Html Helper生成ListBox控件，指定绑定属性和控件ID：

// 对应ViewModel需要提前定义两个属性：
// 用来接收提交结果的集合属性
// public List<string> SelectedItems { get; set; }
// 用来渲染ListBox选项的集合
// public IEnumerable<SelectListItem> AllItems { get; set; }
@Html.ListBoxFor(m => m.SelectedItems, Model.AllItems, new { id = "targetListBox", multiple = "multiple" })

2. 绑定表单提交事件，提交前自动将ListBox所有选项设为选中状态：

$('form').submit(function () {
    // 全选所有option，MVC会自动把选中值绑定到SelectedItems属性
    $('#targetListBox option').prop('selected', true);
    return true;
});

优势 #

• 完全复用MVC原生模型绑定逻辑，后端不需要额外做数据解析
• 代码量极少，逻辑简单不易出错
• 无论ListBox选项是后端渲染还是前端动态增删，都可以正常获取所有值

方案2：隐藏域批量提交 #

如果不想让用户感知到全选的视觉变化，可以选择该方案。

实现步骤 #

1. 在表单内新增隐藏域，用来存储ListBox所有值：

<input type="hidden" name="AllListBoxValues" id="AllListBoxValues" />

2. 提交前遍历ListBox所有选项，将值存入隐藏域：

$('form').submit(function () {
    const allValues = $('#targetListBox option').map(function () {
        return $(this).val();
    }).get().join(',');
    $('#AllListBoxValues').val(allValues);
    return true;
});

3. 后端Action接收后拆分即可得到所有值：

[HttpPost]
public ActionResult Submit(string AllListBoxValues)
{
    List<string> allItems = AllListBoxValues.Split(',').ToList();
    // 后续业务逻辑
}

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