CodeSnip: Creating a ProgressBar with ASP.NET
page 1 of 1
Published: 30 Jan 2006
Unedited - Community Contributed
Abstract
In this article, Jayanthi demonstrates how to create a simple progress bar using ASP.NET.
by jayanthi surya prakash
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 46829/ 43

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.



User Comments

Title: NICE   
Name: ABHIT KUMAR SINGH
Date: 2012-07-10 10:33:57 AM
Comment:
that`s nice working in process bar
Title: Dev123   
Name: S A
Date: 2011-04-04 11:23:05 AM
Comment:
Great Job
Title: gud job   
Name: Anusha shetty
Date: 2011-03-30 1:58:06 AM
Comment:
easy to understand
Title: Great Work   
Name: Sujith
Date: 2010-08-19 3:52:54 AM
Comment:
Gr8 work,,,I was struggling for last one week...now got it...Thanks a lot
Title: progress bar   
Name: Vel
Date: 2010-06-03 7:17:54 AM
Comment:
Bravo Jayanthi, Thanks for sharing this with us.
:-)
Title: Progress Bar is not working in Mozilla Firefox, Please help   
Name: D.Srinivas
Date: 2010-01-20 1:24:38 AM
Comment:
The progress bar working in IE but it is not working in Mozilla FireFox, please help me.
Title: Response.redirect is not working after finishing the long process   
Name: Sheno
Date: 2009-07-13 4:58:45 AM
Comment:
page redirect is not possible,on this.How to make it???
Title: Progress bar will not flush if code is put into form_load   
Name: Roi
Date: 2009-03-22 11:33:41 AM
Comment:
In general, it is good. But when I need to put this progress bar code into a form_load event, even if the process has been finished, it still shows "Please wait() ...". How to make it disappear after the process finishes in the form_load event?
Title: Progress Bar   
Name: Faisal
Date: 2008-11-01 10:26:35 AM
Comment:
Good and Thanks,
Title: Progess Bar with Asp.Net   
Name: Abhiram Reddy Mekha
Date: 2008-10-22 6:25:35 AM
Comment:
Hi
Can you please give the same code in C# please.
I need it.
Title: progress bar   
Name: Ananta
Date: 2008-10-09 2:57:31 AM
Comment:
It doesnt work on firefox. please tell me any other option
Title: Animated Image   
Name: Perpetual
Date: 2008-09-11 3:54:24 AM
Comment:
Compliments
Great work...
But instead of text you can display animated image....,
It would look very professional
Title: progress bar   
Name: priya
Date: 2008-09-10 5:25:40 AM
Comment:
Hi your code is real help but at some point i am getting error saying "Microsoft JScript runtime error: Object expected" pointing at "HideWait()" can you help
Title: Excellent Progress Bar   
Name: Ramya Kumar
Date: 2008-08-14 5:23:46 AM
Comment:
Great help to complete our project. Thanks jayanthi surya prakash.
Title: Progress bar is not working in MAC   
Name: Shruti
Date: 2008-07-05 1:38:16 AM
Comment:
Progress bar is not working in MAC
Title: Mr   
Name: Shameer
Date: 2008-02-27 6:55:34 AM
Comment:
Thank You
Great work
Title: It doesnt work on firefox   
Name: Gopinath
Date: 2008-02-15 1:24:55 AM
Comment:
It doesnt work on firefox. please tell me any other option
Title: Hurray! After A long and Long Search i m at the right Place!   
Name: Nirpendra
Date: 2008-02-07 4:07:55 AM
Comment:
Great work...
thanks a Lotsssssssss.....
Title: Good   
Name: Lavio
Date: 2007-12-12 1:30:16 AM
Comment:
It is a good example for progress bar....thanks
Title: Perfect   
Name: Nicola
Date: 2007-12-06 5:55:37 AM
Comment:
Compliments, it's a very useful and simple script.
It opens the way to a lots of differents usages and implementation.
Thanks.
Title: nice example   
Name: ravindra
Date: 2007-11-26 6:40:15 AM
Comment:
its a good example. thanx a lot...
Title: So great   
Name: n_n
Date: 2007-08-07 3:08:13 AM
Comment:
I was trying for so many days.. finaly.. this article save my ass.. :p
Title: hi need help   
Name: Rashmi
Date: 2007-07-30 7:39:27 AM
Comment:
I want to know how to filter out the contents of a drop down list based on the selection of another drop down list..
like u have country and state..when i select the country the states of that counry should be loaded in State drop down list.Please give me the code in C#.
u can mail it to
rashmi_8384@yahoo.co.in
Title: You are the best   
Name: Ragahvendra
Date: 2007-06-21 1:15:31 AM
Comment:
I need the code in c#
Title: ProgressBar - very easy to implement   
Name: Reena
Date: 2007-05-10 11:58:20 AM
Comment:
Hi,

Your code was really helpful, Did a lot of vain search for the progress bar and finally got urs working well, thanks a lot.
Title: CodeSnip: Creating a ProgressBar with ASP.NET   
Name: jayanthi surya prakash
Date: 2006-12-20 4:26:27 AM
Comment:
Hi Jayanthi,

Thanks a lot for such a beautiful progress bar approach, i have searched a lot for progress bar but none of them is fit for my application, at last yours code worked for me

thanks a lot once again with whole hearts

thanks and regards,
kumar
Title: thanks janthi   
Name: kapil
Date: 2006-12-11 4:46:30 AM
Comment:
hi thanks for your wonderful code that was good i have implemented this concept in my project and i need the progressbar with the multi thread that should load based on the data load.
Title: Mr.   
Name: LuisH
Date: 2006-09-22 5:26:52 PM
Comment:
Un fortunatelly I got a message: "Session state has created a session id, but cannot save it because the response was already flushed by the application".
Title: Good work   
Name: sakthi
Date: 2006-09-18 1:54:12 AM
Comment:
this is useful comment for statrting .net develop[er
Title: good!   
Name: trueideal
Date: 2006-07-25 9:36:52 PM
Comment:
good idea,thanks.
Title: Ms   
Name: me
Date: 2006-07-07 1:44:35 AM
Comment:
I am doing the same. I am acheiving the result but the design is getting disturbed. Any idea ? Please help me.
Title: create a simple progress bar using ASP.NET.   
Name: Prashant
Date: 2006-06-05 6:53:27 AM
Comment:
Good one, but i wanna to run at client side
Title: Mr.   
Name: Satya SK Jayanty
Date: 2006-05-09 1:18:22 PM
Comment:
A good one on the basic needs to create a user-defined message on a webpage.
Title: Helpful   
Name: Liji
Date: 2006-04-11 5:54:55 AM
Comment:
very simple and Easy to understand...
Title: beginner in learning asp.net   
Name: Eunice
Date: 2006-03-09 11:02:19 AM
Comment:
Hi, do you mind explaining it step by step of your codings?If possible, having diagrams would be easier for me to following instead of the entire chunk of codings
Title: Not working on the Mac   
Name: D
Date: 2006-03-09 10:48:50 AM
Comment:
Tried an example on the Mac and javascript is not compatible with the mac.
Title: thanks   
Name: shiva
Date: 2006-02-20 11:20:06 PM
Comment:
thanks jayanthi surya prakash, its very simple and usefull
Title: It Does not works on FireFox 1.5   
Name: Victor
Date: 2006-02-08 10:43:06 AM
Comment:
Good example but... I does not works on FireFox 1.5. I'm doing somthing wrong? Can you confirm it?

Thanks
Title: Excellent   
Name: Roshan
Date: 2006-02-07 11:41:16 PM
Comment:
Well put for all!!!! Excellent article
Title: Test   
Name: Vijaya Saradhi
Date: 2006-01-30 11:38:24 PM
Comment:
Hai this is very good.
Title: Progress bar   
Name: Mamta
Date: 2006-01-30 10:47:17 PM
Comment:
Gud one!
Title: progressbar   
Name: Rajesh Toleti
Date: 2006-01-30 6:39:13 AM
Comment:
Good article!But you have to add
dtDummy.Columns.Add(dc2(1))
after this line
dc2(1).ColumnName = "Bank_Account"
to make it work.
Title: Good stuff   
Name: Ravikiran P
Date: 2006-01-30 4:00:32 AM
Comment:
Surya, explained the things in simple for begginer level buddies in .net.
best wishes n thanks
Title: Mr.   
Name: Satya SK Jayanty
Date: 2006-01-30 3:38:54 AM
Comment:
An useful content for a beginner to know about ASP snippet in their programs, well defined article.
Good luck.

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2017 ASPAlliance.com  |  Page Processed at 2017-10-20 1:09:50 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search