In this article I will explain with an example, how to call SOAP Web Service (ASMX) using AngularJS $http service in ASP.Net using C# and VB.Net.
Adding Web Service
You will need to add a new Web Service (ASMX) file using Add New Item Dialog of Visual Studio as shown below.
Configuring Web Service to handle jQuery AJAX calls
By default the Web Service will not accept requests from client side sent using AngularJS. In order to allow a Web Service handle AngularJS calls, the ScriptService attribute needs to be specified to the Web Service class.
Inside the WebService method, the value of the Name parameter received from the AngularJS method is returned along with the Current Server Time.
C#
///<summary>
/// Summary description for Service
///</summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class Service : System.Web.Services.WebService
{
public Service ()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}
[WebMethod]
public string GetCurrentTime(string name)
{
string message = "Hello ";
message += name;
message += "\nCurrent Time: ";
message += DateTime.Now.ToString();
return message;
}
}
VB.Net
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Service
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function GetCurrentTime(name As String) As String
Dim message As String = "Hello "
message &= name
message &= vbCrLf & "Current Time: "
message &= DateTime.Now.ToString()
Return message
End Function
End Class
Call WebService using AngularJS, AJAX and JSON in ASP.Net using C# and VB.Net
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML TextBox and a Button. The Button has been assigned AngularJS ng-click directive. When the Button is clicked, the ButtonClick function is executed.
Inside the ButtonClick function, the $http service is used to make an AJAX call to the ASP.Net WebService method. The $http service has following properties and methods.
Properties
1. method – The method type of HTTP Request i.e. GET or POST.
2. url – URL of the WebService with its method.
3. dataType - The format of the data i.e. XML or JSON.
4. data – The parameters to be sent to the WebService method.
5. headers - List of headers to be specified for the HTTP Request.
Event Handler
1. success – This event handler is triggered once the AJAX call is successfully executed.
2. error – This event handler is triggered when the AJAX call encounters an error.
The response from the AJAX call is received in JSON format inside the Success event handler of the $http service and the result is displayed using JavaScript Alert Message Box.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
$scope.ButtonClick = function () {
var post = $http({
method: "POST",
url: "Service.asmx/GetCurrentTime",
dataType: 'json',
data: { name: $scope.Name },
headers: { "Content-Type": "application/json" }
});
post.success(function (data, status) {
$window.alert(data.d);
});
post.error(function (data, status) {
$window.alert(data.Message);
});
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
Name:
<input type="text" ng-model="Name" />
<br />
<br />
<input type="button" value="Submit" ng-click="ButtonClick()" />
</div>
Screenshot
Demo
Downloads