Calling Silverlight Method from Javascript and Javascript Function from Silverlight

Introduction

When working with silverlight, we are working with manage code (C#,VB). sometimes we will need to callback to html page from manage code.
In this article we walkthrough how to calling manage code from javascript and calling javascript function from manage code.

Background

To call javascript function from silverlight, HtmlPage class of System.Windows.Browser namespace is used to allow user to access and manipulate browser DOM (Document Object Model).
ScriptableMemberAtrribute class indicates that method or property is accessible for javascript caller.
To permit user to access method of silverlight from javascript you have to set [ScriptableMember] attribute to that method.

Go Through code

Let's start with step by step including source to demonstrate how to communication between javascript and silverlight.

First we start with Call JavaScript function from Silverlight

Step 1 : First create one class in silverlight project, which describes method to call from javascript.
ScriptableClass.cs

public class ScriptableClass
    {
        [ScriptableMember]
        public void ShowAlertPopup(string message)
        {
            MessageBox.Show(message, "Message From JavaScript", 

                  MessageBoxButton.OK);
        }
    } 

Above class contain one method with parameter. this method is Scriptable attribute type which provides access to call from javascript.
Step 2: In App.xaml.cs file register Scriptable object.
App.xaml.cs

 private void Application_Startup(object sender, StartupEventArgs e)
        {
            this.RootVisual = new MainPage();
            ScriptableClass myScript = new ScriptableClass();
            HtmlPage.RegisterScriptableObject("SL2JS", myScript);
        } 

In aaplication_startup event we need to register  scriptable class using RegisterScriptableObject method.
This HtmlPage.RegisterScriptableObject registers manage object for access by javascript code.

Step 3: In User Control create Button to call javascript function.
 MainPage.xaml 

<Button x:Name="CallingButton"
                    Content="Call JavaScript Method From Silverlight"
                    Height="25"
                    Click="CallingButton_Click"></Button>

 MainPage.xaml.cs

 private void CallingButton_Click(object sender, RoutedEventArgs e)
 {
   System.Windows.Browser.HtmlPage.Window.Invoke("DisplayAlertMessage", "From Silverlight");
 }

By click on button we need to invoke javascript function by using
System.Windows.Browser.HtmlPage.Window.Invoke method,
this method will call javascript "DisplayAlertMessage" method with "From Silverlight" as a passing parameter.
In next step write method in HTML page of Web project has XAP file as a Object parameter.
Step 4 : Switch to Web project and open HTML page
Step 5:  Create Method in HTML page called from silverlight.

  <script type="text/javascript">
        
        //From silverlight
        function DisplayAlertMessage(param1) {
            alert("your are invoke method of javscript \n" + param1);
        }
       
    </script> 

Now we move on to Call Silverlight Method from HTML page.

Now we move on to Call Silverlight Method from HTML page

Step 1 : Create button in HTML page of Web project 
Silverlight2JSViseVersaTestPage.html 

<div>
  <div style="width: 250px; background: lightblue; font-weight: bold;height:30px">
   HTML Part
  </div>
  <div>
     <input type="button" value="Calling Silverlight Method From Javascript"  

               onclick="CallSilverlight();" />

 </div>
</div>

Step 2 : Create object of silverlight app on load of Object using param.

 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            width="100%" height="80%">
            <param name="source" value="ClientBin/Silverlight2JSViseVersa.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="autoUpgrade" value="true" />         
                    <param name="onLoad" value="pluginLoaded" />

            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object> 

In above source we created one parameter, we calling one method to create XAP object on load of silverlight app on Object.
Step 3 :Write function "pluginLoaded" to create host application variable.

 <script type="text/javascript">       
        //calling Silverlight method
        var slCtl = null;
        function pluginLoaded(sender, args) {
            slCtl = sender.getHost();
        }
      
    </script> 

this code describes method that get hosted silverlight aaplication object. using this object we will call silverlight method.
Step 4: Create javascript function "CallSilverlight" that call silverlight method.

 <script type="text/javascript">     
        //calling Silverlight method
        var slCtl = null;
        function pluginLoaded(sender, args) {
            slCtl = sender.getHost();
        }
        function CallSilverlight() {
            slCtl.Content.SL2JS.ShowAlertPopup("Testing for Calling Silverlight Method\n From Javascript");
        } 
    </script>

In above code, CallSilverlight function will invoke silverlight scriptable member method using hosted object (slCtl).

You can Download code from : Download Link - SilverlightToJS_JSToSilverlight