How To Implement An AJAX Progress Bar In ASP.NET – Track Real-Time Processing Easily

In this post, we want to discuss a nice function for the implementation of an AJAX Progress Bar in ASP.NET. Before we get started, if you want to know about GridView with a subtotal and grand total, please go through the following article: C#: GridView with subtotal and total.

Let’s start. First, you need to register AjaxControlToolkit with the following code:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

1	<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Then, you should use the following code for the Ajax process ber

<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">

    <asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
           //--------------------------------
        </ContentTemplate>
    </asp:UpdatePanel>

    <asp:UpdateProgress ID="updateProgress" runat="server">
        <ProgressTemplate>
            <div class="loading-panel">
                <div class="loading-container">
                    <center>
                        <div style="background-color: white; height: 120px; width: 400px; padding-top: 50px;" class="border border-info rounded-5">
                            <span>Processing, Please wait a moment...</span>
                            <br />
                            <span style="margin: 15px;"></span>
                            <img src="<%= this.ResolveUrl("~/images/waiting-blue.gif")%>" width="350px" alt="Please wait..." />
                        </div>
                    </center>
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">

//--------------------------------

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="updateProgress" runat="server">

<span>Processing, Please wait a moment...</span>

<br />

<img src="<%= this.ResolveUrl("~/images/waiting-blue.gif")%>" width="350px" alt="Please wait..." />

</div>

</center>

</div>

</ProgressTemplate>

</asp:UpdateProgress>

</asp:Content>

To view the process bar, you need to add some CSS code to your existing CSS file for a better user experience:

/*---------Start Ajax Update Progress----------*/
.loading-panel {
    background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
    position: relative;
    width: 100%;
}

.loading-container {
    background: rgba(49, 133, 156, 0.4) none repeat scroll 0 0;
    color: black;
    font-size: 15px;
    height: 100%;
    left: 0;
    padding-top: 15%;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 999999;
    align-content: center;
    align-items: center;
}
/*---------End Ajax Update Progress----------*/