用AJAX.NET的用戶端指令碼實現UpdateProgress的效果

用過ajax.net架構裡的updatePanel的使用者肯定會知道updateprogress的作用，專門用來在執行非同步作業顯示等待資訊，用法非常簡單，往裡面放一些圖片或文字即可實現看起來很不錯的效果。但是這種方式是在頁面運行之前就已經設定好了，不管什麼操作都顯示同一張圖片或者文字，不能針對某個具體的按鈕或者發送對象來顯示資訊，比如針對儲存操作就顯示"儲存中...",提交操作就顯示"提交中...",也就是能通過編程方式稍微靈活控制一下。也許有人說可以多設定幾個updatepanel，給每個updatepanel分配一個updateProgress，這也是種方法，但是產生的標記未免多了點。
最近看了一下AJAX.NET的用戶端指令碼文檔，知道通過架構提供的指令碼能夠更加細微的控制要顯示的內容，並且還可以加上"取消"按鈕或串連，點擊取消可停止asyncPostback。通過指令碼實現需要自己定製個類似updateProgress的div或者span，另外還要添加頁面事件，控制提示資訊的可見度。主要用到的是用戶端指令碼裡的頁面事件，具體簡單實現如下：

Code
 1<script language="javascript" type="text/javascript">
 2    function pageLoad()
 3    {
 4        // 添加事件
 5        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(onBeginRequest);
 6        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest);   
 7    }
 8    
 9    function onBeginRequest(sender, e)
10    {
11        var elem = e.get_postBackElement();
12        var requestManager = Sys.WebForms.PageRequestManager.getInstance(); 
13        
14        // 點擊取消則停止 
15        if (requestManager.get_isInAsyncPostBack() & elem.id == "btnCancel" )
16        {
17             requestManager.abortPostBack();
18        }
19        
20        // 顯示正在處理的資訊 
21        if (elem.id != "btnCancel")
22        {  
23            dispUpdateProgress(String.format("{0} oper is processing.", elem.value), "");
24        } 
25    }
26    
27    function onEndRequest(sender, e)
28    {
29        dispUpdateProgress("", "none");
30    }
31    
32    //  控制顯示提示資訊
33    function dispUpdateProgress(msg, display)
34    {
35        $get("updateProgress").style.display = display;
36        $get("processingMsg").innerHTML = msg;
37    }
38    </script>
39 <form id="form1" runat="server">
40        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>
41    <asp:UpdatePanel ID="up" runat="server">
42    <ContentTemplate>
43    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />&nbsp;&nbsp;
44    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSave_Click" />
45    <div id="updateProgress" style="display:none">
46    <span id="processingMsg"></span>
47    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
48    </div>
49    </ContentTemplate>
50    </asp:UpdatePanel> 
51    </form>

cs
1protected void btnSave_Click(object sender, EventArgs e)
2        {
3            Thread.Sleep(4000);
4        }