Элемент управления Timer в ASP.NET AJAX Framework - Запуск и остановка элемента управления Timer

Written on . Posted in ASP.NET

ОГЛАВЛЕНИЕ

Страница 3 из 4
 

Запуск и остановка элемента управления Timer

По умолчанию, элемент управления Timer начинает отсчет с момента загрузки страницы, и продолжает вызывать постбэки каждые n миллисекунд. Если вам необходимо остановить отсчет в элементе Timer, у вас в распоряжении два пути:

  • Отключить Timer на серверной стороне, или
  • Остановить Timer на клиентской стороне.

Элемент управления Timer обладает свойством Enabled ,которое указывает на то, активен Timer или нет. Это свойство серверной стороны - если вы хотите поменять данное значение, то вам потребуется выполнить какой-либо постбэк (будь то полноценный постбэк, либо частичный). Используя опцию клиентской стороны, мы можем применить JavaScript для того, чтобы остановить (либо запустить) элемент Timer, что освобождает от постбэка. Тем не менее, опция клиентской стороны требует немного больше кода JavaScript, чем требуется на серверной части. Приложения данной статьи включают в себя демо-код как для серверной стороны (TimerPause.aspx), так и для клиентской (TimerPauseClient.aspx). Давайте разберем оба подхода.

Чтобы реализовать серверную функциональность, я дополнил пример, использующий элемент Timer, путем добавления элемента Button в UpdatePanel. Я также установил свойство Text данного элемента в значение "Pause" и создал обработчик события Click. В обработчике события я меняю значение свойства Enabled элемента управления Timer и обновляю свойство Text элемента Button, изменяя его с "Pause" на "Resume" при остановке таймера, либо с "Resume" обратно на "Pause" - при его запуске. Я также вызываю метод UpdateStockPrice при запуске таймера, тем самым восстановление элемента Timer мгновенно обновляет котировку акции (в отличие от случая, когда нам пришлось бы ждать пять секунд до того, как будет задействован элемент Timer). 

protected void  ToggleServerSide_Click(object sender, EventArgs e)
{
   if  (MyTimer.Enabled)
   {
      MyTimer.Enabled =  false;
      ToggleServerSide.Text =  "Resume";
   }
   else
   {
      MyTimer.Enabled =  true;
      ToggleServerSide.Text = "Pause";

      // Обновить  котировку акций
      UpdateStockPrice();
   }
}

Чтобы запустить или остановить элемент Timer с клиентской стороны, вам необходимо получить ссылку на элемент Timer и затем вызывать его соответствующую функцию - _startTimer или _stopTimer. Приложения в конце данной статьи  содержат в себе очень полезную JavaScript функцию, названную ToggleTimer, которая, как подразумевает ее название (переключатель таймера), переключает статус элемента Timer при помощи методов клиентской стороны. Данный метод требует два входных параметра: ссылку на кнопку (кнопка "Pause"/"Resume") и значение id элемента управления Timer. Оно получает ссылку на элемент управления Timer при помощи функции Client Library $get(id)из ASP.NET AJAX Framework и затем, в зависимости от того, активен таймер или нет, останавливает либо запускает его. Значение атрибута кнопки value, которое соответствует тексту, отображенному элементом Button, также обновляется. Вот сама функция JavaScript. 

var timerEnabled = true;
function  ToggleTimer(btn, timerID)
{
   // Переключить состояние активности  таймера
   timerEnabled = !timerEnabled;

   // Получаем ссылку на  Timer
   var timer = $find(timerID);

   if  (timerEnabled)
   {
      // Запускаем  таймер
      timer._startTimer();
      
      // Мгновенно выставляем  флаг
      timer._raiseTick();

      btn.value =  'Pause';
   }
   else
   {
      // Останавливаем  таймер
      timer._stopTimer();

      btn.value =  'Resume';
   }
} 

Данная функция находится в файле TimerLogic.js в папке ~/Scripts. Чтобы внедрить ее в конкретную веб-страницу ASP.NET, добавьте коллекцию Scripts из ScriptManager. Чтобы использовать функцию JavaScript, добавьте HTML для кнопки на UpdatePanel и в его клиентском обработчике события onclick вызовите функцию ToggleTimer, передавая ссылку на данную кнопку, а также значение id элемента Timer клиентской стороны. (Заметьте, что клиентская сторона доступна посредством свойства ClientID элемента Timer .) 

 <asp:ScriptManager ID="MyManager"  runat="server">
   <Scripts>
      <asp:ScriptReference  Path="~/Scripts/TimerLogic.js"  />
   </Scripts>
</asp:ScriptManager>

<asp:UpdatePanel  ID="MyUpdatePanel" runat="server"  UpdateMode="Conditional">
   <ContentTemplate>
      Current  stock price: ...

      <input type="button" id="btnToggleTimer"  value="Pause" onclick="ToggleTimer(this, '<%=MyTimer.ClientID%>');"  />

      ...
   </ContentTemplate>
</asp:UpdatePanel>

Следующее изображение демонстрирует страницу с действующей кнопкой Pause/Resume. Когда страницу посещают впервые элемент Timer активен; следовательно, на кнопке Button написано "Pause".


Нажатие на кнопку "Pause" вызывает остановку элемента Timer и заменяет текст кнопки на значение "Resume". Timer не начнет отсчет до тех пор, пока не будет нажата кнопка "Resume".


форум c# asp net