Modal AJAX Progress Display

If you use AJAX in your ASP.NET web site then you’ve probably used the UpdateProgress control to display that some action is processing in the background. I typically like to use a “loading” image or perhaps the company logo along with an animated gif in a modal style box to show some movement that the page is working in the background.

Here is a code snippet of a simple Modal type processing box I use for some static notifications of some action.

HTML:

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
                    <br />
                    <asp:Button ID="btnRun" runat="server" Text="Run"
                        OnClick="btnRun_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdateProgress ID="UpdProg1" runat="server" DisplayAfter="500" DynamicLayout="True">
                <ProgressTemplate>
                    <div class="PageWorkingBackground">
                    </div>
                    <div class="UpdateProgress">
                        <asp:Image ID="ProgImage" runat="server" AlternateText="[image]" ImageUrl="~/images/Processing.gif" />
                        <asp:Image ID="ajaxLoadNotificationImage" runat="server" AlternateText="[image]"
                            ImageUrl="~/images/bar-loader-orange.gif" />
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>

        </div>
    </form>
</body>
</html>

CSS:

CSS

.PageWorkingBackground
{
	position: fixed;
	top: 0;
	left: 0;
	background-color:Gray;
	filter:alpha(opacity=75);
	opacity:0.75;
	height: 100%;
	width: 100%;
	min-height: 100%;
	min-width: 100% 
}
 
.UpdateProgress
{
	background-color:#fff;
	width: 150px;
	text-align: center;
	vertical-align: middle;
	position: fixed;
	bottom: 50%;
	left: 45%;
	border: solid 2px #453825;
	margin: 10px;
	padding: 10px;
}

The CSS is used for styling to match the color theme of your web site. Gray out the screen to give it a true modal appearance.

To emulate a long running application simply use the Thread.Sleep call to cause your application to pause a moment. This will cause your modal block to display. Here is some C# code as an example. The example below uses 5000 in the sleeping thread which equates to around 5 seconds since the parameter accepts and Int32 to define milliseconds. Visit the MSDN site to learn more about Thread.Sleep method.

protected void btnRun_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        lblText.Text = "Process has completed successfully!";
    }

There are various other ways of displaying a modal progress box like the UpdatePanelAnimationExtender and the PageRequestManager , but they involve a little extra JavaScript.

Be aware that if you have multiple UpdatePanels you can use the AssociatedUpdatePanelID of the UpdateProgress control to specify different UpdateProgress sections for each UpdatePanel. This could enhance the customization quite a bit.

In this example we use a static image and an animated GIF to show the use that a process is working in the background.