C1HtmlHost is a wonderful control which gives you the ability to host web pages inside a Silverlight application. There are times when you would want to access a function defined in a Silverlight user control from an aspx page and it is possible with a few tricks.

This blog is all about accessing a Silverlight function from an aspx page hosted inside C1HtmlHost control using Javascript.

Hosting an Aspx page inside C1HtmlHost

First of all, we need to add a WebForm to the web project, so add a new WebForm and name it WebForm1.aspx. You can put whatever content you want in the WebForm. A Button will be used later to access the function.

Now we'll add a C1HtmlHost control to the Silverlight UserControl and set its source as WebForm1.aspx.

c1HtmlHost1.SourceUri = new Uri("WebForm1.aspx", UriKind.Relative);

Defining the Silverlight Function

Now suppose you wish to access the following Silverlight function:

public void SilverlightFunction()
   MessageBox.Show("Message from Silverlight Function");

To make is accessible outside Silverlight, it needs to be declared as a ScriptableMember which is a part of the System.Windows.Browser namespace.

public void SilverlightFunction()
   MessageBox.Show("Message from Silverlight Function");

The second step is to Register the Silverlight UserControl as a scriptable object with a name so that it can be accessed in Javascript. Open App.xaml.cs and write the following code:

private void Application_Startup(object sender, StartupEventArgs e)
   MainPage newMainPage = new MainPage();
   this.RootVisual = newMainPage;
   HtmlPage.RegisterScriptableObject("slObject", newMainPage);

There's one other small thing that needs to be done: open the aspx page which hosts the Silverlight application (C1HtmlHost_SampleTestPage.aspx) and give an id to the Silverlight Object.

<object id="silverlightControl" data="data:application/x-silverlight-2," 

Accessing the Function in WebForm1.aspx

Now we come to the final part of how to access the function: add an input button and define its onclick event.

<input type="button" id="btn1" onclick="CallSilverlightFunction()" value="Call Silverlight Function" />

Write the following Javascript code in the CallSilverlightFunction() function:

function CallSilverlightFunction(sender, args) {
   var parent = window.parent;
   var sl = parent.document.getElementById("silverlightControl");

We need to find the parent window since WebForm1 is hosted inside C1HtmlHost. Then we need to find the Silverlight Object with id="SilverlightControl." Now we can easily access the function using the registered name (slObject) and the function name (SilverlightFunction).

Please refer to the attached sample for complete implementation.

Download Sample