Дата не отображается правильно, используя AngularJS

Question

Я использую AngularJS с ASP.Net MVC для отображения данных пользователя. Когда вид запуск MVC, он вызывает угловой модуль для извлечения данных из базы данных:

<table class="table table-striped"> 
    <tr ng-repeat="p in products"> 
     <td>{{p.UserName}}</td> 
     <td>{{p.UserDoB}}</td> 
     <td class="text-right"> 
      <button class="btn btn-danger" ng-click="deleteProduct(p)">X</button> 
     </td> 
    </tr> 
</table> 

В угловом контроллере, я просто послал запрос Ajax для метода действия MVC:

$http.get('/Home/GetUser') 
    .success(function (result) { 
     $scope.users= result; 
    }) 
    .error(function (data) { 
     console.log(data); 
    }); 

В методе GetUser опять же это обычный метод для чтения из базы данных:

public JsonResult GetUser() 
    { 
     User userData = (User)Session["user"];    
     var db = new scaleDBEntities(); 
     return this.Json((from userObj in db.Users 
          join uc in db.UserContacts 
          on userObj.Id equals uc.usrID 
          join us in db.Users 
          on userObj.usrSupervisor equals us.Id 
          where userObj.Id.Equals(userData.Id) 
          select new 
          { 
           usrNme = userObj.usrNme, 
           usrdob = userObj.usrDoB,         
          }) 
          , JsonRequestBehavior.AllowGet 
         ); 
    } 

Если вы можете видеть, usrDoB это поле базы данных SQL Server и его тип данных Дата. Моя проблема заключается в том, что значение даты корректно, когда я открываю таблицу с помощью SQL Server Management Studio, но это неверно в приложении, использующем Angular.

Например, дата 12/28/1979 выглядит следующим образом: /Date(315187200000)/ ??

Любые идеи? Спасибо

Answer 1

Я нашел решение с:

ngModel.$parsers.push(fromUser); 
ngModel.$formatters.push(toUser); 

С, что я динамически изменять формат данных при связывании.

Посмотреть полное решение в jsfiddle и для справки как $ парсеров и $ форматтеры используются взглянули на Parser and Formatters

Answer 2

контроллеров Asp.Net MVC не используются Newtonsoft Json.NET для строительства JsonResult, но использовать JavaScriptSerializer. Вот почему дата не отформатирована должным образом.

Самое простое решение - переместить свое действие в контроллер Web Api (ApiController), поэтому будет использоваться Newtonsoft Json.net.

Другим вариантом является создание пользовательских ActionResult. См пример here

Answer 3

Вы можете использовать date = new Date(parseInt(date.substr(6))); для преобразования даты в формате JSON в правильном формате внутри законченного примера javascript.Here в:

Контроллер:

public class Employee 
{ 
    public int ID { get; set; } 
    public DateTime DOB { get; set; } 
} 

public class HomeController : Controller 
{ 
    public ActionResult AngularDates() 
    { 
     return View(); 
    } 

    [HttpGet] 
    public JsonResult GetDates() 
    { 
     var e1 = new Employee { ID = 0, DOB = new DateTime(1988, 10, 27) }; 
     var e2 = new Employee { ID = 1, DOB = new DateTime(1969, 05, 09) }; 
     var employees = new List<Employee> { e1, e2 }; 

     return Json(new { Employees = employees }, JsonRequestBehavior.AllowGet); 
    } 
} 

Вид:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script> 

<script type="text/javascript"> 
    angular.module('app', []); 

    angular.module("app").controller('mainController', function ($scope, $http, $compile) { 

     $scope.GetDates = function (employee) { 

      $http.get("/Home/GetDates"). 
      success(function (data, status, headers, config) { 

       debugger; 
       data = data.Employees; 

       for(var i = 0;i < data.length;i++) 
       { 
        var employee = data[i]; 
        var date = employee.DOB; 
        var formattedDate = new Date(parseInt(date.substr(6))); 

        var message = "Before - " + date + ". After - " + formattedDate; 
        alert(message); 

        data[i].DOB = formattedDate; 
       } 

       $scope.employees = data; 


      }). 
      error(function (data, status, headers, config) { 

      }); 
     } 
    }); 
</script> 
<div ng-app="app"> 
    <div id="mainController" ng-controller="mainController"> 
     <input type="button" ng-click="GetDates()" value="Get Dates" /> 
     <table class="table table-striped"> 
      <tr ng-repeat="e in employees"> 
       <td>{{e.ID}}</td> 
       <td>{{e.DOB | date:'yyyy-MM-dd'}}</td> 
       <td class="text-right"> 
        <button class="btn btn-danger" ng-click="deleteProduct(p)">X</button> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

Выход в браузере: