在页面加载事件上显示Ajax进度条。

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.

在我的项目中，我需要在页面加载事件中显示进度条。基本上，我从另一个应用程序获得了一个最需要的东西。根据请求，我的页面将创建一个pdf文件。因为创建pdf文件需要时间，所以在创建页面时需要显示进度条或gif动画图像。你知道怎么做吗?记住，这里没有使用button_click事件。

1 个解决方案

#1

I imagine something like this could work:

我想这样的事情可能会发生:

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

在文档。准备好了，通过调用如下函数来显示gif图像:

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

with true parameter: ShowProgressBar(true);

真正的参数:ShowProgressBar(真正的);

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

在生成PDF之后;就叫类似:

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

但我觉得事情不会这么简单: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.

我找到了一种使它工作的方法，但是您需要将生成PDF的代码分离到另一个页面，该页面的唯一目的是将PDF文件写入响应流。更好的是，您可以编写一个HttpHandler来将PDF文件写入响应流，但是出于这个示例的目的，我将从一个常规的aspx页面写入PDF文件。

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

步骤1:在页面中插入以下标记和javascript代码。

 <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.

说明:在页面加载时，会调用ShowProgressBar来开始显示一个gif动画图像。下面的行- createiframe();-动态创建一个iframe，并将src属性设置为将把PDF写入响应流的页面的url。然后，它将iframe附加到页面主体，并附加回调函数，在加载iframe时调用该函数。因为回调函数在PageGeneratingPDF中被调用。aspx完成了PDF文件的生成，回调函数只需要隐藏包含gif动画图像的div。

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

PageGeneratingPDF。后面的aspx代码可能是这样的:

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...

后生成PDF……

This other question in *, was very helpful.

*网站上的另一个问题很有帮助。