Adding a Silverlight Control to an existing ASP.NET Website

I’ve only been working with Silverlight for a few months now and I’ve came to the conclusion that either my Google-fu is lacking or there isn’t a great deal of lower level information out there on how to get started. Personally I’m going with the latter because in my experience if you follow some of these posts online you’ll find yourself creating a sample Silverlight project, which is hosted within its own development application. But how do you actually add the control to your existing site?

Hopefully this will shed some light on the subject.

It turns out that this task is very simple and can be completed in a few steps. These steps include: creating the control (assuming this has been done already), adding the Silverlight application package (.xap) to your website, and adding the Silverlight Object element to a page.

Given that you have already created your Silverlight control (you did didn’t you?), we will move on to step 2: Adding the application package to some location on your site.

• Within your website add a directory and call it ClientBin (you actually can name this anything you like, but this is the standard).
• Navigate to your Silverlight project folder on your computer, open the Bin directory, open the Debug directory, and copy the .xap file.
• Now navigate to your website and paste this file into the ClientBin directory. You’re solution explorer in Visual Studio should look something like this:

And last but not least, we will place your new Silverlight control on your site. To do this, we need only a little HTML, so copy the code below:

<div id="silverlightControlHost" style="height:100%">

    <object width="100%" height="100%" type="application/x-silverlight-2" data="data:application/x-silverlight-2," >

        <param name="source" value="ClientBin/Silverlight.xap"/>

        <param name="background" value="white" />

        <param name="minRuntimeVersion" value="3.0.40624.0" />

        <param name="autoUpgrade" value="true" />

        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none;">

            <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style: none"/>

        </a>

    </object>

    <iframe id="_sl_historyFrame" style='visibility:hidden;height:0px;width:0px;border:0px'></iframe>

</div>

Now open your website, find the location in the site where you want to place it, and paste the code in. Also, unless you named your Silverlight project Silverlight, rename the source parameter to match your filename.

And that’s it!

Before closing, I thought it might help to explain the different parts of the code, so here goes.

• The div is what contains your control. You don’t need the div, but it has become somewhat of a standard for me.
• The Object tag is what is used within the HTML to host the application. Alternatively you can use JavaScript to replace the object tag, but given that most browsers now recognize these tags, it generally is not necessary. Also, it is generally a good idea to set the Height and Width as specified in the above code to ensure that your control is completely displayed.
• source – the location of your application package (usually within a ClientBin directory)
• background – the color of the object background.
• minRuntimeVersion – the minimum version of Silverlight required to be on the persons computer who is accessing the site. For most applications the version above should be more than enough. You may also want to use a lower version if you know that people accessing your site mostly have a lower version. And a higher version may be required if your application requires it.
• autoUpgrade – if the user does not have the minimum required version, this parameter is used to specify if you want it to prompt the user to install the upgrade necessary.
• The HTML link and image tags are used to provide the user with information about installing Silverlight if necessary.
• The iframe is used for cross-browser compatibility. According to Microsoft, the iframe is used to ensure that the Safari browser does not cache the page. Safari caching prevents the Silverlight plug-in from reloading when the user navigates back to a previously-visited Silverlight page.

So again, that’s essentially it! And again, I am new to this, so if I misrepresented something, please feel free to point it out. I hope this has been helpful.

The post Adding a Silverlight Control to an existing ASP.NET Website appeared first on MetroStar Systems Blog.