Razor Page中Ajax POST请求后页面不刷新及URL未更新问题咨询

问题原因 #

Ajax属于异步HTTP请求，浏览器不会自动处理后端返回的重定向响应（302状态码），而是将响应内容传递给Ajax的回调函数，因此页面不会自动刷新、URL也不会更新。

解决方案 #

方案1：前端手动跳转（推荐） #

修改后端方法返回重定向目标页面的URL，再在Ajax的success回调中触发页面跳转：

后端代码修改：

public virtual async Task<IActionResult> OnPostSaveLoanSetupAsync([FromRoute] Guid p, [FromRoute] Guid q, string a, string c)
{
    // 执行业务逻辑
    var redirectUrl = Url.Page(); // 获取当前页面的URL
    return Json(new { redirectUrl });
}

前端Ajax代码修正（含语法错误修复）：

type: "POST",
url: path + '?handler=abc',
contentType: 'application/x-www-form-urlencoded',
data: { a: b, c: d }, // 原代码此处缺少闭合括号，已修正
headers: {
    "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
},
success: function(data, textStatus) {
    if (data.redirectUrl) {
        window.location.href = data.redirectUrl; // 手动触发页面跳转
    }
}

方案2：读取响应头Location值跳转 #

若不想修改后端RedirectToPage逻辑，可在Ajax中获取响应头的Location值，再执行跳转：

前端Ajax代码修改：

type: "POST",
url: path + '?handler=abc',
contentType: 'application/x-www-form-urlencoded',
data: { a: b, c: d },
headers: {
    "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val()
},
success: function(data, textStatus, xhr) {
    var redirectUrl = xhr.getResponseHeader('Location');
    if (redirectUrl) {
        window.location.href = redirectUrl;
    }
},
// 可选：设置避免Ajax自动跟随重定向
xhrFields: { withCredentials: true }

后端可选优化：
返回303状态码，明确告知客户端使用GET方法跳转，避免Ajax自动跟随重定向：

public virtual async Task<IActionResult> OnPostSaveLoanSetupAsync([FromRoute] Guid p, [FromRoute] Guid q, string a, string c)
{
    return RedirectToPage().WithStatusCode(StatusCodes.Status303SeeOther);
}

方案3：用表单提交替代Ajax #

如果无需异步处理需求，直接使用HTML表单提交，浏览器会自动处理重定向：

<form method="post" asp-page-handler="abc">
    <input type="hidden" name="a" value="@Model.a" />
    <input type="hidden" name="c" value="@Model.c" />
    <button type="submit">提交</button>
</form>

注意点 #

• 原Ajax代码的data字段存在语法错误，缺少闭合括号，需修正后才能正常运行
• Razor Page中必须携带RequestVerificationToken防止CSRF攻击，原代码此部分逻辑正确

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