Web progress bar is a user friendly UI factor to
web applicaion. In this tutorial, we will show you how to create a web
progress bar using ASP.NET 2.0 and C#.
Making web progress bar using ASP.NET 2.0 and C#
Web progress bar is a user friendly UI factor to
web applicaion. In this tutorial, we will show you how to create a web
progress bar using ASP.NET 2.0 and C#.
First, to create a WebProgressBar.aspx page and WebProgressBar.aspx.cs. Then import the System.Web.SessionState, System.Text and System.Threading namespaces.
The System.Web.SessionState namespace supplies
classes and interfaces that enable storage of data specific to a single
client within a Web application on the server. The session-state data
is used to give the client the appearance of a persistent connection
with the application. While the System.Threading namespace provides classes and interfaces that enable multithreaded programming.
using System.Web.SessionState;
using System.Text;
using System.Threading; |
We migrated our web sites to Server Intellect
over one weekend and the setup was so smooth that we were up and
running right away. They assisted us with everything we needed to do
for all of our applications. With Server Intellect's help, we were able to avoid any headaches!
In order to demo the progress bar clearly, we simulate a long task
by using the Thread.Sleep method to block the current thread for the
specified number of milliseconds. Each block represent the different
state. The session state value will be changed after each block.
The method of showModalDialog is used to create a modal dialog box that displays the specified HTML of progress bar.
Private Sub LongTask()
private void LongTask()
{
for (int i = 0; i < 11; i++)
{
System.Threading.Thread.Sleep(1000);
Session["State"] = i + 1;
}
Session["State"] = 100;
}
public static void OpenProgressBar(System.Web.UI.Page Page)
{
StringBuilder sbScript = new StringBuilder();
sbScript.Append("
\n");
sbScript.Append("\n");
sbScript.Append("
\n");
Page.RegisterClientScriptBlock("OpenProgressBar", sbScript.ToString());
}
|
If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.
Button1_Click event is for starting the threads.
public void Button1_Click(object sender, System.EventArgs e)
{
Thread thread = new Thread(new ThreadStart(LongTask));
thread.Start();
Session["State"] = 1;
OpenProgressBar(this.Page);
}
|
The front WebProgressBar.aspx page looks something like this:
<body>
<form id="form1" runat="server">
<fieldset>
<legend>WebProgressBar</legend>
<div>
<asp:Button id="Button1" runat="server" Text="Start Long Task!" OnClick="Button1_Click"></asp:Button>
</div></fieldset>
</form>
</body>
|
In order to show the progress strip, we created Progress.aspx page. The
bar will be refershed based on the session states, therefore, we can
show the progress. The code behind page is as follows.
private int state = 0;
protected void Page_Load(object sender, EventArgs e)
{
if (Session["State"] != null)
{
state = Convert.ToInt32(Session["State"].ToString());
}
else
{
Session["State"] = 0;
}
if (state > 0 && state <= 10)
{
this.lblMessages.Text = "Processing...";
this.panelProgress.Width = state * 30;
this.lblPercent.Text = state * 10 + "%";
Page.RegisterStartupScript("", "
window.setTimeout('window.Form1.submit()',100);
");
}
if (state == 100)
{
this.panelProgress.Visible = false;
this.panelBarSide.Visible = false;
this.lblMessages.Text = "Task Completed!";
Page.RegisterStartupScript("", "
window.close();
");
}
}
|
The front progress.aspx page looks something like this:
<body>
<form id="Form1" method="post" runat="server">
<asp:Label id="lblMessages" runat="server"></asp:Label>
<asp:Panel id="panelBarSide" runat="server" Width="300px" BorderStyle="Solid" BorderWidth="1px"
ForeColor="Silver">
<asp:Panel id="panelProgress" runat="server" Width="10px" BackColor="Green"></asp:Panel>
</asp:Panel>
<asp:Label id="lblPercent" runat="server" ForeColor="Blue"></asp:Label>
</form>
</body> |
The whole WebProgressBar.aspx for the code behind page is as follows.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.SessionState;
using System.Text;
using System.Threading;
public partial class WebProgressBar : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
private void LongTask()
{
for (int i = 0; i < 11; i++)
{
System.Threading.Thread.Sleep(1000);
Session["State"] = i + 1;
}
Session["State"] = 100;
}
public static void OpenProgressBar(System.Web.UI.Page Page)
{
StringBuilder sbScript = new StringBuilder();
sbScript.Append("
\n");
sbScript.Append("\n");
sbScript.Append("
\n");
Page.RegisterClientScriptBlock("OpenProgressBar", sbScript.ToString());
}
public void Button1_Click(object sender, System.EventArgs e)
{
Thread thread = new Thread(new ThreadStart(LongTask));
thread.Start();
Session["State"] = 1;
OpenProgressBar(this.Page);
}
} |
The whole progress.aspx for the code behind page is as follows.
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Progress : System.Web.UI.Page
{
private int state = 0;
protected void Page_Load(object sender, EventArgs e)
{
if (Session["State"] != null)
{
state = Convert.ToInt32(Session["State"].ToString());
}
else
{
Session["State"] = 0;
}
if (state > 0 && state <= 10)
{
this.lblMessages.Text = "Processing...";
this.panelProgress.Width = state * 30;
this.lblPercent.Text = state * 10 + "%";
Page.RegisterStartupScript("", "
window.setTimeout('window.Form1.submit()',100);
");
}
if (state == 100)
{
this.panelProgress.Visible = false;
this.panelBarSide.Visible = false;
this.lblMessages.Text = "Task Completed!";
Page.RegisterStartupScript("", "
window.close();
");
}
}
|
|
