ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 13
Wersja 1
ASP.NET AJAX
Spis treści
ITA-103 Aplikacje Internetowe
Piotr Bubacz
Moduł 13
Wersja 1
ASP.NET AJAX
Spis treści
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.