UpdatePanel的简单用法(3) --客户端编程2

PageRequestManager -beginRequest事件

参数 BeginRequestEventArgs

      参数属性：request属性 获得WebRequest对象(用于请求的信息)

                     postBackElement 触发异步刷新的dom元素

常用操作：

--读取请求信息

--改变请求方式

--显示更新提示

如果updateprogress绑定了一个updatePanel的Id,则只有updatePanel内部的刷新请求能触发updateprogress的状态

如果外部触发了一个刷新请求，也需要updatepanel 显示状态，那么就需要手动写代码强制显示

先看看asp.net ajax的updateprogress实现原理：

1. Sys.WebForms.PageRequestManager.registerClass('Sys.WebForms.PageRequestManager');
2. Sys.UI._UpdateProgress = function Sys$UI$_UpdateProgress(element) {
3.     Sys.UI._UpdateProgress.initializeBase(this,[element]);
4.     this._displayAfter = 500;
5.     this._dynamicLayout = true;
6.     this._associatedUpdatePanelId = null;
7.     this._beginRequestHandlerDelegate = null;
8.     this._startDelegate = null;
9.     this._endRequestHandlerDelegate = null;
10.     this._pageRequestManager = null;
11.     this._timerCookie = null;
12. }
14.     function Sys$UI$_UpdateProgress$get_displayAfter() {
15.         /// <value type="Number"></value>
16.         if (arguments.length !== 0) throw Error.parameterCount();
17.         return this._displayAfter;
18.     }
19.     function Sys$UI$_UpdateProgress$set_displayAfter(value) {
20.         var e = Function._validateParams(arguments, [{name: "value", type: Number}]);
21.         if (e) throw e;
23.         this._displayAfter = value;
24.     }
25.     function Sys$UI$_UpdateProgress$get_dynamicLayout() {
26.         /// <value type="Boolean"></value>
27.         if (arguments.length !== 0) throw Error.parameterCount();
28.         return this._dynamicLayout;
29.     }
30.     function Sys$UI$_UpdateProgress$set_dynamicLayout(value) {
31.         var e = Function._validateParams(arguments, [{name: "value", type: Boolean}]);
32.         if (e) throw e;
34.         this._dynamicLayout = value;
35.     }
36.     function Sys$UI$_UpdateProgress$get_associatedUpdatePanelId() {
37.         /// <value type="String" mayBeNull="true"></value>
38.         if (arguments.length !== 0) throw Error.parameterCount();
39.         return this._associatedUpdatePanelId;
40.     }
41.     function Sys$UI$_UpdateProgress$set_associatedUpdatePanelId(value) {
42.         var e = Function._validateParams(arguments, [{name: "value", type: String, mayBeNull: true}]);
43.         if (e) throw e;
45.         this._associatedUpdatePanelId = value;
46.     }
47.     function Sys$UI$_UpdateProgress$_handleBeginRequest(sender, arg) {
48.         var curElem = arg.get_postBackElement();
49.         var showProgress = !this._associatedUpdatePanelId; 
50.         while (!showProgress && curElem) {
51.             if (curElem.id && this._associatedUpdatePanelId === curElem.id) {
52.                 showProgress = true; 
53.             }
54.             curElem = curElem.parentNode; 
55.         } 
56.         if (showProgress) {
57.             this._timerCookie = window.setTimeout(this._startDelegate, this._displayAfter);
58.         }
59.     }
60. //下面的方法就是UpdateProgress显示的实现
61. //_dynamicLayout属性为true的时候，说明一个异步请求在提交
62. //_dynamicLayout属性为 false的时候，说明请求结束，隐藏掉
63. //我们可以模仿这个方法强制显示updatepregress
64. //-------------------------------------------------------------------------------------------------------
65.     function Sys$UI$_UpdateProgress$_startRequest() {
66.         if (this._pageRequestManager.get_isInAsyncPostBack()) {
67.             if (this._dynamicLayout) this.get_element().style.display = 'block';
68.             else this.get_element().style.visibility = 'visible';
69.         }
70.         this._timerCookie = null;
71.     }
72. //--------------------------------------------------------------------------------------------------------
73. //下面函数调用了handleEndRequest所以我们不用做处理，异步刷新请求后直接调隐藏
74. //--------------------------------------------------------------------------------------------------------
75.     function Sys$UI$_UpdateProgress$_handleEndRequest(sender, arg) {
76.         if (this._dynamicLayout) this.get_element().style.display = 'none';
77.         else this.get_element().style.visibility = 'hidden';
78.         if (this._timerCookie) {
79.             window.clearTimeout(this._timerCookie);
80.             this._timerCookie = null;
81.         }
82.     }
83. //----------------------------------------------------------------------------------------------------------
84.     function Sys$UI$_UpdateProgress$dispose() {
85.        if (this._pageRequestManager !== null) {
86.            this._pageRequestManager.remove_beginRequest(this._beginRequestHandlerDelegate);
87.            this._pageRequestManager.remove_endRequest(this._endRequestHandlerDelegate);
88.        }
89.        Sys.UI._UpdateProgress.callBaseMethod(this,"dispose");
90.     }
91.     function Sys$UI$_UpdateProgress$initialize() {
92.         Sys.UI._UpdateProgress.callBaseMethod(this, 'initialize');
93.         this._beginRequestHandlerDelegate = Function.createDelegate(this, this._handleBeginRequest);
94.         this._endRequestHandlerDelegate = Function.createDelegate(this, this._handleEndRequest);
95.         this._startDelegate = Function.createDelegate(this, this._startRequest);
96.         if (Sys.WebForms && Sys.WebForms.PageRequestManager) {
97.            this._pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
98.         }
99.         if (this._pageRequestManager !== null ) {
100.                     this._pageRequestManager.add_beginRequest(this._beginRequestHandlerDelegate);
101.             this._pageRequestManager.add_endRequest(this._endRequestHandlerDelegate);
102.         }
103.     }
104. Sys.UI._UpdateProgress.prototype = {
105.     get_displayAfter: Sys$UI$_UpdateProgress$get_displayAfter,
106.     set_displayAfter: Sys$UI$_UpdateProgress$set_displayAfter,
107.     get_dynamicLayout: Sys$UI$_UpdateProgress$get_dynamicLayout,
108.     set_dynamicLayout: Sys$UI$_UpdateProgress$set_dynamicLayout,
109.     get_associatedUpdatePanelId: Sys$UI$_UpdateProgress$get_associatedUpdatePanelId,
110.     set_associatedUpdatePanelId: Sys$UI$_UpdateProgress$set_associatedUpdatePanelId,
111.     _handleBeginRequest: Sys$UI$_UpdateProgress$_handleBeginRequest,
112.     _startRequest: Sys$UI$_UpdateProgress$_startRequest,
113.     _handleEndRequest: Sys$UI$_UpdateProgress$_handleEndRequest,
114.     dispose: Sys$UI$_UpdateProgress$dispose,
115.     initialize: Sys$UI$_UpdateProgress$initialize
116. }
117. Sys.UI._UpdateProgress.registerClass('Sys.UI._UpdateProgress', Sys.UI.Control);

 下面是资料中PageRequestManager -beginRequest事件的例子：强制显示UpdateProgress

1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="AJAXEnabledWebApplication1.WebForm5" %>
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5. <html xmlns="http://www.w3.org/1999/xhtml" >
6. <head runat="server">
7.     <title>无标题页</title>
8. </head>
9. <body>
10.     <form id="form1" runat="server">
11.     <asp:ScriptManager ID="ScriptManager1" runat="server">
12.     </asp:ScriptManager>
14.     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
15.     <ContentTemplate>
16.     <%=DateTime.Now%><br />
17.         <asp:Button ID="btnInUpdatePanel" runat="server" Text="ButtonInUpdatePanel" />
18.     </ContentTemplate>
19.     <Triggers>
20.     <asp:AsyncPostBackTrigger ControlID="btnOutUpdatePanel" />
21.     </Triggers>
22.     </asp:UpdatePanel>
23.     
24.         <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DynamicLayout="false">
25.     <ProgressTemplate>
26.     <div style="color:Red">Loading....</div>
27.     </ProgressTemplate>
28.     </asp:UpdateProgress>
29.     <hr />
30.     <asp:Button ID="btnOutUpdatePanel" runat="server" Text="ButtonOutUpdatePanel" />
31.     <script type="text/javascript" language="javascript">
32.     Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
33.       function(sender,e){
34.         //如果发起异步刷新请求的buttonID不是外部的button return掉
35.         if(e.get_postBackElement().id!="<%=btnOutUpdatePanel.ClientID %>"){
36.             return;
37.         }
38.         
39.         //得到 updateProgress
40.         var updateProgress=$get("<%=this.UpdateProgress1.ClientID %>");
41.         
42.         //仿照微软的asp.net ajax库写~
43.         var dynamicLayout=<%=this.UpdateProgress1.DynamicLayout.ToString().ToLower() %>;
44.         if(dynamicLayout){
45.              updateProgress.style.display = "block";
46.         }
47.         else{
48.              updateProgress.style.visibility = "visible";
49.         }
50.         
51.       }
52.     );
53.     </script>
54.     </form>
55. </body>
56. </html>

cs代码：

1. using System;
2. using System.Collections;
3. using System.Configuration;
4. using System.Data;
5. using System.Web;
6. using System.Web.Security;
7. using System.Web.UI;
8. using System.Web.UI.HtmlControls;
9. using System.Web.UI.WebControls;
10. using System.Web.UI.WebControls.WebParts;
12. namespace AJAXEnabledWebApplication1
13. {
14.     public partial class WebForm5 : System.Web.UI.Page
15.     {
16.         protected void Page_Load(object sender, EventArgs e)
17.         {
18.             this.btnInUpdatePanel.Click+=new EventHandler(btn_Click);
19.             this.btnOutUpdatePanel.Click+=new EventHandler(btn_Click);
20.         }
22.         protected void btn_Click(object sender, EventArgs e)
23.         {
24.             System.Threading.Thread.Sleep(3000);
25.             
26.         }
27.     }
28. }

下篇将继续介绍这些事件~~