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