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.
source to share
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
.
source to share
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);
source to share