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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Progress Bar</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body style="text-align: center">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="text-align: center">
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<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">
<ProgressTemplate>
<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.