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)

 

本文转自 高阳 51CTO博客,原文链接:http://blog.51cto.com/xiaoyinnet/196223 ,如需转载请自行联系原作者

相关文章
|
7月前
|
监控 Cloud Native 测试技术
.NET技术深度解析:现代企业级开发指南
每日激励:“不要一直责怪过去的自己,他曾经站在雾里也很迷茫”。我是蒋星熠Jaxonic,一名在代码宇宙中探索的极客旅人。从.NET Framework到.NET 8,我深耕跨平台、高性能、云原生开发,践行领域驱动设计与微服务架构,用代码书写技术诗篇。分享架构演进、性能优化与AI融合前沿,助力开发者在二进制星河中逐光前行。关注我,共探技术无限可能!
.NET技术深度解析:现代企业级开发指南
|
12月前
|
机器学习/深度学习 数据采集 人工智能
智能嗅探AJAX触发:机器学习在动态渲染中的创新应用
随着Web技术发展,动态加载数据的网站(如今日头条)对传统爬虫提出新挑战:初始HTML无完整数据、请求路径动态生成且易触发反爬策略。本文以爬取“AI”相关新闻为例,探讨了通过浏览器自动化、抓包分析和静态逆向接口等方法采集数据的局限性,并提出借助机器学习智能识别AJAX触发点的解决方案。通过特征提取与模型训练,爬虫可自动推测数据接口路径并高效采集。代码实现展示了如何模拟AJAX请求获取新闻标题、简介、作者和时间,并分类存储。未来,智能化将成为采集技术的发展趋势。
333 1
智能嗅探AJAX触发:机器学习在动态渲染中的创新应用
|
SQL 小程序 API
如何运用C#.NET技术快速开发一套掌上医院系统?
本方案基于C#.NET技术快速构建掌上医院系统,结合模块化开发理念与医院信息化需求。核心功能涵盖用户端的预约挂号、在线问诊、报告查询等,以及管理端的排班管理和数据统计。采用.NET Core Web API与uni-app实现前后端分离,支持跨平台小程序开发。数据库选用SQL Server 2012,并通过读写分离与索引优化提升性能。部署方案包括Windows Server与负载均衡设计,确保高可用性。同时针对API差异、数据库老化及高并发等问题制定应对措施,保障系统稳定运行。推荐使用Postman、Redgate等工具辅助开发,提升效率与质量。
555 0
|
开发框架 算法 .NET
C#/.NET/.NET Core技术前沿周刊 | 第 15 期(2024年11.25-11.30)
C#/.NET/.NET Core技术前沿周刊 | 第 15 期(2024年11.25-11.30)
286 6
|
开发框架 Cloud Native .NET
C#/.NET/.NET Core技术前沿周刊 | 第 16 期(2024年12.01-12.08)
C#/.NET/.NET Core技术前沿周刊 | 第 16 期(2024年12.01-12.08)
331 6
|
开发框架 安全 .NET
在数字化时代,.NET 技术凭借跨平台兼容性、丰富的开发工具和框架、高效的性能及强大的安全稳定性,成为软件开发的重要支柱
在数字化时代,.NET 技术凭借跨平台兼容性、丰富的开发工具和框架、高效的性能及强大的安全稳定性,成为软件开发的重要支柱。它不仅加速了应用开发进程,提升了开发质量和可靠性,还促进了创新和业务发展,培养了专业人才和技术社区,为软件开发和数字化转型做出了重要贡献。
396 5
|
传感器 人工智能 供应链
.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。
本文深入探讨了.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。通过企业级应用、Web应用及移动应用的创新案例,展示了.NET在各领域的广泛应用和巨大潜力。展望未来,.NET将与新兴技术深度融合,拓展跨平台开发,推动云原生应用发展,持续创新。
231 4
|
机器学习/深度学习 人工智能 Cloud Native
在数字化时代,.NET 技术凭借其跨平台兼容性、丰富的类库和工具集以及卓越的性能与效率,成为软件开发的重要平台
在数字化时代,.NET 技术凭借其跨平台兼容性、丰富的类库和工具集以及卓越的性能与效率,成为软件开发的重要平台。本文深入解析 .NET 的核心优势,探讨其在企业级应用、Web 开发及移动应用等领域的应用案例,并展望未来在人工智能、云原生等方面的发展趋势。
422 3
|
敏捷开发 缓存 中间件
.NET技术的高效开发模式,涵盖面向对象编程、良好架构设计及高效代码编写与管理三大关键要素
本文深入探讨了.NET技术的高效开发模式,涵盖面向对象编程、良好架构设计及高效代码编写与管理三大关键要素,并通过企业级应用和Web应用开发的实践案例,展示了如何在实际项目中应用这些模式,旨在为开发者提供有益的参考和指导。
190 3
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
381 3