ITA-103 Aplikacje Internetowe

Piotr Bubacz

Moduł 13

Wersja 1

ASP.NET AJAX

Spis treści

ASP.NET AJAX ...................................................................................................................................... 1

Informacje o module ........................................................................................................................... 2

Przygotowanie teoretyczne ................................................................................................................. 3

Przykładowy problem ................................................................................................................. 3

Podstawy teoretyczne ................................................................................................................. 3

Uwagi dla studenta ..................................................................................................................... 7

Dodatkowe źródła informacji ...................................................................................................... 7

Laboratorium podstawowe ................................................................................................................. 9

Problem 1 (czas realizacji 25 min) ............................................................................................... 9

Problem 2 (czas realizacji 10 min) ............................................................................................. 11

Problem 3 (czas realizacji 10 min) ............................................................................................. 12

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące tworzenia aplikacji
internetowych z wykorzystaniem AJAX. Zobaczysz, jak prosto i skutecznie
można wykorzystywad podstawowe kontrolki dostępne w ASP.NET AJAX.
Nauczysz się, jak kilkoma kliknięciami myszy rozszerzyd funkcjonalnośd
aplikacji o możliwośd asynchronicznej komunikacji z serwerem.

Cel modułu

Celem modułu jest przedstawienie AJAX oraz możliwości wykorzystania go
w aplikacjach ASP.NET przy użyciu biblioteki ASP.NET AJAX.

Uzyskane kompetencje

Po zrealizowaniu modułu będziesz:



potrafił tworzyd strony częściowo aktualizowane



potrafił rozbudowywad istniejącą aplikację o AJAX



rozumiał zalety stosowania technologii AJAX

Wymagania wstępne

Przed przystąpieniem do pracy z tym modułem powinieneś:



znad podstawy języka XHTML



znad zasady pracy w środowisku Visual Studio, w szczególności
tworzenia stron internetowych

Mapa zależności modułu

Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem
do realizacji tego modułu należy zapoznad się z materiałem zawartym
w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS” oraz
„Wprowadzenie do ASP.NET”.

MODUŁ 13

MODUŁ 14

MODUŁ 3

MODUŁ 6

MODUŁ 1

MODUŁ 5

MODUŁ 2

MODUŁ 4

MODUŁ 8

MODUŁ 9

MODUŁ 10

MODUŁ 11

MODUŁ 12

Rys. 1 Mapa zależności modułu

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-3

Przygotowanie teoretyczne

Przykładowy problem

Rozbudowane aplikacje internetowe wymagają długiego czasu na przesłanie informacji od klienta
do serwera. W czasie przesyłania klient może jedynie cierpliwie oczekiwad na dane z serwera.
Niestety większośd osób chciała by dane od razu lub też mied chociaż możliwośd przeglądania
strony w czasie pobierania danych. Dodatkowo dobrze by było, gdybyśmy mogli pobierad dane nie
całej strony na raz, ale tylko wybranych elementów.

Podstawy teoretyczne

Klasyczny model aplikacji internetowej
W poprzednich modułach wykorzystywano klasyczny model aplikacji internetowej. W modelu
takim niewielkie zmiany wykonane przez użytkownika na stronie mogą spowodowad wysłanie
danych do serwera i wygenerowanie dla klienta nowego dokumentu HTML, nawet jeśli nie różni się
on znacząco od poprzedniego (Rys. 2).

Rys. 2 Klasyczny model aplikacji internetowej

Przykładem takiej akcji w aplikacji tworzonej na zajęciach może byd wybranie kategorii z listy
rozwijanej. W takim przypadku zmienia się tylko niewielka częśd strony odpowiedzialna za
wyświetlenie tytułów, ale serwer i tam musi wygenerowad nowy dokument i wysład go do
użytkownika.

Problemy występujące w klasycznym model aplikacji internetowej:



Komunikacja zwrotna – po wykonaniu każdej akcji wymagającej przetwarzania po stronie
serwera, cała strona jest przeładowywana, nawet jeśli nowy dokument nie różni się znacząco
od poprzedniego.



Transfer danych poprzez sieć – dokument wygenerowany po stronie serwera w wyniku
komunikacji zwrotnej musi byd za każdym razem w całości wysłany do klienta.



Przetwarzanie na serwerze – generowanie całego dokumentu od nowa w przypadku
komunikacji zwrotnej powoduje niepotrzebne obciążenie zasobów serwera.

Co to jest AJAX?
AJAX jest to technika pozwalająca aplikacjom Web komunikowad się asynchronicznie z serwerem
(Rys. 3). AJAX nie jest technologią – jest podejściem łączącym wiele technologii. AJAX to akronim
powstały od słów Asynchronous JavaScript And XML.

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-4

Rys. 3 Model aplikacji internetowej z użyciem AJAX

AJAX:



Asynchronous – komunikacja odbywa się asynchronicznie.



JavaScript – JavaScript jest odpowiedzialny za wysyłanie informacji do serwera,
asynchroniczny odbiór odpowiedzi i przetworzenie jej.



XML – jest formatem odpowiedzi serwera, dodatkowo komunikacja odbywa się poprzez
obiekt XmlHttpRequest. Aktualnie XML wykorzystuje się rzadziej na rzecz mniej kosztownych
w przesyłaniu i przetwarzaniu formatów takich jak JSON (ang. JavaScript Object Notation).

Zalety i wady AJAX
AJAX posiada wiele zalet, w tym m.in.:



Strony nie są odświeżane po wykonaniu każdej akcji wymagającej przetwarzania po stronie
serwera.



Tylko potrzebne dane są wymieniane z serwerem.



Zwiększona szybkośd odpowiedzi serwera.

Należy jednocześnie zdawad sobie sprawę z pewnych wad tego rozwiązania, m.in.:



Wymaga JavaScript, który może byd wyłączony w przeglądarce użytkownika.



Aplikacjom AJAX trudno zapewnid zgodnośd z WCAG (ang. Web Content Availability
Guidelines, wytyczne dotyczące dostępności materiałów publikowanych w sieci Internet).



Jest trudny w oprogramowaniu:



należy odpowiedniego zainicjalizowad obiekt XmlHttpRequest



duże problemy może sprawiad obsługi przycisków nawigacyjnych w przeglądarce



mogą pojawid się problemy z zapamiętywaniem i odtwarzaniem konkretnego stanu
aplikacji

ASP.NET AJAX
ASP.NET AJAX jest zbiorem rozszerzeo, które umożliwiają wykorzystanie AJAX w aplikacjach
ASP.NET. Zalety ASP.NET AJAX to:



Odciążenie serwera na rzecz przetwarzania po stronie klienta.



Możliwośd wykorzystania elementów interfejsu użytkownika znanych z aplikacji Windows,
np. wskaźniki postępu.



Aktualizacja tylko tych części strony, które tego wymagają.

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-5



Dostęp po stronie klienta do usług aplikacji ASP.NET: autoryzacji formularzy i profili
użytkownika.



Integracja danych z różnych źródeł za pomocą odwołao do usług Web (niniejszy kurs nie
obejmuje zagadnieo związanych z usługami Web – więcej informacji na ten temat można
znaleźd m.in. pod adresem http://msdn.microsoft.com/webservices).



Wsparcie dla większości popularnych i używanych przeglądarek, m.in. Microsoft Internet
Explorer, Mozilla Firefox i Apple Safari.

Architektura ASP.NET AJAX
Technologia ASP.NET AJAX zawiera biblioteki skryptów klienckich oraz komponenty serwerowe
(Rys. 4). Dodatkowo można rozszerzyd jej możliwości o darmowy zestaw kontrolek ASP.NET AJAX
Control Toolkit.

ASP.NET AJAX

-enabled

ASP.NET Pages

Web Services

(ASMX or WCF)

HTML, Script,

ASP.NET AJAX

Markup

ASP.NET AJAX

Service

Proxies

ASP.NET 2.0

Application

Services

Page Framework,

Server Controls

ASP.NET AJAX Server Extensions

ASP.NET AJAX

Server

Controls

App Services

Bridge

Web Services

Bridge

Microsoft AJAX Library
(Client Script Library)

Controls, Components

Script Core

Base Class Library

Component Model and

UI Framework

Browser Compatibility

ASP.NET AJAX
Client App
Services

Local Store

Browser

Integration

Rys. 4 Architektura ASP.NET AJAX

Bibliotek skryptów po stronie klienta

Biblioteka skryptów po stronie klienta zawiera rozszerzenia JavaScript, które pozwalają na
programowanie zorientowane obiektowo. Taka możliwośd nie była wcześniej bezpośrednio
dostępna dla programistów JavaScript. Możliwości programowania zorientowanego obiektowo
dodane do biblioteki skryptów ASP.NET AJAX pozwalają na tworzenie bardziej spójnego i
modularnego kodu po stronie klienta.

Następujące warstwy zostały włączone do biblioteki:



Biblioteka klas podstawowych – udostępnia podstawowe komponenty i rozszerzoną obsługę
błędów.



Możliwości przeglądarki – zapewnia kompatybilnośd skryptów klienckich z większością
używanych przeglądarek.



Sieci – odpowiada za komunikację z aplikacjami i usługami Web i zarządza asynchronicznymi
wywoływaniami metod.



Usługi jądra – zawiera rozszerzenia JavaScript, takie jak klasy, przestrzenie nazw, obsługa
błędów, dziedziczenie, typy danych i serializacja obiektów.

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-6

Technologie po stronie serwera

Kontrolki serwerowe ASP.NET AJAX to:



ScriptManager



UpdatePanel



UpdateProgress



Timer

Usługi Web, z jakich możemy korzystad z poziomu ASP.NET AJAX:



uwierzytelnianie formularzy



profile

Kontrolki serwerowe ASP.NET AJAX
Kontrolki serwerowe ASP.NET AJAX łączą w sobie kod wykonywany zarówno po stronie serwera, jak
i klienta.

ScriptManager

Kontrolka ScriptManager zarządza zasobami skryptowymi dla komponentów klienta, częściową
aktualizacją strony, lokalizacją, globalizacją i skryptami własnymi użytkownika. Kontrolka ta musi
zostad 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.

UpdatePanel

Kontrolka UpdatePanel umożliwia aktualizację wybranej części strony przy użyciu
asynchronicznych żądao. 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.

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ą byd dynamicznie
aktualizowane. Dodawanie kontrolek jest możliwe tylko do tej części.



Triggers – zawiera listę wyzwalaczy – zdarzeo, które mogą wywoład aktualizację kontrolek
znajdujących się w ContentTemplate. Dzielą się na dwie grupy:



AsyncPostBackTrigger – możemy zdefiniowad zewnętrzną względem UpdatePanel
kontrolkę i jej zdarzenie, które spowodują jej aktualizację



PostBackTrigger – możemy zdefiniowad wewnętrzną względem UpdatePanel
kontrolkę i jej zdarzenie, które spowoduje aktualizację nie tylko panelu, ale i całej strony

Kontener kontrolek wskazujący aktualizowany region na stronie:

Kontrolki i zawartość nie aktualizowane ...
<asp:UpdatePanel id="u1" runat="server">
<ContentTemplate>
ta zawartość jest dynamicznie aktualizowana!
<asp:label id="Lablel1" runat="server"/>
<asp:button id="button1" text="Wciśnij mnie!" runat="server"/>
<ContentTemplate>
</asp:UpdatePanel>
Pozostała zawartość nie jest aktualizowana...

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-7

Kontrolka UpdatePanel automatycznie generuje wszystkie wymagane skrypty i wysyła je do
przeglądarki. Na stronie możemy umieścid wiele kontrolek UpdatePanel i każda z nich będzie
niezależnie aktualizowana.

UpdateProgress

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

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

W przypadku kilku kontrolek UpdatePanel na stronie standardowo kontrolka UpdateProgress
wyświetla się podczas aktualizacji każdej z nich. Jeśli potrzebujemy ograniczyd wyświetlanie do
jednej

kontrolki

UpdatePanel,

możemy

to

zrobid

przy

pomocy

właściwości

AssociatedUpdatePanelID.

Timer

Kontrolka Timer odpowiada za komunikację zwrotną do serwera w określonych odstępach czasu.
Możliwe jest wysyłanie całej strony lub jej części ujętej w kontrolce UpdatePanel. Właściwośd
Interval określa ilośd milisekund, po której nastąpi komunikacja zwrotna do serwera.

Podsumowanie
W tym rozdziale przedstawiona została technologia AJAX ASP.NET.

Uwagi dla studenta

Jesteś przygotowany do realizacji laboratorium jeśli:



rozumiesz jak działa UpdatePanel



znasz kontrolki dostępne w AJAX Extensions



wiesz co to jest i jakie ma zalety częściowa aktualizacja strony

Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że
rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów.

Dodatkowe źródła informacji

1. The Official Microsoft ASP.NET Site, http://www.asp.net/ajax

Na stronie znajdziesz wiele materiałów dotyczących technologii AJAX. Szczególnie
ciekawe są webcasty prezentujące wiele elementów technologii. Ważnym
miejscem wartym przejrzenia jest zakładka Showcase, prezentująca listę stron
wykorzystujących tę technologię.

2. Maciej Dadela, AJAX w ASP.NET, http://www.codeguru.pl/article-718.aspx

W artykule autor prezentuje przegląd najważniejszych informacji dotyczących
technologii ASP.NET AJAX. Zawarł opis kontrolek i ich właściwości, pozwalając
zapoznad się bliżej z tą technologią.

3. Matt Gibbs, Dan Wahlin, ASP.NET 2.0 AJAX. Zaawansowane programowanie, Helion, 2008

W książce autorzy pokazują, jak korzystad z różnych bibliotek, jak używad
zaawansowanych kontrolek z pakietu AJAX Toolkit, a także jak budowad własne

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-8

kontrolki. Nauczysz się asynchronicznie uaktualniad fragmenty stron i zarządzad
skryptami używanymi w przeglądarce, dowiesz się, jak testowad takie aplikacje i
usuwad z nich błędy. Z tą książką zdobędziesz wiedzę potrzebną do kreowania
nowoczesnych, interaktywnych aplikacji.

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-9

Laboratorium podstawowe

Problem 1 (czas realizacji 25 min)

Przed wykorzystaniem technologii ASP.NET AJAX Twój zespół postanowił wysład Cię na zwiady.
Twoim zadaniem jest zapoznanie się z możliwościami wykorzystania tej technologii w Waszych
projektach internetowych. Wynikiem Twoich prac mają byd testy wszystkich kontrolek dostepnych
w ASP.NET AJAX.

Zadanie

Tok postępowania

1. Utwórz nową
aplikację
internetową w
systemie plików



Otwórz Visual Studio wybierz File -> New -> Web Site.



W oknie dialogowym New Web Site określ następujące właściwości:

— szablon: ASP.NET Web Site
— lokalizacja: z listy rozwijanej wybierz File System, a następnie określ

położenie strony

— język: Visual C#

2. Dodaj
kontrolkę
UpdatePanel



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



W kontrolce UpdatePanel umieśd kontrolkę Label i w oknie Properties:

— w polu ID wpisz t1Label
— w polu Text usuo zawartośd



Do kontrolki UpdatePanel dodaj kontrolkę Button.



Poza kontrolką UpdatePanel umieśd dodatkową kontrolkę Label i w
oknie Properties:

— w polu ID wpisz t2Label
— w polu Text usuo zawartośd

3. Dodaj
procedurę obsługi
zdarzenia
Page_Load



Otwórz plik Default.aspx.cs i do metody Page_Load dodaj następujący
kod, wyświetlający aktualną datę w kontrolkach Label:

t1Label.Text = DateTime.Now.ToLongTimeString();
t2Label.Text = DateTime.Now.ToLongTimeString();

4. Zapisz i
sprawdź działanie
strony



Zapisz zmiany i uruchom formularz.



Wciśnij przycisk Button.

Która kontrolka jest aktualizowana? Dlaczego?

5. Zapoznaj się z
zaletami
częściowej
aktualizacji
strony.



Do aplikacji dodaj kolejną stronę ASPX.



Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel.



W kontrolce UpdatePanel umieśd kontrolkę Calendar z okna Toolbox
kategoria Standard.



Poza kontrolką UpdatePanel umieśd kolejną kontrolkę Calendar.



Zapisz i uruchom formularz. Za pomocą przycisków > kontrolki zmieo
miesiące w jednej i drugiej kontrolce.

Czy można zaobserwowad różnicę?

6. Zapoznanie z
możliwością
odświeżania
zawartości
kontrolki
UpdatePanel przy



Do aplikacji dodaj kolejną stronę ASPX.



Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel.



W kontrolce UpdatePanel umieśd kontrolkę Label i w oknie Properties:

— w polu ID wpisz t1Label
— w polu Text usuo zawartośd

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-10

użyciu
zewnętrznego
przycisku



Poza kontrolką UpdatePanel dodaj do formularza kontrolkę Button.



Dwukrotnie kliknij dodaną kontrolkę. W metodzie obsługi zdarzenia
Click przycisku dodaj:

t1Label.Text = DateTime.Now.ToLongTimeString();



Zapisz zmiany i uruchom formularz. Kliknij przycisk.

Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego?



Przejdź do widoku Design formularza. Wybierz kontrolkę UpdatePanel,
a następnie w oknie Properities w polu Triggers wybierz (…).



W oknie UpdatePanelTrigger Collection Editor naciśnij przycisk Add. Do
listy

zostanie

dodany

wyzwalacz

i

w

obszarze

AsyncPostBack:Button1.Click properities:

— w polu ControlID wpisz Button1
— w polu EventName wybierz z listy rozwijanej Click

Rys. 5 Okno UpdatePanelTrigger Collection Editor



Kliknij przycisk OK.



Zapisz zmiany i uruchom formularz. Kliknij przycisk.

Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego?

7. Zapoznanie z
możliwościami
wykorzystania
kontrolki
UpdateProgress.



Do aplikacji dodaj kolejną stronę ASPX.



Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel.



W kontrolce UpdatePanel umieśd kontrolkę Label i w oknie Properties:

— w polu ID wpisz t1Label
— w polu Text usuo zawartośd



Do kontrolki UpdatePanel dodaj kontrolkę Button.



Kliknij dwukrotnie dodaną kontrolkę. W metodzie obsługi zdarzenia
Click przycisku dodaj:

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



Poza kontrolką UpdatePanel dodaj kontrolkę UpdateProgress. W

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-11

kontrolce UpdateProgress dodaj tekst Przetwarzanie….



Zapisz zmiany i uruchom formularz, a następnie kliknij przycisk.

Czy dokonała się pełna czy częściowa aktualizacja strony? Co się działo
w czasie aktualizacji?

8. Zapoznanie z
możliwościami
kontrolki Timer.



Do aplikacji dodaj kolejną stronę ASPX.



Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel.



W kontrolce UpdatePanel umieśd kontrolkę Label i w oknie Properties:

— w polu ID wpisz t1Label
— w polu Text usuo zawartośd



Do kontrolki UpdatePanel dodaj kontrolkę Timer.

— w polu ID wpisz t1Timer
— w polu Interval wpisz 5000



Poza kontrolką UpdatePanel umieśd kontrolkę Label i w oknie
Properties:

— w polu ID wpisz t2Label
— w polu Text usuo zawartośd



Do metody Page_Load dodaj następujący kod wyświetlający czas
uruchomienia formularza w kontrolce t2Label:

t2Label.Text = DateTime.Now.ToLongTimeString();



Kliknij dwukrotnie kontrolkę Timer. W metodzie obsługi zdarzenia Tick
dodaj:

t1Label.Text = DateTime.Now.ToLongTimeString();



Zapisz zmiany i uruchom formularz, a następnie poczekaj 5 sekund.

Co się stało? Dlaczego?

Problem 2 (czas realizacji 10 min)

Po zapoznaniu się z technologią Twoim zadaniem jest dodanie funkcjonalności AJAX do aplikacji
stworzonej dla firmy Adventure Works.

Zadanie

Tok postępowania

9. Wykorzystaj
częściową
aktualizacje
strony do
wyświetlenia
produktów



Otwórz aplikację przygotowaną w poprzednim module.



Otwórz stronę Produkty.aspx.



Przed wszystkimi kontrolkami na górze strony umieśd kontrolkę
ScriptManager z okna Toolbox (kategoria AJAX Extensions).



Do strony dodaj kontrolkę UpdatePanel i w widoku Design przenieś do
niej wszystkie kontrolki



Zapisz zamiany w aplikacji i uruchom stronę Produkty.aspx.

Czy następuje aktualizacja całej strony?

10. Dodaj
wyświetlania
informacji o
aktualizacji



W widoku Design na stronie poniżej kontrolki UpdatePanel umieśd
kontrolkę UpdateProgress. Umieśd w niej napis: Pobieranie danych.



Wybierz kontrolkę KategorieListBox i w oknie Properties kliknij Events,
a następnie kliknij dwukrotnie pole SelectedIndexChanged. W metodzie
obsługi zdarzenia dodaj następujący kod:

Piotr Bubacz

Moduł 13

ITA-103 Aplikacje Internetowe

ASP.NET AJAX

Strona 13-12

System.Threading.Thread.Sleep(3000);



Zapisz wszystkie pliki i uruchom ponownie aplikację.

11. Zmiana
wyświetlania
tekstu na obrazek



Znajdź animowanego gifa (np. na stronie http://www.ajaxload.info).



Zamieo wyświetlany tekst w kontrolce UpdateProgress na odnaleziony
obrazek.



Zapisz wszystkie pliki i uruchom ponownie aplikację.

12. Dodanie
możliwości
anulowania
aktualizacji



Do kontrolki UpdateProgress w trybie Source dodaj:

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



Do kontrolki Content o ID="Content1" dodaj następujący skrypt w
języku JavaScript:

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



Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji
naciśnij przycisk Anuluj aktualizację.

Czy aktualizacja została anulowana?

Problem 3 (czas realizacji 10 min)

Twojemu klientowi zawsze marzyła się reklama, której zawartośd jest cyklicznie odświeżana w
przeglądarce. Twoim ostatnim zadaniem jest dodanie wyświetlania reklamy na stronie. Reklama ma
byd odświeżana cyklicznie co 6 sekund.

Zadanie

Tok postępowania

13. Przygotuj
aplikację do
korzystania z
kontrolki
ScriptMagerProxy



Otwórz stronę Produkty.aspx.



Usuo kontrolkę ScriptManager i w jej miejsce wstaw kontrolkę
ScriptMagerProxy z okna Toolbox (kategoria AJAX Extension).



Otwórz szablon strony SzablonStrony.master i na górze strony obok
kontrolki WebPartManager dodaj kontrolkę ScriptManager.

14. Dodaj
kontrolkę
użytkownika
wyświetlającej
reklamy



Kliknij prawym przyciskiem myszy katalog Kontrolki i wybierz Add New
Item. W obszarze Templates wybierz Web User Control, w polu Name
wpisz Reklama.ascx. W liście rozwijanej Language wybierz Visual C#.



Dodaj kontrolkę ScriptManagerProxy, a następnie kontrolkę
UpdatePanel.



W widoku Design dodaj do kontrolki UpdatePanel kontrolkę AdRotator.
Określ jej właściwośd AdvertisementFile="~/Adv/adv.xml".



Dodaj kontrolkę Timer i określ jej właściwośd Interval="6000".



Zapisz zmiany w pliku.

15. Umieśd
kontrolkę
Reklama.ascx na
szablonie strony



Otwórz szablon strony SzablonStrony.master i w widoku Design dodaj
do kontrolki div o ID="DrugiObszarBoczny" kontrolkę Reklama.ascx.



Zapisz zmiany w pliku.

16. Zapisz i
przetestuj



Zapisz zmiany i uruchom aplikację.



Otwórz stronę Default.aspx i sprawdź, czy następuje zmiana reklamy.