Why we need progressbars in any application?

We need progress bar to represent the status, current activity is being performed. It helps us to design more intuitive UI when web page contains one or more update panel controls for partial page rendering.

If a partial page update is slow you can use update progress control to provide visual feedback about the status of the update.

You can put multiple update progress controls on a page each associated with the different update panel control. To provide the visual feedback about the status of the object, here is simple code, which shows you that on button click Ajax updateprogress appear which displays rotating image, and at the backend process of connecting to the database and binding to the gridview appears.

I have simple table as below

Tbl_Projects:

ProjectId int,

ProjectName varchar(50),

Duration int,

Status char(1)

I have a static method in the sealed class as below:

public sealed class Util

{

public static DataSet ExecuteDataSet()

{

DataSet dtst = new DataSet();

SqlConnection SqlCon = new SqlConnection(ConfigurationManager.AppSettings["ConnectionString"]);

SqlCommand SqlComd = new SqlCommand("SELECT * FROM Tbl_Projects", SqlCon);

SqlDataAdapter SqlAdpt = new SqlDataAdapter();

try

{

SqlAdpt.SelectCommand = SqlComd;

SqlAdpt.Fill(dtst);

}

catch

{ }

finally

{

SqlCon.Close();

}

return dtst;

}

Here is "Default.aspx" code, which is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Progress Bar</title>

</head>

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

<br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Label ID="Label1" runat="server" Width="134px"></asp:Label><br />

<asp:GridView ID="GridView1" runat="server">

</asp:GridView>

<br />

<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Load Data" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

<img src="25-1.gif" />Updating Page ......

</ProgressTemplate>

</asp:UpdateProgress>

</form>

</body>

</html>

On this page there is load Data button on click of the same it goes to the following activity:

protected void Button1_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(3000);

//Label1.Text = DateTime.Now.ToString();

GridView1.DataSource = Util.ExecuteDataSet();

GridView1.DataBind();

}

Note: You should have "25-1.gif" as any rotating image.

2 Comments

Join the conversation! Your thoughts help the community grow.

Rohit Kapoor19y ago
Hi I am using Ajax with masterpagges of .net 2005. When i use to add timer insideupdate pannel and put update pannel on masterpage or on its content page... timer use to post back the whole page not only update pannel.. why so please suggest. Regards Rohit
- Munir Shaikh19y ago
  Hi, Check this URL http://www.asp.net/ajax/documentation/live/overview/PartialPageRenderingOverview.aspx I think this might help you. Since i do not have much time to give a workable sample Regards, >>Munnamax