admin 管理员组文章数量: 1086019
2024年4月13日发(作者:restful web)
客户端脚本 。借助ASP.NET网页中的AjAX功能,可
以使用客户端脚本来调用ASP.NET Web服务f_asmx)
和Windows Communication FoundationfWCF1服务f.SVC1
String.Format(”The cln ̄ent time is 10).II,DateTime.N0w);
return serverTime;
}
2 ASP.NET AJAX在Web开发中的应用
在.NET框架4.O中.ASP.NET AJAX框架技术已经
完全集成进来.所以.使用Visual Studio 2010开发
ASP.NET AJAX程序.不需要单独安装ASP.NET AJAX
(4)在客户端注册Web服务。添加服务器脚本管
理控件ScriptManager1.Services标签定义了所引用的
Web服务。其中。ScriptReference标签指定了引用的
Web Service程序并设置属性Path获得WebService,as.
框架.而是可以直接创建ASP.NET AJAX程序 打开
“工具箱窗口”.可以看到ASP.NET AJAX服务器控件.
把ASP.NET AJAX服务器控件拖动到页面内就可以创
建ASP.NET AJAX程序
2.1使用ScriptManager控件调用Web服务
脚本管理控件ScriptManager是AJAX程序运行的
基础.它是一个在页面上没有任何可视界面的Web控
件.用来处理页面上所有组件以及页面局部更新,生成
相关客户端代理脚本以便能够在JavaScript中访问
Web Service等。
ScriptManager的一个主要作用是在客户端注册一
些服务器端的代码.最常用的就是将Web Service注册
在客户端.这样就可以在JavaScript脚本中实现对Web
服务的调用.这些服务可以是创建的自定义服务,也可
以是内置的应用程序服务 要在JavaScript中调用Web
服务需要3个步骤:①创建Web服务;②在客户端注
册Web服务;③在JavaScript中引用服务的方法翻。下
面通过一个调用Web服务显示系统时间的例子说明
调用Web服务的过程
(1)启动Visual Studi0 2010,创建一个ASP.NET
Web应用程序
(2)右键单击网站名称,选择“添加”下的“新建”
项.弹出“添加新项”对话框.选择“已安装模板”下的
“Visual C#”模板,并在模板文件列表中选中“Web服
务”.在“名称”文本框中输入该Web服务的文件名称
“WebService.asmx”.最后单击“添加”按钮
(3)双击网站根目录下的文件夹App Code中的
WebService-cs文件。在其中添加关键代码如下。
using System.Web.Script.Services;
[WebMethod]
public stirng GetServerTime0{
string serverTime=
mx文件的路径。
<asp:ScriptManager mnat=’’Server”ID=’’scriptManagerl”>
<Services>
<asp:ServiceReference Path=” ̄/WebServiee.asmx”,>
</Services>
</asp:ScriptManager>
(5)在JavaScript中引用服务的方法。在源视图的
<head> ̄<,qaead>标记之间编写JavaScript脚本代码。
<script language=“javascript”type=“text/javascript’’>
function GetTime0{
WebServiee.GetServerTime0;
J
</script>
2.2 UpdatePanel控件实现局部更新
局部更新是ASP.NET AJAX中最基本、最重要的
技术 UpdatePanel可以用来创建丰富的局部更新Web
应用程序.只刷新指定的页面区域.而不是刷新整个页
面。可以使用多个UpdatePanel控件来单独更新不同的
页面区域。
对于UpdatePanel控件而言,有两个重要的标签:
ContentTemplate标签和Triggers标签 ContentTemplate
标签用来定义UpdatePanel的内容.开发人员能够放置
任何ASP.NET控件.这些控件在ContentTemplate标签
中.就能够实现页面无刷新的更新操作
Triggers标签表示局部更新的触发器.包括Async—
PostBackTrigge和PostBackTrigge两种触发器。Async.
PostBackTrigge异步回传触发器用来指定某个控件的
某个事件引发异步回传。即部分更新 属性有C0ntrolID
和EventName,分别用来指定控件ID和控件事件.若没
有明确指定EventName的值.则自动采用控件的默认
值,例如Button按钮就是Click单击事件。把ControlID
设为UpdatePanel外部控件的ID,可以使外部控件控制
UpdatePanel的更新。PostBackTrigge不使用异步回传触
zm 管 n^^….L
赢
发器.用来指定在UpdatePanel中的某个服务器端控
件.它所引发的回送不使用异步回送.而仍然是传统的
整页回送
下面使用ScriptManager和UpdatePanel创建两个
独立更新区域的页面
(1)启动Visual Studi0 2010,创建一个ASP.NET
Web应用程序
(2)切换到设计视图,在工具箱的“AJAX Exten.
sions”选项卡中.双击ScriptManager控件以将其添加
到页面中
(3)在工具箱中双击UpdatePanel控件两次,将两
个UpdatePanel控件添加到页面中
(4)在其中一个UpdatePanel控件中,添加一个
Label控件并将其Text属性设置为“显示刷新时间”
(5)在同一UpdatePanel控件中,添加一个Button
控件并将其Text属性设置为“刷新”
(6)在另一个UpdatePanel控件中添加一个Calen.
dar控件
(7)双击“刷新”按钮,为其Click事件添加事件处
理程序 将下面的代码添加到处理程序中.这会将La—
bel控件设置为当前时间
protected void Button1
一
Click(object sender,EventArgs e)
{
Label 1.Text=DateTime.Now.ToString0;
l
(8)单击按钮,面板中的文本将变为显示上次刷新
的时间
(9)在日历中,移动到不同的月份,另一个面板中
的时间不会发生更改.这两个面板的内容将单独更
新。切换到“源视图”,关键代码如下:
<asp:UpdatePanel id=”UpdatePanel1”Funat=”server”>
<ContentTemplate>
<asp:Label ID=”Labell”runat=”server”Text=”显示刷新
时间”></asp:Label><br,>
<asp:Button ID=11Button1”1"11nat=”server”Text=”刷新’’
OnClick=”Button 1
一
Click”,>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID=”UpdatePanel2”runat=”server”>
<ContentTemplate>
<asp:Calendar ID=”Calendarl”runat=”server”></asp:Cal一
回 现代计算机2013.04上
endar>
</ContentTemplate>
</asp:UpdatePanel>
2.3 UpdateProgress控件实现页面刷新的过程信
息
UpdateProgress控件帮助开发人员设计一个直观
的用户界面用来显示一个页面中一个或多个U。.
datePanel控件实现部分页面刷新的过程信息 如果一
个部分页面刷新过程是缓慢的,就可以利用UD—
dateProgress控件提供更新过程的可视化状态信息 此
外在一个页面可以使用多个UpdateProgress控件.每个
与不同的UpdatePanel控件相配合。此外.可以使用一
个UpdateProgress控件与页面上的所有UpdatePanel控
件相配合
通过设置UpdateProgress控件的AssociatedUD—
datePanelID属性,将UpdateProgress控件与Up.
datePanel控件关联。将AssociatedUpdatePanellD属性
设置为UpdatePanel控件ID,则会为源于关联UD—
datePanel控件内部的回发显示UpdateProgress控件
使用ProgressTemplate属性可以指定由UpdateProgress
控件显示的消息。如果ProgressTemplate属性为空.
则在显示UpdateProgress控件时不会显示任何内容
UpdateProgress控件的简单定义如下:
<asp:UpdateProgress ID=”UpdateProgress1”AssociatedUp—
datePanelID=”UpdatePanell。’
runat=”server”>
<ProgressTemplate>
页面正在刷新…
</ProgressTemplate>
</asp:UpdateProgress>
2.4 Timer控件实现定时刷新
Timer控件用于在一个规定的时间内执行提交操
作 使用Timer控件可以执行提交整个页面操作.也可
以和UpdatePanel控件一起使用.在规定时间内执行页
面的局部刷新操作[41 设置Interval属性可以指定执行
回发的频率.单位是毫秒。当Timer控件启动一个回送
时.Timer控件在服务器端触发Tick事件,可以为Tick
事件创建一个处理程序来执行页面发送回服务器的请
求 值得注意的是.如果把Timer控件的Interval属性
值设置得过小.会对Web服务器造成严重的阻塞。所
以.当页面上要刷新的内容部分是必要的而且是频繁
的时候,才考虑使用Timer控件【51。
下面的示例演示一个UpdatePanel控件.该控件显
示一个随机生成的股票价格及该股票价格的生成时
间。Timer控件每隔10秒更新一次UpdatePanel控
件中的内容。
<asp:ScriptManager ID=”ScriptManagerl”runat=”server”,>
<asp:Timer ID=”Timer1”OnTick=”Timer1Tick’’mnat=”
server”Interval=”10000”/>
<asp:UpdatePanel ID=”StockPricePanel”runat=”server”
UpdateMode=”Conditional’’>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”Timerl”/>
</Triggers>
<ContentTemplate>
Stock price is<asp:Label id=”StockPriee”runat=“server”
></asp:Label><BR/>
of<asp:Label id=”TimeOfPrice”runat=”server”></asp:aL—
bel>
</ContentTemplate>
</asp:UpdatePanel>
2.5 A『AX Control Toolkit
AJAX Control Toolkit是ASP.NET AJAX的扩展控
件包,其中包含了30多种基于ASP.NET AJAX的、提
供某一专一功能的服务器控件 AJAX C0ntrol To0lkit
构建在ASP.NET 2.0 AJAX Extensions之上.解决了三
个需要 首先.使网站开发人员有地方获取组件以更容
易的构建他们的Web应用程序:第二.它给那些要编
写客户端代码的人一个强大的示例集:第三.它是一个
使最好的脚本开发人员使工作更加突出的地方
Visual Studio 2010本身并没有自带AJAX Control
Toolkit控件.必须下载安装后才能使用。下载地址是
http://ajaxeontrohoolkit.codeplex.corn/.下载文件Aiax.
ControlToolkit.Binary.NET4.rar并解压 在Visual Studio
2010 Web项目的工具箱中.单击右键.选择“添加选项
卡”。在出现的文本框中填写“Ajax Control Toolkit”.按
回车键 然后在创建好的AJAX C0ntrol Toolkit选项卡
上单击右键,选择“选择项”.弹出“选择工具箱项”对话
框。单击“浏览”。选择AjaxControlToolkit.dl1.单击“确
定”.这样就将AJAX Control Toolkit控件添加到了工具
箱.我们可以像使用工具箱中的其他控件一样使用这
些Ajax Control Toolkit控件。
3 结语
综上所述.AJAX是指一种创建交互式网页应用的
网页开发技术。AJAX技术采用了异步调用的方式.促
使页面局部刷新.所以Web可以仅仅向服务器传送和
接收自己所需要的数据,从而减少网络流量,并可以使
Web应用程序具有更高的即时响应性.更好的可交互
性和更方便的个性化服务.使用户像使用桌面应用程
序一样使用Web应用程序[61 AJAX使数据与呈现分
离.从而可以使服务端只需要注重数据逻辑处理而不
必关心Web界面的呈现.将数据呈现的工作交给
AJAX来做,这样有利于分工合作.减少非技术人员对
页面修改造成的Web应用程序错误.提高开发效率
ASP.NET AJAX是微软公司专门为ASP.NET应用程序
提供AJAX应用框架,具有可视化的开发界面.使用
Visual Studio 2010可以轻松自如的开发AJAX程序.通
过使用ASP.NET Ajax.可以很大程度上改进用户的页
面体验.并提高Web应用程序的开发效率
参考文献
[1】怀艾芹.AJAX技术在Web系统开发中的研究及应用[J1.
计算机时代。2010(9):55~57
[2]Microsoft AJAX概述【DB/OL].http://msdn.microsoft.corrdzh—
cn/library/bb398874
【3】张正礼,王坚宁.ASP.NET 4.0从入门到精通[M】.北京:清
华大学出版社.2011
[4]仰燕兰,金晓雪,叶桦.ASP.NET AJAX框架研究及其在
Web开发中的应用[J1.计算机应用与软件,2011(6):195—
198
【5】王时绘,陈志雄,朱荣钊.ASP.NET AJAX在Web开发中的
应用【J1.计算机与信息技术,2008(Z1):48—52
[6] ̄/g.基于ASP.NET AJAX的Web开发研究及应用[D】.湖
北:武汉理工大学,2008
现代计算机 2013.04上 @
① 现代计算机201
Research on the Appl ication of AS P.N ET AJAX Tech nology
in Web Development
RUI Yue-feng
(Education Technology Center,Zhengzhou Institute of Aeronautical Industry Management,Zhengzhou 450046)
Abstract:Introduces the architecture of ASP.NET AJAX,describes how to use ScriptManager calling Web
services,UpdatePanel control to achieve partial update,UpdateProgress control to realize the
page refresh process information and the LlSe of Timer to achieve timing refresh contro1.Intro—
duces the method of installation and uses AJAX Control Toolkit,what is extended controls ASP.
NET AJAX.
Keywords:AJAX;ASP.NET AJAX;Web Development;AJAX Control Toolkit
《现代计算机》基金项目集(核心版)
征稿启事
2012年全年,《现代计算机》刊登了776篇学术论文,这些论文参与的科研项目包括:
●24项国家级科研项目
●84项省级科研项目
●118项市级科/校级研项目
2013年《现代计算机》杂志社在原来的基础上,对论文进行优化编排,将研究型论文,或者基金项
目结题论文集中安排在中旬刊发表。
我们诚挚邀请各大专院校师生、研究机构工程技术人员在项目结题时,按照科技论文的格式撰
写论文,并投递到我们的邮箱:t0ugao@modemcomputer.cn,我们会及时跟进并给相关建议,请不吝赐
稿
广东《现代计算机》杂志社
3.04上
版权声明:本文标题:ASP.NETAJAX技术在Web开发中的应用研究 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://roclinux.cn/b/1712970010a614887.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论