A simple ASP. NET progress bar Control

A simple ASP. NET progress bar control:

(1) create a BUTTON control with ID = "Button1" and a DIV control with ID = "LAY1"

<Asp: Button ID = "Button1" runat = "server" Text = "Button"/> <br/>
<DIV id = "Lay1" style = "Z-INDEX: 1; LEFT: 1%; VISIBILITY: hidden; WIDTH: 99%; CURSOR: crosshair; POSITION: absolute; TOP: 32px; HEIGHT: 95%; BACKGROUND-COLOR: # ffffff ">
<FONT face = ""> </FONT> <FONT face = ""> </FONT> <br>
<B> <font color = "#800080" size = "2"> & nbsp; & nbsp; retrieving data. Please wait... </font> </B>
<Table align = "center" style = "width: 78px; height: 25px">
<Tr>
<Td style = "width: 56px; height: 27px;">
<Div style = "BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: black 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; width: 88px; "id =" DIV1 "language =" javascript "onclick =" return DIV1_onclick () ">
<Span id = "progress1"> & nbsp; </span>
<Span id = "progress2"> & nbsp; </span>
<Span id = "progress3"> & nbsp; </span>
<Span id = "progress4"> & nbsp; </span>
<Span id = "progress5"> & nbsp; </span>
<Span id = "progress6"> & nbsp; </span>
<Span id = "progress7"> & nbsp; </span>
<Span id = "progress8"> & nbsp; </span>
<Span id = "progress9"> & nbsp; </span>
<Span id = "progress10"> & nbsp; </span>
<Span id = "progress11"> & nbsp; </span>
<Span id = "progress12"> & nbsp; </span>
<Span id = "progress13"> & nbsp; </span>
<Span id = "progress14"> & nbsp; </span>
<Span id = "progress15"> & nbsp; </span>
</Div>
</Td>
</Tr>
</Table>
</Div>

 

(2) Write javascript scripts

<Script language = "javascript" type = 'text/javascript '>

Var progressEnd = 15; // set to number of progress <span>'s.
Var progressColor = 'green'; // set to progress bar color
Var progressInterval = 300; // set to time between updates (milli-seconds)
Var progressAt = progressEnd;
Var progressTimer;
// The onClick event of Button1 triggers progress_update ()
Function progress_update ()
{
ProgressAt ++;
If (progressAt> progressEnd)
{
Progress_clear ();
ProgressAt = 1;
}
Document. getElementById ('progress' + progressAt). style. backgroundColor = progressColor;
Progresstout = setTimeout ('Progress _ update () ', progressInterval );
}
// The onClick event of Button1 is about to complete triggering progress_stop ()
Function progress_stop ()
{
ClearTimeout (progresstout );
Progress_clear ();
}
Function progress_clear ()
{
For (var I = 1; I <= progressEnd; I ++) document. getElementById ('progress' + I). style. backgroundColor = 'transparent ';
ProgressAt = 0;
}
</Script>

 

(3) compile background code

'The status and event of Button binding during page Initialization
Protected Sub Page_Load (ByVal sender As Object, ByVal e As System. EventArgs) Handles Me. Load
If Not Me. IsPostBack Then
Button1.Attributes. Add ("onClick", "Lay1.style. visibility =''; progress_update ();")
End If
End Sub

'Set button attributes
Protected Sub button#click (ByVal sender As Object, ByVal e As System. EventArgs) Handles Button1.Click
MsgBox ("here it is ")
Me. scriptjdt (Me, "Lay1.style. visibility = 'hidd'; progress_stop ();")
End Sub

'Use Me. ClientScript. RegisterStartupScript to register a javascript script
Public Sub scriptjdt (ByVal objPage As System. Web. UI. Page, ByVal strValue As String)
Dim jb As String
Jb = "<script language = 'javascript 'Type = 'text/javascript '>" + strValue + "</script>"
ObjPage. ClientScript. RegisterStartupScript (Me. GetType (), "jdt_ OK", jb)

'Objpage. RegisterStartupScript ("jdt_ OK", jb)
End Sub