在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>
复制代码
运行效果：
附上源码：VS2010 + Spread .NET 6.0
.K1AHo.png)
