彩票走势图

Silverlight整合Asp.net AjAX的技术应用

翻译|其它|编辑:郝浩|2008-01-22 09:59:57.000|阅读 1748 次

概述:

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

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 在//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: {

   &nbsp;  &nbsp; width: "500",

        height: "25&quot;,

        version: "0.95",

&nbsp;&nbsp;      background: "#00000000",

        isWindowless: false,

     &nbsp;  enableHtmlAccess: true },

 &nbsp;      events: {}

    });

}

Ticker.aspx

这个页面使用了silverlight展现证券报价数据和asp.netajax从服务器检索数据,把这个textbox被当作队列,asp.netajax将会把股票数据填充到队列中,当它通过javascript给silverlight控件后将会被从队列中删除。

<!-- AJAX code -->

<asp:ScriptManager runat=&quot;server" ID="scriptManager">

    <Services>

  &nbsp;     <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>

&nbsp;       <;asp:Timer ID="RefreshTimer" runat="server" Interval="3000"

 &nbsp; &nbsp;        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"&gt;

    <ContentTemplate>

       ; <asp:Timer ID="RefreshTimer" runat="server" Interval="3000"

  &nbsp;         OnTick="RefreshTimer_Tick"> </asp:Timer>

  ;      &lt;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=&quot;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" >

  &nbsp; <DoubleAnimation x:Name="animationText1"

    Storyboard.TargetName="tickerText1&quot;

    Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0"

    Duration="0:0:16" From="1" To=";-550" />

  &nbsp; <DoubleAnimation x:Name="animationText2"

    Storyboard.TargetName="tickerText2"

  &nbsp; 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 = "//xxxx.name/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class StockUpdate : System.Web.Services.WebService 

MarketManager.cs

该类提供虚拟的随机股票以及一些交易和价格的信息。

Web.config自动产生,无特殊变化Silverlight 能够在多浏览前中产生丰富,震撼的视觉效果和良好的用户交互,但它只是一个空壳,需要有数据来填充,无疑,asp.net ajax是很多种从服务器获取数据的方式中最好的方式。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:个人博客

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP