ASP.NET Display "Loading..." message while update panel is updating

Question

Hello I am creating an ASP.NET/C# application I have an update panel that takes time to update. Is there a way to display a "Loading... Please Wait" Message during the time of the calculations?

Currently I am using AJAX panel animation fade in/fade out, to make the panel disappear while calculating and then reappear when done. But that is not very practical.

I need to display a message if possible.

Thank you for any help.

this is the code of my panel:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
    </Triggers>
    <ContentTemplate>
        //Contents goes here
    </ContentTemplate>
</asp:UpdatePanel>

And the Ajax Panel animation extender

<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="UpdatePanel1">
    <Animations>
        <OnUpdating>
            <FadeOut Duration="1" Fps="20" />
        </OnUpdating>
        <OnUpdated>
            <FadeIn Duration="2" Fps="20" />
        </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

score 71 · Accepted Answer · edited Oct 15 '13 at 18:03

You can use code as below when

using Image as Loading

<asp:UpdateProgress id="updateProgress" runat="server">
    <ProgressTemplate>
        <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
            <asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/images/ajax-loader.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:45%;left:50%;" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

using Text as Loading

<asp:UpdateProgress id="updateProgress" runat="server">
    <ProgressTemplate>
        <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
            <span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

In page (.aspx) or UserControl (.ascx). Secondly where you place this piece of code is very fundamental thing regarding asp.net — Harsh Baid, May 20 '14 at 17:48
Where to add this is a good question; especially when dealing with complex pages performing multiple ajax requests. This article provides insights to where in your page to place this code when dealing with nested updatepanels: https://msdn.microsoft.com/en-us/library/bb386421.aspx — ideonexus, Sep 03 '15 at 19:59
After messing around with rad ajaxloadingpanels this was so much easier, cheers — Andrew, Sep 26 '19 at 09:51

score 5 · Answer 2 · edited Jul 27 '12 at 15:48

5

Awesome tutorial: 3 Different Ways to Display Progress in an ASP.NET AJAX Application

edited Jul 27 '12 at 15:48

Jeremy

8,902
2
36
44

answered Jan 05 '12 at 09:04

Samidjo

2,315
30
37

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

You can use the UpdateProgress control:

Also see: ajax "loading" icon with UpdatePanel postbacks

edited May 23 '17 at 12:00

Community

1
1

answered Oct 09 '11 at 17:44

Rich

896
6
15

ASP.NET Display "Loading..." message while update panel is updating

3 Answers3

Linked