ASP.NET AJAX 中 UpdateProgress 的瑕疵及其解決方案

... 前言

  在Web應用程式中，引入AJAX，不僅可以提高使用者體驗（頁面局部重新整理），而且可以在一定程度上，降低Web伺服器的工作負載和回應時間。

  AJAX 使用Javascript，在用戶端（瀏覽器端），通過Http(s)協議，向伺服器端 （Web Server）發起請求；伺服器根據請求的URI，

完成相應的邏輯操作，爾後將執行的結果通過Http(s)協議，返回給用戶端。

用戶端對擷取的返回結果(TEXT/XML 串)，使用Javascript， 在callback 中解析、呈現。

 

... ASP.NET AJAX 伺服器控制項

  在早期的Asp, PHP, Jsp 開發中，AJAX 中，常見到的是XMLHttpRequest 忙碌的身影。

XMLHttpRequest in AJAX

function loadXMLDoc(url) {
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (req) {
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    }

}

  如今，我們可以更多地選擇JQuery, Ext Js 之類的Javascript 架構，以減少AJAX開發的工作量。

  Asp.NET(3.5及以上, 2.0及以下需安裝Ajax Extension) 提供一套AJAX 伺服器端控制項(其實也就是那麼5個， ScriptManger, ScriptManagerProxy, Timer,  UpdatePanel, UpdateProgress)，來簡化AJAX開發。 配合Ajax Control toolkit來使用，確實省事不少。

 

 

... UpdateProgress

 AJAX 伺服器控制項中， UpdatePanel是一個大玩意，頁面請求完成後，你會發現只有處於UpdatePanel 之中的內容才會更新，

而UpdatePanel 之外之物則保持原樣。

 即便如此，在UpdatePanel完成更新之前，比較友好的方式是，提示使用者稍安勿躁，請求正在處理之中。

 

... UpdateProgress的瑕疵

  UpdateProgress 很有用，但也有一點瑕疵。

  下面例子中，使用者點擊"Filter"按鈕, 利用Ajax Toolkit 中的ModalPopupExtender，彈出搜尋條件視窗；

在快顯視窗中，點擊“OK”按鈕提交AJAX請求，而此時，我們的進度條卻沒有在最上層顯示，而且常常是躲在快顯視窗下面看不見。

 

 

... 解決方案

 下面談談我的做法：

方法（一）

   在與ModelPopupExtender 相關聯的Panel裡， 加入一份UpdateProgress的Template 拷貝。如下：

代碼

<div id="divFilteringLoader" runat="server" class="loader" style="display:none;">
            <div class="loaderContent"><asp:Label runat="server" ID="lblLoading" Text="<%$ PPPResources:Main, Loading %>"></asp:Label></div>
        </div>

 

  然後在，使用者點擊"OK"時，用戶端觸發：

$get("<%=divFilteringLoader.ClientID%>").style.display = 'block';

 

方法（二）

  使用者點擊"OK"時，用戶端觸發Cancel按鈕的點擊事件：

$get("<%=btnFilterCancel.ClientID%>").click();

 

 

... 總結

  問題很簡單，解決的方式也很簡單。

  園子裡的朋友們，有遇到相同問題的嗎？

  還望積極貢獻些方法和主意。