从视图的提交按钮调用 post 方法后，如何保留表的选定行

Question

After calling the post method from the controller, the selected rows of the table is disappeared. I am trying to keep the selected rows as it is even after post method ReinstateEmployee() calling from the server. I am looking for someone help.

Here is the code

Model class I am keeping one more attribute to keep selected record

public class EmployeeReinstateVM
{
        public List<string> selectedEmployeeId { get; set; }
} 

Controller

[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult ReinstateEmployee(string btnsubmit, string btnActivate,  EmployeeReinstateVM model)
{
    var selectedEmployeeId = model.selectedEmployeeId;
    return view()
}

View file

<style>
 .selectable-row.selected {
        background-color: #ddd;
    }
</style>
<table class="table table-bordered table-light">
     <tbody>
                        
           foreach (var item in Model.employees)
           {

             <tr class="selectable-row" employee-id="@item.EmployeeID">
                 <td>@item.EmployeeID</td>
                 <td>@item.DepotName</td>
                 <td>@item.EmployeeName</td>
                 <td>@item.EmpLeaveDate</td>
            </tr>
          }
     </tbody>
</table>
<input type="hidden" id="selectedEmployeeId" name="selectedEmployeeId" value="">
<button type="submit" class="btn btn-primary form-control" id="btnSave" name="btnActivate" value="update">
         List Leavers
</button>
<script type="text/javascript">
$(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;
                });
            }
        });
        
        $("#btnSave").click(function () {
            $("#selectedEmployeeId").val(employeeIds);
            console.log($("#selectedEmployeeId").val());
        });

    });
}
</script>

Answer 1

return view()

If we use this, we will refresh the view.

I have a suggestion that you can use ajax to post your form, then we can keep the selected rows.

I test your code, but I cannot change the row background-color, and I change the color.You can refer to it.

In controller:

        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult ReinstateEmployee(string btnsubmit, string btnActivate, EmployeeReinstateVM model)
        {
            //var selectedEmployeeId = model.selectedEmployeeId;
            //return View();
            return Json(btnsubmit);
        }

In the view:

   $("#btnSave").click(function () {
            $("#selectedEmployeeId").val(employeeIds);
            console.log($("#selectedEmployeeId").val());
            $.ajax({
                type: "POST",
                url: "/Keepselected/ReinstateEmployee",
                data: { "btnsubmit": "aa" },
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                success: function (response) {                 
                   alert(response);
                }

            });
        });

result: