.NET Core 7 Razor Page中Ajax调用接口填充复选框异常问题

核心原因 #

当Razor Page表单设置method="post"时，若触发Ajax的元素（如按钮、下拉框）位于表单内部，触发事件时会同时触发表单的默认POST提交行为，导致页面立即刷新——这会打断Ajax请求的执行流程，甚至直接覆盖Ajax返回后的DOM操作，表现为复选框填充失效。而移除method="post"后，表单默认采用GET方法，若触发元素未绑定表单提交逻辑，表单不会自动提交，Ajax请求就能完整执行并完成复选框填充。

另外补充细节：Razor Pages中带method="post"的表单会自动生成__RequestVerificationToken防伪造令牌，但你的Ajax是GET请求（对应后端OnGetRelatedUserAccessPermission方法），GET请求不需要验证令牌，这不是直接失效原因，表单的默认提交行为才是关键。

验证思路 #

在Ajax的success回调中添加console.log('请求成功')，同时查看浏览器控制台的网络请求：

• 保留method="post"时，会看到两个请求：一个是你的Ajax GET请求，另一个是表单的POST请求，页面随即刷新，DOM操作被清空。
• 移除method="post"后，只有Ajax GET请求，页面不刷新，复选框正常填充。

解决方案 #

无需移除表单的method="post"，只需阻止触发Ajax的元素触发表单默认提交行为即可：

方法1：在事件处理函数中阻止默认行为 #

假设Ajax通过按钮触发，修改JS代码如下：

// 假设触发按钮的id是loadPermissions
document.getElementById('loadPermissions').addEventListener('click', function(e) {
    // 阻止表单默认提交
    e.preventDefault();
    
    // 替换为实际获取的UserId
    const userId = 1220;
    fetch(`/AddUserAccess?handler=RelatedUserAccessPermission&UserId=${userId}`)
        .then(response => response.json())
        .then(data => {
            // 填充复选框逻辑
            data.forEach(item => {
                if (item.ModuleCode === 1 && item.AccessRight === 1) {
                    document.getElementById('StockTake').checked = true;
                } else if (item.ModuleCode === 2 && item.AccessRight === 1) {
                    document.getElementById('ShelfLabelPrint').checked = true;
                } else if (item.ModuleCode === 3 && item.AccessRight === 1) {
                    document.getElementById('Transfer').checked = true;
                }
            });
        });
});

方法2：将触发元素移出表单 #

如果触发元素不需要参与表单提交，直接放到表单标签外部，避免触发表单默认行为。

补充优化：后端接口过滤数据 #

当前后端接口返回所有UserAccess数据，建议根据传入的UserId过滤，减少无关数据传输：

public JsonResult OnGetRelatedUserAccessPermission(int UserId)
{
    var UserAccess = _db.UserAccess.Where(u => u.UserId == UserId).ToList();
    return new JsonResult(UserAccess);
}

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