ASP.NET UpdateProgress doesn't show up

Question

This is just a test page so I can see what the work indicator looks like, but the damn UpdateProgress isn't showing up at all...

The test just builds a list of objects and populates the listbox while the listbox has less than 100 items in it.

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

And the code-behind:

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);
}

With the 10 second sleep I'd have expected this to trigger the UpdateProgress to show but nothing at all happens.

There aren't even errors in the console for me to work from.

Here's the CSS for the modal if there's any thought that this is causing problems displaying the 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);
    }
}

And here's a fiddle to demonstrate more or less what I'm expecting: https://jsfiddle.net/aemk31vL/

can you please tell me if you have you found a solution yet? — kblau, Mar 22 '19 at 22:39
@kblau turns out the `#modal` rule in bootstrap's CSS was causing the problem. Changed my modal here to something else and it works. — Ortund, Mar 24 '19 at 14:16

kblau · Answer 1 · 2019-03-19T19:26:04.183

Just replace your UpdateProgress with this. Credit goes to 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>

score 0 · Answer 2 · answered Mar 19 '19 at 19:16

You have a CSS problem, let's fix that.

First: Let's render asp:UpdateProgress in a way that will work with your CSS animation, by using the visibility CSS attribute instead of display, we do this by setting the DynamicLayout property of the control to false.

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

Second: Let's tweak your CSS a bit so your modal can trigger the CSS animations based on the aria-hidden attribute of its container (the redered asp:UpdateProgress):

Change this:

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

To this (assuming that UpdateProgress is the ID of your asp:UpdateProgress):

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

That should do it.

I must agree that this is a little bit hacky, we are depending on the aria-hidden attribute being dynamically set by WebForms on the UpdateProgress container, but I don't expect this behavior to change.

ASP.NET UpdateProgress doesn't show up

2 Answers2