Calling silverlight methods from javascript
Few weeks ago, I posted an article on how to call JavaScript functions from silver light. I never knew that there is a way of calling silverlight code from JavaScript but while composing my preceding article, thought came to my mind that since silverlight code resides on browser (Client side), there must be a way of calling silverlight code from JavaScript. I searched on Google and after some minor tussles, was able to create a small demo on calling silverlight code from JavaScript.
Demo
In this demo, I would be doing both, calling silverlight code from JavaScript and calling JavaScript code form silverlight.
1) First, to make my silverlight function callable from JavaScript, I decorate my function with the [ScriptableMember] attribute.
[ScriptableMember]
public void CallJS(string input)
{
//txtChangedData.Text = input;
HtmlPage.Window.Alert(input);
}
Above function will simply invoke the browser alert dialog box to display the input message to the user.
2) Next, I register the above function on the start event of the application (App.Xaml) so as to enable scriptable access to my JavaScript code
private void Application_Startup(object sender, StartupEventArgs e)
{
HtmlPage.RegisterScriptableObject("JS", new MainPage());
this.RootVisual = new MainPage();
}
Page is registered as a key value pair. Key can be any name which will be used in the JavaScript code. Value will be the instance of the page having your scriptable method.
3) Next, just for demonstration purpose, I declared a textbox (to display status) and a button (to invoke function)
XAML
<TextBox x:Name="txtChangedData" Height="30" Width="150" Grid.Row="0" Grid.Column="0" Text="This Text Will change"></TextBox>
<Button x:Name="btnChange" Click="btnChange_Click" Grid.Row="1" Grid.Column="0" Width="100" Height="30" Content="Change Data"></Button>
Code Behind
private void btnChange_Click(object sender, RoutedEventArgs e)
{
txtChangedData.Text = "silverlight invoked from javascript";
HtmlPage.Window.Invoke("ChangeText"); // calling javascript function
}
Javascript function
function ChangeText() {
var slObject = document.getElementById("silverlightXAP");
slObject.Content.JS.CallJS($('h3').html());
$('h3').html('This header has changed');
}
Please note that above JavaScript function which is the key in calling silverlight function. In my code,silverlight object is declared as
<object id="silverlightXAP" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
4) To call silverlight function, first we create a variable to have a reference to my silverlight object. Next, I invoke the content method which will have reference to all my scriptable classes. Next, I will use key (JS) to have a reference to my page having scriptable methods, then like you invoke any static method, I invoke the function defined in that page. Just to let you know, you can also add any normal JQuery or JavaScript code before or after the silverlight call like I have declared the jquery code to change the HTML header.
In short, two steps in invoking the silverlight function from JavaScript is
document.getElementById to reference silverlight control.
Content.<registered name>.<method name>. For example, control.Content.Page.ChangeText (text).
In the Silverlight code:
Mark function with [ScriptableMember] attribute and class with ScriptableType attribute.
Call HtmlPage.RegisterScriptableObject in constructor or application_start event.
Output:
On running the code and clicking the button, below is the output
As you see above, first from silver light I invoked JavaScript function, then from JavaScript I invoke silver light function and then again from silverlight, I called JavaScript alert dialog box.
Conclusion:
This way of calling silverlight function from JavaScript and vice versa gives us more flexibility and easy accessibility to both types of code (Client and server), thus making coding convenient, efficient and highly streamlined
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
How Silverlight works internally
Silverlight New features & system requirement
JQuery FAQ and Jquery Effects
What is Silverlight,its features and how it works
Jquery features, Advantages and disadvantages
How AJAX Works, advantages and disadvantages
Calling silverlight methods from javascript
Working with forms-Jquery form selector
Working with canvas in silverlight
Post Comment