Reader Level:
Articles

Working With JavaScript in Silverlight 4.0

By Dhananjay Kumar on Aug 05, 2011
In this post I will show you calling of Javascript function from Silverlight. It is very simple and straight forward.
  • 0
  • 0
  • 6095


In this article I will show you calling of JavaScript function from Silverlight. It is very simple and straight forward.

Assume you have a JavaScript function on an aspx page as below:

SilverlightTestPage.aspx

<script type="text/javascript" language="javascript" >
         function callmeonPageLoad() {
             alert("Hello Javascript from Silvertlight");
         }  
</script>



If you want to call this JavaScript function on a page load of the Silverlight page then you will have to add the namespace:

JavaScript in Silverlight 4.0

And in the constructor of the page call it as below:

MainPage.xaml.cs

using System.Windows.Controls;
using System.Windows.Browser;
 
namespace SilverlightApplication7
{
   [ScriptableType]
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            HtmlPage.RegisterScriptableObject("MainPage"this);
            HtmlPage.Window.Invoke("callmeonPageLoad");          
            
        }      
    }
}


If you notice in above code you will find that MainPage is attributed with a ScriptableType.

JavaScript in Silverlight 4.0

On running Silverlight application you will be getting output as below:

JavaScript in Silverlight 4.0

On your XAML, if you have a textbox like below:

JavaScript in Silverlight 4.0

If you want to access and change the value of the textbox txtName in JavaScript then it too is very simple. Create a JavaScript function as below:

SilverlightTestPage.aspx

 <script type="text/javascript">
        function UpdatingTextBoxValue(sender) 
        {
           
            var txtBlockFromSL = sender.FindName("txtName");
            alert(txtBlockFromSL.text);
            txtBlockFromSL.Text = "Salsa ";
            alert(txtBlockFromSL.Text);
           
           
        }    
</script>


txtName is name of the Silverlight text box.

And on the page load on aspx page add a param:

JavaScript in Silverlight 4.0

If you have a function in managed code and you want to access that from JavaScript. Assume you have a function as below:

MainPage.xaml.cs

  [ScriptableMember]
       public void SilverLightFunction(string txtToUPdate)
        {
            txtName.Text = txtToUPdate;
        }

You can call this function from JavaScript as below,

 <script type="text/javascript">
        function UpdatingTextBoxValue(sender) 
        {          
          
           
            var host = sender.GetHost();
            host.content.MainPage.SilverLightFunction("Dhananjay");
           
           
        }    
</script>


This was all about various ways to work with Silverlight and JavaScript. I hope this article was useful. Thanks for reading.
 

Dhananjay Kumar

Dhananjay kumar is an independent trainer, a consultant and a programmer from India. He has mentored more than 1000 professionals and known for his unique way of teaching. He has been part of the multiple projects for bi... Read more

Personal Blog: http://debugmode.net/
COMMENT USING