• Artykuł

          

ASP.NET AJAX - Aktualizacja fragmentu strony - UpdatePanel  Udostępnij na: Facebook

Autor: Piotr Bubacz

Opublikowano: 2012-02-28

Typowym zadaniem podczas tworzenia stron internetowych jest zoptymalizowanie przesyłania informacji pomiędzy serwerem a stroną. W naszej aplikacji musimy zapewnić użytkownikowi możliwość częściowej aktualizacji strony internetowej. W tym celu użyteczna jest kontrolka UpdatePanel umożliwiająca częściową aktualizację strony.

Przed wykonaniem zadań powinieneś wiedzieć:

  • jak tworzyć strony internetowe w ASP.NET.

Po wykonaniu zadań nauczysz się:

  • aktualizować wybrany fragment strony.

Implementacja

Twoim zadaniem jest wykonanie strony internetowej, na której użytkownik będzie miał możliwość aktualizacji czasu.

Rys. 1. Aktualizacja czasu po kliknięciu przycisku.

Aktualizacja fragmentu strony

Pierwszym krokiem będzie stworzenie nowej strony internetowej i dodanie kontrolek ScriptManager i UpdatePanel.

Informacja
KontrolkaScriptManager zarządza zasobami skryptowymi dla komponentów klienta, częściową aktualizacją strony, lokalizacją, globalizacją i skryptami własnymi użytkownika. Kontrolka ta musi zostać umieszczona przed innymi kontrolkami ASP.NET AJAX na stronie. Koordynuje ona i rejestruje skrypty odpowiedzialne za częściowe odświeżanie strony, odpowiada za konfigurowanie, czy też zwolnienie bądź debugowanie skryptów wysyłanych do przeglądarki oraz interakcję skryptów z metodami usług sieciowych.
  1. Utwórz aplikację internetową i dodaj do niej nową stronę:
  • 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 myszką z okna Toolbox (zakładka AJAX Extensions).
  1. Do kontrolki UpdatePanel dodaj kontrolki umożliwiające wyświetlenie aktualnej godziny:
  • w kontrolce UpdatePanel umieść kontrolkę Label (zakładka Standard)i w oknie Properties:
    —   w polu ID wpisz lbl1 ,
    —   w polu Text usuń zawartość.
  • do kontrolki UpdatePanel dodaj kontrolkę Button:
    — w polu Text wpisz Aktualizuj fragment.
  1. Poza kontrolką UpdatePanel dodaj kontrolki umożliwiające wyświetlenie aktualnej godziny:
  • Poza kontrolką UpdatePanel umieść dodatkową kontrolkę Label i w oknie Properties:
    —   w polu ID wpisz lbl2,
    —   w polu Text usuń zawartość.
  • Poza kontrolką UpdatePanel dodaj kontrolkę Button.
    —   w polu Text wpisz Aktualizuj stronę.
  1. W metodzie Page_Load dodaj kod umożliwiający wyświetlenie aktualnej godziny:
  • otwórz plik Default.aspx.cs (wciśnij przycisk F7) i do metody Page_Load dodaj następujący kod, wyświetlający aktualną datę w kontrolkach Label:
lbl1.Text = DateTime.Now.ToLongTimeString();
lbl2.Text = DateTime.Now.ToLongTimeString();
  1. Uruchom i przetestuj aplikację:
  • zapisz zmiany i uruchom formularz (wciśnij Ctrl+F5),
  • wciśnij przycisk Aktualizuj fragment,
  • wciśnij przycisk Aktualizuj stronę.
Informacja

KontrolkaUpdatePanel umożliwia aktualizację wybranej części strony przy użyciu asynchronicznych żądań. Jest kluczowym elementem AJAX w ASP.NET. Umożliwia wykorzystanie mechanizmu częściowego odświeżania strony, dzięki czemu możliwe jest ograniczenie czasu potrzebnego na ponowne ładowanie strony.

Do kontrolkiUpdatePanel możemy dodać dowolne kontrolki na stronie i aktualizować niezależnie ich zawartość. Na tronie możemy umieścić wiele kontrolek UpdatePanel.

Wyzwalanie aktualizacji poza kontrolką UpdatePanel

Może się zdarzyć, że będziemy potrzebowali aktualizować wybrany fragment strony za pomocą kontrolki położonej w innym, dowolnym miejscu na stronie.

  1. Umieść przycisk poza kontrolką UpdatePanel:
  • Do strony dodaj kontrolkę Button i w oknie Properties:
    — w polu ID wpisz but1, —   w polu Text wpisz Aktualizuj niezależnie.
  • Dwukrotnie kliknij dodaną kontrolkę. W metodzie obsługi zdarzenia Click, dodaj przycisk:
lbl1.Text = DateTime.Now.ToLongTimeString();
  1. Uruchom i przetestuj aplikację:
  • zapisz zmiany i uruchom formularz. Kliknij przycisk Aktualizuj niezależnie.
  1. Dodaj zewnętrzny wyzwalacz dla kontrolki UpdatePanel:
  • przejdź do widoku Design formularza. Wybierz kontrolkę UpdatePanel, a następnie w oknie Properties w polu Triggers wybierz (…),
  • w oknie UpdatePanelTriggerCollectionEditor naciśnij przycisk Add. Do listy zostanie dodany wyzwalacz i w obszarze  AsyncPostBack:Button1.Click properties (Rys. 2.):
    —   w polu ControlID wybierz z listy rozwijanej **but1,
    —  ** w polu EventName wybierz z listy rozwijanej Click.
  • Kliknij przycisk Ok.

Rys.  2. Okno UpdatePanelTrigger Collection Editor.

  1. Uruchom i przetestuj aplikację:
  • Zapisz zmiany i uruchom formularz. Kliknij przycisk Aktualizuj niezależnie.
Informacja

Kontrolka UpdatePanel jest kontenerem elementów podlegających pod system dynamicznego odświeżania strony. Najważniejsze właściwości kontrolki to:

  • ContentTemplate – jest kontenerem dla kontrolek, które mają być dynamicznie aktualizowane. Dodawanie kontrolek jest możliwe tylko do tej części.
  • Triggers  – zawiera listę wyzwalaczy – zdarzeń, które mogą wywołać aktualizację kontrolek znajdujących się w ContentTemplate. Dzielą się na dwie grupy:
    —  AsyncPostBackTrigger – możemy zdefiniować zewnętrzną kontrolkę względem UpdatePanel i jej zdarzenie, które spowodują jej aktualizację,
    —  PostBackTrigger – możemy zdefiniować wewnętrzną, względem UpdatePanel, kontrolkę i jej zdarzenie, które spowoduje aktualizację nie tylko panela, ale i całej strony.

Podsumowanie

W tym artykule nauczyliśmy się używać kontrolkę UpdatePanel, pozwalającą na częściową aktualizację strony. Dzięki temu, nie musimy przesyłać do serwera całej strony internetowej, co jest niepraktyczne i, w niektórych przypadkach, mogłoby zająć zbyt dużo czasu. Wiemy  także, że możemy zdefiniować zewnętrzną kontrolkę i zdarzenie do aktualizacji. Pamiętaj, aby zawsze używać kontrolkę ScriptManager przed innymi kontrolkami ASP.NET AJAX. 

W kolejnym artykule nauczymy się, jak poinformować użytkownika o aktualizacji oraz, jak umożliwić mu jej anulowanie.

Zadanie

W celu sprawdzenia swoich umiejętności, spróbuj wykonać stronę z dwoma kalendarzami. Z tym, że jeden z kalendarzy będzie korzystał z częściowej aktualizacji strony. Sprawdź, za pomocą przycisków > kontrolki Calendar, jak zmieniają się miesiące w jednym i drugim przypadku.

Rys.  3. Wynik zadania.

Aby zobaczyć podpowiedzi i rozwiązania zadań przełącz widok tej strony na >> klasyczny <<.

  • Wykorzystaj to, co zostało zrobione w zadaniu pierwszym.
  • Potrzebne będą dwie kontrolki z kategorii AJAX Extensions.
  • Jedna z kontrolek z kalendarzem powinna być umieszczona poza procesem asynchronicznej aktualizacji.
  • Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel.
  • W kontrolce UpdatePanel umieść kontrolkę Calendar z okna Toolbox,  kategoria Standard.
  • Poza kontrolką UpdatePanel umieść kolejną kontrolkę Calendar.
  • Zapisz i uruchom formularz. Za pomocą przycisków > kontrolki zmień miesiące w jednej i drugiej kontrolce.