.NET Core使用JavaScript提交表单后RedirectAction失效问题

核心问题 #

你用fetch异步提交表单（AJAX请求）时，后端的RedirectToAction不会自动触发页面跳转。这是因为：

• 传统表单提交时，浏览器会自动处理后端返回的302重定向响应，跳转至目标页面
• 但AJAX请求（比如fetch）的重定向响应只会被请求对象接收，浏览器不会主动执行跳转

解决方案 #

下面提供两种可行的处理方式：

方式1：后端返回跳转URL，前端手动跳转 #

修改控制器代码，返回包含跳转地址的JSON数据，而非直接返回重定向：

// 控制器代码
return Json(new { 
    message = "账号创建成功",
    redirectUrl = Url.Action("Index", "Home")
});

对应修改前端JS，解析JSON后手动触发跳转：

async function submitForm(event) {
    event.preventDefault();
    var form = document.getElementById('createAccountForm');
    var password = document.getElementById('user_password_input').value;
    
    if (!password) {
        var pworderrmsg = document.getElementById('pworderrormsg');
        pworderrmsg.textContent = "请输入有效的密码！";
        pworderrmsg.style.display = 'block';
        return;
    }
    
    var antiForgeryToken = document.querySelector('input[name="__RequestVerificationToken"]').value;
    var options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': antiForgeryToken
        },
        body: JSON.stringify({
            username_or_email: document.getElementById('user_email_input').value,
            Password: password
        })
    };
    
    try {
        const response = await fetch('/auth/createaccount', options);
        if (!response.ok) {
            throw new Error(`HTTP错误！状态码: ${response.status}`);
        }
        const data = await response.json();
        alert(data.message);
        // 手动跳转到目标页面
        window.location.href = data.redirectUrl;
    } catch (error) {
        console.error('错误:', error.message);
        // 可在此添加前端错误提示逻辑
    }
}

方式2：保留后端重定向，前端处理响应 #

如果不想修改后端逻辑，可以在fetch的响应中检查是否为重定向，然后手动跳转：

async function submitForm(event) {
    // 前面的验证逻辑不变
    var password = document.getElementById('user_password_input').value;
    if (!password) {
        var pworderrmsg = document.getElementById('pworderrormsg');
        pworderrmsg.textContent = "请输入有效的密码！";
        pworderrmsg.style.display = 'block';
        return;
    }
    
    var antiForgeryToken = document.querySelector('input[name="__RequestVerificationToken"]').value;
    var options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'RequestVerificationToken': antiForgeryToken
        },
        body: JSON.stringify({
            username_or_email: document.getElementById('user_email_input').value,
            Password: password
        })
    };
    
    try {
        const response = await fetch('/auth/createaccount', options);
        // 检查是否为重定向响应
        if (response.redirected) {
            window.location.href = response.url;
            return;
        }
        if (!response.ok) {
            throw new Error(`HTTP错误！状态码: ${response.status}`);
        }
        const data = await response.text();
        alert(data);
    } catch (error) {
        console.error('错误:', error.message);
    }
}

额外说明 #

• 你的原代码中event.preventDefault()已经阻止了表单的默认提交行为，所以浏览器不会走传统表单提交的流程
• 用AJAX提交时，所有页面跳转逻辑都需要前端手动触发，后端的重定向指令无法直接生效

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