ASP.NET AJAX: Клиентский объект PageRequestManager - "Просмотр" событий, вызванный во время жизненного цикла частичного постбэка

"Просмотр" событий, вызванный во время жизненного цикла частичного постбэка

Чтобы лучше понять стадии жизненного цикла частичного постбэка, я создал демо-код, включающий в себя элементы Button и UpdatePanel. Когда нажата кнопка Button, запускается частичный постбэк. Я также добавил скрипт клиентской стороны, который выводит сообщение при вызове каждого из этих событий. Вот сокращенная версия декларативной разметки страницы:

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

<asp:UpdatePanel  ID="UpdatePanel1"  runat="server">
   <ContentTemplate>
      <asp:Button  ID="PartialPostbackButton" runat="server" Text="Perform a Partial Postback"  />
   </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress  ID="UpdateProgress1" runat="server"  AssociatedUpdatePanelID="UpdatePanel1">
   <ProgressTemplate>
      <span  style="color:Red;font-size:larger;">PERFORMING POSTBACK... THIS WILL TAKE  FIVE  SECONDS....</span>
   </ProgressTemplate>
</asp:UpdateProgress>

<div  id="logOutput"></div>  

В разметке существуют четыре ключевых элемента:

• Элемент управления ScriptManager. Как уже  говорилось в предыдущих статьях данной серии, ScriptManager является "двигателем", который так необходим любой странице, использующей AJAX.
• Элемент управления UpdatePanel. Данный элемент включает в себя одиночный элемент управления Button (PartialPostbackButton), который при нажатии выполняет частичный постбэк. Я также создал серверный обработчик события для данного элемента Button, который выполняет код Thread.Sleep(5000), тем самым замедляя процесс на 5 секунд. Это  позволяет  искусственно  задержать обработку страницы  для того, чтобы лучше показать, какие события вызывает объект PageRequestManager до и после запроса на сервер .
• Элемент управления UpdateProgress. Выводит сообщение во время 5-секундной задержки на сервере.
• Элемент <div> с id logOutput. Мы добавим JavaScript код, который ведет запись всех сообщений на этот элемент во время выполнения различных обработчиков события PageRequestManager.

В дополнение к данной разметке страница включает в себя следующий код JavaScript. (Примечание: если вы добавляете JavaScript, который использует ASP.NET AJAX Framework, вы можете его добавить либо напрямую в ASP.NET страницу либо добавить в качестве внешнего скриптового файла. Данный код обладает кодом JavaScript, который был внедрен напрямую в страницу. Необходимо отметить, что при добавлении скрипта прямо в страницу, он должен быть размещен после элемента управления ScriptManager.)

<script type="text/javascript">
   // Создайте  обработчики события для PageRequestManager
   var prm =  Sys.WebForms.PageRequestManager.getInstance();

   prm.add_initializeRequest(PageRequestManager_initializeRequest);
   prm.add_beginRequest(PageRequestManager_beginRequest);
   prm.add_pageLoading(PageRequestManager_pageLoading);
   prm.add_pageLoaded(PageRequestManager_pageLoaded);
   prm.add_endRequest(PageRequestManager_endRequest);

   function  PageRequestManager_initializeRequest(sender, args)  {
      logEvent("initializeRequest");
   }

   function  PageRequestManager_beginRequest(sender, args)  {
      logEvent("beginRequest");
   }

   function  PageRequestManager_pageLoading(sender, args)  {
      logEvent("pageLoading");
   }

   function  PageRequestManager_pageLoaded(sender, args)  {
      logEvent("pageLoaded");
   }

   function  PageRequestManager_endRequest(sender, args)  {
      logEvent("endRequest");
   }

   var count =  1;
   function logEvent(msg) {
      var logOutput =  document.getElementById('logOutput');
      var rightNow = new  Date();
      logOutput.innerHTML += '(' + count + ') ' + msg + ' (' +  rightNow.toTimeString() + ')<br  />';
      count++;
   }
</script>

Первая строка кода получает копию объекта PageRequestManager. Далее, пять событий объекта PageRequestManager связываются с пятью обработчиками событий. Каждый из этих пяти обработчиков событий вызывает функцию logEvent, посылая сообщение для вывода. Функция logEvent обновляет внутренний код HTML в logOutput <div>, путем добавления сообщения и текущего времени.

Три скриншота, показанных ниже, демонстрируют данный код в действии. Первый скриншот показывает страницу сразу  же после того, как она была загружена. Заметьте, что log output уже срдержит одно значение для события pageLoaded. Как уже было отмечено ранее, событие pageLoaded объекта PageRequestManager вызывается тогда, когда содержимое страницы было обновлено либо при полном постбэке (в  тех случаях, когда страницу посещают в первый раз, либо    когда элемент управления, находящийся за пределами UpdatePanel, вызывает постбэк), либо при частичном постбэке.

Второй скриншот показывает страницу после того, как была нажата кнопка "Perform a Partial Postback" , но до того, как сервер пришлет ответ. Заметьте, что элемент UpdateProgress выводит свое сообщение (красный текст). Также были вызваны два новых клиентских обработчика событий: initializeRequest и beginRequest.

Когда ответ возвращен с веб-сервера, вызываются оставшиеся события объекта PageRequestManager: pageLoading, pageLoaded, и endRequest. В данный момент вы можете увидеть, что ответ был возвращени с сервера: элемент управления UpdateProgress больше не отображается и события pageLoading, pageLoaded, и endRequest указаны в журнале событий. Заметьте, что событие pageLoading было вызвано через 5 секунд после вызова beginRequest. Это происходит потому, что код серверной стороны, который срабатывает во время нажатия кнопки "Perform a Partial Postback", останавливается на 5 секунд.