Event Order Example 【事件顺序的例子】
下面的这个例子展示了在一个存在有两个嵌套的 UpdatePanel 控件的页面的客户端事件将被如何引发。请注意点击父 panel 中的按钮的和内嵌的 panel 中按钮的区别。在父 panel 中的按钮将引起父 panel 的更新，和嵌在其中的 panel 将被删除并重新创建。内嵌 panel 的按钮仅引起内嵌 panel 的更新。
页面代码：
1<%@ Page Language="C#" %>
2
3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5
6<script runat="server">
7
8</script>
9
10<html xmlns="http://www.w3.org/1999/xhtml" >
11<head runat="server">
12 <title>Client Event Example</title>
13 <style type="text/css">
14 #OuterPanel { width: 600px; height: 200px; border: 2px solid blue; }
15 #NestedPanel { width: 596px; height: 60px; border: 2px solid green;
16 margin-left:5 px; margin-right:5px; margin-bottom:5px;}
17 </style>
18</head>
19<body>
20 <form id="form1" runat="server">
21 <div>
22 <asp:ScriptManager ID="ScriptManager1" runat="server">
23 <Scripts>
24 <asp:ScriptReference Path="ClientEventTest.js" />
25 </Scripts>
26 </asp:ScriptManager>
27 <asp:UpdatePanel ID="OuterPanel" UpdateMode="Conditional" runat="server">
28 <ContentTemplate>
29 Postbacks from inside the outer panel and inner panel are
30 asynchronous postbacks. PRM = Sys.WebForms.PageRequestManager. APP = Sys.Application.
31
32 <br /><br />
33 <asp:Button ID="OPButton1" Text="Outer Panel Button" runat="server" />
34 Last updated on
35 <%= DateTime.Now.ToString() %>
36 <br /><br />
37
38 <asp:UpdatePanel ID="NestedPanel" UpdateMode="Conditional" runat="server">
39 <ContentTemplate>
40 <asp:Button ID="NPButton1" Text="Nested Panel 1 Button" runat="server" />
41 Last updated on
42 <%= DateTime.Now.ToString() %>
43 <br />
44 </ContentTemplate>
45 </asp:UpdatePanel>
46 </ContentTemplate>
47 </asp:UpdatePanel>
48
49 <input type="button" onclick="Clear();" value="Clear" />
50
51 <asp:Button ID="FullPostBack" runat="server" Text="Full Postback" />
52 <a href="http://www.microsoft.com">Test Window Unload</a>
53 <br />
54 <span id="ClientEvents"></span>
55 </div>
56 </form>
57</body>
58</html>
59
脚本代码：
1// Hook up Application event handlers.
2var app = Sys.Application;
3app.add_load(ApplicationLoad);
4app.add_init(ApplicationInit);
5app.add_disposing(ApplicationDisposing);
6app.add_unload(ApplicationUnload);
7
8
9// Application event handlers for component developers.
10function ApplicationInit(sender) {
11 var prm = Sys.WebForms.PageRequestManager.getInstance();
12 if (!prm.get_isInAsyncPostBack())
13 {
14 prm.add_initializeRequest(InitializeRequest);
15 prm.add_beginRequest(BeginRequest);
16 prm.add_pageLoading(PageLoading);
17 prm.add_pageLoaded(PageLoaded);
18 prm.add_endRequest(EndRequest);
19 }
20 $get('ClientEvents').innerHTML += "APP:: Application init. <br/>";
21}
22function ApplicationLoad(sender, args) {
23 $get('ClientEvents').innerHTML += "APP:: Application load. ";
24 $get('ClientEvents').innerHTML += "(isPartialLoad = " + args.get_isPartialLoad() + ")<br/>";
25}
26function ApplicationUnload(sender) {
27 alert('APP:: Application unload.');
28}
29function ApplicationDisposing(sender) {
30 $get('ClientEvents').innerHTML += "APP:: Application disposing. <br/>";
31
32}
33// Application event handlers for page developers.
34function pageLoad() {
35 $get('ClientEvents').innerHTML += "
AGE:: Load.<br/>";
36}
37
38function pageUnload() {
39 alert('Page:: Page unload.');
40}
41
42// PageRequestManager event handlers.
43function InitializeRequest(sender, args) {
44 $get('ClientEvents').innerHTML += "<hr/>";
45 $get('ClientEvents').innerHTML += "
RM:: Initializing async request.<br/>";
46}
47function BeginRequest(sender, args) {
48 $get('ClientEvents').innerHTML += "
RM:: Begin processing async request.<br/>";
49}
50function PageLoading(sender, args) {
51 $get('ClientEvents').innerHTML += "
RM:: Loading results of async request.<br/>";
52 var updatedPanels = printArray("
anelsUpdating", args.get_panelsUpdating());
53 var deletedPanels = printArray("PanelsDeleting", args.get_panelsDeleting());
54
55 var message = "-->" + updatedPanels + "<br/>-->" + deletedPanels + "<br/>";
56
57 document.getElementById("ClientEvents").innerHTML += message;
58}
59function PageLoaded(sender, args) {
60 $get('ClientEvents').innerHTML += "PRM:: Finished loading results of async request.<br/>";
61 var updatedPanels = printArray("PanelsUpdated", args.get_panelsUpdated());
62 var createdPanels = printArray("PaneslCreated", args.get_panelsCreated());
63
64 var message = "-->" + updatedPanels + "<br/>-->" + createdPanels + "<br/>";
65
66 document.getElementById("ClientEvents").innerHTML += message;
67}
68function EndRequest(sender, args) {
69 $get('ClientEvents').innerHTML += "PRM:: End of async request.<br/>";
70}
71
72// Helper functions.
73function Clear()
74{
75 $get('ClientEvents').innerHTML = "";
76}
77function printArray(name, arr)
78{
79 var panels = name + '=' + arr.length;
80 if(arr.length > 0)
81 {
82 panels += "(";
83 for(var i = 0; i < arr.length; i++)
84 {
85 panels += arr[i].id + ',';
86 }
87 panels = panels.substring(0, panels.length - 1);
88 panels += ")";
89 }
90 return panels;
91}
92
运行效果 查看代码
Event Order for Common Scenarios【一般事件发生顺序】
事件触发顺序还是要看在页面中使用了什么控件和发生了什么类型的请求（初始化请求，传统回送或是异步回送）。这部分将描述几种常见情景的事件请求顺序。
Initial Request 【初始化请求】
在一个页面初始化请求过程中，少量的客户端事件被引发。假设下面就是初始化请求的情景。
· 页面包括一个 ScriptManager 控件，并且该控件的 SupportsPartialRendering 和 EnablePartialRendering 属性都为 true。
· 请求是 GET 类型；
· 服务器能正常响应。
下面是客户端事件发生的顺序：
1、初始化请求发生给服务器。
2、客户端接收到响应。
3、Application 实例引发 init 事件。
4、Application 实例引发 load 事件。
初始化事件仅在整个页面生命周期过程中的应用程序实例化时发生一次。它不会被后来的异步回送所引发。在初始化请求（注意是请求）期间，没有任何的 PageRequestManager 事件被引发。
Asynchronous Postback 【异步回送】
一个异步回送发送了一些页面数据到服务器，并接收一个服务器端的响应，然后刷新页面的一部分。假定下面一个异步回送的场景：
· 页面包括一个 ScriptManager 控件，并且该控件的 SupportsPartialRendering 和 EnablePartialRendering 属性都为 true。
· 页面存在一个 UpdatePanel 控件，并且改控件的 ChildrenAsTriggers 属性值为 true。
· 在 UpdatePanel 里面有一个按钮用于引发异步回送。
· 成功地从服务器端获得响应。
下面是客户端事件发生的顺序：
1、点击 UpdatePanel 控件中的按钮时，引起了一个异步回送。
2、PageRequestManager 实例引发了 initializeRequest 事件。
3、PageRequestManager 实例引发了 beginRequest 事件。
4、请求被发送到服务器。
5、客户端接收到了响应。
6、PageRequestManager 实例引发了 pageLoading 事件。
7、PageRequestManager 实例引发了 pageLoaded 事件。
8、Application 实例引发了 load 事件。
9、PageRequestManager 实例引发了 endRequest 事件。
请注意应用程序的 load 事件在 PageRequestManager 的 pageLoaded 事件之后，和 endRequest 事件之前。
Multiple Asynchronous Postbacks 【多个异步回送】
当之前的一个请求正在服务器端或浏览器中运行时，用户又发送了一个新的请求时，则发生了多个异步回送。假设下面的场景描述了多个异步回送的情况。
· 页面包括一个 ScriptManager 控件，并且该控件的 SupportsPartialRendering 和 EnablePartialRendering 属性都为 true。
· 页面包含一个 UpdatePanel 控件。
· 在 UpdatePanel 中有一个引发异步回送的按钮控件被点击两次。第二次的点击发生在服务器端正在处理第一次点击发起的请求。
· 获得了从服务器端返回的对第一次请求的响应。
下面是客户端事件发生的顺序：
1、点击 UpdatePanel 中的按钮引发了一次异步回送。
2、PageRequestManager 实例引发了 initializeRequest 事件。
3、PageRequestManager 实例引发了 beginRequest 事件。
4、请求被发送到服务器。
5、客户端接收到了响应。
6、按钮被再次点击，引发了第二次异步回送。
7、PageRequestManager 实例为第二次点击引发了 initializeRequest 事件。
8、PageRequestManager 实例为第二次点击引发了 beginRequest 事件。
9、第二次点击的请求北伐扫到了服务器。
10、客户端接收到了第二次点击的响应。
11、PageRequestManager 实例引发了 pageLoading 事件。
12、PageRequestManager 实例引发了 pageLoaded 事件。
13、Application 实例引发了 load 事件。
14、PageRequestManager 实例引发了 endRequest 事件。
默认的异步回送行为是最近发生的异步回送优先级较高。如果两个异步回送按顺序发生，并且第一个异步回送仍在浏览器处理中，则第一个回送被取消了。如果第一个回送已被发送到了服务器端，则服务器在第二个请求到来之前是不会返回第一个请求的。更多关于如何为异步回送设置优先级的详情请参考 Giving Precedence to a Specific Asynchronous Postback.
Browsing Away from a Page 【浏览其它页】
当用户从一个页面访问其它页面时，当前的页面会从浏览器中卸载，因此你可以操作 unload 事件来释放资源。假定下面模拟了这一场景。
· 页面包括一个 ScriptManager 控件，并且该控件的 SupportsPartialRendering 和 EnablePartialRendering 属性都为 true。
· 目标页面存在。
下面是客户端事件发生的顺序：
1、发动一个请求新页面的请求。
2、浏览器获得请求新页面的响应。
3、Application 实例引发 unload 事件。
4、显示了新页面。
如果在请求新页面时发生了错误，unload 事件依然会被引发，但是新页面不会被显示出来。
---[url]http://www.cnblogs.com/valens/archive/2007/06/11/779474.html[/url]
