Progress Bar Using ASP.Net

Background

In this article we will learn how to show the Progress Bar when processing a request from a server. This is very important for when our application requires a long time to process the request and to prevent the start of a new request by the user while the current request is processing.

Use the following procedure to create a web application to demonstrate this requirement so beginners can also understand it.

1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
2. "File" - "New Project" - "C#" - "ASP.NET Empty Web Application" (to avoid adding a master page).
3. Provide the web site a name such as  "ProgressBAR" or another as you wish and specify the location.
4. Then right-click on Solution Explorer - "Add New Item" - "Default.aspx page".
5. Drag and drop one button, two text boxes, one Script Manager, Update Panal, Progress, Update Progress and one Lable to show the requested output.
6. Add one folder named Image and add one image to be shown as the Progress Template.

Now the Solution Explorer will look such as follows.

 

Then switch to the design view; the <form> section of the Default aspx page source will look as in the following:

<form id="form1" runat="server">
<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
<asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="UpdatePanel1"
    clientidmode="Predictable" viewstatemode="Inherit">
    <ProgressTemplate>
        <div class="div1" style="margin-left: 160px">
            <img alt="" src="Images/ProgressImage.gif" />
        </div>
    </ProgressTemplate>
</asp:updateprogress>
<asp:updatepanel id="UpdatePanel1" runat="server">
    <ContentTemplate>
        <table style="color: white; margin-left: 100px; margin: 100px">
            <tr>
                <td> Name </td>
                <td> <asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>City</td>
                <td><asp:TextBox ID="txtcity" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <br />
                    <br />
                         <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" /><br />
                    <br/>
                    <asp:Label ID="Label1" Style="color: white" runat="server" Visible="false" Text="Label"></asp:Label>
                </td>
            </tr>
        </table>
    </ContentTemplate>
</asp:updatepanel>
</form>

Now, switch to Default.aspx.cs and write the following code for the button click event:

protected void Button1_Click(object sender, EventArgs e)
{
   Thread.Sleep(3000);
   Label1.Visible = true;
   Label1.Text = "Name :" + " " + txtName.Text + "   " + "City :" + txtcity.Text + "   " + "Submitted Sucessfully";
}

In the code above, when the button os clicked the Progress Bar is shown for 3000 miliseconds as the time specified in the Thread.sleep method and then then the request is processed.
 
Now run the application, enter the values into the two text boxes and click on the button click and while processing the request the following Progress Bar is shown.

 
Now after processing the request the following output is shown.
 
Now from the all the examples above, I hope you have learned how to show what is described here.

 
Note

For the detailed code please download the attached Zip file.

Summary

I hope this article is useful for all students and beginners. If you have any suggestion related to this article then please contact me.