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, но ничего не происходит.

В консоли даже нет ошибок, с которых я мог бы работать.

Вот CSS для модального режима, если есть мысли, что это вызывает проблемы с отображением ProgressTemplate:

#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, давайте исправим это.

Во-первых: давайте отрендерим asp:UpdateProgress так, чтобы он работал с вашей CSS-анимацией, используя атрибут visibility CSS вместо displayмы делаем это, устанавливая свойство DynamicLayout элемента управления на false.

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

Второе: давайте немного подправим ваш CSS, чтобы ваш модал мог запускать CSS-анимацию на основе aria-hiddenатрибут его контейнера (переопределяемый asp:UpdateProgress):

Измените это:

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

На это (при условии, что UpdateProgress является идентификатором вашего asp:UpdateProgress):

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

Это должно сработать.

Я должен согласиться с тем, что это немного странно, мы зависим от атрибута aria-hidden, который динамически устанавливается WebForms в контейнере UpdateProgress, но я неЯ не ожидаю, что это поведение изменится.

Answer 2

Просто замените ваш UpdateProgress этим. Кредит идет на Как я могу использовать элемент управления UpdateProgress для отображения времени ожидания

<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>