Question

In my project I need to show a Progress bar in the Page load event.
Basically I get a requiest from another application. Based on the request
My page will create a pdf file. As it will take time to create the pdf file
I need to display a progress bar or an animated gif image as the page is being created.
Any idea how to do it. Remember I am not using any button_click events here.

Answer 1

I imagine something like this could work:

On document.ready have the gif image displayed by calling a function like this:

function ShowProgressBar(booleanValue)
{    if(booleanValue)
       $('#elementcontaingimage').show('slow');
     else 
       $('#elementcontaingimage').hide('slow');
}

with true parameter: ShowProgressBar(true);

And after the PDF is done being generated; just call something like:

ClientScriptManager cs = Page.ClientScript;
cs.RegisterClientScriptBlock(this.GetType(), "key", "ShowProgressBar(false);", false);

But I have the feeling that it won’t be as simple :S

UPDATE – working example

I figured out a way to make it work but you will need to separate the code that generates the PDF into a different page whose only purpose will be to write the PDF file to the response stream. Better yet, you could write an HttpHandler to write the PDF file to the Response Stream but for the purposes of this example, I’ll write the PDF file from a regular aspx page.

Step 1: Insert the following markup and javascript code in your page.

 <div id="imageDiv">
        <img alt="" src="images/ajax-loader.gif" />
    </div>
    <script language="javascript" type="text/javascript">
        function ShowProgressBar(booleanValue) {
            if (booleanValue) {
                $('#imageDiv').show('slow');
                createIframe();
            }
            else 
                $('#imageDiv').hide('slow');

        }
        function callback(parent) {
            ShowProgressBar(false);
        }
        function createIframe() {
            $('<iframe />', {
                name: 'myFrame',
                id: 'myFrame',
                src: 'PageGeneratingPDF.aspx',
                style: 'display:none;'
            }).appendTo('body').load(function () {
                callback(this);
            });
        }
        window.onload = ShowProgressBar(true);
    </script>

Explanation: On page load ShowProgressBar is called to start displaying an animated gif image. The following line -createIframe();- creates an iframe dynamically and sets the src attribute to be the url of the page that will write the PDF to the Response Stream. It then appends the iframe to the page body and attaches a callback function that will be invoked when the iframe is done loading. Since the callback function is called when PageGeneratingPDF.aspx is finished generating the PDF file, the only thing left for the callback function to do is hide the div containing the animated gif image.

The PageGeneratingPDF.aspx code behind could look something like this:

protected void Page_Load(object sender, EventArgs e)
{
    Thread.Sleep(10000);//Give the sensation that the pdf file takes long to generate
    //replace line below with actual code that generates the PDF file
    byte[] pdf = File.ReadAllBytes(Server.MapPath(@"~/file.pdf"));
    Response.AddHeader("Content-disposition", "attachment; filename=report.pdf");
    Response.ContentType = "application/octet-stream";
    Response.BinaryWrite(pdf);
    Response.Flush();
    Response.End();        
}

You are done. The output will be something like this.

Initially…

After generating the PDF…

This other question in StackOverflow, was very helpful.