Ajax, Silverlight and Firefox

CrucisCo
6 Feb 2009
0

I first created this post as a question because after several hours of searching online I couldn't find a straightforward solution to a problem I had. Here briefly is a description of what I was trying to do and the problem I had.

The problem

I am creating a web app that uses AJAX and Silverlight 2. When a user clicks on some links on a page, they open a modal popup window using the AJAX Control Toolkit's Modalpopupextender control. On the popup I have a Silverlight control that then loads based upon some characteristics of the link that was clicked. Basically there is one Silverlight control, but it initialises differently depending upon the parameters it receives (from the link that was clicked). I got this to work with IE. However on Firefox and Google Chrome I had a problem: the popup remained empty. I used Firebug to look at the rendered HTML and I saw the OBJECT tag to host the Silverlight was being created. When I right-clicked on the space where the Silverlight would have been I got the usual 'Silverlight Configuration' context menu. So it seemed that a Silverlight object was being created, but my particular Silverlight control was not being loaded. I hunted high and low for a solution and then I found a workaround in a forum which did not really explain what was actually going on. So first let me describe why this issue occurs.

Why this issue occurs

When you use code-behind as described above, .NET renders this as two blocks of Javascript. The first is placed in the container where you expect the Silverlight to load, e.g.

The second is placed at the bottom of the HTML document inside SCRIPT tags (with other AJAXy scripts) and looks like this:

Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(Sys.UI.Silverlight.Control, {"source":"ClientBin/mySLControl.xap"}, null, null, $get("mySLControl_parent"));
});

So basically then as the page loads, it creates the Silverlight control in the expected container. However, it is not initialised until the document completely loads and the last two lines are executed. And that seems to have been the problem: When the page was loading, the Silverlight control was being created inside my popup. However, when the popup became visible, the code that would initialise it was not run as it had already executed once when the overall document was loaded. Somehow, when using IE, this was compensated for and the Silverlight would initialise regardless. This was confirmed when I looked at the output of the scripting in Firebug. The HTML created inside the container looked like this:

Notice that there is no mention of 'source'. Where then does the Silverlight load from? Firefox and Chrome would have no idea.

Workaround

The workaround I found was that if instead of using the asp:Silverlight control you use the OBJECT tag (with all the required attributes) the Silverlight would load on IE, Firefox and other browsers. So instead of

use

In may case, because the initialisation parameters were to change dynamically I did it in the code-behind, changing from

Silverlight sl = new Silverlight();
sl.ID = "slMyControl";
sl.MinimumVersion = "2.0.30523";
sl.Width = Unit.Pixel(850);
sl.Height = Unit.Pixel(665);
sl.Source = "ClientBin/mySLControl.xap";
sl.InitParameters = "initParam1=" + myParam1Value;

SLContainer.Controls.Add(sl);

to the following (so that I directly controlled the HTML output)

System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(""); //create a literal or label to hold this string Label objectSpan = new Label(); objectSpan.Text = sb.ToString(); SLContainer.Controls.Add(objectSpan);

And this is how I was able to get my Silverlight control on the AJAX Control Toolkit ModalPopupExtender to work in all browsers.