My idea is to integrate a Silverlight control into an ASP.NET AJAX control, but it's seem quite difficult without Visual Studio 2008. For this reason, I integrated a Silverlight 1.0 control into an ASP.NET AJAX control using Visual Studio 2005.

Background

Normally, when I start to learn a new technology, I always try to implement a very simple example, but to make it all the more interesting, I implement a complete application or game.

When I was a child and there were no computers at home, I spent a bit of my free time playing with a game called Fifteen Puzzle. It's a very simple game, but not absolutely easy to solve at the beginning. More details about it at this link. I implemented it here in Silverlight 1.0, integrated into a ASP.NET AJAX control.

Using the Code

The solution is divided into the following projects:

Web Application: Containing the ASP.NET page that hosts the control

Class Library: Containing the control

In the web application, we have an ASP.NET web form that contains the control and a ScriptManager (the core of the ASP.NET AJAX Framework).

In the control, we have the following files:

FifteenPuzzle.cs: Server side control that extends ScriptControl;

FifteenPuzzle.js: JavaScript that contains the JavaScript class that implements the Silverlight control into an ASP.NET AJAX control;

FifteenPuzzle.xaml: XAML that describes the fixed part of the control (the dynamic part is generated within the JavaScript class);

Helper.js: JavaScript that contains the same useful functions;

Silverlight.js: Standard JavaScript used to instantiate the Silverlight control into an HTML div;

The class FifteenPuzzle extends ScriptControl (the base class for all ASP.NET AJAX controls on the server side) and overrides two methods:

GetScriptDescriptors: method used to pass parameters to the JavaScript class using JSON format.

xamlUrl: The URL from the Resource used to generate the static part of the XAML in Silverlight.

width, height: The size of the control.

imageUrl: Used when the game is in the puzzleRenderMode.Image mode.

puzzleRenderMode: enum used to define the two different modes to render the game (Number or Image).

GetScriptReferences: method used to pass the script URL (I used GetWebResourceUrl because I embedded all the scripts in the assembly)

Controls.Resources.FifteenPuzzle.js: Contains the JavaScript class of the AJAX control, and extends Sys.UI.Control.

Controls.Resources.Helper.js: Contains some utility functions.

Controls.Resources.Silverlight.js: Default Silverlight JavaScript to instantiate the plug-in into a div.

The algorithm used to shuffle the pieces is very easy, and probably not really optimized, but seems to work fine. I just create a random number between 1 and 15 and try if the move is available. The problem with this algorithm is that, in theory, it could take a long time, but for the "Law of large numbers", it works fine. :)

The most important part of the JavaScript class is the integration with Silverlight.

In the _renderControl function is called Silverlight.createObject that instantiates the plug-in attached to the HTML DIV. When the plug-in is instantiated, the event handler _onXamlLoaded is called and the dynamic part of the XAML is rendered.

I stored the references to the plug-in and the rootElement in the local JavaScript variable because I use it to dynamically generate the XAML using the createFromXaml method. In fact, when I generate the pieces, I used the following code to attach it to the static part of the XAML:

Points of Interest

I know that this is a very poor example considering the possibilities available when using this framework, but it can be useful to start to understand the technology and to understand the possibility to integrate it into an existing ASP.NET application.

History

26 May 2008 - First release.

30 May 2008 - Added possibility to switch between Number and Image, and improved article details.

Share

About the Author

I'm an Italian Software Developer from about 15 years.I worked a long time in south Italy (where I was born) and after 2 years in Milan and an year in UK, I'm working remotely from Italy as Senior ASP.NET C# Developer using ASP.NET Ajax technology for a UK company.

Check out my personal blog:http://techcookies.net/

and my first Android game (Fifteen Puzzle X):https://play.google.com/store/apps/details?id=it.megasoft78.fifteenpuzzlex