Thursday, August 7, 2008

How to integrate Silverlight component into ASP.Net Website

To integrate your Silverlight component into ASP.Net Website, all you need is your xap file. You may find it under Bin folder inside your Silverlight project folder. Before you copy it, make sure you have build and compiled it.

Steps:

  1. In your Website project, create a folder named “ClientBin”.
  2. Copy the xap file from your Silverlight application project into the ClientBin folder.
  3. Open your Website project in VS 2008, and include the ClientBin folder into the solution. To include it, you need to open your Solution Explorer, click on the “Show All File” icon, and then right click on the invisible (ClientBin) folder and select “Include In Project”.
  4. Then open the web page that you want to insert your silverlight component.
  5. <!-- If ASPX page, use ScriptManager and Silverlight control -->
    <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/Sample.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
    </div>
    </form>

    <!-- If HTML page, use Object control -->
    <div id="silverlightControlHost">
    <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="100%" height="100%">
    <param name="source" value="ClientBin/Sample.xap"/>
    <param name="background" value="white" />

    <a href=http://go.microsoft.com/fwlink/?LinkID=115261 style="text-decoration: none;">
    <img src="http://o.microsoft.com/fwlink/?LinkId=108181" alt="Gt Microsoft Silverlight" style="border-style: none"/>
    </a>
    </object>

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



  6. Verify it by debugging your website project and view the page.

No comments: