Silverlight整合Asp.net AjAX的技術應用

Silverlight 將支援開發人員在建立豐富的web應用程式，我們即將看到web應用的一個在視覺是很有吸引力的浪潮的到來，

網頁將能夠利用靈活的媒體播放，動畫和向量圖形繪製。這將有利於擴充web應用。本文描述的是一個股票跑馬燈的例子。

本例選擇一個代碼為3209的應用股票作為樣本，它可以嵌入到現有的代碼，並且提供一個比"html<marquee>"標籤更好查

看的ticker。為了能夠讓使用者得到最多的價值，需要有效地通過互連網從伺服器獲得資訊進行交易。 將討論通過整合

silverlight和asp.net AjAx來創造一個豐富的b/s應用。同樣通過其他途徑也能創造出類似的視覺效果，主要焦點是

如何整合這兩項技術。通過ajax不斷擷取新的股票資訊拋給silverlight來展現。這個解決方案的關鍵點如下：

1，採用XAML和Silverlight

2.採用Asp.net AJAX實現無重新整理顯示。

用戶端安裝：

Silverlight 1.1Alpha,和任意瀏覽器

開發和服務端安裝：

1，Microsoft .NET 2.0 Framework 本例使用vS2005開發

2，Silverlight 1.1 Alpha（或確認含有Silverlight.js 檔案）

3,Asp.net Ajax 在http://ajax.asp.net/下載

概覽：

在下面的的例子裡將會分3個層級的內容來介紹

連續變化：

下面給出一個連續變化的視圖，程式中包含2各textblock，他們會部分顯示當他們處在Silverligth控制項的範圍內。當達

到末尾時，ticketext2的資料將拷貝ticketext1的資料 ，然後在動畫啟動的過程中tickertext2的資訊就會被更新。理論

上講，我們可以弄很多個textblocks，為了簡單期間我們只樣本2個。

採用asp.net Ajax 調用web services ，Asp.net AjAX將會為你註冊使用<asp:ServiceReference>標籤的web services

自動產生一個javascirpt代理.當頁面被載入完後，我們通過組織XAMLTextBlock上的一些資料返回給web service。下面是

一個不同對象之間傳遞訊息的時序圖：

採用隊列在silverlight和asp.net AjAx之間共用資料

因為不是保證所有的資料同時通過ajax取出，所以程式再updatepanel中把asp.net Textbox當作對列來使用。asp.net AJax

不斷去更新資料，同時silverlight周期性的從隊列中取出資料。

CreateSilverlight.js

各檔案描述

下面的代碼是silverlight外掛程式的運行代碼，功能是如果使用者沒有安裝sliverlight將會提示安裝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.netajax從伺服器檢索資料，把這個textbox被當作隊列，asp.netajax

將會把股票資料填充到隊列中，當它通過javascript給silverlight控制項後將會被從隊列中刪除。

<!-- AJAX code -->

<asp:ScriptManager runat="server" ID="scriptManager">

    <Services>

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

    </Services>

</asp:ScriptManager>

下面的asp.net Ajax 代碼來承擔少許重要的任務，通過增加<asp:ScriptManager> 控制項，我們可以訪問asp.net

Ajax提供的方法，使用aps.net ajax必須在頁面有這個控制項，這段代碼同時也註冊了在第一次載入葉面時候調用

javascirpt的 web service StockUpdate.asmx。

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

下面的代碼會使用ajax組件定時訪問伺服器並安排進新的股票隊列的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

XAML運行在siverlight外掛程式中，它將在螢幕滾動顯示股票報價資料，西面兩個textblocks將包含進股票市場資料。

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

storyboadrd 將會從左邊移動資料，直到達到顯示邊緣，然後調用refreshTicker 代碼把資料從tickertext2

複製到tickerText1,從隊列中更新資料到ticekertext2和重新啟動動畫。

<!-- 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 services,它提供了一個訪問makretmanager 類的途徑，目的是為了從javescirpt訪問

webserices,asp.net ajax將會自動的產生一個web代理，只要通過<asp:ServiceReference>標籤申明，通

過code頁面去修改代碼。

在GAC添加中添加System.Web.Extensions 和asp.net ajax  namespace後

// This is the ASP.NET AJAX reference we need

using System.Web.Script.Services; 

我們也可以在類中增加scriptserviece屬性

[WebService(Namespace = "http://xxxx.name/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class StockUpdate : System.Web.Services.WebService 

MarketManager.cs

該類提供虛擬隨機股票以及一些交易和價格的資訊。

Web.config

自動產生，無特殊變化  

Silverlight 能夠在多瀏覽前中產生豐富，震撼的視覺效果和良好的使用者互動，但它只是一個空殼，需要有資料來

填充，無疑,asp.net ajax是很多種從伺服器擷取資料的方式中最好的方式。

樣本源碼下載：TickerSample_src.zip (11.29 kb)