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:
- Creating a WCF Service
- Loading Required Scripts
- Calling a WCF Service using the DataView
Step 1: Creating a WCF ServiceTo 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
{
[OperationContract]
public List<Customer> GetCustomers(int numberToFetch)
{
using (NorthwindDataContext context = new NorthwindDataContext())
{
return context.Customers.Take(numberToFetch).ToList();
}
}
}
Step 2: Loading Required ScriptsThe 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
});
</script>
Step 3: Calling a WCF Service using the DataViewThe 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">
<ul>
<li />
</ul>
</div>
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.