Build: Interaction between JavaScript and Silverlight 2


As many questions are usually asked regarding how to interact between Silverlight and JavaScript I am going to spend some lines showing an example so you can keep it as a reference. The sample below works with Silverlight 2 and is based on the Beta 2 that we are dogfooding at Microsoft at the time of this post, I haven’t seen any change on this area on the breaking changes document therefore it seems that the syntax will remain the same.


One of the most interesting namespaces that we have in Silverlight 2 is the System.Windows.Browser, as it allows us to interact with the HTMLPage object that provides access to the current web page that is hosting our plug-in. This class allows us to interact directly with the page, for example we can force navigation:


// We format the destination using a querystring


string Destination = string.Format(@”SecondPage.aspx?MyVar={0}”,txtMyContent.Text);


 


// Sets the new URI with a query string entry


Uri SourceUri = new Uri(HtmlPage.Document.DocumentUri, Destination);


 


// Navigates to the next page


HtmlPage.Window.Navigate(SourceUri);


As you can see we can interact with the query string as well, indeed, we can read the current one using the following command:


HtmlPage.Document.QueryString;


Not only the navigation is included, also we can post forms to the server using the same class. Beyond this, one of the features that I really like is the ability to call javaScript functions from my managed code; you can use the Invoke method for this:


HtmlPage.Window.Invoke(“ExecuteAnimation”, txtParams.Text);


To execute the following JavaScript method:
 


function ExecuteAnimation(params)


{
   // Do something useful
}


Now, to go to the other direction, we can use get a reference of our XAML component using the name of it and then call a published method:


var ctrl = $get(“Xaml1”);


ctrl.Content.navObj.SendMessage(“Hello”);


We will need to decorate our method with the ScriptableMember attribute in order to be published to the JavaScript world as follows:


public Page()


{


  InitializeComponent();



  HtmlPage.RegisterScriptableObject(“navObj”, this);


} 


[ScriptableMember()]


public void SendMessage(string state)


{


   // Do something useful


}


In future entries we are going to dig deeper into how this interaction works and we will explore some best practices.

Comments (7)

  1. SASilver says:

    This code above works partly. It changes the url but doesn’t actually switch the page.

    I need to go from Page1.xaml to Page2.xaml.

    Wrote the above code on a button click in page1.xaml. The url gets changed to Page2.xaml but i am unable to view the page.

    Any views ?

  2. saalvare says:

    I have tried the code again and it works. Are you using Beta 2?

    using System.Windows.Browser;

    string Destination = @"AnotherPage.aspx";

    Uri SourceUri = new Uri(HtmlPage.Document.DocumentUri, Destination);

    HtmlPage.Window.Navigate(SourceUri);

  3. For the last sample, do you forget to put

    HtmlPage.RegisterScriptableObject("navObj", this);

    after Initialize Component?

    like this….

    public Page()

    {

     InitializeComponent();

     HtmlPage.RegisterScriptableObject("navObj", this);

    }

  4. saalvare says:

    Yes, you are right, I have updated the entry. (sometimes I assume too much 🙂 )

    Also, a new article about it has been published here:

    http://blogs.msdn.com/salvapatuel/archive/2008/10/26/build-sharing-types-and-instances-between-silverlight-and-javascript.aspx

  5. Omar Vasquez says:

    Good article, I test two forms and work!!

  6. sameerfair says:

    I cant thank you more. I have not words really. Have been stuck with Bing Maps Silverlight Control Extended Mode for ages to get access from javascript, and that HtmlPage.RegisterScriptableObject did the trick.

    Thanks a millllllllllion