HTML Bridge in Silverlight


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.

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

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);


Author: Nishant Rana

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

6 thoughts on “HTML Bridge in Silverlight”

  1. 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!


  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


  3. 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.


Please share your thoughts

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.