consuming asp.net web service in anggularjs using $http
In this video we will discuss how to consume an ASP.NET Web Service in an AngularJS application. Let us understand this step by step from creating an ASP.NET web service to consuming it in an Angular application.
Here is what we want to do
1. Create an ASP.NET Web service. This web service retrieves the data from SQL Server database table, returns it in JSON formt.
2. Call the web service using AngularJS and display employee data on the web page
web.config file settings
[?xml version=”1.0″ encoding=”utf-8″?]
[configuration]
[connectionStrings]
[add name=”DBCS”
connectionString=”server=.;database=SampleDB; integrated security=SSPI”/]
[/connectionStrings]
[system.web]
[webServices]
[protocols]
[add name=”HttpGet”/]
[/protocols]
[/webServices]
[/system.web]
[/configuration]
WebService (ASMX)
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;
namespace Demo
{
[WebService(Namespace = ”
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class EmployeeService : System.Web.Services.WebService
{
[WebMethod]
public void GetAllEmployees()
{
List[Employee] listEmployees = new List[Employee]();
string cs = ConfigurationManager.ConnectionStrings[“DBCS”].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand(“Select * from tblEmployees”, con);
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
Employee employee = new Employee();
employee.id = Convert.ToInt32(rdr[“Id”]);
employee.name = rdr[“Name”].ToString();
employee.gender = rdr[“Gender”].ToString();
employee.salary = Convert.ToInt32(rdr[“Salary”]);
listEmployees.Add(employee);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listEmployees));
}
}
}
Script.js
var app = angular
.module(“myModule”, [])
.controller(“myController”, function ($scope, $http) {
$http.get(“EmployeeService.asmx/GetAllEmployees”)
.then(function (response) {
$scope.employees = response.data;
});
});
HtmlPage1.html
[!DOCTYPE html]
[html xmlns=”
[head]
[title][/title]
[script src=”Scripts/angular.js”][/script]
[script src=”Scripts/Script.js”][/script]
[link href=”Styles.css” rel=”stylesheet” /]
[/head]
[body ng-app=”myModule”]
[div ng-controller=”myController”]
[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.salary}}[/td]
[/tr]
[/tbody]
[/table]
[/div]
[/body]
[/html]
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
