Отображение Ajax Loader при отображении страницы

Question

Вероятно, это простой вопрос, но как мне лучше всего использовать загрузчик AJAX в ASP.NET, чтобы обеспечить диалог загрузки во время создания страницы?

В настоящее время у меня есть UpdatePanel со связанным UpdateProgressPanel, который содержит загрузочное сообщение и gif в ProgressTemplate.

В настоящее время у меня есть страница, на которую onLoad () переходит и получает бизнес-объекты, а затем отображает их. Пока я делаю это, я бы хотел показать загрузчик AJAX.

Было бы лучше, чтобы при загрузке страницы ничего не было и имелась скрытая кнопка, которая вызывается onLoadComplete или unLoad (), которая затем будет ждать, пока метод нажатия кнопки завершит отображение UpdateProgressPanel?

Answer 1

Вы можете сделать это в HTML за пределами .Net. На вашей странице ASPX у вас есть код вроде:

<div id="loading"><br />
<!-- Animated GIF or other indication that stuff is happening --><br />
</div>

В самом низу вашей страницы, прямо перед вами, может быть фрагмент кода, который выглядит следующим образом:

<script language="javascript"><br >
  document.getElementById("loading").style.display = "none";<br />
</script>

Графика - пока она находится в верхней части страницы - будет отображаться первой. Тогда все ваши вещи onLoad произойдут, и, наконец, встроенный JavaScript будет последним, так как он находится внизу страницы.

Много раз я отключаю кнопки в их незагруженном состоянии и включаю их в этом нижнем JavaScript тоже. Это препятствует тому, чтобы пользователь был доволен кликом и вызывал события до того, как страница будет готова.

Answer 2

Запись старая, но вы можете посмотреть http://ajax.net -tutorials.com / controls / updateprogress-control /

Answer 3

Если вы действительно хотите мелкозернистое управление, вы можете использовать предварительный загрузчик AJAX на основе индикатора выполнения. Вы можете настроить его так, чтобы завершать каждый раз, когда состояние изменилось. то есть от 0 до 4 (5 состояний готовности), причем каждое состояние прогрессирует на 20%. Создать его чрезвычайно просто. Имейте контейнер div, который содержит еще div, чей width изменяется от 0 до 100% с шагом 20% для каждого состояния. Добавьте цвет фона к внутреннему div (пример: синий), чтобы он выглядел как прогрессирующий. GMail, я думаю, использует аналогичный подход для своего предварительного загрузчика.

Answer 4

Я сделал нечто похожее с таймером. Ваш OnLoad просто включает таймер, и страница завершает рендеринг. Затем таймер (с некоторым минимальным значением интервала) выполняет грязную работу, показывая панель прогресса правильно. Не забудьте отключить таймер как последний шаг процесса.