First: Create two classes, one for connecting to data (data layer) and the other for associating the previous class with the page (logical layer)
Create a new Jscsrip.js file
The code is as follows:
Copy Code code as follows:
function SETPGB (pgbid, Pgbvalue,pvalues)
{
if (Pgbvalue <= pvalues)
{
if (Lblobj = document.getElementById (pgbid+ ' _label '))
{
Lblobj.innerhtml =math.ceil ((pgbvalue/pvalues) *100) + '% '; Change the label value
}
if (Pgbobj = document.getElementById (pgbid))
{
var divchild = pgbobj.children[0];
Pgbobj.children[0].style.width = Math.ceil (pgbvalue/pvalues) *240);//pgbvalue;
}
Window.status = "Data Read the" + pgbvalue+ "bar, please wait";
}
if (Pgbvalue = = pvalues)
{
Window.status = "Data read has been completed";
Probar.style.display= "None";
Table1.style.display= "None";
}
}
Build a Common.css
The code is as follows:
Copy Code code as follows:
. bi-loading-status
{
/**//*position:absolute;*/
width:250px;
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);
}
Build a progressbar.htm
The code is as follows:
Copy Code code as follows:
<body topmargin= "0" leftmargin= "0" >
<table width= "100%" height= "100%" id= "Table1" runat=server>
<tr>
<TD align= "center" valign= "Middle" >
<div class= "Bi-loading-status" id= "Probar" style= "left:425px"; top:278px "align=" left ">
<div class= "text" id= "Pgbmain_label" align= "left" ></DIV>
<div class= "Progress-bar" id= "Pgbmain" align= "left" >
<div style= "width:5%" ></DIV>
</DIV>
</DIV>
</td>
</tr>
</table>
</body>
Create a Default.aspx file
The foreground code is as follows:
Copy Code code as follows:
<script language= "javascript" src= "Jscript.js" type= "Text/javascript" ></script>
<body >
<form id= "Form1" method= "POST" runat= "Server" >
<asp:gridview id= "GridView1" runat= "Server" >
</asp:GridView>
</form>
</body>
The background code is as follows:
Copy Code code as follows:
public partial class _default:system.web.ui.page
{
DataSet ds;
Text ts = new text ();
int count = 0;
#region Page_Load
private void Page_Load (object sender, System.EventArgs e)
{
if (! Page.IsPostBack)
{
ds = Getgridview ();
Count = ds. Tables[0]. Rows.Count;
Response.Write ("count=" + count);
String strFileName = Server.MapPath ("progressbar.htm");
StreamReader sr = new StreamReader (strFileName, System.Text.Encoding.Default);
String strhtml = Sr. ReadToEnd ();
Response.Write ("<div style= ' Align:center;valign:bottom;") > "+ strhtml + </div>");
Sr. Close ();
Response.Flush ();
Thread thread = new Thread (new ThreadStart (ThreadProc));
Thread. Start ();
LoadData (DS);
Getgridview ();
Load data
Thread. Join ();
}
}
#endregion Fixedheader
#region Getgridview
Protected DataSet Getgridview ()
{
ds = ts. Queryprocs ("2009/07", "XXXX");//This is a method in the logical layer
return DS;
}
#endregion
#region ThreadProc
private void ThreadProc ()
{
String strscript = "<SCRIPT>SETPGB (' pgbmain ', ' {0} ', '" + Count + "');</script>";
for (int i = 0; I <= count; i++)
{
System.Threading.Thread.Sleep (80);
Response.Write (String. Format (Strscript, i));
Response.Flush ();
}
}
#endregion LoadData
#region LoadData
private void LoadData (DataSet DDS)
{
for (int m = 0; m < count; m++)
{
for (int i = 0; i < DDS. Tables[0]. Columns.count; i++)
{
}
}
This. Gridview1.datasource = DDS. Tables[0]. DefaultView;
This. Gridview1.databind ();
}
#endregion Web Form Designer generated code
#region Web Form Designer generated code
Override protected void OnInit (EventArgs e)
{
//
Codegen:this the call are required by the ASP.net Web Form Designer.
//
InitializeComponent ();
Base. OnInit (e);
}
/**/
<summary>
Required to Designer support-do not modify
The contents is with the Code Editor.
</summary>
private void InitializeComponent ()
{
This. Load + = new System.EventHandler (this. Page_Load);
}
#endregion
}
When you start loading the page, the following illustration shows.
The data you want to display will be displayed automatically when you finish loading.
