Silverlight integrates seamlessly with Javascript and ASP.NET AJAX. In this post, I am going to show you how to communicate back and forth between Silverlight and Javascript. Silverlight managed code can interact with JavaScript by utilizing the classes within the System.Windows.Browser namespace. Below is the markup for both the Silverlight application as well as the ASP.NET markup for our example.
Silverlight XAML:
1: <Grid x:Name="LayoutRoot" Background="Silver">
2: <Grid.RowDefinitions>
3: <RowDefinition Height="25" />
4: <RowDefinition Height="25" />
5: </Grid.RowDefinitions>
6: <Grid.ColumnDefinitions>
7: <ColumnDefinition Width="150" />
8: <ColumnDefinition Width="150" />
9: </Grid.ColumnDefinitions>
10:
11: <TextBlock x:Name="tbkTest" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Foreground="Black">HELLO WORLD!!</TextBlock>
12: <TextBox x:Name="tbxText" Grid.Column="0" Grid.Row="1"></TextBox>
13: <Button x:Name="btnFire" Grid.Column="1" Grid.Row="1" Content="Fire JavaScript Alert"></Button>
14: </Grid>
ASP.NET HTML:
1: <div style="height:100%;">
2: <div>
3: <asp:TextBox ID="tbxText" runat="server" />
4: <input type="button" value="Set Silverlight Text" onclick="setText();" />
5: </div>
6:
7: <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightJScriptInterop_App.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
8: </div>
My plan is to:
1) Change the Silverlight TextBlock's text to the text I type into the ASP.NET TextBox when the user clicks the HTML button.
2) Fire a JavaScript alert consisting of the text I type into my Silverlight TextBox when the user clicks the Silverlight "btnFire" button.
Call Silverlight Method from Javascript
Using Javascript to interact with Silverlight is easy to do. The first thing you need to do is expose objects of your Silverlight application so that JavaScript can interact with your managed code without requiring a round trip (PostBack) to the server.
1: Imports System.Windows.Browser
2:
3: <ScriptableType()> _
4: Partial Public Class Page
5: Inherits UserControl
6:
7: Public Sub New()
8: InitializeComponent()
9: End Sub
10:
11: Private Sub Page_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
12: 'register silverlight object on the page for javascript to use
13: HtmlPage.RegisterScriptableObject("myObject", Me)
14: End Sub
15:
16: <ScriptableMember()> _
17: Public Sub SetText(ByVal text As String)
18: Me.tbkTest.Text = text
19: End Sub
20:
21: Private Sub btnFire_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnFire.Click
22: HtmlPage.Window.Invoke("alertText", Me.tbxText.Text)
23: End Sub
24: End Class
Remember that the System.Windows.Browser namespace needs to be utilized so that Silverlight can interact with JavaScript. You'll notice on line 3 that we give our class a ScriptableType() attribute so that we can interact with it via JavaScript. Anything we wish to expose to JavaScript is also given the ScriptableMember attribute. On line 13 you'll notice that we register an object on the page for JavaScript to use to access our exposed Silverlight objects. So let's have some JavaScript pass in a string to our "SetText()" Silverlight method.
1: <script type="text/javascript" language="javascript">
2: function setText() {
3: var pluginObject = $find("<%=Xaml1.ClientID%>");
4: var plugin = pluginObject.get_element();
5: plugin.Content.myObject.SetText(getText());
6: }
7: function getText() {
8: var obj = document.getElementById("<%=tbxText.ClientID%>");
9: return obj.value;
10: }
11: function alertText(text) {
12: alert(text);
13: }
14: </script>
When the user clicks on my HTML button, I call the setText() JavaScript function. In line 3 we first get a handle to the Silverlight plugin. We then get the reference to the actual Silverlight plugin element within the page. Now we can access the exposed objects of our Silverlight application by using the object name we setup in the Page_Loaded event. Remember that we had the "SetText()" method that set the TextBlock's text. We call that method on line 5 and pass in the text entered via the TextBox on the page.
Call JavaScript Method from Silverlight
Calling a JavaScript method from Silverlight is easy. The HtmlPage.Window.Invoke method invokes a method on the current scriptable object and you can pass in one or more parameters if you wish. In our example we wanted to pass in a string from our Silverlight application to our JavaScript function and alert the string. First is the Silverlight managed code to invoke the JavaScript function and the second code snippet is the JavaScript function we invoked.
1: Private Sub btnFire_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnFire.Click
2: HtmlPage.Window.Invoke("alertText", Me.tbxText.Text)
3: End Sub
1: function alertText(text) {
2: alert(text);
3: }
I've posted the solution so you can see the code in its entirety and see it in action.
SilverlightJScriptInterop_Soln.zip (541.66 kb)