關閉模態窗口包含ASP MVC Ajax表格

在webapp我在模態窗口中使用ASP MVC Ajax窗體。我不使用任何特定的jQuery代碼，只有一些打開模態窗口（即的ShowModal（）函數）：關閉模態窗口包含ASP MVC Ajax表格

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

此代碼加載自己的狀態（局部視圖）到一個div並打開它作爲一個模態窗口。在表單提交ActionResult我只是使用默認的ModelState對象來驗證它，並在出現錯誤的情況下，我返回包含模型錯誤的相同部分視圖。這工作正常，除了以下情況：當模型不包含錯誤時，我想自動關閉模態窗口。我試過如下：

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

然而，當模型包含錯誤的Ajax調用仍然有效，所以的onSuccess會被調用。我試圖通過在局部視圖中發送一個錯誤HttpStatusCode來解決這個問題，但是這個div並沒有用新的html進行更新。我認爲唯一的解決辦法是發送一個包含JavaScript代碼的部分視圖，當模型不包含錯誤時關閉模式窗口，但這種解決方案在我看來並不是很整齊。任何其他想法？

來源

2011-09-15 Marthijn

我今天只需要做同樣的事情。我想出的解決方案是在操作成功時返回一個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>

來源

2011-10-07 19:20:45

感謝我給它一試！僅供參考，您是否注意到將內聯JavaScript代碼放入Unobtrusive打開時，OnSuccess無法在Chrome中運行？它可以通過使用函數名稱來修復。 – Marthijn

我必須做更多的瀏覽器測試，但現在上面的代碼工作在Chrome 14，IE9和FF7使用MVC3。我已經看到了一個SO問題，指出MVC2中的內聯代碼在回調中被破壞，但在MVC3中被修復。 –

我更新了代碼以使用函數名稱而不是內聯代碼。我不得不在多個頁面上使用模式，並希望它保持乾燥 –

關閉模態窗口包含ASP MVC Ajax表格

回答

相關問題