在B/S架构的系统中,大多数系统都可能面临一个性能问题,在进行一些耗时较长的操作时,给用户一个友好的提示信息显得尤为重要,下面就来看一看Spread for ASP.NET 6.0中,如何在客户端给用户一个友好的操作等待提示信息。
本示例演示在【加载数据】、【保存数据】、【下一页】和【上一页】操作时给用户一个提示信息
实现方法主要是借助AjaxControlToolkit控件包中的ModalPopupExtender控件的功能,在点击【加载数据】、【保存数据】、【下一页】和【上一页】按钮时,通过ModalPopupExtender控件显示一个【操作进行中,请稍等... ...】的提示信息,实现代码如下:
在页面中添加一个ModalPopupExtender控件,以及与之配合使用的另外两个控件:- <asp:Button ID="Button3" runat="server" Style="display: none" />
- <asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
- <img src="images/loading.gif" alt="操作进行中,请稍等... ..." style="width: 50px; height: 50px;" />
- 操作进行中,请稍等... ...
- </asp:Panel>
- <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button3"
- PopupControlID="Panel1" BackgroundCssClass="modalBackground" BehaviorID="Behavior1">
- </cc1:ModalPopupExtender>
复制代码 重写Spread中【保存数据】、【下一页】和【上一页】按钮的onclick事件:- protected override void Render(HtmlTextWriter writer)
- {
- // 为【下一页】按钮添加等待信息
- Image pageNext = this.FpSpread1.FindControl("Next") as Image;
- if (pageNext != null)
- pageNext.Attributes.Add("onclick", " var modalPopup = $find('Behavior1'); modalPopup.show(); " + ClientScript.GetPostBackEventReference(FpSpread1, "Next") + "; return false;");
- // 为【上一页】按钮添加等待信息
- Image pagePrevt = this.FpSpread1.FindControl("Prev") as Image;
- if (pagePrevt != null)
- pagePrevt.Attributes.Add("onclick", " var modalPopup = $find('Behavior1'); modalPopup.show(); " + ClientScript.GetPostBackEventReference(FpSpread1, "Prev") + "; return false;");
- // 为【Update】按钮添加等待信息
- Image update = this.FpSpread1.FindControl("Update") as Image;
- if (update != null)
- update.Attributes.Add("onclick", " var modalPopup = $find('Behavior1'); modalPopup.show(); " + ClientScript.GetPostBackEventReference(FpSpread1, "Update") + "; return false;");
- base.Render(writer);
- }
复制代码 添加客户端的JS脚本和CSS样式:- <style type="text/css">
- .modalBackground
- {
- background-color: Gray;
- filter: alpha(opacity=60);
- opacity: 0.6;
- }
-
- .modalPopup
- {
- background-color: #ffffdd;
- border-width: 3px;
- border-style: solid;
- border-color: Gray;
- padding: 3px;
- width: 300px;
- }
- </style>
- <script type="text/javascript">
- function showwait() {
- var modalPopup = $find('Behavior1');
- modalPopup.show();
- }
- </script>
复制代码 运行效果:
49.png
(131.32 KB, 下载次数: 907)
|
|