Okay, in my last post on this topic I gave a brief overview of what JSON is and how it comes into play with your ASP.NET AJAX solution. Now I'm going to stretch out a bit and show you a few examples doing something practical with JSON data in ASP.NET AJAX. I'll be careful to explain what I'm doing along the way. By understanding this, you'll be ready to move into how Animations work in ASP.NET AJAX, and therefore be able to leverage them in your applications.

You know that JSON is a "stringified" version of an object, and you know that this stringified version is used to preserve the object across boundaries where raw, binary data transmission is not practical (or possible). However, one thing I didn't really touch on, and so I'll now explain, is exactly why someone would transmit an object to some other environment anyway. Objects are nice ways to not only pack functionality, but also state - so in the case of browser-based programming, for example, you could easily see yourself creating an object that represents the behavior of a button element, setting some state (such as color, what happens when the button is clicked, etc) and sending it down to the client. So, the reason you'd do such a thing as send an object down to the client is because that object represents state and functionality specified by you on the server; once downloaded to the client browser it can then be used to reflect that state to elements within the browser in a nice, packaged form.

Let's step back a bit and make up a quick example.

Say you have a DIV tag on your page and this DIV tag is to do something when you click it. You could set the div tag's onclick handler to run some kind of javascript:

<div id='mydiv' onclick='doSomething();"/>

We've all seen this before and it's nothing new; it's just JavaScript. However, what if you wanted some sort of variation in what the method doSomething() actually does? Perhaps it displays something a bit different depending on the user logged in, or perhaps you want something special done because it's Halloween - whatever.  Now you're in a pinch. In ASP.NET, you might go ahead and start doing more dynamic things to it through inline ASPX or through Response.Write(); basically modifying what the browser gets through the output stream (such as tweaking arguments to doSomething()). After a while, however, this gets really, really ugly to manage. What would be nicer is if an object basically represented the functionality of the DIV tag, and so on the server all you had to do was set up a couple properties (such as the text displayed to the user when he/she clicks the DIV tag) and have those properties get reflected in the client browser. In this scenario, an object would exist on the server where you can programmatically tweak properties, and then it gets sent down to the client where it actually "behaves" as script.

As you can imagine, the way the object would be sent down to the client is as a JSON-seralized object.

We saw earlier that the modern browser has capabilities, through the eval() method, to rehydrate an object out of JSON-formatted data. We also saw earlier how the ASP.NET AJAX framework provides a number of ways to wrap the eval() method to make it more robust and secure. All that's needed, then, is a way to take an object on the server and create a JSON-formatted string of data out of it so that the browser can create a version of it for itself. There is - it's called the JavaScriptSerializer.

If you had an instance of the JavaScriptSerializer in your class like this:

Then you could serialize an object with it like this:

...you can see here that I'm taking some instance of an Animation type and serializing it as a JSON string. Note that the Animation type isn't JavaScript, it's a full-blown .NET type (a real managed typed). The string returned simply represents the properties and events of the type.

If my animation had properties (like, say, the text that is displayed when I click something), then the JSON string will represent the property and the  value of that property. Anything that will rehydrate the object from that JSON string will set the property to the original value. Therefore, the object's state gets preserved as it crosses from the server to the client.

There are a number of ways to rehydrate the object using the client framework of ASP.NET AJAX so it gets reborn in the browser. A handy shortcut method for doing this is $create(). The create method will take the type it is to create as the first argument, and then a initialize properties and events on the type through JSON-formatted data. The $create() method, then, creates objects out of JSON. Once done, the newly created object will have it's initalize() method called by $create() (giving you the opportunity to attach event handlers and the like).

Therefore, say we had some JavaScript class called AnimationBehavior and it has a series of properties. On the server you set those properties and then create a JSON string out of the object. $create() can take that string, initilialize a JavaScript version of the type and then call the new AnimationBehavior object's initalize() method. From there you can attach event handlers based on the properties and events you set through JSON.

So....

1. You have a fully-qualified .NET object.
2. You can set properties on that object and have that object serialized as a JSON string.
3. The ASP.NET AJAX client framework can take that string and create a version of the managed type in JavaScript for it's own use through JSON and the $create() method.
4. The $create() method, once finished initializing the new type, will call the type's initialize() method, giving you the opportunity to do something meaningful (such as initialize your object).

Note that eval(), normally, creates an opaque object out of JSON data. eval(), used alone, will not create anything typed strongly. $create(), on the other hand, expects an already existing type in JavaScript to instantiate and initialize through the JSON data. If you're creating a valid ASP.NET AJAX client type, it will have an initialize() member method, thereby working perfectly fine with $create().

In the next section I'll walk you through exactly what an Animation is, and then we'll see how they use all of what you just learned.