| Silverlight-integration in ASP.NET-Website |
| Section: Silverlight | Rating: Not rated yet! |
 | CodeGod submitted this resource
The member's homepage is http://www.codegod.de
Visit the profile here |
Attachment
Introduction
Silverlight is a new Microsoft technology to implement rich internet-applications. It can be embedded in any browser as plugin and is platform-independent. This article shows, how to integrate a Silverlight-project into an ASP.NET-Website.
Prerequistites
First of all we need to download and install the new IDE VS 2008 Beta2.
You can download it hereTo build Silverlight-projects with VS 2008 Beta2 the download of the Silverlight Tools Alpha for VS Orcas is required. After we installed this, the project-template for Silverlight-projects is available in VS.
Download it hereTo run Silverlight in the browser, we need the
Silverlight runtime/plugin 1.1 AlphaThe concept
Silverlight is based on Xaml, an XML-based description language for UI-elements. If you are looking for an overview, please visit this
link.
With Xaml it is possible, to separate the GUI from the implementation of the software. Designers can develop the GUI in Xaml with tools like
Expression Blend, and developers build the implementations for the GUI with VS 2008. This can be realized with a codebehind-concept, similar to ASPX-pages in ASP.NET. For each Xaml-File exists a cs-File, containing the implementations like event-handlers (triggers) for the UI-elements.
When creating a Silverlight-project with the Silverlight-project-template, some sample-files are generated for you, to get you started with Silverlight. The Xaml-file is integrated in an HTML-page. In this article we want to show, how to extract the Xaml from the HTML-page and integrate it in an ASP.NET-page. While explaining how this can be done, the understanding for the concepts can be learned along the way.
The projects
1. The Silverlight-project
Okay, let's get in touch with it. If we have installed the prerequisites properly, we will see the following after clicking File->New-Project in VS 2008 Beta2:
Figure 1Now we are able to create our first Silverlight-project. Choose a name like SilverlightSamplePrj and click OK.
Now the following files are generated for you:
Page.xaml:
This is the page in which you can describe your UI-elements.
Page.xaml.cs:
Here you can implement the logic for the GUI. It is just normal C#-code.
Silverlight.js:
The javascript-file you need to create the Silverlight-control in your HTML/ASPX-page, to display the Xaml-content.
TestPage.html:
The HTML page in which the silverlight-control is embedded.
2. The ASP.NET-Site
Okay, as above-mentioned we want to integrate the Silverlight-control into an ASP.NET-Website. To do so, we need to extract the control-creation from the TestPage.html and place it into an Aspx-page. But how does the Aspx-page know about the Page.xaml?
First we need to add an ASP.NET-website to the solution. On the solution-item in the solution explorer click Add->New WebSite and the Website is added to our solution.
3. Integrating Silverlight in the Website
Now let's introduce the Silverlight-project to the WebSite. Right-Click on the Website in solution-explorer and choose Add Silverlight Link:
Figure 2Okay, this was the first step. The next one is to explore, which HTML and javascript-code is responsible for generating the silverlight-control in the TestPage.html:
<head>
<title>Silverlight Project Test Page </title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="TestPage.html.js"></script>
</head>
<body>
<div id="SilverlightControlHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
As we can see, the control is created by a Jscript-function which is located in the file Silverlight.js. So we have to add this js-file to our Website first via Copy and Paste. After that we add a new javascript-file to the Website and name it XamlPageCreation.js. This file will contain the code that is located in the file TestPage.html.js:
// JScript source code
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight( xamlPage )
{
Silverlight.createObjectEx({
source: xamlPage,
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.1",
enableHtmlAccess: "true"
},
events: {}
});
// Give the keyboard focus to the Silverlight control by default
document.body.onload = function() {
var silverlightControl = document.getElementById('SilverlightControl');
if (silverlightControl)
silverlightControl.focus();
}
}
We changed it a little bit. We added the parameter to the funtion createSilverlight to have a generic method to create a Xaml-page. And this is what we add to our Aspx-page, to display the control:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Integrating Silverlight in aspx</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="XamlPageCreation.js"></script>
</head>
<body>
<form id="frmMain" runat="server">
<div id="SilverlightControlHost" >
<script type="text/javascript">
createSilverlight( 'Page.xaml' );
</script>
</div>
</form>
</body>
</html>
What to display?
Now we have a working ASP.NET/Silverlight example showing nothing. Not very interesting. So let's write our first Silverlight-program. What could we implement? A suggestion: Let's show a TextBlock with a message for the user to browse for files. On clicking the TextBlock we open a FileBrowse-dialog. After selecting some files (yes, multiselection) and clicking okay, we display the filenames in the TextBlock. Too hard for the first day? Not really. Here is the Xaml for the TextBlock and the eventhandler MouseLeftButtonDown:
<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilverlightSamplePrj.Page;assembly=ClientBin/SilverlightSamplePrj.dll"
Width="400"
Height="400"
Background="#EEEEEE"
>
<TextBlock x:Name="txtFileName"
Canvas.Top="5" Canvas.Left="5"
Foreground="Black"
Text="Click for OpenFileDialog"
MouseLeftButtonDown="OnClick"/>
</Canvas>
Very easy and intuitively. And now the codebehind in the cs-File:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightSamplePrj
{
public partial class Page : Canvas
{
public void Page_Loaded(object o, EventArgs e)
{
// Required to initialize variables
InitializeComponent();
}
public void OnClick(object o, MouseEventArgs e)
{
txtFileName.Text = "";
string NL = Environment.NewLine;
OpenFileDialog ofDlg = new OpenFileDialog();
ofDlg.EnableMultipleSelection = true;
if (ofDlg.ShowDialog() == DialogResult.OK)
{
foreach (FileDialogFileInfo fdFileInfo in ofDlg.SelectedFiles)
{
txtFileName.Text += fdFileInfo.Name + NL;
}
}
}
}
}
Final thoughts
One could say that Silverlight is WPF for the browser/internet. But in version 1.1 Alpha there are a few things missing in Silverlight like the layout-management-controls of WPF, the predefined controls and databinding for controls.
But if these points are realized - and I think MS will do this - Silverlight could be *the* technology for rich internet applications.
The sample-project is attached, have fun with it!