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();

 

 

... 总结

  问题很简单,解决的方式也很简单。

  园子里的朋友们,有遇到相同问题的吗?

  还望积极贡献些方法和主意。

 

 

 

 

posted @ 2009-12-18 10:35  刘先勇  阅读(2000)  评论(11编辑  收藏  举报