Navi's

Necessity, the mother of invention

  • Visitor Map

    Locations of Site Visitors
  • Flag Counter

    free counters

Show loader during postback with ajax in asp.net

Posted by Navi's on March 24, 2011


To show loader during post back using ajax. We can do this very easy manner.
Please wait loader

First, we have to create css for loader.


#divImage {
    position: absolute;
    padding: 4px;
    top: 0px;
    right: 0px;
    color: gray;
    font-size: 13px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    width: 150px;
    height:20px;
 }

After this we have to include the scriptmanager on page or masterpage.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

Then we use bellow javascript function for async postback. We added two events InitializeRequest and EndREquest these events handles the loader to show/hide.

<script type="text/javascript">
             // Get the instance of PageRequestManager.
             var prm = Sys.WebForms.PageRequestManager.getInstance();
             // Add initializeRequest and endRequest
             prm.add_initializeRequest(prm_InitializeRequest);
             prm.add_endRequest(prm_EndRequest);
            
             // Called when async postback begins
             function prm_InitializeRequest(sender, args) {
                 // get the divImage and set it to visible
                 var panelProg = $get('divImage');                
                 panelProg.style.display = '';
             }
 
             // Called when async postback ends
             function prm_EndRequest(sender, args) {
                 // get the divImage and hide it again
                 var panelProg = $get('divImage');                
                 panelProg.style.display = 'none';
             }
    </script>

Now, we define the loader div in UpdatePanel.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="divImage" style="display: none">
                <div style="float: right;">
                    <img src="loader.gif" height="20px" />Please wait...</div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

Whenever the async post back occurs the loader div will show and hide when request ends.

That’s it… 🙂

To generate loader image we can use bellow links
ajaxload.info
preloaders.net

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: