Asynchroniczne interfejsy
WWW
AJAX cz. 2
mgr inż. Rafał Grycuk
mgr inż. Patryk Najgebauer
Strona służbowa: http://iisi.pcz.pl/~rgrycuk/
Kontakt: [email protected]
Konsultacje: Środa, godz. 12-14
Agenda
1. Jak działa AJAX,
2. Kontrolki AJAX-a,
3. Jak zainstalować AJAX Toolkit.
AJAX
„AJAX nie jest technologią. Jest w rzeczywistości zestawem kilku technologii,
które w połączeniu ze sobą dają ogromną moc dla aplikacji” - Jeske James
Garrett
Rafał Grycuk, Patryk Najgebauer
3
Jak działa AJAX ?
W dużym uproszczeniu wykorzystanie AJAXa powoduje zwiększenie użyteczności
aplikacji, upodabniając ją do aplikacji desktopowej (np. WinForms).
Jego wykorzystanie sprowadza się do zastąpienia synchronicznych
PostBacków, asynchronicznymi CallBackami. W przypadku podejścia
synchronicznego do akceptacji formularza używamy zdarzeń przesyłanych przy
użyciu HTTP POST. Jednakże powyższe podejścia posiada dwie główne wady:

W momencie PostBacka przeglądarka nie przechowuje HTML. Co powoduje że
nie można pracować ze stroną w tym czasie,

Redundantność danych przesyłanych pomiędzy przeglądarką a serwerem.
Rafał Grycuk, Patryk Najgebauer
4
Jak działa AJAX ?
Wykorzystanie AJAXa elimimuje wymienione poprzednio wady, oraz powoduje że
otrzymujemy następujące korzyści:

Uzyskujemy asynchroniczność, która pozwala nam na operacje na tej samej
stronie bez konieczności jej przeładowywania,

Przesyłane są tylko nowe (istotne) dane, co znacznie skraca czas transmisji.
Rafał Grycuk, Patryk Najgebauer
5
Jak działa AJAX ?
Proces działania AJAXa składa się z czterech następujących faz:

Wysłanie standardowego (synchronicznego) żądania wyświetlenia strony
WWW.

W odpowiedzi przeglądarka otrzymuje zawartość potrzebną do
wygenerowania strony.

Przeglądarka za pomocą XMLHttp wysyła (asynchroniczne) żądanie
wyświetlenia nowego elementu na stronie.

Przy pomocy JavaScript oraz XMLHttp wybrany element jest wysyłany oraz
aktualizowany
Rafał Grycuk, Patryk Najgebauer
6
ASP.NET AJAX
Środowisko ASP.NET AJAX składa się z dwóch podstawowych elementów:

ASP.NET 2.0 AJAX Extensions (rozszerzenia działające po stronie serwera),

Microsoft AJAX Library (umieszczone po stronie przeglądarki).
Rafał Grycuk, Patryk Najgebauer
7
ASP.NET AJAX
AJAX Extensions są zbudowane z kilku wielu elementów z których
najważniejszym jest AJAX Server Controls.
Podstawowe kontrolki AJAX Extensions
Kontrolka
Opis
ScriptManager
Pozwala na użycie mechanizmów ASP.NET AJAX na
stronie WWW.
ScriptManagerProxy
Pozwala na dodanie referencji do skryptów i usług dla
kontrolki ScriptManager.
UpdatePanel
Element pozwalający na wyświetlenie i aktualizację
części strony.
UpdateProgress
Element pozwalający na wyświetlenie paska postępu
związanego z aktualizacją kontrolki UpdatePanel.
Rafał Grycuk, Patryk Najgebauer
Timer
Implementacja zegara.
8
ASP.NET AJAX
<asp:ScriptManager ID="ScriptManager1" runat="server" />
Jeśli mamy jakieś skrypty w zewnętrznych plikach, to możemy je dodać za pomocą tych
kontrolek. Wyglądać to może tak:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Name="PreviewScript.js„ Assembly="System.Web.Preview" />
<asp:ScriptReference Path="~/Scripts/UIMap.js" />
</Scripts>
</asp:ScriptManager>
Rafał Grycuk, Patryk Najgebauer
9
ASP.NET AJAX
UpdatePanel
Dzięki tej kontrolce mamy możliwość renderowania tylko wybranego elementu
naszej strony. Liczba stosowanych paneli może być dowolna. Deklaracja
kontrolki wygląda następująco:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<!-Zawartość -->
</ContentTemplate>
</asp:UpdatePanel>
Rafał Grycuk, Patryk Najgebauer
10
ASP.NET AJAX
<asp:Button ID="Button1" Text="Click Me"
OnClick="Button1_Clicked" runat="" />
...
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1"
EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Rafał Grycuk, Patryk Najgebauer
11
ASP.NET AJAX
Z kolei za pomocą kontrolki UpdateProgress możemy utworzyć pasek postępu. Jeśli
aktualizacja naszego panelu może potrwać dłuższą chwilę, warto poinformować
użytkownika, że operacja jest w toku. Funkcjonalność tę załatwia poniższy
fragment kodu:
<asp:UpdateProgress ID="UpdateProgress1" runat="server"
DisplayAfter="500">
<ProgressTemplate>
<asp:Image ID="ProgressBarImage" runat="server"
ImageUrl="~/Images/ProgressBar.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
Rafał Grycuk, Patryk Najgebauer
12
ASP.NET AJAX Control Toolkit Server Controls
Kontrolka
Opis działania
AnimationExtender
Możliwość dodania efektów animacji na stronie
WWW
AutoCompleteExtender
Możliwość automatycznego uzupełniania tekstów w
polach tekstowych
Calendar
Standardowa funkcjonalność kalendarza
ConfirmButtonExtender
Rozszerzenie kontrolki Button o potwierdzenie
akcji
FilteredTextBoxExtender
Filtruje dane wprowadzane do pola tekstowego
NumericUpDownExtender
Rozszerza funkcję kontrolki TextBox o dodatkowe
element – przyciski „góra-dół”.
PasswordStrength
Sprawdzenie, czy wprowadzane hasło
wystarczająco silne i trudne do złamania.
UpdatePanelAnimationExtender Rozszerzenie UpdatePanel
momencie jego aktualizacji.
Rafał Grycuk, Patryk Najgebauer
o
animacje
13
jest
w
ASP.NET AJAX Control Toolkit Server Controls
Kontrolka
Opis działania
Accordion
umożliwia przesłanie kilku paneli i wyświetlenie jednego z nich
AlwaysVisibleControl
jest prostym rozszerzeniem umożliwiającym przypięcie kontrolki do
strony tak, że pojawia się jako ruchome okno ponad treścią strony
CascadingDropDown
umożliwia łączenie kontrolek DropDown i wypełnianie ich zawartości
asynchronicznie
CollapsiblePanel
Poszerza funkcjonalności kontrolki Panel o możliwość zwijania i
rozwijania zawartości
ConfirmButton
Rozszerza kontrolkę Button o potwierdzenie po stronie klienta
DragPanel
Zwiększa funkcjonalność kontrolki Panel o możliwość przesuwania i
umieszczania jej w dowolnym miejscu na stronie
DropDown
Poszerza większość kontrolek o funkcjonalność wysuwanej listy
DropShadow
Rozszerza kontrolki o możliwość rzucania cienia
Rafał Grycuk, Patryk Najgebauer
14
ASP.NET AJAX Control Toolkit Server Controls
Kontrolka
Opis działania
DynamicPopulate
Wypełnia zawartość elementu strony wynikiem pobranym z zapytania
HoverMenu
Rozszerza kontrolki o możliwość wyświetlenia dowolnego menu w
momencie, gdy kursor znajdzie się nad kontrolką
MaskedEdit
Poszerza kontrolkę Textbox o możliwość wyświetlenia formatu
wprowadzanych danych oraz ich walidację (po stronie klienta)
ModalPopup
Umożliwia wyświetlenie okna dialogowego na stronie i zablokowanie
strony przed jej edycją
MutuallyExclusiveCheckBox
Rozszerza kontrolki CheckBox o możliwość wzajemnego wykluczania się
NoBot
Stosuje podstawowe metody zapobiegające wysyłaniu strony przez boty
PagingBulletedList
Rozszerza możliwości kontrolki Bulletedlist o sortowanie i stronicowanie
po stronie klienta
PopupControl
Umożliwia dodanie do dowolnej kontrolki okna wyskakującego
Rafał Grycuk, Patryk Najgebauer
15
ASP.NET AJAX Control Toolkit Server Controls
Kontrolka
Opis działania
Rating
Umożliwia łatwą ocenę dowolnej zawartości za pomocą gwiazdek
ReorderList
Umożliwia przestawienie elementów listy poprzez przeciąganie ich
myszą
ResizableControl
Umożliwia zmianę wielkości dowolnego elementu w przeglądarce
RoundedCorners
Rozszerza kontrolki o zaokrąglone rogi
Slider
Pasek przewijania
TabContainer
Kontrolka pozwalająca na wyświetlanie w postaci zakładek
TextBoxWatermark
Rozszerza kontrolke TextBox o wyświetlanie znaku wodnego w
momencie gdy nie przechowuje ona wartości
ToggleButton
Poszerza kontrolkę CheckBox o możliwość wyświetlania obrazków w
miejscu elementów zaznaczonych i niezaznaczonych
ValidatorCallout
Rozszerza możliwości standardowych kontrolek do
poprawności danych wprowadzanych przez użytkownika
Rafał Grycuk, Patryk Najgebauer
16
sprawdzania
ASP.NET AJAX
W celu wykorzystanie AJAX Control ToolKit należy:
1.
Pobrać http://ajaxcontroltoolkit.codeplex.com/
2.
Następnie wypakować
3.
Kolejno w Visual Studio utworzyć nowy projekt WebForms.
4.
W okienku Tools kliknąć PPM i wybrać add tab.
5.
Nazwać zakładkę.
6.
Kolejno w tej zakładce proszę wybrać PPM i choose items.
7.
Wybrać Browse, odnaleźć w pobranym folderze AjaxControlToolkit.dll i kliknąć
ok.
Rafał Grycuk, Patryk Najgebauer
17
ASP.NET AJAX
Rafał Grycuk, Patryk Najgebauer
18
ASP.NET AJAX
Rafał Grycuk, Patryk Najgebauer
19
Źródła
 http://www.asp.net/ajaxlibrary/act.ashx
 http://ajaxcontroltoolkit.codeplex.com/
 http://wmii.uwm.edu.pl/~an_daw/Materialy_wspolne/ZAI/BUBACZ/Mod14/ITA103-Modul14.pdf
 http://webhosting.pl/Kurs.AJAX_a.dla.ASP.NET..Czesc.I%3A.zaczynamy.prace
Download

Wersja pdf - Support OnLine