Walkthrough: Calling Managed Code from JavaScript

Walkthrough: Calling Managed Code f...

Silverlight

This topic shows how to call managed code from JavaScript in a Web page that includes the Silverlight version 2 plug-in. This gives client script access to the extensive .NET Framework features that are available in managed code, without requiring a round trip to the Web server.

Using client script to call managed code in a Silverlight-based application involves the following tasks:

Handling the Startup event of the XAML Application object in order to bind client script to the XAML code and to register a managed-code class as a scriptable object.
Making members of a managed-code class accessible to script by using the Scriptable attribute.
Invoking managed-class methods and accessing managed-class properties from client script.

Prerequisites

You need the following components to complete this walkthrough:

Silverlight version 3.
Silverlight Tools for Visual Studio 2008.
Microsoft Visual Studio 2008.

All of the Silverlight software is available from the Silverlight download site.

Creating a Silverlight Project and Test Page

The first step is to create a Silverlight project and a test page.

To create a Silverlight project and test page

Create a new Silverlight Application project named HB in Visual Basic or Visual C#. Select the Add a new Web to the solution for hosting the control option. For more information, see How to: Create a New Silverlight Project.
Open HBTestPage.aspx in Source view and find the div element that contains the Silverlight control.
Change the Height style property of the div element from 100% to 10%.
After the closing </div> tag that contains the Silverlight control, 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" />
```
Build the solution.
Right-click the HBTestPage.aspx file and then click View in Browser.
The page is displayed. The input text element is disabled.
Close the browser.

Binding the Client Script to XAML Code

An App.xaml file is automatically created when you create a Silverlight project. The code-behind file for the App.xaml file (App.xaml.cs for C# and App.xaml.vb for Visual Basic) defines an App class that contains an Application_Startup method. You can write code in this method to bind or establish a connection between your Web page and a managed class.

To bind client script to the XAML code

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.

Visual Basic

'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 CTRL+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.

Visual Basic

' 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.

Registering Managed Code for Client Script Access

The next step is to create a scriptable managed-code object that can be called from client script.

To register and access a class as a scriptable object

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.

Visual Basic

'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){    // ASPX version
     slCtl  = sender.get_element();
     alert(slCtl.Content.mySLapp.MyToUpper("Test String"));
}
</script>
```
In the markup for the Silverlight control, bind the PluginLoaded event to the pluginLoaded method that you created earlier.
The Silverlight control markup will look similar to the following code:
```
<asp:Silverlight ID="Xaml1" runat="server"
  Source="~/ClientBin/HB.xap" 
  OnPluginLoaded="pluginLoaded"
  MinimumVersion="2.0" Width="100%" Height="100%" />       
```
Press CTRL+F5 to run the page.
A message box displays "TEST STRING".

Testing Client-Script Access to Managed Code

You can now create client script that lets you test the scriptable object.

To get and set managed-code property values using JavaScript

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 CTRL+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.

Creating an HTML Test Page

You can now modify the HBTestPage.html file to test the Silverlight control.

To make the sample work with an HTML page

Open the HBTestPage.html file in Source view.
Just after the opening <body> tag, add the same HTML text input element and HTML button that you added earlier to the HBTestPage.aspx file.
The following example shows the markup for the controls.
```
<input type="text" id="Text1" disabled="disabled" 
  value="My Initial Value" />
<input type="button" id="Button1" value="Test set/get" 
  onclick="return Button1_onclick()" />
```

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>

In the existing script element on the page, add a JavaScript function for the pluginLoaded method.
Use the getHost method to get a reference to the Silverlight control. The following example shows the JavaScript code for the pluginLoaded method.
```
<script type="text/javascript">
    var slCtl=null;
    
    function pluginLoaded(sender,args){      // HTML version 
       slCtl = sender.getHost(); 
       alert( slCtl.Content.mySLapp.MyToUpper("test string"));
    }
```
Build the solution.
Right-click the HBTestPage.html file and then click View in Browser.
A message box displays "TEST STRING".
Click OK and close the browser.
In the existing script element, add a Button1_onclick method that does the following:
- Gets the name of the browser and displays it.
The following example shows the HTML markup for the Button1_onclick method.
```
function Button1_onclick() {
    slCtl.Content.mySLapp.Name = navigator.appName;   
    alert(slCtl.Content.mySLapp.Name);  
}
```
Build the solution.
Right-click the HBTestPage.html file and then click View in Browser.
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.

Example

The following example shows the code for the test page (HBTestPage.aspx), the MyScriptableManagedType class, and the App.xaml code-behind.

Code

<!--  HBTestPage.aspx -->
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  style="height: 100%;">
<head runat="server">
    <title>Test Page For HB</title>

    <script type="text/javascript">
        var slCtl = null;
        function pluginLoaded(sender){    // ASPX version
             slCtl  = sender.get_element();
             alert(slCtl.Content.mySLapp.MyToUpper("Test String"));
        }
        
        function Button1_onclick() {
            slCtl.Content.mySLapp.Name = navigator.appName;
            alert(slCtl.Content.mySLapp.Name);
        }    
    </script>

</head>
<body style="height: 10%; margin: 0;">
    <form id="form1" runat="server" style="height: 100%;">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div style="height:10%;">
        <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/HB.xap" MinimumVersion="2.0"
            Width="100%" Height="100%" OnPluginLoaded="pluginLoaded" />
    </div>
    <input id="Text1" type="text" disabled="disabled" 
    value="My Initial Value" /><br />
    
    <input id="Button1" type="button" value="Test set/get" 
    onclick="return Button1_onclick()" />
    </form>
</body>
</html>

Visual Basic

' 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; }
    }
}

Visual Basic

Imports System.Windows.Browser
Partial Public Class App
    Inherits Application

    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
        Me.RootVisual = New Page()
        '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.")
        'Set up some scriptable managed types for access from Javascript.
        Dim smt As MyScriptableManagedType = New MyScriptableManagedType()
        HtmlPage.RegisterScriptableObject("mySLapp", smt)
    End Sub

End Class

// App.xaml.cs
using System.Windows;
using System;

using System.Windows.Browser;

namespace HB {
    public partial class App : Application {

        public App() {
            this.Startup += this.Application_Startup;

            InitializeComponent();
        }

        private void Application_Startup(object sender, StartupEventArgs e) {
            // Load the main control
            this.RootVisual = new Page();

            // 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.");
            //Set up some scriptable managed types for access from Javascript.
            MyScriptableManagedType smt = new MyScriptableManagedType();

            HtmlPage.RegisterScriptableObject("mySLapp", smt);
        }
    }
}

To create a Silverlight project and test page

To bind client script to the XAML code

To register and access a class as a scriptable object

To get and set managed-code property values using JavaScript

To make the sample work with an HTML page

Code

Tasks

Reference

Other Resources