Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment




Latest Articles


Move to top
Show Update Progress Animation-Ajax
Posted By Sarin on Apr 08, 2012     RSS Feeds     Latest Hinduism news
1963 Views

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:
  • <http://www.napyfab.com/ajax-indicators/>
  • <http://www.ajaxload.info/>
  • <http://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(http://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
    Working with forms-Jquery form selector
    Increase performance of your website using caching
    How AJAX Works, advantages and disadvantages
    Database cannot be opened due to inaccessible files or insufficient memory or disk space
    Simple Ajax client server Example
    Show Update Progress Animation-Ajax
    Tips and tricks with Ajax Collapsible panel
    Uploading file asynchronously using Ajax AsyncFileUpload control
    How to encode and decode HTML request in ASP.NET
    Working with server controls and HMTL controls

    Post Comment




    Software developer by profession,
    Poet by hobby,
    Blogger by Passion
    Birth Place: Munger, Bihar
    Residence: Mumbai, Maharashtra
    Prof exp: 8 years

    Read More about me

    Read my daily what'sapp quotes
    Most Viewed Articles

    Latest Spiritual Videos


    Latest Funny Videos

    Latest News

    Latest Social Post
    Latest WhatsApp Quotes