Walkthrough: Calling JavaScript from Managed Code

Create a new Silverlight Application project named M2JS 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 the M2JSTestPage.html file in Design view.

Add an HTML button to the page.

Set the following properties of the button:

• id: "btnCallJSMethod"

• value: "Click to make a managed call to a JavaScript method"

The following example shows the markup for the button.

<input type="button" id="btnCallJSMethod"
  value="Click to make a managed call to a JavaScript method" />

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.

• Creates a delegate for a method named CallGlobalJSMethod in the current class.

• Binds the CallGlobalJSMethod method to the click event of the HTML button using the document reference and the delegate.

The following example shows the completed Application_Startup method.

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
    Dim del As New EventHandler(AddressOf Me.CallGlobalJSMethod)

    ' Hook up the simple JavaScript method HTML button.
    doc.GetElementById("btnCallJSMethod").AttachEvent("click", del)
End Sub

private void Application_Startup(object sender, StartupEventArgs e) {
    this.RootVisual = new Page();
    // HtmlDocument requires using System.Windows.Browser.
    HtmlDocument doc = HtmlPage.Document;

    // Hook up the simple JavaScript method HTML button.
    doc.GetElementById("btnCallJSMethod").AttachEvent("click", 
        new EventHandler(this.CallGlobalJSMethod));
}

In the App class, add the CallGlobalJSMethod method to perform the following tasks:

• Get the current date and time and build it into a string that indicates that the date and time was calculated in managed code.

• Call the HtmlPage.Window.Invoke method to call the client-script function named globalJSMethod, passing it the date-time string.

The following example shows the completed CallGlobalJSMethod method.

' Call a global JavaScript method defined on the HTML page.
Private Sub CallGlobalJSMethod(ByVal sender As Object, ByVal e As EventArgs)
    Dim strMS As String = DateTime.Now.Millisecond.ToString()
    Dim strTime As String = "Time came from managed code" + ControlChars.NewLine _
              + DateTime.Now.ToLongTimeString() _
              + " MS = " + strMS

    HtmlPage.Window.Invoke("globalJSMethod", strTime)
End Sub

// Call a global JavaScript method defined on the HTML page.
private void CallGlobalJSMethod(object o, EventArgs e) {

    string strMS = DateTime.Now.Millisecond.ToString();

    string strTime = "Time came from managed code \n"
        + DateTime.Now.ToLongTimeString()
        + " MS = " + strMS;

    HtmlPage.Window.Invoke("globalJSMethod", strTime);
}

Open the M2JSTestPage.html file in Source view.

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

In the script element, create a CallGlobalJSMethod function that will be called from the managed code. The function will be passed one parameter that contains the data that is passed from the managed-code method.

The following example shows the globalJSMethod method. The code displays the managed-code data and adds data generated in the client-script function.

<script type="text/javascript">
function globalJSMethod(strParamGGS){
    var d = new Date();
    alert(strParamGGS + " \n JavaScript milliseconds: " +
        d.getMilliseconds());
}
</script>

Build the application.

Right-click the M2JSTestPage.html page and then click View in Browser.

Click the Click to make a managed call to a JavaScript method button.

A message box displays the time in milliseconds when the managed-code method ran and the time in milliseconds when the client script ran.