How to host a Silverlight Application using JavaScript?

We all know the process to embed a Silverlight application inside a Webpage using div and object tag. When we create a new Silverlight application project, those tags automatically generates by the IDE inside the html and aspx pages.

In many cases we need to dynamically add the Silverlight application inside a webpage. In this post, we will learn the process to host it using JavaScript. Looks interesting? Read to know more.

About the API
Every Silverlight web project consists of a JavaScript helper file called "Silverlight.js", that you can reference in your HTML or ASPX pages. You can call the createObject and createObjectEx functions defined in this file to host your Silverlight plug-in inside a Web page.

Those functions accept configuration details as input parameters and generate equivalent HTML object elements. Let's start describing more about this with a simple example to help you to understand it better.

Embedding Silverlight Application using <object /> Tag
By default when you create a Silverlight project, it creates a Web hosting project for you too. In that project you will find one html file and one aspx file where we have the following code to host the Silverlight application:

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2,"
                type="application/x-silverlight-2"
                width="100%" height="100%">
            <param name="source" value="ClientBin/SilverlightApplication1.xap" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.60310.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0"
                style="text-decoration: none">

...
...

The <object /> tag creates the object of the Silverlight plugin and embeds your application inside it. You can add proper param tags inside it to set recommended parameters for your application.

Embedding Silverlight Application using JavaScript
Here in this point we will learn the way to create this Silverlight plugin dynamically using JavaScript and host your application inside it. Here is the complete code that you can use to host the XAP inside the page dynamically:

    <div id="silverlightControlHost">
        <script type="text/javascript">
            Silverlight.createObject(
                "ClientBin/SilverlightApplication1.xap",  // source
                silverlightControlHost,  // parent element
                "slPlugin",  // id for generated object element
                {
                    width: "100%", height: "100%", background: "white",
                    version: "4.0.60310.0"
                },

                { onError: onSilverlightError },
                "context"    // context helper for onLoad handler.
            );
        </script>
    </div>

The createObject() method takes XAP file path as source, the second parameter takes the parent control name which is hosting the Silverlight plug-in, the third parameter takes the generated object element ID, the fourth parameter specifies an array of property values, the fifth parameter specifies an array of event handlers, the sixth parameter specifies a string that contains name and value pairs as params separated by commas and the last parameter specifies a value that you can use to uniquely identify the generated plug-in instance in an OnLoad event handler.

Read more: Kunal's Blog
QR:

Posted via email from Jasper-net