In this post, we want to discuss a nice function for the Ajax process 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:
1 2 3 | <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> |
Then, you should use the following code for the Ajax process ber
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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> |
To view the process bar, you need to add some CSS code to your existing CSS file for a better user experience:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /*---------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----------*/ |
Ajax Process Bar in Asp.net
The article was published on August 10, 2014 @ 10:05 AM
Leave a Comment