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

Добавляем и настраиваем элемент управления 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", и оно остается на экране до того, как ответ будет получен с сервера.