ASP.NET UpdateProgress未显示

Question

这只是一个测试页面，所以我可以看到工作指示器的样子，但该死的UpdateProgress根本没有出现......

该测试只是构建一个对象列表并填充列表框，而列表框中的项目少于100个。

<asp:UpdatePanel runat="server" ID="UpdatePanel">
    <ContentTemplate>
        <asp:Button runat="server" ID="TestButton" OnClick="TestButton_Click" CssClass="btn btn-primary" Text="Begin Test" />
        <asp:ListBox runat="server" ID="LicensesListBox" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" ID="UpdateProgress" DisplayAfter="10" AssociatedUpdatePanelID="UpdatePanel">
    <ProgressTemplate>
        <div id="modal">
            <div class="modal-content">
                <div class="header">
                    <h2>Working...</h2>
                </div>
                <div class="copy">
                    <p><i class="fas fa-spinner"></i></p>
                </div>
            </div>
            <div class="overlay"></div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

代码隐藏：

protected void TestButton_Click(object sender, EventArgs e)
{
    // Change the button so we know that work is being done.
    TestButton.Enabled = false;
    var fixture = new Fixture();
    fixture.Behaviors.OfType<ThrowingRecursionBehavior>().ToList()
        .ForEach(b => fixture.Behaviors.Remove(b));
    fixture.Behaviors.Add(new OmitOnRecursionBehavior());

    do
    {
        // Sleep the thread in case the work is getting done too quickly.
        Thread.Sleep(10000);

        // Create the license objects.
        var licenses = fixture.CreateMany<License>();
        foreach (var license in licenses)
        {
            // Add the license to the listbox.
            LicensesListBox.Items.Add(new ListItem(license.Name));
        }
    }
    while (LicensesListBox.Items.Count < 100);
}

在10秒钟的睡眠中，我预计会触发UpdateProgress显示，但什么都没发生。

控制台中甚至没有错误供我使用。

如果有人认为这会导致显示ProgressTemplate的问题，那么这是模态的CSS：

#modal {
    left: 50%;
    margin: -250px 0 0 -32%;
    opacity: 0;
    position: absolute;
    top: -50%;
    visibility: hidden;
    width: 65%;
    box-shadow: 0 3px 7px rgba(0,0,0,.25);
    box-sizing: border-box;
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out
}

    #modal:target {
        opacity: 1;
        top: 50%;
        visibility: visible
    }

    /* custom modal css */
    #modal .header {
        border-bottom: 1px solid #1ABC9C;
        border-radius: 5px 5px 0 0
    }

    #modal h2 {
        margin: 0;
    }

    #modal .copy, #modal .header {
        padding: 10px;
    }

.modal-content {
    position: relative;
    z-index: 20;
    border-radius: 5px;
    color: #fff
}

#modal .overlay {
    background-color: #000;
    background: rgba(0,0,0,.8);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10
}

/* spinner */
.copy i {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

这是一个小提琴，可以或多或少地展示我所期待的：https://jsfiddle.net/aemk31vL/

Answer 1

你有一个CSS问题，让我们解决这个问题。

首先：让我们以一种可以处理CSS动画的方式渲染asp:UpdateProgress，使用visibility CSS属性而不是display，我们通过将控件的DynamicLayout属性设置为false来实现。

<asp:UpdateProgress runat="server" ID="UpdateProgress" DisplayAfter="10" AssociatedUpdatePanelID="UpdatePanel" DynamicLayout="false">
...
</asp:UpdateProgress>

第二：让我们稍微调整你的CSS，这样你的模态可以根据其容器的aria-hidden属性触发CSS动画（redered asp:UpdateProgress）：

改变这个：

#modal:target {
    opacity: 1;
    top: 50%;
    visibility: visible
}

为此（假设UpdateProgress是你的asp:UpdateProgress的ID）：

#UpdateProgress[aria-hidden=false] #modal {
    opacity: 1;
    top: 50%;
    visibility: visible
}

应该这样做。

我必须同意这有点hacky，我们依赖于在UpdateProgress容器上由WebForms动态设置的aria-hidden属性，但我不希望这种行为发生变化。

Answer 2

只需用此替换您的UpdateProgress即可。归功于How I can use the UpdateProgress Control for show a waittime

<asp:UpdateProgress ID="UpdateProgress" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UpdatePanel">
    <ProgressTemplate>
        <div class="progress">
           <img src="https://media.giphy.com/media/y1ZBcOGOOtlpC/giphy.gif" />&nbsp;please wait...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>