ansaurus

Question

progress bar asp.net

Answer 1

A:

Actually, you not only need thread functionality at the server, but some kind of a javascript asynchronous logic that would periodically ask for the progress of calculation. Otherwise the server is not able to send it.

You might be able to use some control library though, I think I have seen some fancy progress bars around. If you want to start from scratch, here a couple of tips :

At the server side, create a class with static variable / dictionary that will hold the progress and insert some points in the code where you write the progress into the variable. Create a web method which just starts a new thread and a second one that gives you back the progress. Optionally, you can make a cancel method which would set some flag that the worker method reads and throws an exception.

At client side, simply use some javascript library (Prototype, jQuery etc.) to fire AJAX callbacks to those methods. Simple visual representation could be a table like you said or maybe a simple div with a background for which you just set a percentage width, something like :

 <div class="prog">
    <div class="con">
      <div class="bar" id="progressBar" style="width:0"></div>
    </div>
 </div>

with css styles

.prog 
 { width:412px;height:18px !important;border:1px solid #ccc;
   border-bottom-color:#ddd;border-right-color:#ddd;padding:0;
   margin:0;float:left;display:inline;overflow:hidden; }

.prog .con 
{ width:410px;height:16px !important;
  background:transparent url("images/background.jpg") repeat-x 0 2px;
  border:0;margin:0;padding:1px; text-align:left;
}

.prog .con .bar  
{
  height:16px;background:transparent url("images/background.jpg") repeat-x 0 -15px; 
}

and in javascript where you need to set the progress

$('progressBar').style.width = new_progress;

In case you don't want to show the exact progress, you can use some animated progress indicators

Thomas Wanner 2010-01-20 07:24:25

The thing is... i just need a bar which keep on changing. It can increment 0-100-0-100...in this way. That is, it need not be exactly the same percentage wise increment.Even a user control which do the same above with some javascript will do for me.

anish 2010-01-20 07:34:23

So basically you just need an animation ? Then why don't you use some animated gif ;)

Thomas Wanner 2010-01-20 07:40:24

:)...not animation...I guess i can use ur code...with a small change as below :while(true){int new_progress = 0;$('progressBar').style.width = new_progress++;if(new_progress == 100){new_progress = 0;}}what u think ?

anish 2010-01-20 07:45:01

That would work as well, but don't forget to add some delay so it's not too fast.. and at some point you might want to stop the animation so I would replace while(true) with some guard ;)

Thomas Wanner 2010-01-20 07:46:33

Answer 2

+1 A:

The following code doesn't use a table, instead just divs, but it should do what you're after. I included the html and body tags so you can copy and paste it easily to see what it looks like. This is all client side of course, and does not depend on ASP.NET, the idea is that you start the progress bar with the onsubmit event, and the response page doesn't start loading until the data inport/export has completed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html><body>
<div id="progressDiv" style="width:100%;"></div>

<script type="text/javascript">
    timerId = setInterval("addBlock()", 100);
    function addBlock()
    {
        var progressDiv = document.getElementById('progressDiv')
        var div = document.createElement('div');

        div.style.display = 'block';
        div.style.cssFloat = 'left';
        div.style.styleFloat = 'left';
        div.style.width = '10px';
        div.style.height = '10px';
        div.style.backgroundColor = 'red';
        div.style.border = '1px solid black';

        progressDiv.appendChild(div);
        if (progressDiv.childNodes.length == 20)
            while (progressDiv.hasChildNodes())
                progressDiv.removeChild(progressDiv.firstChild);
    }
</script>
</body></html>

Martin Booth 2010-01-20 07:45:51

thanks..i ll chk and tell u

anish 2010-01-20 08:11:51

I got it working...but the issue is..it s incrementing vertically..:(

anish 2010-01-20 08:28:56

Sorry Anish, I made a small modification to code to account for Internet Explorer (IE uses the property styleFloat and firefox uses cssFloat). Should have remembered this and should have tested it. Hope this helps!

Martin Booth 2010-01-20 13:25:04

ansaurus

tags:

views:

answers:

progress bar asp.net

related questions