Invoke Javascript Methods from Silverlight Applications

Introduction

In this article, I will show how to invoke Javascript methods from Silverlight. We will learn this by performing a simple calculator example with some basic arithmetical functionalities being expose.

What we need to perform the experiment?

Well for doing this experiment, what we need is the following

1. VS 2010
2. Asp.net
3. Silverlight

Steps to perform the experiment

Step 1:

Open the VS2010 and File->New->Project->Silverlight(Choose from installed templates) and choose Silverlight Applications.Give a proper name to the Application and click on OK button

In the next screen "New Silverlight Application" that appears, keep everything as it is and click on the OK button

Two projects will be created in the solution explorer - one for Silverlight by the name "SilverlightApplication1" and the other for is WebApplication by "SilverlightApplication1.Web".

Step 2:

We will now design our Silverlight page.So open MainPage.xaml and write the below xaml code

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

    <Grid x:Name="LayoutRoot" Background="White">
        <sdk:Label Height="28" HorizontalAlignment="Left" Margin="18,27,0,0" Name="label1" VerticalAlignment="Top" Width="120" Content="Enter First Value" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="144,27,0,0" Name="txtVal1" VerticalAlignment="Top" Width="216" />
        <sdk:Label Content="Enter Second Value" Height="28" HorizontalAlignment="Left" Margin="18,61,0,0" Name="label2" VerticalAlignment="Top" Width="120" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="144,61,0,0" Name="txtVal2" VerticalAlignment="Top" Width="216" />
        <sdk:Label Content="Result" Height="28" HorizontalAlignment="Left" Margin="18,109,0,0" Name="label3" VerticalAlignment="Top" Width="120" />
        <TextBlock Height="23" HorizontalAlignment="Left" Margin="144,109,0,0" Name="txtResult" Text="" VerticalAlignment="Top" Width="216" />
        <Button Content="Add" Height="23" HorizontalAlignment="Left" Margin="20,165,0,0" Name="btnAdd" VerticalAlignment="Top" Width="75" Click="btnClick" />
        <Button Content="Subtract" Height="23" HorizontalAlignment="Left" Margin="109,165,0,0" Name="btnSub" VerticalAlignment="Top" Width="75" Click="btnClick"/>
        <Button Content="Multiply" Height="23" HorizontalAlignment="Left" Margin="206,165,0,0" Name="btnMul" VerticalAlignment="Top" Width="75" Click="btnClick" />
        <Button Content="Divide" Height="23" HorizontalAlignment="Left" Margin="301,165,0,0" Name="btnDiv" VerticalAlignment="Top" Width="75" Click="btnClick"/>
    </Grid>
</UserControl>

So our design will look as under

N.B.~As can be figure out that we have a common event handler for all the button controls which is btnClick

Step 3:

Next write the below code piece in the btnClick event

private void btnClick(object sender, RoutedEventArgs e)
{
	var btnName = (sender as Button).Content;
	switch (btnName.ToString())
	{
		case "Add":InvokeJS((object)new object[]{ (object)txtVal1.Text, (object)txtVal2.Text,(object)"+" });
			break;
		case "Subtract": InvokeJS((object)new object[] { (object)txtVal1.Text, (object)txtVal2.Text, (object)"-" });
			break;
		case "Multiply": InvokeJS((object)new object[] { (object)txtVal1.Text, (object)txtVal2.Text, (object)"*" });
			break;
		case "Divide": InvokeJS((object)new object[] { (object)txtVal1.Text, (object)txtVal2.Text, (object)"/" });
			break;
	}

} 

The InvokeJS function is as under

void InvokeJS(params object[] items)
{
	object result = System.Windows.Browser.HtmlPage.Window.Invoke("DoOperation", items);
	txtResult.Text = result.ToString();
}

The HtmlPage.Window.Invoke method invokes a method on the current scriptable object(here Javascript) and optionally passes in one or more method parameters.

So in this case DoOperation is the javascript function name and we are passing an object array comprising of three elements viz. First Number, Second Number and the Operator

Step 4:

Open the SilverlightApplication1TestPage.aspx and implement the DoOperation javascript function

//Invoke this function from silverlight
function DoOperation(params) 
{
	var result = 0;
	switch (params[2])   //params[2] is the operator(s) i.e. +,-,*,/
	{
		case '+': result = parseInt(params[0]) + parseInt(params[1]); break;
		case '-': result = params[0] - params[1]; break;
		case '*': result = params[0] * params[1]; break;
		case '/': result = params[0] / params[1]; break;
		default: alert("No such operation available");
	}
	return result;
}

Step 5:

So now we are all set.Build the solution.Make the SilverlightApplication1 as the startup project.Run the application

The below is the output for Addition operation

Conclusion

So we have learn as how to invoke Javascript function from Silverlight.Hope this article will be helpful as a reference.

Zip file is attached