在页面呈现时显示Ajax Loader

Question

这可能是一个简单的问题，但是如何在构建页面时最好地使用ASP.NET中的AJAX加载器来提供加载对话框？

我目前有一个UpdatePanel，它带有一个关联的UpdateProgressPanel，它包含ProgressTemplate中的加载消息和gif。

目前我有一个onLoad（）的页面，然后获取业务实体，然后显示它们。虽然它这样做我想显示一个AJAX加载器。

在页面加载中没有任何内容并且在onLoadComplete或unLoad（）上触发隐藏按钮会更好吗，然后等待按钮单击方法完成显示UpdateProgressPanel？

Answer 1

您可以在.Net之外的HTML中执行此操作。在ASPX页面中，您有以下代码：

<div id="loading">

<!-- Animated GIF or other indication that stuff is happening -->

</div>

在页面的最底部，就在您可以拥有如下所示的代码段之前：

<script language="javascript">

  document.getElementById("loading").style.display = "none";

</script>

图形---只要它位于页面顶部---将首先渲染。然后你的所有onLoad东西都会发生，最后内联JavaScript会发生在最后，因为它位于页面的底部。

很多时候我会在卸载状态下禁用按钮，并在底层JavaScript中启用它们。这可以防止用户在页面准备好之前获得点击快乐并触发事件。

Answer 2

我用Timer控件完成了类似的操作。您的OnLoad只是打开计时器，页面完成渲染。然后计时器（具有一些最小间隔值）执行脏工作，正确显示进度面板。请记住关闭计时器作为该过程的最后一步。

Answer 3

如果您真的想要精细控制，可以使用基于进度条的AJAX预加载器。您可以对其进行配置，以便在每次状态更改时完成。即从0到4（5个就绪状态），每个状态进展20％。创建一个非常简单。拥有一个容器div，其容纳另一个div，其width从0到100％变化，每个州的步数为20％。向内部div添加背景颜色（例如：蓝色），使其看起来像是在进行中。 GMail我认为它的Pre-loader使用了类似的方法。

Answer 4

帖子已过时，但您可以查看http://ajax.net-tutorials.com/controls/updateprogress-control/