Using the UpdateProgress in .Net AJAX

When updating a part of page using ajax with UpdatePanels, you may want to show the user that the request is being done so he can wait until it is done and not send more asynchronous requests to the server.

Placing the UpdateProgress inside the UpdatePanel

If you want to make it clear and easy that the UpdateProgress belongs to an UpdatePanel you can place it inside the UpdatePanel ContentTemplate tag and that will do it. The UpdateProgress content will be shown when a request is made and hidden when finished.

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <asp:Button ID="btnAtUpdatePanel2" runat="server" Text="Change" onclick="btnAtUpdatePanel2_Click" />
            <asp:Label ID="lbAtUpdatePanel2" runat="server" Text="Initial Text"></asp:Label>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>Loading...</ProgressTemplate>
            </asp:UpdateProgress>
        </ContentTemplate>
    </asp:UpdatePanel>

Placing the UpdateProgress outside the UpdatePanel

If you need to place the UpdateProgress outside the UpdatePanel (for example to show the message in another part of the page) you can use its AssociatedUpdatePanelId property to link it with an UpdatePanel and make it work:

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Always">
        <ContentTemplate>
            <asp:Button ID="btnAtUpdatePanel2" runat="server" Text="Change" onclick="btnAtUpdatePanel2_Click" />
            <asp:Label ID="lbAtUpdatePanel2" runat="server" Text="Initial Text"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>

    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel2">
        <ProgressTemplate>Loading...</ProgressTemplate>
    </asp:UpdateProgress>

Using an UpdateProgress for all the UpdatePanels

If you don’t set the AssociatedUpdatePanelId property the UpdateProgress will trigger for all the UpdatePanels in the page, a good way to have a single UpdateProgress for all of them.

Using a block panel to prevent user from making more requests

I’m sure you have seen many times when doing an async request that a panel blocking you the UI box is shown, maybe saying something like “Loading…” but mainly preventing you from interacting with the UI and sending more requests.

Well, there are different ways of showing that depending on your needs but I’m going to show here an example of that so you can use it or get as an idea:

<asp:UpdateProgress ID="UpdateProgress" runat="server" DisplayAfter="0">
    <ProgressTemplate><div class="AjaxProgressPNL"><span>Loading...</span></div></ProgressTemplate>
</asp:UpdateProgress>

I’ve added a div inside the UpdateProgress with the class=”AjaxProgressPNL”, so I can have more than one. Since I will need to calculate the size of the div depending on its UpdatePanel parent and also position it above it we need to add an individual UpdateProgress for each UpdatePanel here (we could try not to but I don’t think it worths it). I will also add this css to it:

.AjaxProgressPNL{background:#000;text-align:center;width:100%;position:absolute;top:0;left:0;
                 display:table-cell;vertical-align:middle;opacity:0.4;padding:5px;
                 filter:alpha(opacity=40); /* For IE8 and earlier */
                 }

I’ve decided to make it half transparent and to use a black background this time. That done, we need to calculate its size dynamically using javascript (we need javascript to send the async req. after all), so let’s use something like this:

<script type="text/javascript">
    $(document).ready(function () {
        $("body").live("mouseover", function () { 
            var parentHeight = $(".AjaxProgressPNL").parents("div[id*='UpdatePanel']").height();
            $(".AjaxProgressPNL").height(parentHeight);
            $(".AjaxProgressPNL span").css("line-height", parentHeight + 'px');
        });
    });
</script>

I’ve used a little trick since when we work with jQuery styling and asynchronous requests the DOM objects repainted and lose their jQuery effects (these aren’t the same objects after all, they are new). When the async. request is done jQuery doesn’t reassign the binds or styles as that binding or styling happened when the page was ready, and now that document.ready() event will not be fired since this is an asynchronous request.

You can use the .on() (.live() in older versions) to bind events and make them continue working after an async. request, but for styling there doesn’t seem to be anything. Of course, if you work with jQuery’s ajax object and use it to make asynchronous requests you can use .ajaxComplete() or .ajaxSuccess(), but when combining .Net AJAX with jQuery that doesn’t make it.

Displaying the UpdateProgress with a delay or immediately

By using the DisplayAfter property, you can set how much time the UpdateProgress will take before showing itself. This way, you can avoid it to be shown in quick requests making them show as totally automatic, but since its default value is 500 (half second), you may also want to show it quicker to prevent more user postbacks.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
    <ProgressTemplate>Loading...</ProgressTemplate>
</asp:UpdateProgress>