在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瀏覽器中顯示兩個更新進度加載器

回答

相關問題