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

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

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

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

  1.     
    <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

WaitMessageForSpreadAspNet-等待提示信息.zip (3.1 M, 下载次数:38)