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.

Custom model binder. As details in Phil Haack blog. Possible performance issues.
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.
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.

enter image description here

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. — Ben Lesh
– Ben Lesh, Commented Jan 16, 2013 at 16:28
+1 on Haack. Using JSON.NET will fix the datetime issue as well as silly serialization format of .NET dictionaries. — Anders Bornholm
– Anders Bornholm, Commented Dec 16, 2013 at 17:10

Sambo · Accepted Answer · 2013-12-18 14:32:28Z

3

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

answered Dec 18, 2013 at 14:32

Sambo

1,4725 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular js JSON data with MVC model binding for DateTime?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related