Click here to Skip to main content
Click here to Skip to main content

Progress Bar

, 8 May 2014
Rate this:
Please Sign up or sign in to vote.
Regarding progress bar

Introduction

This tip tells you about progress bar at the time of post back so that the user can't perform the action during critical action performed like credit card payment, saving the data to database, etc. Here, I have code for that.

<asp:UpdateProgress DisplayAfter="1" 
ID="upProgress" DynamicLayout="true" runat="Server"
        AssociatedUpdatePanelID="upPay" >
        <ProgressTemplate>
            
            <img id="Img1" src="~/images/ajax-loader.gif" 
            runat="server" visible="true" alt="jrc" /><br />
            
            <div style="width:40%;">
                <asp:Label ID="lblwarningmsg"  ForeColor="Red" 
                text="Please wait while the transaction is processed and do not click the 
                "back button" or refresh  or close the browser window." runat="server">
                </asp:Label>
            </div>

        </ProgressTemplate>
       
    </asp:UpdateProgress>

Also add this script for display progress bar center of the page:

 <script language="JavaScript" type="text/javascript">
        function adjustDivs() {
            var df = document.getElementById('<%=upProgress.ClientID %>');
            df.style.position = 'absolute';
            df.style.left = (document.documentElement.scrollLeft + 45) + '%';
            df.style.top = (document.documentElement.scrollTop + 300) + 'px';
        }
        adjustDivs();
        window.onload = adjustDivs;
        window.onresize = adjustDivs;
        window.onscroll = adjustDivs;
    </script>

License

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

Share

About the Author

kunal r somani
Software Developer
India India
No Biography provided

Comments and Discussions

 
Questionok PinprofessionalBillW338-May-14 3:14 
GeneralMy vote of 5 PinmemberHumayun Kabir Mamun8-May-14 0:58 

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 | Mobile
Web01 | 2.8.140814.1 | Last Updated 8 May 2014
Article Copyright 2014 by kunal r somani
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid