14.13. HTML Integration

Silverlight has some great functionality that allows you to interact with the web page through something called the HTML bridge. The HTML bridge allows you to modify DOM elements and call JavaScript functions from within your Silverlight application. The reverse is also possible, allowing you to call Silverlight functions from within JavaScript. Note that Silverlight utilizes parts of the DLR (refer to Chapter 3) to perform some of this functionality (Silverlight was one of the first applications to benefit from the DLR).

14.13.1. Calling a JavaScript Function from Silverlight

Select the Chapter14.HelloSilverlight.Web project:

  1. Open ~Chapter14.HelloSilverlightTestPage.aspx.

  2. Add the following code within the page's <head> tag to show an alert box with the message parameter you will shortly pass in:

    <script type="text/javascript">

function ShowMessage(Message) {
    alert(Message);
}

</script>

  3. Open ~/MainMenu.xaml.cs.

  4. In the MainMenu_Loaded() method, add the following event handler to the cmdCallJS button:

    this.cmdCallJS.Click += new RoutedEventHandler(cmdCallJS_Click);

  5. Now add the following code:

    void cmdCallJS_Click(object sender, RoutedEventArgs e)
{
    System.Windows.Browser.HtmlPage.Window.Invoke(
      "ShowMessage", "This function was called from Silverlight");
}

  6. Press F5 to run your application, and click the Call JS button.

You should receive a "This function was called from Silverlight" message.

14.13.2. Changing DOM Element Values from Silverlight

You can manipulate any aspect of the DOM from Silverlight. To demonstrate this feature, add a text box with the ID txtHelloFromSilverlight to Chapter14.HelloSilverlightTestPage.aspx, and utilize the following code:

System.Windows.Browser.HtmlPage.Document
.GetElementById("txtHelloFromSilverlight")
.SetProperty("value", "Hello from Silverlight");

14.13.3. Calling a Silverlight Function from JavaScript

It is also possible to call Silverlight functions from JavaScript. Because this has some security risks, you have to tell Silverlight you want to expose functions to JavaScript:

  1. Add the following function to ~/MainMenu.xaml.cs, which you will shortly expose:

    public string CallMeFromJS()
        {
            return "Silverlight function called from JS";
        }

  2. Add the following attribute to the CallMeFromJS() method:

    [System.Windows.Browser.ScriptableMember()]

Your function should look like this:

[System.Windows.Browser.ScriptableMember()]
public string CallMeFromJS()
{
    return "Silverlight function called from JS";
}

NOTE

You can also add the [System.Windows.Browser.ScriptableType] attribute to the whole class to make all public methods accessible via JavaScript. Be careful with this, though, because it can have security implications.

Before you can call this function, you need to register the function for JavaScript's use:

  1. Add the following code at the end of the Application_Startup event in ~App.xaml.cs.

    //Set up client side access to function within Main Menu
System.Windows.Browser.HtmlPage.RegisterScriptableObject("MainMenu", new MainMenu());

  2. Add the following code inside the <head> tag in Chapter14.HelloSilverlightTestPage.aspx to call the method when the Silverlight plug-in is loaded:

    <script type="text/javascript">
function Silverlight_PluginLoaded(sender)
{
    silverlightControl = document.getElementById("silverlightObject");
    alert(silverlightControl.Content.MainMenu.CallMeFromJS());
}
</script>

  3. Add an id property to the Silverlight <object> tag:

    id="silverlightObject"

  4. Add a new parameter to tell the Silverlight plug-in the JavaScript function to call when it is loaded:

    <param name="onLoad" value="Silverlight_PluginLoaded" />

  5. Press F5 to run your application; you should see an alert box pop up with the text "Silverlight function called from JS."

Unless you want an alert box popping up throughout the rest of this chapter (which would be pretty irritating), it is probably a good idea to remove the onLoad param from the Silverlight control now.

Silverlight has extensive functionality for interacting with the web page. For more information, refer to Mike Taulty's excellent blog at http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2008/10/15/10836.aspx.

14.13.4. Passing Parameters into Silverlight

There are a number of different methods for passing parameters into Silverlight:

  • Query string

  • InitParams property

  • JavaScript function calls (as explained previously)

14.13.5. InitParams

The easiest way to pass parameters into a Silverlight application is with the InitParams property on the Silverlight control. Values passed in using this method need to be represented in the format Name=Value and separated by commas. For example:

Name=Alex,Age=28,Country=Australia

To use the InitParams property, just add params to the <object> tag like so:

<param name="InitParams" value="name=alex,sex=male" />

Input values can then be retrieved by iterating through the InitParams keys collection in App.xaml.cs:

//Initialization parameters.
foreach (String key in e.InitParams.Keys)
{
    string strKey = key;
    string strValue=e.InitParams[key];
}

14.13.6. Query String

Another method of passing parameters to a Silverlight is with the query string. The following code shows you how to iterate through all the query string values:

//URL Params
foreach (String key in System.Windows.Browser.HtmlPage.Document.QueryString.Keys)
{
    string KeyName = key;
    string strValue=System.Windows.Browser.HtmlPage.Document.QueryString[key];
}

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.237.123