Posting form data through Ajax is resulting in Null model data

Question

I'm trying to post my form data which is model bound to a controller via an Ajax request however, the controller is showing that the data is null, despite the request header showing the data is being sent.

Code is below. I've tried data: JSON.stringify(form) which results in a null model whereas the below results in a model with null data.

View

$(document).on('click', '#saveData', function () {
                    if ($('#form').valid()) {
                        var form = $('#form').serialize();
                        $.ajax(
                            {
                                url: '@Url.Action("CreateClient", "Processors")',
                                type: 'POST',
                                cache: false,
                                async: false,
                                dataType: 'json',
                                contentType: 'application/json',
                                data: JSON.stringify(form)
                        })
                            .success(function (response) 
{ alert(response); })
                            .error(function (response) 
{ alert(response); });
                    }
                });

Controller

public ActionResult CreateClient(ModelData form)
    {
        if (form == null || !ModelState.IsValid)
        {                
            return Json("Error");
        }

        return Json("Success");

    }

score 2 · Answer 1 · answered Oct 28 '14 at 06:51

There are two problems with your approach.

If your model class ModelData is, for example,

class ModelData {
    public string Foo {get;set;}
    public string Bar {get;set;}
}

the appropriate data to send is {foo:"foo1", bar:"bar1"}, or eventually {Foo:"foo1", Bar: "bar1"}, depending on how you have configured your serialization - as you have specified contentType 'application/json'.

However, you are reading your form using jquery serialize(). This method returns a string, on the form "foo=foo1&bar=bar1", appropriate for contentType 'application/x-www-form-urlencoded'. So you have to make up your mind on in what format you want to send the data. If you want to continue to use serialize() to obtain the data from the DOM, use 'application/x-www-form-urlencoded' instead.

Secondly, JSON.stringify() will create a JSON string from an object. A string is an object, too. So passing a string to this function will wrap the string in a string, which doesn't make much sense: The data will be something like "\"foo=foo1&bar=bar1\"". In the same manner, the jQuery ajax function will expect an object for it's data parameter when contentType is 'json', so if you convert your object to a string before, it will be sent just as that: a string. Basically, whatever contentType you end up choosing for your request, don't use JSON.stringify for your data parameter.

TL;DR: To get this working, use the default contentType or declare it explicitly as per below, and pass the form variable as-is:

var form = $('#form').serialize();
$.ajax(
   {
       //(...)
       contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
       data: form,
       //(...)

Posting form data through Ajax is resulting in Null model data

1 Answers1