Some JSON fields showing up as NULL when hitting MVC Controller method

Question

After submitting an ajax call, I have confirmed in the request header that all the json fields have a value. What I do not understand is that when I debug on the server side, only the DateEntered field has a value (parsed into a DateTime object). When I put the same information in using Postman, it works just fine on the server (all the fields have a value).

Controller method:

[HttpPost]
public JsonResult SaveJobApplication(ApplicationFormObject jobApplicationObject)
{
    return Json(_jobApplicationController.SaveJobApplication(jobApplicationObject), JsonRequestBehavior.AllowGet);
}

Ajax call:

$.ajax({
    url: 'http://myurl.com/SaveJobApplication',
    data: JSON.stringify(applicationInfo),
    contentType: 'application/json',
    type: 'POST'
}).done(function(message) {
    // do some stuff
});

Here is the context:

The ajax request is coming from a different origin 'http://somedomain.com' than my server origin 'http://myserverdomain.com'. I have implemented CORS in the Web.Config file like so:

...
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
...

This has been tested and it is working fine (My server is able to grant ajax requests from other origins).

The json object that I am submitting is like this:

var applicationInfo = {
    FirstObject: {
        'NameFirst': 'blah blah',
        'NameLast': 'blah blah blah',
        'DateEntered': '2012-5-5'
    },
    SecondObject: {
        'LastJob': 'blah blah',
        'ReasonQuit': 'blah blah blah'
    }
}

The class/objects on the server are like this:

// Object that ajax is utilizing
public class ApplicationFormObject
{
    public FirstObject FirstObject { get; set; }
    public SecondObject SecondObject { get; set; }
}

public class FirstObject
{
    public string NameFirst { get; set; }
    public string NameLast { get; set; }
    public DateTime? DateEntered{ get; set; }
}

public class SecondObject 
{
    public string LastJob { get; set; }
    public string ReasonQuit { get; set; }
}

Important Information

The json object that I am sending is created dynamically. I actually loop through the form elements via ajax .each. For each element I am adding it to an object like so:

var applicationInfo = {};

$('form input, form select').each(function() {
    var that = $(this);
    if(isValid(that)) {
        applicationInfo["'" + that.attr('id') + "'"] = that.val();
    }
});

When I look at the request header, it shows the JSON as being in such format:

{
    ...
    'demoObject': "Value of demo object"
    ...
}

However, when I test it on Postman, the object is not created dynamically. I explicitly fill in the json object one by one for test data. When I look at the request header for this method, it shows the JSON as being in such format:

{
    ...
    demoObject: "Value of demo object"
    ...
}

the difference being that the second example does not have single quotes, and the first one does. Hope this information makes sense. Please let me know how I can clarify.

Your method accepts parameter type `ApplicationFormObject` but the model is type of `JobApplication`? — , Dec 11 '14 at 01:19
But I can name the object being passed in anything that I want. I admit, I should use some better naming conventions. And in my experience, the MVC Controller method ignores the name of the JSON object getting sent in. All it cares about is the names of the objects and arrays inside the JSON object. — Brian, Dec 11 '14 at 15:29
In your question you are using the **type**: `ApplicationFormObject` in the method and the example class at the bottom is of **type**: `JobApplication`. Is that a typo or the root of the problem? — Lee Gunn, Dec 11 '14 at 16:47
You code works fine (all properties bound correctly) if you use the JSON stated in your 4th code block (and correct the url). But your method to dynamically produce the JSON would not produce the correct JSON format format to post back. — , Dec 12 '14 at 04:10

score 0 · Answer 1 · answered Dec 11 '14 at 04:31

0

You are passing an invalid Model.

Modify your code as follows :

[HttpPost]
public JsonResult SaveJobApplication(JobApplication jobApplication)
{
    return Json(_jobApplicationController.SaveJobApplication(jobApplicationObject), JsonRequestBehavior.AllowGet);
}

answered Dec 11 '14 at 04:31

Hamid Narikkoden

851
5
12

You are saying that I don't have any runtime errors, but that the model I am trying to pass does not match the javascript object on the client? If not, please explain more. If so, how do you explain the DateEntered field as being not null? – Brian Dec 11 '14 at 15:22
Thank you, I determined that it was a typo and it is fixed now. – Brian Dec 11 '14 at 22:15

Some JSON fields showing up as NULL when hitting MVC Controller method

1 Answers1