Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Tagged as

Update Progress with AJAX UpdatePanel

, 19 Nov 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
This post demonstrates how to create an update progress with the UpdatePanel, similar to the one we can see in GMail.

Introduction

In this post, I will demonstrate how to create an update progress display with the UpdatePanel, similar to the one that we can see in GMail, like the following:

The following key things are to be addressed:

  1. It should be on the top-center of the page.
  2. It should be on top of all the other HTML controls.
  3. When scrolling, it should be placed on a relative position to the current scroll position.

To achieve this, we can use many alternatives, but I would use a simple approach. In addition to the UpdatePanel, I will use <div>, CSS styles, and JavaScript.

Here we go:

  1. Add a div tag within the body element.
    <div class="divProg" id="divProg"></div>

    Note that the id and class attributes are necessary.

  2. Add the following CSS class to the web page or the style sheet file. Keep in mind, without position: absolute; z-index: 10; CSS properties, this won’t work as expected.
    .divProg
    <span class="code-none">{
     position<span class="code-none">: absolute<span class="code-none">;
     left<span class="code-none">: 0px<span class="code-none">;
     top<span class="code-none">: 0px<span class="code-none">;
     width<span class="code-none">: 100px<span class="code-none">;
     height<span class="code-none">: 0px<span class="code-none">;
     z-index<span class="code-none">: 10<span class="code-none">;
     border<span class="code-none">: 1px none #000000<span class="code-none">;
     visibility<span class="code-none">: hidden<span class="code-none">;
     background-color<span class="code-none">: #FFF1A8<span class="code-none">;
     font-weight<span class="code-none">: bold<span class="code-none">;
     padding<span class="code-none">: 5px 10px 5px 10px<span class="code-none">;
    <span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
  3. Now we want to display the div on the top-center of the screen as well as move its top position relative to the current scroll position. To address this, we will create the following three JavaScript functions. To get the current Y position of scroll:
    function getScroll_Y() 
    {
            return document.documentElement.scrollTop;  
    }

    To set the current top position of the div:

    function setDivTop() 
    {
        if (document.getElementById("divProg") != null) {
            theDiv= document.getElementById("divProg");
        }
        else {
            return;
        }
        theDiv.style.top = getScroll_Y() + "px";
    }

    Write a function to toggle the display for the div.

    function displayDiv(display) 
    {
        if (document.getElementById("divProg") != null) {
            theDiv = document.getElementById("divProg");
        }
        else {
            return;
        }
    
        if (display) {
            var width = document.body.offsetWidth;
            var height = document.body.offsetHeight;
            if (!width) {
                width = window.innerWidth;
                height = window.innerHeight;
    
                if (!width) {
                    width = screen.width;
                    height = screen.height;
                }
            }
            // To center the div, we need to deduct its half of
            // width from half of screen width. So we set div width =100
            // in css, so that deduct by 50
            theDiv.style.left = width / 2 - 50;
            theDiv.style.top = getScroll_Y();
            theDiv.style.height = 25;
            theDiv.innerText = 'Working...';
            theDiv.style.visibility = 'visible';
    
        }
        else {
            theDiv.style.visibility = 'hidden';
        }
    }
  4. Now we want to handle the request start and request end events. We will be able to use the following code with the help of the AJAX Extension library.
    // Requests Events
    // ============================================
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    
    function InitializeRequest(sender, args) {
        if (prm.get_isInAsyncPostBack()) {
            args.set_cancel(true);
        }
        displayDiv(true);
    }
    function EndRequest(sender, args) {
        if (args.get_error()) {
            alert(args.get_error().message);
            args.set_errorHandled(true);
    
        }
        displayDiv(false);
    }
    
    //===============================================
  5. Set the page's scroll event:
    <body onscroll="setDivTop()">

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kelum W. Ganegoda
Software Developer (Senior) Brandix Lanka Pvt Ltd.
Sri Lanka Sri Lanka
I’ve started my career in 2001 with Microsoft .net ver 1.0. I’m a MCSD for .net.
 
Currently, I’m working for Sri Lanka’s largest apparel exporter as a Software Engineer. All projects in .net, MS Sql Server, Biztalk Server, WCF and WPF. And also, I’m developing components to the ERP. In addition to that, I’ve involved to create architecture of ERP integration.
Follow on   Twitter

Comments and Discussions

 
BugOnly works with IE PinmemberAlejandro Afonso Spinola3-Jan-12 0:29 
GeneralYou can achieve the same with ajax:UpdateProgress & ajax:AlwaysVisibleControlExtender PinmemberPhilipos Sakellaropoulos21-May-10 4:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141216.1 | Last Updated 20 Nov 2009
Article Copyright 2009 by Kelum W. Ganegoda
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid