如何在JavaScript中调用Asp.NET PageModel？POST请求400报错求助

一、POST请求400错误的核心原因及修复 #

1. 缺失CSRF令牌验证 #

ASP.NET Razor Pages默认强制启用CSRF保护，所有POST请求必须携带__RequestVerificationToken，否则直接返回400错误。

2. 参数绑定格式不匹配 #

后端OnPostAdd方法使用[FromBody] string msg，但前端发送的是application/x-www-form-urlencoded格式的表单数据，而非JSON格式，导致参数无法正确绑定。

二、快速修复代码 #

前端脚本与页面修改 #

先在循环的表单内添加CSRF令牌，再调整fetch请求携带令牌：

@foreach (var journal in Model.journals)
{
    <form method="post">
        @Html.AntiForgeryToken() <!-- 新增CSRF令牌 -->
        <tr onclick="RazorFunction('test')">
            <td>@journal.name</td>
            <td>@journal.type.ToString()</td>
        </tr>
    </form>
}

@section Scripts
{
    <script>
        function RazorFunction(msg) {
            // 获取页面中的CSRF令牌
            const token = document.querySelector('input[name="__RequestVerificationToken"]').value;
            
            // 修复后的POST请求
            fetch('?handler=Add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'RequestVerificationToken': token // 携带令牌
                },
                body: 'msg=' + encodeURIComponent(msg),
            });
        }
    </script>
}

后端代码修改 #

去掉[FromBody]，让后端直接绑定表单参数：

public void OnPostAdd(string msg)
{
    Console.WriteLine("OnPostAdd!!!!!! : " + msg);
}

如果偏好JSON格式传递数据，可调整为：

• 前端：

fetch('?handler=Add', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'RequestVerificationToken': token
    },
    body: JSON.stringify(msg),
});

• 后端保留[FromBody]：

public void OnPostAdd([FromBody] string msg)
{
    Console.WriteLine("OnPostAdd!!!!!! : " + msg);
}

三、更优实现方案 #

1. 避免每行嵌套表单（减少DOM冗余） #

将表单移到表格外，通过隐藏字段传递行数据：

<table class="table">
    <tbody>
        @foreach (var journal in Model.journals)
        {
            <tr data-journal-id="@journal.id" onclick="handleRowClick(this)">
                <td>@journal.name</td>
                <td>@journal.type.ToString()</td>
            </tr>
        }
    </tbody>
</table>
<!-- 单个表单复用 -->
<form id="journalForm" asp-page-handler="Add" method="post">
    <input type="hidden" name="msg" id="msgInput" />
    <input type="hidden" name="journalId" id="journalIdInput" />
</form>

配套脚本：

function handleRowClick(row) {
    const journalId = row.dataset.journalId;
    document.getElementById('msgInput').value = 'test';
    document.getElementById('journalIdInput').value = journalId;
    document.getElementById('journalForm').submit();
}

后端接收多参数：

public void OnPostAdd(string msg, int journalId)
{
    Console.WriteLine($"OnPostAdd: {msg}, JournalID: {journalId}");
}

2. 异步响应处理 #

将后端方法改为返回JSON结果，方便前端处理操作反馈：

public IActionResult OnPostAdd(string msg)
{
    Console.WriteLine("OnPostAdd!!!!!! : " + msg);
    return new JsonResult(new { success = true, message = "操作完成" });
}

前端添加响应处理：

fetch('?handler=Add', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'RequestVerificationToken': token
    },
    body: 'msg=' + encodeURIComponent(msg),
})
.then(res => res.json())
.then(data => {
    if (data.success) {
        alert(data.message);
        // 可在此刷新页面或更新表格
    }
});

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