Sample Application to Integrate Silverlight and ASP.NET AJAX

• Download source files - 11.3 KB

Introduction

Silverlight (formerly codenamed Windows Presentation Framework Everywhere) will allow developers to create richer web applications than ever before. We will see a new wave of web based applications that are not only highly usable, but also very visually appealing. Web pages will be able to take advantage of flexible media playback, animation and vector graphic drawing. It will be especially useful on web applications that have a small number of pages, but are used heavily. For example, somebody working in a call center or a broker who is buying and selling stocks all day. This is the reason I chose a stock ticker tape application as my sample. It could be embedded into an existing web page, but provides a better looking ticker than the HTML <MARQUEE> tag could ever hope to achieve.

To make it valuable to users, there needs to be a way to efficiently pull information from corporate servers over the Internet. The latest version of Silverlight supports the CLR, giving access to web services, but there are times where you may not want to use managed code. In this case, you need to use a client side script solution, such as JavaScript. This article will discuss integrating Silverlight (home page) with ASP.NET AJAX (Exposing Web Services to Client Script in ASP.NET AJAX) to create a rich client/server-like application, but through a standard browser.

I should mention that there are other ways of create the same visual experience that this sample provides, but I wanted to use a fairly simple example that people have seen before and to focus on the blending of the two technologies. There will be an ASP.NET AJAX UpdatePanel which is continuously getting new stock information while a Silverlight StoryBoard is presenting the information it retrieves. The key benefits of this solution are:

1. We are using Extensible Application Markup Language (XAML) and Silverlight, so there is virtually no limit to what we can do to make it visually stimulating. This sample only uses basic coloring, there isn't any reason you couldn't use the functionality in Silverlight like opacity and vector based graphics. See Extensible Application Markup Language (Wikipedia article) for more information on XAML.
2. Through the use of ASP.NET AJAX, there is no visible refreshing of the screen. The data is always up to date, with no flicker or waiting for the server to respond.

Background

Originally my goal was to write an article about calling web services using managed code called from Silverlight. When I wrote the first version of this article, Silverlight didn't support managed code. Because of this limitation, I decided to write an article about ASP.NET AJAX integration. In the future, I may write an article that discusses using web services from Silverlight as a comparison of the two techniques.

Prerequisites

Client Installation

1. You will need a browser to view the sample. As of the Silverlight 1.1 Alpha, it is compatible with Firefox, Safari, and Internet Explorer with plans to support Opera in the future.
2. To run this code, the client will need to install the correct version of the Silverlight plug in. It will prompt you to install it the first time you hit Ticker.aspx.

Development or Server Installation

1. You will need a development environment that supports compiling the Microsoft .NET 2.0 Framework, for example Microsoft Visual Studio 2005 or Visual Web Developer Express Edition. The sample solution has been built and tested using Visual Studio 2005 Professional Edition.
2. Install Silverlight. At the time of this article, the latest version was Silverlight 1.1 Alpha. To use a later version, the only change you should need to make is to update the Silverlight.js in the application.
3. Install the Microsoft .NET Framework version 2.0. Note: Although Microsoft .NET Framework version 3.0 is required for Windows Presentation Framework (WPF), the Silverlight XAML runs under the plug in, so we only need version 2.0 to run ASP.NET AJAX.
4. Install ASP.NET AJAX. You should be able to find it on the official site.

To run under Visual Studio 2005

1. Set Ticker.apx as your start page.
2. Run the solution. The sample works fine using the ASP.NET Development Server, but will also work under Internet Information Server (IIS) if so desired.

Overview

There are three high level concepts that will make it easier to understand the code.

Continuous Motion

To give the illusion of continuous motion, the application moves two TextBlocks, which are only partially visible because they are outside the boundary of the Silverlight control. Once it reaches the end, the information from tickerText2 is copied into tickerText1. Then, tickerText2 is updated with new information and the animation is restarted. Theoretically, there isn't any reason we couldn't use a larger number of TextBlocks, but two seems to work well for this example.

Calling Web Services Using ASP.NET AJAX

ASP.NET AJAX will automatically generate a JavaScript proxy for any web services you register using the <asp:ServiceReference> tag. When the page loads, we use the data returned from this web service to populate the XAML TextBlock with some initial data.

Note: The following diagrams are UML Sequence diagrams. It describes different objects and the messages between them. See the Wikipedia article for a quick overview if needed.

(click to view larger image)

Using a Queue to Share Data Between Silverlight and ASP.NET AJAX

Because there is no guarantee that we will always get data back in time with AJAX, the application uses a ASP.NET TextBox as a queue, which is running within an UpdatePanel. ASP.NET AJAX continuously updates it, while Silverlight periodically pulls data off the queue.

(click to view larger image)

Description of Individual Files

The following are a list of the files that I have created or modified in this sample.

CreateSilverlight.js

The following is the code that will instantiate the Silverlight plug in. If it has not been installed, it will prompt the user to download and install it.

//contains calls to silverlight.js, example below loads TickerTape.xaml 
function createSilverlight() 
{
    Silverlight.createObjectEx({
        source: "TickerTape.xaml", 
    parentElement: document.getElementById("SilverlightControlHost"), 
    id: "SilverlightControl", 
    properties: { 
        width: "500", 
        height: "25", 
        version: "0.95", 
        background: "#00000000", 
        isWindowless: false, 
        enableHtmlAccess: true }, 
        events: {} 
    }); 
}

Ticker.aspx

This is the page that the client will see. It uses both Silverlight to represent the stock ticker and ASP.NET AJAX to retrieve the information from the server. There is a textbox, which is used as a queue. The ASP.NET AJAX code will fill the queue with stock data, which is then pulled off by the JavaScript that populates the Silverlight controls.

The following ASP.NET AJAX code does a few important tasks. By adding the <asp:ScriptManager> control, we have access to the functionality provided by ASP.NET AJAX. This needs to appear on any page that plans to use the controls provided by ASP.NET AJAX. The code also registers the StockUpdate.asmx web service that is called from some JavaScript when the page is first loaded up.

<!-- AJAX code -->
<asp:ScriptManager runat="server" ID="scriptManager">

    <Services>
        <asp:ServiceReference Path="StockUpdate.asmx" />
    </Services>
</asp:ScriptManager>

The following code will periodically call the server side code using AJAX enabled assembly which will populate the NewStockQueue textbox.

<asp:UpdatePanel ID="StockPanel" runat="server">
    <ContentTemplate>
        <asp:Timer ID="RefreshTimer" runat="server" Interval="3000"
            OnTick="RefreshTimer_Tick"> </asp:Timer>
        <asp:TextBox ID="NewStockQueue" runat="server" Width="500">

        </asp:TextBox>

    </ContentTemplate>
</asp:UpdatePanel>

TickerTape.xaml

The XAML is run by the Silverlight plug in. It will show the ticker tape as it scrolls around the screen. The following are two TextBlocks that will contain the stock market data.

<!-- These contain the stock market information that are visible to 
the client. -->

<TextBlock x:Name="tickerText1" Canvas.Top="3" FontSize="12"
    Foreground="Yellow" FontFamily="Arial Black" Text="" />
<TextBlock x:Name="tickerText2" Canvas.Top="3" FontSize="12"
    Foreground="Yellow" FontFamily="Arial Black" Text="" />    

A StoryBoard will move the TextBlocks to the left, until they reach the edge of the visible area. Then it will call the RefreshTicker code, which copies the data from tickerText2 into tickerText1, update tickerText2 with new data from the queue and restart the animation.

<!-- This storyboard will animate the text boxes below,
moving them to the left until they hit the end.
Then it will restart, giving the appearance of continuously moving 
information-->
<Storyboard x:Name="tickerAnimation" Completed="RefreshTicker" >
    <DoubleAnimation x:Name="animationText1" 
    Storyboard.TargetName="tickerText1"
    Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"
    Duration="0:0:16" From="1" To="-550" />
    <DoubleAnimation x:Name="animationText2" 
    Storyboard.TargetName="tickerText2"
    Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"
    Duration="0:0:16" From="550" To="0" />
</Storyboard>    

StockUpdate.asmx

This is a very simple web service, that provides access to the MarketManager class. In order to call the web service from JavaScript, ASP.NET AJAX will automatically generate a web proxy, as long as it is declared within a <asp:ServiceReference> tag, as well as the following changes are made to the code behind.

After adding a reference to the System.Web.Extensions assembly in the GAC, add a reference to ASP.NET AJAX namespace.

 // This is the ASP.NET AJAX reference we need
using System.Web.Script.Services;        

We also have to add a ScriptService attribute to the class.

[WebService(Namespace = "http://randar.name/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class StockUpdate : System.Web.Services.WebService        

MarketManager.cs

This is a completely fake class that returns random stocks, along with some information such as prices and trends.

Web.config

This is the default web.config when you use the "ASP.NET AJAX-Enabled Web Application" template in Visual Studio 2005.

Conclusion

Silverlight enables the creation of rich, visually stunning, and interactive experiences that can run on multiple browsers. But a pretty application without data is just a screensaver. There needs to be a way to efficiently and quickly pull data from the server and present it. ASP.NET AJAX is one of many ways it can be done, but it is definitely one of the best ways to create a highly usable web application.

History

• April 5th, 2007: First revision
• August 4th, 2007: Updated the code to work with the latest version of Silverlight. Updated article based on Microsoft renaming WPF/E to Silverlight.