Communication Between Silverlight And JavaScript

Problem:

           While developing silverlight application there are some situation when you need to pass some information from silverlight application (which you can say managed code) to the JavaScript and also from JavaScript to silverlight application (which you can say calling managed code from the JavaScript). So in this post I will discuss how you can communicate between JavaScript and silverlight  application and vice verse.

Solution:

               I have develop simple application which display current time on the screen which you can see in the Image 1 here you can see that see I have one button which is used to start the clock and also to stop the clock. The text of  the button is changed which will return from the JavaScript function if clock is started then its text will be "Stop Clock" and if clock is stopped then button text will be "Start Clock". On button click I call JavaScript which is used to set value of the Boolean variable in JavaScript either true or false and call the function which then call managed code to display the current time on the form.

Image 1

Calling JavaScript From Managed Code:

                                                                 First I will discuss how to call JavaScript from the managed code then I will discuss how to call the Managed code from the JavaScript. First you can see the JavaScript listed in List 1 Here you can see that I have simple JavaScript function which is used to set the inverse of the blnStartClock to blnStartClock which is define globally in the JavaScript sot that other function which is the callManagedCode can used it if the value of the blnStartClock is true. Then is the value which is to set the text of the button control depending of the value of the blnStartClock mean if the it has value true then return "Stop Clock" and if the value is false then "Start Clock" string is return from the function. Which is then use to set the content property of the button control.

List 1

In the List 1 you have seen the simple of the JavaScript function which I will call from the managed code. In list 2 you can see the managed code which is used to call the JavaScript function. Here you can see that I have used HtmlPage.Window.Invoke to call the JavaScript function which you can found in System.Windows.Browser namespace (mean if System.Windows.Browser is not included in your project in the reference then you have to add it in your project).

List 2

In the list 2 you have seen that I have converted the return value from the JavaScript to string as I am return string value which is then use to set the content property of the button control. Here you can see that I have used the sender of the event as I didn't set any name to the button control. When you click the button control you will see the text on the button will changed from "Start Clock" to "Stop Clock" and from "Stop Clock" to "Start Clock". This is the simple way to call JavaScript from managed code.
In this post you have learned how to call JavaScript from managed code and also how to use the return value of the JavaScript function. In next post I will discuss how to call the managed code from the JavaScript.

You can read the second part of "Communication Between Silverlight and JavaSript" from here where I have discuss how to call the managed code from the JavaScript.

All and any comments / bugs / suggestions are welcomed!