Please disable your adblock and script blockers to view this page
 

Show progress bar using UpdateProgress control in asp.net(C#, VB)

UpdateProgress example in asp.netIntroduction: In previous articles i explained How to Drag & drop to upload multiple files using AjaxFileUpload like Facebook in asp.net and How to upload file and create Zip file in asp.net using C#,VB.Net and How to upload, download and delete files from GridView in Asp.net and Ajax TabContainer example to create multiple tabs and Ajax ModalPopupExtender example to open login form in popup window
Now in this article i will explain with example How to display/ show progress bar/ wait image using Update progress control in as.net.

Description: When fetching large amount of data from the data source then it might take considerable time to show on the web page. E.g. binding large data in GridView, DataList, Repeater, FormView or ListView data controls etc may take time. In such cases we can display progress image with a message as shown below: 


Implementation: In the design page(.aspx) place ScriptManager control and a UpdateProgress control that are under AJAX Extension category in the visual studio’s toolbox. Also place a Label and a Button Control as shown below. Search any gif image on the Google that you want to show when processing is going on. Let's take an example to understand.

Source Code:

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

        <fieldset style="width:200px">
        <legend>Progress bar example</legend>
       
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

        <asp:Button ID="btnSubmit" runat="server" Text="Submit"
            onclick="btnSubmit_Click" /><asp:Label ID="lblStatus"
            runat="server" Text=""></asp:Label>
                                 <asp:UpdateProgress ID="UpdWaitImage" runat="server"  DynamicLayout="true" AssociatedUpdatePanelID="UpdatePanel1">
                 <ProgressTemplate>
                                 <asp:Image ID="imgProgress" ImageUrl="ProgressImage.gif" runat="server" />
                                                Please Wait...
                                </ProgressTemplate>
                                </asp:UpdateProgress>      
    </ContentTemplate>
        </asp:UpdatePanel>
        </fieldset>

C#.NET Code to Show progress bar using UpdateProgress control in asp.net
  • In the code behind file(.aspx.cs) write the on submit button's click event as:
protected void btnSubmit_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        lblStatus.Text = "Processing Completed";
    }

VB.NET Code to Show progress bar using UpdateProgress control in asp.net
  • In the code behind file(.aspx.vb) write the on submit button's click event as:
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
        System.Threading.Thread.Sleep(2000)
        lblStatus.Text = "Processing Completed"
    End Sub

Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned for more technical updates."
Previous
Next Post »

3 comments

Click here for comments
Anonymous
admin
September 27, 2013 ×

There are gif image with text "Plese wait..." ... not a progress bar. :(

Reply
avatar
September 27, 2013 ×

Hi..yes you are right..there is a gif image with text Please wait..

Reply
avatar
Unknown
admin
December 04, 2015 ×

Hi good review can you upload waiting pannel working aample so we can test it
Thanks

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon