如何按条件触发Sweet Alert弹窗，解决模型验证失败仍弹窗的问题

• 前端弹窗逻辑直接绑定了按钮点击事件，和后端表单提交的验证、保存结果完全无关，只要点击按钮就会触发弹窗，和后端执行结果没有关联
• 后端原逻辑验证成功后直接执行RedirectToAction跳转，前端根本接收不到提交成功的信号，前后端逻辑完全脱节

方案1：AJAX异步提交（推荐，用户体验更好） #

无需刷新页面即可获得提交结果，交互更流畅

第一步：修改后端接口 #

将原接口调整为返回JSON格式的执行结果，不要直接跳转或返回视图：

[HttpPost]
public IActionResult submitPersons(Person person ,String newPersonCartMlieImagePath, String newPersonShnasnameeImagePathName, String newPersonImagePathName, String newPersonBieemeDacumenPath)
{
    if (ModelState.IsValid)
    {
        var proMapped = _mapper.Map<Person>(person);
        proMapped.PersonImage = newPersonImagePathName;
        proMapped.PersonShnasnamee = newPersonShnasnameeImagePathName;
        proMapped.PersonCartMlie = newPersonCartMlieImagePath;
        proMapped.PersonBieemeDacument = newPersonBieemeDacumenPath;
        proMapped.PersonState = true;
        _context.Add(proMapped);
        _context.SaveChanges();
        // 返回成功标识
        return Json(new { success = true });
    }
    // 验证失败返回错误标识
    return Json(new { success = false, msg = "表单验证失败，请检查输入项" });
}

第二步：修改前端代码 #

阻止表单默认提交行为，异步发送表单数据，仅在后端返回成功结果时触发弹窗：

<!-- 注意把按钮type从submit改成button，避免触发默认表单提交 -->
<button id="btn-submit-btn" value="Submit" type="button">ثبت پرسنل</button>

<script>
    $('#btn-submit-btn').click(function () {
        // 请将#formId替换为你实际表单的ID
        var formData = new FormData($('#formId')[0]);
        $.ajax({
            url: '/你的控制器名称/submitPersons', // 替换为你实际的控制器名
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res){
                if(res.success){
                    // 仅提交成功时弹出成功提示
                    swal({
                        title: "ارسال نامه",
                        text: "نامه شما با موفقیت ارسال شد",
                        type: 'success',
                        showCancelButton: false,
                        allowOutsideClick: false,
                        confirmButtonColor: "green",
                        confirmButtonText: "باشه"
                    }).then(function () {
                        window.location.href = "/Home/allPerson";
                    });
                }else{
                    // 验证失败弹出错误提示
                    swal('提交失败', res.msg, 'error');
                }
            },
            error: function(){
                swal('系统错误', '请求异常，请稍后重试', 'error');
            }
        })
    });
</script>

提示：如果表单包含文件上传，需要给表单标签添加enctype="multipart/form-data"属性。

方案2：TempData服务端标记方案（适合传统表单提交场景，无需改造AJAX） #

通过服务端临时存储提交结果标记，页面加载时判断标记决定是否触发弹窗

第一步：修改后端逻辑 #

验证成功后将成功标记存入TempData，再返回原视图：

[HttpPost]
public IActionResult submitPersons(Person person ,String newPersonCartMlieImagePath, String newPersonShnasnameeImagePathName, String newPersonImagePathName, String newPersonBieemeDacumenPath)
{
    if (ModelState.IsValid)
    {
        var proMapped = _mapper.Map<Person>(person);
        proMapped.PersonImage = newPersonImagePathName;
        proMapped.PersonShnasnamee = newPersonShnasnameeImagePathName;
        proMapped.PersonCartMlie = newPersonCartMlieImagePath;
        proMapped.PersonBieemeDacument = newPersonBieemeDacumenPath;
        proMapped.PersonState = true;
        _context.Add(proMapped);
        _context.SaveChanges();
        // 存储提交成功标记
        TempData["SubmitSuccess"] = true;
    }
    ViewBag.pro = _context.Projects.ToList();
    return View("submitPerson", person);
}

第二步：修改前端代码 #

页面加载时判断TempData的标记，存在且为真才触发弹窗：

<button id="btn-submit-btn" value="Submit" type="submit">ثبت پرسنل</button>

<script>
// 页面加载完成后判断是否提交成功
$(function(){
    var isSubmitSuccess = '@TempData["SubmitSuccess"]' === 'True';
    if(isSubmitSuccess){
        swal({
            title: "ارسال نامه",
            text: "نامه شما با موفقیت ارسال شد",
            type: 'success',
            showCancelButton: false,
            allowOutsideClick: false,
            confirmButtonColor: "green",
            confirmButtonText: "باشه"
        }).then(function () {
            window.location.href = "/Home/allPerson";
        });
    }
});
</script>

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