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" }); 
} 

私は、ShowResultHere div onsuccessコールバック内に「Success」が表示されるようにします。

これはMVC 3で実行できますか？

Answer 1

フォームのsubmitイベントにサブスクライブし、このように、AJAX呼び出しを行うことができます：あなたはまた、任意のJavaScriptを全く書いていないことによってこれを達成することができます

$(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

この例を見Async operations with jQuery Ajax and Asp.Net MVC

Answer 3

あなたはjQueryのAjaxを経由フォームを提出している場合、あなたは成功コールバック関数にメッセージをクライアント側に表示することができます。

Answer 4

。このようにそれをやって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") 
} 

で は、2つのビューをしなければならないことを意味します。しかし、JavaScriptを書くことを意味しません。