如何将表格选中行的Employee ID存入EmployeeReinstateVM.selectedEmployeeId？

问题背景 #

点击「btnUpdate」按钮时，需将表格选中行的employeeIds存入EmployeeReinstateVM模型的selectedEmployeeId字段（List类型），但当前做法是将ID拼成逗号分隔的字符串存入单个隐藏输入框，导致后端无法正确绑定为List集合。

解决方案 #

ASP.NET MVC中，要绑定List<string>类型字段，需为每个元素提供同名的表单控件（name属性为selectedEmployeeId）。以下是具体修改方案：

1. 修改视图代码 #

移除原单个隐藏输入框，在表单内预留容器用于存放动态生成的隐藏控件：

<style>
.selectable-row.selected {
    background-color: #ddd;
}
</style>
@model EmployeeReinstateVM
<form method="post">
    <table>
        @foreach (var item in Model.employees)
        {
            <tr class="selectable-row @(Model.selectedEmployeeId.Contains(item.EmployeeID.ToString()) ? "selected" :"")" 
                employee-id="@item.EmployeeID">
                <td>@item.EmployeeID</td>
                <td>@item.EmployeeName</td>
            </tr>
        }
    </table>

    <!-- 新增容器，用于存放动态生成的隐藏控件 -->
    <div id="selectedIdsContainer"></div>

    <button type="submit" class="btn btn-primary form-control" id="btnUpdate" name="btnActivate" value="update">
        Update
    </button>
</form>

2. 修改JavaScript代码 #

点击提交按钮时，清空容器内旧控件，为每个选中的员工ID生成对应隐藏输入框：

$(document).ready(function() {
    var employeeIds = [];
    $(".selectable-row").click(function() {
        $(this).toggleClass("selected");
        var employeeId = $(this).attr('employee-id');

        if ($(this).hasClass("selected")) {
            employeeIds.push(employeeId);
        } else {
            employeeIds = employeeIds.filter(function(id) {
                return id !== employeeId;
            });
        }
    });

    $("#btnUpdate").click(function() {
        var container = $("#selectedIdsContainer");
        // 清空之前的隐藏控件
        container.empty();
        // 为每个ID生成隐藏输入框
        employeeIds.forEach(function(id) {
            $('<input>').attr({
                type: 'hidden',
                name: 'selectedEmployeeId',
                value: id
            }).appendTo(container);
        });
    });
})

3. 后端控制器接收 #

控制器Post方法无需修改，直接接收EmployeeReinstateVM模型即可：

[HttpPost]
public IActionResult YourActionName(EmployeeReinstateVM model)
{
    // model.selectedEmployeeId 将包含所有选中的员工ID
    // 后续业务逻辑处理
    return View(model);
}

原理说明 #

ASP.NET MVC模型绑定系统会自动收集所有name="selectedEmployeeId"的表单控件值，组装成List<string>类型的selectedEmployeeId字段，实现选中ID的正确传递。

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