Calling Javascript from C#


SubHeading 6 

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.xaml
function 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.)

One response to “Calling Javascript from C#

  1. Cool stuff, but… what if I want to add some params to the javascript function call? All the samples that I have seen so far just call an empty params callback function (tempted to feed a hidden field…).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s