Call JavaScript functions from silverlight
Silverlight is a great technology to build highly presentable business centric applications. One of the coolest feature of silverlight is it easy integration and communication with HTML and JavaScript. Silverlight allow us to call JavaScript functions of our embedded silverlight control web page. It also allows you to call basic JavaScript function like alert, confirm and prompt directly just by adding to a reference to System.Windows.Browser namespace.
Let us directly start with an example. In below code I have declared a textbox and several buttons to demonstrate how to call basic JavaScript function in silver light.
<TextBox x:Name="txtChangedData" Height="30" Width="150" Grid.Row="0" Grid.ColumnSpan="2" Text="This Text Will change"></TextBox>
<Button x:Name="btnAlert" Click="btnAlert_Click" Grid.Row="1" Grid.Column="0" Width="100" Height="30" Content="Change Data"></Button>
<Button x:Name="btnprompt" Click="btnprompt_Click" Grid.Row="1" Grid.Column="1" Width="100" Height="30" Content="Prompt Box"></Button>
<Button x:Name="btnConfirm" Click="btnConfirm_Click" Grid.Row="1" Grid.Column="2" Width="100" Height="30" Content="Confirm Box"></Button>
Code behind functions for each of these buttons is as shown below. btnAlert_Click changes the text box and invoke the JavaScript alert function to alert the user. btnprompt_Click prompt the user for input and then displays the user input on textbox. btnConfirm_Click shows the confirm dialog box to the user and the user response is then displayed on textbox.
private void btnAlert_Click(object sender, RoutedEventArgs e)
{
txtChangedData.Text = "Alert Box Displayed";
HtmlPage.Window.Alert("Alert Box");
}
private void btnprompt_Click(object sender, RoutedEventArgs e)
{
string result = HtmlPage.Window.Prompt("Prompt Box");
txtChangedData.Text = result+" Was Entered.";
}
private void btnConfirm_Click(object sender, RoutedEventArgs e)
{
bool result = HtmlPage.Window.Confirm("Confirm Box");
txtChangedData.Text ="Your Confirmation:"+ result.ToString();
}
Let us see the output of these buttons in action. On click of prompt box button, browser prompts me for an input as shown on left side of below image. On submitting input data and clicking ok, textbox shows the data entered on the prompt box.
On click Confirm box button, browser asks for a confirmation as shown on left side of below image. Depending upon my response (OK or cancel), true (For ok) or false (For cancel) would be displayed in textbox.
Now let us see how to call the JavaScript functions declared on the page where I have embedded my silverlight control. I have declared three JavaScript function in my aspx code.
function alertuser(text) {
alert(text);
}
function ChangeText() {
var h1Text = $('h1').html();
$('h1').html('Header has changed');
return h1Text;
}
function MultiParameters(caption, message) {
alert(message, caption);
}
I have declared two buttons on the silverlight side to call this JavaScript functions
<Button x:Name="btnAlertuser" Click="btnAlertuser_Click" Grid.Row="1" Grid.Column="3" Width="100" Height="30" Content="Alert Box"></Button>
<Button x:Name="btnChangedData" Click="btnChangedData_Click" Grid.Row="1" Grid.Column="4" Width="100" Height="30" Content="Change Data"></Button>
Code behind for this two buttons are shown below. In first button, you can see I have used the invoke function to call javascript function. HtmlPage.Window.Invoke is the method used to call a JavaScript function followed by list of optional parameters. In below code, First parameter is the name of JavaScript function followed by the list of optional parameters separated by commas. Alertuser function is invoked with one parameter while MultiParameters function is invoked with two parameters "Welcome To my blogs" and "Sarin". Second button invoke the ChangeText function to display the original header text in textbox after updating the header text with “'Header has changed”
private void btnAlertuser_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("alertuser", new string[]