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

在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