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.
-
<script type="text/javascript">
-
//<![CDATA[
-
Sys.UI.Silverlight.Control.createObject('mySLControl_parent', '\u003cobject type="application/x-silverlight-2" id="ctl00_ContentPlaceHolderLeft_slAlbum" style="height:665px;width:850px;">\r\n\t\u003cparam name="MinRuntimeVersion" value="2.0.30523">\r\n\r\n\t\u003c/param>\u003cparam name="InitParams" value="initParam1=myparam1value">\r\n\r\n\t\u003c/param>\u003ca href="http://go2.microsoft.com/fwlink/?LinkID=114576&v=2.0">\u003cimg src="http://go2.microsoft.com/fwlink/?LinkID=108181" alt="Get Microsoft Silverlight" style="border-width:0;" />\u003c/a>\r\n\u003c/object>');
-
//]]>
-
</script>
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:
-
<object id="slObject" style="height: 665px; width: 850px;" type="application/x-silverlight-2">
-
<param value="2.0.30523" name="MinRuntimeVersion"/>
-
<param value="initParam1=myparam1value" name="InitParams"/>
-
<a href="http://go2.microsoft.com/fwlink/?LinkID=114576&v=2.0"><img style="border-width: 0pt;" alt="Get Microsoft Silverlight" src="http://go2.microsoft.com/fwlink/?LinkID=108181"/></a>
-
</object>
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
-
<asp:Silverlight ID="slMyControl" runat="server"
-
Source="~/ClientBin/mySLControl.xap"
-
MinimumVersion="2.0.31005.0"
-
Width="850px" Height="665px"
-
InitParameters="initParam1=myparam1value"
-
/>
use
-
<object id="slObject" type="application/x-silverlight-2">
-
<param value="ClientBin/mySLControl.xap" name="source"/>
-
<param value="2.0.30523" name="minRuntimeVersion"/>
-
<param value="initParam1=myparam1value" name="InitParams"/>
-
</object>
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("<object id=\"slObject\" type=\"application/x-silverlight-2\" >");
-
sb.Append(" <param name=\"source\" value=\"ClientBin/mySLControl.xap\" />");
-
sb.Append(" <param name=\"minRuntimeVersion\" value=\"2.0.30523\" />");
-
sb.Append(" <param name=\"InitParams\" value=\"initParam1=" + myParam1Value + "\" />");
-
sb.Append("</object>");
-
-
//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.
on Jul 26th, 2010 at 15:25 pm
Thanks Some how this is not working in my case. What should be probable solution?
on Aug 3rd, 2010 at 9:25 am
Dhanashree, can you tell me what errors messages you are getting? Be aware that sometimes the browser can hide error messages.