Earlier we saw how to make ajax calls from JQuery to consume WebApi Services .
the Same is shown here with angular js as a JavaScript framework .
Create a webApi controller and its method to get the data from Database
Create an HTML page to make ajax calls and display the result on the browser
//CDN//
//binding Json result to table
the Same is shown here with angular js as a JavaScript framework .
Create a webApi controller and its method to get the data from Database
public class EmployeeController : ApiController
{
private DRMSEntities1 db = new DRMSEntities1();
// GET
api/Employee
public IQueryable<DRMS_Tbl_Employee> GetDRMS_Tbl_Employee()
{
return db.DRMS_Tbl_Employee;
}
}Create an HTML page to make ajax calls and display the result on the browser
View
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="Scripts/bootstrap.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<title></title>
</head>
<body ng-app="RiskModule">
<h1>hi {{2+2}}</h1>
<div ng-controller="RiskDetailsController">
{{Employee.EmployeeName}}
//binding Json result to table
<table ng-repeat="Emp in
Employee" class="table table-condensed">
<tr>
<td>
{{Emp.EmployeeID}}
</td>
<td>{{Emp.EmployeeName}}</td>
<td>{{Emp.Email}}</td>
<td>{{Emp.RoleId}}</td>
</tr>
</table>
<script >
//Making Ajax calls
var app = angular.module("RiskModule", []);
app.controller("RiskDetailsController", function ($scope, $http) {
$http.get('http://localhost:60228/api/Employee').
success(function (data, status,
header, config) {
$scope.Employee = data;
}).
error(function (data, status,
header, config) {
alert("Error");
});
});
</script>
</div>
</body>
</html>
Run the solution and you will see the result as below 
No comments:
Post a Comment