ASP.NET

Introduction To Web Services Using AngularJS In ASP.NET MVC

Introduction To Web Service

Web Services are used for enabling an application to invoke a method of another application. These applications can either be on the same computer or on 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. SOAP stands for Simple Object Access Protocol. SOAP messages are in XML format. Web Services have .asmx extension. For this reason web services are also often called as ASMX web services. 

To know more details about SOAP request and response, visit the below reference 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.

  1. Creating the Web Service
  2. Creating a proxy
  3. 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 VS to create the proxy class. The client application calls the proxy class method. The proxy class will then serialize the parameters, prepare a SOAP request message and send it to the web service. The web service executes the method and returns a SOAP response message to the proxy. The proxy class will then de serialize the SOAP response message and hands it 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 deserialization and makes the life of a developer much easier. 

Top 11 Notes While Writing Code For Web Services

  1. 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. Hyper Text Transfer Protocol (HTTP) is the protocol widely used by web services to send and receive messages .The messaging protocol is SOAP. SOAP stands for Simple Object Access Protocol. SOAP messages are in XML format.

  2. 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.

  3. To allow a web service to be called from JavaScript using ASP.NET AJAX, decorate the web service class with [System.Web.Script.Services.ScriptService] attribute.

  4. Web Method attribute used to specify description for the web service method.

  5. BufferResponse is a boolean property. Default is 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. 

  6. 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. 

  7. 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.

  8. 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.

  9. For smaller amounts of data, web service performance is better when BufferResponse is set to true.

  10. 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.

  11. To use ASP.NET session object in a web service, the web service class must inherit from System.Web.Services.WebService class, and the EnableSession property of WebMethod attribute must be set to true.

Introduction To AngularJS

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

Top features Of AngularJS:

  • Two Way Data-Binding
    This means that any changes to the model updates the view and any changes to the view updates the model.

  • Dependency Injection
    AngularJS has a built-in Dependency Injection, which makes application 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 and it is angular.js. To get the script file, visit https://angularjs.org. 

To know more about AngularJS, visit my articles and blogs.

Steps to create a simple application

Step 1

Create one table named “tblEmployees”.

Script 

  1. Create table tblEmployees  
  2. (  
  3.     Id int primary key identity,  
  4.     Name nvarchar(50),  
  5.     Gender nvarchar(10),  
  6.     Salary int  
  7. )  
  8. Go   

Enter some dummy records into this table.

Script 

  1. Insert into tblEmployees values ('Satya1', 'Male', 55000)  
  2. Insert into tblEmployees values ('Satya2', 'Female', 68000)  
  3. Insert into tblEmployees values ('Satya3', 'Male', 57000)  
  4. Insert into tblEmployees values ('Satya4', 'Female', 53000)  
  5. Insert into tblEmployees values ('Satya5', 'Male', 60000)  
  6. Insert into tblEmployees values ('Satya6', 'Male', 60000)  
  7. Insert into tblEmployees values ('Satya7', 'Male', 60000)  
  8. Go   

Step2

Create one Stored Procedure named “AngularDB”.

Script 

  1. Create Procedure AngularDB  
  2. As  
  3. Begin  
  4. select * from tblEmployees  
  5. End   

Then, execute this Stored Procedure to check the records.

exec AngularDB

MVC

Step3

Then, create ASP.NET MVC 4 application using Empty Template named “MvcWebService”.

MVC
Step4

Add connection string in Web.Config file.

Code Ref 

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--  
  3.   For more information on how to configure your ASP.NET application, please visit  
  4.   http://go.microsoft.com/fwlink/?LinkId=169433  
  5.   -->  
  6. <configuration>  
  7.   <connectionStrings>  
  8.     <add name="MyDB" providerName="System.Data.SqlClient" connectionString="Add Your Connection string here"/>  
  9.   </connectionStrings>  
  10.   <appSettings>  
  11.     <add key="webpages:Version" value="2.0.0.0" />  
  12.     <add key="webpages:Enabled" value="false" />  
  13.     <add key="PreserveLoginUrl" value="true" />  
  14.     <add key="ClientValidationEnabled" value="true" />  
  15.     <add key="UnobtrusiveJavaScriptEnabled" value="true" />  
  16.   </appSettings>  
  17.   
  18.   <system.web>  
  19.     <webServices>  
  20.       <protocols>  
  21.         <add name="HttpGet"/>  
  22.       </protocols>  
  23.     </webServices>      
  24.     <compilation debug="true" targetFramework="4.0" />  
  25.     <pages>  
  26.       <namespaces>  
  27.         <add namespace="System.Web.Helpers" />  
  28.         <add namespace="System.Web.Mvc" />  
  29.         <add namespace="System.Web.Mvc.Ajax" />  
  30.         <add namespace="System.Web.Mvc.Html" />  
  31.         <add namespace="System.Web.Routing" />  
  32.         <add namespace="System.Web.WebPages" />  
  33.       </namespaces>  
  34.     </pages>  
  35.   </system.web>  
  36.   
  37.   <system.webServer>  
  38.     <validation validateIntegratedModeConfiguration="false" />  
  39.       
  40.     <modules runAllManagedModulesForAllRequests="false" />  
  41.       
  42.   <!--<handlers> //comment these other wise web service will not work....  
  43.       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />  
  44.       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />  
  45.       <remove name="ExtensionlessUrlHandler-Integrated-4.0" />  
  46.       <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />  
  47.       <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />  
  48.       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />  
  49.     </handlers>--></system.webServer>  
  50. </configuration>   

Code Description

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

  1. <connectionStrings>  
  2.     <add name="MyDB" providerName="System.Data.SqlClient" connectionString="Add Your Connection string here"/>  
  3.   </connectionStrings>   

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

  1. <webServices>  
  2.       <protocols>  
  3.         <add name="HttpGet"/>  
  4.       </protocols>  
  5. </webServices>   

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

  1. <system.web>  
  2.   <webServices>  
  3.     <protocols>  
  4.       <add name="HttpGet"/>  
  5.       <add name="HttpPost"/>  
  6.     </protocols>  
  7.   </webServices>  
  8. </system.web>   

In handlers section, comment the code otherwise web service in .asmx file will not show the data. It will show the error page when right clicked on .asmx file and select View in browser (Firefox) as mentioned below. 

  1. <handlers>  
  2.       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />  
  3.       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />  
  4.       <remove name="ExtensionlessUrlHandler-Integrated-4.0" />  
  5.       <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />  
  6.       <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />  
  7.       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />  
  8. </handlers>  

MVC

For better results, comment the code in handlers section. It will work fine.

MVC

Step5

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

Code Ref 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5.   
  6. namespace MvcWebService  
  7. {  
  8.     public class Employee  
  9.     {  
  10.         public int id { get; set; }  
  11.         public string name { get; set; }  
  12.         public string gender { get; set; }  
  13.         public int salary { get; set; }  
  14.     }  
  15. }   

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”. 

  1. public int id { get; set; }  
  2. public string name { get; set; }  
  3. public string gender { get; set; }  
  4. public int salary { get; set; }  

MVC

Step6

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

MVC

Code Ref 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Configuration;  
  4. using System.Data.SqlClient;  
  5. using System.Web.Script.Serialization;  
  6. using System.Web.Services;  
  7.   
  8. namespace MvcWebService  
  9. {  
  10.     [WebService(Namespace = "http://tempuri.org/")]  
  11.     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  12.     [System.ComponentModel.ToolboxItem(false)]  
  13.     [System.Web.Script.Services.ScriptService]  
  14.     public class EmployeeService : System.Web.Services.WebService  
  15.     {  
  16.         [WebMethod]  
  17.         public void GetAllEmployees()  
  18.         {  
  19.             List<Employee> listEmployees = new List<Employee>();  
  20.   
  21.             string cs = ConfigurationManager.ConnectionStrings["MyDB"].ConnectionString;  
  22.             using (SqlConnection con = new SqlConnection(cs))  
  23.             {  
  24.                 SqlCommand cmd = new SqlCommand();  
  25.                 cmd.Connection = con;  
  26.                 cmd.CommandType = System.Data.CommandType.StoredProcedure;  
  27.                 cmd.CommandText = "AngularDB";  
  28.                 con.Open();  
  29.                 SqlDataReader rdr = cmd.ExecuteReader();  
  30.                 while (rdr.Read())  
  31.                 {  
  32.                     Employee employee = new Employee();  
  33.                     employee.id = Convert.ToInt32(rdr["Id"]);  
  34.                     employee.name = rdr["Name"].ToString();  
  35.                     employee.gender = rdr["Gender"].ToString();  
  36.                     employee.salary = Convert.ToInt32(rdr["Salary"]);  
  37.                     listEmployees.Add(employee);  
  38.                 }  
  39.             }  
  40.   
  41.             JavaScriptSerializer js = new JavaScriptSerializer();  
  42.             Context.Response.Write(js.Serialize(listEmployees));  
  43.         }  
  44.     }  
  45. }   

Code Description

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

  1. using System.Web.Services;   

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

  1. public void GetAllEmployees()   

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

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

I have used my connection string name here. 

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

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

  1. string cs = ConfigurationManager.ConnectionStrings["MyDB"].ConnectionString;  
  2.             using (SqlConnection con = new SqlConnection(cs))  
  3.             {  
  4.                 SqlCommand cmd = new SqlCommand();  
  5.                 cmd.Connection = con;  
  6.                 cmd.CommandType = System.Data.CommandType.StoredProcedure;  
  7.                 cmd.CommandText = "AngularDB";  
  8.                 con.Open();  
  9.                 SqlDataReader rdr = cmd.ExecuteReader();  
  10.                 while (rdr.Read())  
  11.                 {  
  12.                     Employee employee = new Employee();  
  13.                     employee.id = Convert.ToInt32(rdr["Id"]);  
  14.                     employee.name = rdr["Name"].ToString();  
  15.                     employee.gender = rdr["Gender"].ToString();  
  16.                     employee.salary = Convert.ToInt32(rdr["Salary"]);  
  17.                     listEmployees.Add(employee);  
  18.                 }  
  19.             }   

I put my Stored Procedure “AngularDB” here. 

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

Mention all fields using Object of Employee class. 

  1. Employee employee = new Employee();  
  2. employee.id = Convert.ToInt32(rdr["Id"]);  
  3. employee.name = rdr["Name"].ToString();  
  4. employee.gender = rdr["Gender"].ToString();  
  5. employee.salary = Convert.ToInt32(rdr["Salary"]);   

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

listEmployees.Add(employee);

Provides the serialization and deserialization functionality of ajax enabled application.

JavaScriptSerializer js = new JavaScriptSerializer();

Then converts 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.

MVC

Step7

Check for Asp.Net web service Using Stored Procedure Works ?

Right Click On “EmployeeService.asmx” , Then View In Browser.

MVC

The below link is the Web Service URL :

http://localhost:52057/EmployeeService.asmx

Then Click On GetAllEmployees Link.

MVC

To test the data that is inserted in the above table, click on Invoke button.

Also, to test the operation using the HTTP POST protocol, click the 'Invoke' button.

MVC

Then, your URL path is changed.

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

You can see all data in JSON format.

MVC

TABLE’S DATAS IN JSON FORMAT 

  1. [{"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 very fine ….

Step8

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.

MVC

MVC

Step9

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

MVC

Code Ref 

  1. var app = angular  
  2.        .module("myModule", [])  
  3.        .controller("myController", function ($scope, $http) {  
  4.   
  5.            $http.get("EmployeeService.asmx/GetAllEmployees")  
  6.                 .then(function (response) {  
  7.                     $scope.employees = response.data;  
  8.                 });  
  9.        });   

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.  

  1. var app = angular  
  2. .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. 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. 

  1. .module("myModule", [])   

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

  1. .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 what ever in web service web method attribute. 

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

In the example below, Profile is a simple property to show the properties value through view. 

  1. $scope.employees = response.data;  

MVC

Step10

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

MVC

Style Ref 

  1. body {  
  2.     font-family: Arial;  
  3. }  
  4.   
  5. table {  
  6.             font-family: arial, sans-serif;  
  7.             border-collapse: collapse;  
  8.             width: 100%;  
  9.       }  
  10.   
  11. td, th {  
  12.             border: 1px solid #dddddd;  
  13.             text-align: left;  
  14.             padding: 8px;  
  15.        }  
  16.   
  17. tr:nth-child(even) {  
  18.             background-color: #dddddd;  
  19.         }   

Style Description

For applying style to table structure and table header data then table row data. 

  1. table {  
  2.             font-family: arial, sans-serif;  
  3.             border-collapse: collapse;  
  4.             width: 100%;  
  5.       }  
  6.   
  7. td, th {  
  8.             border: 1px solid #dddddd;  
  9.             text-align: left;  
  10.             padding: 8px;  
  11.        }  
  12.   
  13. tr:nth-child(even) {  
  14.             background-color: #dddddd;  
  15.         }  
  16. For apply style to body of this application.  
  17. body {  
  18.     font-family: Arial;  
  19. }  

MVC

Step11

To check for Web Service related reference file.

Go to Reference Folder then check for “System.Web.Services.dll”

MVC

Step12

Create a controller class file called “HomeController.cs”.

Code Ref 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace MvcWebService.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //  
  12.         // GET: /Home/  
  13.   
  14.         public ActionResult Index()  
  15.         {  
  16.             return View();  
  17.         }  
  18.     }  
  19. }   

Code Description

Here name of the controller is “HomeController”.

Here name of the controller action method is “Index()”.

MVC

Step13

Add a View file named “Index.cshtml”.

Code Ref 

  1. @{  
  2.         ViewBag.Title = "Satyaprakash MVC Webservice In AngularJs";  
  3.  }  
  4.   
  5. <title>@ViewBag.Title</title>  
  6.   
  7.     <meta http-equiv="refresh" content="40">  
  8.     <script src="Scripts/angular.js"></script>  
  9.     <script src="Scripts/Script.js"></script>  
  10.     <link href="Styles.css" rel="stylesheet" />  
  11. <body ng-app="myModule">  
  12.     <marquee behavior="alternate" bgcolor=Orange><font color="Blue" size="40">MVC Records will refresh every 40 Sec!</font></marquee>  
  13.     <div ng-controller="myController">  
  14.         <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYAPRAKASH's MVC WEB SERVICE USING ANGULARJS</h2>  
  15.         <fieldset>  
  16.             <legend style="font-family:Arial Black;color:orangered">ANGULARJS MVC WEB SERVICE EMPLOYEE DETAILS</legend>  
  17.             <table align="center" border="1" cellpadding="4" cellspacing="4">  
  18.                 <thead>  
  19.                     <tr>  
  20.                         <th style="background-color: Yellow;color: blue">Employee Id</th>  
  21.                         <th style="background-color: Yellow;color: blue">Employee Name</th>  
  22.                         <th style="background-color: Yellow;color: blue">Employee Gender</th>  
  23.                         <th style="background-color: Yellow;color: blue">Employee Salary</th>  
  24.                     </tr>  
  25.                 </thead>  
  26.                 <tbody>  
  27.                     <tr ng-repeat="employee in employees">  
  28.                         <td>{{employee.id}}</td>  
  29.                         <td>{{employee.name}}</td>  
  30.                         <td>{{employee.gender}}</td>  
  31.                         <td>{{employee.salary}}</td>  
  32.                     </tr>  
  33.                 </tbody>  
  34.             </table>  
  35.         </fieldset>  
  36.     </div>  
  37.     <footer>  
  38.         <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">©  
  39.         <script> document.write(new Date().toDateString()); </script></p>  
  40.     </footer>  
  41. </body>   

Code Description

Here I added Text for title of the browser. 

  1. @{  
  2.         ViewBag.Title = "Satyaprakash MVC Webservice In AngularJs";  
  3.  }  
  4.   
  5. <title>@ViewBag.Title</title>   

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

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

Mention the path of AngularJS and Java script file and CSS style sheet and apply its properties in

Design as well as Functionality part In this application. 

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

Here I 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 it.

Here I 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 we mentioned in “Script.Js” file.  

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

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

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

Then I added for Header Text formalities. 

  1. <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">SATYAPRAKASH's WEB SERVICE USING ANGULARJS</h2>  
  2.   
  3. <fieldset>  
  4.   
  5. <legend style="font-family:Arial Black;color:orangered">ANGULARJS WEB SERVICE EMPLOYEE DETAILS</legend>  
  6.   
  7. </fieldset>   

Then I added for Footer Text formalities. 

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

Then added table header and design style. 

  1. <table align="center" border="1" cellpadding="4" cellspacing="4">  
  2.                 <thead>  
  3.                     <tr>  
  4.                         <th style="background-color: Yellow;color: blue">Employee Id</th>  
  5.                         <th style="background-color: Yellow;color: blue">Employee Name</th>  
  6.                         <th style="background-color: Yellow;color: blue">Employee Gender</th>  
  7.                         <th style="background-color: Yellow;color: blue">Employee Salary</th>  
  8.                     </tr>  
  9.                 </thead>   

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

For each employee we have in the employees array we want a table row. With in each cell of the table row we 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 employees has the list of all employees.

In the view, we are using ng-repeat directive which loops thru each employee in employees array. For each employee, we a 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. 

  1. <tr ng-repeat="employee in employees">  
  2.                         <td>{{employee.id}}</td>  
  3.                         <td>{{employee.name}}</td>  
  4.                         <td>{{employee.gender}}</td>  
  5.                         <td>{{employee.salary}}</td>  
  6. </tr>  

MVC

OUTPUT

The URL path of the application.

http://localhost:50729/

MVC

Already there 11 records Then we inserted 2 records extra. 

  1. Insert into tblEmployees values ('Satya13', 'Female', 60000)  
  2. Insert into tblEmployees values ('Satya14', 'Male', 60000)  
  3.   
  4.   
  5. select * from tblEmployees  

MVC

Then the page will refresh after 40 sec. to show these two extra recently inserted data using backend. Now a total of 14 records are showing.

MVC

Now I will delete one record it will show total 12 records after 40 sec. of refresh web page.

select * from tblEmployees

delete from tblEmployees where id=9

MVC

Here, the employee data with id=9 is not there.

MVC

The marquee tag is used for showing time table to refresh records.

MVC

The footer of the web page is showing Today’s date.

MVC

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

What we learned in this article is mentioned below.

  1. What Web Services in ASP.NET MVC are.
  2. How to use Stored Procedure In Web Services.
  3. How to connect AngularJS with Web Service in ASP.NET MVC.
  4. How to put AngularJS directives in Cshtml (Index.cshtml) file In ASP.NET MVC.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs