ASP.NET AJAX Doc 翻译 - Enhancing Existing Applications with ASP.NET AJAX Extensions
使用ASP.NET AJAX扩展改善现有应用程序
简介
ASP.NET Web页面提供了基于用户页面操作的从客户端到服务器端的回发机制。当服务器渲染回发后页面的新版本的时候,它经常重新渲染在前后两次回发之间没有设么变化的用户界面。这样用户就不能从实际出发选择那些真正改变的用户界面去进行渲染。
此教程将向你战线的是Microsoft ASP.NET 2.0 AJAX扩展如何通过创建AJAX风格的交互Web用户界面来提高你的Web应用程序的用户体验的。你可以为Web页面更新局部页面。在局部页面更新的时候,只有部分Web页面改变并被更新。结果是页面受最小的影响而你的Web应用程序行为看取来就更像是一个客户端桌面应用程序。
使用ASP.NET 2.0 AJAX扩展你能创建拥有AJAX功能的新页面,或者你可以使用局部页面更新扩展已存在的ASP.NET 2.0应用程序。ASP.NET 2.0 AJAX扩展提供一个强大的声明语法模型使得局部页面更新变得非常容易。你可以使用类区开发额外的客户端功能。更多信息参见 Customizing Partial-Page Rendering with Client Scripting。
此教程覆盖了如何添加局部页面更新到已存在的Web页面。同样也描述了如何和新的ASP.NET 2.0 AJAX扩展服务器控件一起工作:ScriptManager 和 UpdatePanel 控件。
局部页面更新
在这里你将学习到局部页面更新的基本知识。
使用局部页面更新
通过添加一个ScriptManager 控件到页面来为已存在的Web页面增加局部页面更新能力。 ScriptManager 控件生命周期在服务器上与ASP.NET页面一致,所以局部页面渲染激活的时候,只有指定部分的页面被更新。通过把要更新的部分页面的标记和控件放入到UpdatePanel控件来指定要更新的页面区域。
ScriptManager控件的 EnablePartialRendering 属性决定你Web页面的局部页面是否要更新。默认 EnablePartialRendering 属性为true,你并不需要显示地去设置它。如果EnablePartialRendering 属性为 false,局部页面渲染对此页面将失去作用,并且页面行为是每次回发都刷新页面。
检查在回发中是否是局部页面渲染模式,要使用页面上ScriptManager 控件实例的IsInAsyncPostBack属性。通过Page 控件的IsPostBack 属性你可以使用基于自然回发的服务器逻辑。例如,在部分用户界面更新的时候,可能会需要一些这样的逻辑。
异步回发
当一个页面被设置为局部页面渲染,从控件发出的回发将根据异步回发进行局部页面渲染。异步回发病不冻结或隐藏用户在回发触发时与页面的交互。
当局部页面渲染的时候,异步回发产生类似的行为,此行为作用于所有POST数据,包括ViewState,这些数据将被送回到服务器端处理。与异步回发不同的是,只有局部页面的用户接口的更新被送回,而在回发中是整个的用户接口被送回到页面响应中。
局部页面渲染的声明标记
如下对于ASP.NET Web页面的声明标记向你展示了如何使用 ScriptManager和UpdatePanel 控件在页面中一同工作。
CS
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <ContentTemplate> UpdatePanel content refreshed at <%=DateTime.Now.ToString() %> <asp:Button ID="Button1" Text="Refresh" runat="server" /> </ContentTemplate> </asp:UpdatePanel>
VB
<asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server"> <ContentTemplate> UpdatePanel content refreshed at <%=DateTime.Now.ToString() %> <asp:Button ID="Button1" Text="Refresh" runat="server" /> </ContentTemplate> </asp:UpdatePanel>
<ContentTemplate>元素制定了局部页面渲染需要更新的页面部分。当你查看一个包含UpdatePanel 控件页面的HTML内容时,你会发现每个UpdatePanel控件都被渲染成了DIV元素,并使用相同的ID属性,这个ID属性是你在UpdatePanel 控件中指定的。
局部页面更新示例
如下示例演示了如何添加局部页面渲染功能到一个ASP.NET Web页面。在此示例中,一个 Wizard 控件放在一个UpdatePanel 内部所以当用户帐号创建,页面就会进入下一步骤,其间进行局部页面的更新。
因为UpdatePanel 控件默认把ChildrenAsTriggers 属性设置为真,所以任何来自UpdatePanel内部的回发包括按钮的点击都会创建一个用户的异步回发。
更多关于在Web页面使用局部页面更新的内容,参考How to: Enable Partial-Page Updates。
为局部页面更新指定触发器
什么是触发器?
当你使用UpdatePanel 控件指定局部页面更新的时候,默认所有其内部的组件都产生回发来替代异步回发,并且进行一个此面板的局部页面更新。
尽管如此,你能够控制回发产生的时间和条件。你可以指定 UpdatePanel 外的控件产生一次回发。你也能指定什么时候进行一次异步回发或者什么时候更新整个页面。
当使用触发器的时候你可以控制 UpdatePanel 控件的刷新行为。触发器是一直绑定的,来指定回发事件如何更新面板内容。 触发器为每个控件指定ID和事件。当被指定的控件事件被激发的时候(例如一个按钮的Click 事件),目标控件就会产生一个异步回发并且更新面板。
控件事件是可选的,如果不指定事件,则为控件指定默认事件。例如Button 控件的默认事件就是Click事件。
显式声明指定触发器
如下标记的显式声明展示了如何为UpdatePanel 控件指定一个触发器。
UpdatePanel的<Triggers> 元素内的 <AsyncPostBackTrigger> 元素定义了一个触发器。(如果你使用Visual Studio编辑器的设计视图编辑页面,你可以通过UpdatePanelTrigger 触发器集合编辑器来创建触发器。)
在处理的情况下,触发器指定控件来产生异步回发。在示例中, Button 控件不在UpdatePanel 控件中却产生回发。
你也可以在你希望一个 UpdatePanel 内部控件触发回发并且更新整个页面的时候使用触发器来实现。常见此类型的触发器,需要在<Triggers>元素内创建一个<asp:PostBackTrigger> 元素。你可以使用触发器作用于FileUpload控件的提交按钮,因为FileUpload 控件与局部页面渲染不兼容。更多信息参照 PostBackTrigger 类概述。
在更多场合中使用显式声明的方式指定触发器。为了节省编成的效率,你可以使用ScriptManager控件的RegisterAsyncPostBack-Control(Control) 方法注册控件,这会隐式调用UpdatePanel控件的Update() 方法来进行更新。
如果在一个UpdatePanel控件上定义了多个触发器, <Triggers>集合中触发器定义的顺序不受影响。
了解UpdatePanel刷新
你可以用把控件放入到UpdatePanel 控件的方法来控制回发,使用默认的触发器,并且使用代码在一定条件下对 UpdatePanel 控件进行刷新。
如下列表描述了 UpdatePanel 控件的属性设置如何在局部页面渲染的时候对Panel的内容产生影响。
-
如果UpdateMode 属性设置为Always,UpdatePanel 控件的内容在每次回发的时候都更新。这包含其它UpdatePanel控件或者UpdatePanel 控件以外的控件引起的异步回发。
-
如果 UpdateMode 属性设置为Conditional,UpdatePanel 控件在满足如下条件之一使进行更新:
-
当回发是由UpdatePanel控件的触发器产生的时候。
-
当你显式地调用UpdatePanel 控件的Update() 方法的时候。
-
当 UpdatePanel 控件在另一个UpdatePanel 控件中而上级Panel更新的时候。
-
-
ChildrenAsTriggers 属性设置为true的时候UpdatePanel 控件的所有子控件产生一个回发。嵌入 UpdatePanel 控件的子控件并不向外面的 UpdatePanel 控件发送更新请求除非定义了上级Panel的触发器。
-
如果 ChildrenAsTriggers 属性设置为false,而且 UpdateMode 属性设置为Always,那么将抛出一个异常。 ChildrenAsTriggers 属性隐式地只能在 UpdateMode 属性设置为Conditional的时候使用。
触发器示例
如下示例展示了如何通过声明方式来指定UpdatePanel控件外面的控件来触发一个异步回发并更新Panel的内容。 此示例包括一个文本框和一个提交按钮产生搜索结果并显示在一个 GridView 控件上。搜索结果数据设置可以使用controlSQL Server示例中的Northwind数据库。
触发器指定了提交按钮的ID。按钮的默认事件,假定是Click 事件。
更多指定触发器的信息可以参考:How to: Declaratively Specify Triggers for Partial-Page Rendering.
Master页面中的局部页面渲染
为Master页面设计局部页面更新需要一些与在普通ASP.NET页面中不同的更新技术。
使用ScriptManagerProxy控件
为了支持局部页面更新,ASP.NET Web页面需要一个 ScriptManager控件。尽管如此,你却不能在一个页面上声明多个ScriptManager 。如果你的Web页面引用一个Master页面,你不能在Mster页面和内容页面中同时使用ScriptManager 控件。这种情况下可以使用ScriptManagerProxy 控件。
为了在Master页面中使用 UpdatePanel 控件,可以在Master页面上放置一个 ScriptManager 控件并且在每个包含UpdatePanel 控件的的内容页面中放置一个 ScriptManagerProxy 控件。当然也可以在每个内容页面上放置一个 ScriptManager 控件而在Master页面中不放置。一般都是在所有内容页面包含UpdatePanel 控件的时候放置一个ScriptManager 控件到Master页面。
ScriptManagerProxy声明标记
如下示例展示了一个包含ScriptManager控件的Master页面和一个包含了ScriptManagerProxy控件的内容页面。
Master页面局部页面渲染示例
如下示例展示了一个包含ScriptManager 控件的Master页面和包含ScriptManagerProxy与UpdatePanel控件的内容页面的场景。内容页面显示从Northwind数据库返回的产品查询结果。查询结果显示在UpdatePanel内的GridView控件中。
为内容页面禁用局部页面渲染
如果你在Master页面上定义一个 ScriptManager 控件但是不希望为一个内容页面激活局部页面渲染,你可以禁用内容页面的局部页面渲染功能。你也可以让你的内容页面包含不兼容局部页面刷新的自定义组件。
ScriptManager控件的 EnablePartialRendering 属性默认设置为true。为了禁用内容页面的局部页面渲染,你可以手动编程在内容页面的Init上或之前设置Master页面ScriptManager控件实例的 EnablePartialRendering 属性为false。 (ScriptManagerProxy 并不曝露一个公共接口来设置局部页面渲染的模式。)使用 FindControl(String) 方法可以在Master页面上找到 ScriptManager 控件。