Закрыть модальное окно с формой ASP MVC Ajax - PullRequest
Новая
       14

Закрыть модальное окно с формой ASP MVC Ajax

5 голосов
/ 15 сентября 2011

в веб-приложении Я использую форму ASP MVC Ajax в модальном окне.Я не использую какой-либо конкретный код jQuery, только некоторые, чтобы открыть модальное окно (т.е. функцию showModal ()): 

@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, который закрывает модальное окно, когда модель не содержит ошибок, но, на мой взгляд, это решение не очень аккуратное.Есть другие идеи?

1 Ответ

9 голосов
/ 07 октября 2011

Я просто должен был сделать то же самое сегодня.Решение, которое я нашел, состояло в том, чтобы вернуть JsonResult со свойством, установленным в true, когда действие выполнено успешно.В обратном вызове OnSuccess AjaxOptions я проверил свойство и закрыл мое модальное окно.

Метод контроллера 

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