Add Silverlight in Web page .aspx

I just had my training about Silverlight, and one of the few important things i have learned and want to share it with you all is to how to add/integrate your silverlight application in the web page.

You can embed the Silverlight plug-in in your Web page in two ways:

● Using the HTML object element.
● Using JavaScript, Silverlight.js helper file.

I never try to used JavaScript but i found a very simple way on how to do it. See How to: Add Silverlight to a Web Page by Using JavaScript. For more information about Silverlight.js, see Silverlight.js Reference. So we have to focus more on HTML object element.


The HTML object element is the simplest way to embed the Silverlight plug-in, and is the recommended way. This is the default approach that is used by Visual Studio when you create a new Silverlight-based application and choose to host it in a dynamically generated HTML page.

You can use the object element to integrate Silverlight with JavaScript code in your Web page. However, JavaScript is not required to embed the control. This is useful if JavaScript is disabled on the client or prohibited on the server.

Question is where to find object element that being generated. You can find those in your Testpage both in .aspx and .html



In silverlight 2.0 Testpage.aspx has a different code, it never uses object but still you can make used of those, either way. Code looks like this.

 <asp:ScriptManager runat="server" ID="ScriptManager" />

    <asp:Silverlight runat="server" ID="silverlightLayout" InstallationMode="Inline"

Version="1.1" Source="MVC_silverlight.xap" EnableHtmlAccess="true" Windowless="true"

Width="844" Height="472" PluginBackColor="Transparent" />

And the object element im preferring too is this:

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

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

    <param name="onError" value="onSilverlightError" />

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

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

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

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

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

    </a>

     </object>

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

NOTE: You have to build your project in order to have those object.
Take a look on the first param, name="source" value="ClientBin/MVC_silverlight.xap" it pointed to the xap file. Xap file is the compressed output file for the Silverlight application. The .xap file includes AppManifest.xaml, compiled output assembly of the Silverlight project (.dll) and any other resource files referred by the Silverlight application.

You can actually just add that xap file in your Web project and point it right on the param source value.



For more information, see How to: How to: Add Silverlight to a Web Page by Using HTML