Invoke Javascript Methods from Silverlight Applications

Niladri.Biswas
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 6400 red flag

In this tutorial, we will see how to invoke Javascript function through Silverlight applications


 Download source code for 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

Page copy protected against web site content infringement by Copyscape

About the Author

Niladri.Biswas
Full Name: Niladri Biswas
Member Level: Platinum
Member Status: Member
Member Since: 10/25/2010 11:04:24 AM
Country: India
Best Regards, Niladri Biswas
http://www.dotnetfunda.com
Technical Lead at HCL Technologies

Login to vote for this post.

Comments or Responses

Posted by: Pavan_Kumar on: 5/23/2012 | Points: 25
Nice article !!

Login to post response

Comment using Facebook(Author doesn't get notification)