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

【问题标题】：Displaying two update progress loaders in Chrome browser in ASP.NET Web Form在 ASP.NET Web 窗体的 Chrome 浏览器中显示两个更新进度加载器
【发布时间】：2018-03-15 19:54:14
【问题描述】：

我正在使用 ASP.NET WebForm，并且正在使用 ASP.NET AJAX Extensions 控件更新面板和更新进度上传文件。我需要在上传文件时显示进度指示器。我的代码在 IE、Firefox 和 Microsoft Edge（我已经测试过）上运行良好，但是在 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);
        }
    }
}

【问题讨论】：

标签： asp.net webforms asp.net-ajax updatepanel

【解决方案1】：

将 UpdatePanel 的 UpdateMode 设置为 Conditional

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

将 AsyncPostBackTrigger 触发到 UpdatePanel 中的按钮：

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

【讨论】：

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