.Net源码论坛 [ 繁体中文 ]

发新话题 回复该主题

了解使用 ASP.NET AJAX 进行局部页面更新2 [复制链接]

楼主
定制控件注释 可以向任何用户控件或定制控件添加 UpdatePanel。但这些控件所在的页面必须包含一个 ScriptManager 控件,且其EnablePartialRendering属性被设为 true
使用 Web Custom Controls时,添加UpdatePanel 的一个方法就是覆写CompositeControl类的受保护的 CreateChildControls()方法。这样,如果您确定页面支持局部解析,就可以向控件的子控件和外部之间插入一个UpdatePanel;否则,您可以直接将子控件放入一个容器Control 实例中。
UpdatePanel 注意事项UpdatePanel 的运行类似于一个黑匣子,它在 JavaScript XMLHttpRequest的内部将 ASP.NET 回传进行包装。但其在行为和速度方面的性能都有一些重要事项需要牢记于心。要了解UpdatePanel 的原理以便能从最佳的角度决定其使用,就应检查AJAX 交换。下面的示例使用一个现有的网站以及安装了Firebug 扩展的 Mozilla Firefox (Firebug 获取 XMLHttpRequest 数据)。
试想在一个表单中,除了其他元素还有一个邮政编码文本框,用于填充表单或控件上的城市和国家字段。此表单最后将收集成员信息,包括用户的姓名、地址及联系方式。根据特定项目的不同要求,设计时有多个事项需要考虑。
您所在的用户组无法下载或查看附件


在该应用的原迭代中,建立了一个控件,包含完整的用户注册数据,其中就有邮政编码、城市和国家信息。整个控件都包装在一个UpdatePanel 中,并被拖放到一个 Web 表单上。用户输入邮政编码时,UpdatePanel 检测到事件(后端对应的TextChanged 事件,通过指定触发器或使用设为true 的ChildrenAsTriggers 属性实现)。AJAX 将所有字段放入 UpdatePanel,这些字段就是 FireBug 获取的数据(参见右面的图示)。
如屏幕截图所示,UpdatePanel中每个控件的值以及ViewState字段都被传递了(本例中都为空)。发送的数据总共有9kb,而产生此特定请求需要的数据只有5 字节。而响应则更大:总共有57kb 发送到客户端,作用仅是更新一个文本字段和一个下拉字段。
来看看 ASP.NET AJAX 如何更新显示也许很有意思。UpdatePanel 的更新请求的响应部分是在左面的 Firebug 控制台显示上显示的。这是一个专门生成、用竖线分隔的字符串,由客户端脚本打乱顺序,然后在页面上重新组合起来。ASP.NET AJAX 特地在表示您的 UpdatePanel 的客户端上设置 HTML 元素的 innerHTML 属性。由于浏览器要重新生成DOM,将会有短暂延迟,时间根据需要处理的信息量而定。
重新生成 DOM 将触发多个其他事件:
您所在的用户组无法下载或查看附件




  • 如果焦点 HTML 元素是在 UpdatePanel 中的,将成为非焦点元素。因此,按下Tab 键以退出邮政编码文本框的用户,接下来将进入City 文本框。但一旦 UpdatePanel 刷新了显示,表单就不会有焦点,按下Tab 键将开始突出显示焦点元素(如链接)。
  • 如果有任何类型的定制客户端脚本处于使用中,且使用过程需要访问 DOM 元素,那么功能所保存的引用可能在局部回传后消失。
UpdatePanel 并不是能解决一切问题的办法。它们只是为特定情况提供快速解决方案,包括建模、小控件更新等,并为熟悉.NET 对象模型但不熟悉DOM 的ASP.NET 开发者提供一个熟悉的界面。根据不同的应用场景,有多种办法可用于提升性能:
  • 如果开发者考虑使用 PageMethods 和 JSON (JavaScript 对象注解),可以如同调用 Web 服务一样在页面上调用静态方法。由于这些方法是静态的,因此不需要状态。脚本调用程序提供参数,将返回异步结果。
  • 如果需要在同一个应用程序的多个不同位置使用某一个控件,则考虑使用一个 Web 服务和 JSON。这也需要少量的额外工作,且是异步运行的。
通过 Web 服务或页面方法集成功能也有其缺点。首先最重要的是,ASP.NET 开发者通常倾向于在用户控件(.ascx files)中建立小的功能组件。页面方法不能包含在这些文件中,只能包含在实际的.aspx 页面类中。而与此相似,Web 服务也必须包含在 .asmx 类中。根据应用程序不同,这种体系结构可能与单个职责原则相冲突。因为单个组件的功能现在跨越了联系很小甚至没有的两个或多个物理组件。
最后,如果应用程序要求使用UpdatePanel,下面这些原则将有助于故障排除和维护。
  • 尽量不嵌套UpdatePanel,不论是在代码单元内部嵌套或跨代码单元嵌套都应避免。例如,页面上有一个包装了一个Control 的 UpdatePanel,而此 Control 也包含一个 UpdatePanel,后者又包含另一个 Control,此 Control 又包含 一个 UpdatePanel,则是跨单元嵌套。这将有助于搞清楚哪些元素应被刷新,避免出现对子UpdatePanel 的意外刷新。
  • 保持ChildrenAsTriggers属性设为false,且明确设置触发事件。利用 <Triggers>集合可以更清楚地处理事件,且能避免不必要的操作,从而有助于维护任务的执行,且促使开发者“决定参与”某个事件。
  • 尽可能使用最小的单元来实现功能。正如邮政编码服务示例中的讨论所示,只包装最少的内容可以减少到服务器的时间、总处理以及占用的客户端-服务器交换,从而提升性能。
UpdateProgress控件UpdateProgress控件引用标记启用的属性:

属性名称
类型
说明
AssociatedUpdate-PanelID
String
指定此 UpdateProgress应对其报告的 UpdatePanel 的 ID。
DisplayAfter
Int
指定在异步请求开始后到显示控件前的超时毫秒数。
DynamicLayout
bool
指定是否动态呈现进度。
子代标记:

标签
说明
<ProgressTemplate>
包含将用此控件显示的内容的控件模板集。
UpdateProgress控件可用于进行反馈,以便在向服务器传输时保持用户的兴趣。它可以帮助您的用户知道您正在执行某项操作,这项操作甚至会是不太直观的。在大多数用户已经习惯了页面更新和查看状态栏高亮显示的情况下,这尤其有用。
注意,UpdateProgress控件可以在页面层级结构中的任何位置显示。但如果局部回传是从某个子 UpdatePanel (嵌套在另一个 UpdatePanel 中的一个UpdatePanel)发起的,触发此子 UpdatePanel 的触发器将显示子UpdatePanel 以及父UpdatePanel 的UpdateProgress模板。但如果触发器是UpdatePanel 的一个直接子UpdatePanel,那么只显示与父UpdatePanel 相关联的UpdateProgress模板。
小结Microsoft ASP.NET AJAX 扩展属于尖端产品,旨在协助以使 web 内容更易于访问,并为您的 web 应用程序提供更丰富的用户体验。作为ASP.NET AJAX Extensions 的一部分,局部页面呈现控件,包括ScriptManager、UpdatePanel 和UpdateProgress 控件,都是工具箱中最明显的一些组件。
ScriptManager 组件集成了 Extensions 的客户端 JavaScript 提供功能,并启用了多种服务器端和客户端组件,将开发成本减到最低。
UpdatePanel 控件是明显的“魔法箱”:UpdatePanel 中的标记可以有服务器端的Codebehind且不触发页面刷新。UpdatePanel 控件可以嵌套,也可与其他UpdatePanel 中的控件相关联。默认情况下,UpdatePanel 对所有其子代控件调用的回传都进行处理,但您也可声明或通过编码对其进行调整。
使用 UpdatePanel 控件时,开发者应了解可能产生的性能影响。可能的替代方案包括web 服务和页面方法,但也应考虑到应用程序的设计问题。
UpdateProgress控件可以使用户知道操作仍在进行中,以及在页面未对用户输入进行任何响应时,幕后的请求正在执行。它还提供了放弃局部解析结果的功能。
通过降低服务器的运行对用户的可见性以及保持工作流的连续性,这些工具共同创建丰富无缝的用户体验。
快乐编程!
最后编辑btree 最后编辑于 2011-01-19 11:30:24
本主题由 管理员 capad 于 1/28/2011 2:11:56 PM 执行 移动主题 操作
分享 转发
TOP
发新话题 回复该主题