show User Control as a wait message while performing time consuming operation

Question

I have created a web user control to show in time consuming operation.

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

In Main Page say "Default.aspx", I want to use this user control to busy message.

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
} 

Here, my main concern is how to show and hide web user control(as a wait) while performing operation.

Please suggest..

Answer 1

Here is an example of a user control that we are using in our application:

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

On a target page: put all of your page content inside an update panel and then below update panel add this code:

<uppwc:UpdatePanelPleaseWaitControl runat="server" />

uppwc, is registred like this:

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

Hope this helps!

Regards, Uros

Answer 2

This is a .Net page life cycle issue. The post back occurs and the click event handler is telling it to show the wait user control, but the time consuming work is done before the life cycle ends and renders the page after the postback, hence you do not see the animation.

How about injecting JavaScript to initialize your wait animation.

Answer 3

This being a web application makes things a little complicated.

I have taken care of this in two ways:

1. Ajax calls: before making an AJAX call to the web service, display the popup using javascript and hide it when the call ends.
2. Display the popup using javascript even before the btnInvoke (say, in onclientclick) does a postback. Once the postback returns, modal popup would automatically hide and your page will be displayed normally.

Though not the best choice, but the second one has been my favorite, as it really reduces the effort.