CODEWITHSUNDEEP
jqueryajaxasp.net-mvcrazorasp.net-mvc-4
idlehands23
idlehands23

Reputation: 326

MVC4 Form Serialize to controller not working

I have tried just about everything to send a form back to my controller with ajax.

I have simplified my model to just strings.

My object called model is null every time (the other parameters map just fine i.e. page, sort...). 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);
    }
});

The JSON.stringfy :
{\"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\"}

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; }
}

Upvotes: 4

Views: 5340

Answers (3)

neiha
neiha

Reputation: 171

The problems is that you are sending data in the incorrect format. When you call $('#advancesearchform').serialize(); the data is formatted as a query string, but you are telling ajax to send JSON. With this:

{
 "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 are sending "model" as a string. What you need to do is either convert your advancesearchform atributes to a json format and attach them to the current JSON or send everything as a query string.

For the first one, a quick soulution would 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 one, you could do something like

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

Upvotes: 1

Pavlo Sobchuk
Pavlo Sobchuk

Reputation: 1564

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

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

Upvotes: 0

Colin Bacon
Colin Bacon

Reputation: 15609

Looking at your code the AdvanceSearchFilters class has a property called OriginalFormat whereas the serialize form has a value of OriginalFileName

Also I would recommend starting with an non ajax approach. If you can postback the values correctly in a non js environment then you know the problem is ajax related.

If the name value on the elements are incorrect then the model binder cannot map them correctly. e.g. AdvanceSearchFilters.Height as apposed to Height

Upvotes: 0

Related Questions