Angular js JSON data with MVC model binding for DateTime?

Question

I am using Angular JS to get and post data to my MVC 4 controller as JSON. All of my properties convert properly except the DateTime/DateTime? types. I would like to have a 'set it and forget it' approach to handling dates so that new classes and or properties that are added will not have to remember to do some special conversion to handle a date properly. I have seen the following approaches and possible disadvantages. What approach are people out there using for the same platform? Is there something in MVC4 that is handling this properly that I may not have configured? Any suggestions will be greatly appreciated.

1. Custom model binder. As details in Phil Haack blog. Possible performance issues.
2. Perform some modification on the JS side. As detailed in Robert Koritnik's blog. This doesn't seem to work for Angular js, perhaps there is a setting in the $http.post that will allow this to work but my object has all null values with this approach.
3. Have some additional property such as FormattedDateTime that can be converted on the POST action. This isn't a 'set it and forget it approach' though it does allow for properly displaying dates in the client side which are still in the '/Date(695573315098)/' format

Please see the following code example. C# class:

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime BirthDate { get; set; }
    public DateTime? ApprovedForSomething { get; set; }
}

Angular JS Controller:

    function PersonController($scope, $http) {
        $scope.getPerson = function () {
            $http.get('../../Home/GetPerson/1').success(function (data) {
                $scope.Person = data;
            });
        }
        $scope.updateApprovedForSomething = function () {
            $http.post('../../Home/UpdatePerson', { person: $scope.Person }).success(function (data) {
                console.log(data);
            });
        }
    }

Fiddlers POST:

HTTP/1.1 200 OK Cache-Control: private Content-Type: application/json; charset=utf-8 Server: Microsoft-IIS/8.0 X-AspNetMvc-Version: 4.0 X-AspNet-Version: 4.0.30319 X-SourceFiles: =?UTF-8?B?YzpcdXNlcnNcbmlja1xkb2N1bWVudHNcdmlzdWFsIHN0dWRpbyAyMDEyXFByb2plY3RzXFZhbGlkYXRpb25UZXN0XEhvbWVcR2V0UGVyc29uXDE=?= X-Powered-By: ASP.NET Date: Wed, 16 Jan 2013 14:48:34 GMT Content-Length: 124

{"FirstName":"Bob","LastName":"Smith","BirthDate":"/Date(695573315098)/","ApprovedForSomething":"/Date(1358261315098)/"}

As you can see with the Fiddler data the date is coming over as a JSON date but when hitting the POST method the DateTime property is not correct and the DateTime? property is null.

Solution

Do you have the option of switching your AJAX postback to be handled by a WebApi's ApiController instead of an MVC controller?

I ran into this problem recently and took advantage of the ApiController's support for ISO 8601 date format.

Here's some info: http://www.hanselman.com/blog/OnTheNightmareThatIsJSONDatesPlusJSONNETAndASPNETWebAPI.aspx

Comments

[Ben Lesh]

I would go with Phil Haack's solution. JSON dates should be in a JavaScript-readable format when they leave the server. It's JavaScript Object Notation, afterall.

[Anders Bornholm]

+1 on Haack. Using JSON.NET will fix the datetime issue as well as silly serialization format of .NET dictionaries.