jquery ajaxとMVC3を使用してフォームを投稿する正しい方法は何ですか？

Question

私はこれを行う方法に関するいくつかの方法を見てきました。

データを収集し、これはjsonオブジェクト

var objToSend = { Property : $('#propertyField').val(), Property2 : ... }; 

を構築し、フォームの

1. ハイジャック提出-イベント：私は1つの部分から除いて、好きな私自身の方法は、以下のとおりです。このような25の値を収集するのは面倒なので、私は好きではありません

2. に電話し、[HttpPost]有効な操作を指すURLを指定してくださいどこか

3. ajax-queryの部分では、返されたデータ（文字列として返す）を収集し、適切な場所に書き出します。私はここでもエラーを処理し、最初の単語が「エラー：」であるかどうかを確認し、適切な処置をとっています。

私はこの方法がコレクション段階から離れて好きです。私はこれを行うより良い方法があると確信していますが、私はに来て、 WebForms-backgroundから来ています。そのため、全体を「ウェブを抱いてください」という部分はまったく外国のものです。

Answer 1

serialize()メソッドを使用すると、すべてのフィールドを1つずつ渡すことを避けることができます。それは、標準フォームの送信したかのようにapplication/x-www-form-urlencodedコンテンツタイプを使用してサーバーにフォーム全体のデータを送信します：

$('#myform').submit(function() { 
    $.ajax({ 
     url: this.action, 
     type: this.method, 
     data: $(this).serialize(), 
     success: function(result) { 
      // TODO: handle the success case 
     }  
    }); 
    return false; 
}); 

別の可能性があるjQuery form plugin：

$('#myform').ajaxForm(function(result) { 
    // TODO: handle the success case 
}); 

一部の人々はにそれがまた便利あなたがを含める必要がASP.NET MVC 3では

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "success" })) 
{ 
    ... some input fields 
} 

：フォームをレンダリングするAjax.BeginFormヘルパーを使いますAjaxヘルパーによって生成されたHTML 5 data-*属性を目立たないようにAJAXifiesするスクリプト。

Answer 2

これは私がそれを行う方法です！

フォームを扱っている場合は、MVCヘルパーを使用してポストコード処理コードを作成することもできます。

<% using (html.BeginForm()) {%> 

    // html for the form 


    <input type='submit' value='post' /> 

<% } %> 

MVCのWebフォームからの移行は、ところで、私はこれは良いことであると信じる...あなたが本当にWebプログラミングすなわち、HTTP、HTMLとJavaScriptの生の側面を扱っている持っている人のためのトリッキーいずれかになります。私はWebFormsの擬似単一プロセスイベントモデルのファンではないためです。

ロングライブMVC！ :)

Answer 3

jsonがあなたのjsonを構築できるようにします。送信するデータセットを作成するフォームをシリアル化することができます。

$.post("myUrl", 
     $("form").serialize(), 
     function(callback) { ... } 
    ); 

Answer 4

"jQueryフォームプラグイン"を使用する傾向があります。

http://jquery.malsup.com/form/

それはまた、あなたが簡単にトラップ様々なイベント、障害状態、検証がなどとし、フォームに変換することができますすることができます：それはあなたが非常に少ない労力でAJAXフォームにきれいに抽象標準形成することができますあなたが望むならJSONリクエストまたはXML。ファイルのアップロードも処理します。