Implement progress bar using Asp. Net callback

The effect is as follows:

First, add the following code to the HTML document:
<Div>
<Table class = "statusTable">
<Tr>
<Td id = "progress1">
</Td>
<Td id = "progress2">
</Td>
<Td id = "progress3">
</Td>
<Td id = "progress4">
</Td>
<Td id = "progress5">
</Td>
<Td id = "progress6">
</Td>
<Td id = "progress7">
</Td>
<Td id = "progress8">
</Td>
<Td id = "progress9">
</Td>
<Td id = "progress10">
</Td>
</Tr>
</Table>
<Asp: Label ID = "Label1" runat = "server" ForeColor = "Red" Text = "0"> </asp: Label>
</Div>
<Div>
<Input id = "btnRequest" type = "button" value = "Request" onclick = "Request ()"/>
<Input id = "btnStop" type = "button" value = "Stop" disabled = "disabled" onclick = "Stop ()"/>
</Div>
Add the following Js Code to the Js part:
<Script language = "javascript" type = "text/javascript">
Var idx = 0;
Var progressTimer;
Var progressInterval = 1000;
Function Request ()
{
Document. getElementById ("btnStop"). disabled = "";
Document. getElementById ("btnRequest"). disabled = "disabled ";
If (idx> = 10)
{
Clear ();
Return;
}
Var arg = idx;
<% = ClientScript. GetCallbackEventReference (this, "arg", "GetMsgBack", null) %>;
Idx ++;
Progresstout = setTimeout ('request () ', progressInterval );
}
Function GetMsgBack (result)
{
Document. getElementById ('progress' + idx). style. backgroundColor = 'blue ';
Var status = Number (result) * 10;
Document. getElementById ("Label1"). innerHTML = status + "% ";
}
Function Stop ()
{
ClearTimeout (progresstout );
Clear ();
}
Function Clear ()
{
Idx = 0;
Document. getElementById ("btnStop"). disabled = "disabled ";
Document. getElementById ("btnRequest"). disabled = "";
Document. getElementById ("Label1"). innerHTML = "0 ";
For (var I = 1; I <= 10; I ++)
Document. getElementById ('progress' + I). style. backgroundColor = 'transparent ';
}
</Script>
Add the following code to the css style file:
. StatusTable
{
Width: 100px;
Border: solid 1px #000000;
Padding-bottom: 0px;
Margin-bottom: 0px;
}
. StatusTable td
{
Height: 20px;
}
The callback code for the Asp. Net Server is as follows:
Public partial class DigitStatus: System. Web. UI. Page, ICallbackEventHandler
{
Private string AspEventArgs;
Protected void Page_Load (object sender, EventArgs e)
{
}
Public void RaiseCallbackEvent (string EventArgs)
{
AspEventArgs = EventArgs;
}
Public string GetCallbackResult ()
{
Int I = Convert. ToInt32 (AspEventArgs );
I ++;
Return I. ToString ();
}
}
In this way, a simple progress bar is implemented, and you can get the result at the top of the page by running it.