| The following
demonstrates how to call JavaScript from Silverlight managed code, and
Silverlight managed code
from
JavaScript. Note this is using a beta
version of Silverlight which can (and probably will) change in the
future.
The main points are...
In the JavaScript code:
- Use document.getElementById
to get the Silverlight control.
- Then
call Content.<registered name>.<method
name>. For example, control.Content.Page.UpdateText(text).
- Nothing
special for the functions that are called from Silverlight.
In the
Silverlight code:
- Mark
the class with the ScriptableType attribute.
- Call
HtmlPage.RegisterScriptableObject in the
constructor.
- Mark
any methods that will be called from JavaScript with ScriptableMember.
- Use HtmlPage.Window.Invoke
to call JavaScript functions.
Here are more
detailed steps to call JavaScript and Silverlight code.
Call Silverlight method
from
JavaScript
1) Add XAML elements to the Silverlight control. This displays
the string passed in from JavaScript.
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<TextBox x:Name="Result" HorizontalAlignment="Stretch" Width="200" Height="24" />
</StackPanel>
2) Make the
object accessible to JavaScript by specifying the ScriptableType
attribute and calling RegisterScriptableObject.
[ScriptableType]
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
// make this object a scriptable object
HtmlPage.RegisterScriptableObject("Page", this);
}
3) Add the
method that is
called from JavaScript and specify the ScriptableMember
attribute.
// called from javascript
[ScriptableMember]
public void UpdateText(string result)
{
this.Result.Text = result;
}
4) Add HTML elements to the web page.
<!-- html area, click on the link to send data to
the Silverlight control -->
<input id="result" type="text" size="30" />
<a href="javascript:updateSilverlight();">Update Silverlight</a>
5) Update the ID for the Silverlight control. This is not necessary,
but you might want to use something besides the default XAML1.
<asp:Silverlight ID="silverlightControl" ... />
6)
Add the JavaScript function that
calls the Silverlight managed code method.
function updateSilverlight()
{
// get data from html control
var text = document.getElementById("result").value;
// call silverlight control
method
var control = document.getElementById("silverlightControl");
control.Content.Page.UpdateText(text);
}
Now you can run
the application. Enter some text in the HTML textbox
and press the Update Silverlight link. The
JavaScript function
updateSilverlight is executed which calls the
managed code UpdateText
method.
Call JavaScript function from Silverlight
1)
Add the
JavaScript function that will be called.
// called from silverlight
function updateText(text)
{
document.getElementById("result").value = text;
}
2) Add a button element
to the XAML.
<StackPanel VerticalAlignment="Top" Orientation="Horizontal">
<TextBox x:Name="Result" HorizontalAlignment="Stretch" Width="200" Height="24" />
<Button x:Name="CallJavaScript" Content="Update JavaScript"
Width="130" Height="24" Margin="10,0,0,0" Click="CallJavaScript_Click" />
</StackPanel>
3) Implement the
click handler in the code-behind file.
private void CallJavaScript_Click(object sender, RoutedEventArgs e)
{
// call the javascript function
HtmlPage.Window.Invoke("updateText", this.Result.Text);
}
Now run the
application again. Enter some text in the Silverlight
textbox and click the Update JavaScript button. The
click handler is
executed which uses the HtmlPage.Window.Inovke
method to execute the
JavaScript updateText function.
|