• Artykuł

          

ASP.NET AJAX - Cykliczne odświeżanie - Timer  Udostępnij na: Facebook

Autor: Piotr Bubacz

Opublikowano: 2012-03-01

Wiemy już, jak niezależnie aktualizować wybrany fragment strony internetowej oraz jak wyświetlić informacje o aktualizacji. Teraz nauczymy się, jak wymusić cykliczne odświeżanie strony lub wybranego jej fragmentu.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • automatycznie, cyklicznie aktualizować informacje na stronie.

Implementacja

Twoim zadaniem jest wykonanie strony internetowej, która będzie umożliwiała cykliczne aktualizowanie całej strony lub wybranego jej fragmentu.

Rys. 1. Strona z automatyczną aktualizacją.

Przygotowanie strony

  1. Utwórz aplikację internetową:
  • otwórz Visual Studio, wybierz File ‑>** New** ‑>** Web Site -> Empty Web Site**,
  • kliknij OK,
  • w oknie Solution Explorer kliknij prawym przyciskiem myszy na Web Site -> Add New Item -> Web Form,
  • kliknij OK.
  1. Dodaj kontrolki ASP.NET AJAX:
  • do strony dodaj kontrolki ScriptManager i UpdatePanel, przeciągając je myszą z okna Toolbox (kategoria AJAX Extensions).
  1. Dodaj kontrolki umożliwiające wyświetlenie aktualnego czasu. Jedną umieść w UpdatePanel, a druga poza tą kontrolką:
  • w kontrolce UpdatePanel umieść kontrolkę Label i w oknie Properties:
    —   w polu ID wpisz lbl1,
    —   w polu Text usuń zawartość.
  • poza kontrolką UpdatePanel umieść kontrolkę Label i w oknie Properties:
    —   w polu ID wpisz lbl2,
    —   w polu Text usuń zawartość.
  • Do metody Page_Load dodaj następujący kod wyświetlający czas uruchomienia formularza w kontrolce lbl2:
lbl1.Text = DateTime.Now.ToLongTimeString();
lbl2.Text = DateTime.Now.ToLongTimeString();
  1. Sprawdź działanie aplikacji:
  • zapisz zmiany i uruchom formularz,
  • sprawdź, czy strona wygląda tak, jak na Rys. 1.

Cykliczna aktualizacja fragmentu strony

Do cyklicznej aktualizacji wybranego fragmentu strony możemy wykorzystać kontrolkę Timer.

  1. Do kontrolki UpdatePanel dodaj kontrolkę Timer:
  • do kontrolki UpdatePanel dodaj kontrolkę Timer:
    —   w polu ID wpisz tim1,
    —   w polu Interval wpisz 5000.
  1. Sprawdź działanie aplikacji:
  • zapisz zmiany i uruchom formularz. Poczekaj 5 sekund.

Cykliczna aktualizacja całej strony

Do cyklicznej aktualizacji strony możemy również wykorzystać kontrolkę Timer.

  1. Poza kontrolką UpdatePanel dodaj kontrolkę Timer:
  • poza kontrolką UpdatePanel dodaj kontrolkę Timer:
    —   w polu ID wpisz tim2,
    —   w polu Interval wpisz 10000.
  1. Sprawdź działanie aplikacji:
  • zapisz zmiany i uruchom formularz. Poczekaj 10 sekund.
Informacja

KontrolkaTimer odpowiada za wymuszenie komunikacji zwrotnej do serwera w określonych odstępach czasu. Możliwe jest aktualizowanie całej strony lub jej części, ujętej w kontrolce UpdatePanel.

Właściwość Interval określa czas w milisekundach, po którym nastąpi komunikacja zwrotna do serwera.

Podsumowanie

W tym artykule nauczyliśmy się cyklicznie aktualizować informacje zawarte na stronie internetowej.

W kolejnym artykule nauczymy się podstaw ASP.NET AJAX Control Toolkit.

 

Zadanie

W celu sprawdzenia swoich umiejętności, spróbuj rozszerzyć stronę o wyświetlenie informacji o aktualizacji w postaci animowanego obrazka oraz dodać możliwości anulowania aktualizacji (Rys. 2.).

Rys. 2. Wynik zadania.

  • wykorzystaj to, co zostało zrobione w zadaniu pierwszym,
  • znajdź animowanego gifa (np. na stronie http://www.ajaxload.info) i dodaj go w odpowiednim miejscu,
  • umieść przycisk i kod w JavaScript z poprzedniego zadania,
  • dodaj opóźnienie wyświetlania wyników.
System.Threading.Thread.Sleep(3000);
  • zapisz wszystkie pliki i uruchom ponownie aplikację.