MVC4 Form Serialize for a Broken Controller

Question

I tried everything to send the form back to my controller using ajax.

I simplified my model for strings only.

• ajax correctly displays all form data.
• I have serilaizeArray ().

My object, called the model, is null every time (other parameters are displayed just fine, that is, the page, sorting ...). What am I missing?

Ajax:

... var model = $('#advancesearchform').serialize(); var request = $.ajax({ type: "POST", url: "/DAM/Home/_ImageSearchResult", cache: false, traditional: true, contentType: 'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify({ page: page, itemsperpage: itemsperpage, sort: sort, sortdir: sortdir, model: model }), success: function (data) { $('#imagesearchresults').html(data); } }); 

JSON.stringfy:
{\ "Page \": null, \ "itemsperpage \": 8, \ "type \": \ "Project \", \ "sortdir \": \ "ASC \", \ "model \": \ "FileName = 123 & OriginalFileName = & SAS of the amplifier; height = ACAC & Width = ACAC & DepartmentID = 9b4463cd-C184-e211-9244-005056887208 & ClassID = 28de9d15-c284-e211-9244-005056887208 \ "}

Controller:

 [HttpPost] public PartialViewResult _ImageSearchResult(int? page, int itemsperpage, string sort, string sortdir, AdvanceSearchFilters model) { } 

Model:

 public class AdvanceSearchFilters { public string FileName { get; set; } public string OriginalFormat { get; set; } public string Width { get; set; } public string Height { get; set; } public string MediaSource { get; set; } public string DepartmentId { get; set; } public string ClassId { get; set; } public string ThemeId { get; set; } } 

Answer 1

The problem is that you are sending data in the wrong format. When you call $ ('# advancesearchform'). Serialize (); data is formatted as a query string, but you tell ajax to send JSON. Wherein:

 { "page":null, "itemsperpage":8, "sort":"Project", "sortdir":"ASC", "model":"FileName=123&OriginalFileName=sas&Height=asas&Width=asas&DepartmentId=9b4463cd- c184-e211-9244-005056887208&ClassId=28de9d15-c284-e211-9244-005056887208" } 

You send the "model" as a string. You need to either convert the advancesearchform attributes to json format, or attach them to the current JSON or send everything as a query string.

For the first, a quick soul will be

 $.ajax({ type: "POST", url: "/DAM/Home/_ImageSearchResult", cache: false, traditional: true, contentType: 'application/json; charset=utf-8', dataType: 'json', data: JSON.stringify({ page: page, itemsperpage: itemsperpage, sort: sort, sortdir: sortdir, model: { FileName: $("#FileName").val(), OriginalFormat: $("#OriginalFormat").val() and so on... 

for the second, you can do something like

 $.ajax({ type: "POST", url: "/DAM/Home/_ImageSearchResult", data: $('#advancesearchform').serialize() + "&page=" + page + "&itemsperpage=" + itemsperpage + "&sort=" + sort + "&sortdir=" +sortdir 

Answer 2

Looking at your code, the AdvanceSearchFilters class has the OriginalFormat property, while the serialization form has the OriginalFileName value

I would also suggest starting with a non ajax approach. If you can return values ​​correctly in a non js environment, then you know that the problem is with ajax.

If the value of the name on the elements is incorrect, then the connecting device of the model cannot correctly display them. e.g. AdvanceSearchFilters.Height , as indicated in Height

Answer 3

First of all, try looking here: JSON.Stringify Examples
Alternatively, you can use $ ("form"). Serialize () to get your serialized data.

 $.ajax({ url: "....", method: "POST", data: $("form").serialize() })