Here we will be using Preview 4 of the ASP.NET AJAX Library, which can be downloaded from CodePlex. Remember that these components are still in “preview” mode (meaning no Microsoft support), though they are usable at your own risk. For more information, you can check out the license on CodePlex. I highly recommend downloading the samples available for Preview 4, which are also available at CodePlex. The samples give you a good look at what is coming.
In this post, we’ll take a closer look at the Sys.Observer class, witness the problems it solves, and take a look at a few examples.
The Object Modification Problem
Very simple example, I’m just displaying the link in a
span (id = latestBlog) when the page loads. Now, let’s say that the latest latestBlogPost object changes.
Observing Changes with Sys.Observer
The new Sys.Observer class is a solution to the problem that we defined in the last section. Let’s start by seeing how we would handle notification of object changes. I’ll be appending this code to the previous snippet.
I realize this is an extremely simple example, but it shows the basics behind how the Sys.Observer class works.
The first thing being done is making the object “observable.” The makeObservable method adds the observable methods to it. You don’t need to call the makeObservable method if you don’t want, but then you would need to call the fully qualified methods of the Sys.Observer class, for example (looking at the beginUpdate method call from the above snippet):
Personally, I think the
makeObservable call makes the method calls a little cleaner, but the disadvantage is no IntelliSense on the “observable” object.
Back to the code snippet. In the second line, we are adding an event handler for the propertyChanged event using the addPropertyChanged method. This is all we need to do in order to register as a listener, our method (displayLatestBlog from the earlier code snippet) will be called each time a property on the object changes. Now every property change may be a bit overkill, thankfully we can control when the listener receives notification. In the first step in the changeLatestBlogPost() method, I’m doing just that, calling the beginUpdate Sys.Observer method delays notifications from being fired until we are done with our editing. In the next two lines, I’m using setValue in order to let the Sys.Observer know that this is a change that should be observed. Finally, a call to endUpdate will tell the Sys.Observer that it should now notify listeners of the changes to our object. Without the beginUpdate and endUpdate call, the Sys.Observer class would have sent notifications each time we called the setValue method.
We then used declarative binding to bind the list to the DataView, which in our case was a simple unordered list:
This is all to code that is needed in order to update our array and thereby update our DataView unordered list. These are two pretty simple methods, removeTeam and moveTopTeamToBottom. The first simply removes the top team from the list, while the second does a “batch change” moving the top team in the list to bottom using
endUpdate like you saw earlier. Now for the “magic”, notice we’re not handling the changes at all. When you fire up the example, and click on the buttons to call the appropriate functions, you’ll notice that the DataView automatically rebinds after each of these calls. You can see an example of the functionality in the clip below (Figure 1).
Figure 1 – The DataView and Sys.Observer Example
Looking to try the code in the post out for yourself? [Download the Samples – 84K]
For more information on Sys.Observer and ASP.NET AJAX 4.0, here are a few other posts on the topic:
- ASP.NET AJAX 4.0 Client Templates in depth – Piyush Shah
- Getting started with Sys.Binding – Part 2 – UpdatePanel.net
- ASP.NET 4.0 AJAX - Preview 4 - Client Templates – Damien White