7

I'm trying to display an update progress loading image whenever my update panel does it's Ajax thing. I've looked around at tutorials and it seems really straightforward but I'm having no luck. Here is pretty much what I have...

<div id="panelWrapper">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:UpdateProgress ID="TaskUpdateProgress" runat="server" DynamicLayout="False" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
            <ProgressTemplate>
                <asp:Image ImageUrl="~/Images/ajax-loader.gif" Width="16px" Height="16px" runat="server" ID="TaskLoadingImage"/>
            </ProgressTemplate>
        </asp:UpdateProgress>

        <div id="UrlDiv" class="URLNotification">
            <asp:Label ID="UrlLabel" runat="server" Text="URL:" AssociatedControlID="Url" />
            <asp:HyperLink ID="Url" runat="server" Text="Click &quotGenerate" to create the URL." />
        </div>

        <br />

        <asp:CheckBoxList runat="server" ID="IncludeItems" TextAlign="Right">
            <asp:ListItem Selected="True">Include 1</asp:ListItem>
            <asp:ListItem Selected="True">Include 2</asp:ListItem>
        </asp:CheckBoxList>

        <br />

        <div id="buttons" style="display:inline;">
            <asp:Button ID="Generate" runat="server" OnClicked="Generate_Clicked" Text="Generate" />
            <asp:Button ID="Add" runat="server" OnClientClick="add();" Text="Add"/>  
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

I also have some absolute positioning styling in a stylesheet. I've tried a bunch of variations of what you see here and have not found much good information as to what may be the issue. Any ideas? If you need anything else, let me know.

EDIT: The only new information I've found is that...

"In the following scenarios, the UpdateProgress control will not display automatically:

The UpdateProgress control is associated with a specific update panel, but the asynchronous postback results from a control that is not inside that update panel.

The UpdateProgress control is not associated with any UpdatePanel control, and the asynchronous postback does not result from a control that is not inside an UpdatePanel and is not a trigger. For example, the update is performed in code."

I'm pretty confident neither of these fit into my case. All that is happening is the button (which is inside the update panel) is clicked calling some code behind which set's the URL text to be reloaded for the update panel.

Carter
  • 2,850
  • 9
  • 44
  • 57
  • 1
    Note that the UpdateProgress control has a DisplayAfter parameter that specifies a time in milliseconds that must pass before its content is shown. By default it's 500 milliseconds so if your Ajax operation is quicker than that (and many are) then you will see no progress indicator. To test this you can introduce a delay into your server-side processing using Threading.Thread.Sleep(1000) which will delay for 1 second.Then you should see the update progress content. See https://blogs.msdn.microsoft.com/kashif/2006/11/08/updateprogress-control-in-asp-net-ajax/ – unintentionally left blank Apr 19 '16 at 14:49

7 Answers7

6

I have also the same problem with the UpdateProgressPanel. I found out that when you have placed an UpdateProgressPanel and associated it to an UpdatePanel, any postback from that UpdatePanel will cause the UpdateProgressPanel to show.

Another trick to do is to remove the AssociatedUpdatePanel parameter if you have a single UpdatePanel on the page, this will cause the UpdateProgressPanel to show every Async PostBack that happens.

UpdateProgressPanel can be placed anywhere in the code, except those areas that have predefined tags on it. It can be placed inside or outside the UpdatePanel and it will show if you have properly placed its CSS, Associated it to an UpdatePanel or just place it there and it will show up if an async postback result happens.

Roy Marco Aruta
  • 705
  • 5
  • 11
  • 21
  • If your UpdateProgressPanel is INSIDE the UpdatePanel, then do not specifiy the AssociatedUpdatePanel. That makes it work usually. – Shiroy Aug 29 '19 at 04:36
4

Make sure the UpdateProgress 'DisplayAfter' is set up to 1000 (1 sec)

Esperento57
  • 16,521
  • 3
  • 39
  • 45
ana
  • 41
  • 1
4

Don't put the update progress control inside the update panel control

Element
  • 3,981
  • 7
  • 42
  • 51
  • 1
    Thanks for the fast response, but I've been down that path already and I just tried again to double check. Still not luck. Also the asp.net examples page for UpdateProgress says that "You can put UpdateProgress controls inside or outside UpdatePanel controls." – Carter Feb 06 '09 at 18:41
  • hmm, have you tried taking out the image control and just putting in some static text to ensure your image path is correct ? – Element Feb 06 '09 at 19:06
2

I was having really hard time after converting my project from VS2008 to VS2010. The UpdateProgress stopped working suddenly, which was fine in VS2008. Spending a whole afternoon to search the answer and experimenting this and that, finally I found what went wrong from Scott Gu's posting.

It was an automatically generated web.config entry 'xhtmlConformance mode="Legacy"'.

After disabling this, it started to work again. May be not the case for you but just for guys struggling with the same problem.

Happy coding

RiverWay
  • 41
  • 1
2

I guess I figured out what was going on. The issue wasn't with anything I was doing wrong with the UpdateProgress or Panel. It was that I had other stuff loading in the background that was apparently holding up the UpdatePanel's Ajaxyness.

So basically what happened was that the loading icon wouldn't show up on the initial page load. I realized this because I actually waited till after everything on the page was completely loaded to fire off the button. Sure enough the loader showed up.

I assumed that the update panel refresh would at least be requested the instant the click event was heard so the loader icon would immediately show during the time other stuff is loading. This doesn't appear to be the case though...

Carter
  • 2,850
  • 9
  • 44
  • 57
1

I also had a problem with the UpdateProgress not showing. Turned out the postback to the server was actually so fast it never had time to show. Adding a Thread.Sleep(10000) helped show the problem.

rlv-dan
  • 976
  • 1
  • 10
  • 21
-1

Create a new ASP.NET Ajax-Enabled Web Site and then paste these code in ascs and aspx file. Run it and you can see the update progress. You can use animated gif files too to show the progress...

ascx Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>UpdateProgress control</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdateProgress runat="server" id="PageUpdateProgress" AssociatedUpdatePanelID="Panel">
            <ProgressTemplate>
                Loading...
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel runat="server" id="Panel">
            <ContentTemplate>
                <asp:Button runat="server" ID="UpdateButton" OnClick="UpdateButton_Click" Text="Update" />
            </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="UpdateButton" EventName="Click"  />
                </Triggers>            
        </asp:UpdatePanel>
    </form>
</body>
</html>

aspx Page:

 protected void UpdateButton_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
    }
ag93
  • 343
  • 4
  • 17
Sanjay Goswami
  • 11