(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Interaction between Silverlight and HTML

(5 votes)
Boyan Mihaylov
>
Boyan Mihaylov
Joined Jul 18, 2008
Articles:   11
Comments:   12
More Articles
14 comments   /   posted on Jan 12, 2009
Categories:   General

This article is compatible with the latest version of Silverlight.

Introduction

Silverlight helps for creating Rich Internet Applications (RIAs). It runs in the context of the browser. There is an isolated area, called sandbox, which holds the Silverlight application. But why is it necessary to restrict the Silverlight applications in such a way? The answer of this question is pretty simple - because of the security. Running such applications locally is dangerous. They may damage your computer or your data. So, there is a necessity to somehow restrict them. Thus, a Silverlight application runs in the sandbox. In this way it has the following restrictions:

  • Silverlight does not have direct access to the file system. It only has access to the isolated storage area, where it can store data. This area is limited. Initially, it has size of 1MB per web site. It is possible to increase the size of this area after the user agreement.
  • There is no way to open dialogs like Open/Save. You can use the browser Open dialog (OpenFileDialog).
  • You have no direct access to the local resources like printers. You can use JavaScript to print your page (further in this article I will demonstrate how you can achieve this).

Well, Silverlight runs in the context of the browser. Thus, it runs locally and you cannot work synchronously with the server. What does it mean? Let’s have a look at the following diagram:

When the browser sends a request to the server, the server executes the application code synchronously method by method. When the execution of the code is over, the server sends a response to the browser.

In this way, Silverlight can only execute the code locally. The only way to contact the server is via asynchronous calls (like AJAX technology does). However, Silverlight can easily communicate with other similar technologies, which also run locally - Flash, JavaScript, VBScript, etc. Furthermore, these technologies can communicate with Silverlight, too. Well, I am not telling you that this is simple, but it is possible.

Accessing the HTML DOM

Not only that Silverlight can communicate with JavaScript, but it can access the HTML DOM (Document Object Model) very easily. What is the HTML DOM? HTML itself is a XML file with initially defined set of tags. The HTML DOM defines a standard way for accessing and manipulating HTML documents. It has a tree structure.

When you want to be able to access a specific element from this tree structure, you should specify an ID attribute. This ID should be unique in order to access the specified element. If there are two or more element with equal IDs, you will encounter a problem when you want to access some of them. If you want, mark a group of elements as identical; you should specify the class attribute to each of them.

In Silverlight you can interact directly with the HTML DOM. This can be done through the HtmlPage.Document object. The HtmlPage class permits access to, and manipulation of, the browser's Document Object Model. Through this class you can also access other browser features like browser information. This class is located in the System.Windows.Browser namespace.

HtmlDocument = HtmlPage.Document;

HtmlPage.Document returns an object of type HtmlDocument. With this object you can easily access the HTML DOM.

private void SendMessage(string message)
 {
      HtmlDocument doc = HtmlPage.Document;
      HtmlElement element = doc.GetElementById("message");
 
      if (element != null)
      {
        element.SetProperty("innerHTML", message);
      }
}

Here is the result. You can see the online demo.

The HtmlDocument class provides a great variety of methods and properties to manage the HTML document. Let’s have a look at some of them:

  • Body - Accesses the body of the document. As the body is a regular HTML element, you can change its attributes, children elements, etc.
  • Cookies - Gets or sets the cookie information for the current site. This is very helpful when you want to set a flag if an action is done. When you reload the page, the server can read this flag and perform some specific action.
  • QueryString - Gets the query string collection for the current site. In this way you can display different content based on a specified query string key, for example.
  • GetElementById(...) - Gets an element by its ID. This is the method that I used in the previous example. If you want to get a specific element, just set its ID and use this method instead of going through the whole collection of elements.
  • GetElementsByTagName(...) - Gets a collection of elements with an identical tag name. With this method you can perform an action over a group of elements (for example, links or SPANs).

The other important class is HtmlElement. Here are some of its interesting methods and properties:

  • Children - Gets all children elements of the current one. This property lets you go through the collection of all sub elements of a specific one.
  • CssClass - Gets or sets the class attribute of an element. You can very easily manipulate the styles of the elements.
  • SetAttribute(...) - Changes the value of an attribute of the current element. You can change its value, for example.
  • SetProperty(...) - Changes the value of a property of the element. What is the difference between this method and the previous one? Well, each element has properties (specified by the DOM). These properties are accessible through JavaScript or any other scriptable language, which runs in the browser. With Silverlight you can also access these properties with this method. Attributes are used in the HTML declaration. For each attribute there is a property.
  • SetStyleAttribute(...) - Changes a style attribute of the element. You can change its display mode, for example. (display = "none").

As you can see, Silverlight lets you access and modify the HTML DOM very easily.

Call JavaScript functions

Well, modifying the HTML DOM is very interesting and helpful. But what if I want to call a JavaScript function? For example, I have a JavaScript function, which performs a lot of visual actions. I do not want to use Silverlight to modify the HTML DOM, because I want to reuse this functionality. So, I need to find a way to interact with JavaScript.

For our convenience, Silverlight lets you call JavaScript functions. This process is very simple. You have to use the HtmlPage.Window object to invoke your JavaScript function. This object is of type HtmlWindow. It lets you interact with the browser windows. You can show alert or prompt boxes, you can attach or detach events, etc. One of its greatest functionalities is the Invoke() method, which allows us to call JavaScript functions. Here is the example:

Silverght:

private void Button_Click(object sender, RoutedEventArgs e)
{
      HtmlPage.Window.Invoke("showMessage", "Hello!");
}

JavaScript:

function showMessage(message) {
    alert(message);
}

Here is the result. You can see the online demo.

Accessing a Silverlight application from JavaScript

This process is straight forward. You need to accomplish the following things to let your Silverlight application be accessed from JavaScript.

  • In the constructor you should make call to the RegisterScriptableObject() method. It accepts two parameters:
    • A name, which you will use when you make calls to your application. You can call this method many times in order to register many classes.
    • An object, which will be called.
  • You can call only public methods in your Silverlight application. If you want a method to be accessed from JavaScript, you have to add the ScriptableMember attribute before the method declaration.

Finally, you can call your defined methods from JavaScript directly in this way:

var control = document.getElementById("SilverlightControlId");
control.Content.RegisteredObjectName.MethodName(parameters);

Here is an example:

Silverlight:

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
        HtmlPage.RegisterScriptableObject("Page", this);
    }
 
    [ScriptableMember]
    public void Start()
    {
        // do something
    }
 
    [ScriptableMember]
    public void Stop()
    {
        // do something
    }
}

JavaScript:

var slcontrol = document.getElementById("<%= slControl.ClientID %>");
 
function start() {
    if (slcontrol) {
        slcontrol.Content.Page.Start();
    }
}
 
function stop() {
    if (slcontrol) {
        slcontrol.Content.Page.Stop();
    }
}

Here is the result. You can see the online demo.

Don’t forget that you have to give your Silverlight control a proper ID in order to access it from JavaScript. You can do this by setting its ID attribute. If you use ASP.NET Silverlight tag, don’t forget that the control’s ID on the client browser can be obtained from the Silverlight control’s ClientID property.

<asp:Silverlight ID="mySlControl" ... />
 
<script type="text/javascript">
var control = document.getElementById("<%=mySlControl.ClientID %>");
</script>

If you need to have a greater interaction between Silverlight and JavaScript, you can register as many scriptable objects as you want.

Silverlight and Flash

Communication between Silverlight and Flash isone very interesting topic. As you cannot directly access a Flash content from your Silverlight application, you can process the communication through JavaScript. In my following articles I will demonstrate how you can achieve this.

Source Code

You can download the source code of each of the examples in the article.

References

  • http://www.w3schools.com/HTMLDOM/default.asp
  • http://silverlight.net/blogs/msnow/archive/2008/10/06/silverlight-tip-of-the-day-56-accessing-the-html-dom-from-silverlight.aspx
  • http://silverlight.net/blogs/msnow/archive/2008/07/08/tip-of-the-day-15-communicating-between-javascript-amp-silverlight.aspx

Subscribe

Comments

  • -_-

    RE: Interaction between Silverlight and HTML


    posted by Mike on Feb 26, 2009 02:08

    Got any Silverlight to Silvelright sample

  • -_-

    RE: Interaction between Silverlight and HTML


    posted by Memox on Feb 03, 2010 12:09

    Hallo

    Example don't work in IE8 but is OK in Opera 10.10 8-|

  • -_-

    RE: Interaction between Silverlight and HTML


    posted by Geoff on May 16, 2010 01:04
    Have been looking for such a concise description for months.  Thanks a lot
  • -_-

    RE: Interaction between Silverlight and HTML


    posted by Kingsley on Jun 10, 2010 17:15

    Brilliant Post thank you so  much! but there is an issue i cant seem to resolve:

    that is you cant use the HTML DOM to get and object reference to any controls placed in a webPartZone:

    like so:

    HtmlDocument doc = HtmlPage.Document;

    HtmlElement element3 = doc.GetElementById("SLRoomConsumerPart1");

    for a Html excerpt like this:

    <FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas>
    <P><</FONT></FONT></FONT><FONT color=#800000 size=2 face=Consolas><FONT 
    color=#800000 size=2 face=Consolas><FONT color=#800000 size=2 
    face=Consolas>tr</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>></P>
    <P></FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </P>
    <P></FONT></FONT><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas><</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>td</FONT></FONT></FONT><FONT size=2 face=Consolas><FONT 
    size=2 face=Consolas> </FONT></FONT><FONT color=#ff0000 size=2 
    face=Consolas><FONT color=#ff0000 size=2 face=Consolas><FONT color=#ff0000 
    size=2 face=Consolas>colspan</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>="3"></P>
    <P></FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </P>
    <P></FONT></FONT><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas><</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>asp</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>:</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>WebPartZone</FONT></FONT></FONT><FONT size=2 
    face=Consolas><FONT size=2 face=Consolas> </FONT></FONT><FONT color=#ff0000 
    size=2 face=Consolas><FONT color=#ff0000 size=2 face=Consolas><FONT 
    color=#ff0000 size=2 face=Consolas>ID</FONT></FONT></FONT><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT 
    color=#0000ff size=2 face=Consolas>="WebPartZone3"</FONT></FONT></FONT><FONT 
    size=2 face=Consolas><FONT size=2 face=Consolas> </FONT></FONT><FONT 
    color=#ff0000 size=2 face=Consolas><FONT color=#ff0000 size=2 
    face=Consolas><FONT color=#ff0000 size=2 
    face=Consolas>runat</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>="server"</FONT></FONT></FONT><FONT size=2 
    face=Consolas><FONT size=2 face=Consolas> </FONT></FONT><FONT color=#ff0000 
    size=2 face=Consolas><FONT color=#ff0000 size=2 face=Consolas><FONT 
    color=#ff0000 size=2 face=Consolas>Height</FONT></FONT></FONT><FONT 
    color=#0000ff size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 
    face=Consolas>="90%"</FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </FONT></FONT><FONT color=#ff0000 size=2 face=Consolas><FONT 
    color=#ff0000 size=2 face=Consolas><FONT color=#ff0000 size=2 
    face=Consolas>Width</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>="90%"></P>
    <P></FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </P>
    <P></FONT></FONT><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas><</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>ZoneTemplate</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>></P>
    <P></FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </P>
    <P></FONT></FONT><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas><</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>cc1</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>:</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>SLRoomConsumerPart</FONT></FONT></FONT><FONT size=2 
    face=Consolas><FONT size=2 face=Consolas> </FONT></FONT><FONT color=#ff0000 
    size=2 face=Consolas><FONT color=#ff0000 size=2 face=Consolas><FONT 
    color=#ff0000 size=2 face=Consolas>ID</FONT></FONT></FONT><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT 
    color=#0000ff size=2 
    face=Consolas>="SLRoomConsumerPart1"</FONT></FONT></FONT><FONT size=2 
    face=Consolas><FONT size=2 face=Consolas> </FONT></FONT><FONT color=#ff0000 
    size=2 face=Consolas><FONT color=#ff0000 size=2 face=Consolas><FONT 
    color=#ff0000 size=2 face=Consolas>runat</FONT></FONT></FONT><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT 
    color=#0000ff size=2 face=Consolas>="server"</FONT></FONT></FONT><FONT size=2 
    face=Consolas><FONT size=2 face=Consolas> </FONT></FONT><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT 
    color=#0000ff size=2 face=Consolas>/></P>
    <P></FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </P>
    <P></FONT></FONT><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas></</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>ZoneTemplate</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>></P>
    <P></FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </P>
    <P></FONT></FONT><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas></</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>asp</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>:</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>WebPartZone</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>></P>
    <P></FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </P>
    <P></FONT></FONT><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas></</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>td</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>></P>
    <P></FONT></FONT></FONT><FONT size=2 face=Consolas><FONT size=2 
    face=Consolas> </P>
    <P></FONT></FONT><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas><FONT color=#0000ff size=2 
    face=Consolas></</FONT></FONT></FONT><FONT color=#800000 size=2 
    face=Consolas><FONT color=#800000 size=2 face=Consolas><FONT color=#800000 
    size=2 face=Consolas>tr</FONT></FONT></FONT><FONT color=#0000ff size=2 
    face=Consolas><FONT color=#0000ff size=2 face=Consolas><FONT color=#0000ff 
    size=2 face=Consolas>></FONT></FONT></FONT></P>
  • -_-

    RE: Interaction between Silverlight and HTML


    posted by Kingsley on Jun 10, 2010 17:17

    sorry about the previous crappy formatting of the html

    here it is properly

    for html like this:

    <tr>

    <td colspan="3">

    <asp:WebPartZone ID="WebPartZone3" runat="server" Height="90%" Width="90%">

    <ZoneTemplate>

    <cc1:SLRoomConsumerPart ID="SLRoomConsumerPart1" runat="server" />

    </ZoneTemplate>

    </asp:WebPartZone>

    </td>

    </tr>


  • lnikolov

    RE: Interaction between Silverlight and HTML


    posted by lnikolov on Feb 28, 2011 17:03
    The article has been updated to the latest version of Silverlight and Visual Studio.
  • lkitrossky

    Re: Interaction between Silverlight and HTML


    posted by lkitrossky on Mar 26, 2012 22:52

    I have one such application, where JavaScript and Silverlight calling one another, which works on some machines on IE 8, but not on Chrome. It also works better in Win7 than in WinXP. An error originates in LicenseAcquirer object of Silverlight. Any ideas, what can help?

    Thanks, LK

  • TarikBagriyanik

    Re: Interaction between Silverlight and HTML


    posted by TarikBagriyanik on Sep 24, 2012 20:09

    here is my Turkish HTML-Silverlight Interactivity test page:

    http://tbagriyanik.xtreemhost.com/silverlight/

  • matmat32

    Re: Interaction between Silverlight and HTML


    posted by matmat32 on Oct 10, 2012 12:50

    Fantastic blog document relating to this subject,I have already been these days in your blog twice now.I recently wished to point out hello there along with indicate the thanks for the tips provided.

    how to make money
     
  • Michelle41

    Re: Interaction between Silverlight and HTML


    posted by Michelle41 on Oct 10, 2012 18:27

    Great blog post with this subject matter,I have been not too long ago within your weblog twice now.I simply desired to declare hello there plus show the thanks for the details provided.

    boxes for moving
     
  • Michelle41

    Re: Interaction between Silverlight and HTML


    posted by Michelle41 on Oct 10, 2012 23:09

    Terrific blog document in regards to this issue,I've been lately with your blog a few times today.I just desired to state hi plus demonstrate our thanks for the information supplied.

    san diego packing supplies
     
  • milkha32

    Re: Interaction between Silverlight and HTML


    posted by milkha32 on Oct 12, 2012 10:53

    Excellent weblog content concerning this issue,I have already been recently with your blog site one or two times currently.I merely wanted to express howdy and show my personal thanks for the information given.

    Photo Scanning
     
  • Laboni50

    Re: Interaction between Silverlight and HTML


    posted by Laboni50 on Dec 01, 2012 18:37
    where can i buy steroids
    Terrific blog content relating to this theme,I am of late in your web site a few times at this moment.I merely wanted to claim hello there plus exhibit my own thanks for the details given.
  • jjuree32

    Re: Interaction between Silverlight and HTML


    posted by jjuree32 on Feb 21, 2013 10:38

    Great website document about it subject matter,I have been previously not too long ago as part of your weblog a couple of times at this moment.I merely want to declare hello plus show the thanks for the information provided.

    Tenant Improvement San Diego
     

Add Comment

Login to comment:
  *      *