Communication Between Silverlight And JavaScript (Part 2)

This post is the second part of the series of Communication Between Silverlight And JavaScript. In the First part I have discuss how to call JavaScript from the managed code.Now in this post I will discuss how to call the managed code from the JavaScript.

Calling Managed Code From JavaScript :

                                                                  In order to access managed code from the JavaScript you have to do following steps.

Step 1:

          In step 1 what you have to make is the to create function (which I want to access from the JavaScript). You can do this by using ScriptableMember . So here in List 1 you can see that I have ReceiveMessageFromJavaScript function which is mark as ScripableMember. This function will called from the JavaScript and this function will take just one parameter which is of type string ( which is used to display the current time) and that string parameter is assigned to the Text proerty of the textblock which is used to show the current time on the form.

List 1

Step 2:

          In step 2 what you have to do is to registers a managed object for scriptable access by JavaScript code. As you can see in the List 1 I have used HtmlPage.RegisterScriptableObject function is used to register managed object to be access from the JavaScript. First argument is the key which is used to access the function from the JavaScript here I have used "PageName" as key and second argument is the instance name which I have pass "this".  

Step 3: 

          If you complete Step 1 and Step 2 then managed code is ready to be access from the client side mean from JavaScript. Now we have to make some changes so that we can access the managed code from JavaScript. Now is the next what you have to do is to set the id of the object which has the silverlight application as you can see in the Image 1 here I have set "silverlightApplication" id to the object which is placed inside the div tag with id "silverlightControlHost".

Image 1

The callManagdCode function is simple function which is used to set the current time as string and then pass to the managed code. Let me discuss the important code from the callManagedCode function which is started from where I get the silverlight object by using the "silverlightApplication" id and which is store in the control variable after accessing the "silverlightApplication" control by using document.getElementById next is to call the function from the managed code.

List 2

To call the managed code what you have to do is to used the control which I have store in the control variable and then use the Content and then the key name which I have set in the Step 2 and then the function name which I have set in the Step 1. As you can see in the Image 2. 

Image 2

At the end of the callManagedCode function I have used the setTimeOut to call the "callManagedCode()" function after every 1 second as my clock display second as well in the time so clock will be updated(if the blnStartClock is true then it will called itself after every second and update the time on the form by calling the managed code).
This how you can call the managed code from the JavaScript. I have tried my best to give full detail of how to make the communication between Silverlight and JavaScript. Hope you get idea of how to call managed code from the JavaScript.You can download the source code from here.

You can read the first part of this series from here where I have discuss how to call the JavaScript from the managed code.

All and any comments / bugs / suggestions are welcomed!