Web Api 2 deserialize LINQ2SQL object with collection property - ajax

Question

The context is long, so I'll start with the question: Why isn't the InductionQAs collection property being rehydrated?
In a Web API 2 method, LINQ produces an object ic with a collection property InductionQAs. After I eliminate a huge irrelevant object graph and prevent a circular reference, ic is returned by the method. Here's the code. Error handling has been removed for brevity.
// GET: api/InductionContent/5
[Authorize]
public object Get(int id)
{
var dc = new Models.InductionsDataContext();
var user = GetUser(dc);
var ic = dc.InductionContents.Single(c => c.InductionContentID == id);
ic.User.InductionContents.Clear(); //don't ship this it can be huge
return ic;
}
Here's the invoking JS code. Ignore the authorisation header business, that all works fine.
var token, headers;
$.ajax({ //get session token
url: "api/token",
headers: { Authorization: "Basic " + btoa("username:password") },
}).done(function (result) {
localStorage.setItem('access_token', token = result.access_token);
var headers = { Authorization: "Session " + token };
$.ajax({ //get an induction content object
url: "api/InductionContent/5",
headers: headers
}).done(function (ic) {
//at this point we have an object graph
var json = JSON.stringify(ic);
});
});
This is what JSON.stringify(ic) returns:
{
"InductionContentID": 5,
"InductionTemplateID": 1,
"InductionContent1": "<p>We recognise that it is ...(redacted)</p>",
"InductionContentOrder": 301,
"Caption": "Workplace Health and Safety",
"OwnerId": 0,
"ParentId": 0,
"TopicId": 5,
"InductionQAs": [
{
"InductionQAID": 1,
"InductionContentID": 5,
"Question": "Who is responsible for ...(redacted)",
"Answers": "A|B|C|*D",
"InductionQAOrder": 1
}
],
"User": null
}
All well and good. Now we round-trip it.
$.ajax({
type: "post",
url: "api/InductionContent",
headers: headers,
data: ic
});
This calls into the following web method:
// POST: api/InductionContent
[Authorize]
public void Post([FromBody]Models.InductionContent ic)
{
//redacted
}
The method is invoked and ic has a value. ic.User contains data, but inspection of ic.InductionQAs reveals that it has not been initialised.
Serialisation is configured as follows:
protected void Application_Start()
{
GlobalConfiguration.Configure(WebApiConfig.Register);
GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings
.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
GlobalConfiguration.Configuration.MessageHandlers
.Add(new AuthenticationHandler(CreateConfiguration()));
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Answer 1

MVC is smart but not quite smart enough. It needs a hint. The "round-trip" call should have looked like this:
$.ajax({
type: "post",
url: "api/InductionContent",
contentType: "text/json",
headers: headers,
data: JSON.stringify(ic)
}).done(function (result) {
//etc
});
There are two things to note here.
We have assumed manual control of payload encoding
We have annotated the post with the encoding used
One another thing...
Having got it all to work I decided the method should return the id of the freshly minted database row. Changing the method return type to int and appending a last line
return nc.InductionContentId;
should have been enough, but the done method of the ajax call totally failed to fire. Investigation with Fiddler revealed that the id value had indeed been returned with a content-type of text/json.
When you specify a content type for a jQuery ajax call, the same content type is used for the response. If the return value is an object, this will work fine. The object will be serialised as JSON and at the other end it will be parsed to provide the result object.
But for a simple value like an int, this comes unglued at the parsing stage. To resolve the problem, a return content type of plain text by using the dataType attribute.
$.ajax({
type: "post",
url: "api/InductionContent",
contentType: "text/json",
dataType: "text",
headers: headers,
data: JSON.stringify(ic)
}).done(function (result) {
var id = result;
//etc
});