markup,programmatically,scenario , 跟rendering应该怎么翻译?不知道我翻的对不读,请大家指教
UpdatePanel controls enable you to build richer, client-centric Web applications by refreshing selected parts of the page, instead of refreshing the entire page with a postback. When a Web page has one or more UpdatePanel controls and a ScriptManager control the page can automatically participate in partial-page updates without custom client script.
UpdatePanel 综述
简介
UpdatePanel通过刷新你所选择的页面的一部分来取代用postback刷新全部的页面的方法,使得你能够构造一个丰富的,以用户为中心的Web应用程序.当一个页面拥有1个或者更多的UpdatePanel控件和1个ScriptManager控件的时候,页面能够自动的以局部页面刷新的方式来进行提交而不需要客户端脚本控制.
This topic contains information about the following:
这个主题包含了以下几个信息:
为什么要使用UpdatePanel控件
UpdatePanel控件是怎样工作的
能够进行局部页面的提交
指定UpdatePanel 控件内容
指定UpdatePanel 触发器
理解UpdatePanel控件是怎样刷新的
在母版页中使用UpdatePanel控件
使用嵌套的UpdatePanel控件
程序化的刷新UpdatePanel
程序化的创建UpdatePanel 控件
UpdatePanel 比较控件
验证控件
Why Use UpdatePanel Controls
The UpdatePanel control is a server control that helps you develop Web pages that exhibit complex client behavior. For example, developing a Web page so that only specified parts of the client page are updated requires a high degree of specialized knowledge and coordination between server and client. By using the UpdatePanel control and a ScriptManager control, you can automatically enable your Web page to participate in partial page rendering without writing any client script. If you choose, you can additionally enhance the client user experience with additional client script. Using UpdatePanel controls makes your Web page appear more interactive to the end user. Additionally, your page behavior is browser-independent and might also potentially reduce the amount of data transferred between client and server.
为什么使用UpdatePanel控件
UpdatePanel 空间是一个能够帮助你进行Web页面开发的服务器控件,能够展示复杂的客户端行为。例如:开发一个只有指定部分刷新的客户端页面需要在服务器和客户端之间都具有很专业的知识。通过使用UpdatePanel和ScriptManager控件,你能够自动使得你的Web页面进行局部的刷新而不需要写任何客户端脚本。如果你选择,你可以使你的客户端用户体验这些客户端脚本程序。使用UpdatePanel控件使得你的Web页面在用户面前表现得更具交互式。更进一步说,你的页面事件是与浏览器无关的,而且同样能够潜在的减少客户端与服务器之间的数据传输。
How UpdatePanel Controls Work
UpdatePanel controls work by specifying regions of a page that can be updated without refreshing the entire page. This process is coordinated by ScriptManager server control and the client PageRequestManager class. When partial-page rendering is enabled, controls asynchronously post back to the server. An asynchronous postback behaves similarly to a regular postback in that the resulting server page executes the page and control life cycle. The difference is that with an asynchronous postback, the page rendering is limited to the regions of the page enclosed in UpdatePanel controls and marked to be updated. Fragments of HTML are sent back to the client, where the PageRequestManager performs Document Object Model (DOM) manipulation to replace existing HTML with updated fragments. The following illustration shows a page loaded for the first time followed by an asynchronous postback that refreshes the content of an UpdatePanel control.
UpdatePanel控件工作在一个专门的页面区域,能够在不刷新整个页面的情况下进行刷新。这个处理过程是由ScriptManager服务器控件和PageRequestManager客户端类共同控制的。当局部页面刷新可用的时候,控件向服务器异步回传。异步回传事件在服务器页面执行页面跟控件生命周期的结果上跟常规的postback 很象,不同的是使用了异步回传,页面刷新被控制在UpdatePanel 控件限制的区域里面。HTML的片段被发送到客户端,在那里PageRequestManager通过DOM用刷新过的HTML来取代已经存在的HTML。下面的图表是一个页面通过异步回传第一次被读取刷新了UpdatePanel控件里面的内容的过程。
The UpdatePanel control requires that a ScriptManager control also is present in the Web page server markup code. By default partial-page rendering is enabled because the EnablePartialRendering property default value is true on the ScriptManager.
The following example shows markup that defines a ScriptManager and an UpdatePanel control on a page. The UpdatePanel control contains a Button control that refreshes the content inside the panel when clicked. By default, the ChildrenAsTriggers property is true so that the Button is an ansychronous postback control.
You specify an UpdatePanel control's content declaratively or in the designer, using the ContentTemplate property, which is exposed as a <ContentTemplate> element in markup. If you specify content programmatically, do so using the ContentTemplateContainer property.
When a page that contains one or more UpdatePanel controls is first rendered, all the contents of the UpdatePanel controls are rendered and sent to the client. On subsequent asynchronous postbacks, each UpdatePanel controls' contents may be updated depending on the panel settings, what element caused the postback, any code specific to each panel.
专门的UpdatePanel控件内容
你在设计器上使用ContentTemplate属性定义一个UpadatePanel空间的内容,这些内容作为<ContentTemplate>的元素被标记出来。如果你要程序化的使用一个专门的内容,那就用ContentTemplateContainer 属性来做这些吧。
当一个包含一个或者多个UpdatePanel控件的页面第一次被绘制出来的时候,所有UpdatePanel 控件的内容都会被绘制并且发送到客户端。在后来的异步回传中,根据Panel 的设置,每一个UpdatePanel 控件的内容都有可能被刷新,包括哪些因素引起回传以及任何专门指向Panel 的代码。
Specifying UpdatePanel Triggers
When you use UpdatePanel controls to specify partial-page updates, by default, any control inside an UpdatePanel control causes an asynchronous postback and refresh of the panel's contents. However, you can also declaratively specify what causes an UpdatePanel control to refresh during partial-page updates. You do this by defining a trigger for the UpdatePanel. A trigger is a binding that specifies what postback control and event can cause an update of a panel's contents. When the specified control's event is raised (for example, a button's Click event), the update panel is refreshed.
The following declarative markup shows how to specify a trigger for an UpdatePanel control.
The <asp:AsyncPostBackTrigger> element inside the <Triggers> element of the UpdatePanel control defines the trigger. (If you are editing the page in Design view of the Visual Studio editor, you can create triggers with the UpdatePanelTrigger Trigger Collection Editor. For more information, see UpdatePanelTrigger Collection Editor Dialog Box.)
A trigger's control event is optional; if you do not specify an event, it defaults to the default event of the control. For example, for the Button control, the default event is the Click event.
指定UpdatePanel 触发器
当你使用UpdataPanel控件来指定局部页面进行刷新的时候,缺省的,任何在UpdatePanel控件里面的控件都会引起一个异步回传并且刷新Panel里面的内容。然而,在局部页面刷新的时候,你可以同样的说明指定是什么引起了UpdatePanel的刷新。你通过为UpdatePanel 定义一个触发器来实现这个。一个触发器是一个能够指定什么样的postback和事件能够引起Panel内容的更新的绑定。当指定的控件事件被激发的时候,例如button 的 click事件,Updatepanel里面的内容就会被刷新.
下面的代码展示了怎样为一个 UpdatePanel 控件指定一个触发器.
UpdatePanel控件的<Triggers>元素里面的<asp:AsyncPostBackTrigger>元素定义了触发器.如果你正在Visual Studio编辑器的设计视图下编辑这个页面,你可以使用UpdatePanelTrigger Trigger Collection Editor创建这个触发器.想要知道更多信息,请查看 UpdatePanelTrigger Collection Editor Dilog Box章节.
触发器的控制事件是可以选择的.如果你没有指定一个事件,那他缺省是这个控件的默认事件.例如,对于button 的控制,缺省的事件是Click 事件.
Understanding How UpdatePanel Controls Are Refreshed
The following list describes the property settings of the UpdatePanel control that determine when a panel's contents are updated during partial-page rendering:
If the UpdateMode property is set to Always, the UpdatePanel control’s contents are updated on every postback that originates from anywhere on the page. This includes asynchronous postbacks from controls that are inside of other UpdatePanel controls, and postbacks from controls that are not inside UpdatePanel controls.
If the UpdateMode property is set to Conditional, the UpdatePanel control’s contents are updated when one of the following is true:
When the postback is caused by a trigger for that UpdatePanel control.
When you explicitly call the UpdatePanel control's Update() method.
When the UpdatePanel control is nested inside of another UpdatePanel control and the parent panel is updated.
The ChildrenAsTriggers property is set to true and any child control of the UpdatePanel control causes a postback. Child controls of nested UpdatePanel controls do not cause an update to the outer UpdatePanel control unless explicitly defined as a trigger for the parent panel.
If the ChildrenAsTriggers property is set to false and the UpdateMode property is set to Always an exception is thrown. The ChildrenAsTriggers property is intended to be used only when the UpdateMode property is Conditional.
理解UpdatePanel控件是怎样刷新的
下面的清单描述了UpdatePanel控件的属性设置,这些设置决定了在局部页面呈现的过程中什么时候应该刷新Panel 里面的内容.
如果UpdateMode属性被设置为Always,那么UpdatePanel控件的内容会在这个页面任何一个地方引起postback的时候被刷新.这包含了其他的UpdatePanel里面的控件引起的异步回传和别的不在UpdatePanel里面的控件引起的回传.
如果UpdateMode属性被设置为Conditional,那么当下面的某一项为true的时候,UpdatePanel控件里面的内容才会被刷新.
当这个postback是由为这个UpdatePanel控件指定的触发器引起的时候.
当你明确的要调用UpdatePanel控件的Update()方法的时候.
当这个UpdatePanel控件是被嵌套在别的UpdatePanel里面,并且上级的UpdatePanel控件被刷新的时候.
ChildrenAsTriggers属性被设置为true并且UpdatePanel控件的任何一个子控件引起的回传.
嵌套在UpdatePanel控件里面的子控件并不会对UpdatePanel控件引起刷新,除非明确为上一级的Panel明确定义了一个触发器.
如果ChildrenAsTriggers属性被设置为false并且UpdateMode属性被设置为Always an exception is thrown.只有当 UpdateMode属性被设置为Conditional的时候,ChildenAsTriggers属性才能被使用.
Using UpdatePanel Controls in Master Pages
To use an UpdatePanel in a master page scenario, you should decide how you want to include the ScriptManager control in your Web application. If you include the ScriptManager control on the master page, you only need to use a ScriptManagerProxy control on content pages where you want to register scripts or services declaratively. If your master page does not have the ScriptManager on it, you can then put the ScriptManager control on each page where you will use an UpdatePanel control. The design choice depends on how you intend to manage client script in your application. For more information about how to manage client script, see ScriptManager Control Overview. For more information about master pages, see .
In the scenario where your ScriptManager control is on the master page and you do not need partial page rendering capabilities for a content page, you must programmatically set the EnablePartialRendering property of the ScriptManager to false.
The following example shows markup that defines a ScriptManagerProxy and an UpdatePanel control on a content page. In this example, a property named LastUpdate that is defined on the master page is referenced in the UpdatePanel control's contents.
UpdatePanel controls can be nested. If the parent panel is refreshed, all nested panels are also refreshed as well.
The following example shows markup that defines an UpdatePanel control inside another UpdatePanel control. A button in the parent panel triggers an update of the contents of both the parent and the child panel. The button in the child panel triggers an update of the child panel only.
The following code demonstrates a GridView control inside of an UpdatePanel control. For each row of the GridView control, there is a nested GridView control that is inside of a nested UpdatePanel control. When an inner GridView control navigates to a new page of records, the outer panel and the panels in the other rows of the outer GridView control are not refreshed. When the outer GridView control navigates to a new page of records, the outer panel and the nested panels are all refreshed.
The following code example demonstrates how to refresh an UpdatePanel control programmatically. In this example, a page registers a control as a trigger using the RegisterAsyncPostBackControl(Control) method and refreshes an UpdatePanel control programmatically using the Update() method.
To add an UpdatePanel control dynamically or programmatically, you create a new instance of the UpdatePanel control and add controls to it directly using the ContentTemplateContainer property and the Add(Control) method. Do not add controls directly to the ContentTemplate property. If you have developed a custom template that implements the ITemplate interface, you can set an instance of the custom template to the ContentTemplate property.
When an UpdatePanel control is added programmatically, only postbacks from controls in the same naming container that contains the UpdatePanel control can be used as explicit triggers for the panel.
The following example shows how to programmatically add an UpdatePanel control to a page. A Label and a Button control are added to the panel using the ContentTemplateContainer property. Since the ChildrenAsTriggers property is true by default the Button control is considered as an implicit trigger for the panel.
Controls that are compatible with partial-page rendering will work inside of an UpdatePanel control. Issues that could make a control not work as expected inside an UpdatePanel control include registering script using the ClientScriptManager control registration methods or rendering script directly during control rendering. Controls that are incompatible with partial-page rendering can still be used on a page outside of UpdatePanel controls.
If your control registers script using the script registration methods of the ClientScriptManager control you may be able to switch to use the script registration methods of the ScriptManager control and you may be able to use the control inside of an UpdatePanel.
与UpdatePanel兼容的控件
能够跟局部页面呈现兼容的控件将会在UpdatePanel内部工作。那些在UpdatePanel里面能够使一个控件象预期那样不工作的版本包括使用ClientScriptManager控件注册方法注册的脚本,和在控件呈现的时候直接呈现的脚本。那些与局部页面呈现不兼容的控件仍然能够在UpdatePanel控件外面使用。
The following ASP.NET controls are not supported inside of an UpdatePanel:
web parts
FileUpload control when the submitted file is attempted as an asynchronous postback.
GridView and DetailsView when the EnableSortingAndPagingCallbacks property is set to true. The default is false.
Login, PasswordRecovery, ChangePassword, and CreateUserWizard controls that have not been converted into editable templates.
下面的ASP.NET控件在UpdatePanel内部是不被支持的。
TreeView和 Menu
Webparts
FileUpload控件,当提交文件打算作为异步回传的时候。
Gridview和DetailsView,当EnableSortingAndPagingCallBacks属性被设置成true的时候,这些属性的默认值是False
没有被转换成可编辑的模版的Login,PasswordRecovery,ChangePassword和CreateUserWizard控件
To use a Login, ChangePassword, or PasswordRecovery control inside of an UpdatePanel control, in Design view, choose the SmartTag option Convert to Template to convert the control into an editable template. Similarly, for the CreateUserWizard control, in Design view, choose the SmartTag option Customize Create User Step to convert the control into an editable template. When you convert these controls into editable templates, the validators used in the control are then defined declaratively and the validators shipped with Microsoft ASP.NET 2.0 AJAX Extensions are used.
To use a FileUpload control inside of an UpdatePanel control, set the postback action that submits the file as a PostBackTrigger for the panel.
要在UpdatePanel中使用Login,ChangePassword和PasswordRecovery控件,可以在设计视图中选择SmartTag选项,Convert to Template把控件转换成可编辑模版。同样的,对于CreateUserWizard控件,可以在设计视图中选择 SmartTag选项Customize Create User Step把控件转换成可编辑模版,当你把这些控件转换成为可编辑模版的时候,在控件里面的validators会被申明,然后这些validator就会跟Microsoft ASP.NET 2.0 AJAX Extension一起被使用。
要在UpdatePanel里面使用FileUpload 控件,需要把postback事件作为一个 PostBackTrigger来提交文件。
Validation Controls
The validator controls in Microsoft ASP.NET 2.0 AJAX Extensions are compatible with partial-page rendering. When you drag the CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, or ValidationSummary control from the Toolbox to your Web page in Design view or add the declarative markup directly to your page in Source view, you will automatically be using the ASP.NET 2.0 AJAX Extensions validators because of the tag mapping in the Web.config file. For more information, see the tagMapping element. If you are specifying validators programmatically for use inside of an UpdatePanel control, use the Microsoft ASP.NET 2.0 AJAX Extensions validators in the Microsoft.Web.UI.Compatibility namespace.
验证控件
在Microsoft ASP.NET 2.0 AJAX Extension里面的验证控件与局部页面呈现是互相兼容的。当你在设计视图下,从工具箱里面把CompareValidator,CustomValidator,RangeValidator,RegularExpressionValidator,RequiredFieldValidator或者是ValidationSummary控件拖到你的Web页面上来的时候或者直接在html 视图中申明这些标记,由于Web.config文件里面标记的原因,你将会自动的使用ASP.NET 2.0 AJAX Extensions validators 。想要知道更多的信息,查看tagMapping标记。如果你为了在 UpdatePanel里面程序化的指定验证控件,你可以使用Microsoft.Web.UI.Compatibility命名空间里面的Microsoft ASP.NET 2.0 AJAX Extensions validators 。
Member |
Description |
---|---|
A server control that specifies parts of a Web page that can participate in partial-page updates. |
|
A server control that manages partial-page rendering. The ScriptManager control registers script components to send to the client and overrides page rendering so that only designated parts of the page are rendered. |
|
A server control that enables nested components to add script and service references to nested components (e.g. pages) that already contain a ScriptManager control in a parent element. |
|
A class in the Microsoft AJAX Library that coordinates partial-page rendering on the client. The PageRequestManager asynchronously sends information to and receives information from the server, and exposes events and methods for custom client script development. |
The following sections include code examples for creating and using UpdatePanel controls.