在ASP.NETCore專案中從jQueryDatatable和資料庫中洗掉資料的問題-有解無憂

我正在使用 jQuery Datatable 來可視化每個用戶完成的付款資訊。我在表格中創建了“編輯”和“洗掉”按鈕。但是，洗掉按鈕不起作用 - 我認為我沒有正確觸發我的 PaymentsController 的 Action 方法。我的 paymentTable.js 有以下腳本：

$(document).ready(function () {
    $("#paymentsTable").DataTable({
        "processing": true,
        "responsive": true,
        "serverSide": true,
        "filter": true,
        "language": {
            "lengthMenu": "Показване на _MENU_ плащания на страница",
            "zeroRecords": "Няма открити съвпадения",
            "info": "Открити са _PAGE_ от _PAGES_ плащания",
            "infoEmpty": "Няма плащания",
            "infoFiltered": "(претърсено от _MAX_ плащания общо)",
        },
        "ajax": {
            "url": "/Users/GetUserPayments",
            "beforeSend": function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [
            {
                "targets": [0],
                "visible": false,
                "searchable": false,
                "className": "dt-body-center",
            },
            {
                "targets": 1,
                "render": function (data, type, row) {
                    return (data)
                        ? moment(data, "YYYY-MM-DD").format("DD/MM/YYYY")
                        : null;
                }
            },
        ],
        "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "dateOfPayment", "name": "DateOfPayment", "autoWidth": true },
            { "data": "description", "name": "Description", "autoWidth": true },
            { "data": "amount", "name": "Amount", "autoWidth": true },
            {
                "render": function (data, type, full, meta) {
                    return "<a class='btn btn-secondary border border-white' onclick=GoToEditView('"   full.id   "'); >Edit</a> <a class='btn btn-secondary border border-white' onclick=DeleteData('"   full.id   "'); >Delete</a>";
                },
            },
        ]
    });
});

function GoToEditView(id) {
    window.location.href = 'https://localhost:44319/Payments/Edit/'   id;
}

function DeleteData(id) {
    if (confirm("Наистина ли желаете да изтриете данните за това разплащане?")) {
        Delete(id);
    } else {
        return false;
    }
}

function Delete(id) {
    $.ajax({
        type: 'POST',
        url: "/Payments/Delete",
        data: { id: id },
        success: function (r) {
            window.location.reload();
        }
    });
}

我的控制器有以下代碼：

[Authorize(Roles = GlobalConstants.AdministratorRoleName)]
public class PaymentsController : Controller
{
    private readonly IPaymentsService paymentsService;

    public PaymentsController(
        IPaymentsService paymentsService)
    {
        this.paymentsService = paymentsService;
    }

    public IActionResult Create(string id)
    {
        return this.View();
    }

    [HttpPost]
    public async Task<IActionResult> Create(string id, PaymentInputModel input)
    {
        if (!this.ModelState.IsValid)
        {
            return this.View(input);
        }

        try
        {
            await this.paymentsService.CreateAsync(input, id);
        }
        catch (Exception e)
        {
            this.ModelState.AddModelError(string.Empty, e.Message);
            return this.View(input);
        }

        return this.Redirect("/Users/ById/"   id);
    }

    [HttpPost]
    public async Task<IActionResult> Delete(string id)
    {
        await this.paymentsService.DeleteAsync(id);

        var userId = this.HttpContext.Session.GetString("userId");

        return this.RedirectToAction("/Users/ById/"   userId);
    }

    public IActionResult Edit(string id)
    {
        var inputModel = this.paymentsService.GetById<PaymentInputModel>(id);

        return this.View(inputModel);
    }

    [HttpPost]
    public async Task<IActionResult> Edit(string id, PaymentInputModel input)
    {
        if (!this.ModelState.IsValid)
        {
            return this.View(input);
        }

        await this.paymentsService.UpdateAsync(id, input);

        id = input.UserId;

        return this.RedirectToAction(nameof(UsersController.ById), "Users", new { id });
    }
}

這是我的 ById.cshtml 檔案（用戶的個人資料視圖），由 UsersController 觸發。這是我希望我的付款表可視化的地方。

@model ChessBurgas64.Web.ViewModels.Users.UserProfileViewModel
@using ChessBurgas64.Common
@using ChessBurgas64.Data.Models.Enums

@{
    this.ViewData["Title"] = String.Concat(Model.FirstName, " ", Model.MiddleName, " ", Model.LastName);
}

<link href="~/lib/datatables.net-bs5/dataTables.bootstrap5.min.css" rel="stylesheet" />

<h1 class="text-white text-center display-5">@GlobalConstants.Profile</h1>

<div class="container-fluid background-dragon-red border border-3 border-white pt-2 mb-5">
    <h3 class="display-6 text-white text-center">@this.ViewData["Title"]</h3>
</div>


<div class="row container-fluid">
    <div class="col-md-6">
        <h4 class="display-6 text-white text-center">@GlobalConstants.PersonalData</h4>
        <hr class="border border-5 border-white text-white" />

        <div class="bg-white border border-danger border-5 pt-2 text-left px-3 text-left">
            <p>@GlobalConstants.Gender: <i class="fa-solid fa-mars-and-venus"></i> @Model.Gender</p>
            <hr class="text-dark" />
            <p>@GlobalConstants.BirthDate: <i class="fa-solid fa-cake-candles"></i> @Model.BirthDate.ToShortDateString()</p>
            <hr class="text-dark" />

            @if (Model.Member != null)
            {
                <p>@GlobalConstants.Address: <i class="fa-solid fa-location-dot"></i> @Model.Member.Address</p>
                <hr class="text-dark" />
                <p>@GlobalConstants.School: <i class="fa-solid fa-school"></i> @Model.Member.School</p>
                <hr class="text-dark" />
            }

            <p>@GlobalConstants.ClubStatus: <i class="fa-solid fa-user"></i> @Model.ClubStatus</p>
            <hr class="text-dark" />
        </div>
    </div>

    <div class="col-md-6">
        <h4 class="display-6 text-white text-center">@GlobalConstants.ClubData</h4>
        <hr class="border border-5 border-white text-white" />

        <div class="bg-white border border-danger border-5 pt-2 text-left px-3">
            @if (Model.Member != null)
            {
                <p>@GlobalConstants.ClubRating: <i class="fa-solid fa-star"></i> @Model.Member.ClubRating</p>
                <hr class="text-dark" />
                <p>@GlobalConstants.DateOfJoiningTheClub: <i class="fa-solid fa-flag-checkered"></i> @Model.Member.DateOfJoiningTheClub.ToShortDateString()</p>
                <hr class="text-dark" />

                @if (Model.Member.Group != null)
                {
                    <p>@GlobalConstants.Group: <i class="fa-solid fa-user-group"></i> @Model.Member.Group.Name</p>
                    <hr class="text-dark" />
                    <p>@GlobalConstants.DateOfJoiningCurrentGroup: <i class="fas fa-calendar-alt"></i> @Model.Member.DateOfJoiningCurrentGroup.ToShortDateString()</p>
                    <hr class="text-dark" />
                }
                else
                {
                    <p>@GlobalConstants.Group: <i class="fa-solid fa-user-group"></i> @GlobalConstants.None</p>
                    <hr class="text-dark" />
                }

                <p>@GlobalConstants.LastAttendance: <i class="fas fa-calendar-alt"></i> @Model.Member.DateOfLastAttendance.ToShortDateString()</p>
                <hr class="text-dark" />
            }
            else
            {
                @GlobalConstants.MemberStillNotAddedToTheSystem
            }
        </div>
    </div>

    <div class="text-center my-2">
        @if (Model.ClubStatus == ClubStatus.Треньор.ToString())
        {
            <a class="btn btn-primary" asp-action="EditTrainerInfo" asp-route-id="@Model.Id">@GlobalConstants.Edit</a>
        }
        else
        {
            <a class="btn btn-primary" asp-action="EditMemberInfo" asp-route-id="@Model.Id">@GlobalConstants.Edit</a>
        }
    </div>

    <div class="container-fluid text-center">
        <h4 class="display-6 text-white text-center mt-3">@GlobalConstants.Payments</h4>
        <hr class="border border-5 border-white text-white" />
        <div class="text-white py-2 container-fluid" style="width:100%; margin:0 auto;">
            <table id="paymentsTable" class="bg-white table-bordered table-responsive text-dark compact border border-5 border-danger text-center" width="100%" cellspacing="0">
                <thead class="dt-head-center">
                    <tr>
                        <th class="dt-head-center">Id</th>
                        <th class="dt-head-center">@GlobalConstants.DateOfPayment</th>
                        <th class="dt-head-center">@GlobalConstants.PaidFor</th>
                        <th class="dt-head-center">@GlobalConstants.PaidAmount</th>
                        <th class="dt-head-center">@GlobalConstants.Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
        <a class="btn btn-primary" asp-area="" asp-controller="Payments" asp-action="Create" asp-route-id="@Model.Id">@GlobalConstants.AddPayment</a>
    </div>
</div>

@Html.AntiForgeryToken()

@section Scripts
{
    <script src="~/lib/datatables.net/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables.net-bs5/dataTables.bootstrap5.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src=" //cdn.datatables.net/plug-ins/1.10.11/sorting/datetime-moment.js"></script>
    <script src="~/js/paymentsTable.js"></script>
}

在除錯時，我注意到單擊“洗掉”按鈕后，我的 PaymentsController 中的“洗掉”操作方法根本沒有觸發，并且狀態碼 400 出現錯誤。我不確定如何準確呼叫此方法，因為我沒有“洗掉視圖”。我是新手，所以我可能遺漏了一些重要的東西。我嘗試了不同的解決方案，但都沒有奏效。請幫忙！

uj5u.com熱心網友回復：

添加令牌，嘗試如下代碼來更改您的洗掉 ajax：

function Delete(id) {
    $.ajax({
        type: 'POST',
        url: "/Payments/Delete",
        "beforeSend": function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
        data: { id: id },
        success: function (r) {
            window.location.reload();
        }
    });
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441731.html

標籤：javascript C＃阿贾克斯 asp.net 核心数据表

上一篇：通過Ajax將多個base64資料陣列傳遞給PHP腳本？

下一篇：MicrosoftGraph：獲取用戶授權碼時出現問題