AJAX 发布到 Razor 页面中的处理函数答案

【问题标题】：AJAX Post to handler functions in Razor pagesAJAX 发布到 Razor 页面中的处理函数
【发布时间】：2021-01-26 08:52:30
【问题描述】：

所以情况是这样的：

我在我的 .cshtml 文件中使用数据表。我已经设法通过模态添加记录，但问题是当我想填充模态以编辑一行中的数据时。我不希望从行中获取数据，而是执行 Ajax 请求来获取数据。下面显示了我的表的结构

<table id="example" class="table table-striped table-bordered dt-responsive display nowrap" cellspacing="0">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                <th>Email</th>
                <th>Status</th>
                <th>Roles</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var user in Model.Users)
            {
            <tr>
                <td>@user.FirstName</td>
                <td>@user.LastName</td>
                <td>@user.UserName</td>
                <td>@user.Email</td>
                <td>@user.status</td>
                <td>
                    @{ if (user.Roles.Contains("SuperAdmin"))
                        {
                            <span class="badge badge-danger">SA</span> }
                        else if (user.Roles.Contains("Admin"))
                        {
                            <span class="badge badge-danger">ADMIN</span> }
                        else if (user.Roles.Contains("Moderator"))
                        {
                            <span class="badge badge-warning">MOD</span> }
                        else if (user.Roles.Contains("Basic"))
                        {
                            <span class="badge badge-success">BASIC</span> } 
                        
                        }
                </td>
                 
                <td>
                        @{ if (user.Roles.Contains("SuperAdmin"))
                                        {
                            <span class="badge badge-warning">Locked</span> }
                        else
                        {

                            <button class="btn btn-sm btn-dark details" id="useredit" data-id="@user.UserId">Edit</button>
                            <a class="btn btn-primary btn-sm" asp-area="Identity" asp-page="/Account/UserRoles" asp-route-userId="@user.UserId">Manage Roles</a> } 
                        }
                </td>
            </tr>}
        </tbody>
    </table>

当我点击编辑按钮时，会执行以下代码

$("button.details").on('click', function () {
        console.log({ "id": $(this).attr("data-id") });
        var userid = $(this).attr("data-id");
            $.ajax({
                type: "POST",
                url: "/Identity/Account/Users?handler=UsersAsJson",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: { id:userid },
                contentType: "json; charset=utf-8",
                success: function (regions) {
                    console.log(regions)
                },
                failure: function (response) {
                    alert(response);
                }
            });
    });

这是下面的处理函数

public async Task<IActionResult> OnPostUsersAsJsonAsync(string? id)
    {

        System.Diagnostics.Debug.WriteLine("id passed",id);
        
        
        return new JsonResult(id);
    }

谁能告诉我如何将 ajax 请求中的 id 传递给处理函数？导致目前它没有发布到 OnPostUsersAsJsonAsync 函数。

另请注意，我尝试过 getJSON 没有任何成功。

【问题讨论】：

this post 用于内联 ajax 请求，但它可能会有所帮助。

标签： ajax asp.net-core datatables razor-pages

【解决方案1】：

如果您没有表格，请确保您已添加如下令牌：

<button class="btn btn-sm btn-dark details" id="useredit" data-id="@user.UserId">Edit</button>
@Html.AntiForgeryToken()

改变你的js如下：

@section Scripts
{
    <script>
        $("button.details").on('click', function () {
            console.log({ "id": $(this).attr("data-id") });
            var userid = $(this).attr("data-id");
            $.ajax({
                type: "POST",
                url: "/Identity/Account/Users?handler=UsersAsJson",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: { id: userid },
                //contentType: "json; charset=utf-8",  //remove this line
                success: function (regions) {
                    console.log(regions)
                },
                failure: function (response) {
                    alert(response);
                }
            });
        });
    </script>
}

Startup.cs：

services.AddRazorPages();
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");  //be sure add this line

结果：

【讨论】：