Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Call JavaScript functions from silverlight
Posted By Sarin on Feb 21, 2013     RSS Feeds     Latest Hinduism news
3774 Views

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[]  "Hi There" );
            HtmlPage.Window.Invoke("MultiParameters", "Welcome To my blogs", "Sarin");
        }
        private void btnChangedData_Click(object sender, RoutedEventArgs e)
         {
            string text = HtmlPage.Window.Invoke("ChangeText", null) as string;
            txtChangedData.Text = text;
        }
  
Return type of a JavaScript function is an object. So, I have casted the result of JavaScript function into a string before displaying it on the textbox.
  
Output of first button is as shown below. First the alert box of alertuser function is displayed as shown in left side of below image and then the alert box of MultiParameters function is displayed as shown in right side of below image


Output of second button is as shown below. As you can see below, my header text is first changed and then the original header text is displayed in textbox.
  

Conclusion:
Silverlight offers us a great amount of flexibility in implementing our business centric applications with ease and perfection. Using the power of JQuery with silverlight practically help us in building any complex business applications comfortably and effortlessly. In next article, we will see the reverse i.e. how to call silver light code form JavaScript.

  
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
Changing CSS Properties of HTML element using JQuery
Jquery features, Advantages and disadvantages
Get Set Value of any HTML element using jquery-Val function
Select Parent, Child, sibling,descendants HTML element using jquery
Call JavaScript functions from silverlight
Working with forms-Jquery form selector
Creating your first application in JQuery
JQuery FAQ and Jquery Effects
Select Groups of similar elements using position selector
Commonly used string Functions

Post Comment