ASP.NET AJAX初步

大连东软信息学院 大学生创业实训中心

目录
? ? ? ? ? 什么是ASP.NET AJAX ASP.NET AJAX扩展的安装 ASP.NET AJAX服务器端开发模式介绍 ASP.NET AJAX Control Toolkits介绍 客户端Javascript调用Web服务

什么是ASP.NET AJAX

什么是AJAX
? Ajax是Asynchronous JavaScript and XML的缩写，即异 步JavaScript和XML
– 一种Web开发方法，使用客户端脚本与Web服务器实现数据交互。

? Ajax特性
– 页面动态更新，不会导致整个页面完全刷新 – 很好的用户体验

Ajax异步更新原理

AJAX组成元素
? HTML和DOM
– 浏览器将HTML页面被组织成DOM对象，AJAX程序可以使用DOM，有效的 重绘页面中的部分内容

? CSS
– AJAX程序可以使用CSS修改用户界面的外观

? XML和JSON
– 用于在客户端和服务器之间传递数据 – XML是标准的数据表示格式 – JSON:Javascript Object Notation，在客户端有着优良的性能，可以减少网络 流量

? XMLHttpRequest
– AJAX的核心部分 – 允许开发者在Javascript中以异步方式向服务器发出Http请求并得到响应

? JavaScript
– Javascript将以上技术粘合在一起

AJAX构成元素

Hello Ajax World
? 建立一个first_ajax.htm页面
– 在该页面中使用XMLHttpRequest对象，异步请求服务器上的 welcome.htm页面

? Welcome.htm
– 该页面中保存着需要从服务器传递到客户端first_ajax.html中的数据

什么是ASP.NET Ajax
? 开发Ajax应用并非易事
– 浏览器兼容问题 – 熟练掌握JavaScript语言

? ASP.NET AJAX框架是AJAX技术在.net环境中的一种实现 方式 ? ASP.NET AJAX框架能够支持开发人员高效率的创建有丰富 内容、具有交互性的Web应用，而且能够跨浏览器兼容。 ? ASP.NET AJAX组成
– 客户端框架
? Microsoft Ajax Library ? ASP.NET AJAX 服务代理

– 服务器端框架
? ASP.NET AJAX 服务器控件 ? Web服务桥 ? 应用服务桥

ASP.NET Ajax体系结构图

ASP.NET AJAX扩展的安装

下载和安装ASP.NET AJAX
? 下载安装文件
– – ASPAJAXExtSetup.msi

? 双击安装
– 安装程序会注册System.Web.Extensions程序集 – 在VS2005中安装ASP.NET AJAX-Enabled Website模板

下载并安装Ajax Control Toolkit
? 下载安装文件
– – AjaxControlToolkit.zip

? 使用Ajax Control Toolkit
– 如果下载的为源代码需要先编译 – 找到AjaxControlToolkit.dll程序集

? 向VS2005中加入Toolkit控件
– 在VS2005工具箱中，新增一个Tab页 – 在新Tab页上，点击右键，选择浏览项，找到 AjaxExtensionsToolbox.dll – 所有Toolkit控件就会出现在工具箱中

ASP.NET AJAX服务器端开发模式介绍

服务器端开发使用的控件
? ? ? ? ScriptManager UpdatePanel UpdateProgress Timer

ScriptManager组件
? ScriptManager是ASP.NET AJAX的核心组件 ? 主要职责
– 负责向客户端发送javascript脚本 – 注册Web服务 – 处理异步回送中发生的异常

? 使用技巧
– 每一个asp.net ajax页面中必须有且只有一个ScriptManager组件 – 他必须先于其他Ajax服务器端控件定义，所以我们经常将其直接发在 <form id=“form1” runat=“server”>之后

? ScriptManagerProxy
– 如果在母版页中定义了ScriptManager组件，则可以在内容页中加入 ScriptManagerProxy，使该内容页拥有属于自己的ScriptManager

UpdatePanel控件
? UpdatePanel是ASP.NET AJAX中最精彩的部分 ? 他表示一个更新区域，任何放入其中的ASP.NET控件自动获 得异步更新效果 ? 演示：使用UpdatePanel更新当前时间

让UpdatePanel外部控件引发局部更新
? AsyncPostBackTrigger
– 触发UpdatePanel进行局部更新的触发器 – 可以用其指定该UpdatePanel外、将引发其更新的控件以及该控件的 某个服务器端事件

? 演示：失去焦点就能显示内容的文本框

如何使UpdatePanel中控件引发整页回送
? PostBackTrigger
– 可以使UpdatePanel内部控件进行整页更新的触发器 – 可以用其指定该UpdatePanel内的某个本来应该进行异步回送的控 件，让其进行传统的整页方式进行回送

? 演示：Panel内按钮引起整页更新

多个UpdatePanel的更新模式
? 可以在一个页面中放置多个UpdatePanel，这会引出一系列问题
– 这些UpdatePanel之间的关系是怎样的？ – 其中一个的更新会不会影响另外一个？ – 由某个UpdatePanel的触发器引发的更新会不会引发另外一些更新？

? UpdateMode － UpdatePanel用于控制更新模式的属性
– Always
? 对于别的UpdatePanel内的控件、包括自己内部的控件，只要是与服务器有交互 的，都会引起该UpdatePanel更新

– Conditional
? 只有它内部的控件或指定的触发器所引发的异步回送，才会导致自身更新

? ChildrenAsTriggers－UpdatePanel用于控制该Panel内部的控件所引 发的回送是否更新该UpdatePanel
– True：更新自身 – False：不更新自身

? 演示：两个UpdatePanel的更新情况

整页回送和异步回送
? 整页回送
– 指ASP.NET页面所进行的传统HTTP Post过程，服务器端将再次生成 页面的所有内容，而浏览器中的页面内容将在回送返回后被完全刷新

? 异步回送
– 通过XMLHttpRequest对象异步进行的回送，服务器端也将只生成某 个页面的片段并将其发送回客户端，浏览器中的页面内容将仍能够得 以保留，只是替换了局部内容

? 引起整页回送的情况
– 默认情况下，ASP.NET页面中所有的回送均为整页回送 – UpdatePanel中设置了PostBackTrigger的控件

? 引起异步回送的情况
– UpdatePanel中没有设置为PostBackTrigger触发器的控件 – UpdatePanel外被设置为AsyncPostBackTrigger触发器的控件

UpdatePanel的更新策略
? 整页回送将更新页面中所有的UpdatePanel ? 若某个UpdatePanel的UpdateMode属性为Always，则任意 的一次异步回送均将更新该UpdatePanel ? 若某个UpdatePanel的UpdateMode属性为Conditional，则 该UpdatePanel的AsyncPostBackTrigger所引发的异步回 送将更新该UpdatePanel ? 若某个UpdatePanel的UpdateMode属性为Conditional，其 ChildrenAsTriggers属性为true时，该UpdatePanel包围的 控件所引发的异步回送将更新该UpdatePanel ? 以上4条之外的情况，UpdatePanel将不会更新

在更新过程中给用户提示
? UpdateProgress控件
– 使用UpdateProgress控件可以在页面进行异步更新时，自动显示一段文本或 图片，来指示当前状态

? 代码示例如下 <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <div class="progress"> <img alt="loading" src="../images/progress.gif" /> <div>Loading...</div> </div> </ProgressTemplate> </asp:UpdateProgress> ? 演示：显示图片指示更新过程

使用Timer定时触发事件
? Timer控件将在客户端通过Javascript每隔一段时间触发一 次回送，并触发该Timer的Tick事件 ? 在ASP.NET AJAX中，Timer控件通常作为触发器配合 UpdatePanel使用，以定时更新UpdatePanel中内容 ? 主要属性和事件
– Enabled：是否可用 – Interval：代表该计时器两次触发的时间间隔，单位为毫秒。 – Tick事件：可以编写该事件的事件处理函数

? 慎用Timer频繁更新UpdatePanel ? 演示：每隔3秒更新一次系统时间显示

ASP.NET AJAX Controls Toolkits介绍

介绍
? ASP.NET Ajax Control Toolkit是微软公司和开发者社区协 作发布一个强大的ASP.NET Ajax扩展功能包 ? 它是免费、开源的ASP.NET服务器端控件包 ? 其中包含数十种基于ASP.NET Ajax的、组件化的ASP.NET 服务器端控件和扩展器控件 ? 一般分为三种类型
– 样式扩展器控件
? 为现有的ASP.NET服务器控件添加丰富的客户端功能（主要改变样式）

– 功能扩展器控件
? 致力于为现有ASP.NET服务器控件扩展客户端功能（增加、改进功能）

– 独立控件
? 比较复杂的Ajax功能封装在独立的控件中

? 对于扩展器控件一般都有TargetControlID属性，表示要扩 展的控件

学习方法
? ASP.NET Ajax Control Toolkit提供了源代码及示例程序， 是我们学习这些控件的很好的资料 ? SampleWebSite
– 该站点演示了所有控件的用法

? AjaxControlToolkit
– 是所有控件的源代码

样式扩展器控件
? ? ? ? AlwaysVisibleControl：悬浮在固定位置的面板 RoundedCorners：为面板添加圆角效果 TextBoxWatermark：带水印效果的Textbox Silder：网页上的滑动条

AlwaysVisibleControl
? AlwaysVisibleControl可以让某个控件总是悬浮在页面中相 对于浏览器窗口边框的某个指定位置上 ? 主要属性
– TargetControlID：目标控件ID，将要浮动并固定的控件ID – HorizontalOffset：目标控件距离浏览器左右边框的水平边距，单位是 象素（px） – HorizontalSide：目标控件水平停靠方向，Left（默认值）左停靠， Right右停靠 – VerticalOffset：目标控件距离浏览器上下边框的垂直边距，单位是象 素（px） – VerticalSide：目标控件垂直停靠方向，Top（默认值）靠上边停靠， Bottom靠下边停靠 – ScrollEffectDuration：当用户滚动浏览器或进行窗口缩放时，两次调 整目标控件位置的时间间隔。单位为秒，默认0.1

? 演示：形影不离的图片

RoundedCorners
? RoundedCorners扩展器控件可以为页面中的元素添加圆角 效果，能够起到柔和页面元素的作用。 ? 主要属性
– – – – TargetControlID：要实现圆角效果的Panel的ID Radius：圆角的半径，单位为象素（px） Color：圆角的颜色 Corners：指定将为目标Panel的哪个角应用圆角效果

? 演示：带圆角效果的Panel

TextBoxWatermark
? TextBoxWatermark扩展器控件可用来为ASP.NET TextBox控件添加水印效果，起到非常友好的输入提示效果。 ? 主要属性
– TargetControlID：要实现水印效果的TextBox的ID – WatermarkText：水印文字 – WatermarkCssClass：应用到水印上的Css Class

? 演示：带水印的TextBox

Silder
? Slider扩展器控件可以将TextBox控件变成一个滑动条，让 用户以鼠标拖动的方式输入某个范围内的值 ? 虽然“升级”后的TextBox与原来的Textbox从外观上看“判若 两人”，在后台代码中还是可以通过Text属性来访问“滑动条” 的所选值 ? 主要属性
– – – – – TargetControlID：将要升级为滑动条的TextBox的ID Minimum：滑动范围的最小值 Maxmum：滑动范围的最大值 Steps：滑动条的最小增量 BoundControlID：与滑动条绑定的另一个TextBox或Label的ID。滑动 条的当前值会显示在这个Textbox或Label中 – Orientation：滑动条的方向，可选Horizontal(水平)和Vertical(垂直)

? 演示：滑动条选择值

功能扩展器控件
? ? ? ? ConfirmButton：带有确认功能的按钮 FilteredTextBox：防患于未然的用户输入验证 NumericUpDown：用上下箭头调整Textbox中的值 PopupControl：帮助用户输入的面板

ConfirmButton
? ConfirmButton扩展器控件可以为现有的ASP.NET服务器端 按钮控件添加确认功能，让用户再次确认将要进行的操作。 ? 主要属性
– TargetControlID：扩展按钮ID，点击这个按钮将弹出一个Javascript 确认对话框 – ConfirmText：弹出的Javascript确认对话框中的文本

? 演示：带确认功能的按钮

FilteredTextBox
? FilteredTextBox扩展器控件可以强迫某个TextBox只接受某 种指定规则的输入，让用户无法输入不合法的数据。 ? 主要属性
– TargetControlID：将自动过滤掉不合法输入的TextBox的ID – FilterType：目标TextBox控件中允许输入的字符类型，可选Number （数字）、LowercaseLetters(小写字母)、UppercaseLetters（大写 字母）和Custom（自定义） – ValidChars：附加的合法字符连接在一起所组成的字符串

? 演示：只能输入四则运算表达式的文本框

NumericUpDown
? NumericUpDown扩展器控件可以将某个TextBox模拟成 NumericUpDown控件，即在TextBox的右边添加一对上下 箭头按钮，点击某个按钮可以相应的增加或减少TextBox中 的值 ? 主要属性
– TargetControlID：将要升级为NumericUpDown的TextBox的ID – Width：扩展后Textbox控件加上默认的上下箭头的总宽度 – RefValues：由分号（;）作为分隔符的一个列表，将被 NumericUpDown控件枚举并依次显示到TextBox的值

? 演示：默认行为的NumericUpDown文本框

PopupControl
? PopupControl扩展控件可以附加到任何控件上，当用户点 击该控件时，将弹出一个预先指定好的Panel。当该控件失 去输入焦点时，Panel将自动消失，且用户在其中进行的输 入将显示到扩展器的目标控件上。 ? 主要属性
– TargetControlID：要扩展的控件ID – PopupControlID：弹出面板Panel的ID – Position：弹出面板与目标控件位置的相对关系，可选Bottom、 Center、Left、Right、Top – CommitProperty：目标控件的一个Html属性，例如TextBox的value等 – OffsetX：弹出面板与目标控件在X方向的额外偏移量，单位像素（px） – OffsetY：弹出面板与目标控件在Y方向的额外偏移量，单位像素（px）

? 演示：带日期选择器的文本框

独立控件
? Accordion：可折叠面板的集合

Accordion
? Accordion控件中可以包含若干个面板，让用户通过点击不同面板的标 题栏一次只展开并显示其中的一个内容。 ? Accordion控件的主要属性
– – – – – SelectedIndex：初次加载时展开的AccordionPane面板的索引值 HeaderCssClass：所有AccordionPane面板的标题区域应用的CSS Class ContentCssClass：所有AccordionPane面板的内容区域应用的CSS Class FadeTransitions：是否有淡入淡出效果 TransitionDuration：展开/折叠一个AccordionPane面板的过程所花时间，单 位毫秒 – <Panes>:包含一系列的<ajaxToolkit:AccordionPane>标签，用来表示 Accordion中包含的面板 HeaderCssClass：该AccordionPane面板的标题区域应用的CSS Class ContentCssClass：该AccordionPane面板的内容区域应用的CSS Class <header>：该AccordionPane面板的标题区域的内容 <content>：该AccordionPane面板的内容区域的内容

? AccordionPane控件的主要属性
– – – –

? 演示：可折叠显示的列表

客户端异步调用Web服务

客户端调用Web Service的步骤
? 编写供客户端调用的Web Service
– 引入System.Web.Script.Services名称空间 – 为Web Service类添加ScriptService特性（标签） – 为Web Service方法添加WebMethod特性（标签）

? 将该Web Service注册到Script Manager
– <Services><asp:ServiceReference path=“MyWS.asmx”/></Services>

? 在客户端使用JavaScript调用该Web Service方法
– 以Web Service的”名称空间.类名.方法名”调用该Web Service方法

? 处理Web Service返回的数据
– 通过$get(“控件ID”)名称，得到页面上的标签，并改变它的值

? 演示：Hello World！

实现联动下拉列表框
? 使用Web Service和CascadingDropDown控件可以实现下 拉列表框联动效果，即后一个DropDownList中的选项是根 据用户在前面若干个DropDownList中的选择结果而动态生 成的 ? CascadingDropDown控件的主要属性
– – – – – – – Category：DropDownList表示的类别名称，在WebMethod中会用到 TargetControlID：指定要扩展的DropDownList的ID PromptText：没有选择时显示的文字 LoadingText：加载时的提示文本 ServicePath：获取数据的Web Service，每个DropDownList都要指定 ServiceMethod：web service中的获取数据的方法 ParentControlID ：上一级的dropdownlist的ID

? 演示：联动的下拉列表框

答疑时间

Q&A