关闭模态窗口包含ASP MVC Ajax表单



在一个web应用程序中,我在一个模态窗口中使用ASP MVC Ajax表单。我没有使用任何特定的jQuery代码,只有一些打开模态窗口(即showModal()函数):

@Ajax.ActionLink("Open", "Add", "Home", new {id = Model.Id}, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "modal", OnSuccess = "showModal()"})

这段代码将我的表单(部分视图)加载到一个div中,并将其作为一个模态窗口打开。在submit ActionResult表单中,我只使用默认的ModelState对象来验证它,如果出现错误,我返回包含模型错误的相同部分视图。这工作正常,除了以下情况:当模型不包含错误时,我想自动关闭模态窗口。我尝试了以下操作:

@using (Ajax.BeginForm("Save", "Home", new AjaxOptions {HttpMethod = "POST", UpdateTargetId = "modal", OnSuccess = "hideModal(); alert('Saved');"}))

然而,当模型包含错误时,Ajax调用仍然有效,因此OnSuccess将被调用。我试图通过在部分视图中发送错误HttpStatusCode来解决这个问题,但随后div没有使用新的html更新。我认为唯一的解决方案是发送一个包含javascript代码的部分视图,当模型不包含错误时关闭模态窗口,但这个解决方案在我看来不是很整洁。还有其他想法吗?

我今天不得不做同样的事情。我提出的解决方案是在操作成功时返回一个JsonResult,并将属性设置为true。在AjaxOptions的OnSuccess回调中,我检查了属性并关闭了模态窗口。

控制器方法

[HttpPost]
public ActionResult Hold(JobStatusNoteViewModel model)
{
    if (ModelState.IsValid)
    {
        //do work
        return Json(new {success = true});
    }
    return PartialView("JobStatusNote", model);
 }

PartialView

<% using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "JobStatusForm", OnSuccess = "closePopUp" })) { %>
<div id="JobStatusForm">
    <!-- Form -->
</div>
<% } %>  
<script>
function closePopUp(data) {
 if (data.success) {
     //close popup
   }
}
</script>

最新更新