0

我创建了一个 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 用户控件（作为等待）。

请建议..

4

3 回答 3

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" %>

希望这可以帮助！

问候，乌罗斯

于 2013-10-31T18:54:33.620 回答
0

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

注入 JavaScript 来初始化你的等待动画怎么样。

于 2013-10-31T18:49:54.037 回答
0

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

我通过两种方式解决了这个问题：

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

虽然不是最好的选择，但第二个是我最喜欢的，因为它确实减少了工作量。

于 2013-10-31T18:53:13.547 回答