MVC5 jQuery ajax

Question

我想选择多行，然后单击一个按钮来批准/拒绝这些行。我已经成功更新了我想在 db 中批准的行。但是当 ajax 回调时，我运行了 table.draw() 并且它没有显示保存的结果。我不知道如何获取保存的结果并刷新回 DataTable。

我也是 MVC 和 jQuery 的新手，我一直在摸索以使其几乎无法工作。您能否帮助指出我需要改进/修复什么才能使这项工作更好？

这是我的代码：

视图（表格部分）：

<table id="myDataTable" class="display">
            <thead>
                <tr>
                    <th>Clearance Name</th>
                    <th>Approved</th>
                    <th>Approver</th>
                    <th>DateTime</th>
                    <th>Deny Reason</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Request.RequestClearances)
                {
                    <tr id="@item.RequestClearanceID">
                        <td>@item.Clearance.ClearanceName</td>
                        <td>@item.IsApproved</td>
                        <td>@item.ApprovedUser</td>
                        <td>@item.ModifiedDate</td>
                        <td>@item.DenialReason</td>
                    </tr>
                }
            </tbody>
</table>
<div><input type="button" id="btnApprove" value="Approve" /><input type="button" id="btnDeny" value="Deny" /></div>

视图（jQuery 部分）：

<script>
    $(function () {
        var table = $("#myDataTable").DataTable();

        $("#myDataTable tbody").on('click', 'tr', function () {
            var tr = $(this).closest("tr");
            var rowText = tr.children("td").text();

            if (! rowText.match("True") ) {
                $(this).toggleClass('selected');
            }

        });

        $("#btnApprove").click(function () {
            var idArray = $.map(table.rows('.selected').ids(), function (item) {
                return item;
            });

            $.ajax({
                type: "POST",
                url: '@Url.Action("UpdateApproveDeny")',
                cache: false,
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ requestClearanceIDs: idArray, isApproved: "true" }),
                success: function () {
                    table.draw();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $("#message").text(JSON.stringify(jqXHR).toString());
                    alert("AJAX error: " + textStatus + ' : ' + errorThrown);
                }
            });
        });
    });
</script>

控制：

public JsonResult UpdateApproveDeny(string[] requestClearanceIDs, string isApproved)
        {
            if (requestClearanceIDs == null) return Json("fail",JsonRequestBehavior.AllowGet);
            int? requestID = 0;
            foreach (var requestClearanceID in requestClearanceIDs)
            {
                int id = 0;
                Int32.TryParse(requestClearanceID, out id);              
                requestID = rc.RequestID;
                rc.IsApproved = Convert.ToBoolean(isApproved);
                rc.ModifiedBy = User.Identity.Name;
                rc.ModifiedDate = DateTime.Now;
                rc.ApprovedUser = User.Identity.Name;
                db.SaveChanges();
            }

            return Json("success",JsonRequestBehavior.AllowGet);
        }

Answer 1

由于您以静态方式使用 DataTables，因此您需要在 AJAX 回调中替换表格内容，然后重新绑定 $("#myDataTable").DataTable()，因为原始表格将被替换。

添加局部视图

调整您的主视图以用局部视图填充您的表格。

<div id="tableData">
    @Html.Partial("_ClearancesTable", Model.Request.RequestClearances)
</div>
<div>
    <input type="button" id="btnApprove" value="Approve" />
    <input type="button" id="btnDeny" value="Deny" />
</div>

_ClearancesTable.cshtml

@model IEnumerable<RequestClearances>

<table id="myDataTable" class="display">
    @foreach (var item in Model)
    {
        ...
    }
</table>

您可以进行第二次 AJAX 调用以检索新表数据或更改您的第一个响应以返回新数据。

替换 JSON 结果以利用部分视图并将其减少到一个服务器调用。

public ActionResult UpdateApproveDeny(string[] requestClearanceIDs, string isApproved)
{
    ...
    db.SaveChanges();
    var clearances = db.GetClarances();
    return PartialView("_ClearancesTable", clearances);
}

替换并重新绑定

 success: function(partialResult) {
     $("#tableData").html(partialResult)
     $("#myDataTable").DataTable();
 }