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

Question

在我的项目中，我需要在页面加载事件中显示一个进度条。 基本上我从另一个应用程序中得到一个请求。根据要求 我的页面将创建一个 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 写入响应流的页面的url。然后它将iframe 附加到页面body 并附加一个callback 函数，该函数将在iframe 完成加载时调用。由于callback 函数在PageGeneratingPDF.aspx 完成生成PDF 文件时被调用，所以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();        
}

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

最初...

生成 PDF 后...

StackOverflow 中的This other question 非常有帮助。