Loading Window on Page Load asp:UpdateProgress

Question

I have a really large page that takes some time to pull the data and load. When first navigating to the .aspx page I would like it to have a nice loading .png image to come up so people don't close the window before it displays. I've tried putting an asp:UpdateProgress but this never shows up until after the page loads and I do something on the page. How do I get the loading screen first before the rest of the page loads? Below is what I tried that doesn't work.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="10">
        <ProgressTemplate>
            <div id="updatestatus" class="shadow">
            <asp:Label ID="Label12" runat="server" Text="Loading...">
            </asp:Label>
            <asp:Image ID="Image1"
            runat="server" ImageUrl="~/images/1status.png" />
            </div>
        </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <%-- My page loading stuff -->
        </ContentTemplate>
</asp:UpdatePanel>

I've also tried with a timer. Here it gets interesting. Labels inside the ContentTemplate show up fine on tick. The GridView I place inside Content Template does not.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/1status.png" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" Visible="false">
        <ContentTemplate>
            <!-- My page loading stuff -->
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:Timer ID="Timer1" runat="server" Interval="600" OnTick="Timer1_Tick"></asp:Timer>


protected void Timer1_Tick(object sender, EventArgs e)
{
 UpdatePanel1.Visible = true;
 Timer1.Enabled = false;
 Image1.Visible = false;
}

I've even tried taking out the updatepanel completely and just changing the gridview visible state on timer and that still doesn't work. The gridview never appears.

What's interesting is that if I put a button on the page that does the following,

protected void ButtonHide_Click(object sender, EventArgs e)
{
        if (GridView1.Visible)
        {
            GridView1.Visible = false;
        }
        else
        {
            GridView1.Visible = true;
        }

}

I can click it and hide and show the GridView as many times as I want with no problem. Why is the timer any different?

Answer 1

In the .aspx code I set up a timer, TimerRefresh but leave it turned off. Then when the page begins loading if this is not a PostBack (the first time) I turn on TimerRefresh. It immediately ticks. This causes a page reload which will be a PostBack. This causes UpdateProgress1 to show. PageLoad() will do nothing because this is a PostBack. TimerRefresh_Tick(object sender, Eventargs e) fires because this was triggered from the timer ticking. This causes it to turn off the timer from running again and loads the page with data. As soon as it is complete UpdateProgress1 goes away.

In Page_Load()

if (!IsPostBack)
{
 TimerRefresh.Enabled = true;
}

In TimerRefresh_Tick(object sender, EventArgs e)

TimerRefresh.Enabled = false;
codeToLoadDate();

The .aspx

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="10">
    <ProgressTemplate>
        <div id="updatestatus" class="shadow">
        <asp:Label ID="Label12" runat="server" Text="Loading...">
        </asp:Label>
        <asp:Image ID="Image1"
        runat="server" ImageUrl="~/images/1status.png" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Timer ID="TimerRefresh" runat="server" Interval="100" 
         ontick="TimerRefresh_Tick" Enabled="False">
    <%-- My page loading stuff - controls that would hold data -->
    </ContentTemplate>
</asp:UpdatePanel>