Hosting Silverlight Content in ASP.NET 3.5

Posted by: Suprotim Agarwal , on 6/21/2008, in Category Silverlight 2, 3, 4 and 5
Views: 89104
Abstract: 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.
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.
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 MyFirstSilverlightApp</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/MyFirstSilverlightApp.xap" MinimumVersion="2.0.30523" Width="100%" Height="100%" />
        </div>
    </form>
</body>
</html>
If you recollect, I had spoken about the <asp:Silverlight> 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 <asp:Silverlight> control. The <asp:Silverlight> 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.
If you liked the article,  Subscribe to my RSS Feed. 
 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for ten consecutive times. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by sunil on Wednesday, July 16, 2008 10:26 AM
It's nice stuff for beginners of silverlight.I want somthing like how to place multiple page.xaml files into same project
Comment posted by Nirav on Monday, August 18, 2008 8:42 AM
Hey Nice Job Done
I had always been getting the write solutions from dotnetcurry.M reallly thankful to you guys.
Here I wud like to repeat the above question how can i manage multiple pages.Coz i want to prepare ful website using silverlight.
Comment posted by Nirav on Monday, August 18, 2008 8:43 AM
Mr. Sunil
Hi if you have got the solution plz brief it to me.i Wud b very thankful to you for that.
Comment posted by Suprotim Agarwal on Monday, August 18, 2008 9:17 PM
Sunil, Nirav: Please check this article of mine over here:

http://www.dotnetcurry.com/ShowArticle.aspx?ID=166

which shows how to Navigate and Pass Values between Pages using Silverlight 2 Beta 2
Comment posted by Nirav on Tuesday, August 19, 2008 5:11 AM
Thanks Suprotim
Comment posted by steve frierdich on Saturday, January 16, 2010 8:15 PM
SO YOU JUST POSTED WHAT ANYONE CAN FIGURE OUT JUST BY CREATING A SILVER LIGHT APPLICATION PROJECT. HOW DOES ONE GET THE SOLUTION TO RUN ON A HOST SERVER. I COPIED THE FILES TO A HOST SERVER AND NOTHING WORKS. I PLACES ALL THE ASSEMBLIES IN A BIN FILE AND STILL NOTHING WORKS. ALL I GET IS A BLANK PAGE WHEN I LOAD THE ASPX PAGE INTO INTERNET EXPLORER.
IF YOU CAN TELL ME WHAT I EXACTLY NEED TO DO TO GET THE ASPX PAGE TO RUN ON A HOST SERVER I WOULD GREATLY APPRICIAE IT.

STEVE_44@INBOX.COM
Comment posted by Suprotim Agarwal on Sunday, January 17, 2010 2:53 AM
Steve: Looks like your webserver does not support the .xaml mime-type. Check this article : http://learn.iis.net/page.aspx/262/configuring-iis-for-silverlight-applications/
Comment posted by Manikant on Monday, April 26, 2010 3:16 AM
Very nice for for one who want to get start with the silver light.
Comment posted by ahobula reddy on Thursday, December 16, 2010 6:10 AM
can we run asp.net button click event code in silverlight control