加载页面加载窗口asp:UpdateProgress

Question

我有一个非常大的页面，需要一些时间来提取数据和加载。当第一次导航到.aspx页面时，我希望它能出现一个漂亮的加载.png图像，这样人们就不会在窗口显示之前关闭它。我试过放一个asp:UpdateProgress，但直到页面加载并在页面上做了一些事情之后，它才会出现。如何在加载页面的其余部分之前先获取加载屏幕？以下是我尝试过的，但没有成功。

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

我也试过用计时器。在这里它变得有趣。ContentTemplate中的标签在勾选时显示良好。我放置在内容模板中的GridView没有。

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

我甚至尝试过完全去掉更新面板，只更改计时器上的网格视图可见状态，但这仍然不起作用。网格视图从未出现。

有趣的是，如果我在页面上放一个按钮，执行以下操作，

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

我可以点击它，隐藏和显示网格视图，只要我想多次，没有问题。为什么计时器有什么不同？

Answer 1

在.aspx代码中，我设置了一个计时器TimerRefresh，但将其关闭。然后，当页面开始加载时，如果这不是PostBack(第一次)，我将打开TimerRefresh。它立刻滴答作响。这将导致页面重新加载，该页面将是PostBack。这将导致显示UpdateProgress1。PageLoad()不会做任何事情，因为这是一个PostBack。TimerRefresh_Tick(object sender, Eventargs e)会触发，因为这是由计时器计时触发的。这会导致它关闭计时器，使其不再运行，并加载包含数据的页面。一旦它完成，UpdateProgress1就会消失。

在Page_Load()中

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

在TimerRefresh_Tick(object sender, EventArgs e)中

TimerRefresh.Enabled = false;
codeToLoadDate();

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