带有MVC4模型绑定的Angular JS因日期/日期时间而失败？答案

【问题标题】：Angular JS with MVC4 model binding failing with date/datetime?带有MVC4模型绑定的Angular JS因日期/日期时间而失败？
【发布时间】：2013-01-06 04:45:21
【问题描述】：

当使用 Angular JS 将复杂对象的日期时间和日期时间回传到服务器时？值没有正确绑定。我试过 JSON.stringify 无济于事。我已经发布了一个相关的问题，尽管它可能太笼统了。我真正需要知道的是如何正确传递这些日期。我目前正在做的是在 js 中使用解决方法来转换日期，但我宁愿不这样做，而只是在 Angular 中以我需要的形式获取日期然后传回正确的值。

你如何绑定到那些日期时间/日期时间？值正确吗？请参阅以下代码示例和 Fiddler 发布结果。

C# 类：

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 控制器：

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

提琴手帖子：

HTTP/1.1 200 OK Cache-Control: private Content-Type: application/json; charset=utf-8 服务器：Microsoft-IIS/8.0 X-AspNetMvc-版本：4.0 X-AspNet 版本：4.0.30319 X-SourceFiles： =?UTF-8?B?YzpcdXNlcnNcbmlja1xkb2N1bWVudHNcdmlzdWFsIHN0dWRpbyAyMDEyXFByb2plY3RzXFZhbGlkYXRpb25UZXN0XEhvbWVcR2V0UGVyc29uXDE=?= X-Powered-By：ASP.NET 日期：2013 年 1 月 16 日星期三 14:48:34 GMT 内容长度：124

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

这是服务器端的结果。日期时间绑定到不正确的新日期时间值和日期时间？一片空白。

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-4 angularjs

【解决方案1】：

如果有人有更好的解决方案，请随时更新答案。

那里可能有更好的解决方案，但我所做的是非常简单的解决方法。只需为 DateTime 对象创建一个封装属性以字符串化并将其用于绑定目的。

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

通过 http，所有对象都被视为字符串，但 ASP.NET 足够智能，可以提供模型绑定功能。但是它无法将 JavaScript Date 对象绑定到 .NET DateTime 对象。

【讨论】：

嗨@Jigar，我很欣赏你的帖子。我不得不承认我希望得到一个有助于“设置并忘记它”方法的答案，换句话说，它不是那么手动的，但是因为你是唯一一个回答的人，我也使用过这种方法并且知道它的工作我将你的标记为答案。感谢您的意见。

【解决方案2】：

更强大的方法是使用模型绑定器来处理所有传入的日期。

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

添加全局 ASAX。

var dateTimeBinder = new DateTimeBinder();

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

【讨论】：