Hi Rezu2215,
Instead of returning List<Employee> return anonymous type and pass the anonymous type to return JsonResult.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public JsonResult Get_AllEmployee()
{
using (EmpolyeesEntities Obj = new EmpolyeesEntities())
{
var Emp = Obj.Employees.Select(x => new
{
ID = x.EmployeeID,
Name = x.FirstName + " " + x.LastName,
City = x.City,
Country = x.Country
}).ToList();
return Json(Emp, JsonRequestBehavior.AllowGet);
}
}
}
View
<div ng-app="myApp">
<div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">
<h3>List of Employee</h3>
<table cellpadding="12" class="table table-bordered table-hover">
<tr>
<th>ID</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
<th></th>
</tr>
<tr ng-repeat="Emp in employees">
<td>{{Emp.ID}}</td>
<td>{{Emp.Name}}</td>
<td>{{Emp.City}}</td>
<td>{{Emp.Country}}</td>
<td>
<input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
<input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
</td>
</tr>
</table>
</div>
</div>
AngularCode
<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.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
$scope.GetAllData = function () {
$http({
method: "get",
url: "http://localhost:38534/Home/Get_AllEmployee"
}).then(function (response) {
$scope.employees = response.data;
}, function (response) {
alert("Error Occur");
})
};
});
</script>
Screenshot