Silverlight 2 & PHP Tutorial - Transmitting data using JSON

So I'm sitting here, trying to come up with something interesting to write about for a Silverlight tutorial, when an idea struck - go look at our old Flex tutorials! The Fattest spent a bunch of time coming up with great examples of how to accomplish various tasks in Flex - and supposedly anything that Flex can do, Silverlight can do too. I went and looked, and I didn't have to look very far. In the very first tutorial The Fattest wrote on Flex here at SOTC ( Flex & PHP Tutorial - Transmitting data using JSON), I ran into something I didn't know how to do in Silverlight - use JSON.

And so that is what this tutorial is going to be about - requesting and parsing JSON data into C# objects, and displaying them. If you clicked the link to the old tutorial above, the example below (if you have Silverlight 2 installed) might look eerily familiar. It is a Silverlight replication of the Flex example in that tutorial - in fact, it is even requesting the data from the exact same backend PHP page that the old tutorial uses for its example (and the data is being returned in the same way as well)!



Ok, now that you have had a chance to play with the simple example, let's dive right in. I'm not going to repeat the PHP code - if you want to take a look at it, it is covered in the old tutorial. But before we dive into the C# and XAML, let's have a look at the JSON that that PHP page returns. There are two types of requests, one for an Employee, and one for a Manager. The returned data for requesting an Employee looks like this:

And the Manager looks like this:

Now, unlike Actionscript or Javascript or PHP, C# is a strictly typed language, which makes dealing with JSON a little bit more painful. You have to know exactly what type of data is coming across the wire and funnel it into the appropriate type of object, otherwise stuff doesn't match and explosions occur. So in this case we need to create two different C# classes, a Person and a Manager:

What is extremely important here is that the names of these fields match exactly with what the field name in the JSON encoded data is - otherwise the object won't populate correctly. So we end up with a Person class that has 4 appropriately named string fields, and a Manager class that derives from Person and adds two more fields, a title field and an array of Person objects.

Ok, let's move on to the user interface, and we can get back to actually populating those objects in a minute. Here is the XAML for the interface:

Mostly your standard XAML, but there are a couple things to note. As you might have noticed, I'm pulling out Silverlight 2's DataGrid. To get the DataGrid, you have to add a reference in your Visual Studio project to System.Windows.Controls.Data, and add an xmlns line to your XAML file (you can see the one for this xaml a couple lines from the top). As data grids go, this particular instantiation is pretty simple - 4 readonly columns with some bindings. The bindings are to the various fields on a Person object - this means that when we add some Person objects as items in the DataGrid everything will display nicely.

But overall, pretty uninteresting XAML (isn't it crazy just how much _room_ uninteresting XAML can take up?). So back to the C# code behind, and specifically, the two methods attached to the Click events on the buttons at the bottom of the XAML - GetEmployeeClick and GetManagerClick. First, let's walk through GetEmployeeClick:

First, we call ClearFields, which, as you might expect, just clears all the various fields in the UI:

Then we create a WebClient instance and attach to the OpenReadCompleted event. This event will be fired when the request completes, and the event args will hold the resulting data from the server. Finally, we call OpenReadAsync on the appropriate url (_CallbackUrl is a private field that holds the url of the callback PHP page). OpenReadAsync immediately returns (since the request is occurring asynchronously), and we wait for OpenReadCompleted to fire and call our method GetEmployeeOpenReadCompleted:

This is where we get to do some JSON parsing (as long as the request didn't fail or get canceled). First we create an instance of DataContractJsonSerializer specifically for the Person class. DataContractJsonSerializer is a class in the System.Runtime.Serialization.Json namespace, and to get access to it you will need to add a reference to the System.ServiceModel.Web.dll in your Visual Studio project. Once we have that serializer, getting the Person object is pretty easy - we just call ReadObject on the Result (which is just a Stream). That call will return an object, which we can then cast to a Person. Using that new Person object, we can populate all the various fields.

The GetManagerClick method follows a very similar code path - the main differences are the callback url query string and the type of object being de-serialized:

Almost identical except for a few key spots. Oh, and in case you were wondering about populating the DataGrid, it is as easy as assigning the array of Person objects on the Manager as the ItemsSource on the DataGrid.

Ok, let's throw all the C# code together in a single block:

And that is it! Next step would be sending data back to the server using JSON, but that is a topic for next time. You can download a zip file containing this Silverlight project here if you would like to play around with it on your own. And as always, if there are any questions or comments, leave them below and I will do my best to answer them.