Consuming a Web Service using ASP.NET Ajax

A web service is a platform–independent software component that is based on the Simple Object Access Protocol (SOAP) and contains a group of functions that are packaged together for use in a common framework throughout a network. This article looks at how Web Services can be consumed using ASP.NET Ajax.

The three major components that make up a Web Service are:

• A Web Service that runs on the Web Server
• A Client application that invokes the Web Service
• A WSDL document that describes the Web Service

Asynchronous JavaScript and XML (Ajax)

Before we delve deep into the implementation, let's have a quick recap of what Ajax is, and, why it's so popular. The word Ajax is an acronym for Asynchronous JavaScript and XML. It is a combination of different technologies, used for building rich and responsive user interfaces. Ajax is a popular technology that is used in many different ways on the World Wide Web. It has become a technology of choice for building fast and responsive user interfaces. According to Enrich Peterson, "AJAX-enabled pages provide a slick, responsive user experience, making web-based applications function more like desktop-based ones". The benefits of using Ajax include:

• Faster page renderings and support for partial page updates
• Rich and, responsive user interface
• Reduced consumption of server resources

Implementing a Web Service in .NET

In this section, we will discuss how we can implement a simple web service in .NET. To implement a web service in Visual Studio, follow these steps:

Figure 1

Now if you look at the Solution Explorer, you will see a file called Service1.asmx created by default with the following content:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; namespace SimpleWebService { [WebService(Namespace = "https://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] public class Service1 : System.Web.Services.WebService { [WebMethod] public string HelloWorld() { return "Hello World"; } } }

As you can see in the above code listing, HelloWorld is the default web method created when you create the web service. Web Methods are those methods that can be called using SOAP protocol. Now, replace the default web method with the following:

[WebMethod] public List<string getcustomernames="" list="" customerlist="new" return=""/>

When you mark your web service with the [ScriptService] attribute, the ASP.NET AJAX framework would automatically generate a JavaScript proxy for your web service, which can then be used to call the web service methods. Here is how the complete source code for the web service would now look:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Script.Services; namespace SimpleWebService { [WebService(Namespace = "https://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // 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 Service1 : System.Web.Services.WebService { [WebMethod, ScriptMethod] public List<String> GetCustomerNames() { List<String> customerList = new List<String>(); customerList.Add("John"); customerList.Add("Jacob"); customerList.Add("Mary"); customerList.Add("Peter"); customerList.Add("Darren"); return customerList; } } }

To test the web service you can type in the following URL in your web browser:

https://localhost/SimpleWebService/Service1.asmx

Here is how the web service looks when viewed in the web browser:

Figure 2

You can see the GetCustomerNames web method being displayed. When you execute the web method, here is how it looks:

Figure 3

Implementing the Web Service Client

In this section, we will implement a client application to consume the web service we just implemented in the earlier section. To do this, create an ASP.NET Application in Visual Studio and add the web service created earlier as a web reference. Now, take a ScriptManager control in your web form and specify the script reference as shown below:

<asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="https://localhost/SimpleWebService/Service1.asmx" /> </Services> </asp:ScriptManager>

You can now use simple JavaScript code to call the web method using Ajax. Here is the complete markup code in the Ajax enabled web form for your reference:

<head runat="server"> <title>Consuming a Web Service Using ASP.NET Ajax</title> <script type="text/javascript"> function pageLoad() { SimpleWebService.Service1.GetCustomerNames(onSuccess); } function onSuccess(result) { var output = document.getElementById("Output"); output.innerHTML = result; } function onFailure(result) { context.innerText = "Error Invoking the Web Service..."; } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="https://localhost/SimpleWebService/Service1.asmx" /> </Services> </asp:ScriptManager> <div> <span id="Output"></span> </div> </form> </body>

When you execute the application, the customer names are displayed in the web browser. Here is what the output looks like:

Figure 4

Summary

Web Services are Open Standard Enterprise Web Applications that are based on the SOAP protocol and are used for the efficient exchange of data on the same or disparate systems irrespective of the architecture. The MSDN states, "Web Services are based on a core set of standards that describe the syntax and semantics of software communication: XML provides the common syntax for representing data; the Simple Object Access Protocol (SOAP) provides the semantics for data exchange; and the Web Services Description Language (WSDL) provides a mechanism to describe the capabilities of a Web service." In this article, we discussed how we could implement a Web Service and then consume it using ASP.NET Ajax.

Download the source code for this article.

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both