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

只需用此替换您的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>

Answer 2

您遇到CSS问题，请解决此问题。

首先：让我们以一种asp:UpdateProgress的样式来渲染CSS动画，通过使用visibility CSS属性而不是display，我们通过设置{{1 }}控件的DynamicLayout属性。

false

第二：让我们稍微调整一下CSS，以便您的模式可以根据其容器的<asp:UpdateProgress runat="server" ID="UpdateProgress" DisplayAfter="10" AssociatedUpdatePanelID="UpdatePanel" DynamicLayout="false"> ... </asp:UpdateProgress>属性（重新标记的aria-hidden）触发CSS动画：

更改此：

asp:UpdateProgress

对此（假设UpdateProgress是您的#modal:target { opacity: 1; top: 50%; visibility: visible }的ID）：

asp:UpdateProgress

应该这样做。

我必须同意这有点棘手，我们依赖于WebForms在UpdateProgress容器上动态设置的#UpdateProgress[aria-hidden=false] #modal { opacity: 1; top: 50%; visibility: visible }属性，但是我不希望这种行为会改变。

ASP.NET UpdateProgress不显示

2 个答案: