Razor页面中的AJAX发布到处理程序函数

如何解决Razor页面中的AJAX发布到处理程序函数

情况是这样的：

我正在.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却没有成功。

解决方法

对于您没有表格，请确保已添加如下所示的令牌：

<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

结果：