HTML Bridge in Silverlight

Hi,

Just sharing simple example.

Suppose we have the following HTML page having a Silverlight control (blue background) in it.

When we click on “Pass to Silverlight” button we want to pass the values specified in the textboxes in our HTML page to the text boxes in the Silverlight control.

To do this we can create a function inside our Silverlight page (MainPage.xaml.cs) and decorate it with ScriptableMember attribute and also use RegisterScriptableObject method.

 [System.Windows.Browser.ScriptableMember]
 public void SetLabelFromHtml(string firstName, string lastName)
 {
 txtFirstName.Text = firstName;
 txtLastName.Text = lastName;
 }
 
public MainPage()</pre>
 {
 InitializeComponent();
 // RegisterScriptableObject Method
 // Registers a managed object for scriptable access by JavaScript code
 System.Windows.Browser.HtmlPage.RegisterScriptableObject("myMethod", this);
 }
<pre> 

To call this function from our html page, we can make use of following JavaScript.

function btnPass_onclick() {

// id of the silverlight control in object tag
var silverlightPlugin = document.getElementById("mySilverLightControl");
// get the values from the text boxes in the html page
var firstName = document.getElementById("txtFirstName").value;
var lastName = document.getElementById("txtLastName").value;

silverlightPlugin.content.myMethod.SetLabelFromHtml(firstName, lastName);

}

Similarly if we want to pass the values for the text boxes from Silverlight page to our HTML page, we need to do the following.

First create a JavaScript function in out HTML page

function SetValueFromSilverlight(firstName, lastName) {

document.getElementById("txtFirstName").value = firstName;
 document.getElementById("txtLastName").value = lastName;

}

To call this JavaScript function from our Silverlight page we can make use of following line of code

HtmlPage.Window.CreateInstance("SetValueFromSilverlight",new string[] { txtFirstName.Text,txtLastName.Text});

Apart from calling the JavaScript function inside our html, we can directly access the fields through DOM and set their values in Silverlight

HtmlDocument document = HtmlPage.Document;

// get the text boxes
HtmlElement firstName = document.GetElementById("txtFirstName");
HtmlElement lastName = document.GetElementById("txtLastName");

// get the value in html text boxes
MessageBox.Show("First Name is " + firstName.GetProperty("value").ToString());
MessageBox.Show("Last Name is " + lastName.GetProperty("value").ToString());

// set the html text boxes
firstName.SetProperty("value", txtFirstName.Text);
lastName.SetProperty("value", txtLastName.Text);

Bye.


Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

6 thoughts on “HTML Bridge in Silverlight”

  1. Its like you read my thoughts! You seem to know a lot about this, like you wrote the book in it or something.
    I feel that you simply could do with a few p.c. to power the message
    house a little bit, but instead of that, that is magnificent blog.
    A fantastic read. I will certainly be back.

    Like

  2. Either way, you’ve spent upwards $110,000 for the privilege
    so you might hope for the first option. Weight
    loss means decreasing of not only body weight but your body mass as a whole.
    It is really not uncommon when you have endured a a bankruptcy proceeding to guarantee to by no means employ credit history once
    again.

    Like

  3. magnificent publish, very informative. I ponder why the opposite experts of this sector don’t understand this.
    You must continue your writing. I’m sure, you have a great readers’ base already!

    Like

Share your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s