Я создал страницу, которая показывает анимацию, когда начинается операция на стороне сервера. ДИВ выглядит следующим образом:Asp.net/JQuery показать/скрыть анимированный gif перед загрузкой
<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>
Когда я нажимаю мою кнопку жерех, запускается анимация и отчет подготовлен. Проблема в том, что я хотел бы скрыть анимацию при загрузке отчета. Однако, когда загрузка выполнена, .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. Я готов принять другой подход.