Hi mahesh213,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult GetAll()
{
return Json(Employees(), JsonRequestBehavior.AllowGet);
}
public List<Employee> Employees()
{
List<Employee> employees = new List<Employee>();
employees.Add(new Employee { Id = 1, FromDate = new DateTime(2019, 08, 10, 13, 23, 43), ToDate = new DateTime(2019, 08, 10, 15, 23, 48) });
employees.Add(new Employee { Id = 2, FromDate = new DateTime(2019, 07, 12, 20, 23, 05), ToDate = new DateTime(2019, 07, 12, 23, 23, 05) });
employees.Add(new Employee { Id = 3, FromDate = new DateTime(2020, 01, 13, 01, 30, 01), ToDate = new DateTime(2020, 01, 13, 07, 30, 01) });
return employees;
}
public class Employee
{
public int Id { get; set; }
public DateTime FromDate { get; set; }
public DateTime ToDate { get; set; }
}
}
View
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http) {
GetEmployees();
function GetEmployees() {
$scope.employees = [];
$http({
method: 'Get',
url: '/Home/GetAll'
}).success(function (data, status, headers, config) {
for (var i = 0; i < data.length; i++) {
var fromDate = data[i].FromDate;
var toDate = data[i].ToDate;
data[i].FromDate = new Date(ConvertJsonDateToDateTime(fromDate));
data[i].ToDate = new Date(ConvertJsonDateToDateTime(toDate));
}
$scope.employees = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
function ConvertJsonDateToDateTime(date) {
var parsedDate = new Date(parseInt(date.substr(6)));
var tzoffset = (new Date(parsedDate)).getTimezoneOffset() * 60000;
var localISOTime = (new Date(parsedDate - tzoffset)).toISOString().substring(0, 19).replace('T', ' ').replace(/-/g, '/');
return localISOTime;
}
$scope.TimeDiff = function (start, end) {
var diff = (end.getTime() - start.getTime()) / 1000;
diff /= 60 * 60;
return Math.abs(Math.round(diff));
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController" align="center">
<table class="table table-bordered table-hover table-striped">
<tr>
<th>Id</th>
<th>Date</th>
<th>Begin</th>
<th>End</th>
<th>Duration</th>
</tr>
<tbody ng-repeat="e in employees">
<tr>
<td>{{e.Id}}</td>
<td>{{e.FromDate | date : "yyyy/MM/dd"}}</td>
<td>{{e.FromDate | date : "HH:mm:ss"}}</td>
<td>{{e.ToDate | date : "HH:mm:ss"}}</td>
<td>{{TimeDiff(e.FromDate,e.ToDate)}} Hours</td>
</tr>
</tbody>
</table>
</div>
</body>
Screenshot
