Asp.net MVCデシリアライズのajax.beginForm

Question

：

using (Ajax.BeginForm("Index", null, new AjaxOptions() { UpdateTargetId = "FormContainer", HttpMethod = "Post", InsertionMode = InsertionMode.Replace, OnSuccess = "successFunc" }, new { id = "UpdateForm" })) 

この方法には：

public ActionResult SavePreset(DocumentFilterModel model, string name) 
{ 
    //Do some magic 
    return PartialView("Partial/FilterListPartial", model); 
} 

ポイントは、デフォルトでは、このフォームからですレポートのプリセットを収集しますが、私はDBにプリセットを保存するオプションを追加する必要があります。そのため、SavePresetメソッドが必要です。

私はこのスクリプトを使用しようとしました：

$("#SavePresetButton").on("click", function() { 
$.ajax({ 
    type: "POST", 
    url: '@Url.Action("SavePreset", "Reports")', 
    data: { 
     name: $("#PresetNameEditor").val(), 
     model: $("#UpdateForm").serialize() 
    } 
    }).success(function(result) { 
     $("#FilterSettingsContainer").html(result); 
    }); 
}); 

をしかし、私はどちらかnullはどちらか（stringに変更model parametrのタイプの場合）DocumentFilterModel modelでそれをデシリアライズすることはできません取得の問題に遭遇してきました。

var SettingsModel = new JavaScriptSerializer().Deserialize<DocumentFilterModel>(model); 
var a = JsonConvert.DeserializeObject<DocumentFilterModel>(model); 

をちなみに、（これらのフィルタは別々の部分図にあります）私はそのまま私のフォームを維持したいと思い、私はまだレコードのリストを持つ私の第2の部分のビューを更新する必要があるため：私が試してみました物事、DocumentFilterModelが大きすぎて手動で解析することはできません。

Answer 1

serializeメソッドはフォームを読み込み、入力エレメントの名前と値でURLエンコードされた文字列を生成します。だから基本的にそれは大きな質問です。あなたが$.ajaxコールのdata財産として、jQueryの（いるFormDataのような）リクエストボディのためにそれを使用することを渡すと

は、だから、この

data:{ 
     name: $("#PresetNameEditor").val(), 
     model: $("#UpdateForm").serialize() 
    } 

のようなものは、それはそれはオブジェクトを送信しようと試みるとき、このように

2つのプロパティを持つjsオブジェクトがあり、2つ目のプロパティはすべてクエリ文字列形式の入力値を持つことがわかります。モデルのバインダーはこのデータを読み取ることができず、オブジェクトDocumentFilterModelにマップできません。

serializeメソッドの結果を混合して、データとして送信するjsオブジェクトを構築することはできません。

ajax呼び出しのデータプロパティ値としてserializeの結果を使用し、クエリ文字列に名前を渡します。

$("#SavePresetButton").on("click", function() { 
    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("SavePreset", "Reports")?name='+$("#PresetNameEditor").val(), 
     data: $("#UpdateForm").serialize() 
    }).done(function(result) { 
     console.log(result); 
    }); 
});