Silverlight与ASP.NET AJAX集成示例应用

• 下载源代码 - 11.3 KB

引言

Silverlight（早期代号为Windows Presentation Framework Everywhere）将允许开发人员创建比以往任何时候都更丰富的Web应用程序。我们将看到新一代的基于Web的应用程序，它们不仅易于使用，而且具有极强的视觉吸引力。网页将能够利用灵活的媒体播放、动画和矢量图形绘制。这对于页面数量不多但使用频率很高的Web应用程序尤其有用。例如，在呼叫中心工作的人员或整天买卖股票的经纪人。这就是我选择股票行情显示应用程序作为示例的原因。它可以嵌入到现有的网页中，但能提供比HTML的<MARQUEE>标签所能实现的更好的行情显示效果。

为了使其对用户有价值，需要一种能够通过Internet从企业服务器高效地拉取信息的方法。最新版本的Silverlight支持CLR，可以访问Web服务，但有时您可能不想使用托管代码。在这种情况下，您需要使用客户端脚本解决方案，例如JavaScript。本文将讨论如何将Silverlight（主页）与ASP.NET AJAX（ASP.NET AJAX中向客户端脚本公开Web服务）集成，以创建类似Rich Client/Server的应用程序，但通过标准浏览器实现。

我应该提到，还有其他方法可以创建此示例提供的相同视觉体验，但我想使用一个人们熟悉且相对简单的示例，并专注于两种技术的融合。将有一个ASP.NET AJAX UpdatePanel，它会不断获取新的股票信息，而Silverlight StoryBoard则会展示它检索到的信息。此解决方案的关键优势在于

1. 我们使用可扩展应用程序标记语言（XAML）和Silverlight，因此在视觉刺激方面几乎没有限制。此示例仅使用基本颜色，没有任何理由不能使用Silverlight中的不透明度（opacity）和基于矢量的图形等功能。有关XAML的更多信息，请参阅可扩展应用程序标记语言（Wikipedia文章）。
2. 通过使用ASP.NET AJAX，屏幕不会有可见的刷新。数据始终是最新的，没有闪烁或等待服务器响应。

背景

最初，我的目标是写一篇关于调用Silverlight中托管代码的Web服务的文章。当我写第一版文章时，Silverlight还不支持托管代码。由于这个限制，我决定写一篇关于ASP.NET AJAX集成的文章。将来，我可能会写一篇关于使用Silverlight的Web服务作为这两种技术比较的文章。

必备组件

客户端安装

1. 您需要一个浏览器来查看此示例。截至Silverlight 1.1 Alpha版本，它兼容Firefox、Safari和Internet Explorer，并计划将来支持Opera。
2. 要运行此代码，客户端需要安装正确版本的Silverlight插件。当您第一次访问Ticker.aspx时，它会提示您下载并安装。

开发或服务器安装

1. 您需要一个支持编译Microsoft .NET 2.0 Framework的开发环境，例如Microsoft Visual Studio 2005或Visual Web Developer Express Edition。示例解决方案已在Visual Studio 2005 Professional Edition中构建和测试。
2. 安装Silverlight。在撰写本文时，最新版本是Silverlight 1.1 Alpha。要使用更高版本，您唯一需要做的更改就是更新应用程序中的Silverlight.js文件。
3. 安装Microsoft .NET Framework 2.0版本。注意：虽然Windows Presentation Foundation（WPF）需要Microsoft .NET Framework 3.0版本，但Silverlight XAML运行在插件中，所以我们只需要2.0版本来运行ASP.NET AJAX。
4. 安装ASP.NET AJAX。您应该可以在官方网站上找到它。

在Visual Studio 2005下运行

1. 将Ticker.apx设置为您的起始页。
2. 运行解决方案。该示例在ASP.NET开发服务器下运行良好，如果需要，也可以在Internet Information Server（IIS）下运行。

概述

有三个高级概念将有助于更容易地理解代码。

连续运动

为了制造连续运动的错觉，应用程序移动了两个TextBlock，由于它们位于Silverlight控件边界之外，因此只显示一部分。当到达末端时，tickerText2 中的信息会被复制到tickerText1。然后，tickerText2 会更新为新信息，并重新启动动画。理论上，我们没有理由不能使用更多的TextBlock，但对于这个例子来说，两个似乎效果很好。

使用ASP.NET AJAX调用Web服务

ASP.NET AJAX将自动为使用<asp:ServiceReference> 标签注册的任何Web服务生成JavaScript代理。页面加载时，我们使用此Web服务返回的数据来填充XAML TextBlock 的一些初始数据。

注意：以下图示为UML顺序图。它描述了不同的对象以及它们之间的消息。如有需要，请参阅Wikipedia文章以快速了解。

(点击查看大图)

使用队列在Silverlight和ASP.NET AJAX之间共享数据

由于AJAX不保证总能及时获取数据，因此应用程序使用一个TextBox 作为队列，该队列运行在UpdatePanel内。ASP.NET AJAX会持续更新它，而Silverlight则定期从中拉取数据。

(点击查看大图)

单个文件说明

以下是我在此示例中创建或修改的文件列表。

CreateSilverlight.js

以下代码将实例化Silverlight插件。如果尚未安装，它将提示用户下载并安装。

//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

这是客户端将看到的页面。它同时使用Silverlight来显示股票行情以及ASP.NET AJAX从服务器检索信息。有一个文本框，用作队列。ASP.NET AJAX代码会将股票数据填充到队列中，然后由JavaScript提取这些数据来填充Silverlight控件。

以下ASP.NET AJAX代码完成了几个重要任务。通过添加<asp:ScriptManager>控件，我们可以访问ASP.NET AJAX提供的功能。任何打算使用ASP.NET AJAX提供的控件的页面都必须包含此控件。该代码还注册了StockUpdate.asmx Web服务，该服务在页面首次加载时由一些JavaScript调用。

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

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

以下代码将通过AJAX启用的程序集定期调用服务器端代码，该程序集将填充NewStockQueue 文本框。

<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

XAML由Silverlight插件运行。它将显示在屏幕上滚动的行情带。以下是包含股票市场数据的两个TextBlock。

<!-- 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="" />    

一个StoryBoard 会将TextBlock向左移动，直到它们到达可见区域的边缘。然后它将调用RefreshTicker 代码，该代码将tickerText2 的数据复制到tickerText1，用队列中的新数据更新tickerText2 ，然后重新启动动画。

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

这是一个非常简单的Web服务，它提供了对MarketManager 类的访问。为了从JavaScript调用Web服务，只要它被声明在<asp:ServiceReference>标签内，并且对代码隐藏进行了以下更改，ASP.NET AJAX就会自动生成一个Web代理。

在GAC中添加对System.Web.Extensions 程序集的引用后，添加对ASP.NET AJAX命名空间（namespace）的引用。

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

我们还必须为该类添加一个ScriptService 属性。

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

MarketManager.cs

这是一个完全虚构的类，它返回随机股票以及价格和趋势等信息。

Web.config

这是使用Visual Studio 2005中的“ASP.NET AJAX启用的Web应用程序”模板时默认的web.config文件。

结论

Silverlight能够创建在多个浏览器上运行的丰富、视觉上引人注目且交互式体验。但一个漂亮的应用程序如果没有数据，就只是一个屏幕保护程序。需要一种能够高效快速地从服务器拉取数据并呈现它的方法。ASP.NET AJAX是实现此目的的众多方法之一，但它无疑是创建高度可用的Web应用程序的最佳方法之一。

历史

• 2007年4月5日：第一次修订
• 2007年8月4日：更新代码以适用于最新版本的Silverlight。根据微软将WPF/E重命名为Silverlight更新了文章。