In this article I will explain with an example, how to call WebService (ASMX) using AngularJS, AJAX and JSON 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.
Call WebService (ASMX) using AngularJS, AJAX and JSON in ASP.Net using C# and VB.Net
 
 
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.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
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.
Note: If you want to learn more about ng-click directive, please refer my article AngularJS: Implement Button click event using ng-click directive example.
 
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.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Alert 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
Call WebService (ASMX) using AngularJS, AJAX and JSON in ASP.Net using C# and VB.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code