Show Update Progress Animation-Ajax
One of the problems with Ajax is the fact that the calls are made asynchronusly and hence, in the background, the browser will not show you any status on the current asynchronous call. With fast servers, this is not a big problem, but whenever you have a method whose execution takes up a bit of time, the user is very likely to get impatient. Fortunately, ASP.NET AJAX solves this problem with a nice control called UpdateProgress. Using this control, you can show your own template to show that an asynchronus method is working. Mostly, it is used in association with update panel; however we do have the option of applying it on the whole page.
As shown in the example, the contents inside the <ContentTemplate> of update panel will asynchronously update when the Click event of the Button is invoked. While starting an asynchronous postback, the UpdateProgress control will work. The contents inside the <ProgressTemplate> tag will show during the partial-page rendering of an UpdatePanel. Developers often use animated images to indicate progress to users by using it within the <ProgressTemplate> tag
Below are a few useful sites that provide lots of animated indicator progress icons that you can easily use with the UpdateProgress control to visually indicate a callback operation:
<https://www.napyfab.com/ajax-indicators/>
<https://www.ajaxload.info/>
<https://mentalized.net/activity-indicators/>
One of the icons which you can find on this site is shown below
The AssociatedUpdatePanelID is the property of the UpdateProgress control to which you associate an UpdatePanel control And so, You can have multiple UpdateProgress controls on the page, and by using the AssociatedUpdatePanelID property, you can make sure that the UpdateProgress is only shown when a certain UpdatePanel is updated.
Associating a UpdateProgress Control to a UpdatePanel
By Default, Update Progress control will be enabled for every asynchronous postback originated from anywhere in the page. However, It is possible to limit to the UpdateProgress control to be enabled only for the asynchronous postback originated from a particular UpdatePanel control. To do this, just use the property called AssociatedUpdatePanelID which accepts an UpdatePanel control ID used on the page. Setting this Property will enable the UpdateProgress control only for the postback originated from the particular UpdatePanel.
<asp:UpdateProgress runat="server" id="PageUpdateProgress" AssociatedUpdatePanelID="UpdPnl">
<ProgressTemplate>
<img src="progress.gif" alt="Loading.." />
<input type="button" onclick="CancelPostBack()" value="Cancel" />
</ProgressTemplate>
</asp:UpdateProgress>
The drawback of this approach is, it will not enable the UpdateProgress control for a postback caused by an external trigger of the UpdatePanel. It is by design of this property AssociatedUpdatePanelID. The Implementation of enabling the UpdateProgress control is done by moving through the control hierarchy in UpdatePanel control identified via AssociatedUpdatePanelID to find a match for the control that causes the actual postback. Since, the external triggers will not be present in the hierarchy it will not enable the UpdateProgress control.
This drawback can be prevented by using a simple JavaScript code. For example, if we have an external trigger (btnExternUpdate) to an UpdatePanel control (UpdatePanel1). We can enable the UpdateProgress control for the postback caused by btnExternUpdate manually by the following JavaScript function.
function pageLoad()
{
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_endRequest(endRequest);
manager.add_beginRequest(OnBeginRequest);
}
function OnBeginRequest(sender, args)
{
var postBackElement = args.get_postBackElement();
if (postBackElement.id == 'btnExternUpdate')
{
$get('PageUpdateProgress').style.display = "block";
}
$get('ParentDiv').className ='Background';
}
function endRequest(sender, args)
{
$get('ParentDiv').className ='';
}
Through this approach, it is possible to enable different UpdateProgress control for different postback element on the page
Suppose if there is a case where you have started an update operation and then you may want to stop that update operation. Below are the steps to do it.
Add the javascript function as shown below in your aspx page
function CancelPostBack() {
var objMan = Sys.WebForms.PageRequestManager.getInstance();
if (objMan.get_isInAsyncPostBack())
objMan.abortPostBack();
}
Call this function using a HTML button inside the UpdateProgress control using the onclick event.
<asp:UpdateProgress runat="server" id="PageUpdateProgress" AssociatedUpdatePanelID="UpdPnl">
<ProgressTemplate>
<img src="progress.gif" alt="Loading.." />
<input type="button" onclick="CancelPostBack()" value="Cancel" />
</ProgressTemplate>
</asp:UpdateProgress>
If we execute the page, we can see the cancel button appearing which will cancel the postback and results in no refresh of contents on the update panels.
Drawback of the above approach
In the above approach, the abortPostBack() function will cancel only the update/refresh of Update Panel control but not the server side processing since it is already initiated and hence, will not be aborted. So, the server side processing will move forward and completes its execution, but the actual results of the execution will not be updated in the update panel.
It is advisable to use this functionality when there are no persisting operations like database operations; file writes operation, etc done on the server. It can be used to cancel some simple operations like loading controls, animations, etc dynamically depending on some server side business rules.
Also, we have something called DynamicLayout property which is nice to know as well. It tells whether or not the page should reserve space for your progress control. If it's set to true, which is the default, the space is dynamic, hence it's not reserved, but taken when the control is shown. If you wish to reserve the space, set this property to false. To see the difference, add the property to our example and change it back and forth.
If some of your postbacks are fast, the UpdateProgress will only be shown for a very short amount of time, resulting in a blinking behavior, which may confuse your users. For that reason, you may specify a minimum amount of time to occur before showing the progress control. This can be done with the DisplayAfter attribute. Specify a number of milliseconds to elapse before showing the progress control, e.g. 2000 if you wish to wait for 2 seconds.
Note: Images used on this website
are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon
Foundation or were found in google search under "Free to use and share". If any
of the images presented here violates copyright issues or infringes anyone copyright
or are not under "Fair use", then please bring it to our notice. Read
Disclaimer for more.
Share this to your friends. One of your friend is
waiting for your share.
Related Articles
Give rounded corners to your panel using Ajax
How to encode and decode HTML request in ASP.NET
Get Data of other page on current page
Ways of implementing AJAX
Working with forms-Jquery form selector
Database cannot be opened due to inaccessible files or insufficient memory or disk space
Show Update Progress Animation-Ajax
Working with server controls and HMTL controls
Working with Ajax collapsible panel
Advanced JQuery Fading Effects
Post Comment