调用ReinstateEmployee接口后如何保留表格选中行状态？

1. 调整控制器代码，回传选中ID列表 #

Post请求处理完成后，将选中的员工ID回传给视图模型，确保视图能获取到之前的选中数据：

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult ReinstateEmployee(string btnsubmit, string btnActivate, EmployeeReinstateVM model)
{
    // 执行你的业务逻辑，比如调用ReinstateEmployee()方法
    // ...

    // 保留选中的ID列表，回传给视图
    model.selectedEmployeeId = model.selectedEmployeeId ?? new List<string>();
    // 注意：需确保视图所需的employees数据也已正确赋值（比如从数据库重新获取或保留原数据）
    // model.employees = ...;

    return View(model);
}

2. 修改视图渲染逻辑，自动标记选中行 #

渲染表格时，判断当前员工ID是否在选中列表中，动态添加selected类：

<table class="table table-bordered table-light">
    <tbody>
        @foreach (var item in Model.employees)
        {
            <tr class="selectable-row @(Model.selectedEmployeeId?.Contains(item.EmployeeID.ToString()) == true ? "selected" : "")" employee-id="@item.EmployeeID">
                <td>@item.EmployeeID</td>
                <td>@item.DepotName</td>
                <td>@item.EmployeeName</td>
                <td>@item.EmpLeaveDate</td>
            </tr>
        }
    </tbody>
</table>

3. 同步JS初始化状态，确保选中数组与页面一致 #

页面加载时，从隐藏域读取已选中的ID，初始化数组并同步行状态：

<input type="hidden" id="selectedEmployeeId" name="selectedEmployeeId" value="@(Model.selectedEmployeeId != null ? string.Join(",", Model.selectedEmployeeId) : "")">

<script type="text/javascript">
$(document).ready(function () {
    // 从隐藏域初始化选中ID数组
    var selectedIds = $("#selectedEmployeeId").val().split(",");
    var employeeIds = selectedIds.filter(id => id !== "");

    // 页面加载时标记已选中的行
    $(".selectable-row").each(function() {
        var empId = $(this).attr('employee-id');
        if (employeeIds.includes(empId)) {
            $(this).addClass("selected");
        }
    });

    $(".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;
            });
        }
    });
    
    $("#btnSave").click(function () {
        $("#selectedEmployeeId").val(employeeIds);
    });
});
</script>

核心逻辑说明 #

Post回发后页面会重新渲染，通过将选中ID存入视图模型回传，让视图明确需要保留选中状态的行；同时在JS初始化时同步选中数组与页面行状态，保证后续操作的一致性。

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