Posting date (dd/mm/yyyy) and float (comma) values to aspnet WebApi

Question

The Problem

When I post jSon data to webapi, using pt-br formats (dd/mm/yyyy for date and comma decimal separator for float), the values are deserialized as en-us formats resulting in error.

i.e.

» date: posting 23/01/2013 becames 01/01/0001

» float: posting 1,4 becames 0.0

The Help Request

Can anybody help me to define "the ultimate" solution to post data to web api using other cultures than en-US. I've read a few discussions but none of them presents the complete solution, or even a working solution.

Considering the following

Model:

public class Person
{
    public Datetime BirthDate { get; set; }
    public double Weight { get; set; }
}

ApiController Method

public HttpResponseMessage Create(Person person)
{
    // ...
}

AjaxCall

$.ajax({
    type: 'POST',
    url: sl.baseUri + "/create",
    data: "Weight=87%2C7&BirthDate=17%2F07%2F1981",
    success: null,
    dataType: "json",
})

** I already added the following globalization settings to the web.config

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="pt-BR" uiCulture="pt-BR"/>

Answer 1

To solve this issue, I created a custom binding for dates.

    ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        ko.utils.registerEventHandler(element, 'change', function () {
            var value = valueAccessor();

            if (element.value !== null && element.value !== undefined && element.value.length > 0) {
                value(element.value);
            }
            else {
                value('');
            }
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);

        var output = '';
        if (valueUnwrapped !== null && valueUnwrapped !== undefined && valueUnwrapped.length > 0) {
            output = moment(valueUnwrapped).format('YYYY-MM-DD');
        }

        if ($(element).is('input') === true) {
            $(element).val(output);
        } else {
            $(element).text(output);
        }
    }
};

This binding keeps the date in the following format: 2014-11-05T00:00:00-02:00 It is recommended that you use a input type=date in your html.

Also, you'll need to include the moment.js library to your project.