在ASP.NET Web窗体的Chrome浏览器中显示两个更新进度加载器
问题描述:
我正在使用ASP.NET WebForm,并且正在使用ASP.NET AJAX扩展控件更新面板和更新进度上传文件。我需要在上传文件时显示进度指示器。我的代码对于IE,Firefox和微软的边缘(我已经测试过)完美地工作,但是在Chrome中运行时,我看到两个指示符,而不是一个。尽管有两个指标,文件已成功保存到相应的文件夹。我无法解决问题,并来到这里提出一个问题。我的代码如下:在ASP.NET Web窗体的Chrome浏览器中显示两个更新进度加载器
Default.aspx的
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UpdatePanelUpdateProgressDemo.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Update Progress Demo</title>
<style type="text/css">
body {margin: 0; padding: 0; font-family: Arial; font-size: 10pt;}
.modal {position: fixed; z-index: 999; height: 100%; width: 100%; top: 0; background-color: Black; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.8;}
.center {z-index: 1000; margin: 300px auto; padding: 10px; width: 130px; background-color: White; border-radius: 10px; filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1; }
.center img {height: 128px; width: 128px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="modal">
<div class="center">
<img alt="" src="loader.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="margin: 20px">
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:RequiredFieldValidator ErrorMessage="Required" ControlToValidate="FileUpload1"
runat="server" ForeColor="Red"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="btnUpload" Text="Submit" runat="server" OnClick="Upload" />
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
<script type="text/javascript">
window.onsubmit = function() {
if (Page_IsValid) {
var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
window.setTimeout(function() {
updateProgress.set_visible(true);
}, 100);
}
}
</script>
</div>
</form>
</body>
</html>
Default.aspx.vb
using System;
namespace UpdatePanelUpdateProgressDemo
{
public partial class Default : System.Web.UI.Page
{
protected void Upload(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
string fileName = System.IO.Path.GetFileName(FileUpload1.FileName);
FileUpload1.SaveAs(Server.MapPath("~/Uploads/") + fileName);
}
}
}
答
-
设置你的UpdatePanel的的UpdateMode为Conditional
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >
-
触发AsyncPostBackTrigger你的按钮内的UpdatePanel:
<asp:AsyncPostBackTrigger ControlID="btnUpload" EventName="Click" />
感谢您的答复。当我根据您的代码进行更改时,它停止上传文件并且不会停止显示两个更新进度。 – Simant