Click here to Skip to main content
15,867,686 members
Articles / Web Development / ASP.NET
Article

Sample Application to Integrate Silverlight and ASP.NET AJAX

Rate me:
Please Sign up or sign in to vote.
4.85/5 (14 votes)
8 Aug 20077 min read 138.2K   1.9K   65   18
The following is an example of an interesting way to integrate Silverlight and ASP.NET AJAX. The idea is to periodically pull information via ASP.NET AJAX, which is queued up and retrieved by Silverlight.
Screenshot of the stock ticker application

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.

Shows how the two tickers scroll across the screen

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.

Sequence Diagram showing how data is initially populated
(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.

Sequence Diagram showing how a queue is used to share data between Silverlight and ASP.NET AJAX
(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.

ASP.NET
//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.

ASP.NET
<!-- 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.NET
<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.

XML
<!-- 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.

XML
<!-- 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.

ASP.NET
 // 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.

ASP.NET
[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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Architect OrderDynamics
Canada Canada
Shipping product and getting teams to work at peak efficiency are my passions. I’m a firm believer in Agile methodologies, proper engineering practices with a focus on Software as a Service (SaaS). My extensive knowledge of technology as well as my passion, loyalty and ability to learn quickly will add value to any company. Many of my duties have included working closely with customers and I am known for being a great communicator of ideas and concepts.

Comments and Discussions

 
GeneralMy vote of 5 Pin
joe leovin13-Feb-13 18:46
joe leovin13-Feb-13 18:46 
GeneralFlickering in Text Pin
Pratiksha Saxena15-Apr-08 1:01
Pratiksha Saxena15-Apr-08 1:01 
GeneralI have not been able to execute the project Pin
stavros_764-Jul-07 6:26
stavros_764-Jul-07 6:26 
GeneralRe: I have not been able to execute the project Pin
Randar Puust4-Jul-07 18:40
Randar Puust4-Jul-07 18:40 
GeneralRe: I have not been able to execute the project Pin
Randar Puust8-Aug-07 16:06
Randar Puust8-Aug-07 16:06 
NewsWPF/E Renamed and will be officially supported on the MAC Pin
Randar Puust16-Apr-07 7:53
Randar Puust16-Apr-07 7:53 
QuestionWPF/E vs. Flash Pin
Josh Smith15-Apr-07 12:11
Josh Smith15-Apr-07 12:11 
AnswerRe: WPF/E vs. Flash Pin
Randar Puust15-Apr-07 16:27
Randar Puust15-Apr-07 16:27 
GeneralRe: WPF/E vs. Flash Pin
Josh Smith16-Apr-07 2:09
Josh Smith16-Apr-07 2:09 
GeneralRe: WPF/E vs. Flash Pin
RStern16-Apr-07 2:26
RStern16-Apr-07 2:26 
GeneralRe: WPF/E vs. Flash Pin
Josh Smith16-Apr-07 2:39
Josh Smith16-Apr-07 2:39 
GeneralRe: WPF/E vs. Flash Pin
RStern16-Apr-07 4:18
RStern16-Apr-07 4:18 
GeneralRe: WPF/E vs. Flash Pin
Josh Smith16-Apr-07 5:06
Josh Smith16-Apr-07 5:06 
GeneralRe: WPF/E vs. Flash Pin
RStern16-Apr-07 5:22
RStern16-Apr-07 5:22 
GeneralRe: WPF/E vs. Flash Pin
Homam Hosseini17-Apr-07 9:32
Homam Hosseini17-Apr-07 9:32 
GeneralRe: WPF/E vs. Flash Pin
codebozo18-Apr-07 6:33
codebozo18-Apr-07 6:33 
AnswerRe: WPF/E vs. Flash Pin
Randar Puust16-Apr-07 9:28
Randar Puust16-Apr-07 9:28 
I just found this that compares Silverlight (formerly WPF/E) to Flash:

http://blogs.msdn.com/lokeuei/archive/2007/04/16/microsoft-announces-silverlight.aspx

Does not look very impartial, but interesting.
-A lot of emphasis on the strengths of it's video capabilities. I know that Siverlight uses the Windows Media Player API on Windows. Not sure what it uses on the Mac and I don't have one to try it out.
-One unfortunate thing is that this clearly omits any Unix support for Silverlight.

Randar Puust
Senior Architect, T4G Limited
MCSD.Net, MCSE

AnswerRe: WPF/E vs. Flash Pin
Ernest Laurentin17-Apr-07 5:10
Ernest Laurentin17-Apr-07 5:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.