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

时间:2011-10-03 16:01:48

标签: c# jquery ajax visual-studio-2010

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

1 个答案:

答案 0 :(得分:3)

我想这样的事情可行:

在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非常有帮助。