The progress bar in the Web| program Web application
Julien cheyssial Writing in 2003/10/01
Joise.li translated and modified in 2004-4-2
Written in front:
The original is an article I found when I needed to use the progress bar to explain the details and attach an example. I added my own modifications on the basis of the original text: increased threading and the use of the progress bar in the child threading process. This is the first time I have translated the article, please correct me. The original text is found in http://www.myblogroll.com/Articles/progressbar/, please refer to.
Who says you can't use a progress bar in a Web application? I think I can. This article describes how to improve the quality and interface friendliness of Web applications by using the progress bar during long service-side processing. In fact, if a Web application is running in a stateless and connectionless state, it is easy for the user to assume that it is over. But the progress bars that are described in this article for not using any ActiveX controls and cluttered Java applets will help improve this.
The key to using the progress bar in a Web application is the ability of the browser to display the page before all the pages are loaded. We will use this feature to generate the steps and send the page to the client. First, we'll use HTML to generate a perfect and beautiful progress bar, and then we'll dynamically send JavaScript blocks to update the progress bar. Of course, all of the above is implemented before a user request is disconnected. In C #, Response.Write allows us to add custom content to the cache and Response.fluse () allows us to send content from all the buffers to the user's browser.
First step:
The first step is to create a progress bar page where we use progressbar.aspx. As mentioned above, we incrementally build and send pages to the client. First, we will use HTML to generate a perfect and beautiful progress bar. The required HTML code can be obtained from the predefined progressbar.htm, so the first thing is to load it and send the data stream to the client's browser, adding the following lines to the progressbar.aspx Page_Load:
String strFileName = Path.Combine (Server.MapPath ("./include"), "progressbar.htm");
StreamReader sr = new StreamReader (strFileName, System.Text.Encoding.Default);
String strhtml = Sr. ReadToEnd ();
Response.Write (strhtml);
Sr. Close ();
Response.Flush ();
The following is the HTML code for progressbar.htm, which puts the script function in another JS file, but I also put the trouble on the static page.
<script language= "JavaScript" >
function SETPGB (pgbid, Pgbvalue)
{
if (pgbvalue <= 100)
{
if (Lblobj = document.getElementById (pgbid+ ' _label '))
{
lblobj.innerhtml = pgbvalue + '% '; Change the label value
}
if (Pgbobj = document.getElementById (pgbid))
{
var divchild = pgbobj.children[0];
Pgbobj.children[0].style.width = pgbvalue + "%";
}
Window.status = "Data read + Pgbvalue +"%, please wait ... ";
}
if (pgbvalue = 100)
Window.status = "Data read has been completed";
}
</script>
<link rel= "stylesheet" type= "Text/css" href= "Style/common.css"/>
<body bgcolor= "buttonface" topmargin= "0" leftmargin= "0" >
<table width= "100%" height= "100%" id= "Table1" >
<tr>
<TD align= "center" valign= "Middle" >
<div class= "Bi-loading-status" id= "Probar" DISPLAY:; left:425px; Top:278px ">
<div class= "text" id= "Pgbmain_label" align= "left" ></DIV>
<div class= "Progress-bar" id= "Pgbmain" align= "left" >
<div style= "width:10%" ></DIV>
</DIV>
</DIV>
</td>
</tr>
</table>
</body>
The corresponding CSS definitions are as follows:
. bi-loading-status {
/*position:absolute;*/
width:150px;
padding:1px;
Overflow:hidden;
}
. bi-loading-status. Text {
White-space:nowrap;
Overflow:hidden;
width:100%;
Text-overflow:ellipsis;
padding:1px;
}
. bi-loading-status. Progress-bar {
border:1px solid Threedshadow;
Background:window;
height:10px;
width:100%;
padding:1px;
Overflow:hidden;
}
. bi-loading-status. Progress-bar Div {
Background:highlight;
Overflow:hidden;
height:100%;
Filter:alpha (opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=100, finishy=0);
}
Step Two:
Now we can start to update the progress bar, which is a very important part, because it can make your progress bar live. (the original is to use the random increase of 15 times until the loading completed, this article only use from 1-100 of the uniform increase, the following content is not translated)
First we open a new thread and add the following code to the Page_Load:
Thread thread = new Thread (new ThreadStart (ThreadProc));
Thread. Start ();
Thread. Join ();
Add the following function to the class:
private void ThreadProc ()
{
String strscript = "<SCRIPT>SETPGB (' pgbmain ', ' {0} ');</script>";
for (int i = 0; I <= i++)
{
System.Threading.Thread.Sleep (10);
Response.Write (String. Format (Strscript, i));
Response.Flush ();
}
}
Note that in the above code we use a for loop that sends a script <SCRIPT>SETPGB (' Pgbmain ', ' {0} ') to the client at the end of each increment of I, and </script>, where {0} is replaced by the corresponding I, The script will invoke the SETPGB JavaScript function to change the progress bar status of the page.
