Oct 28

Feeding the DataView control with data returned from a Web Service – take II

Posted in Javascript MS AJAX      Comments Off on Feeding the DataView control with data returned from a Web Service – take II

In the previous post, we’ve seen how we can configure the DataView control to get data returned from a web service. The previous approach is a good one if you don’t intend to use a proxy to a web service. However, suppose you’ve already have a web service proxy and that you want to reuse it for getting the data that is needed by the DataView…in that case, the best option might be reusing that proxy.

To show you the necessary steps for configuring the DataView control to do that, we’ll reuse the previous server side code and we’ll only update the client side:

<head runat="server">
  <style type="text/css">
          display: none;
  <script src="Scripts/MicrosoftAjax/start.debug.js" 
script> <script type="text/javascript"> Sys.require([Sys.scripts.WebServices, Sys.components.dataView], function () { Sys.loadScripts(["PeopleService.svc/jsdebug"], function () { Sys.Application.activateElement(
Sys.get("#view")); }); }); </script> </head> <body xmlns:sys="javascript:Sys" xmlns:dv="javascript:Sys.UI.DataView"> <div id="view" class="sys-template" sys:attach="dv" dv:autofetch="true" dv:httpverb="GET" dv:dataprovider="{{ PeopleService }}" dv:fetchoperation="GetPeople"> <div> <span>{{name}}</span>- <span>{{address}}</span> </div> </div> </body>

Ok, so there’s lot of things going on here:

  • We start by indicating the required dependencies (similar to what we had in the previous post). Since we want to use a web service proxy, we need to add a new script node which references the “special” url PeopleService.svc/jsdebug (notice that I’ve got the page and the service in the same folder). However, we can only do that after the base classes used by the proxy have been defined and injected in the page (that’s why we’ve passed an anonymous function which will be called when all the base dependencies are loaded);
  • nothing prevents you from adding the script nodes “by hand”. However, you should keep in mind that the Sys.loadScripts method exists and contains all the code needed for adding the new script node and hooking up the ready event so that you get notified when the script has been loaded;
  • unfortunately,loading a new script from within the first callback function (the one that was passed for the Sys.require method) stops future processing of the normal notifications of the page. In other words,you will not get any Sys.onReady or pageLoad calls. And that’s why we need to activate the DataView control “by hand”. Fortunately, we can rely on a simple method call for kicking off that work (notice the Sys.Application.activateElement call). Btw, if you had several controls, you could easily activate them all by passing a reference to the document element (document.documentElement). And yes, we’re activating the pages from within a callback that will get called adter the web service proxy code has been loaded and processed;
  • the only noticeable thing in the markup is the DataView’s dataProvider definition: we used a one-time/one-way binding to set it to the web service proxy which was added to the page through the previous Sys.loadScripts call.

And I guess this sums it up quite nicely. But there’s still lots of things to talk about so stay tuned for more on MS AJAX.