Consuming web-service through Angular
What I have tried:
I am consuming a simple web-service from angular. The web-service is returning the appropriate json result. However, the expressions on my angular app is not getting resolved with the json data fed by webservice
Web-Service code:
public class EmployeeService : System.Web.Services.WebService
{
[WebMethod]
public void GetEmployee()
{
List<Employee> employeeList = new List<Employee>();
string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("SELECT id, name, gender, annual_salary from tblEmployee", con);
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
while(reader.Read())
{
Employee emp = new Employee();
emp.Id = Convert.ToInt32(reader["ID"]);
emp.Name = reader["NAME"].ToString();
emp.Gender = reader["GENDER"].ToString();
emp.Annual_Salary = Convert.ToInt32(reader["Annual_Salary"]);
employeeList.Add(emp);
}
con.Close();
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(employeeList));
}
}
}
Angular Controller code:
myModule.controller("ConsumeEmployeeWebService", function ($scope, $http) {
$http.post('EmployeeService.asmx/GetEmployee')
.then(function (response) {
$scope.employees = response.data;
});
});
HTML :
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Consuming Employee WebService using Angular</title>
<script src="Scripts/Script.js"></script>
<script src="Scripts/angular.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller="ConsumeEmployeeWebService">
<table>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>GENDER</th>
<th>SALARY</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{employee.Id}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.Gender}}</td>
<td>{{employee.Annual_Salary}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
WebService Json Result:
[{"Id":1,"Name":"Rohit","Gender":"male","Annual_Salary":50000},{"Id":2,"Name":"Arif","Gender":"male","Annual_Salary":60000},{"Id":3,"Name":"Stefi","Gender":"female","Annual_Salary":70000}]
Final Result:
ID NAME GENDER SALARY
{{employee.ID}} {{employee.NAME}} {{employee.GENDER}} {{employee.Annual_Salary}}
Submit an article or tip