Introduction To Web Services Using AngularJS In ASP.NET MVC

Code Description

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

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

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

I have used my connection string name here.

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

I put my Stored Procedure “AngularDB” here.

Mention all fields using Object of Employee class.

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.

Step7

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

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

The below link is the Web Service URL :

http://localhost:52057/EmployeeService.asmx

Then Click On GetAllEmployees Link.

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.

Then, your URL path is changed.

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

You can see all data in JSON format.

TABLE’S DATAS IN JSON FORMAT

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.

Step9

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

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

Step10

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

Style Ref

Style Description

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

Step11

To check for Web Service related reference file.

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

Step12

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

Code Ref

Code Description

Here name of the controller is “HomeController”.

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

Step13

Add a View file named “Index.cshtml”.

Code Ref

Code Description

Here I added Text for title of the browser.

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

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.

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.

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

Then I added for Header Text formalities.

Then I 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 in the employees array we want a table row. With in each cell of the table row we 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 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.

OUTPUT

The URL path of the application.

http://localhost:50729/

Already there 11 records Then we inserted 2 records extra.

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.

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

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

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

The footer of the web page is 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

What we learned in this article is mentioned below.