在本篇文章中，我們将通過編寫JavaScript來使用用戶端行為擴充UpdateProgress控件，用戶端代碼将使用ASP.NET AJAX Library中的PageRequestManager，在UpdateProgress控件中，将添加一個Button，來允許使用者取消異步更新，并且使用用戶端腳本來顯示或者隐藏進度資訊。
主要内容
1．通過用戶端腳本取消異步更新
2．通過用戶端腳本顯示或者隐藏進度資訊
一．通過用戶端腳本取消異步更新
1．建立一個Web頁面并切換到設計視圖。
2．在工具箱中輕按兩下ScriptManager、UpdatePanel、UpdateProgress控件添加到頁面中。添加後頁面如下：
3在UpdatePanel控件中添加一個Label控件并設定它的Text屬性值為“Panel Rendered”。
4．添加一個Button控件并設定它的Text屬性值為“refresh”。
5．在UpdateProgress控件中添加文本text Processing…，并添加一個HtmlButton控件并設定它的Text屬性為cancle。
6．輕按兩下refresh控件添加Click事件。
7．在Buttond的Click事件進行中添加如下代碼，人為的建立一個3秒鐘的延遲并顯示目前伺服器的時間。
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 protected void Button1_Click(object sender, EventArgs e)
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 {
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 System.Threading.Thread.Sleep(3000);
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 Label1.Text = DateTime.Now.ToString();
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 }
8．添加如下腳本，擷取一個目前PageRequestManager類的執行個體，并建立一個函數調用abortPostBack方法來停止異步更新。
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 <script language="javascript" type="text/javascript">
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 <!--
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 var prm = Sys.WebForms.PageRequestManager.getInstance();
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 function CancelAsyncPostBack() {
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 if (prm.get_isInAsyncPostBack()) {
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 prm.abortPostBack();
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 }
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 // -->
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 </script>
9．設定HtmlButton的click特性為CancelAsyncPostBack。
10．添加如下的樣式塊到<head>元素之間。
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 <style type="text/css">
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 #UpdatePanel1 {
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 width:200px; height:100px;
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 border: 1px solid gray;
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 #UpdateProgress1 {
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 width:200px; background-color: #FFC080;
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 bottom: 0%; left: 0px; position: absolute;
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 </style>
11．儲存并按Ctrl + F5運作。
12．單擊refresh按鈕，經過短暫的延時之後顯示進度資訊，完成異步更新之後UpdatePanel中的資訊顯示為目前的伺服器時間。
13．單擊refresh按鈕并立即單擊Cancle按鈕結束異步更新，注意到UpdatePanel中的時間資訊并沒有更新。
二．通過用戶端腳本顯示或者隐藏進度資訊
在下列情況下，UpdateProgress控件将不會自動顯示：
由UpdateProgress控件關聯的UpdatePanel之外的控件引發的異步更新。
UpdateProgress控件沒有關聯任何UpdatePanel，不在UpdatePanel中的控件引發的異步更新（例如用代碼實作的更新）。
下面的例子将展示一個不在UpdateProgress所關聯的UpdatePanel中的控件所引發的異步更新時，如何顯示UpdateProgress控件。
1．在我們前面所建立的頁面中，切換到設計視圖。
2．選中UpdateProgress控件，在屬性視窗中，設定AssociatedUpdatePanelID屬性為UpdatePanel1。
3．在UpdatePanel和UpdateProgress控件之外添加一個Button控件。
4．設定Button的Text屬性值為Trigger，并設定ID屬性為Panel1Trigger。
5．選擇UpdatePanel控件，在屬性視窗中Triggers屬性行單擊ellipsis (…)。
6．建立一個異步更新觸發器，并設定控件ID為Panel1Trigger。
7．輕按兩下Trigger按鈕添加Click事件。
8．在Buttond的Click事件進行中添加如下代碼，人為的建立一個3秒鐘的延遲并顯示目前伺服器的時間，并附加上一條資訊表示是由觸發器引發的異步更新。
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 protected void Panel1Trigger_Click(object sender, EventArgs e)
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 Label1.Text = DateTime.Now.ToString() + " - trigger";
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 9．在代碼視窗，在已有的<Script>腳本塊中添加如下代碼：
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 prm.add_initializeRequest(InitializeRequest);
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 prm.add_endRequest(EndRequest);
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 var postBackElement;
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 function InitializeRequest(sender, args) {
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 args.set_cancel(true);
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 postBackElement = args.get_postBackElement();
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 if (postBackElement.id = 'Panel1Trigger') {
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 $get('UpdateProgress1').style.display = 'block';
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 function EndRequest(sender, args) {
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 $get('UpdateProgress1').style.display = 'none';
ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 ASP.NET AJAX入門系列（7）：使用用戶端腳本對UpdateProgress程式設計 10．儲存并按Ctrl + F5運作。
11．單擊Trigger按鈕，如下所示：
[翻譯自官方文檔]
本文轉自lihuijun51CTO部落格，原文連結：http://blog.51cto.com/terrylee/67716 ，如需轉載請自行聯系原作者
