HOW TO Call ASMX Web Services

ASP.NET Web Services (ASMX services) have been available since the initial release of the .NET Framework and provide a simple way to expose server-side data to Ajax applications. This tutorial provides a step-by-step look at how ASMX services can be used with the ASP.NET Ajax Library to retrieve data from a service and bind it to controls using the DataView component and a template. The steps that are discussed include:

1. Creating an ASMX Service
2. Loading Required Scripts
3. Calling an ASMX Service using the DataView

Step 1: Creating an ASMX Service

To create an Ajax-enabled ASMX service, right-click a Web Application Project or Website in Visual Studio and select Add New Item. Select the Web Service template as shown in Figure 1.



Figure 1. Adding an ASMX service into a Visual Studio Web Application Project or Website.

Once the Ajax-enabled WCF service is created add the ScriptService attribute above the service class as shown next:

view plaincopy to clipboardprint?

1. [WebService(Namespace = "http://www.mycompany.com/MyAjaxService")]  
2. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
3. [System.Web.Script.Services.ScriptService]  
4. public class MyAjaxService : System.Web.Services.WebService  
5. {  
6.   
7. }  

Next, add a custom web method to the service that returns data to the Ajax application. The following code sample shows how a list of Customer objects can be returned from a service operation:

view plaincopy to clipboardprint?

1. [WebService(Namespace = "http://www.mycompany.com/MyAjaxService")]  
2. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
3. [System.Web.Script.Services.ScriptService]  
4. public class MyAjaxService : System.Web.Services.WebService  
5. {  
6.     [WebMethod]  
7.     public List<Customer> GetCustomers(int numberToFetch)  
8.     {  
9.         using (NorthwindDataContext context = new NorthwindDataContext())  
10.         {  
11.             return context.Customers.Take(numberToFetch).ToList();  
12.         }  
13.     }  
14. }  

Step 2: Loading Required Scripts

The ASP.NET Ajax Library provides a DataView component that can be used to fetch data from a WCF service and bind it to a template. To load scripts that are required by the DataView component the Script Loader can be used:

view plaincopy to clipboardprint?

1. <script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>  
2. <script type="text/javascript">  
3.   
4.     Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() {  
5.         //Scripts loaded  
6.     });  
7.   
8. </script>  

Step 3: Calling an ASMX Service using the DataView

The DataView component can be used to call a Web Service with a minimal amount of code. To create a DataView instance use Sys.create.dataView and pass the template to bind to as well as the parameters that define the WCF service to call. The service URI and operation to call can be defined using the dataProvider and fetchOperation parameters as shown next:

view plaincopy to clipboardprint?

1. Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() {  
2.     Sys.create.dataView("#CustomerView",  
3.     {  
4.         dataProvider: "/Services/MyAjaxService.asmx",  
5.         fetchOperation: "GetCustomers",  
6.         autoFetch: true,  
7.         fetchParameters: {numberToFetch: '10'},  
8.         itemRendered: CustomerRendered  
9.     });  
10.   
11. function CustomerRendered(dataView, ctx) {  
12.     Sys.bind(Sys.get("li", ctx), "innerHTML", ctx.dataItem, "ContactName");  
13. }  
14. });  

This code calls the GetCustomers operation on MyAjaxService.asmx and passes a value of 10 for the numberToFetch parameter. By setting the autoFetch property to true the service will be called automatically as the page loads. Once data returns from the WCF service the CustomerRendered function will be called as each row of data is bound to a template named CustomerView. CustomerRendered binds the ContactName property of each row of data to an <li> element. The CustomerView template is shown next:

view plaincopy to clipboardprint?

1. <div id="CustomerView" class="sys-template">  
2.     <ul>  
3.         <li />  
4.     </ul>  
5. </div>  

The DataView component and its associated parameters can also be defined directly on a template as shown next:

view plaincopy to clipboardprint?

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml" >  
3. <head>  
4.     <title></title>  
5.     <script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>  
6.     <script type="text/javascript">  
7.         Sys.require([Sys.components.dataView, Sys.scripts.WebServices]);  
8.     </script>  
9. </head>  
10. <body xmlns:sys="javascript:Sys"   
11.       xmlns:dataview="javascript:Sys.UI.DataView">  
12.     <div id="CustomerView"   
13.         class="sys-template"  
14.         sys:attach="dataview"  
15.         dataview:autofetch="true"  
16.         dataview:dataprovider="/Services/MyAjaxService.asmx"  
17.         dataview:fetchParameters="{{ {numberToFetch: 10} }}"  
18.         dataview:fetchoperation="GetCustomers">  
19.         <ul>  
20.             <li>{{ContactName}}</li>  
21.         </ul>  
22.     </div>  
23. </body>  
24. </html>  

This code starts by defining a "dataview" namespace on the body element with a value of "javascript:Sys.UI.DataView". An instance of the DataView component is created as the page loads by attaching the newly defined dataview namespace to the template using sys:attach="dataview". Parameters used by the DataView component are defined directly on the template's <div> element and prefixed with the "dataview" namespace prefix.