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.