Artykuł
03/02/2012

ASP.NET AJAX - Informacja o aktualizacji - UpdateProgress

Autor: Piotr Bubacz

Opublikowano: 2012-02-29

Już wiesz, jak możesz niezależnie aktualizować wybrany fragment strony internetowej. Jednak, użytkownik nie jest o tym fakcie informowany. Jeśli aktualizacja trwa, szczególnie, jeśli może długo trwać, to warto poinformować o tym użytkownika i dać mu możliwość anulowania aktualizacji.

Przed wykonaniem zadań powinieneś wiedzieć:

jak tworzyć strony internetowe w ASP.NET,
jak aktualizować wybrany fragment strony internetowej za pomocą kontrolki UpdatePanel.

Po wykonaniu zadań nauczysz się:

wyświetlać komunikat o toku aktualizacji,
jak umożliwić użytkownikowi anulowanie aktualizacji.

Implementacja

Twoim zadaniem jest wykonanie strony internetowej, na której użytkownik będzie mógł zobaczyć informacje o aktualizacji oraz będzie mógł ją przerwać.

Rys. 1. Strona z możliwością przerwania aktualizacji.

Przygotowanie strony

Pierwszym krokiem będzie utworzenie nowej strony internetowej.

Utwórz stronę, na której będzie możliwe przerwanie aktualizacji czasu:

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.

Dodaj kontrolki ASP.NET AJAX:

dodaj do strony kontrolki ScriptManager i UpdatePanel, przeciągając je myszą z okna Toolbox (kategoria AJAX Extensions).

Dodaj kontrolkę umożliwiającą wyświetlenie aktualnego czasu po wciśnięciu przycisku:

W kontrolce UpdatePanel umieść kontrolkę Label 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.

Dodaj kod umożliwiający wyświetlenie aktualnego czasu:

kliknij dwukrotnie kontrolkę Button. W metodzie obsługi zdarzenia Click, dodaj przycisk:

System.Threading.Thread.Sleep(3000);
//powyższa linijka służy jednie celom TESTOWYM!!
lbl1.Text = DateTime.Now.ToLongTimeString();

Sprawdź działanie aplikacji:

zapisz zmiany i uruchom formularz, a następnie kliknij przycisk,
wciśnij przycisk Aktualizuj.

Informacja o aktualizacji

Kolejnym krokiem będzie rozbudowa aplikacji o możliwość wyświetlenia komunikatu o aktualizacji.

Dodaj kontrolkę UpdatePanel:

poza kontrolką UpdatePanel dodaj kontrolkę UpdateProgress. W kontrolce UpdateProgress dodaj tekst Przetwarzanie….

Sprawdź działanie aplikacji:

zapisz zmiany i uruchom formularz, a następnie kliknij przycisk,
wciśnij przycisk Aktualizuj.

Informacja

KontrolkaUpdateProgress udostępnia informacje o statusie aktualizacji kontrolki UpdatePanel. Kontrolka wyświetla zawartość określoną przez właściwość ProgressTemplate. W momencie aktualizacji kontrolki UpdatePanel pojawia się zawartość zdefiniowana w kontrolce UpdateProgress.

Możemy sterować czasem, po którym pojawi się wyświetlana, za pomocą właściwości DisplayAfter, zawartość kontrolki UpdateProgress. Właściwość ta określa czas w milisekundach, po którym zostanie wyświetlona zawartość kontrolki UpdatePanel.

Przerwanie aktualizacji

Na końcu, w kontrolce UpdatePanel dodamy przycisk umożliwiający przerwanie aktualizacji.

Dodaj przycisk umożliwiający przerwanie aktualizacji:

do kontrolki UpdateProgress, w trybie Source, dodaj:

<br /><input type="button" id="abortButton" onclick="abortPB()" value="Anuluj aktualizację" />

Dodaj kod JavaScript umożliwiający przerwanie aktualizacji:

dodaj następujący skrypt w języku JavaScript wewnątrz znacznika<head></head>:

<script type="text/javascript" >
function abortPB() {
    var obj = Sys.WebForms.PageRequestManager.getInstance();
    if (obj.get_isInAsyncPostBack()) 
        { obj.abortPostBack(); }
    }
</script>

Sprawdź działanie aplikacji:

zapisz zmiany i uruchom formularz, a następnie kliknij przycisk,
wciśnij przycisk Aktualizuj,
podczas aktualizacji naciśnij przycisk Anuluj aktualizację.

Informacja

W przypadku kilku kontrolek UpdatePanel na stronie, kontrolka UpdateProgress wyświetla się standardowo podczas aktualizacji każdej z nich. Jeśli potrzebujemy ograniczyć wyświetlanie do jednej kontrolki UpdatePanel, możemy to zrobić przy pomocy właściwości AssociatedUpdatePanelID.

Podsumowanie

W tym artykule nauczyliśmy się korzystać z kontrolki UpdateProgress. Wiemy, jak wyświetlić użytkownikowi komunikat o trwającej aktualizacji. Dowiedzieliśmy się również, jak umożliwić użytkownikowi przerwanie aktualizacji w dowolnym jej momencie.

W kolejnym artykule nauczymy się cyklicznie odświeżać wybrany fragment strony.

Zadanie

W celu sprawdzenia swoich umiejętności, spróbuj wykonać stronę, na której zamiast wyświetlanego tekstu o aktualizacji pojawi się animowany gif.

Rys. 2. Wynik zadania.

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

wykorzystaj to, co zostało zrobione w zadaniu,
znajdź animowanego gifa (np. na stronie http://www.ajaxload.info),
dodaj go w odpowiednim miejscu.

znajdź animowanego gifa (np. na stronie http://www.ajaxload.info),
zamień wyświetlany tekst w kontrolce UpdateProgress na odnaleziony obrazek,
zapisz wszystkie pliki i uruchom ponownie aplikację.