点击Approve按钮无法从Razor Pages表单获取模型数据求助

我尝试从Razor页面（UserRequests.cshtml）把ListOfUserModel数据传到后端类（UserRequests.cshtml.cs），但点击Approve按钮传递特定行记录时，Ajax总是进入错误函数并弹出提示框，求帮忙排查问题。

页面示例 #

UserRequests.cshtml代码 #

@page
@model UserRequestsModel
@{
    Layout = "~/Pages/Shared/_LayoutAdmin.cshtml";
}

<h5>Users Requests</h5>
<br>

<table id="usersTable" class="table table-dark" style="width: 100%;">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Company Email</th>
      <th style="width:20%">Approve/Deny</th>
    </tr>
  </thead>
  <tbody>
      @foreach(var user in Model.userList)
      {
      <tr>
      <td>@user.id</td>
      <td class="tdName">@user.Name</td>
      <td class="tdCompanyEmail">@user.CompanyEmail</td>
      <td>
        <button type="submit" class="btnApprove btn btn-success">Approve</button>
      </td>
      <td>
        <button type="submit" class="btnDeny btn btn-danger">Deny</button>
      </td>
      </tr>
      }
  </tbody>
</table>

<script type="text/javascript">

    $(" .btnApprove").click(function () {
        var ListOfUserModel = new Array();
        var row = $(this).closest('tr');
        var Name = row.find('.tdName').text();
        var CompanyEmail = row.find('.tdCompanyEmail').text();

        var UserModel = {};
        UserModel.Name = Name;
        UserModel.CompanyEmail = CompanyEmail;

        ListOfUserModel.push(UserModel);

        $.ajax({
            url: "/Admin/UserRequests",
            type: 'post',
            contentType: "application/json; charset=utf-8",
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            data: JSON.stringify(ListOfUserModel),
            success: function (data) {
                alert("Users Data Submitted Successfully");
            },
            error: function () {
                alert("SOME PROB.");
            }
        });
    });

</script>

UserRequests.cshtml.cs代码 #

using Tool.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Tool.Pages.Admin
{
    public class UserRequestsModel : PageModel
    {
        [BindProperty]
        public UserModel NewUser { get; set; }

        public List<UserModel> userList = new List<UserModel>();
       

        public void OnGet()
        {
        }

        public IActionResult OnPost([FromBody]IEnumerable<UserModel> ListOfUserModel)
        {
            return null;
        }
    }
}

UserModel.cs代码 #

namespace Tool.Models
{
    public class UserModel
    {
        public int id { get; set; }
        public string? Name { get; set; }    
        public string? CompanyEmail { get; set; }
    }
}

问题排查与修复建议 #

1. 按钮类型触发默认表单提交 #

按钮设置为type="submit"，点击时会触发页面表单的默认提交行为，直接中断Ajax请求。将按钮类型改为type="button"：

<button type="button" class="btnApprove btn btn-success">Approve</button>
<button type="button" class="btnDeny btn btn-danger">Deny</button>

2. 缺失防伪造令牌 #

Razor Pages默认要求POST请求携带防伪造令牌，当前页面未生成对应的__RequestVerificationToken输入框，导致令牌验证失败。在页面表格上方添加令牌生成代码：

@Html.AntiForgeryToken()

3. 后端返回无效响应 #

OnPost方法返回null，不符合IActionResult的规范，会导致请求异常。修改为返回有效响应：

public IActionResult OnPost([FromBody]IEnumerable<UserModel> ListOfUserModel)
{
    // 这里添加你的业务处理逻辑
    return Ok();
}

4. 优化数据传递逻辑（可选） #

既然每次只提交单条用户数据，没必要用数组包裹，简化代码：

• JS部分调整：

$(".btnApprove").click(function () {
    var row = $(this).closest('tr');
    var userModel = {
        Name: row.find('.tdName').text().trim(),
        CompanyEmail: row.find('.tdCompanyEmail').text().trim()
    };

    $.ajax({
        url: "/Admin/UserRequests",
        type: 'post',
        contentType: "application/json; charset=utf-8",
        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
        data: JSON.stringify(userModel),
        success: function (data) {
            alert("Users Data Submitted Successfully");
        },
        error: function (xhr, status, error) {
            // 打印错误信息便于精准排查
            console.log(xhr.responseText);
            alert("SOME PROB.");
        }
    });
});

• 后端参数对应修改：

public IActionResult OnPost([FromBody]UserModel userModel)
{
    // 业务处理逻辑
    return Ok();
}

5. 调试错误详情 #

在Ajax的error函数中添加参数，打印具体错误信息，方便定位问题：

error: function (xhr, status, error) {
    console.log("状态码：" + xhr.status);
    console.log("错误信息：" + error);
    console.log("响应内容：" + xhr.responseText);
    alert("SOME PROB.");
}

内容的提问来源于stack exchange，提问作者Lucifer