Question

我创建了一个页面，在开始服务器端操作时显示动画。 div看起来像这样：

 <div id="loading" style="display: none;">
        <img id="loading-image" 
         src="../../Images/waiting-animation-extra.GIF" alt="Loading..." />
    </div>

我的客户端脚本如下所示

   $(document).ready(function () {
        $("#btnExportToExcel").click(function () {               
            $('#loading').show();                
        });
    });

我的Css看起来像这样：

 <style type="text/css">
    #loading {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    }

    #loading-image {
        position: absolute;
        top: 40%;
        left: 45%;
        z-index: 100;
    }
</style>

当我点击我的asp按钮时，动画开始并准备好报告。问题是我想在下载报告时隐藏动画。但是，下载完成后，.gif就会冻结。我在各个方面的代码中尝试了ScriptManager.RegisterStartupScript(this, GetType(), "DoHide", "$("#loading").hide();", true);，但它似乎受到此代码的影响：

 DateTime time = DateTime.Now;

    Response.Clear();
    Response.AddHeader("content-disposition" 
          ,string.Format("attachment;filename=Equipement Man Game Played {0}.xls"
         ,time.ToShortDateString()));
    Response.ContentType = "application/vnd.xls";
    System.IO.StringWriter writer = new System.IO.StringWriter();
    System.Web.UI.HtmlTextWriter html = new HtmlTextWriter(writer);
    gdvData.RenderControl(html);    
    Response.Write(writer.ToString());
    Response.End();

Response.Write和Repsonse.End停止.hide()。我需要做的就是显示一个单击按钮后将启动的动画，并在服务器端数据库工作并完成xls下载后停止。我愿意采取不同的方法。

Answer 1

从asp.net按钮，这将无法正常工作。您需要使用常规HTML按钮使用AJAX调用下载，并且在AJAX成功时，您可以使用图像隐藏div。

Asp.net / JQuery在下载之前显示/隐藏动画gif

1 个答案: