MVC 3 - Отправка формы через jquery и частичное обновление страницы, чтобы показать результат после публикации

Question

У меня есть форма в MVC 3. В настоящее время я делаю следующее, чтобы опубликовать форму.Форма публикуется и выполняет полное обновление страницы, чтобы показать результат.

После отправки элемент управления отправит статус Успешно или Неудачно.Вот и все.Мне просто нужно показать в div сообщение об успехе или неудаче на основе возвращенного статуса.

Кто-нибудь знает шаги высокого уровня, как это сделать в MVC 3?

<div id="ShowResultHere"></div>

@using (Html.BeginForm("Update", "Test", FormMethod.Post, new { id="frmUpdate"}))
{
   //form fields
   <button type="submit" class="sprt bg_red bt_red h27">Update</button>
}

[HttpPost]
public ActionResult Update(TestModel model)
{
   return Json(new { s = "Success" });
}

Iхотите, чтобы успех автоматически отображался внутри обратного вызова ShowResultHere div onsuccess.

Можно ли это сделать в MVC 3?

Answer 1

Вы можете подписаться на событие submit формы и выполнить вызов AJAX, например:

$(function() {
    $('#frmUpdate').submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function(result) {
               // The AJAX call succeeded and the server returned a JSON 
               // with a property "s" => we can use this property
               // and set the html of the target div
               $('#ShowResultHere').html(result.s);
            }
        });
        // it is important to return false in order to 
        // cancel the default submission of the form
        // and perform the AJAX call
        return false;
    });
});

Answer 2

Вы также можете достичь этого, вообще не написав ни одного javascript.Используя форму AJAX

<div id="ShowResultHere"></div>

@using (Ajax.BeginForm("Update", new AjaxOptions { UpdateTargetId = "ShowResultHere" }))
{

}

И в вашем контроллере

[HttpPost]
public ActionResult Update(TestModel model)
{
    if(blah)
        return PartialView("Success")
    return PartialView("Failed")
}

Делая это таким образом, вы должны сделать два представления.Но означает отсутствие написания JavaScript.

Answer 3

Если вы отправляете форму через jQuery Ajax, вы можете отобразить ваше сообщение на стороне клиента в функции обратного вызова success.

Answer 4

посмотрите на этот пример Асинхронные операции с jQuery Ajax и Asp.Net MVC