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

Mention all the fields using Object of Employee class.

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

Provide the serialization and deserialization functionality of AJAX enabled application.

Then, convert the listEmployees object values into JSON String.

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

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

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.

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.

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

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.

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

Step 10

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

Style Ref

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

Code Description

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

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

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

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.

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

Then, I have added for Header Text formalities.

Then, I have added for Footer Text formalities.

Then, added table header and design style.

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,

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.

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.

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.