Why data showing time is long using AngularJS?

Question

Why data showing time is long by AngularJS in MVC 4 using Razor Syntax?

 

 

In my code, loading time is long in showing data in the userList  when ng-click.

Please answer me.

 

View in MVC

 

eg

<tr ng-repeat="n in user" ng-click="GetDataybyID(n.ID,n.Name,n.Description,n.Remark)">
<td>{{n.Name}}</td>
<td>{{n.Description}}</td></tr>

 

 

<tr ng-repeat="user in userList">
<td>{{user.Employee_No}}</td>
<td>{{user.Employee_Name}}</td>
<td>{{user.Position_Name}}</td>
<td>{{user.Department_Name}}</td>
</tr> 

 

 

Method Calling using AngularJS

 

$scope.GetDataybyID = function (ID, Name, Description, Remark) {
$http.get('GetData', { params: { userId: ID } }).success(function (data) {
$scope.userList= data;
if (data.length == 0) {
}
else {
}
}).error(function () {
$scope.error = "An Error has occured while loading posts!";
});
}; 

 

 

Method in C#

 

public JsonResult GetData(int userId)
{
var empListbyID=(from e in db.tbl_Employee.AsEnumerable()
select new { e.Employee_No, e.Employee_Name, p.Position_Name, d.Department_Name}).ToList();

return Json(empListbyID, JsonRequestBehavior.AllowGet);
} 

 

 

Answer 1

I show some data of employee in Employee Lists, not detail.I must show the details data of each employee in Employee List_Details when only click Employee Lists row by EmpID.

Employee Lists

Employee Name	Description
Mr Smith	Testing1
Ms Smith	Testing2
Dr Smith	Testing3

Employee List_Details

Employee NO	Employee Name	Position	Department
emp001	Mr Smith	Developer	IT

 

 

The following code get the details of each employee in Employee List ng-click by passing each EmpID.

And show details data in Employee List_Details.

View in MVC

Employee Lists
<tr ng-repeat="e in emp" ng-click="GetDatabyUserID(u.ID)">
          <td>{{e.Name}}</td>
          <td>{{e.Description}}</td>
</tr>


  Employee List_Details
<tr ng-repeat="emp in EmpList">
     <td>{{emp.Employee_No}}</td>
     <td>{{emp.Employee_Name}}</td>
     <td>{{emp.Position_Name}}</td>
     <td>{{emp.Department_Name}}</td>
</tr>

Angular JS

$scope.GetDatabyUserID = function (ID) {
        $http.get('GetEmployeeDetails', { params: {EmpId: ID } }).success(function (data) {
            $scope.EmpList = data;
        }).error(function () {
            $scope.error = "An Error has occured while loading posts!";
        });
   };

 

C# Method

[HttpGet]
 [Authorize]
 public JsonResult GetEmployeeDetails(int EmpId)
{
      var empListByEmpID= (from e in db.tbl_Employee.AsEnumerable()
                                 join p in db.tbl_Position on e.Position_ID equals p.Position_ID
                                 join d in db.tbl_Department on e.Department_ID equals d.Department_ID
                                 where e.EmpID== UserId
                                 orderby e.Employee_No
                                 select new { e.Employee_No, e.Employee_Name, p.Position_Name, d.Department_Name}).ToList();
      return Json(empListByEmpID, JsonRequestBehavior.AllowGet);
}

 

 

 

 

 

Answer 2

Hi,

   Can you exaplain your query ?