Introduction
This article will help you to create a simple progress bar that
you can simply plug into your ASP.NET applications. The application will show
the message "Generating Report. Please wait…" for a few seconds and
then display a DataGrid populated with values.
Requirements
.NET Framework 1.1
ASP.NET Page Code
Listing 1
<form id="Form1" method="post" runat="server">
<TABLE id="parentTable" cellSpacing="0" cellPadding="0" width="100%"
align="left" border="0">
<tr>
<td><asp:datagrid id="DataGrid1" runat="server"></asp:datagrid></td>
<td> </td>
<td><asp:datagrid id="DataGrid2" runat="server"></asp:datagrid></td>
<td> </td>
<td><asp:DataGrid id="DataGrid3" runat="server"></asp:DataGrid></td>
</tr>
</table>
<script lang="javascript">
HideWait();
</script>
</form>
Visual Basic .NET Code
After adding the above code, create a Visual Basic .NET code
behind file and add the code in Listing 2. If you are using Visual Studio .NET
2003 to create projects, double-click anywhere on the design area and add the
code given below.
Listing 2
Dim ObjDataSet As New DataSet
Response.Write("<div id='mydiv' STYLE='FONT-WEIGHT: bold; FONT-SIZE: 11pt; LEFT:
320px; COLOR: black; FONT-FAMILY: Verdana; POSITION: absolute; TOP: 140px; TEXT-
ALIGN: center' >")
Response.Write(" ")
Response.Write("</div>")
Response.Write("<script> var mydiv = document.getElementById('mydiv');
mydiv.innerText = '';</script>")
Response.Write("<script language=javascript>")
Response.Write("var dots = 0;var dotmax = 10;function ShowWait()")
Response.Write("{var output; output = 'Generating Report. Please
wait';dots++;if(dots>=dotmax)dots=1;")
Response.Write("for(var x = 0;x < dots;x++){output += '.';}mydiv.innerText =
output;}")
Response.Write("function StartShowWait(){mydiv.style.visibility =
'visible';ShowWait();ShowWait();window.setInterval('ShowWait()',10);}")
Response.Write("function HideWait(){mydiv.style.visibility =
'hidden';window.clearInterval();}")
Response.Write("StartShowWait();</script>")
Response.Flush()
Dim dtDummy As New DataTable
Dim dc(2) As DataColumn
Dim dc2(2) As DataColumn
dc(0) = New DataColumn
dc(0).ColumnName = "Type"
dtDummy.Columns.Add(dc(0))
dc(1) = New DataColumn
dc(1).ColumnName = "Country"
dtDummy.Columns.Add(dc(1))
dc2(0) = New DataColumn
dc2(0).ColumnName = "Bank_Company_Name"
dtDummy.Columns.Add(dc2(0))
dc2(1) = New DataColumn
dc2(1).ColumnName = "Bank_Account"
ObjDataSet.Tables.Add(dtDummy)
Dim ObjRow As DataRow
Dim i As Integer
Dim j As Integer
For i = 0 To 100
ObjRow = ObjDataSet.Tables(0).NewRow
ObjRow("Type") = "Bank"
ObjRow("Country") = "India"
ObjRow("Bank_Company_Name") = "World Bank"
ObjRow("Bank_Account") = "12345"
ObjDataSet.Tables(0).Rows.Add(ObjRow)
DataGrid1.DataSource = ObjDataSet
DataGrid1.DataBind()
DataGrid2.DataSource = ObjDataSet
DataGrid2.DataBind()
DataGrid3.DataSource = ObjDataSet
DataGrid3.DataBind()
Next
The core of the above application is the three functions,
namely ShowWait, StartShowWait, and HideWait. ShowWait sets text of the DIV tag
to "Loading" followed by 10 periods. StartShowWait calls the ShowWait
function every second and makes the DIV tag visible. HideWait hides the DIV tag
when the page is done loading. It is called from a script block as shown in Listing
1 above.
Conclusion
You have now learned how to create a simple progress bar using
ASP.NET that you can use to display a user-friendly message while your user
waits for the page to load.