There are already many examples of Web progress bars on the Internet, but many of them are time estimates and cannot reflect the real progress of the task. I made a real-time progress bar by combining multiple threads and ShowModalDialog. The principle is simple: Use a thread to start a long task and define a Session. When the task changes the Session value at different stages, when the thread starts, use ShowModalDialog to open a progress bar window, refresh the window to obtain the Session value, and reflect the real-time progress. Next let's take a look at the specific code: (download the source code at the end of the article)
Create a new Default. aspx page first,
Client code:
<Body MS_POSITIONING = "GridLayout">
<Form id = "Form1" method = "post" runat = "server">
<Br>
<Br>
<Asp: Button id = "Button1" runat = "server" Text = "Start Long Task! "> </Asp: Button>
</Form>
</Body>
Server code:
Using System;
Using System. Collections;
Using System. ComponentModel;
Using System. Data;
Using System. Drawing;
Using System. Web;
Using System. Web. SessionState;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Web. UI. HtmlControls;
Using System. Text;
Namespace WebProgressBar
{
/** // <Summary>
/// Summary description for _ Default.
/// </Summary>
Public class _ Default: System. Web. UI. Page
{
Protected System. Web. UI. WebControls. Button Button1;
Private void Page_Load (object sender, System. EventArgs e)
{
// Put user code to initialize the page here
}
Web Form Designer generated code # region Web Form Designer generated code
Override protected void OnInit (EventArgs e)
{
//
// CODEGEN: This call is required by the ASP. NET Web Form Designer.
//
InitializeComponent ();
Base. OnInit (e );
}
/** // <Summary>
/// Required method for Designer support-do not modify
/// The contents of this method with the code editor.
/// </Summary>
Private void InitializeComponent ()
{
This. Button1.Click + = new System. EventHandler (this. button#click );
This. Load + = new System. EventHandler (this. Page_Load );
}
# Endregion
Private void LongTask ()
{
// Simulate a long task
// Each Cyclic Simulation Task goes to different stages
For (int I = 0; I <11; I ++)
{
System. Threading. Thread. Sleep (1000 );
// Set the state value of each stage to display the current progress.
Session ["State"] = I + 1;
}
// Task ended
Session [& quot; State & quot;] = 100;
}
Public static void OpenProgressBar (System. Web. UI. Page)
{
StringBuilder sbScript = new StringBuilder ();
SbScript. Append ("<script language = 'javascript 'Type = 'text/JavaScript '> \ n ");
SbScript. Append ("<! -- \ N ");
// IE5.5 or above is required
SbScript. append ("window. showModalDialog ('ss ss. aspx ', '', 'dialogheight: 100px; dialogWidth: 350px; edge: Raised; center: Yes; help: No; resizable: No; status: No; scroll: No; '); \ n ");
// Use window. open below IE5.5
// SbScript. append ("window. open ('Progress. aspx ', '', 'height = 100, width = 350, toolbar = no, menubar = no, scrollbars = no, resizable = no, location = no, status = no'); \ n ");
SbScript. Append ("// --> \ n ");
SbScript. Append ("</script> \ n ");
Page. RegisterClientScriptBlock ("OpenProgressBar", sbScript. ToString ());
}
Private void button#click (object sender, System. EventArgs e)
{
System. Threading. Thread thread = new System. Threading. Thread (new System. Threading. ThreadStart (LongTask ));
Thread. Start ();
Session ["State"] = 1;
OpenProgressBar (this. Page );
}
}
}
Create a Progress bar page, Progress. aspx
Client:
Add <base target = "_ self"> to the head.
<Body MS_POSITIONING = "GridLayout">
<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>
Server:
Using System;
Using System. Collections;
Using System. ComponentModel;
Using System. Data;
Using System. Drawing;
Using System. Web;
Using System. Web. SessionState;
Using System. Web. UI;
Using System. Web. UI. WebControls;
Using System. Web. UI. HtmlControls;
Namespace WebProgressBar
{
/** // <Summary>
/// Summary description for Progress.
/// </Summary>
Public class Progress: System. Web. UI. Page
{
Protected System. Web. UI. WebControls. Label lblMessages;
Protected System. Web. UI. WebControls. Panel panelProgress;
Protected System. Web. UI. WebControls. Panel panelBarSide;
Protected System. Web. UI. WebControls. Label lblPercent;
Private int state = 0;
Private void Page_Load (object sender, System. EventArgs e)
{
// Put user code to initialize the page here
If (Session ["State"]! = Null)
{
State = Convert. ToInt32 (Session ["State"]. ToString ());
}
Else
{
Session ["State"] = 0;
}
If (state> 0 & state <= 10)
{
This. lblMessages. Text = "Task undertaking! ";
This. panelProgress. Width = state * 30;
This. lblPercent. Text = state * 10 + "% ";
Page. RegisterStartupScript ("", "<script> window. setTimeout ('window. Form1.submit () ', 100); </script> ");
}
If (state = 100)
{
This. panelProgress. Visible = false;
This. panelBarSide. Visible = false;
This. lblMessages. Text = "Task Completed! ";
Page. RegisterStartupScript ("", "<script> window. close (); </script> ");
}
}
Web Form Designer generated code # region Web Form Designer generated code
Override protected void OnInit (EventArgs e)
{
//
// CODEGEN: This call is required by the ASP. NET Web Form Designer.
//
InitializeComponent ();
Base. OnInit (e );
}
/** // <Summary>
/// Required method for Designer support-do not modify
/// The contents of this method with the code editor.
/// </Summary>
Private void InitializeComponent ()
{
This. Load + = new System. EventHandler (this. Page_Load );
}
# Endregion
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
