ASP.NET MVC控制器返回JSON打开新页面，需在脚本内处理响应

核心问题分析 #

你的代码存在几个关键问题，导致JSON响应未在脚本中处理，反而触发页面跳转：

1. 控制器中成功状态值错误 #

登录成功时，你返回的success字段为false，但前端脚本是判断response.success为true时才处理跳转。这会导致脚本无法识别成功状态，若表单默认提交未被完全阻止，就会触发页面刷新。

修正后的Login控制器代码：

[HttpPost]
public async Task<ActionResult> Login(LoginModel model)
{
    if (ModelState.IsValid)
    {
        var user = await _context.Users
                                 .FirstOrDefaultAsync(u => u.Username == model.Username 
                                                        && u.Password == model.Password);

        if (user != null)
        {
            string generatedToken = TokenGenerator.GenerateRandomToken(_tokenLengthKey);
            DateTime tokenExpiration = DateTime.UtcNow.AddMinutes(_tokenLifetimeMinutes);

            // Update user with new token and expiration
            user.Token = generatedToken;
            user.TokenExpiresAt = tokenExpiration;

            // Save Token and TokenExpiresAt to the database
            _context.Entry(user).State = EntityState.Modified;
            await _context.SaveChangesAsync();

            Session["Username"] = user.Username;
            Session["Name"] = user.Name;

            // 修正success为true
            return Json(new { success = true, redirectUrl = Url.Action("Index", "Home") });
        }
        else
        {
            // 登录失败时返回错误信息
            return Json(new { success = false, error = "用户名或密码错误", redirectUrl = Url.Action("Login", "Account") });
        }
    }

    return Json(new { success = false, error = "模型验证失败" });
}

2. 确保jQuery正确加载 #

如果页面未引入jQuery库，$(document).ready和$.ajax都不会执行，表单会触发默认提交行为，导致页面跳转。

在页面的<head>或<body>末尾添加jQuery引用：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

3. 验证表单提交事件的阻止逻辑 #

确认e.preventDefault()是否生效，可以在submit事件处理函数中添加调试日志，同时明确指定响应类型为JSON：

修正后的前端脚本：

$(document).ready(function () {
    $('#loginForm').submit(function (e) {
        console.log("表单提交事件触发"); // 调试用，确认进入函数
        e.preventDefault(); // 阻止默认表单提交
        $.ajax({
            url: '@Url.Action("Login", "Account")',
            type: 'POST',
            data: $(this).serialize(),
            dataType: 'json', // 明确指定响应类型为JSON
            success: function (response) {
                console.log("AJAX响应:", response); // 调试查看响应内容
                if (response.success) {
                    window.location.href = response.redirectUrl; 
                } else if (response.error) {
                    $('#errorMessage').text(response.error).removeClass('d-none');
                } else {
                    $('#errorMessage').text('登录失败，请重试').removeClass('d-none');
                }
            },
            error: function (xhr, status, error) {
                console.error("AJAX错误:", status, error);
                $('#errorMessage').text('请求出错，请检查网络').removeClass('d-none');
            }
        });
    });
});

4. 旧版ASP.NET MVC需指定JsonRequestBehavior #

如果使用的是ASP.NET MVC 3及更早版本，HttpPost请求返回Json需要允许Get行为，否则会报错：

return Json(new { success = true, redirectUrl = Url.Action("Index", "Home") }, JsonRequestBehavior.AllowGet);

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