Calling javascript function from silverlight

Introduction

When working with Silverlight, we are working with managed code (C#, VB). Sometimes, we need to callback to HTML page from managed code.
In this article, we walkthrough how to call managed code from JavaScript and call JavaScript function from managed code.

Background

To call JavaScript function from Silverlight, HtmlPage class of System.Windows.Browser namespace is used to allow the user to access and manipulate browser DOM (Document Object Model).
ScriptableMemberAtrribute class indicates that method or property is accessible for JavaScript caller.
To permit user to access method of Silverlight from JavaScript, you have to set [ScriptableMember] attribute to that method.

Using the Code

Let's start step by step including source to demonstrate how to communication between JavaScript and Silverlight.

First we start with Calling JavaScript function from Silverlight

Step 1: First, create one class in a Silverlight project, which describes method to call from JavaScript.

Step 2: Switch to Web project and open HTML page.

Step 3: Create Method in HTML page called from Silverlight

//.js file

function alertText(text) {

alert(text);

}
function sendText() {

return "Hi from Javascript!";

}

Step 4: In User Control, create Button to call JavaScript function.

//page.xmal

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="50"></RowDefinition>

<RowDefinition Height="50"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="200"></ColumnDefinition>

<ColumnDefinition Width="200"></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button x:Name="btnFireJavascript" Grid.Column="0" Click="btnFireJavascript_Click" Width="100" Height="30" Content="Send Data!"></Button>

<Button x:Name="btnReceiveJavascript" Click="btnReceiveJavascript_Click" Grid.Column="1" Width="100" Height="30" Content="Receive Data!"></Button>

<TextBox x:Name="txtReturnData" Height="30" Width="150" Grid.Row="1" Grid.ColumnSpan="2"></TextBox>

</Grid>

//page.xaml.cs

private void btnFireJavascript_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("alertText", new string[] { "Hi!" });
}
private void btnReceiveJavascript_Click(object sender, RoutedEventArgs e)
{
string obj = HtmlPage.Window.Invoke("sendText", null) as string;
txtReturnData.Text = obj;
}

By clicking on button, we need to invoke JavaScript function by using System.Windows.Browser.HtmlPage.Window.Invoke method. This method will call JavaScript "sendText" method will return the entered text disyplay the "alertText" method with "From Silverlight" as alert messagebox.In the next step, write method in HTML page of Web project has XAP file as a Object parameter.
 Step 5: Drag the reference of the js file to Web project

//silverlighttestpage.aspx drag reference

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

This is just a simple demo example, you can also use Silverlight property from JavaScript as well as JavaScript member from Silverlight.

Please put he comments.......