Cerrar ventana modal que contiene ASP MVC Ajax formulario

Question

en una aplicación web Estoy usando un formulario ASP MVC Ajax en una ventana modal. No uso ningún código específico jQuery, sólo algunos para abrir la ventana modal (función es decir ShowModal()):

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

Este código carga mi forma (vista parcial) en un div y lo abre como una ventana modal . En el formulario de envío de ActionResult, utilizo el objeto ModelState predeterminado para validarlo y, en caso de error, devuelvo la misma vista parcial que contiene los errores del modelo. Esto funciona bien, excepto en la siguiente situación: cuando el modelo no contiene errores, quiero cerrar automáticamente la ventana modal. He intentado lo siguiente:

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

Sin embargo, cuando el modelo contiene errores de la llamada Ajax sigue siendo válido, por lo que se llamará onSuccess. Traté de resolver esto enviando un error HttpStatusCode en la vista parcial, pero luego el div no se actualiza con el nuevo html. Creo que la única solución es enviar una vista parcial que contenga código JavaScript que cierra la ventana modal cuando el modelo no contiene errores, pero esta solución no es muy clara en mi opinión. ¿Alguna otra idea?

Answer 1

Tuve que hacer lo mismo hoy. La solución que se me ocurrió fue devolver un JsonResult con una propiedad establecida en verdadero cuando la acción tuvo éxito. En la devolución de llamada OnSuccess de AjaxOptions, verifiqué la propiedad y cerré mi ventana modal.

Método controlador

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