jsondeserializationasp.net-web-apicultureinvariantculture

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


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"/>

Solution

  • 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.