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

nkkqxpd9  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(168)

从控制器调用post方法后,表中选定的行消失。我试图保持选定的行,因为它是即使在post方法ReinstateEmployee()从服务器调用。我正在寻找人的帮助。
下面是代码
模型类我保留了一个属性来保留所选记录

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

主计长

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

查看文件

<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>
vlju58qv

vlju58qv1#

返回视图()
如果使用此选项,则将刷新视图。
我有一个建议,你可以使用** AJAX **来发布你的表单,然后我们可以保留选中的行。
我测试了你的代码,但是我不能改变行背景色,我改变了颜色。你可以参考它。
在控制器中:

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

在视图中:

$("#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);
                }

            });
        });

结果:

相关问题