Passing the images to the Silverlight via javascript
Implementing the javascript function
You must create a javascript function that does the following:
- Gets an instance of the Silverlight object element.
- Gets an instance of the HiddenField control.
- Deserializes the value of the HiddenField control.
- Calls the SetItem method of the MainPage instance for each item in the deserialized collection.
Place the function in the CoverFlow.ascx file. Following is the code for it:
<script type="text/javascript">
function pluginLoaded(sender, args) {
slCtl = sender.getHost();
var imagesField = $get('<%= imagesField.ClientID %>');
var imagesArr = Sys.Serialization.JavaScriptSerializer.deserialize(imagesField.value);
for (var idx = 0; idx < imagesArr.length; idx++) {
slCtl.Content.mainPage.SetItem(imagesArr[idx]['Title'], imagesArr[idx]['Url']);
}
}
</script>
Wiring the function to the Loaded event of the Silverlight object
You must call the created function, when the Silverlight object element is loaded. To do this, you must add the following parameter to the parameters of the Silverlight object element:
<param name="onLoad" value="pluginLoaded" />
Your Silverlight object element must look like this:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="onLoad" value="pluginLoaded" />
<param name="source" value='<%= ResolveUrl("~/ClientBin/CoverFlowSilverlight.xap") %>' />
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="windowless" value="true" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
style="border-style: none" />
</a>
</object>
Adding a ScriptManager to the control
The javascript function uses Ajax to retrieve the HiddenField control. Because Ajax requires a ScriptManager object on the page, where it runs, you must ensure that there is one on the page, which the control is used in. To do this, perform the following:
-
In the CoverFlow.cs file, add the following using statement:
using Telerik.Sitefinity.Modules.Pages.Web.UI;
-
Mark the CoverFlow class with the [RequireScriptManager] attribute.
[RequireScriptManager]
public class CoverFlow : SimpleView
This causes a ScriptManager element to be added automatically to the page, which the control is used in.