Question

这是以下帖子的后续内容： Modal Pop-Up Displaying Incorrectly When ModelState.IsValid = false Redirect

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

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

由于模态没有关闭，因此视图数据将填充在模态而不是窗口中。

如果我尝试使用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代码之前，模式形式已正确关闭，但我无法验证。实施后，模态表单会验证，但模态会收到重定向而不是关闭。我在做什么错

Answer 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";
        }

    });
})

结果：

提交表格后，模式弹出窗口无法正确关闭

1 个答案: