Question

在我的项目中，我需要在Page load事件中显示一个Progress栏。基本上我从另一个应用程序得到了一个requiest。根据要求我的页面将创建一个pdf文件。因为创建pdf文件需要时间我需要在创建页面时显示进度条或动画gif图像。知道如何做到这一点。请记住，我这里没有使用任何button_click事件。

Answer 1

我想这样的事情可行：

在document.ready上通过调用如下函数显示gif图像：

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

true参数：ShowProgressBar(true);

完成PDF生成后;只需打电话：

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

但我觉得它不会那么简单：S

更新 - 工作示例

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

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

解释：在页面加载时调用ShowProgressBar以开始显示动画gif图像。以下行-createIframe();-动态创建iframe，并将src属性设置为将PDF写入响应流的网页的网址。然后，它会将iframe附加到页面body，并附加callback函数，该函数将在iframe加载完成时调用。由于在callback生成PDF文件时调用了PageGeneratingPDF.aspx函数，因此callback函数唯一要做的就是隐藏包含动画gif图像的div。

后面的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();        
}

你完成了。输出将是这样的。

...最初

first page

生成PDF后......

second image

StackOverflow中的

This other question非常有帮助。

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

1 个答案: