Blog

• Use document.getElementById to get the Silverlight control.
• Then call Content.<registered name>.<method name>. For example, control.Content.Page.UpdateText(text).
• Nothing special for the functions that are called from Silverlight.
  

• Mark the class with the ScriptableType attribute.
• Call HtmlPage.RegisterScriptableObject in the constructor.
• Mark any methods that will be called from JavaScript with ScriptableMember.
• Use HtmlPage.Window.Invoke to call JavaScript functions.

<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
  <TextBox x:Name="Result" HorizontalAlignment="Stretch" Width="200" Height="24" />
</StackPanel>

[ScriptableType]
public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();

        // make this object a scriptable object
        HtmlPage.RegisterScriptableObject("Page", this);            
    }

// called from javascript
[ScriptableMember]
public void UpdateText(string result)
{
    this.Result.Text = result;
}

<!-- html area, click on the link to send data to the Silverlight control -->
<input id="result" type="text" size="30" />&nbsp;&nbsp;
<a href="javascript:updateSilverlight();">Update Silverlight</a>

<asp:Silverlight ID="silverlightControl" ... />

function updateSilverlight()
{
    // get data from html control
    var text = document.getElementById("result").value;

    // call silverlight control method
    var control = document.getElementById("silverlightControl");
    control.Content.Page.UpdateText(text);
}

Now you can run the application. Enter some text in the HTML textbox and press the Update Silverlight link. The JavaScript function updateSilverlight is executed which calls the managed code UpdateText method.




Call JavaScript function from Silverlight

// called from silverlight
function updateText(text)
{
    document.getElementById("result").value = text;
} 

<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
  <TextBox x:Name="Result" HorizontalAlignment="Stretch" Width="200" Height="24" />
  <Button x:Name="CallJavaScript" Content="Update JavaScript"
     Width="130" Height="24" Margin="10,0,0,0" Click="CallJavaScript_Click" />
</StackPanel>

private void CallJavaScript_Click(object sender, RoutedEventArgs e)
{
    // call the javascript function
    HtmlPage.Window.Invoke("updateText", this.Result.Text);
}

Now run the application again. Enter some text in the Silverlight textbox and click the Update JavaScript button. The click handler is executed which uses the HtmlPage.Window.Inovke method to execute the JavaScript updateText function.