Question

我创建了一个Web用户控件来显示耗时的操作。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WaitControl.ascx.cs" Inherits="WaitOperation.WaitControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<link href="styles.css" rel="stylesheet" />

<asp:Panel ID="pnlUpdate" runat="server" CssClass="modalPopup" Height="50px" Width="125px">
    Loading....<br />
    <img src="ajax-loader.gif" />
</asp:Panel>
<asp:Button ID="btnHidden" runat="server" Text="target button for ModalPopupExtender" CssClass="hidden" />
<asp:ModalPopupExtender ID="modelWaitPopup" runat="server"
    TargetControlID="btnHidden" BehaviorID="modelWaitPopup" PopupControlID="pnlUpdate"
    BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>

在主页中说“Default.aspx”，我想将此用户控件用于忙碌信息。

protected void btnInvoke_Click(object sender, EventArgs e)
{
   //Show waituserControl
   //Heavy task of updating gridview from database--(not an issue)
   //hide wait usercontrol after updating
}

在这里，我主要关注的是如何在执行操作时显示和隐藏Web用户控件（作为等待）。

请建议..

Answer 1

以下是我们在应用程序中使用的用户控件的示例：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UpdatePanelPleaseWaitControl.ascx.cs"
    Inherits="AgencijaRSWeb.UserControls.UpdatePanelPleaseWaitControl" %>

<script type="text/javascript">

    var errorOccoured = false;

    function pageLoad()
    {

        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest
        (
            function (sender, args)
            {
                $find('<%=mpeuProgrss.ClientID%>').show();
            }
        );

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest
        (
            function (sender, args)
            {

                if (args.get_error() != undefined)
                {

                    if (errorOccoured == false)
                    {
                        alert(args.get_error().message);
                        errorOccoured = true;
                    }
                }

                $find('<%= mpeuProgrss.ClientID%>').hide();
            }
        );
    }


</script>
<toolkit:ModalPopupExtender ID="mpeuProgrss" runat="server" TargetControlID="lblDummy"
    PopupControlID="pnlLoading" BackgroundCssClass="modalBackground" DropShadow="true">
</toolkit:ModalPopupExtender>

<asp:Panel ID="pnlLoading" runat="server" CssClass="modalPopup" Style="display: none; width: 550px; min-height: 100px">
    <asp:Label runat="server" ID="lblDummy" Style="display: none" />
    <div style="font-weight: bold; font-size: 1.2em;">
        <div style="display: inline; float: right;">
            <asp:Image runat="server" ID="ajaxLoader" ImageUrl="~/images/ajax-loader.gif" />
        </div>
        <h1 style="margin-top: 0px; padding: 0px; height:25px">
            Please wait!
        </h1>
        <div style="text-align: center">
            Your request is being processed.
        </div>
    </div>
</asp:Panel>

在目标页面上：将所有页面内容放在更新面板中，然后在更新面板下方添加以下代码：

<uppwc:UpdatePanelPleaseWaitControl runat="server" />

uppwc，注册如下：

<%@ Register Src="~/UserControls/UpdatePanelPleaseWaitControl.ascx" TagName="UpdatePanelPleaseWaitControl"
    TagPrefix="uppwc" %>

希望这有帮助！

此致乌罗什

Answer 2

这是一个.Net页面生命周期问题。回发发生并且click事件处理程序告诉它显示等待用户控件，但是在生命周期结束之前完成耗时的工作并在回发之后呈现页面，因此您看不到动画。

如何注入JavaScript来初始化等待动画。

Answer 3

这是一个Web应用程序，使事情变得有点复杂。

我已经用两种方式解决了这个问题：

Ajax调用：在对Web服务进行AJAX调用之前，使用javascript显示弹出窗口并在调用结束时隐藏它。
甚至在btnInvoke（例如，在onclientclick中）进行回发之前，使用javascript显示弹出窗口。一旦回发返回，模态弹出窗口将自动隐藏，您的页面将正常显示。

虽然不是最好的选择，但第二个一直是我的最爱，因为它确实减少了努力。

在执行耗时操作时将用户控件显示为等待消息

3 个答案: