WebAPI - Array of Objects not deserializing correctly on server side

Question

In the client-side, I am using AngularJS and in the server-side I am using ASP.NET WebAPI.

I have two view models, ProductCriteriaViewModel and SimpleDisplayFieldViewModel:

public class ProductCriteriaViewModel
{
    public int ID { get; set; }
    public int? UserSearchID { get; set; }
    public bool? Enabled { get; set; }
    public SimpleDisplayFieldViewModel Property { get; set; }
    public string Operator { get; set; }
    public string CriteriaValue { get; set; }
}

public class SimpleDisplayFieldViewModel
{
    public string Name { get; set; }
    public string Value { get; set; }
    public string PropertyType { get; set; }
}

In Angular, I submit a POST request to a WebAPI controller action with the following signature:

    public IList<...> FindProducts(List<ProductCriteriaViewModel> criteriaVM, bool userFiltering)
    {
       ...
    }

In testing, I tried to send an array of Product Criterias, and checked Fiddler to see what the array looked like in the body of the POST request when it was being sent to the server. This is what the array looked like:

[
{"Enabled":true,
 "Operator":"Less than",
 "Property":
     {"$id":"2",                
      "Name":"Copyright Year",
      "Value":"Basic",
      "PropertyType":null},
 "CriteriaValue":"2013",
 "IsNew":true},

{"Enabled":true,
"Operator":"Greater Than",
"Property":
    {"$id":"2",               
     "Name":"Copyright Year",
     "Value":"Basic",
     "PropertyType":null},
"CriteriaValue":"1988",
"IsNew":true}
]

The above array has the correct values, however the result of deserialization on the server-side is incorrect. This is where it gets strange.

After the server deserializes the array and arrives in the controller action, the first element in criteriaVM is correct, all the values are set properly. However the second element is incorrect, CriteriaValue and Property are nulled out:

This issue only occurs whenever I choose the same search property for more than one criteria (i.e. Copyright < 2013 and Copyright > 1988). However, if I choose different properties (i.e. Copyright < 2013 and Price > 20), then all elements in the resulting criteriaVM are correctly initialized.

I do not understand what could be causing this issue. Why are only CriteriaValue and Property set to null in the second element of the List? Why does this issue only occur when I choose multiples of the same search properties?

Answer 1

Json.NET uses the keywords $id and $ref in order to preserve object references, so you are having troubles with your deserialization because your JSON has "$id" in the "Property" object. See this link for more information about object references.

In order to fix your deserialization issues, you can add the following line in the Register method of your WebApiConfig.cs class

config.Formatters.JsonFormatter.SerializerSettings.MetadataPropertyHandling = MetadataPropertyHandling.Ignore;

If your Web Api project does not include a WebApiConfig.cs class, simply add the configuration in your Global.asax:

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.MetadataPropertyHandling = MetadataPropertyHandling.Ignore;

Now your object in the web api method should look like this: