Визуальный фидбэк в ASP.NET AJAX с помощью элемента управления UpdateProgress

Microsoft ASP.NET AJAX Framework помогает разработчикам в создании более интерактивных веб-страниц путем ускорения механизма постбэка. В традиционных веб-страницах, полный постбэк подразумевает повторный запрос всей страницы, которая потом заново обрабатывается. Эта обработанная разметка возвращается во всей полноте, чтобы браузер отобразил ее. Технологии Ajax упрощают работу пользователя посредством использования частичных постбэков двумя путями: во-первых, частичный постбэк является асинхронным, тем самым подразумевая то, что пользователь может работать со страницей, одновременно ожидая завершения частичного постбэка; во-вторых, что более важно, меньше информации передается между клиентом и сервером, так как частичный постбэк обновляет только конкретную часть (область) страницы, что предоставляет более быстрое и гладкое взаимодействие. Одно из достоинств полного постбэка заключается в том, что он предоставляет несколько намеков на то, что постбэк выполняется. Во время инициации постбэка маленькая иконка Internet в правом верхнем углу браузера начинает вертеться и индикатор прогресса показывается в строке состояния, среди прочих знаков. При частичном постбэке пользователь не увидит никакой оповещающей информации. Следовательно, пользователь можеть начать выполнение частичного постбэка, но не осознавать это, если ответ задерживается. Это может привести к тому, что он повторно нажмет кнопку (или сделает то, что вызывало частичный постбэк), или же он просто может осудить ваш сайт, назвав его неработоспособным, закрыть свой браузер и никогда не возвратиться!

Хорошей новостью является то, что ASP.NET AJAX Framework включает в себя элемент управления UpdateProgress - веб-элемент, созданный специально для того, чтобы предоставлять визаульный фидбэк пользователю во время длительного частичного постбэка. Данная статья исследует использование UpdateProgress. Читайте далее, чтобы узнать больше об этом!

 

Предоставляем визуальный фидбэк во время частичного постбэка

Поскольку браузер по своей природе не предоставляет визуального фидбэка пользователю, когда происходит частичный постбэк, нашей обязаностью в данной ситуации является внедрение данной функциональности в веб-страницу. Вы можете увидеть такой фидбэк в действии, посетив какую-нибудь страницу, использующую Ajax. Например, GMail (почтовый онлайн сервис Google) отображает текст "LOADING" в правом верхнем углу страницы когда пользователь переходит на следующую страницу почтового ящика, фильтрует отображенные письма по ярлыку, либо инициирует частичный постбэк каким-либо другим способом. Другие сайты оповещают пользователя о том, что частичный постбэк в данный момент обрабатывается путем отображения анимированного GIF изображения, например,вращающегося индикатора.

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

1. Добавьте элемент управления UpdateProgress на веб-страницу
2. Установите его AssociatedUpdatePanelID свойство в значение ID той UpdatePanel на странице, для которой вы хотите отобразить визуальный фидбэк когда будет вызван частичный фидбэк. (Для получаения более подробной информации об использовании элемента управления UpdatePanel смотрите статью "Используем UpdatePanel" в данной серии.)
3. Определите разметку, которую вы хотите создать во время частичного постбэка в ProgressTemplate элемента UpdateProgress. (Если вы добавляет содержимое при помощи Designer, вы можете напрямую вписать тип текста в элемент UpdateProgress, так же, как и перетащить и бросить веб-элемент управления из инструментария Toolbox.)

Это все!

 

Добавляем и настраиваем элемент управления UpdateProgress

В конце данной статьи вы сможете найти файлы, которые включают в себя демо-код описанный здесь. Я предлагаю вам загрузить данный Visual Studio 2005 проект и следовать нашим примерам. Первый демо-код находится в SimplePartialPostback.aspx файле, который является простой веб-страницей, использующей Ajax. Как правило, страница имеет один элемент управления UpdatePanel. В пределах UpdatePanel вы сможете найти элементы Label (ярлык) и Button (кнопка). Аналогично за пределами UpdatePanel также находятся элементы Label и Button.

<asp:ScriptManager ID="ScriptManager1"  runat="server">
</asp:ScriptManager>

<asp:UpdatePanel  ID="UpdatePanel1" runat="server"  OnLoad="UpdatePanel1_Load">
   <ContentTemplate>
      <asp:Label  runat="server" id="PanelTime"></asp:Label>
      <br  />
      <asp:Button runat="server" ID="PanelButton" Text="Partial  Postback"  />
   </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress  ID="UpdateProgress1" runat="server"  AssociatedUpdatePanelID="UpdatePanel1">
   <ProgressTemplate>
      <span  style="font-weight:bold;  color:Red;">LOADING</span>
   </ProgressTemplate>
</asp:UpdateProgress>

<asp:Label  runat="server" id="PageTime"></asp:Label>
<br  />
<asp:Button runat="server" ID="FullPostbackButton" Text="Full  Postback" />  

Когда нажата та кнопка Button, которая находится в пределах UpdatePanel, вызывается частичный постбэк. Полный постбэк происходит тогда, когда нажата кнопка, находящаяся на странице. Страничный элемент Label (PageTime) обладает своим свойством Text, установленным в текущие значения даты и времени в обработчике события Page_Load; элемент Label в пределах UpdatePanel (PanelTime) установлен в текущие время и дату в обработчике события Load элемента UpdatePanel. Следовательно, оба элемента Label отображают текущую дату и время в момент, когда страница была впервые загружена, либо когда был произведен полный постбэк; тем не менее, PanelTime Label обновляется только тогда, когда происходит частичный постбэк.

Теперь представьте, что вам необходимо  визуально  отобразить для пользователя то, что в данный момент происходит частичный постбэк. Первым шагом будет добавление элемента управления UpdateProgress на страницу. Перетащите элемент UpdateProgress из инструментария Toolbox на страницу, под элемент UpdatePanel. Установите свойство AssociatedUpdatePanelID элемента UpdateProgress в значение ID, принадлежащее элементу UpdatePanel (UpdatePanel1). Далее, добавьте содержимое для того, чтобы отобразить его во время частичного постбэка. Вы можете ввести это напрямую, используя браузер. Если вы вводите разметку вручную, используя вид Source View, убедитесь, что вы вписали ее в пределах ProgressTemplate. Я решил использовать текст "LOADING", написанный жирным шрифтом и в красном цвете. Конечная декларативная разметка элемента UpdateProgress будет выглядеть следующим образом:

<asp:UpdateProgress  ID="UpdateProgress1"  runat="server"
               AssociatedUpdatePanelID="UpdatePanel1">
   <ProgressTemplate>
      <span  style="font-weight:bold;  color:Red;">LOADING</span>
   </ProgressTemplate>
</asp:UpdateProgress>   

Посетите страницу и нажмите кнопку "Partial Postback". Что произошло? Произошел частичный постбэк (о чем говорит обновленное время, выведенное в PanelTime), но сообщение LOADING не было отображено. Проблема заключается в том, что частичный постбэк произошел слишком быстро. Элемент UpdateProgress не выводится в случае, если нет определенной задержки между стартом частичного постбэка и моментом, когда возвращенный ответ был принят. По умолчанию, это составляет пол секунды, хотя свойство может быть сконфигурировано, используя свойство DisplayAfter элемента UpdateProgress.

Чтобы увидеть эффект UpdateProgress, нам необходимо создать  искусственную задержку при обработке частичного постбэка. Конечно, вряд ли мы захотим добавить искусственную задержку в реальном приложении, но эта задержка иногда небходима при тестировании, потому что бывает сложно воспроизвести задержку при локальной работе. Чтобы создать задержку при обработке частичного постбэка, создайте обработчик события Click для кнопки "Partial Postback" и добавьте следующий код:

protected void PanelButton_Click(object  sender, EventArgs e)
{
   // Add artificial delay time of five  seconds...
   System.Threading.Thread.Sleep(5000);
}

Это добавит задержку длительностью 5 секунд. Вы можете настроить параметр, переданный в метод Sleep, чтобы увеличить, либо уменьшить задержку.

Теперь, после внедрения данного кода, сообщение LOADING отображается при нажатии на кнопку "Partial Postback", и оно остается на экране до того, как ответ будет получен с сервера.

 

Более реальный пример использования элемента управления UpdateProgress

Файлы в приложении включают более интересный реальный демо-код, который использует технологию Ajax для отображения мастер/детального отчета. Страница состоит из двух элементов UpdatePanel: один перечисляет категории из базы данных Northwind, в то время как второй перечисляет товары, которые принадлежат категории, выбранной в первом списке. (Мы обсудили использование нескольких элементов UpdatePanel на странице в статье "Используем UpdatePanel".) На странице также присутствует элемент управления UpdateProgress , который использует анимированное GIF изображение в сообщении о загрузке.

Демо-код использует каскадные таблицы стилей для отображения сообщения о загрузке <div> , которое располагается по всей ширине страницы. Оно также использует CSS фильтр для отображения сообщения о загрузке на полупрозрачном фоне. Следующие скриншоты демонстрируют страницу в действии. Первый скриншот показывает страницу после того, как категория напитков была выбрана (Beverages category). Товары, соответствующие данной категории, были выведены в правой части. Второй скриншот демонстрирует страницу после того, как новая категория была выбрана.  Как только товары из этой категории возвращены , сообщение о загрузке "LOADING PRODUCTS FOR SELECTED CATEGORY" отображается наряду с анимированным GIF изображением. Чтобы опробовать данный код в действии (либо изменить), загрузите его по ссылке, указанной в конце данной статьи.

Взгляд в будущее...

Другой элемент управления ASP.NET AJAX Framework, который необходимо продемонстрировать, это элемент Timer. Он пригоден для выполнения задач клиентской стороны, рассчитаных по времени (таких как обновление части страницы каждые десять секунд). Мы исследуем данный элемент управления вследующей статье и далее перейдем к элементам из инструментария ASP.NET AJAX Control Toolkit. А пока...

Scott Mitchell

Исходный код примеров