Affichage de deux chargeurs de progression de mise à jour dans le navigateur Chrome dans ASP.NET Web Form

J'utilise ASP.NET WebForm et je télécharge un fichier à l'aide du panneau de mise à jour ASP.NET AJAX Extensions Update et Update Progress. J'ai besoin de montrer un indicateur de progression lors du téléchargement d'un fichier. Mon code fonctionne parfaitement pour IE, Firefox et Microsoft edge (que j'ai testé) mais en cours d'exécution dans Chrome, je vois deux indicateurs au lieu d'un. Bien qu'il existe deux indicateurs, le fichier est enregistré avec succès dans le dossier respectif. Je suis incapable de résoudre le problème et je suis venu ici pour poser une question. Mon code est comme ci-dessous:Affichage de deux chargeurs de progression de mise à jour dans le navigateur Chrome dans ASP.NET Web Form

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

Source

2017-10-04 Simant

Set UpdateMode de votre UpdatePanel à condition

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

Trigger AsyncPostBackTrigger à votre bouton à l'intérieur UpdatePanel:
```
<asp:AsyncPostBackTrigger ControlID="btnUpload" EventName="Click" /> 
```

Source

2017-10-09 18:54:24 AsifAli72090

Merci pour la réponse. Quand j'ai changé le code en fonction de vous, il a arrêté de télécharger un fichier et n'arrête pas d'afficher deux progrès de mise à jour. – Simant

Affichage de deux chargeurs de progression de mise à jour dans le navigateur Chrome dans ASP.NET Web Form

Répondre

Questions connexes