LA.NET [EN]

Nov 02

Until now, we’ve met some of the basic features introduced by the DataContext component. As I’ve said, you can think of this control as a buffer which keeps track of changes performed to several items it keeps track of. We’ve already seen that we can use the trackData method for initiating a tracking operation. What I haven’t mentioned yet is that you can also configure the control so that it fetches data automatically from a web service (or even from an ADO.NET data service).

Getting data from a web service means that you’ll have to (at a minimum!)configure the URI of the web service. Currently, you can do that by setting the DataContext’s serviceUri property. After setting the URI, you can get the data by calling the fetchData method. Here’s an example (btw, I’m reusing the web service presented here):

<script type="text/javascript">
  Sys.require([Sys.components.dataContext],
    function () {
      var ctx = Sys.create.dataContext(
        {
          serviceUri: "PeopleService.svc"
        }
      );
      ctx.fetchData(
        "GetPeople", //method
        {sort: 0 }, //method parameters
        Sys.Data.MergeOption.overwriteChanges, //merge options
        "GET", //http verb
        function () { //succeded
          //could use parameters, but wil use
          //lastFetchedResults for demo purpose
          var items = ctx.get_lastFetchDataResults();
          for (var i = 0; i < items.length; i++) {
            alert(items[i].name);
          }
        });
    });
</script>

After setting the serviceUri property,we end up calling the fetchData method (while passing it several parameters which influence the remote web service call) for getting the data from the web service. As you can see,we’re only passing the succeeded callback function to ensure that the lastFetchDataResults property is correctly filled up (in this case, we’re just iterating over each item and printing the value of its name property).

The fetchData exposed by the DataContext component matches the one defined by the IDataProvider interface. This isn’t just coincidence… it happens because the DataContext implements this interface and needs to provide an implementation for its fetchData method:

Sys.Data.IDataProvider.prototype = {
    fetchData: Sys$Data$IDataProvider$fetchData
}

Btw, here’s the current signature for the fetchData method:

function Sys$Data$IDataProvider$fetchData(operation, 
parameters,
mergeOption,
httpVerb,
succeededCallback,
failedCallback,
timeout,
userContext) {

I guess that the parameters are self-explanatory, so I won’t be wasting your time with additional details on them. If you’ve been following along, then you’re probably read one of the posts on how to configure the DataView control to fetch data from a remote web service.

At the time, I’ve said that one of the options is configuring the DataView’s dataProvider property with a valida IDataProvider instance. Since the DataContext implements this interface, then you can also use an object of this type for getting the data that is rendered by the DataView control. Here’s a quick example that shows how to configure the DataView control so that it gets the data from a DataContext:

<head runat="server">
    <style type="text/css">
        .sys-template{
            display: none;
        }
    </style>
    <script type="text/javascript"
      src="Scripts/MicrosoftAjax/start.debug.js">
    </script>
<script type="text/javascript">
  Sys.require([Sys.components.dataContext,
               Sys.components.dataView],
    function () {
      var ctx = Sys.create.dataContext({
        serviceUri: "PeopleService.svc"
      });
      var view = Sys.create.dataView(
        Sys.get("#view"),
        { itemTemplate: "#template",
          autoFetch: true,
          dataProvider: ctx,
          httpVerb: "GET",
          fetchOperation: "GetPeople",
          fetchParameters: {
            sort: Sys.Data.MergeOption.overwriteChanges
          }
        });
    });
</script>
</head>
<body>
    <div id="view">
    </div>
    <div class="sys-template"
        id="template">
        <span>{{name}}</span>-
        <span>{{address}}</span>
        <br />
    </div>
</body>

The code is pretty straightforward (I think): we create a new DataContext instance and set its serviceUri property. After that, we initialize a DataView control and pass it the remaining info that is needed to perform the remote call. And that’s it. There’s nothing more to it than that…

The next step in your study guide is see how to configure the DataContext so that it propagates changes from the client to the server side. Stay tuned for more!

1 comment so far

  1. Coalcarefully
    9:57 pm - 12-29-2009

    Conversation Warm,none except step promise drink confidence middle second importance during army currently be coffee choose collection start model text following measure laugh cash everything next keep match strike tall pattern review forward drive district career employee cell representative above spend open course where rest appropriate success cold generation broad nearly demand trade open pension production concern route high important myself low elsewhere particular before elsewhere worry literature teacher mine reality west link driver initial annual company hope deep bill seriously whole therefore price noise during include combine visit spread break hand important research statement where date group