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

Introduction: 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."

• Tweet
• Share
• Share
• Share

Related Post