我正在维护旧版VB.Net Webforms应用程序,添加一个部分后遇到了一个奇怪的问题。
这是aspx页面中的以下代码,该页面显示回发时的giphy.gif:
<style type="text/css">
.modalWait
{
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.5;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
/*border: 5px solid #67CFF5;*/
width: 100px;
height: 100px;
display: none;
position: fixed;
background-color: transparent;
z-index: 999;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modalWait");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
</script>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form runat="server">
<asp:ScriptManager runat="server"></asp:ScriptManager>
<!-- Page Wrapper -->
<div id="wrapper">
<!-- More Code -->
</div>
<!-- End of Page Wrapper -->
<div class="loading" align="center">
<%--Loading. Please wait.<br /><br />--%>
<img src="../img/giphy.gif" />
</div>
</form>
对于填充控件的所有查询,它都是完美的解决方案-.gif会在调用数据库时出现,然后消失。
但是后来我添加了一个函数,将datagrid读取为.csv,然后下载。除非我在后面的代码中添加此部分,否则它运行完美:
Dim bytes As Byte() = Encoding.ASCII.GetBytes(sb.ToString())
Response.Clear()
Response.ContentType = "text/csv"
Response.AddHeader("Content-Length", bytes.Length.ToString())
Response.AddHeader("Content-disposition", "attachment; filename=contacts.csv")
Response.Write(sb.ToString())
Response.Flush()
Response.End()
该文件下载得很完美……但是giphy.gif仍然存在……即使回发已完成,它也不会消失。
我究竟做错了什么?
正如VDWWD解释的那样(“ UI永远不会更新,因为服务器一次只能发送一种类型的响应(文件或html页面)”),您的真正问题是您不知道文件下载何时完成(或确切地说,当准备文件的服务器端代码完成执行时)。
有超过关于这个问题了一把这里SO和令人惊讶的几乎总是答案是你可以不知道!
好吧,不完全是!
您总是可以通过发回包含时间戳的唯一命名的cookie来让客户端知道。在客户端上,javascript代码会尝试检测Cookie的存在,并在其执行时隐藏您显示的任何加载图像(或文本或其他内容)。
因此,无需费力,这里是代码(我仅使用loading
css类使示例更简单,更小):
<form id="form1" runat="server">
<div class="loading">
Loading. Please wait.<br />
<br />
</div>
<asp:HiddenField ID="windowid" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Download"
OnClick="Button1_Click"
OnClientClick="ShowProgress();" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
$(".loading").show();
checkCookie();
}
function checkCookie() {
var cookieVal = $.cookie($('#<%= windowid.ClientID %>').val());
if (cookieVal == null || cookieVal === 'undefined') {
setTimeout("checkCookie();", 1000);
}
else {
$(".loading").hide();
}
}
</script>
VB.NET的代码隐藏:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
' the hidden value will be used to uniquely name the cookie and
' will be used both on the server and the client side to
' work with the cookie.
windowid.Value = Guid.NewGuid().ToString()
End If
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs)
' for demo purposes only
System.Threading.Thread.Sleep(4000)
GetCsv()
End Sub
Protected Sub GetCsv()
' ...
Dim bytes As Byte() = Encoding.ASCII.GetBytes(sb.ToString())
Response.Clear()
Response.Cookies.Add(New HttpCookie(windowid.Value, DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss:ff")))
Response.AddHeader("Content-Disposition", "attachment; filename=contacts.csv")
Response.AddHeader("Content-Length", bytes.Length.ToString())
Response.ContentType = "text/csv"
Response.Write(sb.ToString())
Response.Flush()
Response.End()
End Sub
C#背后的代码:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// the hidden value will be used to uniquely name the cookie and
// will be used both on the server and the client side to
// work with the cookie.
windowid.Value = Guid.NewGuid().ToString();
}
}
public void GetCsv()
{
// ...
var bytes = Encoding.ASCII.GetBytes(sb.ToString());
Response.Clear();
Response.Cookies.Add(new HttpCookie(windowid.Value, DateTime.Now.ToString("yyyy-MM-dd hh:mm:ss:ff")));
Response.AddHeader("Content-Disposition", "attachment; filename=contacts.csv");
Response.AddHeader("Content-Length", bytes.Length.ToString());
Response.ContentType = "text/csv";
Response.Write(sb.ToString());
Response.Flush();
Response.End();
}
protected void Button1_Click(object sender, EventArgs e)
{
// for demo purposes only
System.Threading.Thread.Sleep(2000);
GetCsv();
}
我希望这有帮助。如果可以的话,我建议我们编辑问题的标题(也许其中一些内容),以帮助其他人最终找到解决问题的可行解决方案,而该问题一直以来并未得到真正的回答。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句