Question

I’m trying to update a backbone model, the server side is asp.net mvc 4. I’m getting:

“System.ArgumentException: An item with the same key has already been added” exception.

The reason is because backbone is sending Id and id to the server as properties, and the JsonValueProvider tries to add this to a dictionary.

Here is my model:

 var Task = Backbone.Model.extend({
        url: "/tasks/task",
        idAttribute: "Id"
 });

This is send to the server via Put request:

{"Id":294912,"Task":"test","DueDate":"2012-03-24T02:00:00.000Z", "id":294912}

Is there a way to prevent backbone in sending the “id” property?

Answer 1

The problem here is because the conventions in C# is not the same as in JavaScript. In C# classes have properties that starts with capital letters (Pascal Case) and it’s the norm in JavaScript to start your properties in lower case (Camel Case).

Thus when serializing view models the default behavior of the JSON.NET serializer is to serialize the object exactly with the same capitalization of properties. I could rename the properties on the view model to be camel case, but it would be as “weird” as to have properties with pascal case in your JavaScript objects.

So instead to force Backbone into a non convention way, I’ve change the serialization of the objects to convert the Pascal case properties into Camel case properties by leveraging JSON.NET’s Contract Resolver functionality.

var settings = new JsonSerializerSettings();
settings.ContractResolver = new CamelCasePropertyNamesContractResolver();
JsonSerializer serializer = JsonSerializer.Create(settings);

JsonConvert.SerializeObject(object, Formatting.None, settings);

Now this creates consistency on the client side with my code and with all the cool libraries out there.