Consuming ASP.NET Web Service In AngularJS Using $HTTP

Here are the steps, 

Step 1: Open your Visual Studio, create a new empty Web Application and give it a meaningful name.

Step 2: In your Web.config file, add the connection string to make the connection with your SQL database.



Step 3: Create the database table. In my example, I have used the table called Employee.

Step 4: Go to the Visual Studio and open the Solution Explorer. Right click on the name of your Web Application and add a class file. Give it a meaningful name. I named it Employee.cs.

Step 5: Implement the properties of the Employee class. In my example, I have five properties, which all of them are public and auto implemented,  as shown in the figure.



Step 6: Now, we need to create the web service for our Web Application. To do that, right click your Web Application and go to add new item, then you will see the list of new items provided by the Visual Studio. Select Web service and give it a name. I named that as EmployeeService.asmx.

Step 7: Now, we are going to implement the service using some ADO.NET code. Before implementing the service, we need to import some ADO.NET namespaces.

• System. Configuration;
• System.Data.SqlClient;
• System.Web.Script.Serialization;

These namespaces are used to convert data in to JSON format. We need to call this Web service from JavaScript. Hence, just uncomment the following code line.

System.Web.Script.Services.ScriptService

Next, rename the function and give it a name as your own. I named the function in my example as GetAllEmployees.



This function is not going to return anything. It’s actually going to write employee data in a JSON format. Hence, we need to change the return type of the function to Void.

Step 8: To check the Web service, right click on the Web service file and view it on the Browser. You will see the following, as the result. Click on the method GetAllEmployees. After clicking the Invoke button, you will see the employee data in JSON format.





Step 9: If you get the following result, it means that we have created the Web service successfully.



Now, we need to create the Angularjs controller to call the Web Service.

Step 10: In the controller, we need to define the $http object to call our Web method with the help of using following line of code:

$http.post('EmployeeService.asmx/GetAllEmployees')

This request will be executed asynchronously. It means the data will not be immediately available. Hence, we need to use promise to get the response. We can implement promises using “then” key word in AngularJs. In the then function we use our $scope object to get the response. When the request completes  successfully, the function is called.

$scope.employee = responce.data;

Step 11: Next, we need to create the HTML page to view our employee data.

In index.heml page, we need to use our Angular Model name and controller name in ng-app and ng-controller directives respectively.



Then save changes and run the Web Application but you won’t get the expected result based on some reason.


Just go to inspect the elements, select console and you will see the Error 500 that calls the internal Server error. It is because we have used Http Get method to call the Web request. Change the get method as Post and then refresh the Browser and you will see employee data, which we expected to display.



Step 12: If we need to use get method to call the Web request, we need to do some modification to the web.config file by adding following code lines.



Change your request method as get and save changes. Then refresh the Browser and see the expected result.