Calling Javascript from C#

 

A question that keeps coming up is how to call Javascript from C# in a Silverlight 1.1 Alpha application. This requires only a little bit of wiring, and the use of the most excellent Scriptable attribute.Start with a new Silverlight project (you can get everything you need to get started at silverlight.net.) In your Page class, you will need to reference the System.Windows.Browser namespace (make sure you have System.Silverlight as a reference). Add a public event, then add the Scriptable attribute to the class and the event. Register your object in the constructor, and you are good to go, from the C# side of things, anyway.

Here’s what that looks like:


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;namespace agScriptable {[Scriptable]
public partial class Page : Canvas{

public Page(){
WebApplication.Current.RegisterScriptableObject("example", this);
MouseLeftButtonDown += Page_MouseLeftButtonDown;
}

void Page_MouseLeftButtonDown(object sender, MouseEventArgs e) {
if (CallbackToBrowser != null){
CallbackToBrowser(this, new EventArgs());
}
}

public void Page_Loaded(object o, EventArgs e){
// Required to initialize variables
InitializeComponent();
}

[Scriptable]
public event EventHandler CallbackToBrowser;
}
}  

You can't fire the CallbackToBrowser event in your Loaded event handler, because that's too early. All of the required setup will not have occurred by then.

In your Javascript, you will need to add a global event handler for the onLoad event. You also need to add an event handler function, which you will register in the onLoad handler. Here’s what that looks like:


// JScript source code
//contains calls to silverlight.js, example below loads Page.xamlfunction createSilverlight() {
Sys.Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: { width: "100%", height: "100%", version: "0.95", enableHtmlAccess: true },
events: { onLoad: OnLoaded }
});
}function OnLoaded(sender, args) {
sender.Content.example.CallbackToBrowser = onManagedCallback;
}

function onManagedCallback(sender, args) {alert("JS!"); }

You can't register the event handler in the createSilverlight() function, because the Silverlight control has not been fully initialized yet.

When this is all put together, clicking on the Canvas will call the Javascript onManagedCallback function.

(Thanks to Stefan Schackow.)