Asp.net mvc deserialize ajax.beginForm - json

Question

I need to pass my model, built in this form:
using (Ajax.BeginForm("Index", null, new AjaxOptions() { UpdateTargetId = "FormContainer", HttpMethod = "Post", InsertionMode = InsertionMode.Replace, OnSuccess = "successFunc" }, new { id = "UpdateForm" }))
To this method:
public ActionResult SavePreset(DocumentFilterModel model, string name)
{
//Do some magic
return PartialView("Partial/FilterListPartial", model);
}
The point is that by default, this form will collect report presets, however i need to add and option to save preset in my DB, that is why SavePreset method is needed.
I have tried to use this script:
$("#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);
});
});
But i have encountered a problem, where i either get null in DocumentFilterModel model either (if change model parametr's type to string) can't deserialize it. Things i have tried:
var SettingsModel = new JavaScriptSerializer().Deserialize<DocumentFilterModel>(model);
var a = JsonConvert.DeserializeObject<DocumentFilterModel>(model);
By the way, (these filters located in separate partial view) i would like to keep my form as it is, because i still need to update my second partial view with lists of record, and DocumentFilterModel is too big to parse it manually.

Answer 1

The serialize method reads your form and generates a url encoded string with your input element names and values. So basically it will be a big querystring. When you pass that as the data property of the $.ajax call, jquery will use that for the request body (like FormData)
So when you try something like this
data:{
name: $("#PresetNameEditor").val(),
model: $("#UpdateForm").serialize()
}
It it trying to send an object like this
{name: "Abc", model: "FirstName=Scott&Email=someEmail"}
You can see that you have a js object with 2 properties and the second property has all your input values in a query string format. The model binder cannot read this data and map to your DocumentFilterModel object!.
You cannot mix the result of serialize method to build a js object you want to send as data.
Simply use the result of serialize as the data property value of the ajax call and pass name in querystring.
$("#SavePresetButton").on("click", function () {
$.ajax({
type: "POST",
url: '#Url.Action("SavePreset", "Reports")?name='+$("#PresetNameEditor").val(),
data: $("#UpdateForm").serialize()
}).done(function(result) {
console.log(result);
});
});