提交表格后，模式弹出窗口无法正确关闭 [英] Modal Pop-Up Not Closing Properly After Form Submission

问题描述

这是以下帖子的后续内容:

This is a follow-up to the following post: Modal Pop-Up Displaying Incorrectly When ModelState.IsValid = false Redirect

My Pop-Up validates correctly but after it process the form data it is not getting closed. Once the data gets loaded in the db, I run the following:

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

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

If I try to use return View("edit"); the underlying page fails because there is no model data on the page.

Here is the current code that I implemented from the post referenced above:

 <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>

Here is the code that I run to open the modal:

<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>

And here are the actions when I submit data from the modal:

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

Before I implemented the Javascript code as identified in the link, the modal form closed properly but I couldn't validate. After implementation, the modal form validates but the modal receives the redirect instead of closing. What am I doing wrong

解决方案

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

It's the expected result, Ajax render the result of redirection to the modal. You should do the redirection in the done function.

Modify the CreateEdit method:

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

Add a hidden input in the partial view to mark if the returned model has passed the validation.

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

Then determine whether to redirect in the script:

$('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";
        }

    });
})

Result:

这篇关于提交表格后，模式弹出窗口无法正确关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！