How to host silverlight Content in ASP.NET 3.5

Hosting Silverlight Content in ASP.NET 3.5

Microsoft provides templates to create managed applications using Silverlight 2. These templates are available when we install Silverlight Tools Beta 2 for Visual Studio 2008. In this article, we will explore the different types of Silverlight applications, the templates available, composition of a Silverlight Web Site and how to integrate Silverlight in your ASP.NET applications.

If you are new to Silverlight, then I hope you have gone through the previous articles listed below. If you haven’t I strongly recommend you do so.

What is Silverlight and Getting started with Silverlight

What’s new in Silverlight 2 Beta 2 (S2B2)

The Silverlight 2 Beta 2 (S2B2) contains two ASP.NET server controls: the ‘Silverlight’ and the ‘MediaPlayer’ control. The Silverlight control lets you embed XAML content into an ASP.NET page. The MediaPlayer lets you display media like the .wma and .wmv files into your site.

Prerequisites to use the templates: The following software is required to create and run Silverlight in ASP.NET website :-Silverlight 2 Beta 2, Visual Studio 2008, Microsoft Silverlight Tools Beta 2 for Visual Studio 2008 over here and ASP.NET 3.5 Extensions.

Note: If you already have Silverlight 2 Beta 1 installed on your machines, then before installing Silverlight Tools Beta 2, make sure that you have uninstalled KB949325, which gets installed during Silverlight Tools Beta 1. Also note that you cannot install S2B2 Tools on Visual Studio 2008 RTM Express editions.

To uninstall the update KB949325 on Windows Vista, go to Control Panel > Uninstall a Program > View installed updates > look out for your version for Visual Studio 2008 > Choose the update KB949325 > Uninstall.

Once you have Silverlight Tools Beta 2 for Visual Studio 2008 installed, you will get the project templates for C# and for Visual Basic to create a managed application based on Silverlight 2. Let us see how to use those templates and integrate Silverlight with ASP.NET.

Step 1:
Open Visual Studio 2008 > File > New Project > Select the language (C# or VB) > Select ‘Silverlight’ in the Project Types > from the templates, select ‘Silverlight Application’.

Note: If you are unable to view the templates, you do not have Microsoft Silverlight Tools Beta 2 for Visual Studio 2008.

Step 2:

Type a name (MyFirstSilverlightApp) and location for the project and click ok.

Step 3:
The ‘Add Silverlight Application’ box appears with two types of host to choose from. You can either host the Silverlight content in an ASP.NET web site that can contain server-side code or choose to host it in a HTML web site. We will choose the first option ‘Add a new Web to the solution for hosting the control’ and the project type as Web Site and click OK.

Step 4:
You will now observe that two projects have been created: MyFirstSilverlightAppWeb and MyFirstSilverlightApp. Let’s quickly dissect the two projects and see what is in each of them

MyFirstSilverlightAppWeb

ClientBin – Initially the folder is empty. But once you compile the application, it will contain a .xap file, in our case MyFirstSilverlightApp.xap. A .xap file is nothing but an archive file which contains XAML, some resources and server-side code. When the application is run, the Silverlight plug-in extracts and executes the contents of this archive file.

Default.aspx – an empty .aspx page.

MyFirstSilverlightAppTestPage.aspx – ASP.NET Test page which hosts the Silverlight content

MyFirstSilverlightAppTestPage.html – HTML Test page which hosts the Silverlight content.

Web.config – ASP.NET 3.5 Extensions settings along with the other website

configuration settings.

MyFirstSilverlightApp –

App.xaml and App.xaml.cs – The App.xaml is required to configure your Silverlight application. You can also declare resources that will be available in all pages of your application.

Page.xaml and Page.xaml.cs – Contains the UI and the C# code to run the Silverlight application.

Note: VB.NET users will have the extension as .vb.

Step 5:
If you open up your MyFirstSilverlightAppTestPage.aspx page, you will see syntax similar to the following:

<%@ 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>Test Page For MyFirstSilverlightApptitle>

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/MyFirstSilverlightApp.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />

div>

form>

body>

html>

If you recollect, I had spoken about the control that lets you embed XAML content in an asp.net page. The <%@ Register Assembly="System.Web.Silverlight" ..> points to the Silverlight library containing the control. The control contains an attribute called as ‘Source’. The source points to the .xap file contained in the ClientBin folder. And the .xap contains the functionality (XAML) that you have built in your MyFirstSilverlightApp project (contains the Page and App.xaml).

When the application is run, both the projects are compiled and the Silverlight assembly is copied into the ClientBin folder.

I hope you get the connection now and how a Silverlight control is hosted on an ASP.NET page. The Silverlight team has made it very easy for us and has provided the plumbing by default.

Step 6: Let us quickly add some functionality in our Page.xaml file. For demonstration purposes and to keep things simple, I will add a simple button control and display it on the asp.net page.

<UserControl x:Class="MyFirstSilverlightApp.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<Grid x:Name="LayoutRoot" Background="White">

<Button x:Name="myButton" Content="Click Me"/>

Grid>

UserControl>

The Silverlight pages are actually usercontrols. The Grid, StackPanel and Canvas are parent controls within which you host other controls. For eg: Here we have added a Button inside the Grid control. After adding the button control, build the application.

Step 7: Right click MyFirstSilverlightAppWeb >Set as startup project. Now run it. You will see the button control hosted in the ASP.NET page.

I understand that this was a very basic demonstration of hosting Silverlight content in an ASP.NET page. As we will move ahead, we will learn how to do more advanced stuff like handling events, hosting complex controls, creating our own controls, deploying Silverlight assemblies, role of IIS and interacting between ASP.NET and Silverlight controls. Till then, keep the learning drive on and Happy Coding!! I hope this article was useful and I thank you for viewing it.