Angular JS with MVC4 date / date model binding error?

When using Angular JS to send to server with complex datetime and datetime object? the values ​​are not linked correctly. I've tried JSON.stringify to no avail. I posted a related question, although it may have been too general. I really need to know how to pass these dates correctly. What I am currently doing is use a workaround in js to convert dates, but I would rather not do that and just get the dates in the form I need them in when in Angular and then return the correct values.

How do you link to datetime / datetime data? the values ​​are correct? See the following code example and the results from Fiddler's post.

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);
        });
    }
}

      

Fiddler 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? YzpcdXNlcnNcbmlja1xkb2N1bWVudHNcdmlzdWFsIHN0dWRpbyAyMDEyXFByb2plY3RzXFZhbGlkYXRpb25UZXN0XEhvbWVcR2V0UGVyc29 = X-Powered-By: ASP.NET Date: Wed, Jan 16, 2013 14:48:34 GMT Content-Length: 124

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

This is the server side result. The datetime is binding to the new datetime, which is wrong and the date? zero.

enter image description here

+3


source to share


2 answers


If anyone has a better solution please feel free to update the answer.

There might be a better solution out there, but what I did is a very simple workaround. Just create an encapsulation property on the DateTime object for the string and use that for the binding.



public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime BirthDate { get; set; }
    public DateTime? ApprovedForSomething { get; set; }
    public DateTime BirthDateAsString 
    {
        get { return BirthDate.ToShortDateString();}
        set { DateTime.Parse(value, BirthDate);}
   }
}

      

Through http, all objects are treated as strings, but ASP.NET is smart enough to provide a model binding functionality. However, it cannot bind a JavaScript Date object to a .NET object DateTime

.

+3


source


A more robust approach is to use model binding to work with all incoming dates.

public class DateTimeBinder : DefaultModelBinder
{
    public override object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        var name = bindingContext.ModelName;
        var value = bindingContext.ValueProvider.GetValue(name);
        if (value == null) 
            return null;

        DateTime date;
        if (DateTime.TryParse(value.AttemptedValue, null, DateTimeStyles.RoundtripKind, out date))
            return date;
        else
            return base.BindModel(controllerContext, bindingContext);
    }
}

      



Add to global ASAX.

var dateTimeBinder = new DateTimeBinder();

ModelBinders.Binders.Add(typeof(DateTime), dateTimeBinder);
ModelBinders.Binders.Add(typeof(DateTime?), dateTimeBinder);

      

+2


source







All Articles