AngularJS - Using Web Service And Stored Procedure In ASP.NET

Introduction To AngularJS

AngularJS is an MVC based framework. Google developed AngularJS is an open source project which can be used freely, and can be modified and shared by others.

Top features Of AngularJS

• Two Way Data-Binding
  This means that any changes to the Model update the View and any changes to the View update the Model.
  
  
• Dependency Injection
  AngularJS has a built-in Dependency Injection that makes applications easier to develop, maintain, and debug, in addition to the test.
  
  
• Testing
  Angular will test any of its code through both unit testing and end-to-end testing.
  
  
• Model View Controller
  Split your application into MVC components. Maintaining these components and connecting them together means setting up Angular.

To build AngularJS Applications, you should download the script file, that is angular.js. To get the script file, visit https://angularjs.org. 

To know more about AngularJS, read my other articles and blogs.

Introduction To Web Service

Web Services are used for enabling an application to invoke a method of another application. These applications can be on the same computer or different computers. Web Services use protocols like HTTP, XML and SOAP. Since these are open and well known protocols, applications built on any platform can interoperate with web services. For example, a PHP application can interoperate with a web service built using .NET.  Similarly, a web service built using different platform can be consumed by a .NET application.

Hyper Text Transfer Protocol (HTTP) is the protocol widely used by web services to send and receive messages. The messaging protocol is SOAP (Simple Object Access Protocol). SOAP messages are in XML format. Web Services have .asmx extension. For this reason, web services are often called as ASMX web services also. 

To know more about SOAP request and response, do visit the following site.

https://www.w3.org/2003/06/soap11-soap12.html

A Web Service is a web-based functionality accessed using the protocols of the web to be used by the web applications. There are three aspects of Web Service development.

• Creating the Web Service
• Creating a proxy
• Consuming the Web Service

Proxy In ASP.NET Web Service

A proxy is a major part for the web service codes. Before using the web service, a proxy must be created. The proxy is registered with the client application. Then, the client application makes the calls to the web service as it were using a local method. The proxy takes the calls, wraps it in proper format, and sends it as a SOAP request to the Server. SOAP stands for Simple Object Access Protocol. This protocol is used for exchanging web service data.

When the Server returns the SOAP package to the client, the proxy decodes everything and presents it to the client application.

Relationship between Visual Studio and Proxy

Visual Studio generates a proxy class using the Web Service Description Language document of the web service. The Web Service Description Language document formally defines a web service. It includes, 

• All the methods that are exposed by the web service
• The parameters and their types
• The return types of the methods

This information is then used by Visual Studio to create the proxy class. The client application calls the proxy class method. The proxy class then serializes the parameters, prepares a SOAP request message, and sends it to the web service. The web service executes the method and returns a SOAP response message to the proxy. The proxy class then de-serializes the SOAP response message and hands it to the client application. We don't have to serialize or de-serialize .NET CLR objects to and from SOAP format. The proxy class takes care of serialization and de-serialization, and makes the life of a developer much easier. 

Top 11 notes while writing code for Web Services

• To use ASP.NET session object in a web service, the web service class must inherit from System.Web.Services. WebService class and EnableSession property of WebMethod attribute must be set to true.
  
  
• Notice that a web service is a class that is decorated with [WebService] attribute and inherits from System.Web.Services.WebService base class. The [WebService] attribute tells that this class contains the code for a web service. Web Service Namespace is used to uniquely identify your web service on the internet from other services that are already there on the web. Web Service Namespace can be any string, but it is common to give it a company's internet domain name as they are usually unique.
  
  
• To allow a web service to be called from JavaScript, use ASP.NET AJAX, then decorate the web service class with [System.Web.Script.Services.ScriptService] attribute.
  
  
• Web Method attribute is used to specify the description for the web service method.
  
  
• BufferResponse is a boolean property with default value as true. When this property is true, the response of the XML Web service method is not returned to the client until either the response is completely serialized or the buffer is full. On the other hand, when this property is false, the response of the XML Web service method is returned to the client as it is being serialized. In general, set BufferResponse to false only when the XML Web service method returns large amounts of data. 
  
  
• CacheDuration is the property, if you want to cache the results of a web service method. This is an integer property, and specifies the number of seconds that the response should be cached. The response is cached for each unique parameter. 
  
  
• Web Methods in a web service can also be overloaded based on the number of parameters. Method overloading possible in web services by using MessageName property of WebMethod attribute. MessageName property is used to uniquely identify the individual XML Web service methods.
  
  
• Call the web service using ASP.NET AJAX, which allows partial page post back. With partial page post back, only specific portion of the page is updated without reloading the entire page.
  
  
• For smaller amounts of data, web service performance is better when BufferResponse is set to true.
  
  
• In Web.Config file When allowCookies attribute is set to true, the client application accepts the cookie returned from the ASMX web service, and copies it into all future requests that are made to the web service. This ensures that the same session is maintained between the client and the web service.
  
  
• To use asp.net session object in a web service, the web service class must inherit from System.Web.Services.WebService class and EnableSession property of WebMethod attribute must be set to true.

Steps to Create a Simple Application To Understand Better

Step 1

Create one table named “tblEmployees”.

Script 

Create table tblEmployees
(
    Id int primary key identity,
    Name nvarchar(50),
    Gender nvarchar(10),
    Salary int
)
Go

Enter some dummy records into this table.

Script 

Insert into tblEmployees values ('Satya1', 'Male', 55000)
Insert into tblEmployees values ('Satya2', 'Female', 68000)
Insert into tblEmployees values ('Satya3', 'Male', 57000)
Insert into tblEmployees values ('Satya4', 'Female', 53000)
Insert into tblEmployees values ('Satya5', 'Male', 60000)
Insert into tblEmployees values ('Satya6', 'Male', 60000)
Insert into tblEmployees values ('Satya7', 'Male', 60000)
Go

Step 2

Create one Stored Procedure named “AngularDB”.

Script 

Create Procedure AngularDB
As
Begin
select * from tblEmployees
End

Then, execute this Stored Procedure to check the records.

exec AngularDB

Step 3

Create ASP.NET web form application named “AngularWs”.

Step 4

Then, add the connection string in Web.Config file.

Code Ref 

<?xml version="1.0"?>
<configuration>
  <connectionStrings>
<add name="MyDB" connectionString="Put Your Connection String Using Visual Studio Server Explorer"/>
  </connectionStrings>
  <system.web>
    <webServices>
      <protocols>
        <add name="HttpGet"/>
      </protocols>
    </webServices>
    <compilation debug="true"/>
  </system.web>
</configuration>

Code Description

Here, I have mentioned the name of the connection string “MyDB”. 

<connectionStrings>
<add name="MyDB" connectionString="Put Your Connection String Using Visual Studio Server Explorer"/>
</connectionStrings>

Create ASMX web service that can perform a HTTP GET request. 

<webServices>
      <protocols>
        <add name="HttpGet"/>
      </protocols>
</webServices>

Enable an ASP.NET Web Service for HTTP POST and GET requests.

<system.web>
  <webServices>
    <protocols>
      <add name="HttpGet"/>
      <add name="HttpPost"/>
    </protocols>
  </webServices>
</system.web>

Step 5

Now, create a class file named “Employee.cs”.

Code Ref 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AngularWs
{
    public class Employee
    {
        public int id { get; set; }
        public string name { get; set; }
        public string gender { get; set; }
        public int salary { get; set; }
    }
}

Code Description

I have declared 4 entities using get and set properties inside Employee class. These 4 entities should be same as Columns inside the earlier mentioned table “tblEmployees”. 

public int id { get; set; }
 public string name { get; set; }
 public string gender { get; set; }
 public int salary { get; set; }

Step 6

Add a new Web Service i.e. ASMX file. Name it EmployeeService.asmx.

Code Ref 

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

namespace AngularWs
{
    [WebService(Namespace = "http://tempuri.org/")]
    [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["MyDB"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand();
                cmd.Connection = con;
                cmd.CommandType = System.Data.CommandType.StoredProcedure;
                cmd.CommandText = "AngularDB";
                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));
        }
    }
}

Code Description

This namespace is very much required for this web service related code.

using System.Web.Services;

I have created one web method named “GetAllEmployees()”.

public void GetAllEmployees()

I used one strongly type List of objects using Employee.cs class to manipulate , search and sort the lists.

List<Employee> listEmployees = new List<Employee>();

I used my connection string name here.

string cs = ConfigurationManager.ConnectionStrings["MyDB"].ConnectionString;

Then, all ADO.NET objects and properties are mentioned with their vast roles like SqlConnection , SqlCommand , SqlDataReader etc. 

string cs = ConfigurationManager.ConnectionStrings["MyDB"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlCommand cmd = new SqlCommand();
                cmd.Connection = con;
                cmd.CommandType = System.Data.CommandType.StoredProcedure;
                cmd.CommandText = "AngularDB";
                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);
                }
            }

I put my Stored Procedure “AngularDB” here. 

cmd.CommandType = System.Data.CommandType.StoredProcedure;
cmd.CommandText = "AngularDB";

Mention all the fields using Object of Employee class.

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"]);

Then, add all the field values of Employee object “employee” to List class object “listEmployees”.

listEmployees.Add(employee);

Provide the serialization and deserialization functionality of AJAX enabled application.

JavaScriptSerializer js = new JavaScriptSerializer();

Then, convert the listEmployees object values into JSON String.

Context.Response.Write(js.Serialize(listEmployees));

WebService Namespace can be any string, but it is common to give it a company's internet domain name as they are usually unique. Something like 

[WebService(Namespace = "http://tempuri.org/")]

If you want the method exposed as part of the Web service, then the method must be public and should be decorated with [WebMethod] attribute. This attribute has got several properties which can be used to configure the behavior of the XML Web service method.

Step 7

Check if ASP.NET web service using Stored Procedure works or not. Right click on “EmployeeService.asmx”  and View In Browser.

The below link is the Web Service URL.

http://localhost:52057/EmployeeService.asmx

Then, click on GetAllEmployees Link.

Then, to test the data whatever inserted in the above mentioned table, click on Invoke button. Also, to test the operation using the HTTP POST protocol, click the 'Invoke' button.

Then, your URL path is changed.

http://localhost:52057/EmployeeService.asmx/GetAllEmployees

You can see all the data in JSON format.

Table's data in JSON format

[{"id":1,"name":"Satya1","gender":"Male","salary":55000},{"id":2,"name":"Satya2","gender":"Female","salary":68000},{"id":3,"name":"Satya3","gender":"Male","salary":57000},{"id":4,"name":"Satya4","gender":"Female","salary":53000},{"id":5,"name":"Satya5","gender":"Male","salary":60000},{"id":6,"name":"Satya6","gender":"Male","salary":60000},{"id":7,"name":"Satya7","gender":"Male","salary":60000},{"id":8,"name":"Satya8","gender":"Male","salary":60000},{"id":9,"name":"Satya8","gender":"Male","salary":60000},{"id":10,"name":"Satya9","gender":"Female","salary":60000},{"id":11,"name":"Satya10","gender":"Male","salary":60000}]

It’s working fine ….

Step 8

Add a new folder to the project. Name it "Scripts". Download angular.js script file from http://angularjs.org, and paste it in Scripts folder.

Step 9

Add a new JavaScript file to the Scripts folder. Name it Script.js.

Code Ref 

var app = angular
       .module("myModule", [])
       .controller("myController", function ($scope, $http) {

           $http.get("EmployeeService.asmx/GetAllEmployees")
                .then(function (response) {
                    $scope.employees = response.data;
                });
       });

Code Description

Creating a module in Angular is straightforward. Use the Angular object's module() method to create a module. The Angular object is provided by Angular script. The following example creates module. 

var app = angular
.module("myModule", [])

The first parameter specifies the name of the module. The second parameter specifies the dependencies for this module.

A module can depend on other modules too. The module that we are creating is not dependent on any other external modules, so I am passing an empty array as the value for the second parameter.

.module("myModule", [])

To create a controller in AngularJS, create a JavaScript function and assign it to a variable using HttpGet.

.controller("myController", function ($scope, $http)

Use module object's Controller function to register the Controller with the module. Creating the Controller and registering with the module are all done in one line. 

Using HttpGet, I assigned web service link in web service web method attribute. 

$http.get("EmployeeService.asmx/GetAllEmployees")
              .then(function (response) {
                  $scope.employees = response.data;
              });

In the example below, Profile is a simple property to show the property's value through View.

$scope.employees = response.data;

Step 10

Add a new stylesheet to the project. Name it Styles.css.

Style Ref 

body {
    font-family: Arial;
}

table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
      }

td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
       }

tr:nth-child(even) {
            background-color: #dddddd;
        }
Style Description:
For apply style to table structure and table header data Then table row data.
table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
      }

td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
       }

tr:nth-child(even) {
            background-color: #dddddd;
        }

For apply style to body of this application.
body {
    font-family: Arial;
}

Step 11

To check for Web Service related reference file, go to Reference folder and then check for “System.Web.Services.dll”.

Step 12

Add an HTML page to the ASP.NET project named “MyWebAngular.html”.

Code Ref 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Satyaprakash Webservice In AngularJs</title>
    <meta http-equiv="refresh" content="40">
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/Script.js"></script>
    <link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
    <marquee behavior="alternate" bgcolor=Orange><font color="white" size="40">Records will refresh every 40 Sec!</font></marquee>
    <div ng-controller="myController">
        <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYAPRAKASH's WEB SERVICE USING ANGULARJS</h2>
        <fieldset>
            <legend style="font-family:Arial Black;color:orangered">ANGULARJS WEB SERVICE EMPLOYEE DETAILS</legend>
            <table align="center" border="1" cellpadding="4" cellspacing="4">
                <thead>
                    <tr>
                        <th style="background-color: Yellow;color: blue">Employee Id</th>
                        <th style="background-color: Yellow;color: blue">Employee Name</th>
                        <th style="background-color: Yellow;color: blue">Employee Gender</th>
                        <th style="background-color: Yellow;color: blue">Employee 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>
      </fieldset>
</div>
    <footer>
        <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© <script> document.write(new Date().toDateString()); </script></p>
    </footer>
</body>
</html>

Code Description

Here, I have added text for title of the browser.

<title>Satyaprakash Webservice In AngularJs</title>

To refresh the page to get latest data, if any update is there in the backend. 

<meta http-equiv="refresh" content="40">

Mention the path of AngularJS, JavaScript files, and CSS stylesheet and apply its properties in design as well as functionality part of this application. 

<script src="Scripts/angular.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet"/>

Here, I have added Controller related information. In this script file, the Controller is not manipulating the document object model directly, thus keeping that clean separation between the Model, View and the Controller. The Controller should only be used for setting up the $scope object and adding behavior in it.

Here, I have added “ng-controller” directive name i.e. “myController” in Div tag and main directive or parent directive “ng-app” directive name i.e. “myModule” in body tag. Because of this “ng-app” directive, we can access “ng-controller” directive. Both directives are mentioned in “Script.Js” file.  

<body ng-app="myModule">
    <marquee behavior="alternate" bgcolor=Orange><font color="white" size="40">Records will refresh every 40 Sec!</font></marquee>
    <div ng-controller="myController">

I have added Marquee tag to show the time after which the page will refresh.

<marquee behavior="alternate" bgcolor=Orange><font color="white" size="40">Records will refresh every 40 Sec!</font></marquee>

Then, I have added for Header Text formalities. 

<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYAPRAKASH's WEB SERVICE USING ANGULARJS</h2>

<fieldset>

<legend style="font-family:Arial Black;color:orangered">ANGULARJS WEB SERVICE EMPLOYEE DETAILS</legend>

</fieldset>

Then, I have added for Footer Text formalities.

<footer>
        <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© <script> document.write(new Date().toDateString()); </script></p>
</footer>

Then, added table header and design style.

<table align="center" border="1" cellpadding="4" cellspacing="4">
                <thead>
                    <tr>
                        <th style="background-color: Yellow;color: blue">Employee Id</th>
                        <th style="background-color: Yellow;color: blue">Employee Name</th>
                        <th style="background-color: Yellow;color: blue">Employee Gender</th>
                        <th style="background-color: Yellow;color: blue">Employee Salary</th>
                    </tr>
                </thead>

ng-repeat is similar to foreach loop in C#. 

For each employee we have, we want a table row. Within each cell of the table row, we want to display employee,

1. Employee Id
2. Employee Name
3. Employee Gender
4. Employee Salary

This can be achieved very easily using ng-repeat directive.

In Script.JS, the Controller function builds the Model for the View. The Model employee has the list of all employees.

In the View, we are using ng-repeat directive which loops through each employee in employees array. For each employee, we get a table row, and in each table cell of the table row, the respective employee details (Employee Id, Employee Name, Employee Gender, Employee Salary) are retrieved using the Angular binding expression. 

<tr ng-repeat="employee in employees">
                        <td>{{employee.id}}</td>
                        <td>{{employee.name}}</td>
                        <td>{{employee.gender}}</td>
                        <td>{{employee.salary}}</td>
</tr>

OUTPUT

The URL path of the application.

http://localhost:52057/MyWebAngular.html

Already there are 11 records in it. Now, we have inserted 2 more records.

Insert into tblEmployees values ('Satya11', 'Female', 60000)
Insert into tblEmployees values ('Satya12', 'Male', 60000)

select * from tblEmployees

Then, the page will refresh after 40 seconds to show these two extra recently inserted data rows using back-end.

Now, let's delete one record. It will show total 12 records after 40 seconds of refreshing the web page.

select * from tblEmployees

delete from tblEmployees where id=8

Here, the employee data with id=8 is not available.

The Marquee tag for showing time table to refresh records.

The Footer of the web page showing today’s date.

Important Notes

This web service retrieves the data from SQL Server database table, and returns it in JSON format. Call the web service using AngularJS and display employee data on the web page.

Summary

We learned the following in this article. 

1. What Web Services are.
2. How to use Stored Procedure In Web Services.
3. How to connect AngularJS with Web Service.
4. How to put AngularJS directives in HTML file In ASP.NET.