Property of nested model is null when using json format

Question

I am using jquery to send ajax post request to my ASP MVC4 controller, and the nested object is empty.

When I post in URL encoded format using jquery.Post the data model is populated as expected, however when I try to do the same using jquery.ajax using the json format, the model received has all properties populated except for a nested property.

These are the request data captured through fiddler.

using post

Code=dfs&Name=sdf&Country.Code=PKR&Remarks=dfsdf

using json

{"Code":"dsf","Name":"sdf","Country.Code":"PKR","Remarks":"dfsdf"}

Thanks

EDIT

public class City : IKeyed<int>{
    public virtual int Id { get; protected set; }
    public virtual string Code { get; set; }
    public virtual string Name { get; set; }
    public virtual Country Country { get; set; }
    public virtual string Remarks { get; set; }
    public virtual bool IsActive { get; set; }
}

public class Country : IKeyed<int> {
    public virtual int Id { get; protected set; }
    public virtual string Name { get; set; }
    public virtual string Code { get; set; }
}

$.ajax({
                url: url,
                type: method,
                dataType: 'json',
                data: data,
                contentType: 'application/json; charset=utf-8'

});

Please note that all fields are getting populated except Country.Code. Country is null. So I am sure there is nothing wrong with the request. — Umair Ahmed, Nov 10 '12 at 12:41

score 1 · Answer 1 · answered Nov 10 '12 at 12:43

1

Writing

"Country.Code":"PKR"

actually sais that you have a Country object that has a Code property. Write the propery like so

"CountryCode":"PKR"

As far as I see that's the only problem with the json you're trying to post;

Or, make Code an actual property of the Country object like so

"Country" : { "Code" : PKR" }

answered Nov 10 '12 at 12:43

Mihai

2,740
31
45

Anyway, if you have posted the code with which you try to read the property, you would have gotten a quicker answer :), because like this, I have to assume what the problem is – Mihai Nov 10 '12 at 12:49
Ok. The edit I made is the actual response to your problem :). Use "Country" : { "Code" : "PKR" } – Mihai Nov 10 '12 at 12:50

score 1 · Answer 2 · answered Nov 10 '12 at 12:47

1

The URL encoded form binding and JSON binding are very different - in fact JSON is just being deserialized into object, not mapped by names like key - value pairs. To bind nested property you need nested object in your JSON:

{"Code":"dsf","Name":"sdf","Country":{"Code":"PKR"},"Remarks":"dfsdf"}

answered Nov 10 '12 at 12:47

tpeczek

23,867
3
74
77

Cool it worked... but now am left with another problem. I was using JSON.stringify(); to generate the json. And clearly its not generating it the way I want it :) – Umair Ahmed Nov 10 '12 at 12:55
Oops sorry... its not anything to do with JSON.stringfy. The actual object not getting generated properly... – Umair Ahmed Nov 10 '12 at 12:57

score 0 · Answer 3 · edited May 23 '17 at 12:18

0

Do not construct your object in json manually. Take the advantage from JSON.stringify:

var obj = new Object();
obj.Code = "dsf";
obj.Name = "sdf";
obj.Country = new Object();
obj.Country.Code = "PKR";
obj.Remarks = "dfsdf"; 

JSON.stringify(obj) // gives you the object serialized to json format

edited May 23 '17 at 12:18

Community

1
1

answered Nov 10 '12 at 12:58

jwaliszko

16,942
22
92
158

I am doing the same... using serializeObject that generates a object from all inputs in the form. The problem is in serializeObject. That was a function i found by googling – Umair Ahmed Nov 10 '12 at 13:02
function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name] !== undefined) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; – Umair Ahmed Nov 10 '12 at 13:03
Your function serializes form to an object. It's logic is based on `.serializeArray()` function, which creates a JavaScript array of objects - http://api.jquery.com/serializeArray/. Function `.serializeObject()` next flatterns this array of objects to one object. Unfortunately, it does not construct complex objects as far as I see. – jwaliszko Nov 10 '12 at 13:43
It means, that if your form contains field ` – jwaliszko Nov 10 '12 at 13:50
Found what i was looking for JQuery.Form Pluggin – Umair Ahmed Nov 10 '12 at 13:58

Manpreet Singh Dhillon · Answer 4 · 2021-07-16T20:19:32.077

The correct thing to do is to make a post request with traditional set to false (traditional:false). jQuery has traditional false by default. To pass nested or complex JSON object jQuery requires entity body. In case of GET request there is no body so jQuery converts JSON to JSON string and appends to URL. That is why your nested property is null Please refer to this link for reference. If you cannot use POST request and if your controller implements Web API, then use [FromUri] attribute to parameter to force C# to convert complex types from URI. For example:

public HttpResponseMessage GetMethod([FromUri] City city)

Property of nested model is null when using json format

4 Answers4