c# - ASP.NET UpdateProgress不显示

这只是一个测试页面，所以我可以看到工作指示器的外观，但是该死的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/

最佳答案

您有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属性（重新标记的asp:UpdateProgress）触发CSS动画：

更改此：

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

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

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

那应该做。

我必须同意这有点棘手，我们依赖于WebForms在UpdateProgress容器上动态设置的aria-hidden属性，但是我不希望这种行为会改变。

关于c# - ASP.NET UpdateProgress不显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55246034/