JsonResultとajax.BeginFormの違い

Question

JsonResultとAjax.BeginFormの違いを理解しようとしていますか？誰かがそれぞれの事例を与えるのに十分親切なことができますか？それぞれの機能をJQueryで実現できますか？もしそうなら、どうですか？

おかげ

Answer 1

JsonResultは、このアクションはJSONの代わりに、ビューまたは他の何かを返すことを示しているActionResult派生クラスのほんの一種です。

public ActionResult Foo() 
{ 
    var model = new MyViewModel 
    { 
     Foo = "bar" 
    }; 
    return Json(model); 
} 

このコントローラのアクションは、呼び出されたとき、モデルのJSON直列化表現を返す：例えば

が application/jsonに Content-Type HTTPレスポンスヘッダを設定することに加えて

{"Foo":"bar"} 

。

Ajax.BeginFormは、<form>要素を生成するために使用されるHTMLヘルパーですが、AJAXを使用してサーバーに送信されます。したがって、JSONを返すコントローラーアクションにこのフォームをポイントすると、成功コールバックでこのJSONの結果を取得できます。結果は、そのプロパティにアクセスできるjavascriptオブジェクトに自動的に解析されます。例えば

：

@using (Ajax.BeginForm("foo", "home", new AjaxOptions { OnSuccess = "onSuccess" })) 
{ 
    @Html.EditorFor(x => x.SomeProperty) 
    <button type="submit">OK</button> 
} 

これはFooアクションに提出したときにAJAX要求を送信します<form>要素を生成します。これが機能するためにあなたがあなたのページに以下のスクリプトを含める必要があります。

<script type="text/javascript"> 
    var onSuccess = function(result) { 
     alert(result.Foo); 
    }; 
</script> 

---

：今、すべてのことが残って

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 

このonSuccess javascript関数とJSONの結果は、サーバから返された処理を記述することです

それぞれの機能をJQueryで実行できますか？舞台裏

あなたがjquery.unobtrusive-ajax.jsが含ま

、 Ajax.*ヘルパーで生成されたすべてのフォームやリンクが自動的に解析され、jQueryを使ってAJAXifiedされます。それらのヘルパーが生成したHTML5 data-*属性が処理され、AJAX呼び出しに変換されます。

もちろん、普通のjQueryとAjax.*ヘルパーのどれも使用しないことができます。この場合、jquery.unobtrusive-ajax.jsスクリプトは必要ありません。 Ajax。*ヘルパーを使う必要はありません。

あなたは、通常のHtml.BeginFormヘルパーを使用することができ、フォームを生成するには：

@using (Html.BeginForm("foo", "home", FormMethod.Post, new { id = "myform" })) 
{ 
    @Html.EditorFor(x => x.SomeProperty) 
    <button type="submit">OK</button> 
} 

をし、その後のJavaScriptファイルにこの形式の.submitイベントをサブスクライブするのjQueryを使用し、falseを返すことによって、デフォルトの同期送信をキャンセルし、代わりにAJAXリクエストを送信する：

$(function() { 
    $('#myform').submit(function(){ 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: $(this).serialize(), 
      success: function(result) { 
       alert(result.Foo); 
      } 
     }); 
     return false; 
    }); 
});