Home / AJAX

HOW TO Call WCF Web Services

Modified on 2009/12/04 17:52 by Stephen Walther Categorized as Uncategorized
Windows Communication Framework (WCF) provides a flexible way to expose data to Ajax applications. This tutorial provides a step-by-step look at how WCF 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 a WCF Service
  2. Loading Required Scripts
  3. Calling a WCF Service using the DataView

Step 1: Creating a WCF Service

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


Figure 1. Adding an Ajax-enabled service into a Visual Studio Web Application Project or Website.

Once the Ajax-enabled WCF service is created a custom operation can be added 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:

[ServiceContract(Namespace = "http://www.mycompany.com/MyAjaxService")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyAjaxService
    public List<Customer> GetCustomers(int numberToFetch)
        using (NorthwindDataContext context = new NorthwindDataContext())
            return context.Customers.Take(numberToFetch).ToList();

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:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script>
<script type="text/javascript">

Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() { //Scripts loaded });


Step 3: Calling a WCF 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:

Sys.require([Sys.components.dataView, Sys.scripts.WebServices], function() { Sys.create.dataView("#CustomerView", { dataProvider: "/Services/MyAjaxService.svc", fetchOperation: "GetCustomers", autoFetch: true, fetchParameters: {numberToFetch: '10'}, itemRendered: CustomerRendered });

function CustomerRendered(dataView, ctx) { Sys.bind(Sys.get("li", ctx), "innerHTML", ctx.dataItem, "ContactName"); } });

This code calls the GetCustomers operation on MyAjaxService.svc 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:

<div id="CustomerView" class="sys-template">
        <li />

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/beta/0911/Start.js"></script> <script type="text/javascript"> Sys.require([Sys.components.dataView, Sys.scripts.WebServices]); </script> </head> <body xmlns:sys="javascript:Sys" xmlns:dataview="javascript:Sys.UI.DataView"> <div id="CustomerView" class="sys-template" sys:attach="dataview" dataview:autofetch="true" dataview:dataprovider="/Services/MyAjaxService.svc" dataview:fetchParameters="{{ {numberToFetch: 10} }}" dataview:fetchoperation="GetCustomers"> <ul> <li>{{ContactName}}</li> </ul> </div> </body> </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.
  Name Size
- AjaxEnabledWCFService.jpg 36.53 KB