Getting Started with Adobe After Effects - Part 6: Motion Blur

Upload Image Close it
Select File

Browse by Tags · View All
SQL Server 119
#SQLServer 88
Oracle 70
BRH 31
SQL Server 2012 29
denali 23
#TSQL 19
C# 15

Archive · View All
October 2011 31
November 2011 30
September 2011 30
August 2011 18
December 2011 15
July 2011 13
June 2011 8
May 2012 4
April 2012 3
January 2010 3

Invoke JavaScript Functions through Silverlight Application

Apr 16 2012 9:37PM by Niladri Biswas   


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
  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"
    d:DesignHeight="300" d:DesignWidth="400" xmlns: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"/>

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)"+" });
		case "Subtract": InvokeJS((object)new object[] { (object)txtVal1.Text, (object)txtVal2.Text, (object)"-" });
		case "Multiply": InvokeJS((object)new object[] { (object)txtVal1.Text, (object)txtVal2.Text, (object)"*" });
		case "Divide": InvokeJS((object)new object[] { (object)txtVal1.Text, (object)txtVal2.Text, (object)"/" });


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

Zip file is attached

Tags: javascript, silverlight,

Niladri Biswas
7 · 21% · 6720


Your Comment

Sign Up or Login to post a comment.

"Invoke JavaScript Functions through Silverlight Application" rated 5 out of 5 by 2 readers
Invoke JavaScript Functions through Silverlight Application , 5.0 out of 5 based on 2 ratings
    Copyright © Rivera Informatic Private Ltd Contact us      Privacy Policy      Terms of use      Report Abuse      Advertising      [ZULU1097]