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

MVC5 jQuery ajax

1 个答案: