Asp.Net Core Razor Pages Ajax调用OnPostshiftDataUp：400错误/断点未命中

1. 后端PageModel实现 #

确保PageModel继承PageModel，方法命名严格遵循Razor Pages约定，同时正确接收前端数据：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace YourProjectNamespace.Pages
{
    public class ShiftManageModel : PageModel
    {
        // 定义接收数据的模型
        public class ShiftFormData
        {
            public int ShiftId { get; set; }
            public string ShiftName { get; set; }
            public string WorkTime { get; set; }
        }

        public void OnGet()
        {
            // 页面初始化逻辑
        }

        // 注意命名规则：OnPost[动作名]，首字母大写，确保路由匹配
        public IActionResult OnPostShiftDataUp(ShiftFormData formData)
        {
            if (!ModelState.IsValid)
            {
                return new JsonResult(new { Success = false, Msg = "数据格式错误" });
            }

            // 这里编写你的数据保存逻辑（比如更新数据库）
            // 示例：模拟保存成功
            return new JsonResult(new { Success = true, Msg = "班次信息更新成功" });
        }
    }
}

2. 前端Razor页面（ShiftManage.cshtml） #

包含Bootstrap模态框、表单及Ajax提交逻辑，确保防伪令牌正确传递：

@page
@model YourProjectNamespace.Pages.ShiftManageModel
@{
    ViewData["Title"] = "班次管理";
}

<h3>班次信息</h3>

<!-- 触发修改模态框的按钮 -->
<button class="btn btn-warning mt-3" data-bs-toggle="modal" data-bs-target="#editShiftModal">
    修改当前班次
</button>

<!-- 页面数据展示区 -->
<div id="shiftDisplay" class="mt-4 p-3 border rounded">
    班次名称：<span id="currentShiftName">早班</span><br>
    工作时间：<span id="currentWorkTime">08:00-17:00</span>
</div>

<!-- Bootstrap 修改模态框 -->
<div class="modal fade" id="editShiftModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑班次</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- 自动生成防伪令牌：asp-antiforgery="true" -->
                <form id="editShiftForm" asp-antiforgery="true">
                    <input type="hidden" name="formData.ShiftId" value="1">
                    <div class="mb-3">
                        <label class="form-label">班次名称</label>
                        <input type="text" class="form-control" name="formData.ShiftName" value="早班">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">工作时间</label>
                        <input type="text" class="form-control" name="formData.WorkTime" value="08:00-17:00">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存修改</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('saveBtn').addEventListener('click', function() {
            const form = document.getElementById('editShiftForm');
            const formData = new FormData(form);
            
            fetch(window.location.href, {
                method: 'POST',
                headers: {
                    // 必须添加此头，告知后端是Ajax请求
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(res => res.json())
            .then(result => {
                if (result.Success) {
                    // 更新页面展示数据
                    const shiftNameInput = form.querySelector('[name="formData.ShiftName"]');
                    const workTimeInput = form.querySelector('[name="formData.WorkTime"]');
                    document.getElementById('currentShiftName').textContent = shiftNameInput.value;
                    document.getElementById('currentWorkTime').textContent = workTimeInput.value;
                    
                    // 关闭模态框
                    const modal = bootstrap.Modal.getInstance(document.getElementById('editShiftModal'));
                    modal.hide();
                    alert(result.Msg);
                } else {
                    alert(result.Msg);
                }
            })
            .catch(err => {
                console.error('请求错误:', err);
                alert('保存失败，请检查网络或重试');
            });
        });
    </script>
}

3. 关键注意事项 #

• 方法命名：Razor Pages的POST方法必须遵循OnPost[动作名]格式，动作名首字母大写（如OnPostShiftDataUp），否则路由无法匹配，导致方法不触发。
• 防伪令牌：通过asp-antiforgery="true"自动生成令牌，FormData会自动包含该字段，无需手动拼接，避免400错误。
• Ajax标识：必须添加X-Requested-With: XMLHttpRequest请求头，后端会识别为Ajax请求，返回JSON而非整页内容。
• 模型绑定：表单输入框的name属性需与后端接收模型的属性对应（如formData.ShiftName对应ShiftFormData的ShiftName），确保数据正确绑定。

4. 问题排查指南 #

• 400错误：检查防伪令牌是否存在、请求头是否包含X-Requested-With、模型属性是否匹配。
• 200但方法未触发：检查方法命名是否符合约定、请求URL是否为当前页面地址、是否存在路由冲突。

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