Silverlight整合Asp.net AjAX的技术应用_H5之家 - 中国HTML5教程资源分享第一站

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 在下载
概览：
在下面的的例子里将会分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控件后将会被从队列中删除。

<asp:ScriptManager runat="server">
<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 runat="server">
<ContentTemplate>
<asp:Timer runat="server" Interval="3000"
OnTick="RefreshTimer_Tick"> </asp:Timer>
<asp:TextBox runat="server">
</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
下面的代码会使用ajax组件定时访问服务器并安排进新的股票队列的textbox
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Timer runat="server" Interval="3000"
OnTick="RefreshTimer_Tick"> </asp:Timer>
<asp:TextBox runat="server">
</asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
TickerTape.xaml
XAML运行在siverlight插件中，它将在屏幕滚动显示股票报价数据，西面两个textblocks将包含进股票市场数据。

<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和重新启动动画。

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

猜你在找