《ASP NET开发与应用实践》课件第10章_第1页
《ASP NET开发与应用实践》课件第10章_第2页
《ASP NET开发与应用实践》课件第10章_第3页
《ASP NET开发与应用实践》课件第10章_第4页
《ASP NET开发与应用实践》课件第10章_第5页
已阅读5页,还剩44页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

本章教学要点本章要点:10.1AJAX技术概述10.2AJAX服务器控件10.3Timer控件10.3.1Timer控件属性10.3.2Timer控件应用1思考问题?

什么是Sql注入攻击?

防范Sql注入的常用方法?210.1AJAX技术概述

31、什么是AJAX技术?

AJAX全称为AsynchronousJavaScriptandXML,

中文名称为“异步JavaScript和XML,

是一种创建高性能网页的开发技术。AJAX是几种技术的组合,每种技术都有其独特之处,多种技术组合在一起,就形成了一个功能强大的全新的AJAX技术。采用AJAX,可使得Web应用程序更具有互动性、响应更快速、用户体验更好。10.1AJAX技术概述

42、AJAX组成AJAX由几种技术的组合而成,编程人员不必重新学习一种新的语言,就能使用AJAX,AJAX包括以下几方面的内容:XMLHttpRequest:能进行异步数据接收文档对象模型(DocumentObjectModel):能进行动态显示和交互XHTML和CSS:实现网面结构重组XML和XSLT:能用于数据交互和相关操作JavaScript:将页面内容进行绑定

10.1AJAX技术概述

53、AAJAX技术AAJAX技术,是微软在VisualStudio2010及相关版本中自带的基于Web互动式开发的AJAX技术。安装VS后,VisualStudio2010在工具箱中自带部分AJAX控件,提供了更多客户端组件,可扩展功能,这些客户端组件,安装后与VisualStudio2010其它自带控件使用方法基本相同。

10.1AJAX技术概述

64、AAJAX技术优点AJAX局部刷新功能,可大大改善用户访问网页的体验,使用AJAX技术,可实现页面的局部回调,网页不必整个页面进行更新,只需要局部更新即可。AJAX拥有更佳的性能,速度更快,不必等待服务器响应,避免重新加载整个网页造成页面闪动。

10.1AJAX技术概述

71、什么叫模板?2、什么叫局部刷新?3、模板内的控件如何实现局部刷新?4、模板外的控件如何实现局部刷新?

10.2AJAX服务器控件

81、ScriptManager管理器控件ScriptManager是ASP.NETAJAX的最重要的控件,主要负责管理网站页面中的AJAX组件、客户端的Request及服务器端的Response。是所有AJAX控件的依托,用户使用AJAX时,如果不导入这一控件,所有其它的AJAX控件都无法使用。在Web中的每个Form,必须添加ScriptManager作为管理用。添加的一个ScriptManager如图10-1所示。

10.2AJAX服务器控件

91

10.2AJAX服务器控件

10添加的一个ScriptManager后,HTML代码如下所示:

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><headrunat="server"><title></title></head><body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager></form></body></html>10.2AJAX服务器控件

112、UpdatePanel控件UpdatePanel控件是一个容器类控件,页面中所使用的AJAX控件,必须放在UpdatePanel控件的框线内,才能具有AJAX的功能。

10.2AJAX服务器控件

12UpdatePanel

控件是一个服务器控件,可开发具有复杂的客户端行为的网页,使网页与最终用户之间具有更强的交互性。

可以通过声明方式向

UpdatePanel控件添加内容,也可以在设计器中通过使用

ContentTemplate属性来添加内容。

当首次呈现包含一个或多个

UpdatePanel控件的页面时,将呈现

UpdatePanel控件的所有内容并将这些内容发送到浏览器。

10.2AJAX服务器控件

133、UpdatePanel控件的使用UpdatePanel控件用于指定页面上哪个区域需要局部更新。UpdatePanel控件的部分页面更新功能是由ScriptManager服务器控件、客户端的PageRequestManager类相互协作完成的。当启用部分页更新时,控件可以通过异步方式发布到服务器。异步回发的行为与常规回发类似:生成的服务器页面执行完整的页面和控件生命周期。通过使用异步回发,可将页面更新限制为包含在UpdatePanel控件中并标记为要更新的页面区域。服务器仅将受影响元素的HTML标记发送到浏览器。

10.2AJAX服务器控件

14在页面上添加一个UpdatePanel控件显示如图10-2所示。

10.2AJAX服务器控件

15在页面上添加一个UpdatePanel控件后的HTML代码如下所示:<formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>

<asp:UpdatePanelID="UpdatePanel1"runat="server"></asp:UpdatePanel></form>10.2AJAX服务器控件

16在UpdatePanel控件的框线内添加一个标签控件后,显示如图10-3所示。

10.2AJAX服务器控件

17在UpdatePanel控件的框线内添加一个标签控件后的HTML代码如图10-4所示:

标签控件在模板之间这是模板的开始这是模板的结束

10.2AJAX服务器控件

18

在UpdatePanel控件的框线内添加一个控件后,控件将加入到UpdatePanel控件的ContentTemplate模板中。凡是加入这个模板中的控件,才能具有局部刷新功能。可以通过声明方式向

UpdatePanel控件添加内容,也可以在设计器中通过使用

ContentTemplate属性来添加内容。

4、UpdatePanel控件局部刷新案例

19下面的案例,对比一个网页的页面刷新和局部刷新功能。操作步骤如下:建立一个名为Default2的页面在页面中加入添加的一个ScriptManager控件在页面中加入添加的一个UpdatePanel控件在UpdatePanel控件的框线内,加入一名为Label1的标签控件。在UpdatePanel控件的框线内,加入一名为Button1的按钮控件。在UpdatePanel控件的框线外,加入一名为Button2的按钮控件。

4、UpdatePanel控件局部刷新案例

201

4、UpdatePanel控件局部刷新案例

21加入各个控件后HTML代码如图10-6所示。

模板开始模板结束模板内的标签控件模板内的按钮1模板外的按钮2

4、UpdatePanel控件局部刷新案例

22从图10-7中可以看出,按钮Button1和标签Label1在控件UpdatePanel的模板线内,因此具有局部刷新功能,而按钮Button2和在控件UpdatePanel的模板线外,因此不具有局部刷新功能,而是保持外有的页面全局刷新功能。

4、UpdatePanel控件局部刷新案例

23分别双击页面上的两个按钮控件,在程序栏内输入如下代码:

protectedvoidButton1_Click(objectsender,EventArgse){Label1.Text="局部刷新";}protectedvoidButton2_Click(objectsender,EventArgse){Label1.Text="页面刷新";

4、UpdatePanel控件局部刷新案例

24(10)点击屏幕上的Button1按钮,注意观察窗体左上角的页面传输状态标识,发现其没有任何反应,主要AJAX实现了局部刷新的原故,如图10-8所示。

5、UpdatePanel的触发器

25UpdatePanel控件,提供了多种刷新方式,以便用户可以实现丰富的Web功能。如表10-1,就是UpdatePanel控件的部分属性。

性功

能UpdateModeUpdateMode共有两种模式:Always与Conditional。Always是每次Postback后,UpdatePanel会连带更新;相反,Conditional只针对特定情况才会更新TriggersTriggers设置UpdatePanel的触发事件表10-1多种触发方式,5、UpdatePanel的触发器

26UpdateMode属性:决定控件的更新方式。取值:Always:每一次页面回发都会更新UpdatePanel控件中的内容。默认值。Conditional:满足条件才更新控件中的内容条件:控件的一个触发器引起了异步回发。调用UpdatePanel控件的Update方法。控件中的ChildrenAsTriggers属性被设为true,且UpdatePanel控件的一个子控件引起回发。

6、UpdatePanel的触发器在绑定模板外的控件

27如前所述,凡是在模板内控件,均有让本模板实现局部刷新的功能。如何让模板外的控件,实现对本模板的局部刷新功能呢?例:如下代码的功能是什么呢?

6、UpdatePanel的触发器在绑定模板外的控件

28<Triggers><asp:PostBackTriggerControlID="Button1"/></Triggers>

6、UpdatePanel的触发器在绑定模板外的控件

29如果按键“Button1”在模板外,但当UpdateMode=Conditional,且PostBackTriggerControlID="Button1",则“Button1”对该模板具有局部刷新功能。

7、案例:模板外的按钮实现局部刷新功能

30(1)建立如下图如示网页(2)在页面添加多个控件如图10-10所示。

第3步,在UpdatePanel控件模板内,添加Label1标签控件第1步,在页面添加ScriptManager管理器控件第2步,在页面添加UpdatePanel控件

第4步在模板外添加Button1控件

7、案例:模板外的按钮实现局部刷新功能

31(3)页面的HTML代码如下所示<formid="form1"runat="server"><divstyle="height:194px;width:531px;background-color:#FFFFFF;"><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><asp:UpdatePanelID="UpdatePanel3"runat="server"><ContentTemplate><asp:LabelID="Label1"runat="server"Text="Label"></asp:Label></ContentTemplate></asp:UpdatePanel><asp:ButtonID="Button1"runat="server"Text="Button"onclick="Button1_Click"/></div></form>上述代码表示,按钮“Button1”没有局部刷新功能。

7、案例:模板外的按钮实现局部刷新功能

32

(4)运行页面的代码,结果如图10-11所示。从运行结果看,页面没有局部刷新功能。

从这个显示观察,页面没有局部刷新功能7、案例:模板外的按钮实现局部刷新功能

33(5)选中UpdatePanel控件,击右键选择属性,在下面的属性中进行两项配置,如图10-12所示。

7、案例:模板外的按钮实现局部刷新功能

341

第1步,设置UpdateMode=Conditional第2步,设置Control1D=Button1l7、案例:模板外的按钮实现局部刷新功能

35(6)进行了相应设置后,代码如下所示。

7、案例:模板外的按钮实现局部刷新功能

36<formid="form1"runat="server"><divstyle="height:194px;width:531px;background-color:#FFFFFF;"><asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager><asp:UpdatePanelID="UpdatePanel3"runat="server"UpdateMode="Conditional"><ContentTemplate><asp:LabelID="Label1"runat="server"Text="Label"></asp:Label></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="Button1"/></Triggers></asp:UpdatePanel><asp:ButtonID="Button1"runat="server"Text="Button"onclick="Button1_Click"/></div></form>

7、案例:模板外的按钮实现局部刷新功能

37(7)页面运行后,模板运行效果如图10-13所示,模板外的按钮Button1具有了局部刷新功能。7、案例:模板外的按钮实现局部刷新功能

381

7、案例:模板外的按钮实现局部刷新功能

391、什么是AJAX?2、AJAX的主要功能?3、什么叫模板?4、什么叫局部刷新?5、模板内的控件如何实现局部刷新?6、模板外的控件如何实现局部刷新?10.3Timer控件

40Timer控件是一个服务器控件,它会将一个JavaScript组件嵌入到网页中。

当经过

Interval属性中定义的时间间隔时,该JavaScript组件将从浏览器启动回发。使用

Timer控件时,必须在网页中包括

ScriptManager类的实例。若回发是由

Timer控件启动的,则

Timer控件将在服务器上引发

Tick事件。

当页发送到服务器时,可以创建

Tick事件的事件处理程序来执行一些操作。

10.3Timer控件

4110.3.1Timer控件属性1、设定定时间隔Interval属性:指定定时间隔,以毫秒为单位,默认值为60000毫秒。2、开始和关闭定时器Enab

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论