在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); 
     } 
    } 
}

来源

2017-10-04 Simant

设置你的UpdatePanel的的UpdateMode为Conditional

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" >

触发AsyncPostBackTrigger你的按钮内的UpdatePanel：

<asp:AsyncPostBackTrigger ControlID="btnUpload" EventName="Click" />

来源

2017-10-09 18:54:24 AsifAli72090

感谢您的答复。当我根据您的代码进行更改时，它停止上传文件并且不会停止显示两个更新进度。 – Simant

在ASP.NET Web窗体的Chrome浏览器中显示两个更新进度加载器

回答

相关问题