JSON (JavaScript Object Notation) is a light weight data-interchange format commonly used in AJAX applications. The power of JSON is that you can call the JavaScript "eval"  function to evaluate a JSON string and get back a JavaScript object graph. .NET support for JSON was first introduced in ASP.NET AJAX, and is now backed into .NET 3.5 in the DataContractJsonSerializer. You can use this serializer when you're building WCF services to be consumed by AJAX clients, or as I'm about to show to bridge windows and web applications.

There are several examples of applications that are mashing windows and web applications into one experience. The most famous is probably iTunes, where the actual iTunes player is a traditional client application and the iTunes music store is a web application. The advantage of this model is that Apple can re-organize, re-brand and update the music store with out updating the actual iTunes application. It’s also easy to create visually compelling HTML applications. Another cool example of a desktop application mashed up with the web is Songbird. Songbird is an open source player and a platform based on the FireFox code base to build web media mash-ups. It has many similarities to iTunes, but since it’s open sourced bands can create their own sites that communicate with the Songbird host.

Personally I’ve used this technique on the project I worked on before going to Melbourne. We needed some map functionality, but for this production-prototype we hadn’t decided on a map provider. We ended up building an extensible HTML based plug-in framework where we could quickly build new data visualizers using HTML and JavaScript. We defined a set of JavaScript functions to pass in JSON data with the data (.NET objects) we wanted to visualize, and wrote simple DHTML applications to display the data. Examples of visualizers where VirtualEarth, Google Earth and a Time Line visualizer.

In this example I’ve create a simple line-of-business application displaying a list of orders. Each order has a latitude and longitude co-ordinate associated with it. We’re going to use this data to make a more interesting map viewer that lets you view and select orders on a map.

The way you integrate a HTML application into your Windows Forms application is by using the Web Browser Control introduced in .NET 2.0. Once you have dragged the control onto your form you can execute JavaScript functions by calling webBrowser.Document.InvokeScript method. The method accepts the name of the function and a string array with the function parameters. To serialize the .NET objects to JSON I’ve created a generic ToJSON extension method.

To call the JavaScript function with the JSON serialized objects I simply call:

The LoadOrders function accepts one parameters which is the JSON string. The code to populate the map with each order is fairly simple. First we evaluate the JSON string and iterate over all the orders, creating a new push-pin for each order.

Displaying data is all good, but to make this example more realistic and interesting I want to be able to select orders on the map. Once I select an order on the map I want the order to be selected back in my list view. To do this I need to set the ObjectForScripting property on the web browser control. This can be any .NET object that is COM visible. To mark an object as COM visible you need to decorate the class with the ComVisible attribute. In this example the MainForm is used as the object for scripting. Any public method on the object passed to the web browser control will be callable from the hosted application calling window.external.MethodName. In this case I've created a SelectItem method that marks the order as checked in the list view.

Blending Windows Forms with web applications is a powerful feature that opens up for some interesting ideas. As a data-interchange format JSON is useful for more than AJAX applications.