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

Question

这是以下 post 的后续内容：

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

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

由于模态框没有关闭，视图数据被填充到模态框而不是window。

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

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

 <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);
        }
    }

在我实现 link 中标识的 Javascript 代码之前，模态窗体正确关闭但我无法验证。实施后，模态形式会验证，但模态会收到重定向而不是关闭。我做错了什么

Answer 1

the Modal doesn't close, the view data gets populated in the modal and not the window.

这是预期的结果，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";
        }

    });
})

结果：

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

Modal Pop-Up Not Closing Properly After Form Submission

modal-dialog

bootstrap-modal

asp.net-core