CodeSnip: Creating a ProgressBar with ASP.NET: ASP Alliance


CodeSnip: Creating a ProgressBar with ASP.NET

page

by jayanthi surya prakash
Feedback

Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 13915/ 17

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>&nbsp;&nbsp;&nbsp;</td>
      <td><asp:datagrid id="DataGrid2" runat="server"></asp:datagrid></td>
      <td>&nbsp;&nbsp;&nbsp;</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("&nbsp;")
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.

Product Spotlight