You can add Silverlight content to a Web page in three ways. The first is to use the traditional <object>
tag embedded in HTML. Second, you can use the ASP.NET server-side
control for hosting Silverlight content. Finally, you can add
Silverlight content dynamically using some JavaScript. Begin by adding content using the <object> tag.
1. Using the Object Tag
The first way to add
Silverlight content is by using the standard <object> tag (the one
that loaded ActiveX controls on pages written in the late 1990s!). In
fact, Visual Studio creates an HTML page for you that loads the
Silverlight content using the <object> tag.
<body>
<!-Run-time errors from Silverlight will be displayed here. -->
<!-- This will contain debugging information and should be removed -->
<!-- or hidden when debugging is completed -->
<div id='errorLocation' style="font-size: small;color: Gray;"></div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightSite.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>
</div>
</body>
Silverlight is implemented as an ActiveX control for Windows clients and as a Safari browser plug-in for Macintosh clients. The <object>
tag looks up the Silverlight implementation on the client computer, and
then fetches the appropriate XAP file from the server and hosts it.
Notice how parameters can be passed to Silverlight. The ones listed
previously are predefined, but you can define your own parameters to be
passed into Silverlight when it loads.
2. Using the ASP.NET Silverlight Server-Side Control
The second way to include
Silverlight content on your page is to use the ASP.NET server-side
control that generates the object tag for you when it renders. Visual
Studio creates a page using the ASP.NET Silverlight control.
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
<title>SilverlightORama</title>
</head>
<body style="height:100%;margin:0;">
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height:100%;">
<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/SilverlightSite.xap"
MinimumVersion="2.0.31005.0" Width="100%"
Height="100%" />
</div>
</form>
</body>
</html>
The Silverlight
control works much the same way as all of the other server-side
controls work. They end up in the page's control tree and send HTML to the browser. The Silverlight control emits the HTML necessary to allow the client browser to load Silverlight and host the content in it.
3. Using the JavaScript Function
Visual Studio also includes a JavaScript library with a helper function—Silverlight.createObjectEx. You can find it in the Silverlight.js file included as part of the ASP.NET test project produced by Visual Studio. Call Silverlight.createObjectEx from within the HTML page and pass in the path to the XAP file, the events, and any other parameters important to the Silverlight
control. Although this is less convenient than is using the server-side
control, it offers you the ability to invoke Silverlight content
dynamically—for example, by way of a JavaScript event.
