This is a migrated thread and some comments may be shown as answers.

Embedded Silverlight control in ASP.NET does not load in RadAjaxPanel

16 Answers 377 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Junashi asked on 23 Jul 2009, 03:38 PM

Hello everyone,

I just started using ASP.NET AJAX Q1 2009 and Silverlight Q1 2009 controls about a month ago, so if anyone can help me with this problem I would really appreciate it.

I embedded a Silverlight RadGauge control inside an ASP.NET page by following the steps in this video: http://tv.telerik.com/telerikwatchminute/episode/telerik-watch-minute-radgauge-for-sl-in-asp.net. Basically adding a Silverlight application to same solution as the ASP.NET web project, wrap the SL control in an ASP.NET user control and put the user control in the main page.

Everything is great, the control shows up on the page and I can pass values to it, until I put it in an RadAjaxPanel.

The gauge shows up on first load, but on postback it disappears entirely. Tracing the code shows that the SL control is not loaded at all (no Application_Startup or Loaded events fired). Switching to RadAjaxManager also doesn't work.

I tried replacing the RadAjaxPanel with the regular ASP.NET UpdatePanel, and it works this time. I thought RadAjaxPanel is a wrapper for the regular UpdatePanel and they should work the same. Am I missing something?

I need this to work for a report page I have, where it has some controls that updates a RadGrid and the Gauge, and everything is in a RadAjaxPanel. Since all the other pages uses the RadAjaxLoadingPanel and we would like the pages to behave consistently (e.g. using AjaxLoadingPanel, etc), it would be great if I don't have to switch to UpdatePanel for this page.

If RadAjaxPanel is not supposed to work with embedded SL controls, is there a way to pass values between a RadAjaxPanel and an UpdatePanel?

Below is my code:
the UserControl:

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucSLGauge.ascx.cs" Inherits="TestSilverlight.UserControls.ucSLGauge" %> 
        
            <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %> 
        
            <asp:Silverlight ID="SLGauge" runat="server" Source="~/ClientBin/SilverLightControls.xap"    
        
                OnPluginLoaded="pluginLoaded" MinimumVersion="2.0.31005.0" Width="280" Height="280">  
        
            </asp:Silverlight>   
        
            <script type="text/javascript">  
        
                var slCtrl = null;  
        
                var gaVal = null;  
        
                var width = null;  
        
                var height = null;  
        
                function pluginLoaded(sender) {  
        
                    // Get reference to the sliverlight control on page.  
        
                    slCtrl = sender.get_element();  
        
                    if (slCtrl != null) {  
        
                        // Call scriptable method in Silverlight application (we call it here to ensure SL control is already loaded)  
        
                        if (gaVal != null) {  
        
                            slCtrl.content.slGaugeObject.SetNeedleValue(gaVal);  
        
                        }  
        
                        if ((width != null && width > 0) || (height != null && height > 0)) {  
        
                            slCtrl.content.slGaugeObject.SetWidthHeight(width, height);  
        
                        }  
        
                    }  
        
                }  
        
                function setGaugeValue(val) {  
        
                    if (val != null) {  
        
                        gaVal = val;  
        
                    }  
        
                }  
        
                function setGaugeValueAndSize(val, w, h) {  
        
                    if (val != null) {  
        
                        gaVal = val;  
        
                    }  
        
                    if (w != null && w > 0) {  
        
                        wwidth = w;  
        
                    }  
        
                    if (h != null && h > 0) {  
        
                        hheight = h;  
        
                    }  
        
                }  
        
                function setWidthHeight(w, h) {  
        
                    if (w != null) {  
        
                        wwidth = w;  
        
                    }  
        
                    if (h != null) {  
        
                        hheight = h;  
        
                    }  
        
                }  
        
            </script>

The ASPX page:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestSilverlight._Default" ValidateRequest="false" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %> 
        
            <%@ Register TagName="gauge" TagPrefix="ucSL" Src="~/UserControls/ucSLGauge.ascx" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"><title></title></head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadAjaxLoadingPanel ID="radAjaxLoadingPanel1" runat="server" Skin="Vista"/>              
        
                    <telerik:RadAjaxPanel ID="radAjaxPanel1" runat="server" LoadingPanelID="radAjaxLoadingPanel1" > 
        
                        This control is inside RadAjaxPanel (will disappear on post back): <br /> 
        
                        <ucSL:gauge runat="server" ID="myGauge" Width="280" Height="280" NeedleValue="20" /> 
        
                        <asp:Button ID="btnRadPanelPostBack" runat="server" Text="Postback within RadAjaxPanel" />        
        
                    </telerik:RadAjaxPanel> 
        
                    <br /><br /> 
        
                    <asp:UpdatePanel ID="pnlTest" runat="server" UpdateMode="Conditional">  
        
                        <ContentTemplate> 
        
                            This control is inside ASP:UpdatePanel (will retain on postback): <br /> 
        
                            <ucSL:gauge runat="server" ID="Gauge1" Width="280" Height="280" NeedleValue="80" /> 
        
                            <asp:Button ID="btnUpdPanelPostBack" runat="server" Text="Postback within UpdatePanel" />         
        
                        </ContentTemplate>                    
        
                    </asp:UpdatePanel> 
        
                </form> 
        
            </body> 
        
            </html>

The Silverlight Xaml (pretty much the same as the demo):

    
            <UserControl x:Class="SilverLightControls.Page" 
        
               xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
        
                xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"     
        
                xmlns:gauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"     
        
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
        
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > 
        
                <Grid x:Name="LayoutRoot">  
        
                    <Grid.Resources> 
        
                        <ResourceDictionary> 
        
                            <telerik:ResourceDictionary.MergedDictionaries> 
        
                                <telerik:ResourceDictionary  
        
                                        Keys="RadialGaugeHalfCircleNStyle,RadialGaugeHalfCircleSStyle,RadialGaugeHalfCircleEStyle,  
        
                                            RadialGaugeHalfCircleWStyle,RadialGaugeQuarterCircleNEStyle,RadialScaleHalfCircleNStyle,  
        
                                            RadialScaleHalfCircleSStyle,RadialScaleHalfCircleEStyle,RadialScaleHalfCircleWStyle,  
        
                                            RadialGaugeQuarterCircleNEStyle,RadialGaugeQuarterCircleNWStyle,  
        
                                            RadialGaugeQuarterCircleSWStyle,RadialGaugeQuarterCircleSEStyle,  
        
                                            RadialScaleQuarterCircleNEStyle,RadialScaleQuarterCircleNWStyle,  
        
                                            RadialScaleQuarterCircleSWStyle,RadialScaleQuarterCircleSEStyle"  
        
                                        Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" /> 
        
                            </telerik:ResourceDictionary.MergedDictionaries> 
        
                        </ResourceDictionary> 
        
                    </Grid.Resources> 
        
                    <control:RadGauge Width="280" Height="280" x:Name="radGauge1" > 
        
                        <gauge:RadialGauge x:Name="radialGauge1">  
        
                            <gauge:RadialScale x:Name="radialScale" 
        
                                    Min="0" 
        
                                    Max="100" 
        
                                    MajorTicks="10" 
        
                                    MiddleTicks="2" 
        
                                    MinorTicks="10">  
        
                                <gauge:RadialScale.MajorTick> 
        
                                    <gauge:TickProperties Length=".12"/>  
        
                                </gauge:RadialScale.MajorTick> 
        
                                <gauge:RadialScale.MiddleTick> 
        
                                    <gauge:TickProperties Length="0.09" /> 
        
                                </gauge:RadialScale.MiddleTick> 
        
                                <gauge:RadialScale.MinorTick> 
        
                                    <gauge:TickProperties Length="0.05" /> 
        
                                </gauge:RadialScale.MinorTick> 
        
                                <gauge:RadialScale.Label> 
        
                                    <gauge:LabelProperties Location="Inside" /> 
        
                                </gauge:RadialScale.Label> 
        
                                <gauge:RadialScale.Indicators> 
        
                                    <gauge:Needle x:Name="needle1" IsAnimated="true" Value="70" ></gauge:Needle> 
        
                                    <gauge:RadialBar x:Name="radialBar1" IsAnimated="True" /> 
        
                                </gauge:RadialScale.Indicators> 
        
                            </gauge:RadialScale> 
        
                        </gauge:RadialGauge> 
        
                    </control:RadGauge> 
        
                </Grid> 
        
            </UserControl>

16 Answers, 1 is accepted

answered on 19 Apr 2010, 03:38 PM

When I follow the link you provided to http://forums.asp.net/t/1446551.aspx, I find only this:

"The ASP.NET Server Controls for Silverlight, which are the ASP.NET MediaPlayer and Silverlight controls, have been removed from the Silverlight SDK for Silverlight version 3. For detailed guidance on this topic please refer to our "ASP.NET Server Controls for Silverlight in the Silverlight 3 SDK" whitepaper on the Silverlight.net site."

I'm not concerned at the moment with upgrading to Silverlight 3 - I'm just trying to get this working for a test scheduled a few hours from now. Do you have any info available on compatibility/integration of RadAjaxManager with

    
              <object data="data:application/x-silverlight-2," ...> 
        
                <param name="source" value="ClientBin/MyApp.xap" /> 
        
                <param name="onLoad" value="silverlightPluginLoaded" /> 
        
                <param name="onError" value="onSilverlightError" /> 
        
                <param name="minRuntimeVersion" value="3.0.40624.0" /> 
        
                <param name="autoUpgrade" value="true" /> 
        
                <param name="initParams" value="<%= MyParams("MyPage") %>" /> 
        
              </object>

?
Thanks.

answered on 22 Apr 2010, 09:41 AM

testslapp.zip

Hello Kit,

There is no need for special integration between RadAjax and Silverlight. For you convenience I am attaching sample application. You will see that there are no collisions when RadAjax and Silverlight plugins works together.

All the best,
Nikolay
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 09 Jul 2010, 05:23 PM

I have tried going through the information here, and looked at the sample app, but it doesn't help me because the silverlight app is not inside of the radajaxpanel. Here is my scenario... I have a master page, with a content page that loads user controls. All of the user controls are wrapped in a RadAjaxPanel, and the silverlight control is loaded inside of one of the user controls. The silverlight works perfectly fine in the sample page that it was built with, but when I move it over to the user control, it fails to load..

here's the code for the default page (when a tab is clicked, it fires off an event to load the user control.. keep in mind, everything is ajaxified):

<%@ Page Title="" Language="C#" MasterPageFile="~/App_Master/EciPortalWide.Master"

AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FacilityAttributeAdmin.ALR" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"

Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2009.2.701.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"

Namespace="Telerik.Charting" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Charting" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Reference Control="~/UserControls/Operations.ascx" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentMainText" runat="server">

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%">

<table style="width:100%">

<tr>

<td style="width:65%" valign="top">

</td>

<td style="padding-right: 5px; text-align: right;">

<asp:Label runat="server" ID="lblyear">Select a year: </asp:Label>

<telerik:RadComboBox ID="cbYear" runat="server" MaxHeight="100px"

OnSelectedIndexChanged="cbChange" AutoPostBack="True" />

<br />

<asp:Label runat="server" ID="Label1">Select a service type: </asp:Label>

<telerik:RadComboBox ID="cbServiceType" runat="server" MaxHeight="100px"

OnSelectedIndexChanged="cbChange" AutoPostBack="True" />

<br />

<asp:Label runat="server" ID="lblReportType">Select report type: </asp:Label>

<telerik:RadComboBox ID="cbReportType" runat="server" MaxHeight="100px"

OnSelectedIndexChanged="cbChange" AutoPostBack="True">

<Items>

<telerik:RadComboBoxItem runat="server" Selected="True" Text="Add" Value="A" />

<telerik:RadComboBoxItem runat="server" Text="Loss" Value="L" />

<telerik:RadComboBoxItem runat="server" Text="Both" Value="B" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

<tr>

<td colspan="2">

<telerik:RadTabStrip ID="rtsMain" runat="server" SelectedIndex="0"

ontabclick="rtsMain_TabClick" >

<tabs>

<telerik:RadTab runat="server" Selected="True" SelectedIndex="0" Text="Tables">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Graphs">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Notes">

</telerik:RadTab>

</tabs>

</telerik:RadTabStrip>

<asp:Panel ID="childTabStrips" runat="server">

<telerik:RadTabStrip ID="rtsTables" runat="server" SelectedIndex = "0"

AutoPostBack="True" ontabclick="rts_TabClick">

<tabs>

<telerik:RadTab runat="server" Selected="True" Text="Operations">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Stats">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Service Types">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Staffing Terms">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Billing Terms">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Contracts">

</telerik:RadTab>

</tabs>

</telerik:RadTabStrip>

<telerik:RadTabStrip ID="rtsGraphs" runat="server" Visible="False"

ontabclick="rts_TabClick" SelectedIndex="1">

<tabs>

<telerik:RadTab runat="server" Text="Hours Add/Loss By Year">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Encounters Add/Loss By Year"

Selected="True">

</telerik:RadTab>

</tabs>

</telerik:RadTabStrip>

<telerik:RadTabStrip ID="rtsNotes" runat="server" Visible = "false">

</telerik:RadTabStrip>

</asp:Panel>

</td>

</tr>

<tr>

<td colspan="2">

<asp:Panel ID="phUserControl" runat="server">

</asp:Panel>

</td>

</tr>

<tr>

<td style="clear:both;">

<asp:Panel ID="key" runat="server">

<fieldset style="width:35%">

<legend>Status Key:</legend>

<ul>

<li>C = Signed Contract</li>

<li>LOI = Letter of Intent</li>

<li>LOA = Letter of Agreement</li>

<li>NA = Not Available, Not Applicable</li>

</ul>

</fieldset>

</asp:Panel>

</td>

<td style="text-align: right; vertical-align: top;">

<asp:Button runat="server" ID="exportXLS" Text="Export to Excel"

onclick="exportXLS_Click" />

</td>

</tr>

</table>

</telerik:RadAjaxPanel>

</asp:Content>

here is the code for the user control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="HoursAddLossByYear.ascx.cs" Inherits="FacilityAttributeAdmin.UserControls.HoursAddLossByYear" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Charting" tagprefix="telerik" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"

TagPrefix="asp" %>

<script type="text/javascript" src="~/Silverlight.js"></script>

<script type="text/javascript">

function onSilverlightError(sender, args) {

var appSource = "";

if (sender != null && sender != 0) {

appSource = sender.getHost().Source;

}

var errorType = args.ErrorType;

var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" || errorType == "MediaError") {

return;

}

var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";

errMsg += "Code: " + iErrorCode + " \n";

errMsg += "Category: " + errorType + " \n";

errMsg += "Message: " + args.ErrorMessage + " \n";

if (errorType == "ParserError") {

errMsg += "File: " + args.xamlFile + " \n";

errMsg += "Line: " + args.lineNumber + " \n";

errMsg += "Position: " + args.charPosition + " \n";

}

else if (errorType == "RuntimeError") {

if (args.lineNumber != 0) {

errMsg += "Line: " + args.lineNumber + " \n";

errMsg += "Position: " + args.charPosition + " \n";

}

errMsg += "MethodName: " + args.methodName + " \n";

}

throw new Error(errMsg);

}

</script>

<div id="silverlightControlHost">

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

<param name="source" value="~/ClientBin/Charts.xap"/>

<param name="onError" value="onSilverlightError" />

<param name="background" value="white" />

<param name="minRuntimeVersion" value="3.0.40818.0" />

<param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">

<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

</a>

</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

in my css file, I have #silverlightControlHost { height: 400px; text-align:center;} When I load up the page and select the control that loads the user control, it displays the div correctly, and when I right click in the div, it has the Silverlight context menu, but it doesn't actually display the radchart that it should.

Any help would be appreciated..
-Russ

answered on 12 Jul 2010, 12:48 PM

radajaxsilverlight.zip

Hello Russ,

I have tried your scenario in sample application and it seems to be working on my end.
You can try it on your end.

Regards,
Nikolay
the Telerik team