ASP.NET Core 6中ModelState验证通过后弹出登录成功模态框

步骤1：修正控制器逻辑，保留验证并传递成功标记 #

修改UsuarioController中的ConsultarCredenciales方法，调整登录成功/失败的返回逻辑，保留原有验证逻辑：

[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult ConsultarCredenciales(LoginViewModel model)
{
    if (ModelState.IsValid)
    {
        var usuarioLogin = new Usuario()
        {
            Mail = model.Mail,
            Contraseña = model.Contraseña,
        };

        var usuariosQueCoinciden = _context.Usuarios
            .Where(q => q.Mail == usuarioLogin.Mail && q.Contraseña == usuarioLogin.Contraseña);

        if (usuariosQueCoinciden.Any())
        {
            var usuarioActual = usuariosQueCoinciden.First();
            // 存储用户ID用于跳转个人页面
            ViewBag.UsuarioId = usuarioActual.Id;
            // 设置登录成功标记
            ViewBag.LoginSuccess = true;
            // 返回登录视图触发模态框
            return View("Login", model);
        }
        else
        {
            // 添加登录失败的错误提示
            ModelState.AddModelError(string.Empty, "Correo electrónico o contraseña incorrectos.");
        }
    }
    // 验证失败或登录失败时，返回登录视图保留错误信息
    return View("Login", model);
}

步骤2：修改登录视图，添加模态框并触发逻辑 #

更新Login.cshtml视图，修正表单提交方式、添加模态框、加入触发模态框的JS代码：

@using KadabraMVC.ViewModels
@model LoginViewModel;

<div class="row">
    <div class="col-md-4">
        <!-- 修正为POST请求，匹配控制器的防伪造令牌和HttpPost标记 -->
        <form asp-action="ConsultarCredenciales" method="post">
            <div asp-validation-summary="All" class="text-danger"></div>

            <div class="form-group">
                <label asp-for="Mail" class="control-label"></label> 
                <input asp-for="Mail" class="form-control" />
                <span asp-validation-for="Mail" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Contraseña" class="control-label"></label>
                <input asp-for="Contraseña" class="form-control" />
                <span asp-validation-for="Contraseña" class="text-danger"></span>
            </div>

            <div class="form-group">
                <input type="submit" value="Ingresar" class="btn btn-primary"/>
            </div>
        </form>
    </div>
</div>

<!-- 登录成功模态框 -->
<div class="modal fade" id="loginSuccessModal" tabindex="-1" role="dialog" aria-labelledby="loginSuccessModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header alert-success">
                <h5 class="modal-title" id="loginSuccessModalLabel">¡Inicio de Sesión Exitoso!</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-success">
                    Has iniciado sesión correctamente. Serás redirigido a tu perfil en unos segundos.
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script>
        $(document).ready(function() {
            // 读取控制器传递的登录成功标记
            const loginSuccess = @(ViewBag.LoginSuccess == true ? "true" : "false");
            
            if (loginSuccess) {
                // 显示模态框
                $('#loginSuccessModal').modal('show');
                
                // 自动跳转：3秒后跳转到个人页面
                setTimeout(() => {
                    window.location.href = '@Url.Action("InicioUsuario", "Usuario", new { id = ViewBag.UsuarioId })';
                }, 3000);
                
                // 手动关闭模态框时立即跳转
                $('#loginSuccessModal').on('hidden.bs.modal', function() {
                    window.location.href = '@Url.Action("InicioUsuario", "Usuario", new { id = ViewBag.UsuarioId })';
                });
            }
        });
    </script>
}

关键说明 #

1. 表单提交修正：将表单改为POST请求，匹配控制器的[HttpPost]和[ValidateAntiForgeryToken]，避免验证错误。
2. 模态框触发逻辑：通过ViewBag.LoginSuccess标记告知视图需要显示模态框，无需复杂AJAX请求，适合JS基础薄弱场景。
3. 跳转逻辑：同时支持自动延迟跳转（3秒）和手动关闭模态框跳转，兼顾不同用户操作习惯。
4. 错误保留：验证失败或登录失败时返回登录视图，保留ModelState错误信息，确保前端能正确显示验证提示。

额外注意事项 #

• 确保_Layout.cshtml已引入Bootstrap和jQuery（避免重复引入）。
• 确认InicioUsuario方法能接收用户ID参数并正确加载个人资料页面。
• 生产环境中请不要明文存储密码，应使用PasswordHasher加密存储和验证。

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