Progress Bar on asp.net web page

I have to add a progress bar on my web page to show the progress of su开发者_Python百科bmission. My page on submit saves the data in the database. I have to show user how long will the submission take place. For an e.g., 50% Completed and so on..

in order to show a progress for the update process, you will need to send partial updates indicating the total percentage completed so far.

so the more applicable solution will be to use something like jQuery UI ProgressBar, and have a mechanism to send the mentioned percent to the user, then update the progress bar with the last sent value.

you can check the following articles for more details:

Using the jQuery ProgressBar Widget in ASP.NET Applications

Reporting server side operation progress with jQuery UI Progressbar

I see two ways in here, first, when you are going to do it asynchonous request, you can measure how long this takes in an average (10secs) and use this value for measure how far are we now. Second way is more suitable for huge data uploads .. You would need the database and application support and upload the data using batches. Then you can measure how many data you have and how far are you in the submitting.

You can simulate it with jQuery and a timer that extends the length of a colored div. Not really an server side genuine control but can be enough to make the visitors satisfied. The time and interval can be calculated due to what the user have to do.

Often, for the user experience, the look of the progress bar movement itself, it's more important then the fact its going to 100% (which usually are bad, if the action isn't fully finished before 100%).

[added]

You have to

1. Attach jquery script library with

   <script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script> 
   

2. Place and point a styled html control

   <div style="height:20px;width:200px;background-color:#777" id="somediv"></div> 
   

3. Point to it and affect it with javascript/jquery

   <script type="text/javascript"> 
     var width = 10;
   
     $(document).ready(function() {
         setTimeout("$('somediv').html('width,'" + width+10 + "')", 600);
     });
   
   </script> 
   

Please understand this is a sort of pseudocode (not fully copy pastable) to get an idea of my description. The setTimeout javascript function would make the div being bigger for each interval. Like adding 10px each, which make a good point to reuse the variable for a textaul description.