11.12. Sys.Observer

A common problem when designing web applications is the need to refresh the UI in response to changes in an underlying data source. You might have accomplished this by polling an object or service for changes, but you now have a better option with the Sys.Observer functionality. The Sys.Observer functionality is Microsoft AJAX libraries' implementation of the popular Observer pattern.

You will now write some example code to tell ASP.NET AJAX to monitor an array of numbers and refresh the template if anything changes to the array. You will then create a function that adds a random number to the array and note how the result is returned:

  1. Copy and paste the file dataviewDeclarative.htm, and rename the copy to observer.htm.

  2. Replace the existing <script> block with the following code:

    <script type="text/javascript">
Sys.require(Sys.components.dataView);
var dataArray = [];

Sys.Observer.makeObservable(dataArray);

function NewRandom() {
   var newRand = Math.random();
   var newItem = { MyRandom: newRand };
   dataArray.add(newItem);
}
</script>

  3. Replace the <body> section with the following HTML:

    <div id="peopleView" class="sys-template"
sys:attach="dataview"
dataview:data="{{dataArray}}"
>
   <div class="dataItem">
      {{ MyRandom }}
      <hr />
   </div>
</div>

Note that you make a call to the method Sys.Observer.makeObservable(dataArray), which tells ASP.NET AJAX libraries that you are interested in any changes to this object and that it needs to refresh any templates.

11.12.1. WCF Data Services Data Context

The ASP.NET AJAX libraries can be easily integrated with WCF Data Services. If you are unfamiliar with WCF Data Services, please refer to Chapter 9 for more in-depth details of how to create a service.

NOTE

As described in Chapter 9, WCF Data Services used to be called ADO.NET Data Services, which is reflected in the names of the templates used in this exercise.

The steps to integrate with WCF Data Services are described here:

  1. Add a new ADO.NET entity data model to the project called book.edmx that contains the Films table from the demo database with the pluralization options switched on.

  2. Now add a new ADO.NET data service called BookService.

  3. Modify the BookService's InitializeService() method to the following to enable full read/write access (don't do this in a production application):

    public static void InitializeService(DataServiceConfiguration config)
{
   config.SetEntitySetAccessRule("*", EntitySetRights.All);
   config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);
   config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;
}

  4. Copy dataviewProgrammatic.htm, and rename the new copy to dataviewAdo.htm.

  5. Modify the <script> block to the following code:

    <script type="text/javascript">

var dataContext;
Sys.require([Sys.components.dataView, Sys.components.adoNetDataContext], function ()
{

dataContext = Sys.create.adoNetDataContext({
   serviceUri: "BookService.svc"
});

var master = Sys.create.dataView("#peopleView",
{
   dataProvider: dataContext,
   fetchOperation: "Films",
   itemRendered: detailRendered,
   autoFetch: true
});

function detailRendered(dataView, ctx) {
   Sys.bind(Sys.get("#txtFilmTitle", ctx), "value", ctx.dataItem, "Title");
}

});

function SaveChanges() {
    dataContext.saveChanges();
}

   </script>

  6. Finally, modify the <body> section to the following:

    <body>
   <input type="button" onclick="javascript:SaveChanges();" value="Save Changes" />

   <div id="peopleView" class="sys-template">
   <div class="dataItem">
   <input id="txtFilmTitle" type="text" sys:value="title" />
   <hr />
   </div>
   </div>
</body>

Run the project; you will find that the films list is bound to the DataView, and you can update the films by clicking the Save Changes button.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.12.186