0

I'm trying to build simple progress bar in ASP.NET with jquery. I would like to pass data from method from behind. So I have simple div progress bar

<div class="w3-border">
<div class="w3-grey" id="progressBar0" style="height:24px;width:0%">
</div>
</div>

C# method

protected void btnUpload_Click(object sender, EventArgs e) {
    int p = 0;
    while (p < 100) {

      ClientScript.RegisterStartupScript(this.GetType(), "script" + p, 
          "SetProgressBarProgressAmount(0," + p + ");", true);

   System.Threading.Thread.Sleep(1000);

   p++;
    }

and jQuery

<script type = "text/javascript" language = "javascript" >
function SetProgressBarProgressAmount(id, progress) {
    var progressBarId = 'progressBar' + id;
    progressAmount = progress + 'px';
    var progressDiv = document.getElementById(progressBarId);
    progressDiv.style.width = progressAmount;
} </script>

I'm doing something stupid because I'm getting 100% on the end but nothing between. Thank you.

Marian
  • 1
  • 3
  • One thing I notice is that your C# method is looping 100 times to call the progress update and then immediately moves on to sleep for 1 second followed by the 100% progress update. In your loop you're not waiting any amount of time for the next update so it will go through that part very quickly. But aside from that, I must ask ... what is the point of this code? Specifically, why loop 100 times if there is nothing useful actually being done behind the scenes? The progress bar updates should happen in between different parts of a long running background process. – Andrew Feb 03 '19 at 20:49
  • Code is just an example. Of course there will be no loop, input for progress will come from other method. My issue is that I don't see progress on progress bar just 0 and then 100. Most probably I'm missing something. – Marian Feb 03 '19 at 22:02
  • It's not going to work like how you want it to work because what's happening is all those JS scripts you're pushing off in the loop are going to be all there on page load. It's not going to render, execute JS, then go back to C# again to render the next JS script. It's going to load all those JS scripts at once, and the browser is going to optimize all those calls and will only show the last update. You might want to look for a C# progress bar, such as https://stackoverflow.com/questions/12126889/how-to-use-winforms-progress-bar, depending on what version of C# you have. – Doug F Feb 04 '19 at 02:15

0 Answers0