提交表单后模态弹出窗口未正确关闭

Posted 2023-05-07

【中文标题】提交表单后模态弹出窗口未正确关闭

【英文标题】：Modal Pop-Up Not Closing Properly After Form Submission

【发布时间】：2020-10-26 21:10:59

【问题描述】：

这是对以下帖子的跟进： Modal Pop-Up Displaying Incorrectly When ModelState.IsValid = false Redirect

我的弹出窗口验证正确，但在处理表单数据后它没有关闭。一旦数据被加载到数据库中，我运行以下命令：

  TempData["ID"] = status.IssueID;
  return RedirectToAction("edit");

由于 Modal 没有关闭，因此视图数据会填充到 modal 而不是窗口中。

如果我尝试使用 return View("edit");底层页面失败，因为页面上没有模型数据。

这是我从上面引用的帖子中实现的当前代码：

 <script>
    $('body').on('click', '.modal-link', function () 
        var actionUrl = $(this).attr('href');
        $.get(actionUrl).done(function (data) 
            $('body').find('.modal-content').html(data);
        );
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
    );

    $('body').on('click', '.relative', function (e) 
        e.preventDefault();
        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var dataToSend = form.serialize();
        $.post(actionUrl, dataToSend).done(function (data) 
            $('body').find('.modal-content').html(data);
        );
    )

    $('body').on('click', '.close', function () 
        $('body').find('#modal-container').modal('hide');
    );

    $('#CancelModal').on('click', function () 
        return false;
    );

    $("form").submit(function () 
        if ($('form').valid()) 
            $("input").removeAttr("disabled");
        
    );
</script>

这是我运行打开模式的代码：

<div id="modal-container" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
          <div class="modal-content">
          </div>
   </div>
</div>
<a href="@Url.Action("CreateEdit", new  controller = "Issue", issueid = Model.IssueData.issueId, addedit = "add" )" class="modal-link btn btn-success">Add New Status</a>

以下是我从模态提交数据时的操作：

[ValidateAntiForgeryToken]
    [HttpPost]
    public ActionResult CreateEdit(StatusViewModel model)
    
        if (ModelState.IsValid)
        
            StatusModel status = new StatusModel();
            status.IssueID = model.IssueID;
            status.StatusDate = DateTime.Today;
            status.Status = model.Status;
            status.ColorCode = model.ColorCode;
            status.NextStep = model.NextStep;

            if (model.addedit == "edit")
            
                status.UpdatedByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
                string done = _adoSqlService.UpdateStatus(status);
            
            else
            
                status.EnteredByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
                string done = _adoSqlService.InsertStatus(status);
            

            TempData["ID"] = status.IssueID;
            return RedirectToAction("edit");

        
        else
        
            return PartialView("_CreateEdit", model);
        
    

在我实现链接中标识的 javascript 代码之前，模态表单正确关闭但我无法验证。实施后，模态表单验证但模态接收重定向而不是关闭。我做错了什么

【参考方案1】：

模态框没有关闭，视图数据被填充到模态框而不是窗口中。

这是预期的结果，Ajax 将重定向的结果渲染到模态。您应该在 done 函数中进行重定向。

修改 CreateEdit 方法：

[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)

    if (ModelState.IsValid)
    
        StatusModel status = new StatusModel();
        status.IssueID = model.IssueID;
        status.StatusDate = DateTime.Today;
        status.Status = model.Status;
        status.ColorCode = model.ColorCode;
        status.NextStep = model.NextStep;

        if (model.addedit == "edit")
        
            status.UpdatedByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
            string done = _adoSqlService.UpdateStatus(status);
        
        else
        
            status.EnteredByNTID = AppHttpContext.Current.Session.GetString("userntid").ToString();
            string done = _adoSqlService.InsertStatus(status);
        

        TempData["ID"] = status.IssueID;
            
    

    return PartialView("_CreateEdit", model);
        

在局部视图中添加一个隐藏的输入来标记返回的模型是否通过了验证。

<input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />

然后在脚本中判断是否重定向：

$('body').on('click', '.relative', function (e) 
    e.preventDefault();
    var form = $(this).parents('.modal').find('form');
    var actionUrl = form.attr('action');
    var dataToSend = form.serialize();
    $.post(actionUrl, dataToSend).done(function (data) 
        $('body').find('.modal-content').html(data);
        var isValid = $('body').find('[name="IsValid"]').val() == 'True';
        if (isValid) 
            $('body').find('#modal-container').modal('hide');
            window.location.href = "/Issue/Edit";
        

    );
)

结果：

【讨论】：

@mj313 - 你又来了！感谢您的帮助和解释。