Progressbar in webparts

Question

I want to show progress in my webpart while showing images. Here is my code in .ascx file

<asp:UpdateProgress runat="server" id="PageUpdateProgress">
        <ProgressTemplate>
            Loading...
        </ProgressTemplate>
</asp:UpdateProgress>

<asp:updatepanel runat= "server>
 <div>
   <section id="ideas" class="container">

 <div id="divTest"  runat="server" >

</div>
 <div>
    <div>
          <a href="#" role="button" id="btnShow"  runat="server" OnServerClick="btnShow_Click">Get data</a>

    </div>
</div>
 </section>
</asp:UpdatePanel>

In my click even i tried

protected void btnShow_Click(object sender, EventArgs e)
    {
       if (spItems.count!= 0) {
          System.Threading.Thread.Sleep(5000);
          for (i = 0; i< imageCount; i++){
               // logic to show images
          }
        }

    }

But nothing shows up. Also how to stop progress bar displaying when my For loop ends

Answer 1

You have some errors in your ascx-file. First, you don't close all of your div-tags. Second, the content within the updatepanel must only contain a <contenttemplate></contenttemplate> tag, everything else you put within this tag.

Hopefully you also have defined your loop variables i, imageCount and spItemsin your code behind somewhere.

So your Code should look like this

<asp:UpdateProgress ID="PageUpdateProgress" runat="server">
    <ProgressTemplate>
        Loading...
    </ProgressTemplate>
</asp:UpdateProgress>


<asp:UpdatePanel runat="server">
    <ContentTemplate>
       <section id="ideas" class="container">
            <div id="divTest"  runat="server" ></div>
            <div>
                <div>
                    <a href="#" role="button" id="btnShow"  runat="server" OnServerClick="btnShow_Click">Get data</a>
                </div>
            </div>
     </section>
    </ContentTemplate>
</asp:UpdatePanel>

And for code behind:

protected void btnShow_Click(object sender, EventArgs e)
{
    // spItems defined somewhere?
    if (spItems.count != 0)
    {
        var imageCount = 1000;
        System.Threading.Thread.Sleep(5000);
        for (int i = 0; i < imageCount; i++)
        {
            // logic to show images
        }
    }

}

This only shows a text "loading" when the loading is still active. This automatically disappears on completion, so you don't have to do anything. If you want to display a loading image instead, you can also do so. See this post for an example.

For more Information, there are several tutorials out there.

• 3 Different Ways to Display Progress in an ASP.NET AJAX Application
• Using the UpdateProgress to lock down controls in the browser