客服端操作的等待提示信息

在B/S架构的系统中，大多数系统都可能面临一个性能问题，在进行一些耗时较长的操作时，给用户一个友好的提示信息显得尤为重要，下面就来看一看Spread for ASP.NET 6.0中，如何在客户端给用户一个友好的操作等待提示信息。

本示例演示在【加载数据】、【保存数据】、【下一页】和【上一页】操作时给用户一个提示信息

实现方法主要是借助AjaxControlToolkit控件包中的ModalPopupExtender控件的功能，在点击【加载数据】、【保存数据】、【下一页】和【上一页】按钮时，通过ModalPopupExtender控件显示一个【操作进行中，请稍等... ...】的提示信息，实现代码如下：

在页面中添加一个ModalPopupExtender控件，以及与之配合使用的另外两个控件：

1.     <asp:Button ID="Button3" runat="server" Style="display: none" />
   
2.     <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
   
3.         <img src="images/loading.gif" alt="操作进行中，请稍等... ..." style="width: 50px; height: 50px;" />
   
4.         操作进行中，请稍等... ...
   
5.     </asp:Panel>
   
6.     <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button3"
   
7.         PopupControlID="Panel1" BackgroundCssClass="modalBackground" BehaviorID="Behavior1">
   
8.     </cc1:ModalPopupExtender>

复制代码

重写Spread中【保存数据】、【下一页】和【上一页】按钮的onclick事件：

1.     protected override void Render(HtmlTextWriter writer)
   
2.     {
   
3.         // 为【下一页】按钮添加等待信息
   
4.         Image pageNext = this.FpSpread1.FindControl("Next") as Image;
   
5.         if (pageNext != null)
   
6.             pageNext.Attributes.Add("onclick", " var modalPopup = $find('Behavior1'); modalPopup.show();  " + ClientScript.GetPostBackEventReference(FpSpread1, "Next") + "; return false;");
   
7. 
   
8. 
   
9.         // 为【上一页】按钮添加等待信息
   
10.         Image pagePrevt = this.FpSpread1.FindControl("Prev") as Image;
    
11.         if (pagePrevt != null)
    
12.             pagePrevt.Attributes.Add("onclick", " var modalPopup = $find('Behavior1'); modalPopup.show();  " + ClientScript.GetPostBackEventReference(FpSpread1, "Prev") + "; return false;");
    
13. 
    
14.         // 为【Update】按钮添加等待信息
    
15.         Image update = this.FpSpread1.FindControl("Update") as Image;
    
16.         if (update != null)
    
17.             update.Attributes.Add("onclick", " var modalPopup = $find('Behavior1'); modalPopup.show();  " + ClientScript.GetPostBackEventReference(FpSpread1, "Update") + "; return false;");
    
18. 
    
19. 
    
20.         base.Render(writer);
    
21.     }

复制代码

添加客户端的JS脚本和CSS样式：

1.     <style type="text/css">
   
2.         .modalBackground
   
3.         {
   
4.             background-color: Gray;
   
5.             filter: alpha(opacity=60);
   
6.             opacity: 0.6;
   
7.         }
   
8.         
   
9.         .modalPopup
   
10.         {
    
11.             background-color: #ffffdd;
    
12.             border-width: 3px;
    
13.             border-style: solid;
    
14.             border-color: Gray;
    
15.             padding: 3px;
    
16.             width: 300px;
    
17.         }
    
18.     </style>
    
19.     <script type="text/javascript">
    
20. 
    
21.         function showwait() {
    
22.             var modalPopup = $find('Behavior1');
    
23.             modalPopup.show();
    
24.         }
    
25. 
    
26.     </script>

复制代码

运行效果：
49.png (131.32 KB, 下载次数: 905)

2012-3-20 10:52 上传

点击文件名下载附件
png


附上源码：VS2010 + Spread .NET 6.0
WaitMessageForSpreadAspNet-等待提示信息.zip (3.1 MB, 下载次数: 699)

2012-3-20 10:52 上传

点击文件名下载附件
zip

回复 1楼dof的帖子

非常感谢，等待第三个问题的答复

回复 2楼xuxj的帖子

请参考：http://gcdn.gcpowertools.com.cn/showtopic-12801.html

回复 1楼dof的帖子

1.加载图片这个可以用。但是数据加载完后，输出到HTML的时候还是会有卡的现象如图：

加载1.jpg (4.96 KB, 下载次数: 873)

2014-6-4 11:54 上传

点击文件名下载附件

卡个一会才会加载完样式


加载2.jpg (5.34 KB, 下载次数: 876)

2014-6-4 11:54 上传

点击文件名下载附件
2.能否选中一列不要变色 不要高亮显示？

回复 4楼xuxj的帖子

1.请问第一个问题指的是更改列头图片还是实现客户端等待信息？

回复 5楼iceman的帖子

多谢回复，
对，是实现客户端等待信息
等待图标只是从服务器返回的时候显示，因返回的数据比较多，图标消失后，页面上的表格样式会消失，空白，卡一小会后才会正常显示。

回复 6楼xuxj的帖子

能否请你把 Demo 发上来，我通过附件的 Demo 没有发生类似情况.