Walkthrough: Calling Managed Code from JavaScript

Create a new Silverlight Application project named HB in Visual Basic or Visual C#. Select the Host the Silverlight application in a new Web site option. For more information, see How to: Create a New Silverlight Project.

Open HBTestPage.aspx in Source view and find the form element that contains the Silverlight control. 

Change the height style property of the form element from 100% to 10%.

After the closing </form> tag, add an HTML input text element.

Set the following properties of the input text element:

• id: "Text1"

• disabled: "disabled"

• value: "My Initial Value"

The following example shows the markup for the input text element.

<input type="text" id="Text1" disabled="disabled"
  value="My Initial Value" />

Press F5 to build and run the solution.

The page is displayed. The input text element is disabled.

Close the browser.

Open the code-behind class file for the App.xaml file.

At the top of the file, add a using or Imports statement to import the System.Windows.Browser namespace.

Add code to the Application_Startup method that performs the following tasks:

• Gets a reference to the System.Windows.Browser.HtmlDocument object.

• Uses the reference to find the text box and then set its text.

The following example shows how to perform these tasks.

'HtmlDocument requires Imports System.Windows.Browser  
Dim doc As HtmlDocument = HtmlPage.Document
doc.GetElementById("Text1").SetProperty("disabled", False)
doc.GetElementById("Text1").SetAttribute("value", _
       "This text set from managed code.")

// HtmlDocument requires using System.Windows.Browser; 
HtmlDocument doc = HtmlPage.Document;
//Enable the HTML textbox on the page and say hello
doc.GetElementById("Text1").SetProperty("disabled", false);
doc.GetElementById("Text1").SetAttribute("value", 
    "This text set from managed code.");

Press F5 to run the application.

This time, the input button is enabled and its text is "This text set from managed code".

In the HB project, add a new class and name it MyScriptableManagedType.

In the class, add the following members:

• A MyToUpper method that returns a string in uppercase after invoking the ToUpper method on it.

• A Name property that returns the value of a _name member variable.

Mark both members with the ScriptableMemberAttribute attribute, which is required in order to expose the members to client script.

The following example shows MyScriptableManagedType class.

' MyScriptableManagedType.vb

Imports System.Windows.Browser
'<ScriptableType()> _
Public Class MyScriptableManagedType
   Dim _name As String

   <ScriptableMember()> Public Function MyToUpper(ByVal str As String) As String
      Return str.ToUpper
   End Function

   <ScriptableMember()> Public Property Name() As String
      Get
         Return _name
      End Get
      Set(ByVal value As String)
         _name = value
      End Set
   End Property

End Class

// MyScriptableManagedType.cs
using System.Windows.Browser;

namespace HB {
    public class MyScriptableManagedType {
        [ScriptableMember()]
        public string MyToUpper(string str) {
            return str.ToUpper();
        }

        [ScriptableMember()]
        public string Name { get; set; }
    }
}

Build the solution to confirm that there are no errors.

Open the code-behind class for the App.xaml file.

At the end of the Application_Startup method, call the HtmlPage.RegisterScriptableObject method in order to register the MyScriptableManagedType class as a scriptable object.

The following example shows how to register the class.

'Set up some scriptable managed types for access from Javascript.
Dim smt As MyScriptableManagedType = New MyScriptableManagedType()
HtmlPage.RegisterScriptableObject("mySLapp", smt)

//Set up some scriptable managed types for access from Javascript.
MyScriptableManagedType smt = new MyScriptableManagedType();

HtmlPage.RegisterScriptableObject("mySLapp", smt);

Build the solution to confirm that there are no errors.

Open the HBTestPage.aspx file in Source view.

Just before the closing </head> tag, create a script element.

In the script element, create a pluginLoaded function that will be called when the Silverlight application has finished loading.

In the pluginLoaded function, perform the following tasks:

• Get a reference to the Silverlight control that contains the managed object.

• Call the MyToUpper scriptable method that you created earlier. Use a fully qualified call that takes the form SilverlightControl.Content.scriptableObject.MyToUpper(string).

The following example shows how to perform these tasks.

<script type="text/javascript">
var slCtl = null;
  function pluginLoaded(sender,args){
     slCtl  = sender.getHost();
     alert(slCtl.Content.mySLapp.MyToUpper("Test String"));
}
</script>

In the Silverlight object markup, add an onLoad attribute that has the value "pluginLoaded".

The following example shows the HTML markup for the Silverlight control reference.

<object data="data:application/x-silverlight-2," 
    type="application/x-silverlight-2" width="100%" height="100%">
  <param name="source" value="ClientBin/HB.xap"/>
  <param name="onerror" value="onSilverlightError" />
  <param name="onLoad" value="pluginLoaded" />
  <!-- ... -->
</object>

Press F5 to run the page.

A message box displays "TEST STRING".

In the HBTestPage.aspx file, after the input text element you added earlier, add an HTML button named Button1 with a value of "Test set/get".

In the HTML button, bind its onclick event to the Button1_onclick method. (You will create this method in the next step.)

The following example shows the HTML markup for the button.

<input id="Button1" type="button" value="Test set/get" 
  onclick="return Button1_onclick()" />

In the script element, add the following Button1_onclick method:

The variable slCtl is the Silverlight control that you initialized in the previous procedure. mySLapp is the scriptable object initialized previously. Name is a property in the scriptable object.

function Button1_onclick() {
    slCtl.Content.mySLapp.Name = navigator.appName;
    alert(slCtl.Content.mySLapp.Name);
} 

Press F5 to run the page.

In the message box that displays "TEST STRING", click OK.

Click the Test set/get button.

A message box displays the name of your browser.