ITA 103 AplikacjeInternetowe

Piotr Bubacz
Aplikacje Internetowe
ITA-103
Wersja 1
Warszawa, padziernik 2008

Piotr Bubacz
ITA-103 Aplikacje Internetowe
Strona i-2
2008 Piotr Bubacz. Autor udziela prawa do bezpatnego kopiowania
i dystrybuowania wrd pracownikw uczelni oraz studentw objtych
programem ITAcademy. Wszelkie informacje dotyczce programu mona
uzyska: pledu@microsoft.com.

Wszystkie inne nazwy firm i producentw wymienione w niniejszym
dokumencie mog by znakami towarowymi zarejestrowanymi przez ich
wacicieli.

Inne produkty i nazwy firm uywane w treci mog by nazwami
zastrzeonymi przez ich wacicieli.

Piotr Bubacz
Strona i-3
Spis treci
Wprowadzenie i-4
Modu 1 Podstawy HTML 1-1
Modu 2 Kaskadowe Arkusze Stylw CSS 2-1
Modu 3 Podstawy JavaScript 3-1
Modu 4 Wprowadzenie do ASP.NET 4-1
Modu 5 Kontrolki serwerowe 5-1
Modu 6 Projektowanie serwisw internetowych 6-1
Modu 7 Kolokwium 1 7-1
Modu 8 Kontrolki danych w ASP.NET 8-1
Modu 9 LINQ w ASP.NET 9-1
Modu 10 Bezpieczestwo serwisw internetowych 10-1
Modu 11 Zarzdzanie stanem w aplikacjach ASP.NET 11-1
Modu 12 Technologia WebParts 12-1
Modu 13 ASP.NET AJAX 13-1
Modu 14 ASP.NET AJAX Control Toolkit 14-1
Modu 15 Kolokwium 2 15-1

Piotr Bubacz
Strona i-4
Wprowadzenie
Informacje o kursie
Opis kursu
Kurs zawiera informacje dotyczce programowania dynamicznych stron
internetowych w technologii ASP.NET. Przedstawia kompletny projekt
witryny internetowej sklepu Adventure Works realizowany w czasie zaj,
dziki ktremu zapoznasz si z najwaniejszymi komponentami tej
technologii.
Kurs rozpoczynamy od przedstawienia podstaw HTML i CSS, by pniej
przeprowadzi Ci przez podstawy tworzenia aplikacji internetowych oraz
dodawania i konfigurowania kontrolek dostpnych w ASP.NET. Te wszystke
zagadnienia poznajemy na przykadzie projektu sklepu internetowego, ktry
stopniowo rozbudowujemy o nowe, poznawane w kolejnych moduach
elementy.
Cel kursu
Celem kursu jest przedstawienie zagadnie zwizanych z tworzeniem
aplikacji internetowych w ASP.NET, dziki ktrym bdziesz w stanie
samodzielnie projektowa i wykonywa proste serwisy internetowe.
Uzyskane kompetencje
Po zrealizowaniu kursu bdziesz:
potrafi tworzy strony w XHTML przyjazne dla CSS
rozumia potrzeb tworzenia stron internetowych zgodnych ze
standardami
potrafi tworzy proste aplikacje dziaajce po stronie klienta w
jzyku JavaScript
potrafi tworzy aplikacje internetowe w Visual Studio 2008
potrafi dodawa i konfigurowa kontrolki serwerowe dostpne w
ASP.NET
potrafi zaprojektowa szablon strony i zarzdza wygldem serwisu
potrafi dodawa i konfigurowa rne kontrolki rda prezentacji
danych
potrafi tworzy proste zapytania LINQ
rozumia potrzeb i zna moliwoci zabezpieczania portalu przed
niepowoanym dostpem
potrafi zarzdza stanem aplikacji
potrafi tworzy aplikacje internetowe konfigurowalne przez
uytkownika
potrafi wykorzystywa zalety asynchronicznej komunikacji z
serwerem przy pomocy AJAX
wiedzia jak wykorzysta kontrolki dostpne w ASP.NET AJAX
Control Toolkit
Wymagania wstpne
Do zrealizowania tego kursu powiniene posiada:
wiedz z zakresu programowania obiektowego w jzyku C#, ktr
obejmuj kursy ITA-104 Wprowadzenie do programowania i
ITA-105 Programowanie obiektowe
Piotr Bubacz
Strona i-5
Zakres tematyczny kursu
Opis moduw
W Tab. 1 przedstawiony zosta opis moduw, zawierajcy podzia na
zajcia. Kade zajcie jest zaplanowane na 90 minut. Wykadowca moe
dostosowa harmonogram do swoich potrzeb.
Tab. 1 Zakres tematyczny moduw
Numer modu
Tytu
Opis
Modu 1
Podstawy HTML
W tym module znajdziesz informacje dotyczce jzyka
HTML. Poznasz jego moliwoci i ograniczenia.
Zobaczysz, w jaki sposb uywa tabel i formularzy do
pobierania informacji od uytkownika. Nauczysz si, jak
tworzy proste strony i serwisy internetowe.
Modu 2
Kaskadowe Arkusze
Stylw CSS
W tym module znajdziesz informacje dotyczce
kaskadowych arkuszy stylw i zalet wynikajcych z ich
stosowania. Zobaczysz, w jaki sposb uywa
selektorw i jak utworzy ukad strony wykorzystujc
pozycjonowanie CSS. Dodatkowo nauczysz si, jak
zmieni istniejcy dokument HTML wykorzystujcy
formatowanie przy pomocy tabel, aby by zgodny ze
standardem XHTML i przyjazny dla CSS.
Modu 3
Podstawy JavaScript
W tym module znajdziesz informacje dotyczce podstaw
jzyka JavaScript. Nauczysz si tworzy kod dziaajcy po
stronie klienta w przegldarce. Poznasz sposoby
sprawdzania poprawnoci wprowadzanych informacji
przez uytkownika.
Modu 4
Wprowadzenie do
ASP.NET
W tym module znajdziesz informacje dotyczce podstaw
tworzenia aplikacji internetowych w Visual Studio 2008.
Nauczysz si dodawa strony internetowe do aplikacji
oraz umieszcza na nich kontrolki dostpne w ASP.NET.
Poznasz zasady programowego odwoywania si do
kontrolek oraz interakcji z uytkownikiem strony.
Modu 5
Kontrolki serwerowe
kontrolek dostpnych w ASP.NET. Poznasz rnice
midzy kontrolkami serwerowymi HTML a kontrolkami
Web. Nauczysz si wykorzystywa nie tylko rne
kontrolki serwerowe, ale rwnie walidowa
wprowadzone dane po stronie klienta lub/i po stronie
serwera.
Modu 6
Projektowanie
serwisw
internetowych
zarzdzania wygldem aplikacji i tworzenia elementw
nawigacyjnych. Poznasz moliwoci centralnego
zarzdzania wygldem witryny przy pomocy stron
wzorcowych i kompozycji. Poznasz metody tworzenia
mapy witryny internetowej oraz nauczysz si, jak
wykorzystywa kontrolki nawigacyjne.
Modu 8
Kontrolki danych w
ASP.NET
komunikacji i wywietlania informacji z bazy danych w
aplikacjach internetowych. Nauczysz si definiowa
zapytania przy pomocy kontrolki LinqDataSource i
wywietla wyniki w kontrolkach GridView oraz
Repeater.

Piotr Bubacz
Strona i-6
Modu 9
LINQ w ASP.NET
technologii LINQ. Nauczysz si, jak formuowa proste
zapytania z wykorzystaniem zintegrowanego jzyka
zapyta i w jaki sposb poczy go z ASP.NET.
Modu 10
Bezpieczestwo
serwisw
internetowych
sposobw zabezpieczania dostpu do aplikacji
internetowej przy pomocy mechanizmw autoryzacji.
Poznasz kontrolki logowania oraz nauczysz si, jak
mona ukrywa opcje menu przed rnymi grupami
uytkownikw.
Modu 11
Zarzdzanie stanem w
aplikacjach ASP.NET
moliwoci zarzdzania stanem w aplikacjach ASP.NET.
Nauczysz si przechowywa zmienne i obiekty w stanie
sesji i aplikacji. Zobaczysz, w jaki sposb mona
dodawa, zarzdza i usuwa obiekty z tych stanw.

Modu 12
Technologia WebParts
technologii umoliwiajcej personalizacj wygldu
strony przez jej uytkownikw WebParts. Nauczysz si,
jak tworzy i zarzdza kontrolkami WebPart, jak
rwnie, jak zachowa ukad kontrolek umieszczonych
na szablonie strony na wszystkich stronach serwisu.

Modu 13
ASP.NET AJAX
tworzenia aplikacji internetowych z wykorzystaniem
AJAX. Zobaczysz, jak prosto i skutecznie mona
wykorzystywa podstawowe kontrolki dostpne w
ASP.NET AJAX. Nauczysz si, jak kilkoma klikniciami
myszy rozszerzy funkcjonalno aplikacji o moliwo
asynchronicznej komunikacji z serwerem.
Modu 14
ASP.NET AJAX Control
Toolkit
biblioteki ASP.NET AJAX Control Toolkit. Nauczysz si
rozszerza moliwoci standardowych kontrolek
ASP.NET o funkcjonalnoci zawarte w bibliotece.

Piotr Bubacz
Modu 2
Wersja 1
Podstawy HTML
Spis treci
Podstawy HTML ................................................................................................................................... 1
Informacje o module ............................................................................................................................ 2
Przygotowanie teoretyczne ................................................................................................................. 3
Przykadowy problem .................................................................................................................. 3
Podstawy teoretyczne.................................................................................................................. 3
Uwagi dla studenta .................................................................................................................... 18
Dodatkowe rda informacji..................................................................................................... 18

Piotr Bubacz Modu 1
ITA-103 Aplikacje Internetowe Podstawy HTML
Strona 1-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce jzyka HTML. Poznasz jego
moliwoci i ograniczenia. Zobaczysz, w jaki sposb uywa tabel
i formularzy do pobierania informacji od uytkownika. Nauczysz si, jak
tworzy proste strony i serwisy internetowe.
Cel moduu
Celem moduu jest przedstawienie moliwoci wykorzystania jzyka HTML,
formatowania dokumentu przy uyciu tabel oraz pobierania informacji od
uytkownika.
Po zrealizowaniu moduu bdziesz:
potrafi tworzy nowe strony internetowe w jzyku HTML
wiedzia jak tworzy i kiedy warto stosowa tabele
potrafi tworzy formularze i przesya je do odbiorcy
Wymagania wstpne
Ten modu nie ma adnego wymagania wstpnego. Moesz od razu
rozpocz prac z tym moduem.
Mapa zalenoci moduu
Zgodnie z map zalenoci przedstawion na Rys. 1, przed przystpieniem
do realizacji tego moduu nie jest wymagane zapoznanie si z materiaem
zawartym w innych moduach.

Rys. 1 Mapa zalenoci moduu

Piotr Bubacz Modu 1
Strona 1-3
Przygotowanie teoretyczne
Przykadowy problem
Znajomo jzyka HTML w projektowaniu stron internetowych w dobie narzdzi pracujcych w
trybie WYSIWYG (ang. What You See Is What You Get, co znaczy dosownie to co widzisz jest tym,
co otrzymasz) wydaje si niepotrzebna. Nie jest to prawd. Projektant aplikacji internetowej musi
w swojej pracy siga rwnie na poziom znacznikw HTML.
Pena kontrola nad kodem tworzonym po stronie uytkownika wymaga jawnego odwoania si do
znacznikw HTML. Znaczniki HTML nie wymagaj przetwarzania na serwerze Znajomo
znacznikw pozwala nam rwnie atwiej zrozumie problemy wywietlania informacji.
Bez znajomoci jzyka HTML bardzo trudno jest nam tworzy dobre strony. Tabele w HTML s
bardzo przydatne do przedstawiania danych tabelarycznych, cho niektrzy do dzisiaj buduj w
oparciu o nie wygld aplikacji. Nie jest to bd, ale powoduje ograniczenie dostpnoci strony dla
urzdze mobilnych, czy dla osb z ograniczonymi zdolnociami percepcji.
Formularze w jzyku HTML udostpniaj podstawow funkcjonalno tworzenia elementw
interakcji z uytkownikiem.
Podstawy teoretyczne
World Wide Web (w skrcie WWW lub Web) jest multimedialnym, hipertekstowym systemem
informacyjnym opartym na publicznie dostpnych, otwartych standardach. Podstawowym
zadaniem WWW jest publikowanie informacji.
WWW jest sieci milionw komputerw dziaajcych w oparciu o model klient-serwer. Serwer
przechowuje informacje i obsuguje zapytania klienta. Klient tworzy zapytanie, wysya, odbiera je i
przetwarza, a nastpnie wywietla informacje dla kocowego uytkownika. Klientem sieci Web jest
najczciej przegldarka internetowa.
Cechy WWW:
hipertekstowy system informacyjny
graficzna reprezentacja informacji
atwa nawigacja
system wieloplatformowy
system rozproszony
sie dynamiczna
sie interaktywna
uniwersalny sposb nazewnictwa zasobw informacyjnych (URI)
ustalony protok dostpu do zasobw (HTTP)
stosowanie specjalnego typu jzyka w celu nawigacji po zasobach (HTML)
Strona internetowa
Strona internetowa to dokument tekstowy napisany w jednej z odmian jzyka znacznikw, np.
HTML, interpretowanego przez przegldark uytkownika. Strony mona podzieli ze wzgldu na
sposb jej tworzenia na statyczne i dynamiczne.
Strona statyczna musi by przygotowana wczeniej przez twrc. Jej ostateczny wygld oraz caa
tre musi by znany na etapie projektowania.
Zalety:
atwo implementacji
Wady:
Piotr Bubacz Modu 1
Strona 1-4
brak elastycznoci
Strona dynamiczna jest generowana przez serwer na podstawie dziaania uytkownika serwisu i
danych zapisanych najczciej w relacyjnej bazie danych.
Zalety:
interaktywno
atwo aktualizacji
Wady:
trudno w implementacji, testowaniu i wdraaniu
wiksze wymagania sprztowe serwera i cz internetowych
Serwis internetowy
Zbir powizanych ze sob i umieszczonych w jednej lokalizacji stron internetowych nazywa si
witryn lub serwisem internetowym. Portal jest zbiorem wielu informacji i zasobw z kilku lub
jednej dziedziny. Portale zawieraj najczciej: wiadomoci, informacje tematyczne, forum,
Portale mona podzieli na:
poziome zawieraj informacje z wielu dziedzin, dodatkowo mog udostpnia np.
wyszukiwarki, poczt elektroniczn
pionowe zawieraj informacje z jednej dziedziny (nazywane wortalami)
Protok HTTP
HTTP (ang. HyperText Transfer Protocol) protok warstwy aplikacji sucy do transferu
dokumentw HTML, obrazw, multimediw itp. Jest protokoem bezstanowym interakcja klienta
(najczciej przegldarki internetowej) z serwerem WWW odbywa si w modelu
bezpoczeniowym:
Klient nawizuje poczenie TCP/IP z serwerem, najczciej na porcie 80.
Klient wysya danie do serwera wraz z informacjami na temat systemu operacyjnego,
wersji jzyka, obsugiwanych protokow informacyjnych. W sieci przesyane s polecenia
tekstowe zorganizowane w wiersze np.:
GET /KatalogNaSerwerze/plik.html HTTP/1.0
Useragent: Mozilla/4.0
Accept: text/html, image/gif,image/jpeg
Acceptlanguage:pl
[dodatkowa pusta linia]
Serwer wysya do klienta kod odpowiedzi (informujcy o sukcesie lub problemach z
wysyaniem danego zasobu), informacje dotyczce rodzaju zawartoci zasobu, kodowania,
itp. oraz dany zasb:
HTTP/1.1 200 OK.
Server: ASP.NET Development Server/8.0.0.0
Date: Sat, 29 Jul 2006 22:49:42 GMT
XAspNetVersion: 2.0.50727
CacheControl: private
ContentType: text/html; charset=utf8
ContentLength: 487
Connection: Close
Serwer po przesaniu odpowiedzi automatycznie zamyka poczenie z klientem.
Piotr Bubacz Modu 1
Strona 1-5
Najwaniejsze metody klienta
Jeli uytkownik musi poda jakie dane, to jedyn moliwoci jest pobranie ich ze standardowego
formularza HTML. Dane podane mog by przesane do serwera za pomoc omiu metod, z ktrych
najczciej wykorzystywane to:
GET pobieranie zasobu wskazanego przez URL. Moe zawiera parametry doczane do URL
(po znaku zapytania).
POST wysya dane uytkownika do okrelonego zasobu:
dane zawarte s w ciele komunikatu
nagwek ContentType i ContentLength
w odpowiedzi klient otrzymuje dokument wygenerowany dynamicznie.
Przekazywanie parametrw
Parametry mona przesya przy pomocy metody POST lub GET.
W metodzie GET Parametry s przekazywane w adresie URL po znaku zapytania, oddzielone od
siebie znakiem &, w formacie parametr=warto, np.
GET /index.aspx?cat=2&prodid=23
Znaki zastrzeone (=, &, &, +) s kodowane do postaci %xx, gdzie xx jest kodem ASCII znaku
zapisanym szesnastkowo, np. znak spacji zamieniany jest na %20.
W metodzie POST informacje s pobierane z formularza znajdujcego si na stronie internetowej.
Jzyk HTML
HTML (ang. HyperText Markup Language) jest jzykiem znacznikw zaprojektowanym do tworzenia
stron internetowych. Suy on do opisywania struktury dokumentu (nagwki, akapity, listy), a nie
jego formatowania. Umieszczanie informacji o formatowaniu w dokumencie jest z praktyk.
Interpretacj znacznikw i graficznym przedstawieniem zawartoci zajmuj si przegldarki
internetowe. Gramatyka jzyka jest oparta o standard SGML.
SGML (ang. Standard Generalized Markup Language) to ustandaryzowany nadrzdny jzyk
znacznikw sucy do ujednolicania struktury i formatu rnego typu informacji. Umoliwia
zapisywanie informacji w formie dokumentu tekstowego, dziki czemu moliwe jest ich atwe
przenoszenie, wywietlanie i drukowanie.
Podstawowe waciwoci:
Znacznik jest reprezentowany przez tekst zawarty w nawiasach trjktnych (< i >).
Tekst pomidzy nawiasami to nazwa znacznika.
Istniej trzy rodzaje znacznikw:
otwierajcy postaci <znacznik>
zamykajcy postaci </znacznik>
samodzielny postaci <znacznik />
Znacznik otwierajcy moe posiada szereg atrybutw definiowanych jako
nazwa="warto".
Znaki biae, np. spacje, tabulatory lub znaki nowej linii s ignorowane.
Dokument HTML
Dokument HTML jest plikiem tekstowym, w ktrym znajduj si polecenia (znaczniki) HTML. Z tego
wynika, e dokument taki mona utworzy za pomoc dowolnego edytora tekstowego, rcznie
dodajc znaczniki. Metoda taka jest skuteczna, ale zbyt uciliwa i podatna na bdy, szczeglnie
przy projektowaniu duych serwisw internetowych. Dlatego na rynku pojawio si wiele
Piotr Bubacz Modu 1
Strona 1-6
specjalizowanych edytorw, ktre wydatnie uatwiaj konstruowanie dokumentu, wspomagajc
wprowadzanie polece. Narzdzia mona podzieli na dwie kategorie: narzdzia graficzne
WYSIWYG oraz tekstowe. Narzdzia graficzne umoliwiaj tworzenie serwisw osobom, ktre nie
znaj jzyka HTML, jednak znajomo tego jzyka uatwia prac twrcom stron.
Dokument rozpoczyna si definicj typu dokumentu. W jzyku HTML w wersji 4.01 element ten jest
wymagany, podobnie jak w jzyku XHTML. Cay dokument zawarty jest w znaczniku <html> i
skada si z dwch gwnych czci: nagwka (<head>) oraz ciaa treci dokumentu <body>.
Wersja minimalna dokumentu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<! Naglowek dokumentu >
<title> Tytu strony </title>
</head>
<body>
<! Tresc dokumentu >
</body>
</html>
Definicja typu dokumentu
Definicja typu dokumentu okrela wersj jzyka, ktra jest wykorzystywana w dokumencie.
Poprawny dokument HTML w wersji 4.01 zawiera w pierwszym wierszu definicje typu dokumentu.
Podobnie jest w XHTML. Deklaracja typu zawiera informacje o dokumencie definicji typu (ang.
Document Type Definition, DTD) wykorzystywanym w dokumencie. DTD zawiera definicje
elementw, ktre mona uy w danym dokumencie.
W jzyku HTML w wersji 4.01 okrelono trzy dokumenty definicji typu, ktre mona uy w
projektowanej stronie internetowej:
cisy (ang. strict) zawiera wszystkie elementy i atrybuty, ktre s zdefiniowane w
standardzie bez elementw nie zalecanych oraz informacji dotyczcych dokumentw
zawierajcych ramki. Deklaracja typu dokumentu:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Przejciowy (ang. transitional) zawieray wszystkie elementy typu bezporedniego oraz
elementy i atrybuty niezalecane (wikszo dotyczy wizualnej formatowania). Deklaracja
typu dokumentu:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Zbir ramek (ang. frameset) zawiera wszystkie elementy typu przejciowego oraz elementy
zbioru ramek. Deklaracja typu dokumentu:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
W dokumencie XHTML przed elementem korzenia (najczciej znacznikiem <html>) musi
znajdowa si deklaracja typu dokumentu, tzw. DOCTYPE. Publiczny identyfikator doczony do tej
deklaracji musi odnosi si do jednego z trzech DTD:
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Piotr Bubacz Modu 1
Strona 1-7
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
Nagwek strony
Nagwek strony zawiera informacje, ktre nie s wywietlane na stronie, ale maj wpyw na jej
wygld. Przykady tu prezentowane zapisane zostay zgodnie z jzykiem HTML. Rnica pomidzy
zapisem HTML a XHTML to przede wszystkim konieczno stosowania w XHTML bardziej
restrykcyjnych regu formatowania dokumentu, np. zamknicie znacznika czy pisanie nazw
znacznikw maymi literami, lub otaczanie wartoci atrybutw cudzysowem, podczas gdy w HTML
mona uy apostrofw, w XHTML wymagana jest rwnie odpowiednia kolejno zamykania
znacznikw.
Przykadowe znaczniki w sekcji <head>:
<title> zawiera tytu dokumentu wywietlany w pasku tytuowym okna przegldarki.
Zgodnie ze specyfikacj jzyka, kady dokument musi posiada ten znacznik w sekcji <head>.
<meta> umoliwia autorom strony na podawanie informacji o stronie. Informacje mog
by zawarte w nastpujcych atrybutach:
lang okrela jzyk zawartoci
content ustala warto atrybutu
name ustala nazw i rodzaj informacji
scheme okrela schemat interpretacji informacji
httpequiv ustala nazw i rodzaj informacji
<link> okrela relacj pomidzy poczonymi dokumentami. Znacznik wykorzystywany do
okrelania lokalizacji zewntrznego dokumentu CSS. Atrybuty znacznika:
charset definiuje kodowanie znakw we wskazanym zasobie
href adres zasobu
type okrela typ MIME wskazanego zasobu
href adres zasobu
rel definiuje zwizek pomidzy aktualnym, a wskazywanym zasobem.
Rodzaje zwizkw:
stylesheet zewntrzny arkusz styli
alternate alternatywna wersja dokumentu, czsto stosowana z atrybutem Lang
glosssary sownik
copyright prawa autorskie dokumentu
help plik z dodatkow pomoc, linkami itp.
rev definiuje zwizek pomidzy wskazywanym, a aktualnym zasobem
Formatowanie treci dokumentu
W znaczniku <body> umieszczona jest tre dokumenty. W tym miejscu moliwe jest korzystanie z
penej palety moliwoci jzyka HTML, w szczeglnoci:
Definiowanie struktury tekstu:
nagwki, akapity itp.
listy wypunktowane i numerowane
wyrnianie cytatw, itp.
Formatowanie tekstu:
wielko i kolor tekstu
podkrelanie, pogrubianie, pochylanie, wyrwnanie tekstu do lewej, prawej, rodka, lub
do obydwu marginesw, itp.
Piotr Bubacz Modu 1
Strona 1-8
Tabele
Osadzanie grafiki i innych obiektw
Odnoniki
Formularze
Definiowanie struktury tekstu
Definiowanie struktury dokumentu polega na okrelaniu podziau tekstu na rozdziay, akapity i inne
jednostki logiczne dokumentu.
Nagwki
Znacznik <h1> do <h6> okrela nagwek tytu rozdziau. <h1> definiuje nagwek najwyszego
poziomu (dotyczy gwnego rozdziau i jest wywietlany najwikszymi literami), a <h6> najniszego
poziomu (jest wywietlany najmniejsz czcionk). Dobr praktyk jest umieszczanie co najwyej
jednego nagwka pierwszego poziomu <h1>.
<h1>To jest nagwek 1</h1>
Akapity i wiersze
Akapity s podstawow jednostk logiczn podziau dokumenty. HTML nie rozpoznaje biaych
znakw (spacje, znaki koca linii), traktujc je, niezalenie od ich iloci, jak pojedyncz przerw
odstp. Zawarto akapitu naley umieci w specjalnym znaczniki <p>. Znacznik <p> musi zosta
zamknity (</p>).
Przegldarka sama decyduje, w ktrym miejscu ma zosta przeamana linia. Uytkownik moe
wymusi przeamanie za pomoc znacznika <br />.
Listy wypunktowane i numerowane
W wielu dokumentach istnieje potrzeba zaprezentowania fragmentu tekstu za pomoc listy
wypunktowanej lub numerowanej. Moliwe jest rwnie tworzenie wielopoziomowych list.
Znacznik <ul> umoliwia utworzenie szkieletu wykazu wypunktowanego. Poszczeglne punkty
wykazu naley umieszcza midzy znacznikami <li> i </li>. Standardowo pozycje listy oznaczone
s koem. Do utworzenia listy numerowanej zamiast znacznika <ul> wykorzystuje si znacznik
<ol>. Standardowo pozycje listy s numerowane za pomoc liczb arabskich.
Zmiana wygldu oraz sposobu znakowania listy jest moliwa przy pomocy kaskadowych arkuszy
stylw, ktre poznasz w kolejnym module.
Inne wyrnienia tekstu
W jzyku HTML moliwe jest logiczne wyrnianie pewnych informacji, np. cytatw. Wyrnienie
nie tylko dodaje informacje o strukturze, ale rwnie jest zwizane z formatowaniem danego
fragmentu przez przegldark. Przegldarki albo zmieniaj wygld zawartoci tekstu, albo ignoruj
dany znacznik nie zmieniajc formatowania.
Lista znacznikw:
<em> wyrnienie
<strong> mocniejsze wyrnienie
Piotr Bubacz Modu 1
Strona 1-9
<cite> zawiera cytowanie lub odnonik do innego rda
<dfn> zawiera definicj
<code> fragment kodu programu komputerowego
<samp> zawiera przykadowy wynik dziaania programu, skryptu, itp.
<kbd> okrela tekst, ktry ma wprowadzi uytkownik
<var> zawiera zmienn lub argument programu
<acronym> zawiera akronim, np. WWW, HTTP, URI, itp.
Osadzanie grafiki i innych obiektw
Grafika oraz inne multimedialne elementy s dzisiaj jedn z najbardziej charakterystycznych
wyrnikw stron internetowych.
Osadzanie grafiki na stronie
Podstawowa konstrukcja ma nastpujc posta:
<img src="zrodlo_pliku" alt="tekst">
Atrybut alt suy do wywietlania tekstu, gdy nie jest moliwe wywietlenie grafiki.
Atrybuty wymagane:
src lokalizacja pliku (URL)
alt krtki opis wywietlany, gdy nie mona wywietli grafiki
Pozostae atrybuty opcjonalne s w wikszoci przestarzae i zamiast nich lepiej jest uywa styli
CSS.
Osadzanie multimediw na stronie
Do osadzania grafiki suy znacznik <object>. Umoliwia on okrelenie danych i parametrw
obiektu osadzonego w dokumencie HTML wraz z kodem, ktry moe by uyty do wywietlenie lub
manipulacji danymi.
Atrybuty znacznika:
align wyrwnanie obiektu (top, bottom, left, right)
archive lista adowanych wstpnie zasobw
border rozmiar ramki obiektu
classid klasa obiektu
codebase okrela adres bazowy dla classid, data i archive
codetype okrela typ obiektu
data wskazuje adres danych obiektu
declare deklaracja obiektu
height okrela wysoko obiektu
hspace pionowy odstp od obiektu
name unikatowa nazwa elementu
standby informacja pokazywana w trakcie adowania obiektu
type okrela typ danych
usemap podaje map elementu
vspace odstp poziomy od obiektu
width okrela szeroko obiektu

Piotr Bubacz Modu 1
Strona 1-10
Grupowanie liniowe i blokowe
Znacznik <span> tworzy uniwersalny zakres liniowy i pozwala nada mu wsplne atrybuty za
pomoc stylu.
Znacznik <div> obejmuje blokiem grup elementw w dokumencie i pozwala im nada wsplne
atrybuty. Element ten jest kontenerem umoliwiajcym dodanie struktury do dokumentu HTML.
Najczciej suy on do logicznego podziau zawartoci strony, np. nawigacji, nagwka czy stopki
strony.
Odnoniki
Odnoniki (odsyacze, hipercza, cza hipertekstowe, odnoniki) s najbardziej
charakterystycznym elementem sieci WWW. Dziki nim mona mwi o HTML jako jzyku
hipertekstowym odnoniki w jednym kontekcie do innego kontekstu. Bez odsyaczy nie byoby
moliwe tworzenie serwisw internetowych, bez nawigacji staby si on tylko zbiorem
niepowizanych dokumentw lub musiaby zosta przedstawiony na jednej stronie, co jest
najczciej moliwe, chocia w przypadku duych portali mao prawdopodobne.
Odnonik to wskazanie do innego miejsca. Kliknicie na nim przenosi uytkownika do okrelonego
miejsca. Moe to by miejsce na tej samej stronie, w tym samym serwisie, ale rwnie dobrze moe
to by strona na drugim kocu wiata.
Do utworzenia odnonika w jzyku HTML potrzebne s lokalizacja zasobu oraz tekst opisujcy
zasb. Format najprostszego odnonika:
<a href="lokalizacja_zasobu">Tekst opisujcy zasb</a>
Parametr href (ang. Hypertext Reference) odnonik hipertekstowy. Suy do okrelenia URL
zasobu, wskazywanego przez dane poczenie.
Lokalizacja to najczciej adres URL do zasobu lub nazwa pliku. Lokalizacja moe zawiera ciek
wzgldn lub bezwzgldn.
cieka wzgldna jest podawana wzgldem aktualnego pliku, np.:
<a href="../plik_w_katalogu_nadrzednym">Tekst opisujcy zasb</a>
<a href="/kat/plik_w_katalogu_podrzednym">Tekst opisujcy zasb</a>
cieka bezwzgldna jest podawana jako peny adres internetowy strony.
<a href="http://www.example.com/plik">Tekst opisujcy zasb</a>
Poczenie do okrelonych miejsc w dokumencie
Aby odwoa si do okrelonego miejsca w dokumencie naley okreli zakadk (kotwic,
etykiet), a nastpnie wskaza j w odnoniku.
Aby utworzy zakadk naley uy konstrukcji:
<a name="nazwa_zakladki"> </a>
Moliwe jest utworzenie dowolnej iloci etykiet na stronie. Jest to szczeglnie wygodne w
przypadku stron o duej objtoci.
Odnonik do etykiety ma posta:
<a href="strona.html#nazwa_zakladki">Odnonik do zakadki</a>
lub jeli odnonik jest na tej samej stronie co zakadka, to mona odnie si w skrconej formie:
<a href="#nazwa_zakladki">Odnonik do zakadki</a>
Piotr Bubacz Modu 1
Strona 1-11
Odnoniki do adresu e-mail
Odnonik do adresu e-mail jest taki sam, jak standardowy odnonik. Rnica polega na tym, e po
kliknici go nie zostanie otworzona nowa strona, lecz aplikacja do wysyania listw elektronicznych.
Linki do adresw e-mail s szczeglnie pomocne dla kontaktu z autorem strony czy biurem obsugi
klienta na stronie firmowej.
Odnonik do adresu e-mail ma posta:
<a href="mailto:adres@serwer">Wylij do nas list</a>
Tabele
Tabele w jzyku HTML s podobne do tabel spotykanych w innych dziedzinach ycia, umoliwiajc
przedstawienie danych w uporzdkowanej postaci. Dodatkowo umoliwiaj ukadanie danych
tekstu, obrazkw, odnonikw, formularzy, pl formularza, innych tabel, itp. w wiersze i kolumny
komrek. Naley jednak doda, e wspczenie panuje tendencja odchodzenia od
wykorzystywania tabel w charakterze szkieletu strony.
Tabela moe zawiera nagwek zawierajcy krtki opis zawartoci tabeli. Tabel skada si z
wierszy, ktre zawieraj komrki. Istnieje moliwo scalania wielu wierszy lub kolumn.
Znacznik <table>
Tabel rozpoczyna znacznik <table>, a koczy </table>. Znacznik <table> posiada kilka
atrybutw. Atrybut width okrela szeroko tabeli. Moe by ona podana m.in. w pikselach lub
jako procent caej szerokoci dostpnej dla okna przegldarki. Przykady:
<table width="150"> <table width="50%">
Innym atrybutem jest border, ktry okrela grubo ramki. Parametr ten okrela w pikselach
grubo ramki. Warto 0 oznacza cakowite wyczenie ramki.
Dodatkowo moliwe jest okrelenie odlegoci pomidzy komrkami atrybut cellspacing.
Odlego od komrki do jej zawartoci okrela atrybut cellpadding. Obie wartoci okrelane s
w pikselach.
<table border="2" cellspacing="3" cellpadding="3">
Wiersze tabeli
Podstawow jednostk tabeli s wiersze. Kada tabela musi zawiera co najmniej jeden wiersz.
Wiersz tabeli reprezentowany jest przez znacznik <tr>.
<tr> </tr>
</table>
Wiersz tabeli tworzy ramy dla komrek z danymi. Moliwe jest dodanie wielu wierszy do tabeli:
<tr> </tr>
<tr> </tr>
</table>
Komrka tabeli
Komrka tabeli dodaje pionow kolumn do tabeli. S one reprezentowane przez znacznik <td>.
Wsplnie ze znacznikami <table> oraz <tr>, znacznik <td> stanowi najwaniejsze elementy
budowy tabeli:
<table width="80%" border="2" cellspacing="3" cellpadding="3">
<tr>
<td></td>
<td></td>
Piotr Bubacz Modu 1
Strona 1-12
</tr>
</table>
Powyszy kod HTML tworzy tabel przedstawion poniej.
Nagwki tabeli
Nagwek tabeli okrela nagwek kolumny lub wiersza. Tekst w komrce, ktra jest nagwkiem
jest pogubiony. Nagwek tabeli reprezentowany jest przez znacznik <th>.
W przypadku nagwka wiersza:
<tr>
<th>Lp.</th>
<th>Imi</th>
</tr>
<tr>
<td>1</td>
<td>Piotr</td>
</tr>
</table>
W przypadku nagwka kolumny:
<tr>
<th>Lp.</th>
<td>1</td>
</tr>
<tr>
<th>Imi</th>
<td>Piotr</td>
</tr>
</table>
Tytu tabeli
Czsto niezbdne jest doczenie do tabeli jej tytuu. Tytu powinien zawiera krtki opis
wyjaniajcy jej tre. Tytu reprezentowany jest przez znacznik <caption>, ktry naley umieci
zaraz za znacznikiem <table>, a przed znacznikami <tr>.
<caption>Tytu</caption>
<tr>
<th>Lp.</th><td>1</td>
</tr>
<tr>
<th>Imi</th><td>Piotr</td>
</tr>
</table>
Scalanie wierszy
Czasem istnieje konieczno scalenia kilku wierszy w jednej komrce. W tym celu naley uy
atrybutu rowspan, podajc ile wierszy ma zosta poczonych.
Przykad:
<table border="1" cellpadding="2"cellspacing="2">
<tr>
<th rowspan="2" >Nagowek (scalone 2 wiersze)</th>
<td>dane</td>
<td rowspan="3" > dane (scalone 3 wiersze)</td>
Piotr Bubacz Modu 1
Strona 1-13
<td> dane</td>
</tr>
<tr>
<td>dane</td>
<td>dane</td>
</tr>
<tr>
<th>Nagowek</th>
<td>dane</td>
<td>dane</td>
</tr>
</table>
Scalanie kolumn
Podobnie jak wiersze, mona rwnie scali kolumny. Suy do tego atrybut colspan.
<table border="2" cellpadding="2" cellspacing="2">
<tr>
<th>Nagwek</th>
<th>Nagowek</th>
<th colspan="2">Nagwek (scalne 2 kolumny)</th>
</tr>
<tr>
<td>dane</td>
<td colspan="2"> dane (scalone 2 kolumny)</td>
<td>dane</td>
</tr>
<tr>
<td colspan="2">dane (scalone 2 kolumny)</td>
<td>dane</td>
<td>dane</td>
</tr>
</table>
Moliwe jest rwnie jednoczesne scalanie wierszy i kolumn:
<table border="2" cellpadding="2" cellspacing="2">
<tr>
<th>Nagwek</th>
<th>Nagowek</th>
<th>Nagwek</th>
<th>Nagwek</th>
<th>Nagwek</th>
<th>Nagwek</th>
</tr>
<tr>
<td>dane</td>
<td colspan="2">dane (scalone 2 kolumny)</td>
<td rowspan="2" colspan="2">dane (scalone 2 wiersze, 2 kolumny)</td>
<td>dane</td>
</tr>
<tr>
<td>dane</td>
<td>dane</td>
<td>dane</td>
<td>dane</td>
</tr>
</table>
Piotr Bubacz Modu 1
Strona 1-14

Rys. 2 Przykad tabeli
Formularze
Formularz umoliwia pobranie od uytkownika pewnych informacji. Zawiera przycisk umoliwiajcy
wysanie danych do okrelonego pliku/aplikacji na serwerze. Przykady wykorzystania formularza
to:
podanie danych osobowych i adresu email w celu zapisania si na forum
rezerwacja miejsca wakacji w biurze podry
podawanie danych do przelewu w bankowoci elektronicznej
zakup okrelonych towarw i usug w sklepie internetowym
Formularze s relatywnie proste do tworzenia, przynajmniej z pozycji kodu HTML. Najwikszy
problem stanowi przetworzenie wpisanych danych po stronie serwera tak, aby odpowiaday one
zamierzeniom projektanta i uytkownika.
Formularz zawarty jest w znaczniku <form>. Ma on dwa atrybuty:
method okrela metod, jak zostan wysane dane do serwera. S to metody
protokou http, takie jak GET i POST.
action okrela ciek do miejsca, w ktrym skrypt zostanie przetworzony.
Parametr action moe wskazywa nie tylko ciek na serwerze, ale rwnie w prostych
przypadkach umoliwia przesyanie danych z formularza przy uyciu poczty elektronicznej:
<form method="post" action="mailto:adres@serwer?subject=tytu">
Pola tekstowe
Pola tekstowe s wykorzystywane w wielu przypadkach do pobrania od uytkownika okrelonych,
krtkich fragmentw tekstu, takich jak imi, nazwisko i numeru telefonu. Pole tekstowe jest
tworzone przy wykorzystaniu znacznika input z parametrem type="text".
Przykad:
<form method="post" action="Default.aspx">
Imi: <input type="text" /><br />
Nazwisko: <input type="text" /><br />
Telefon: <input type="text" />
</form>

Rys. 3 Przykad formularz
Naley zauway, e nie ma moliwoci rozrnienia poszczeglnych pl formularz. Do tego celu
su parametry name i id z odpowiednimi wartociami. Wykorzystanie obu parametrw zapewni
Piotr Bubacz Modu 1
Strona 1-15
kompatybilno z wczeniejszymi aplikacjami oraz umoliwi identyfikowanie okrelonych
przestrzeni formularza dla formatowania oraz oprogramowania.
Imi: <input id="imie" name="imie" type="text" /> <br />
Nazwisko: <input id="nazwisko" name="nazwisko" type="text" /> <br />
Telefon: <input id="telefon" name="telefon"type="text" />
</form>
Kolejnym elementem zwizanym z polem tekstowym jest okrelanie rozmiaru pola za pomoc
atrybutu size oraz okrelanie maksymalnej iloci znakw, jak pole akceptuje za pomoc atrybutu
maxlength.
Pole tekstowe umoliwia rwnie ukrywanie wprowadzanych wanych informacji, takich jak hasa,
zamieniajc atrybut type="text" na type="password":
Haso <input id="haslo" name="haslo" type="password" />

Rys. 4 Pole ukryte
Obszar tekstowy
Obszar tekstowy to miejsce, w ktrym uytkownik strony moe wpisa swoje dodatkowe uwagi.
Obszar ten umoliwia rwnie wielowierszowe wprowadzanie danych. Jest on tworzony przy
pomocy znacznika <textarea> wraz z parametrami rows i cols, okrelajcymi odpowiednio ilo
wierszy i kolumn przeznaczonych do wprowadzania tekstu.
<form method="post" action="Default.aspx">Wpisz swoje uwagi:<br />
<textarea id="komentarz" cols="20" rows="20" > </textarea>
</form>

Rys. 5 Przykad obszaru tekstowego
Pole opcji i pole wyboru
Pole opcji (przecznika) jest polem, w ktrym uytkownik wybiera jedn z dostpnych moliwoci.
W polu stosowany jest znacznik <input> oraz parametr type="radio".
Do grupowania wartoci poszczeglnych opcji wykorzystywany jest parametr name, ktry musi by
wsplny dla wszystkich elementw listy. Parametr checked="checked" umoliwia domylne
zaznaczenie danej opcji.
Podaj swoj pe<br />
<input id="mezczyzna"name="plec" type="radio" /> Mczyzna<br />
<input id="kobieta" name="plec" type="radio" /> Kobieta<br />
<input id="brak" name="plec" type="radio" checked="checked" />
Wol nie podawa<br />
</form>
Piotr Bubacz Modu 1
Strona 1-16

Rys. 6 Przykad pola opcji
Pole wyboru umoliwia dokonanie wyboru kilku opcji jednoczenie, np. zaznaczenie kilku
zainteresowa, czy kilku sposobw odpoczynku. W polu stosowany jest znacznik <input> oraz
parametr type="checkbox".
<input type="checkbox" name="zain" id="elektronika"/>elektronika<br />
<input type="checkbox" name="zain" id="fotografia"/>fotografia<br />
<input type="checkbox" name="zain" id="internet"/>internet<br />
<input type="checkbox" name="zain" id="inwestycje"/>inwestycje<br />
<input type="checkbox" name="zain" id="ksiazki"/>ksiazki<br />
<input type="checkbox" name="zain" id="muzyka"/>muzyka<br />
<input type="checkbox" name="zain" id="sport"/>sport<br />
<input type="checkbox" name="zain" id="polityka"/>polityka
</form>

Rys. 7 Przykad pola wyboru
Lista rozwijana oraz wyboru
Lista rozwijana suy do tworzenia rozwijanych menu, zawierajcych kilka opcji. Uytkownik moe
wybra jedn z nich. Skadnia jest nastpujca:
<select name="nazwa_listy" size="liczba_wywietlanych_pozycji" >
<option> pierwsza pozycja</option>
<option> druga pozycja</option>
<option> trzecia pozycja</option>
...
</select>
Przegldarka tworzy list rozwijan zawierajc poszczeglne elementy zawarte w znaczniku
<option>, parametr value umoliwia rozpoznanie wybranego elementu:
Wybierz ulubion potraw:<br />
<select id="potrawa">
<option value="pierogi">Pierogi</option>
<option value="slatka">Saatka warzywna</option>
<option value="slimaki">limaki</option>
</select>
</form>
Piotr Bubacz Modu 1
Strona 1-17

Rys. 8 Przykad listy rozwijanej

Lista wyboru suy do tworzenia do tworzenia menu, zawierajcych kilka opcji. Moliwe jest
wybranie jednej lub kilku z nich. List ta tworzy si podobnie do listy rozwijanej dodajc atrybut
size="wywietlana wielko listy". wybr wielokrotny moliwy jest po dodaniu atrybutu
multiple="multiple".
<select id="potrawa" size="5" multiple="multiple">
<option value="pierogi">Pierogi</option>
<option value="slatka">Saatka warzywna</option>
<option value="slimaki">limaki</option>
</select>
</form>

Rys. 9 Przykad listy wyboru
Wysyanie informacji
Po wykonaniu formularza naley jeszcze zapewni wysanie jego zawartoci do autora. Sposb
wysania jest okrelony w atrybutach method i action znacznika <form>. Do wysania suy
znacznik input z atrybutem type="submit". Po klikniciu tego przycisku przegldarka wyle
dane (wypenione pola tekstowe, wybrane opcje itp.) do miejsca zdefiniowanego w znaczniku form.
Czsto istnieje potrzeba zresetowania caego formularza, suy do tego znacznik input z
atrybutem type="reset".
<input type="reset" />
<input type="submit" />
</form>

Rys. 10 Przyciski formularza - Reset i Submit
Parametr value w obu przypadkach umoliwia dopasowanie wywietlanego komunikatu na
przyciskach:
<input type="reset" value="Skasuj dane"/>
<input type="submit" value="Wylij"/>
</form>
Piotr Bubacz Modu 1
Strona 1-18
Podsumowanie
W tym rozdziale przedstawione zostay podstawy jzyka HTML. Pokazalimy najwaniejsze
znaczniki, ktre s wykorzystywane do tworzenia stron internetowych.
Uwagi dla studenta
Jeste przygotowany do realizacji laboratorium jeli:
znasz podstawowe znaczniki HTML
wiesz jak tworzy tabel i jak czy wiersze i kolumny
wiesz jak tworzy i przesya formularze internetowe napisane w jzyku HTML
Pamitaj o zapoznaniu si z uwagami i poradami zawartymi w tym module. Upewnij si, e
rozumiesz omawiane w nich zagadnienia. Jeli masz trudnoci ze zrozumieniem tematu zawartego
w uwagach, przeczytaj ponownie informacje z tego rozdziau i zajrzyj do notatek z wykadw.
Dodatkowe rda informacji
1. Bryan Pfaffenberger, Steven M. Schafer, Chuck White, Bill Karow, HTML, XHTML i CSS. Biblia,
Helion, 2005
Ksika zawiera opis najnowszych standardw zwizanych z tworzeniem stron
WWW obowizujcej obecnie specyfikacji HTML, CSS oraz XHTML. Przedstawia
nowoczesne metodologie tworzenia i testowania witryn WWW oraz ich
aktualizowania i modyfikowania.
2. Wempen Faithe, HTML i XHTML Krok po kroku, RM, 2007
Z ksiki nauczysz si nadawa struktur stronom WWW, stosujc tabele, ramki lub
makiety oparte na podziaach. Utworzysz listy wypunktowane i numerowane, aby
poprawi przekaz informacji. Bdziesz wiedzia, jak doda hipercza i paski menu,
aby uatwi nawigacj. Dowiesz si, w jaki sposb umie obrazki, klipy dwikowe i
wideo na stronach WWW. Wprowadzisz kolory, rozmiary czcionek i rne
formatowanie, stosujc znaczniki i kaskadowe arkusze stylw. Zbudujesz
formularze z przyciskami opcji, polami wyboru i rozwijanymi menu.
3. Jennifer Niederst Robbins, HTML i XHTML. Leksykon kieszonkowy, Helion, 2006
W ksice znajdziesz zestawienie znacznikw HTML wraz z atrybutami i ich
dopuszczalnymi wartociami ktre jest niezwykle przydatne kademu
projektantowi witryn WWW. Autor opisuje najnowsze specyfikacje HTML i XHTML,
wskazuje podobiestwa i rnice pomidzy nimi, a take zawiera praktyczne
informacje, dziki ktrym Twoja witryna WWW zostanie zaprojektowana zgodnie z
rekomendacjami W3C.
Piotr Bubacz
Modu 2
Wersja 1
Kaskadowe Arkusze Stylw CSS
Spis treci
Kaskadowe Arkusze Stylw CSS ........................................................................................................ 1
Przykadowe rozwizanie ............................................................................................................. 9
Porady praktyczne ..................................................................................................................... 11
Laboratorium podstawowe ................................................................................................................ 14
Problem 1 (czas realizacji 20 min) .............................................................................................. 14
Laboratorium rozszerzone ................................................................................................................. 21
Zadanie 1 (czas realizacji 45 min) ............................................................................................... 21

Piotr Bubacz Modu 2
ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylw CSS
Strona 2-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce kaskadowych arkuszy
stylw i zalet wynikajcych z ich stosowania. Zobaczysz, w jaki sposb
uywa selektorw i jak utworzy ukad strony wykorzystujc
pozycjonowanie CSS. Dodatkowo nauczysz si, jak zmieni istniejcy
dokument HTML wykorzystujcy formatowanie przy pomocy tabel, aby by
zgodny ze standardem XHTML i przyjazny dla CSS.
Cel moduu
Celem moduu jest przedstawienie moliwoci wykorzystania kaskadowych
arkuszy stylw do okrelenia wygldu dokumentu XHTML, jak rwnie
przedstawienie zasad pracy z arkuszami stylw w Visual Studio.
wiedzia czym s i gdzie warto stosowa kaskadowe arkusze stylw
potrafi tworzy nowe strony przyjazne dla kaskadowych arkuszy
stylw
rozumia potrzeb przystosowania istniejcych dokumentw HTML
do wymaga standardu XHTML
Wymagania wstpne
Przed przystpieniem do pracy z tym moduem powiniene:
zna podstawy jzyka XHTML (patrz: modu Wprowadzenie do
XHTML)
rozumie zasady grupowania elementw przy pomocy znacznikw
<div> i <span>
zna zasady pracy w rodowisku Visual Studio, w szczeglnoci
tworzenia stron internetowych zgodnych z XHTML
Mapa zalenoci moduu
do realizacji tego moduu naley zapozna si z materiaem zawartym
w module Podstawy HTML.

Piotr Bubacz Modu 2
Strona 2-3
Przykadowy problem
Majc ju pewne dowiadczenie z jzykiem HTML, na pewno prbowae okreli ukad elementw
na stronie przy pomocy tabel, a jej wygld przy pomocy znacznikw takich jak <i>, <b> czy
<font>. Stosujc takie podejcie prdzej czy pniej zauwaysz jego oczywiste wady. Przy bardziej
zoonych stronach kod HTML staje si nieczytelny, a prba zmiany stylu lub ukadu elementw
pociga za sob konieczno wprowadzenia poprawek w wielu miejscach w kodzie. Co wicej, jeli
strona, ktr tworzysz, jest tylko jedn z wielu stron w serwisie, to zmiany najprawdopodobniej
trzeba wprowadzi rwnie w pozostaych dokumentach. Rozwizaniem tych problemw moe by
oddzielenie treci dokumentu od jego prezentacji. Niestety jzyk HTML nie wspiera takiej
moliwoci. Do tego celu powszechnie wykorzystuje si inne narzdzie kaskadowe arkusze stylw
lub w skrcie CSS (ang. Cascading Style Sheets).
O ile tworzenie regu CSS nie jest trudne, o tyle nauka efektywnego posugiwania si nim moe
zaj duo wicej czasu, ni w przypadku jzyka HTML. Musisz nie tylko wiedzie, jakie waciwoci
maj poszczeglne elementy HTML, lecz rwnie jak waciwoci te s interpretowane przez
najpopularniejsze przegldarki. Ponadto musisz nauczy si odpowiednio przygotowywa
dokumenty HTML i poprawnie pozycjonowa elementy na stronie.
Kaskadowe arkusze stylw to mechanizm uywany do opisywania wygldu dokumentw HTML.
Wrd gwnych zalet wynikajcych z jego stosowania wymieni mona:
atwiejsze zarzdzanie wygldem dokumentw CSS pozwala grupowa informacje
o wygldzie poszczeglnych elementw strony, jak rwnie wykorzystywa je wielokrotnie,
nawet przez wiele dokumentw.
Mniejszy rozmiar stron stosowanie arkuszy stylw pozwala zmniejszy rozmiar
dokumentw HTML i oglnie ograniczy ilo danych, jakie musi pobra uytkownik, by
wywietli je w przegldarce w przypadku, gdy wiele stron wykorzystuje ten sam arkusz
CSS, jest on pobierany przez przegldark tylko raz.
Oddzielenie treci od wygldu dokumentw dziki CSS mona oddzieli zawarto stron
od ich wygldu, dziki czemu ich tre staje si atwiej dostpna np. dla wyszukiwarek
internetowych lub czytnikw ekranowych, wykorzystywanych przez osoby niewidome.
Reguy CSS
Arkusz CSS stanowi zbir regu, ktre informuj przegldark, jak wywietla okrelone elementy
na stronie. Kada regua skada si z dwch czci: tzw. selektora i definicji, ktr tworzy zbir par
waciwo-warto:
selektor { waciwo: warto[; waciwo: warto[;...n] ] }
Selektor okrela, jakich elementw strony dotyczy regua, definicja za mwi, jakie wartoci
powinny przyj wybrane waciwoci tych elementw, takie jak kolor czy styl tekstu. Przykadowo
nastpujca regua:
h1 { font-family: Arial; font-style: italic; }
okrela, e tekst wewntrz wszystkich elementw h1 na stronie powinien zosta wywietlony
krojem Arial, pismem pochyym.
Rodzaje selektorw
Selektory to jedne z najwaniejszych aspektw CSS. Dziel si one na kilka rodzajw, z ktrych te
najczciej uywane omwimy w kolejnych punktach.
Piotr Bubacz Modu 2
Strona 2-4
Selektor typu
Selektor typu odnosi si do wszystkich elementw okrelonego rodzaju. Przykadowo regua:
h1 { font-weight: bold }
zostanie zastosowana dla wszystkich elementw h1 w dokumencie.
Selektor klasy
Selektor klasy odnosi si do wszystkich elementw o okrelonej wartoci atrybutu class.
Przykadowo regua:
.akapit { font-weight: bold; }
zostanie zastosowana dla elementw dowolnego rodzaju, ktrym przypisano klas akapit, np.:
<p class="akapit"></p>
Selektor ID
Selektor ID dziaa na podobnej zasadzie, co selektor klasy, z tyme wybiera elementy o okrelonej
wartoci atrybutu id. Poniewa warto tego atrybutu jest unikatowa, selektor tego typu zawsze
odnosi si do co najwyej jednego elementu na stronie. Przykadowo regua:
#stopka { font-weight: bold; }
zostanie zastosowana dla elementu dowolnego rodzaju posiadajcego atrybut id="stopka", np.:
<div id="stopka"></div>
czenie selektorw
By precyzyjniej okreli elementy, poszczeglne rodzaje selektorw mona czy ze sob.
Przykadowo regua:
p.akapit { font-weight: bold; }
zostanie zastosowana wycznie dla takich elementw p, ktrym przypisano klas akapit.
Definiowanie stylw dla dokumentu HTML
Reguy moemy definiowa:
bezporednio w dokumencie HTML, w nagwku strony:
<head>

<style type="text/css">
h1 { color: olive; }
p { color: gray; }
</style>
</head>
w dokumencie HTML jako warto atrybutu style wybranych elementw:
<h1 style="color:olive"></h1>
<p style="color:gray"></p>
w zewntrznym pliku CSS wymagane jest wskazanie go przy pomocy elementu link , np.:
<head>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Piotr Bubacz Modu 2
Strona 2-5
Praca z CSS w rodowisku Visual Studio 2008
rodowisko Visual Studio udostpnia wizualny edytor regu CSS (Rys. 2), ktry mona przywoa
wybierajc z menu Format -> New Style.

Rys. 2 Okno New Style, kategoria Font
Najwaniejsze pola w edytorze to:
Selector selektor dla reguy.
Define In miejsce przechowywania reguy, moe by nim nagwek aktualnej strony lub
zewntrzny arkusz stylw.
URL lokalizacja zewntrznego arkusza stylw.
Preview podgld zdefiniowanego formatowania.
Description podgld definicji reguy.
Category lista kategorii, na ktre podzielone zostay waciwoci elementw HTML.
Kategoria Font
W kategorii Font (Rys. 2) znajduj si opcje pozwalajce okreli sposb wywietlania tekstu.
Przykadowe waciwoci:
font-family krj pisma
font-size stopie pisma
color kolor tekstu
Kategoria Block
W kategorii Block (Rys. 3) znajduj si opcje pozwalajce okreli sposb uoenia tekstu wewntrz
elementw blokowych.

Rys. 3 Okno New Style, kategoria Block

Piotr Bubacz Modu 2
Strona 2-6
line-height odlego midzy ssiednimi liniami tekst
vertical-align uoenie tekstu w pionie
text-align uoenie tekstu w poziomie
Kategoria Background
W kategorii Background (Rys. 4) znajduj si opcje pozwalajce okreli wygld ta elementu.

Rys. 4 Okno New Style, kategoria Background
Przykadowe waciwo:
background-color kolor ta
background-image obraz wywietlany w tle
background-repeat powtarzanie obrazu wywietlanego w tle w pionie i/lub w poziomie
Kategoria Border
W kategorii Border (Rys. 5) znajduj si opcje pozwalajce okreli wygld obramowania wok
elementu.

Rys. 5 Okno New Style, kategoria Border
Opcja Same for all umoliwia zastosowanie tych samych ustawie dla wszystkich krawdzi
obramowania. Przykadowe waciwoci:
border-style styl obramowania
border-width grubo obramowania
border-color kolor obramowania

Piotr Bubacz Modu 2
Strona 2-7
Kategoria Box
W kategorii Box (Rys. 6) znajduj si opcje pozwalajce okreli marginesy zewntrzne
i wewntrzne elementw.

Rys. 6 Okno New Style, kategoria Box
Opcja Same for all umoliwia zastosowanie tych samych ustawie dla wszystkich marginesw.
Waciwoci:
padding rozmiar marginesu wewntrznego
margin rozmiar marginesu zewntrznego
Kategoria Position
W kategorii Position (Rys. 7) znajduj si opcje pozwalajce okreli rozmiar i pooenie
elementw.

Rys. 7 Okno New Style, kategoria Position
position rodzaj pozycjonowania (statyczne, wzgldne lub bezwzgldne)
width szeroko elementu
height wysoko elementu
left pooenie lewej krawdzi elementu (zaley od rodzaju pozycjonowania)
top pooenie grnej krawdzi elementu (zaley od rodzaju pozycjonowania)

Piotr Bubacz Modu 2
Strona 2-8
Kategoria Layout
W kategorii Layout (Rys. 8) znajduj si opcje pozwalajce okreli zaawansowane pozycjonowanie
elementw na stronie.

Rys. 8 Okno New Style, kategoria Layout
visibility widoczno elementu
float przyciganie elementu do krawdzi bocznych innych elementw (tzw. pywanie)
clear zakaz moliwoci przycigania innych elementw do krawdzi bocznych elementu
Kategoria List
W kategorii List (Rys. 9) znajduj si opcje pozwalajce okreli wygld list.

Rys. 9 Okno New Style, kategoria List
Waciwoci:
list-style-type rodzaj listy (numerowana lub punktowana)
list-style-image obrazu uywany jako punktor w listach punktowanych
list-style-position pooenie punktora
Podsumowanie
W tym rozdziale przedstawione zostay najwaniejsze pojcia zwizane z kaskadowymi arkuszami
stylw. Dowiedziae si, czym s reguy i jak stosowa je do wybranych elementw strony
wykorzystujc selektory.
Cho do edycji kaskadowych arkuszy stylw wystarczy najprostszy edytor tekstu, Visual Studio
udostpnia duo wygodniejszy, wizualny edytor stylw, wyposaony m.in. w dynamicznie
aktualizowany podgld formatowania i moliwo zarzdzania umiejscowieniem regu.
Piotr Bubacz Modu 2
Strona 2-9
Przykadowe rozwizanie
Przygotowanie dokumentu HTML przyjaznego dla CSS
Zanim bdziemy mogli zdefiniowa wygld elementw na stronie przy pomocy kaskadowych
arkuszy stylw, powinnimy najpierw odpowiednio przygotowa dokument HTML. Wyobramy
sobie, e chcemy przy pomocy HTML i CSS stworzy stron o uoeniu elementw jak na Rys. 10.

Rys. 10 Szkic wygldu strony
Pierwszym problemem, z jakim musimy sobie poradzi, jest podzielenie strony na gwne obszary.
Jeli przyjrzysz si rysunkowi, zauwaysz, e mona wyodrbni dwa gwne elementy, oznaczone
na rysunku pogrubion lini: nagwek strony oraz jej tre. Moemy zdefiniowa je za pomoc
znacznikw <div>. Dodatkowo kademu z nich warto nada atrybut id, aby mona byo
jednoznacznie je identyfikowa. By uatwi pozycjonowanie, moemy doda jeszcze jeden,
dodatkowy znacznik <div>, ktry obejmie ca stron:
<body>
<div id="Strona">
<div id="Naglowek"></div>
<div id="Tresc"></div>
</div>
</body>
Teraz naley przeanalizowa zawarto gwnych elementw. Rozpoczniemy od nagwka. Skada
si on z trzech gwnych elementw: logo, menu oraz obszaru logowania. Postpujc wedug tej
samej zasady, co poprzednio, powinnimy otrzyma:
<div id="Naglowek">
Logo
<div id="Menu">Menu</div>
<div id="ObszarLogowania">Zaloguj</div>
</div>
W analogiczny sposb moemy wyrni trzy obszary, w ktrych prezentowana bdzie tre strony:
<div id="Tresc">
<div id="PierwszyObszarBoczny">Pierwszy obszar boczny</div>
<div id="DrugiObszarBoczny">Drugi obszar boczny</div>
<div id="ObszarRoboczy">Obszar roboczy</div>
</div>
Moemy teraz podejrze tak przygotowany dokument w przegldarce. Jak atwo zauway, na razie
wygldem strona w ogle nie przypomina tej z rysunku. Mimo to prace nad kodem HTML moemy
praktycznie zakoczy.
Podejcie hierarchiczne uatwia nam zarzdzanie wygldem strony. Zmiana waciwoci elementu
nadrzdnego powoduje zmian wszystkich elementw podrzdnych. Podzia hierarchiczny moe
Piotr Bubacz Modu 2
Strona 2-10
wynika z dwch czynnikw, po pierwsze z logicznego podziau strony, po drugie z podziau strony
na elementy podobne.
Definiowanie regu CSS dla dokumentu definiowanie uoenia elementw
W kolejnym kroku powinnimy utworzy arkusz stylw (np. plik Style.css) i doczy go do
dokumentu przy pomocy znacznika <link>. W pliku zdefiniujemy reguy, ktre pozwol wywietli
obok siebie obszary, w ktrych prezentowana jest tre. Aby odwoa si do tych elementw
posuymy si selektorem ID:
#PierwszyObszarBoczny { width:200px; height:300px; float:left; }
#DrugiObszarBoczny { width:200px; height:300px; float:right; }
Zdefiniowalimy rozmiar obu elementw oraz przyciganie elementu do krawdzi bocznych innych
elementw (w tym przypadku elementu nadrzdnego <div id="Tresc">). Moemy teraz
uruchomi stron w przegldarce i zweryfikowa poprawno regu. Obszary boczne zgodnie z
oczekiwaniami wywietlane s przy przeciwlegych krawdziach strony.
Teraz zajmiemy si obszarem roboczym (<div id="ObszarRoboczy">). W pierwszym kroku
sprbujemy okreli jego aktualny zasig. W tym celu zdefiniujemy dla niego kolor ta, dodajc
nastpujc regu CSS:
#ObszarRoboczy { background-color: #EEE; }
Moemy teraz zapisa plik CSS i odwiey stron w przegldarce. Jak zauwaymy, obszar roboczy
jest aktualnie wywietlany na ca szeroko strony. Powinnimy odsun go od lewej i prawej
krawdzi o 200px, aby zrobi miejsce dla obszarw bocznych. W tym celu zastosujemy marginesy.
Dodatkowo wprowadzimy marginesy wewntrzne, aby tre prezentowana w obszarze gwnym
nie zlewaa si z treci wywietlan w pozostaych obszarach. Po zmodyfikowaniu zdefiniowana
wczeniej regua CSS powinna mi nastpujc posta:
#ObszarRoboczy { background-color: #EEE;
padding: 50px 20px;
margin: 0 200px; }
Jeli teraz zapiszemy plik CSS i odwieymy stron w przegldarce, zauwaymy, e obszar gwny
jest wywietlany tak, jak oczekiwalimy.
Definiowanie regu CSS dla dokumentu definiowanie wygldu elementw
Otrzymalimy stron, ktrej elementy s odpowiednio uoone. W kolejnym kroku okrelimy
wygld poszczeglnych elementw. Rozpoczniemy od zdefiniowania wygldu elementu na
najwyszym poziomie hierarchii. Dla treci strony internetowej takim elementem jest znacznik
<body>. Do okrelenia jego waciwoci, w pliku CSS, wykorzystamy selektor typu:
body {
font-family: Verdana;
font-size: 8pt;
color: #000033; }
Okrelimy teraz nie tylko wygld tekstu wywietlanego bezporednio w znaczniku <body>, ale
rwnie wszystkich znacznikw zagniedonych, w tym przypadku wszystkich tekstw na stronie.
Zajmiemy si teraz elementami nagwka.
Okrelimy waciwoci elementu <div id="Menu">. Dla tego elementu okrelimy inny kolor ta
oraz zmniejszymy wywietlany tekst. W pliku CSS dodajemy nastpujc regu:
#Menu {
background-color: #55BBFF;
font-size: 7.5pt; }
Piotr Bubacz Modu 2
Strona 2-11
Dla elementu <div id="ObszarLogowania"> okrelimy wyrwnanie do prawej, inny kolor ta oraz
marginesy wewntrzne. Regua w pliku CSS bdzie miaa posta:
#ObszarLogowania {
text-align: right;
background-color: #C3DBEA;
padding: 5px 10px; }
Jeli teraz zapiszemy plik CSS i odwieymy stron w przegldarce, zauwaymy, e wszystkie
elementy s wywietlane zgodnie ze szkicem strony przedstawionym na Rys. 10. Teraz jedyne co
pozostao, to doda tre do naszej nowej strony.
Porady praktyczne
Uwagi oglne
Pamitaj, e Twoje strony powinny wywietla si poprawnie we wszystkich
najpopularniejszych przegldarkach internetowych, co ze wzgldu na rnice w interpretacji
CSS moe by czasem trudne.
Sprawdzaj zgodno kodu HTML oraz CSS ze standardami przy pomocy walidatorw na
stronach W3C. Jeli Twoja strona spenia wymagania standardw, to umie na niej
informacj o zgodnoci. Moesz w tym celu wykorzysta kod zawarty na stronach
walidatorw W3C.
Staraj si umieszcza w kodzie CSS komentarze. W ten sposb nawet rok po jego napisaniu
bdziesz mg szybko przypomnie sobie, do czego su poszczeglne reguy.
Organizuj arkusze stylw, np. dzielc je na sekcje. Dobra organizacja pliku uatwia jego
modyfikacj i przegldanie w przyszoci.
Jeli w regule okrelasz warto 0, moesz pomin jednostk (np. zamiast 0px moesz
napisa 0).
Stosowanie stylw w dokumentach XHTML
Moliwe jest dobieranie stylw na podstawie atrybutw class i id, jak rwnie
definiowanie ich bezporednio jako warto atrybutu style. Najczciej powiniene
stosowa klasy, poniewa umoliwiaj one wielokrotne wykorzystanie tych samych definicji,
natomiast zdecydowanie powiniene unika stosowania atrybutu style. Jeli chcesz nada
unikatowy styl jakiemu elementowi, skorzystaj z atrybutu id.
Jako warto atrybutu class moesz poda wiele klas, np. <div class="pierwszy
drugi">. Powiniene jednak uwaa, aby wskazane style nie okrelay tych samych
wasnoci, bo rne przegldarki mog odmiennie to zinterpretowa.
W nazwach elementw i klas zawsze uywaj sw okrelajcych ich znaczenie (np.
id="Menu" lub class="ObszarBoczny"), a nie uoenie na stronie lub wygld
(np. id="LewyObszarBoczny" lub class="NiebieskieTo"). W kocu jedn
z najwikszych zalet CSS jest umoliwienie kompletnej zmiany wygldu stron bez potrzeby
modyfikowania dokumentw HTML.
Definiowanie ukadu elementw na stronie
Staraj si nie uywa tabel do ukadania elementw. Stosujc je utrudniasz dostp do treci
i moliwo zmiany wygldu strony w przyszoci.
Ukad elementw na stronie mona zdefiniowa wykorzystujc statyczne pozycjonowanie
lub pywanie. Oba podejcia maj wady. Pywanie jest trudne do opanowania, a
pozycjonowanie ogranicza elastyczno ukadu strony. O wyborze jednego z nich powinny
zdecydowa wymagania wzgldem strony.
Piotr Bubacz Modu 2
Strona 2-12
Okrelanie wielkoci pisma
Wielko pisma moemy okreli m.in. w pikselach, punktach lub firetach (em). Wybr
waciwej jednostki jest trudny. Wybierajc piksele mamy najwiksz kontrol nad wygldem
strony, ale blokujemy moliwo zmiany wielkoci tekstu w przegldarce. Problemu tego nie
mamy, jeli zastosujemy firety, jednak wwczas musimy upewni si, e po zmianie rozmiaru
tekstu w przegldarce strona nadal wyglda tak, jak tego chcemy.
Rozmiar tekstu mona okreli wykorzystujc wartoci symboliczne: xx-small, x-small,
small, medium, large, x-large, xx-large oraz smaller i larger. Ich uycie jest
jednak niepraktyczne, bowiem nie wiemy dokadnie, jak wielko przyjmie tekst
wywietlany w przegldarce.
Skrcona notacja
Tam, gdzie to moliwe, powiniene uywa skrconej notacji CSS oraz grupowa style, np. zamiast:
.styl1 { margin-top: 11px; margin-right: 11px; margin-bottom: 11px;
margin-left: 11px; }
.styl2 { margin-top: 11px; margin-right: 11px; margin-bottom: 11px;
margin-left: 11px; }
powiniene napisa:
.styl1, .styl2 { margin: 11px; }
Uwagi dla studenta
rozumiesz zasad i potrzeb budowania dokumentw XHTML przyjaznych dla CSS
umiesz posugiwa si selektorami
umiesz zmieni istniejcy dokument w jzyku HTML na zgodny z XHTML i przyjazny dla CSS
potrafisz poda przykady przestarzaych znacznikw HTML, ktre mona zastpi przy
pomocy CSS
umiesz zdefiniowa w pliku CSS podstawowe wasnoci zwizane z wygldem i pooeniem
elementu na stronie
umiesz poda przykad zastosowania CSS, jego wady i zalety
wiesz, w jaki sposb mona okreli reguy CSS w Visual Studio 2008
1. Eric A. Meyer, CSS wedug Erica Meyera. Kolejna odsona, Helion, 2005
W ksice autor prezentuje moliwoci CSS na przykadzie rnych projektw
prezentujc krok po kroku ich rozwizanie.
2. Dave Shea, Molly E. Holzschlag, Zen stosowania CSS, Helion, 2006
Jest to ksika autora witryny CSS Zen Garden. Na przykadzie rnych projektw
opisuje on rnorodne aspekty tworzenia stron, m.in. projektowanie, ukad,
typografia czy efekty specjalne.
3. Working with CSS Overview, http://msdn2.microsoft.com/en-us/library/bb398931.aspx
Na stronie opisano moliwoci pracy z CSS w Visual Studio 2008.
4. Cascading Style Sheets, http://www.w3.org/Style/CSS
Piotr Bubacz Modu 2
Strona 2-13
Na stronie znajdziesz wszystkie informacje zwizane ze standardem CSS.
5. CSS Zen Garden, http://www.csszengarden.com
Na stronie znajdziesz przykady zastosowania wielu stylw do jednej strony.
6. CSS Vault, http://cssvault.com
Na stronie znajdziesz przykady zastosowania CSS w rnych projektach.
7. Open Source Web Design, http://www.oswd.org
Na stronie znajdziesz setki gotowych projektw szablonw stron.

Piotr Bubacz Modu 2
Strona 2-14
Laboratorium podstawowe
Problem 1 (czas realizacji 20 min)
Jeste wacicielem niewielkiej firmy komputerowej wykonujcej rnego rodzaju zlecenia. Wanie
dzisiaj przyszed do Ciebie Twj dobry klient i poprosi o przygotowanie dla niego strony
internetowej jego firmy zajmujcej si handlem nieruchomociami. Przedstawi Ci swoj koncepcj
ukadu elementw na stronie (Rys. 11) i zaproponowa, aby w oparciu o ni przygotowa szablon
wygldu. Ucieszye si i przyje zlecenie, gdy dodatkowe pienidze s zawsze potrzebne, jednak
po chwili odkrye, e wszyscy Twoi pracownicy s ju oboeni prac na nastpnych kilka dni.
Postanowie zatem sam wykona zadanie.

Pamitaj, e strona musi by zgodna ze standardem XHTML oraz CSS. Powiniene zweryfikowa to
za pomoc walidatorw na stronie W3C.

Zadanie Tok postpowania
1. Utwrz now
stron w Visual
Studio 2008
Otwrz Visual Studio 2008.
Z menu wybierz File -> New -> Web Site.
Z listy Visual Studio installed templates wybierz Empty Web Site.
Z listy Location wybierz File System, a w polu obok okrel lokalizacj dla
pliku w dowolnym miejscu na dysku.
Z listy Language wybierz Visual C#.
Kliknij OK.
2. Dodanie
strony do
projektu.
Utworzenie
gwnych
elementw strony
Wybierz Website -> Add New Item.
Z listy Visual Studio installed templates wybierz HTML Page.
W polu Name wpisz Szablon.htm.
Kliknij OK.
Zmie typ dokumentu z XHTML 1.0 Transitional na XHTML 1.1,
modyfikujc pierwsz lini pliku do postaci:
Zmie tytu strony na Strona firmowa.
Wewntrz znacznika <body> dodaj:
<div id="Strona">
</div>
3. Podzia
gwnych
Wewntrz znacznika zawierajcego nagwek (id="Naglowek") dodaj:
Logo
Piotr Bubacz
ITA-103 Aplikacje internetowe
elementw
Wewntrz
<div id="PierwszyObszarBoczny">
<div id="DrugiObszarBoczny">
<div id="ObszarRoboczy">Obszar
4. Sprawdzenie
wyniku prac
W oknie
5. Dodanie
nowego arkusza
stylw
Wybierz
Z listy
W polu
Kliknij
6. Okrelenie
pozycji
w obszarach
roboczych
Przecz widok strony na
Wybierz
W polu
W grnej czci
a
Z listy
left
Z listy
200
Kliknij
Postpuj podobnie z selektorem
waciwo
7. Okrelenie
podstawowego
wygldu
zawartoci strony
W pliku
<body
Okrel waciwoci
#
Z listy
backgroud
Z listy
Upewnij si, e opcja
Kliknij
Otwrz plik
Style.css
Zobacz ja
8. Okrelenie
wygldu
pozostaych
elementw strony
Przy
nastpujc

Kaskadowe Arkusze Stylw
Strona 2-15
Wewntrz znacznika zawierajcego tre (id="Tresc"
<div id="PierwszyObszarBoczny">Pierwszy obszar
<div id="DrugiObszarBoczny">Drugi obszar boczny
<div id="ObszarRoboczy">Obszar roboczy</div>
W oknie Solution Explorer kliknij prawym przyciskiem myszy plik
Szablon.htm, a nastpnie wybierz View In Browser
Czy w przegldarce internetowej strona wyglda tak
Dlaczego nie?
Z listy Visual Studio installed templates wybierz Style
W polu Name wpisz Style.css.
Kliknij OK.
Przecz widok strony na Design lub Split.
Wybierz Format -> New Style.
W polu Selector wpisz #PierwszyObszarBoczny.
W grnej czci okna z listy Define in wybierz
z listy rozwijanej URL wybierz Style.css.
Z listy Category wybierz Layout, a nastpnie okrel waciwo
left.
Z listy Category wybierz Position, a nastpnie okrel
200 px oraz height: 300 px.
Kliknij OK.
Postpuj podobnie z selektorem #DrugiObszarBoczny
waciwo float na right.
W pliku Style.css standardowo jest ju dodany selektor znacznika
<body>. Kliknij go prawym przyciskiem myszy i wybierz
Okrel waciwoci font-family: Verdana, font
#000033.
Z listy Category wybierz Background, a nastpnie
backgroud-color: white.
Z listy Category wybierz Box, a nastpnie okrel
Upewnij si, e opcja Same for all jest zaznaczona
Kliknij OK.
Otwrz plik Szablon.htm. W oknie Solution Explorer
Style.css i upu go w sekcji nagwka strony za znacznikiem
Zobacz jak zmieni si podgld pliku.
Przy pomocy narzdzi Visual Studio lub w kodzie pliku
nastpujce style:
#Menu: kolor ta: #55BBFF, wielko tekstu: 7.5pt
#ObszarLogowania: wyrwnanie tekstu (waciwo
prawej, kolor ta #C3DBEA, margines wewntrzny
z gry i dou 5px, z lewej i prawej 10px.
#ObszarRoboczy: kolor ta #EEE, margines wewntrzny (
padding) z gry i dou 50px, z lewej i prawej
i dou 0, z lewej i prawej 200px.
Modu 2
id="Tresc") dodaj:
bszar boczny</div>
boczny</div>

kliknij prawym przyciskiem myszy plik
Browser.
wyglda tak, jak na szkicu?
Style Sheet.
wybierz Existing Style Sheet,
okrel waciwo float:
a nastpnie okrel waciwoci width:
DrugiObszarBoczny, tylko zmie
standardowo jest ju dodany selektor znacznika
i wybierz Build Style.
font-size: 8 pt i color:
, a nastpnie okrel waciwo
okrel waciwo margin: 0.
jest zaznaczona.
Explorer chwy myszk plik
za znacznikiem </title>.
Studio lub w kodzie pliku Style.css okrel
7.5pt.
(waciwo text-align): do
wewntrzny (ang. padding)
, margines wewntrzny (ang.
, z lewej i prawej 20px, margines z gry
Piotr Bubacz
9. Sprawdzenie
wygldu strony w
przegldarce
W oknie
Szablon.htm
Strona w przegldarce powinna wyglda podobnie
10. Sprawdzenie
poprawnoci na
stronie W3C
Wejd na stron
dokumentu XHTML
Wejd na stron
11. Dodanie
informacji o
zgodnoci ze
standardami
Wewntrz znacznika zawierajcego obszar roboczy
(id="ObszarRoboczy"
<p>

</p>
12. Zamiana
pooenia
obszarw
bocznych
W pliku
waciwo
W
left
13. Przygotowanie
propozycji wasnej
stylistyki
Przygotuj
strony. Zmie kolory,

Strona 2-16
Szablon.htm i wybierz View In Browser.
Strona w przegldarce powinna wyglda podobnie
Rys. 12 Wygld strony po zastosowaniu stylw
Wejd na stron http://validator.w3.org i zweryfikuj poprawno
dokumentu XHTML.
Czy Twj dokument jest zgodny ze standardem
przeanalizuj bdy i sprbuj je poprawi.
Wejd na stron http://jigsaw.w3.org/css-validator
poprawno arkusza CSS.
Czy Twj arkusz stylw jest zgodny ze standardem CSS
id="ObszarRoboczy") dodaj nastpujcy kod:
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img style="border:0;width:88px;height:31px"
src="http://www.w3.org/Icons/valid-xhtml11
alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss
alt="Poprawny CSS!" /></a>
</p>
W pliku Style.css w regule z selektorem #PierwszyObszarBoczny
W regule z selektorem #DrugiObszarBoczny zmie waciwo
left.
Czy oba obszar zamieniy si miejscami?
wykona, gdyby dokument sformatowany by z uyciem tabel
Przygotuj arkusz CSS zawierajcy Twoj propozycj nowe
strony. Zmie kolory, krj tekstu i inne waciwoci

Modu 2
Strona w przegldarce powinna wyglda podobnie jak na Rys. 12.

i zweryfikuj poprawno
zgodny ze standardem XHTML? Jeli nie, to
validator i zweryfikuj
zgodny ze standardem CSS? Jeli nie, to
href="http://validator.w3.org/check?uri=referer">
style="border:0;width:88px;height:31px"
xhtml11-blue"
validator/">
dth:88px;height:31px"
validator/images/vcss-blue"
PierwszyObszarBoczny zmie
zmie waciwo float na
Czy oba obszar zamieniy si miejscami? Jakie kroki musiaby
wykona, gdyby dokument sformatowany by z uyciem tabel?
CSS zawierajcy Twoj propozycj nowego wygldu
waciwoci.
Piotr Bubacz
Akurat wtedy, kiedy skoczye
ze sob stron przygotowan kilka lat wczeniej i poprosi, aby dostosowa j do obecnych
standardw. Bardzo zaleao mu na zachowaniu obecnego wygl
z moliwoci atwego wprowadzania zmian w przyszoci. Spojrzae w kod i zauwaye, e d
rozmieszczania elementw strony uywane s tabele, za wygld definiowany jest przy uyciu
przestarzaych znacznikw, takich jak
trzeba bdzie przepisa kod od pocztku, ale poniewa klientowi w pot
odmawia, zgodzie si podj zadania.

1. Utwrz now
stron w Visual
Web Developer
2008 Express
Edition
Otwrz Visual
Z menu wybierz
Z listy
Z listy
pliku w
Z
Kliknij
2. Dodanie
oryginalnej strony
do projektu
Dodaj do projektu
->
Otwrz stron klikajc
Solution
3. Sprawdzenie
poprawnoci
dokumentu
rdo dokumentu przekopiuj na stron
w zakadce
4. Utworzenie
szablonu strony
Wybierz
Z listy
W polu
Kliknij
Zamie zawarto pliku na:
<!DOCTYPE html PUBLIC "
<head><title>Lorem ipsum dolor sit amet</title></head>
<body>

Strona 2-17
(czas realizacji 25 min)
skoczye prac nad szablonem, przyszed do Ciebie
przygotowan kilka lat wczeniej i poprosi, aby dostosowa j do obecnych
standardw. Bardzo zaleao mu na zachowaniu obecnego wygldu i ukadu elementw, jednak
moliwoci atwego wprowadzania zmian w przyszoci. Spojrzae w kod i zauwaye, e d
przestarzaych znacznikw, takich jak <b>, <i> czy <font>. Uwiadomie sobie, e praktycznie
trzeba bdzie przepisa kod od pocztku, ale poniewa klientowi w pot
odmawia, zgodzie si podj zadania.
Tok postpowania
Otwrz Visual Web Developer 2008 Express Edition
Z menu wybierz File -> New Web Site.
Z listy Visual Studio installed templates wybierz Empty
Z listy Location wybierz File System, a w polu obok okrel lokalizacj
listy Language wybierz Visual C#.
Kliknij OK.
Dodaj do projektu istniejcy plik StronaGlowna.htm
> Add Existing Item, a nastpnie wska jego lokalizacj.
Otwrz stron klikajc dwukrotnie plik StronaGlowna.htm
Solution Explorer.
rdo dokumentu przekopiuj na stron http://validator.w3.org
w zakadce Validate by Direct Input.
Wcinij przycisk Check.
Ile bdw jest na stronie?
Z listy Doctype wybierz XHTML 1.1 i wcinij przycisk
Ile bdw jest wywietlanych teraz?
Z listy Visual Studio installed templates wybierz HTML
W polu Name wpisz Szablon.htm.
Kliknij OK.
Zamie zawarto pliku na:
<body>
<div id="Strona">
<div id="Naglowek">
<h1></h1>
<h2></h2>
</div>
<div id="Tresc">
<div id="Obszar1">
<div class="Ramka"></div>
<div class="Ramka Ostatnia"></div>
</div>
<div id="Obszar2"></div>
Modu 2
, przyszed do Ciebie kolejny klient. Przynis
przygotowan kilka lat wczeniej i poprosi, aby dostosowa j do obecnych
du i ukadu elementw, jednak
moliwoci atwego wprowadzania zmian w przyszoci. Spojrzae w kod i zauwaye, e do
. Uwiadomie sobie, e praktycznie
trzeba bdzie przepisa kod od pocztku, ale poniewa klientowi w potrzebie nigdy si nie
Edition.
Empty Web Site.
w polu obok okrel lokalizacj
StronaGlowna.htm. Wybierz Website
lokalizacj.
StronaGlowna.htm w oknie
http://validator.w3.org do pola
i wcinij przycisk Revalidate.
HTML Page.
//W3C//DTD XHTML 1.1//EN"
Piotr Bubacz

</body>
</html>
Przekopiuj tre
szablonu
Do wntrza znacznika
tabeli
Do wntrza znacznika
Do wntrza znacznika
wiersza tabeli.
Tekst zapisany stylem pogrubionym umie wewntrz znacznikw
<h3>
Reszt tekstu umie wewntrz znacznikw
Wewntrz znacznika o
<h3>
<img
5. Dodanie
nowego arkusza
stylw
Wybierz
Z listy
W polu
Kliknij
6. Okrelenie
podstawowego
uoenia strony
Do pliku
#Obszar1 { float: left;
#Obszar2 { float: right; width: 200px; }
#Strona { width: 620px; }
#Tresc { float: left;
.Ramka { float: left; width: 200px; }
7. Sprawdzenie
wygldu strony w
przegldarce
Otwrz plik
Style.css
W oknie
Szablon.htm
projektowana strona.
8. Okrelenie
wygldu strony
style dla wymienionych
Dla
Dla

Strona 2-18
<div id="ObszarGlowny"></div>
<div id="Obszar3">
<div class="Ramka Ostatnia"></div>
</div>
</div>
<div id="Stopka"></div>
</div>
</body>
</html>
Zauwa, e zosta zmieniony standardowy typ dokumentu
z XHTML 1.0 Transitional na XHTML 1.1.
Przekopiuj tre z pliku StronaGlowna.htm do nowo utworzonego
szablonu na podstawie wskazwek poniej.
Do wntrza znacznika <h1> przekopiuj tekst z pierwszego wiersza
tabeli.
Do wntrza znacznika <h2> przekopiuj tekst z drugiego wiersza tabeli.
Do wntrza znacznika o id="Stopka" przekopiuj tekst
wiersza tabeli.
<h3>.
Reszt tekstu umie wewntrz znacznikw <p>.
Wewntrz znacznika o id="ObszarGlowny", pomidzy znacznikami
<h3> i <p>, dodaj nastpujcy kod:
<img src="Pictures/WebPage.png" alt="Web page" />
Z listy Visual Studio installed templates wybierz Style
Kliknij OK.
Do pliku Style.css dodaj nastpujce reguy:
#Obszar1 { float: left; width: 620px; }
#Obszar2 { float: right; width: 200px; }
#Strona { width: 620px; }
#Tresc { float: left; width: 620px; }
.Ramka { float: left; width: 200px; }
Otwrz plik Szablon.htm. W oknie Solution Explorer
Style.css i upu go w sekcji nagwka strony za znacznikiem
Szablon.htm i wybierz View In Browser. Zobacz jak wyglda
style dla wymienionych niej elementw.
Dla elementu body:
Kolor ta: #708090
Kolor czcionki: #F5F5F5
Dla elementw h1:
Rodzin fontw: Arial, Helvetica, sans-serif
Margines grny: 0
Wyrwnanie: wyrodkowane
Modu 2
, e zosta zmieniony standardowy typ dokumentu
do nowo utworzonego
ekst z pierwszego wiersza
przekopiuj tekst z drugiego wiersza tabeli.
przekopiuj tekst z ostatniego

, pomidzy znacznikami
src="Pictures/WebPage.png" alt="Web page" />
Style Sheet.
Explorer chwy myszk plik
za znacznikiem </title>.
Zobacz jak wyglda
Przy pomocy narzdzi Visual Studio lub w kodzie pliku Style.css okrel
Piotr Bubacz Modu 2
Strona 2-19
Dla elementw h2:
Wielko tekstu: 1em
Styl tekstu: kursywa
Margines: 0
Dla elementw h3:
Wielko fontw: 1em
Styl fontw: pogubienie
Margines: 0
Dla elementw img:
Pywanie: do lewej
Margines: 10px 10px 10px 0
Szeroko: 172px
Dla elementw p:
Margines: 0
Dla elementu o id="Obszar2" dodaj:
Margines grny: 10px
Dla elementu o id="Strona" dodaj:
Margines lewy: auto
Margines prawy: auto
Dla elementu o id="Tresc" dodaj:
Margines grny i dolny: 10px
Margines prawy i lewy: 0
Dla elementu o id=" Obszar3" oraz id="ObszarGlowny":
Pywanie: do lewej
Margines grny: 10px
Szeroko: 410px
Dla elementu o id="Stopka" dodaj:
Styl fontw: pogubienie
Wyrwnanie: wyrodkowane
Dla elementw klasy Ramka dodaj:
Margines prawy: 10px
Dla elementw klasy Ostatnia:
Margines prawy: 0
Dla elementw klasy Ikona:
Obramowanie: 0
Szeroko: 88px
Wysoko: 31px
9. Sprawdzenie
wygldu strony w
przegldarce
Szablon.htm i wybierz View In Browser. Zobacz jak teraz wyglda
Piotr Bubacz
Strona powinna wyglda podobnie
10. Sprawdzenie
poprawnoci na
stronie W3C
Wejd na stron
dokumentu XHTML.
Wejd na stron
11. Dodanie
informacji o
zgodnoci ze
standardem
Wewntrz znacznika
<p>

</p>
12. Przygotowanie
propozycji wasnej
stylistyki
Przygotuj arkusz CSS zawierajcy Twoj propozycj nowego wygldu
strony. Zmie kolory, krj tekstu i inne waciwoci.

Strona 2-20
Strona powinna wyglda podobnie do strony StronaGlowna.htm
Wejd na stron http://validator.w3.org i zweryfikuj poprawno
dokumentu XHTML.
Czy Twj dokument jest zgodny ze standardem
Wejd na stron http://jigsaw.w3.org/css-validator
poprawno arkusza CSS.
Czy Twj arkusz stylw jest zgodny ze standardem
Wewntrz znacznika o id="Stopka" dodaj nastpujcy kod:
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img class="Ikona"
src="http://www.w3.org/Icons/valid-xhtml11
alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/">
<img class="Ikona"
src="http://jigsaw.w3.org/css-validator/images/vcss
alt="Poprawny CSS!" /></a>
</p>

Modu 2
StronaGlowna.htm.
i zweryfikuj poprawno
zgodny ze standardem XHTML? Jeli nie, to
validator i zweryfikuj
zgodny ze standardem CSS? Jeli nie, to
nastpujcy kod:
href="http://validator.w3.org/check?uri=referer">
xhtml11-blue"
validator/">
validator/images/vcss-blue"
Piotr Bubacz Modu 2
Strona 2-21
Laboratorium rozszerzone
Zadanie 1 (czas realizacji 45 min)
Przygotowae dla klienta stron internetow z wykorzystaniem XHTML i CSS. Ten bardzo si
ucieszy, e jest ona zgodna ze standardami i mona atwo wprowadza w niej modyfikacje,
a poniewa zblia si rocznica powstania jego firmy, zaproponowa, aby z tej okazji przygotowa
propozycj nowego ukadu oraz wygldu strony. Poniewa nie masz duego dowiadczenia
w dziedzinie projektowania, postanowie poszuka inspiracji na jednej z witryn oferujcych
gotowe rozwizania. Z pomoc wyszukiwarki trafie na stron Open Source Web Design
(http://www.oswd.org), oferujc darmowe szablony. Sprbuj zaadoptowa style z ktrego
z projektw do strony przygotowanej w poprzednim zadaniu.
Spka usugowo-handlowa Kowalski-Sale posiada witryn internetow wykonan 4 lata temu.
Firma si rozwija i w zwizku z tym chciaaby odwiey wizerunek oraz rozszerzy informacje na
swojej stronie. Niestety nie jest to atwe, gdy do zdefiniowania wygldu i uoenia elementw
zostay uyte tabele i przestarzae znaczniki. Przeanalizuj dokumenty zawarte w archiwum
Kowalski-Sale.zip i opracuj now wersj strony zgodn ze standardami XHTML i CSS. Przygotuj co
najmniej dwie rne wersje ukadu i wygldu strony.
Starasz si o wietnie patn prac w duej firmie tworzcej aplikacje internetowe. Jeste jednym
z kilku kandydatw, ktrzy przeszli do drugiej tury rozmw. Twj przyszy pracodawca postanowi
sprawdzi Twoje umiejtnoci posugiwania si kaskadowymi arkuszami stylw, proszc Ci
o przygotowanie pliku CSS dla strony gwnej witryny CSS Zen Garden (http://csszengarden.com).
Podpowied: w serwisie znajduj si przykadowe pliki CSS przygotowane przez innych
uytkownikw. Zobacz, jak zosta w nich zdefiniowany wygld strony gwnej. Pamitaj, e w firmie
dziaa system antyplagiatowy!
Jeste niezalenym projektantem stron internetowych. Twoim nowym zleceniem jest
przygotowanie profesjonalnie wygldajcej galerii zdj. Twj klient okreli nastpujce
wymagania:
Strona powinna by zgodna ze standardem XHTML 1.1 oraz CSS 2.1.
Wygld strony musi by zdefiniowany w zewntrznym pliku CSS.
Na gwnej stronie galerii ma by wywietlana lista miniatur zdj wraz z odnonikami do
zdjcia. Kada miniatura musi by umieszczona w wystylizowanej w CSS ramce. Ilo miniatur
w wierszu ma by zalena od szerokoci okna przegldarki.
Jako zawarto galerii wykorzystaj wybrane przez siebie zdjcia umieszczone w serwisie Live Spaces
(http://www.spaces.live.com).
Piotr Bubacz
Modu 3
Wersja 1
Podstawy JavaScript
Spis treci
Podstawy JavaScript ............................................................................................................................. 1

Piotr Bubacz Modu 3
ITA-103 Aplikacje Internetowe Podstawy JavaScript
Strona 3-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce podstaw jzyka JavaScript.
Nauczysz si tworzy kod dziaajcy po stronie klienta w przegldarce.
Poznasz sposoby sprawdzania poprawnoci wprowadzanych informacji
przez uytkownika.
Cel moduu
Celem moduu jest przedstawienie moliwoci wykorzystania jzyka
JavaScript do tworzenia interaktywnych aplikacji dziaajcych po stronie
klienta, jak rwnie przedstawienie moliwoci pracy z tym jzykiem
w Visual Studio 2008.
wiedzia jak tworzy interaktywne aplikacje dziaajce po stronie
klienta w przegldarce
potrafi pisa aplikacj w jzyku JavaScript
potrafi pracowa z jzykiem JavaScript w Visual Studio 2008
Wymagania wstpne
zna podstawy jzyka XHTML (patrz: modu Wprowadzenie do
XHTML)
tworzenia stron internetowych zgodnych z XHTML
zna podstawy definiowania wygldu aplikacji w oparciu o style
kaskadowe CSS
Mapa zalenoci moduu
w module Wprowadzenie do XHTML oraz Kaskadowe Arkusze Stylw CSS.

Piotr Bubacz Modu 3
Strona 3-3
Przykadowy problem
Majc pewne dowiadczenie w tworzeniu stron internetowych zgodnych ze standardem XHTML,
ktrych wygld definiujemy za pomoc arkusza stylw CSS kolejnym krokiem jest ch
umieszczenia elementw interaktywnych na stronie. Moemy wykorzysta np. technologi Flash
czy Silverlight, jednak, nie jest to proste zadanie. Potrzebujemy prostego jzyka, ktry umoliwia
tworzenie pewnej interakcji z uytkownikiem po stronie klienta w przegldarce. Umoliwi
sprawdzenie poprawnoci wpisywanych danych do formularza czy uatrakcyjni Twoj stron
poprzez rozwijane elementy np. menu. Do tego celu powszechnie wykorzystuje si jzyk JavaScript.
JavaScript jest skryptowym, interpretowanym jzykiem o skadni podobnej do jzyka C. Aplikacje
napisane w tym jzyku s wykonywane po stronie klienta. Zalet tego rozwizania jest
natychmiastowe dziaanie, dziki czemu strony wydaj si funkcjonowa szybciej. Moliwe jest
rwnie osiganie pewnych dodatkowych funkcjonalnoci od wywietlania okien dialogowych po
zaawansowane aplikacje AJAX.
Umieszczanie kodu JavaScript
Kod aplikacji moemy umieszcza w stronie lub w zewntrznym pliku. Moemy rwnie odwoywa
si do wielu plikw rwnoczenie, co uatwia nam tworzenie i korzystanie z bibliotek funkcji.
Umieszczanie kodu JavaScript na stronie
Kod aplikacji na stronie HTML naley umieci w znacznikach scripts:
<script type="text/javascript">
// Tutaj umieszczamy kod aplikacji
</script>
Na stronie moemy umieci wicej ni jeden blok scripts praktycznie w dowolnym miejscu,
najczciej dla atwego odnajdowania kodu umieszczany on jest w nagwku pliku znaczniku
head. Jeli jednak skrypt tworzy dynamiczn zawarto naley umieci go w miejscu, w ktrym ta
zawarto ma si pojawi.
Umieszczanie kodu JavaScript w zewntrznych repozytoriach
Tworzc aplikacje w jzyku JavaScript moemy budowa bibliotek funkcji lub korzysta z innych
rozbudowanych bibliotek. Repozytorium jest umieszczane w zewntrznych plikach tekstowych,
najczciej z rozszerzeniem js. Doczmy je do aplikacji podobnie jak skrypt podajc w waciwoci
src ciek dostpu do pliku.
<script type="text/javascript" src="biblioteka.js"></script>
Przegldarka po napotkaniu takiego znacznika zatrzyma wykonywanie strony a do zaadowania
zewntrznego pliku, dlatego najlepiej jest pododawa tak informacj w nagwku strony.
Obsuga wejcia i wyjcia
W przypadku aplikacji internetowych jednym z najwaniejszych elementw jest wywietlanie
i pobieranie informacji. W tym wzgldzie jzyk JavaScript udostpnia kilka moliwoci poczwszy od
pisania na stronie, poprzez okna dialogowe, a po wywietlanie kodu HTML w dowolnym
elemencie.
Pisanie na stronie
Moliwe jest umieszczenie dowolnego napisu na stronie. W tym celu wykorzystujemy polecenie:
document.writeln(napis)
Piotr Bubacz Modu 3
Strona 3-4
gdzie napis jest cigiem znakw wywietlonym na stronie. To polecenie powinno by wykorzystane
jedynie podczas tworzenie strony. Uycie tego polecenie podczas dziaania strony spowoduje
w wikszoci przegldarek usunicie strony i wypisanie jedynie podanego cigu znakw.
Przykadowy kod wykorzystujcy to polecenie:
document.writeln("Witaj wiecie");
</script>
Podczas renderowania strony w przegldarce napis pojawi si dokadnie w miejscu jego uycia.
Okna dialogowe
Kolejn moliwoci wywietlania komunikatw s okna dialogowe. Jeli wywietlimy okno
dialogowe aplikacja zatrzyma wykonanie skryptu a do momentu kiedy uytkownik kliknie OK.
Przykad uycia:
alert("Witaj wiecie");
</script>
Uycie tej metody powinnimy ograniczy do niezbdnego minimum. Wyskakujce okna dialogowe
s raczej negatywnie odbierane przez uytkownikw.
Wywietlanie kodu HTML w dowolnym elemencie
Kolejn moliwoci jest dynamiczne wywietlanie kodu HTML w dowolnym elemencie na stronie.
Kady element na stronie moe posiada waciwo ID jednoznacznie go identyfikujc.
Wykorzystujemy j nie tylko przy definiowaniu stylw css, ale rwnie przy odwoywaniu si do
elementu w jzyku JavaScript. Przy pomocy konstrukcji:
document.getElementById(idElementu)
moemy jednoznacznie odwoa si do elementu o id=idElementu. Nastpnie moemy odwoywa
si do waciwoci takiego elementu. Najpopularniejsze waciwoci to:
innerHTML umoliwia okrelenie kodu HTML ktry zostanie umieszczony w elemencie
innerText umoliwia okrelenie cigu znakw ktry zostanie umieszczony w elemencie
className umoliwia okrelenie klasy CSS uytej do prezentacji elementu.
Przykad uycia:
<head>
<title>Test</title>
<style type="text/css">
.wyroznienieCzerwone { color: Red; font-weight: 600; }
</style>
</head>
<body>
<div id="nazwa"></div>
document.getElementById("nazwa").innerHTML = "Witaj wiecie";
document.getElementById("nazwa").className = "wyroznienieCzerwone";
</script>
</body>
</html>
Zawarto elementu, w tym przypadku div o id="nazwa" moe zosta zmieniona w momencie
adowania strony.
Piotr Bubacz Modu 3
Strona 3-5
Pobieranie informacji od uytkownika
Najprostsz metod komunikacji jest wcinicie przycisku lub innego elementu na stronie. Kady
element na stronie umoliwia obsug zdarzenia kliknicia za pomoc waciwoci onclick.
Podajemy w niej jako parametr nazw funkcji ktra zostanie wywoana. Zmieniajc zawarto body
z powyszego przykadu otrzymujemy:
<div id="nazwa" onclick="zmien()"></div>
document.getElementById("nazwa").innerHTML = "Witaj wiecie";
function zmien() {
document.getElementById("nazwa").innerHTML = "Witaj wany wiecie!";
document.getElementById("nazwa").className = "wyroznienieCzerwone"; }
</script>
Po klikniciu na napis Witaj wiecie pojawia si na czerwono napis Witaj wany wiecie. Kod
umieszczony w znacznikach jest wykonywany od razu, natomiast kod umieszczony w funkcji
dopiero po jej wywoaniu po klikniciu na aktywn zawarto.
Kolejn moliwoci pobierania informacji od uytkownika s pola tekstowe. Fragment strony
umoliwiajcy wywietlenie w miejscu div id="wynik" informacji wpisanej w kontrolce input o
id="dane".
<input id="dane" type="text" />
<input type="button" value="Wywietl" onclick="Wyswietl()" />
<div id="wynik" ></div>
function Wyswietl() {
document.getElementById("wynik").innerHTML = "Wpisae " +
document.getElementById("dane").value; }
</script>
Jak wynika z powyszego przykadu konstrukcja document.getElementById suy nie tylko do
okrelania waciwoci ale rwnie do ich pobierania.
Inn moliwoci jest przekazanie do funkcji formularza i odwoywanie si do elementw przy
pomocy waciwoci value. W przypadku formularza przypisanie powysze bdzie miao posta:
document.getElementById("wynik").innerHTML= "Wpisae " + form.imie.value ;
Zdarzenia w JavaScript
W poprzednim rozdziale wprowadzilimy pojcie obsugi zdarze w JavaScript. Zdarzenie to inaczej
zajcie jakiej sytuacji np. kliknicie myszk, przesuwanie kursora myszki nad obiektem lub
wpisywanie treci do kontrolki. Metoda obsugi zdarzenia to w jzyku JavaScript funkcja, ktra jest
wywoywana w momencie wystpienia okrelonego zdarzenia. List najwaniejszych zdarze jakie
s moliwe do obsuenia w tym jzyku przedstawia Tab. 1.
Tab. 1 Lista najwaniejszych zdarze w jzyku JavaScript
Zdarzenie Opis
onChange Zawarto elementu ulega zmianie.
onClick Uytkownik klikn na tym elemencie.
onDblClick Uytkownik klikn dwukrotnie na tym elemencie.
onFocus Uytkownik wybra dany element.
onKeyDown Uytkownik nacisn klawisz.
onKeyPress Uytkownik nacisn lub zwolni klawisz.
Piotr Bubacz Modu 3
Strona 3-6
onKeyUp Uytkownik zwolni klawisz.
onMouseDown Uytkownik wcisn przycisk myszki.
onMouseOut Uytkownik przesun kursor myszki poza element.
onMouseOver Uytkownik przesun kursor myszki poza element.
onSubmit Uytkownik wcisn przycisk wysyajcy dane z formularza.

Przepisywanie treci z jednej kontrolki do drugiej mona rwnie obsuy za pomoc zdarzenia
onKeyUp:
<input id="dane" type="text" onKeyUp="Wyswietl()" />
<div id="wynik" ></div>
function Wyswietl() {
document.getElementById("wynik").innerHTML = "Wpisae " +
document.getElementById("dane").value; }
</script>
Co ciekawe nie trzeba nic zmienia w funkcji Wyswietl.
Zmienne
Jzyk JavaScript nie jest jzykiem silnie typowanym, co znaczy, e nie musimy przejmowa si
typem zmiennych. Moemy przypisa do zmiennej dan dowolnego typu, a nastpnie poprzez
ponowne przypisanie zmieni nie tylko zawarto, ale rwnie typ przechowywanej informacji, co
nie jest polecane, bo w czasie wykonywania aplikacji nie wiadomo jakiego typu jest dana zmienna.
Nazwa zmiennej nie moe by sowem zarezerwowanym, zaczyna si od liczby lub symbolu innego
ni $ lub _. Naley rwnie unika nazw zmiennych, ktre s takie same jak nazwy elementw
HTML.
Zmiennymi mog by w jzyku JavaScript rwnie funkcje. Moliwe jest nastpujce przypisanie:
var mojaFunkcja = function() {
return "Jestem sobie funkcj!"; }
Po zdefiniowaniu takiej funkcji moe ona by przekazana jako argument do innej funkcji lub
przypisana do innej zmiennej tak, jak cig znakw, tablica czy inny obiekt JavaScript. Oglnie
funkcje uyte bez nawiasw s traktowane jak zmienne: mog by przekazywane do innych funkcji
i mona do nich przypisa dowolne wartoci. Uycie nawiasw wywouje dziaanie funkcji
i przekazuje warto zwrotn.
Zmienne mog by deklarowane ze sowem kluczowym var lub bez niego. W przypadku, kiedy
uyjemy tego sowa zmienne s widoczne tylko wewntrz funkcji w ktrej s zdefiniowane. Jeli
zadeklarujemy (przypisujc po raz pierwszy warto) jak zmienna bez tego sowa kluczowego, to
zmienna ma zasig globalny.

Piotr Bubacz Modu 3
Strona 3-7
Operatory
Operatory arytmetyczne
Operatory arytmetyczne zostay przedstawione w Tab. 2.
Tab. 2 Operatory arytmetyczne w JavaScript
Operator Opis
+ Dodawanie rwnie konkatenacja cigw znakw
- Odejmowanie
* Mnoenie
/ Dzielenie
% Reszta z dzielenia
++ Inkrementacja przed lub po
-- Dekrementacja przed lub po

Operatory inkrementacji i dekrementacji zachowuj si podobnie jak w jzyku C. Jeli wystpuj
przed zmienn to operacja nastpuje natychmiast, jeli po zmiennej, to operacja nastpuje po caej
linii kodu. Przykad:
var x = 1;
var y = x++; // y=1, x=2
var z = ++x; // z=3, x=3
Operatory logiczne
Operatory logiczne zostay przedstawione w Tab. 3.
Tab. 3 Operatory logiczne
Operator Opis
= Przypisania x=5; // przypisuje 5 do zmiennej x
== Rwnoci, czy x==5?
=== Identycznoci, x===5 czy x ma warto 5 i czy jest liczb?
!= Nie rwne
!== Nie identyczne
! Negacja
|| Lub (OR)
&& I (AND)
< Mniejsze ni
<= Mniejsze ni lub rwne
> Wiksze ni
>= Wiksze ni lub rwne

Piotr Bubacz Modu 3
Strona 3-8
Jzyk JavaScript umoliwia porwnanie nie tylko rwnoci (==) ale rwnie identycznoci (===). Przy
porwnaniu rwnoci porwnanie jest dokonywane bez sprawdzania typu, zatem 5=="5". Przy
sprawdzaniu identycznoci sprawdzana jest nie tylko warto, ale i typ zmiennych.
Sterowanie
W kadym jzyku programowania instrukcje sterujce okrelaj kolejno wykonywania oblicze.
Instrukcja warunkowa if
Instrukcj if stosuje si przy podejmowaniu decyzji. Formalnie moemy j zapisa jako:
if (wyrazenie)
instrukcja_1
else
instrukcja_2
Jeli wyraenie wyrazenie jest spenione, to wykonywana jest instrukcja_1 w przeciwnym
przypadku wykonywana jest instrukcja_2.
Instrukcja warunkowa switch
Instrukcja switch suy do podejmowania decyzji wielowariantowych, w ktrych sprawdzana si,
czy warto pewnego wyraenia pasuje do jednej z kilku cakowitych staych wartoci, jeli tak, to
przy pomocy instrukcji break nastpuje wyjcie z porwnania. Formalnie moemy j zapisa jako:
switch (wyrazenie) {
case wyrazenie_stale_1: instrukcja_1; break;
case wyrazenie_stale_2: instrukcja_2 ; break;
default: instrukcja_3;
}
Instrukcja nastpujca po sowie default (w tym przypadku instrukcja_3) zostanie wykonana,
jeli wyraenie nie spenio adnego z wyrae staych.
Ptle
Ptle umoliwiaj powtrzenie pewnych instrukcji dopki nie zostanie speniony okrelony
warunek.
Jedn z ptli dostpnych w jzyku JavaScript jest ptla for. Formalnie moemy j zapisa jako:
for (stanPoczatkowy; warunekZakonczenia; zmiany)
lista_instrukcji
Na pocztku zostanie ustalony stan pocztkowy zdefiniowany w stanPoczatkowy. Nastpnie
ptla bdzie wykonywana a do spenienia warunku okrelonego w warunekZakonczenia. Przy
kadej iteracji ptli bd wykonywane operacje umieszczone w zmiany.
Bardzo pomocn ptl jest ptla for/in. Ptla ta umoliwia przegldanie kolekcji obiektw jest
podobna do ptli foreach w jzyku C#. Formalnie moemy j zapisa jako:
for (var element in kolekcja)
lista_instrukcji
gdzie kolekcja jest kolekcj obiektw, a element jest poszczeglnym (kolejnym) elementem w
kolekcji podczas jej przegldania.
Kolejn ptl jest ptla while. Umoliwia ona wykonywanie cigu instrukcji a do spenienia
okrelonego warunku sprawdzanego na pocztku dziaania ptli. Formalnie moemy j zapisa jako:
while (warunekKoncowy)
lista_instrukcji
Poniewa warunek sprawdzany jest na pocztku ptla ta moe si nie wykona ani razu.
Piotr Bubacz Modu 3
Strona 3-9
Ptl podobn jest ptla do-while. W tej ptli najpierw nastpuje przetwarzanie a pniej
sprawdzenie warunku. Formalnie moemy j zapisa jako:
do {
lista_instrukcji }
while (warunekKoncowy);
Praca z JavaScript w Visual Studio 2008
Nowoci wprowadzonymi do Visual Studio w wersji 2008 s IntelliSense i debugowanie dla jzyka
JavaScript.
InteliSens to automatyczne, kontekstowe uzupenianie podpowiadanie kodu i konstrukcji
jzykowych dostpne m.in. w VisualStudio. Dotychczas ta technologia nie wspieraa jzyka
JavaScript. Teraz mamy moliwo podejrzenia listy moliwych polece, jak rwnie argumentw
funkcji (Rys. 2).

Rys. 2 Przykad uycia technologii IntelliSense w VisualStudio dla jzyka JavaScript
Visual Studio umoliwia atwe debugowanie aplikacji JavaScript. Moemy w dowolnym miejscu w
kodzie ustawi punkt przerwania (breakpoint) i uruchamia aplikacj krok po kroku. Moliwe jest
rwnie, w oknie Watch, przegldanie i edycja waciwoci dowolnych zmiennych i obiektw ().

Rys. 3 Przykad przerwania wykonania aplikacji oraz podgld obiektu form
Piotr Bubacz Modu 3
Strona 3-10
Szczegowe informacje o moliwociach pracy z IntelliSense i debugowaniem w Visual Studio
moemy znale na blogu Scott Guthrie umieszczonego w dodatkowych rdach informacji.
Podsumowanie
W tym rozdziale przedstawione zostay podstawy jzyka JavaScript oraz wprowadzenie do pracy
z tym jzykiem w VisualStudio 2008.
Uwagi dla studenta
umiesz dodawa kod JavaScript do strony HTML
potrafisz napisa prost aplikacj w JavaScript
wiesz, co umoliwia IntelliSense i jak uruchomi debugowanie w Visual Studio 2008
1. Scott Guthrie, VS 2008 JavaScript Intellisense - ScottGu's Blog
http://weblogs.asp.net/scottgu/archive/2007/06/21/vs-2008-javascript-intellisense.aspx
Na blogu autor prezentuje moliwoci technologii Intellisense w jzyku JavaScript.
2. Scott Guthrie, VS 2008 JavaScript Debugging - ScottGu's Blog,
http://weblogs.asp.net/scottgu/archive/2007/07/19/vs-2008-javascript-debugging.aspx
Na blogu autor prezentuje moliwoci debugowania aplikacji napisanych w jzyku
JavaScript.
3. Danny Goodman, JavaScript. Biblia, Helion
W ksice znajdziesz wszystko, co jest wane przy tworzeniu aplikacji w jzyku
JavaScript. Na prawie 1500 stronach autor umieci prawie wszystko co chciaby
wiedzie o tym jzyku.
4. Shelley Powers, JavaScript. Wprowadzenie, Helion
W ksice autor przedstawi praktyczne wprowadzenie do jzyka JavaScript.
Z ksiki nauczysz si przechwytywa zdarzenia zachodzce w oknie przegldarki,
sprawdza dane wprowadzane przez uytkownikw do formularzy na stronach
WWW oraz korzysta z plikw cookie. Poznasz obiektowy model dokumentu
(DOM), technologi AJAX i dodatkowe biblioteki.

Piotr Bubacz Modu 3
Strona 3-11
Jeste wacicielem niewielkiej firmy i Twj pracownik przygotowa prost ankiet w jzyku HTML
umoliwiajc pobranie od uytkownika podstawowych informacji dotyczcych imienia, adresu,
wzrostu i zakresu cen. Ankieta zostaa przedstawiona na Rys. 4.

Rys. 4 Ankieta
Niestety klient zayczy sobie aby doda sprawdzenie danych po stronie przegldarki:
Pola wymagane:
Imie
E-mail
Cena od i do
Sprawdzenie poprawnoci wpisanych wartoci dla pl:
E-mail (e-mail w formacie nazwa@serwer.domena)
Kod pocztowy (kod odpowiedni dla naszego kraju)
Wzrost (zakres od 40 do 250 cm)
Wartoci w polach od i do wpisane odpowiednio
Twoim zadaniem jest przygotowanie odpowiednich skryptw w jzyku JavaScript umoliwiajcych
spenienie oczekiwa klienta.
1. Utwrz now
stron w Visual
Studio 2008
Express Edition
Kliknij OK.
Piotr Bubacz Modu 3
Strona 3-12
2. Dodaj do
projektu
utworzone przez
pracownika pliki
Wybierz Website->Add Existing Item a nastpnie wska plik
Ankieta.htm.
Podobnie dodaj plik Style.css.
Wybierz prawym przyciskiem myszy plik Ankieta.htm i wybierz View in
Browser.
3. Dodaj nowy
plik, ktry bdzie
zawiera kod
sprawdzajcy
Wybierz Website->Add New Item a nastpnie w oknie Add New Item:
W obszarze Templates wybierz JScript File
W polu Name wpisz Walidacja.js
Otwrz plik Ankieta.htm i z okna Solution Explorer przecignij plik
Walidacja.js do rodka znacznika head na stronie.
Zapisz zmiany.
4. Dodanie
funkcji walidujcej
formularz i
sprawd, czy
wymagane w
zadaniu pola s
wypenione
Do pliku Walidacja.js wpisz nastpujcy kod:
function sprawdz ( form )
{
if (form.imie.value == "") {
alert( "Prosz wprowadzi imi." );
form.imie.focus();
return false ; }
if (form.email.value == "") {
alert( "Prosz wprowadzi adres email." );
form.email.focus();
return false ; }
if (form.cenaOd.value == "") {
alert( "Prosz wprowadzi warto od." );
form.cenaOd.focus();
return false ; }
if (form.cenaDo.value == "") {
alert( "Prosz wprowadzi warto do." );
form.cenaDo.focus();
return false ; }
return true ; }
W pliku Ankieta.htm do znacznika form dodaj waciwo
onsubmit="return sprawdz(this)" tak, aby znacznik wyglda jak
poniej
<form name="ankietaSklepu" onsubmit="return sprawdz(this)">
Zapisz oba pliki i otwrz plik Ankieta.htm w przegldarce. Sprawd, czy
moesz wysa formularz (wcisn przycisk Wylij) bez wypenienia pl
wymaganych.
5. Sprawd
poprawno
adresu e-mail
W pliku Walidacja.js poniej funkcji sprawdz dodaj funkcje adresEmail
sprawdzajc przy pomocy wyraenia regularnego poprawno
wpisanego adresu E-mail wpisz:
function adresEmail( adres ) {
var regex =
/^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
return regex.test(adres); }
W funkcji sprawdz powyej linii return true wpisz:
if (!adresEmail(form.email.value)) {
alert( "Prosz wprowadzi poprawny adres email \n w formacie:
nazwa@serwer.domena." );
form.email.focus();
return false ; }

Piotr Bubacz Modu 3
Strona 3-13
Zapisz plik Walidacja.js i otwrz plik Ankieta.htm w przegldarce.
Sprawd, czy moesz wysa formularz (wcisn przycisk Wylij
wypeniajc pole E-mail w zym formacie.
6. Sprawd
poprawno kodu
pocztowego
W pliku Walidacja.js poniej funkcji sprawdz dodaj funkcje
kodPocztowy
function kodPocztowy( kod ) {
var regex = /^[0-9]{2}\-[0-9]{3}$/;
return regex.test(kod); }
if (!kodPocztowy(form.kodPocztowy.value)) {
alert( "Prosz wprowadzi poprawny kod pocztowy." );
form.kodPocztowy.focus();
return false ; }
wypeniajc pole Kod pocztowy w zym formacie.
7. Sprawd
poprawno
wpisanej wartoci
w polu Wzrost
sprawdzWzrost. Dodatkowo dodaj funkcje pomocnicz liczbaCalkowita.
function liczbaCalkowita( liczba ) {
var regex = /^[\-]{0,1}[0-9]{1,8}$/;
return regex.test(liczba); }

function sprawdzWzrost( liczba ) {
if (!liczbaCalkowita(liczba)) { return false ;}
var wzrost=parseInt(liczba);
if((wzrost<40) || (wzrost>250)) {return false;}
return true; }
if (!sprawdzWzrost(form.wzrost.value)) {
alert( "Prosz wprowadzi poprawny wzrost w cm. (zakres 40-
250cm)" );
form.wzrost.focus();
return false ; }
wypeniajc pole Wzrost w zym formacie.
8. Sprawd
poprawno
wpisanych
wartoci w polach
Od i Do
sprawdzOdDo przyjmujc dwa parametry cenaOd i cenaDo
function sprawdzOdDo( cenaOd, cenaDo) {
if (!liczbaCalkowita(cenaOd)) { return false ;}
if (!liczbaCalkowita(cenaDo)) { return false ;}
var zakres=parseInt(cenaDo)-parseInt(cenaOd);
if(zakres<0){return false;}
return true; }
if (!sprawdzOdDo(form.cenaOd.value,form.cenaDo.value)) {
alert( "Prosz wprowadzi poprawny zakres cenowy" );
form.wzrost.focus();
return false ; }

Piotr Bubacz Modu 3
Strona 3-14
wypeniajc pole od i do wartociami innymi ni liczba oraz umieszczajc
w polu od wiksz warto ni w polu do.

Zblia si termin oddania projektu dla wanego klienta, gdy nagle okazuje si, e brakuje istotnego
elementu jakim jest formularz rejestracji nowego uytkownika na stronie. Formularz ma zawiera
jedynie trzy pola nazwa i dwa razy haso, jednak klient zayczy sobie nastpujc funkcjonalno
realizowan w przegldarce:
nazwa uytkownika ma mie co najmniej 5 znakw, nie wicej jednak jak 10 i moe zawiera
tylko litery
haso ma mie co najmniej 7 znakw i ma by wywietlana informacja o sile hasa.
Dodatkowo haso powinno posiada moliwo okrelenia poziomu jego zabezpieczenia podczas
tworzenia uytkownik ma by powiadamiany o sile hasa. Wszystkie informacje maj pojawia si
obok pola do wpisywania.

1. Utwrz now
stron w Visual
Studio 2008
Express Edition
Kliknij OK.
2. Dodaj do
projektu
utworzone przez
pracownika pliki
Wybierz Website->Add Existing Item a nastpnie wska plik
Rejestracja.htm.
Podobnie dodaj plik StyleRej.css.
Wybierz prawym przyciskiem myszy plik Rejestracja.htm i wybierz View
in Browser.
3. Umie na
formularzu pola
do ktrych bd
wpisywane
informacje o
bdach
Otwrz stron Rejestracja.htm za polem input o waciwoci
name="nazwa" umie nastpujcy znacznik:
<span id="zlaNazwa"></span>
Za polem input o waciwoci name="haslo" umie nastpujcy
znacznik:
<span id="opisHasla"></span>
Za polem input o waciwoci name="haslo2" umie nastpujcy
znacznik:
<span id="zgodneHasla"></span>
Zapisz zmiany.
4. Dodaj styl do
wywietlania
informacji o
bdach na
stronie
Do pliku StyleRej.css dodaj nastpujcy styl:
.wyroznienieCzerwone{
padding-left:10px;
color:Red;
font-weight:600; }
Piotr Bubacz Modu 3
Strona 3-15
5. Sprawd liczb
znakw w nazwie
uytkownika i
hale
Wybierz Website->Add New Item a nastpnie w oknie Add New Item:
W obszarze Templates wybierz JScript File
W polu Name wpisz Rejestracja.js
Otwrz plik Rejestracja.htm i z okna Solution Explorer przecignij
dodany plik do rodka znacznika head na stronie.
W pliku Rejestracja.htm do znacznika form dodaj waciwo
onsubmit="return sprawdz(this)".
Zapisz zmiany.
W pliku Rejestracja.js dodaj nastpujcy kod:
function sprawdz (form){
var user=form.nazwa.value;
if ((user.length<5) || (user.length>10)) {
document.getElementById("zlaNazwa").innerHTML = "Nazwa
uytkownika moe mie od 5 do 10 liter";
document.getElementById("zlaNazwa").className =
"wyroznienieCzerwone";
form.nazwa.focus;
return false; }
else { document.getElementById("zlaNazwa").innerHTML = "";}
if (form.haslo.value.length < 7) {
document.getElementById("opisHasla").innerHTML = "Prosz
wprowadzi haso co najmniej 7 literowe.";
document.getElementById("opisHasla").className =
form.haslo.focus();
return false ; }
return true; }
Zapisz plik Rejestracja.js i otwrz plik Rejestracja.htm w przegldarce.
Sprawd, czy moesz wysa formularz (wcisn przycisk Wylij. Wpisz
nazw uytkownika i haso zawierajce odpowiedni liczb znakw.
6. Sprawd znaki
w nazwie
uytkownika
W pliku Rejestracja.js w funkcji sprawdz powyej linii return true
dodaj nastpujcy kod:
if (!((user.match(/[a-z]/)) || (user.match(/[A-Z]/)))) {
document.getElementById("zlaNazwa").innerHTML = "Nazwa
uytkownika zawiera tylko litery";
document.getElementById("zlaNazwa").className =
form.nazwa.focus;
return false; }
else { document.getElementById("zlaNazwa").innerHTML = ""; }
nazw uytkownika zawierajce inne znaki ni mae czy due litery.
7. Sprawd
zgodno
wpisanych hase
W pliku Rejestracja.js w funkcji sprawdz powyej linii return true
dodaj nastpujcy kod:
if (form.haslo.value!=form.haslo2.value) {
document.getElementById("zgodneHasla").innerHTML = "Hasa nie s
zgodne!";
document.getElementById("zgodneHasla").className =
return false; }
rne hasa w polach.
Piotr Bubacz Modu 3
Strona 3-16
8. Dodaj
moliwo
wywietlania
informacji o sile
hasa
W pliku Rejestracja.htm do pola Input o waciwoci name="haslo"
dodaj waciwo onkeyup="silaHasla(this.value)"
Do pliku Rejestracja.js dodaj nastpujca funkcj:
function silaHasla( haslo ) {
var punkty=0;
if (haslo.length >=7) punkty++;
if ((haslo.match(/[a-z]/)) && (haslo.match(/[A-Z]/))) punkty++;
if (haslo.match(/\d+/)) punkty++;
if (haslo.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) punkty++;
if (punkty<1) {
document.getElementById("opisHasla").innerHTML = "Bardzo
sabe";
"opisHaslaBardzoSlabe"}
else if (punkty<2) {
document.getElementById("opisHasla").innerHTML = "Sabe";
"opisHaslaSlabe"}
else if (punkty<3){
document.getElementById("opisHasla").innerHTML = "rednie";
"opisHaslaSrednie"}
else {
document.getElementById("opisHasla").innerHTML = "Silne";
"opisHaslaSilne"} }
Do pliku StyleRej.css dodaj nastpujce stylu umoliwiajce
wywietlenie w rnych kolorach informacji o sile hasa:
.opisHaslaBardzoSlabe
{ padding-left:10px;
color:Red; }

.opisHaslaSlabe
color:Maroon; }

.opisHaslaSrednie
color:Yellow; }

.opisHaslaSilne
color:Green; }
Sprawd, jak zachowuje si strona przy wpisywaniu hasa. Wymyl
haso, ktre zostanie ocenione jako silne.

Piotr Bubacz Modu 3
Strona 3-17
Twoim zadaniem jest przygotowanie i walidacja ankiety dla agencji modelek i modeli Modelinki.
Strona ankiety musi umoliwi pobranie od kadego chtnego do pracy w charakterze modela
nastpujcych informacji:
imi
nazwisko
adres zamieszkania
telefon
e-mail
wiek
wzrost
waga
kolor wosw
kolor oczu
rozmiar ubrania
numer butw
dowiadczenie (wybierane od 1 do 5)
pe
Po wybraniu pci uytkownikowi zostaje wywietlony albo formularz dla kobiet albo dla mczyzn,
ktry umoliwia pobranie nastpujcych informacji:
w przypadku kobiet:
obwd biustu
wielko miseczki
talia
biodra
dugo nogi
w przypadku mczyzn:
klatka
pas
dugo nogi
Poniewa wszystkie pola s wymagane opracuje schemat sprawdzania pola w odpowiedniej funkcji.
Sprawdzenie poprawnoci wpisanych wartoci ma odbywa si dla pl:
E-mail (e-mail w formacie nazwa@serwer.domena)
Kod pocztowy (kod odpowiedni dla naszego kraju)
Wzrost liczba w zakresie od 40 do 250 cm,
Waga liczba w zakresie od 20 do 80 kg
Wszystkie operacje sprawdzenia poprawnoci i wywietlania elementw dla kobiet i mczyzn maja
by realizowane po stronie klienta w przegldarce!
ITA- 103 Aplikacje internetowe
Piotr Bubacz
Modu 4
Wersja 1
Wprowadzenie do ASP.NET
Spis treci
Wprowadzenie do ASP.NET ................................................................................................................. 1
Przykadowe rozwizanie ........................................................................................................... 10

Piotr Bubacz Modu 4
ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET
Strona 4-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce podstaw tworzenia aplikacji
internetowych w Visual Studio 2008. Nauczysz si dodawa strony
internetowe do aplikacji oraz umieszcza na nich kontrolki dostpne w
ASP.NET. Poznasz zasady programowego odwoywania si do kontrolek
oraz interakcji z uytkownikiem strony.
Cel moduu
Celem moduu jest poznanie zasad pracy z aplikacjami internetowymi w
ASP.NET, dodawania i programowego odwoywania si do kontrolek oraz
dodawania i przesyania informacji midzy stronami.
potrafi tworzy aplikacje internetowe w ASP.NET w Visual Studio
2008
potrafi dodawa kontrolki do strony internetowej
potrafi odwoywa si programowo do kontrolek na stronie
rozumia zasad przesyania informacji midzy stronami
Wymagania wstpne
zna podstawy jzyka XHTML
zna podstawy CSS
Mapa zalenoci moduu
w moduach Podstawy HTML i Kaskadowe Arkusze Stylw CSS.


Piotr Bubacz Modu 4
Strona 4-3
Przykadowy problem
Podstawowym ograniczeniem jzyka HTML jest jego statyczno. Nie ma moliwoci w tym jzyku
dynamicznej zmiany wywietlanej zawartoci ani reagowania na dziaania uytkownika. Statyczne
strony s bardzo dobre jako wizytwki, ale dzisiaj ciko sobie wyobrazi stron internetow bez
elementw dynamicznych.
Firmowe strony internetowe musz przynajmniej umoliwia wyszukiwanie czy przegldanie
produktw. Dzisiaj firmy coraz czciej zwracaj si w kierunku Web 2.0, udostpniajc
uytkownikom swoich serwisw moliwo samodzielnego generowania treci. Takie narzdzia jak
blog staj si podstaw komunikacji z klientami ju nie tylko w duych korporacjach, ale i w maych
firmach. Firmy dostrzegaj moliwoci Wikipedii i udostpniaj moliwo rozszerzania swojej
podstawowej wiedzy o produktach. Te wszystkie nowe elementy pojawiajce si na stronach
wymagaj dynamicznych technologii tworzenia zawartoci stron.
ASP.NET jest zbiorem technologii programistycznych zbudowanych na platformie .NET, uywanych
do budowania dynamicznych aplikacji internetowych. W ASP.NET programista ma do dyspozycji
wiele gotowych komponentw i klas zwizanych z najczciej wykonywanymi zadaniami.
Aplikacja ASP.NET
Na aplikacj ASP.NET mog skada si nastpujce elementy:
formularze internetowe (ang. Web Forms) pliki z rozszerzeniem .aspx
usugi Web (ang. Web Services) pliki z rozszerzeniem .asmx
pliki logiki aplikacji pliki z rozszerzeniem .vb lub .cs
globalna klasa aplikacji plik Global.asax
pliki konfiguracyjne pliki Web.config
inne pliki np. strony HTML, arkusze CSS itp.
Formularz internetowy
Formularze internetowe reprezentuj dynamicznie budowane strony internetowe. Skadaj si ze
znacznikw ASP.NET oraz logiki i s przesyane do uytkownika najczciej w postaci
standardowych dokumentw XHTML. Aplikacja ASP.NET zawiera jeden lub wicej formularzy. Caa
logika jest wykonywana po stronie serwera, chocia moliwe jest wykonywanie czci kodu w
postaci skryptw po stronie uytkownika.
Pliki konfiguracyjne
Najwaniejsze pliki zawierajce ustawienia konfiguracyjne aplikacji ASP.NET to:
Machine.config przechowywane w nim ustawienia dotycz wszystkich aplikacji na
komputerze lokalnym
Web.config przechowywane w nim ustawienia dotycz tylko wybranej aplikacji
Pliki konfiguracyjne mog by modyfikowane w czasie dziaania aplikacji, lecz wie si to
z koniecznoci jej ponownego uruchomienia.
Zintegrowane rodowisko programistyczne Visual Studio 2008
Zintegrowane rodowisko programistyczne umoliwia wytwarzanie i weryfikacj aplikacji oraz
przygotowywanie ich do wdroenia. Charakteryzuje si tym, e udostpnia funkcjonalnoci
obejmujce edycj i kompilowanie kodu rdowego, tworzenie zasobw programu, zarzdzanie
bazami danych itp.
Piotr Bubacz Modu 4
Strona 4-4
Visual Studio 2008 IDE skada si z wielu okien o rnym przeznaczeniu (Rys. 2). W menu View
mona okreli, ktre z nich maj by widoczne dla uytkownika.

Rys. 2 Okno Visual Studio 2008
1. Okno dokumentu centralne okno aplikacji. W trybie projektowania (Design) moliwe jest
graficzne projektowanie stron w trybie WYSIWYG (ang. What You See Is What You Get). W
trybie podgldu kodu rdowego (Source) w oknie wywietlany jest kod strony. Tryb
dzielony (Split) umoliwia jednoczesne wywietlanie strony w obu widokach.
2. Toolbox zbir elementw, ktre mona umieci na projektowanej stronie,
pogrupowanych w kategorie.
3. Solution Explorer lista plikw i folderw wchodzcych w skad projektu. Wywietla
hierarchi plikw. Z tego okna mona przenosi i modyfikowa pliki, w szczeglnoci moliwe
jest:
przenoszenia plikw poprzez przeciganie ich mysz
wywietlenie zawartoci pliku w oknie dokumentw po dwukrotnym klikniciu go
wywoanie menu kontekstowego skojarzonego z elementem poprzez kliknicie go
prawym przyciskiem myszy
4. Properties lista dostpnych waciwoci oraz biece ustawienia aktualnie zaznaczonego
obiektu.
5. Error List informacje o bdach, ktre wystpiy w projekcie.
6. Server Explorer interakcja z narzdziami dostpnymi na serwerze.
Aplikacje internetowe w Visual Studio
Tworzenie aplikacji
Aby utworzy now aplikacj w Visual Studio musimy wybra z menu File -> New -> Web Site. Na
ekranie pojawi si okno New Web Site (Rys. 3), w ktrym moemy okreli podstawowe parametry
tworzonej witryny.
Piotr Bubacz Modu 4
Strona 4-5

Rys. 3 Okno New Web Site
Elementy wywietlane w oknie New Web Site:
1. Zainstalowane szablony aplikacji lista, w ktrej moemy okreli, jakiego typu aplikacj
chcemy utworzy. Najczciej wybieramy szablon ASP.NET Web Site.
2. Docelowa wersja .NET Framework docelowa wersja rodowiska, pod ktr ma by
uruchamiana aplikacja.
3. Lokalizacja witryny umiejscowienie plikw aplikacji.
4. cieka lub adres serwera dokadne pooenie plikw aplikacji na lokalnym dysku twardym
lub na serwerze, zalenie od wybranej lokalizacji.
5. Jzyk programowania jzyka programowania, w ktrym tworzona bdzie aplikacja.
6. Przycisk Browse przycisk umoliwiajcy okrelenie dokadnego pooenia plikw aplikacji.
Uruchamianie aplikacji
Aby uruchomi aplikacj, wybieramy z menu Debug -> Start Debugging lub naciskamy klawisz F5.
Po wybraniu tej opcji przy pierwszym uruchomieniu aplikacji pojawi si okno z informacj o
koniecznoci zezwolenia na debugowanie. W tym przypadku naley wcisn OK. W tym trybie nie
bdzie moliwe dynamiczne poprawianie strony, ale bdzie moliwe debugowanie aplikacji.
Moemy w dowolnym miejscu w kodzie aplikacji zatrzyma wykonywanie programu, podejrze
zmienne, sprawdzi krok po kroku wykonywanie poszczeglnych wierszy kodu itp.
Aplikacj mona rwnie uruchomi w trybie bez moliwoci debugowania, wybierajc z menu
gwnego Debug -> Start Without debugging lub wciskajc Ctrl+F5. Zalet tego trybu jest
moliwo wprowadzania zmian w kodzie, ktre widoczne s po odwieeniu strony w
przegldarce.
Strona internetowa
Struktura strony
Stron internetow (formularz internetowy) definiuje si w pliku z rozszerzeniem .aspx. Struktura
takiego pliku skada si z trzech sekcji: dyrektyw strony, kodu aplikacji i ukadu strony.
Dyrektywy
Dyrektywy umoliwiaj definiowanie podstawowych ustawie. Maj one nastpujc skadni:
<%@ dyrektywa atrybut="warto" [, atrybut="warto"[,...n] ] %>
Najwaniejsz i zarazem jedyn obowizkow dyrektyw jest umieszczona na pocztku kadej
strony internetowej ASP.NET dyrektywa @Page.
Piotr Bubacz Modu 4
Strona 4-6
Dyrektywa @Page okrela atrybuty uywane przez parser i kompilator. Pozwala m.in. okreli
parametry protokou HTTP, przestrzenie nazw, wykorzystywany jzyk programowania.
Sekcja kodu aplikacji
Sekcja kodu aplikacji zawiera procedury obsugi zdarze wraz dodatkowymi procedurami
pomocniczymi. Kod aplikacji moe zosta osadzony wewntrz kodu znacznikowego (Code Inline) lub
umieszczaniu kodu w osobnym pliku (Code Behind) (Rys. 4).
<%@ Page
<script runat="server>
//logika aplikacji
</script>
<html>
</html>
plik.aspx
Inline
Logika aplikacji w pliku
plik.aspx.cs
<html>
</html>
plik.aspx
Codebehind

Rys. 4 Strona plik.aspx jako Code Inline i Code Behind
W przypadku Code Inline kod aplikacji jest umieszczany w sekcji nagwka strony (<head>)
wewntrz znacznika <script> z atrybutem runat="Server", ktry informuje kompilator, e
zawarto tego znacznika bdzie przetwarzana na serwerze przed wygenerowaniem kodu HTML dla
klienta. Strona moe posiada znacznik <script> bez atrybutu runat, zawierajcy skrypt
wykonywany po stronie klienta.
Jeli kod aplikacji ma zosta umieszczony w osobnym pliku (Code Behind), to w dyrektywie @Page
s zdefiniowane atrybuty CodeFile (nazwa pliku) oraz Inherits (nazwa klasy czciowej
zawierajcej kod aplikacji).
Kod aplikacji jest zawsze kompilowany przed wykonaniem. Moe on by take prekompilowany i
doczony do aplikacji w postaci binarnej.
Ukad strony
Ukad strony jest opisany za pomoc kodu znacznikowego, ktry zawiera kontrolki serwerowe, cigi
tekstu oraz znaczniki jzyka HTML. Wygld strony moe by zdefiniowany na stronie poprzez
ustawienie waciwoci indywidualnych elementw lub przy pomocy arkuszy styli.
Dodawanie stron internetowych do aplikacji
Do Projektu witryny mona doda now lub istniejc stron internetow. Dodanie nowej strony
moliwe jest:
po wybraniu z menu gwnego Website -> Add New item
po wciniciu kombinacji klawiszy Ctrl+Shift+A
po wybraniu Add New Item z menu kontekstowego wywoywanego po klikniciu prawym
przyciskiem myszy nazwy projektu w oknie Solution Explorer
Po wybraniu jednej z powyszych opcji zostanie wywietlone okno dialogowe (Rys. 5).
Piotr Bubacz Modu 4
Strona 4-7

Rys. 5 Okno dialogowe Add New Item
Okno dialogowe dodawania nowego obiektu do aplikacji zawierajce nastpujce elementy:
1. Templates opcja to umoliwia wybranie szablonu dodawanego pliku.
2. Name pole tekstowe umoliwiajce okrelenie nazwy pliku.
3. Language lista rozwijana umoliwiajca wybr jednego z jzykw programowania stron
internetowych.
4. Place code in separate file pole wyboru okrelajce, czy kod aplikacji ma zosta
umieszczony w osobnym pliku (pole zaznaczone), czy te w pliku .aspx w znaczniku
<script> (pole niezaznaczone).
5. Select master page pole wyboru okrelajce, czy strona internetowa bazuje na stronie
wzorcowej (pole zaznaczone). Jeli opcja ta zostaa zaznaczona, to po wciniciu przycisku OK
uytkownik zostanie poproszony o wskazanie strony wzorcowej. Wicej informacji na temat
stron wzorcowych zostanie przedstawionych pniej.
Kontrolki na stronie
Dodawanie kontrolek do strony
Kontrolki moemy doda do strony w dowolnym widoku: Design, Split lub Source. W oknie Toolbox
naley wybra interesujcy nas komponent, a nastpnie, przecign go na formularz lub
dwukrotnie klikn. Kontrolka jest umieszczana zgodnie z przepywem elementw na stronie
internetowej. Aby umieci j w dowolnym miejscu, musimy wykorzysta pozycjonowanie CSS.
Okrelanie waciwoci kontrolki
Kada kontrolka posiada zbir waciwoci, ktre moemy okreli w oknie Properites (Rys. 6).
Piotr Bubacz Modu 4
Strona 4-8

Rys. 6 Przykad okna Properties dla kontrolki Label
Najczciej wykorzystuje si waciwo ID, okrelajc nazw kontrolki oraz Text, pozwalajc
okreli wywietlany w niej tekst.
Obsuga zdarze
Zdarzenia to pewne akcje wykonywane w odpowiedzi na interakcj uytkownika z kontrolkami na
stronie. Mog nastpi, gdy naciska on przycisk, wybiera rekord w licie rekordw lub w inny
sposb wchodzi w interakcj z interfejsem uytkownika. Zdarzenia mog by rwnie generowane
przez aplikacj, gdy rozpoczyna lub koczy jakie zadanie (np. generowanie wynikowego
dokumentu HTML).
Moemy programowo kontrolowa dziaanie aplikacji za pomoc metody obsugi zdarzenia. Jest to
funkcja napisana w wybranym jzyku programowania, wywoywana w momencie, gdy nastpi
powizane z ni zdarzenie.
Najczciej wykorzystywanym zdarzeniem jest zdarzenie Load klasy Page. Jest ono wywoywane w
momencie, gdy po stronie serwera aplikacja zainicjalizuje wszystkie obiekty kontrolek. Innym
czsto wykorzystywanym zdarzeniem jest zdarzenie Click klasy Button, pozwalajce okreli, co
ma si sta po wciniciu przycisku przez uytkownika.
Wiele klas udostpnia wicej ni jedno zdarzenie, np. klasa Button oprcz wspomnianego ju
zdarzenia Click udostpnia rwnie zdarzenie Command. W takim wypadku jedno z nich jest
okrelane jako domylne. Dla przykadu zdarzenie Click jest domylnym zdarzeniem klasy
Button.
Z poziomu Visual Studio dostp do domylnego zdarzenia uzyskujemy po dwukrotnym klikniciu
wybranej kontrolki w trybie projektowania. Wygenerowana zostanie wwczas pusta metoda do
jego obsugi. Dostp do wszystkich zdarze jest moliwy po wybraniu kontrolki, a nastpnie
klikniciu w oknie Properties przycisku Events (oznaczone na Rys. 7 przez czerwone koo). By
wygenerowa metod obsugi dla ktrego z nich, wystarczy dwukrotnie klikn jego nazw.
Piotr Bubacz Modu 4
Strona 4-9

Rys. 7 Okno Properties z list zdarze
Programowe odwoywanie do kontrolek
Moemy programowo zmienia waciwoci kontrolek, odwoujc si do nich w kodzie po ich
nazwie, okrelonej przy pomocy waciwoci ID (Rys. 8). Visual Studio podpowiada, jakie
waciwoci (np. Text) kontrolki moemy zmieni lub jakie metody moemy na niej wywoa (np.
ToString).

Rys. 8 Waciwoci i metody kontrolki Label
Przesyanie informacji midzy stronami
Metoda przesyanie danych w parametrach adresu URL
Przesyane dane s widoczne w adresie docelowym dokumentu. Adres dokumentu jest oddzielany
od parametrw znakiem zapytania, a parametry oddzielone s od siebie znakiem ampersand (&).
Gwn wad tej metody jest ograniczenie iloci wysyanych danych do maksymalnej dugoci
paska adresu przegldarki klienta. Dodatkowo problem moe sprawia przesyanie danych
binarnych.
Wysyanie informacji t metod polega na przygotowaniu odpowiednio sformatowanego cigu
znakw, ktry bdzie zawiera lokalizacj i nazw pliku, do ktrego naley wysa zapytanie oraz
odpowiednio dodane nazwy parametrw wraz z ich wartociami po znaku =.
Oglna posta adresu URL z doczonymi parametrami dania przesyanego metod GET:
strona.aspx?parametr=warto[&parametr=warto[&...n] ]
Na przykad jeli chcemy wysa zmienn imie i nazwisko do strony Info.aspx, to dane te mona
przesa w adresie w nastpujcy sposb:
Info.aspx?imie=wartosc&nazwisko=wartosc
Przygotowany cig znakw naley wysa przy pomocy metody Response.Redirect(url), gdzie url
jest cigiem znakw, np.:
Piotr Bubacz Modu 4
Strona 4-10
Response.Redirect("Info.aspx?imie=" + imieTextBox.Text + "&nazwisko=" +
nazwiskoTextBox.Text);
Po wykonaniu powyszego kodu przegldarka zostanie przekierowana do strony Info.aspx, a w
pasku adresu moe pojawi si przykadowo nastpujcy cig znakw:
http://.../Info.asp?imie=Jan&Nazwisko=Kowalski
W celu wykorzystania tych informacji na stronie docelowej naley uy waciwoci QueryString
obiektu Request, np.
Request.QueryString["imie"]
Metoda przesyania zawartoci jednego formularza do drugiego
Metoda przesyania zawartoci jednego formularza do drugiego umoliwia przesyanie niemal
nieograniczonych iloci danych, dlatego jest stosowana w wikszoci formularzy internetowych.
Dodatkow jej zalet jest to, e przesyane informacje nie pokazuj si w pasku adresu
przegldarki. Ta waciwo czyni j najlepszym rozwizaniem przy przesyaniu poufnych danych z
uwzgldnieniem takich mechanizmw, jak szyfrowanie poczenia.
Przykad kodu po stronie wysyajcej:
<form id="form1" runat="server">
<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Wylij"
PostBackUrl="~/Default2.aspx" />
</form>
Przykad kodu po stronie odbierajcej:
TextBox txt = (TextBox) PreviousPage.FindControl("TextBox1");
dane= txt.Text;
Poczenie obu metod
Po stronie wysyajcej:
protected void Button1_Click(object sender, EventArgs e)
{ Server.Transfer("Default2.aspx?imie=Piotr"); }
Po stronie odbierajacej:
protected void Page_Load(object sender, EventArgs e) {
daneGET= Request.QueryString["imie"];
danePOST1 = Request.Form["TextBox1"].ToString();
TextBox txt = (TextBox) PreviousPage.FindControl("TextBox2");
danePOST2 = txt.Text; }
Podsumowanie
W tym rozdziale przedstawione zostay podstawowe informacje dotyczce aplikacji ASP.NET i pracy
w rodowisku Visual Studio. Dowiedziae si, jak tworzy aplikacje ASP.NET oraz jak dodawa
kontrolki do formularzy i nowe strony do aplikacji. Zostay rwnie omwione mechanizmy
przesyania informacji midzy stronami.
Utworzenie aplikacji internetowej
Aplikacje internetowe w Visual Studio 2008 nauczymy si tworzy na przykadzie prostej aplikacji,
ktrej zadaniem bdzie wywietlenie komunikatu Witaj wiecie.
Aby utworzy now aplikacj internetow w Visual Studio 2008, wybieramy z menu File -> New
Web Site. Otworzy si okno New Web Site. Z listy Visual Studio installed templates wybieramy
Piotr Bubacz Modu 4
Strona 4-11
ASP.NET Web Site. Pliki aplikacji moemy przechowywa w systemie plikw, na lokalnym serwerze
WWW lub pod zdaln lokalizacj. Zdecydujemy si na pierwsze rozwizanie, w tym celu z listy
Location wybieramy File System, a w polu obok okrelamy pooenie plikw aplikacji w dowolnym
miejscu na dysku, nazywajc ostatni katalog MojaPierwszaStrona. Projekt chcemy przygotowa w
jzyku Visual C#, wic wybieramy go z listy Language. Po klikniciu OK we wskazanym katalogu
zostan utworzone pliki aplikacji.
W oknie Solution Explorer moemy zobaczy nowo utworzony projekt. Skadaj si na niego:
plik Default.aspx pusta strona ASP.NET
plik Web.config plik przechowujcy ustawienia konfiguracyjne
katalog App_Data specjalny katalog, w ktrym umieszczane s dane aplikacji

Rys. 9 Pocztkowa zawarto aplikacji
Plik Default.aspx standardowo otwiera si w gwnym oknie Visual Studio w widoku Source. By
mc edytowa stron w trybie WYSIWYG, moemy przeczy si na widok Design. Zrbmy tak,
nastpnie kliknijmy obszar strony i wpiszmy Witaj wiecie!.
Aby zobaczy wynik naszej pracy w przegldarce internetowej, musimy uruchomi aplikacj. W tym
celu wybieramy z menu Debug -> Start Debugging. Przy pierwszym uruchomieniu aplikacji pojawi
si okno z informacj, e moliwo debugowania nie jest wczona (Rys. 10). Jeli nie zmienimy
niczego i klikniemy OK, Visual Studio samodzielnie zmodyfikuje plik Web.config, umoliwiajc nam
posugiwanie si debuggerem. Na czas projektowania aplikacji warto wczy t opcj.

Rys. 10 Okno Debugging Not Enabled
Aplikacj mona rwnie uruchomi w trybie bez moliwoci debugowania, wybierajc z menu
gwnego Debug -> Start Without debugging.
Po uruchomieniu aplikacji powinna otworzy si przegldarka internetowa, a w niej strona
Default.aspx. Adres strony moe wyglda nastpujco:
http://localhost:5110/MojaPierwszaStrona/Default.aspx
Poszczeglne elementy oznaczaj:
http://localhost aplikacja jest uruchamiana na serwerze lokalnym
5110 numer portu, na ktrym zosta uruchomiony serwer
MojaPierwszaStrona nazwa aplikacji
Piotr Bubacz Modu 4
Strona 4-12
Default.aspx strona internetowa
Posugiwanie si kontrolkami
Podstawow umiejtnoci, jak powinnimy posiada tworzc aplikacje ASP.NET, jest umiejtno
posugiwania si kontrolkami. Pracy z nimi nauczymy si na przykadzie prostej aplikacji,
pobierajcej od uytkownika imi oraz pe i wywietlajcej te informacje na stronie.
Utwrzmy now aplikacj, a nastpnie otwrzmy plik Default.aspx w trybie Design i w obszarze
strony wpiszmy Podaj imi:. Obok napisu powinnimy doda pole tekstowe, w ktre uytkownik
bdzie mg wpisa swoje imi. Funkcj t spenia kontrolka TextBox. Znajdziemy j w oknie
Toolbox, w kategorii Standard by doda j do strony, moemy przecign j na obszar
projektowania lub klikn j dwukrotnie. Warto zauway, e nie moemy umieci kontrolki w
dowolnym miejscu na stronie, a jedynie obok napisu. Jest to zwizane z ukadem elementw na
stronie internetowej. Jeli chcemy swobodnie rozmieszcza kontrolki na stronie, powinnimy uy
CSS. Warto pamita, aby zawsze nadawa kontrolkom znaczce nazwy. W tym celu w oknie
Properties zmienimy waciwo ID kontrolki TextBox z TextBox1 na imieTextBox.
Kursor w widoku projektowania powinien aktualnie znajdowa si za polem tekstowym. Naciskajc
Enter przeniesiemy go do nowej linii. Zobaczmy, jak wyglda kod strony, przeczajc si na widok
Source (moemy rwnie przej do widoku Split i obserwowa jednoczenie widoki Design
i Source). Warto zauway, e nacinicie klawisza ENTER spowodowao dodanie znacznika
<br />.
Przeczmy si z powrotem na widok Design i w drugiej linii wpiszmy Podaj pe:. Nastpnie
dodajmy kontrolk DropDownList reprezentujc list rozwijan i nadajmy jej nazw
plecDropDownList. Moemy wypeni j dopuszczalnymi wartociami na dwa sposoby:
wykorzystujc narzdzia Visual Studio lub rcznie dodajc kolejne pozycje w kodzie strony.
Zdecydujemy si na pierwsze rozwizanie. Jeli zaznaczymy kontrolk w widoku Design, po jej
prawej stronie powinnimy zauway ikon , tzw. Smart Tag. Smart Tag umoliwia szybki dostp
do najczciej uywanych funkcji zwizanych z kontrolk. Kliknijmy go i wybierzmy Edit Items.
Otworzy si okno ListItem Collection Editor (Rys. 11), w ktrym moemy doda elementy do listy.
By doda pierwszy element, kliknijmy przycisk Add.

Rys. 11 Okno ListItem Collection Editor
Na licie waciwoci po prawej stronie odnajdmy waciwo Text, ktra okrela tekst
wywietlany dla elementu i przypiszmy jej warto Kobieta. Nastpnie w polu Value,
okrelajcym jego unikatow warto, wpiszmy K. Dodajmy kolejny element do listy, lecz tym
razem w polach Text i Value wpiszmy odpowiednio: Mczyzna i M. Warto zwrci uwag, e
standardowo pole Value jest wypeniane tak sam wartoci, jak pole Text, lecz w naszym
Piotr Bubacz Modu 4
Strona 4-13
przypadku ze wzgldu na problemy, ktre mog wystpowa z polskimi znakami diakrytycznymi,
lepiej bdzie zastosowa skrty.
Po wypenieniu listy dodajemy na stronie kontrolk Button o nazwie pokazButton i w nastpnej
linii kontrolk Label o nazwie wyswietlLabel. Chcemy, by po klikniciu przycisku w etykiecie
wywietlay si informacje o uytkowniku. Aby wygenerowa metod obsugi kliknicia przycisku,
wystarczy klikn go dwukrotnie. W efekcie w pliku Default.aspx.cs powinna pojawi si pusta
metoda pokazButton_Click.
Komunikat dla uytkownika przygotujemy na podstawie wartoci wybranych w poszczeglnych
kontrolkach, a nastpnie ustawimy go jako tre etykiety. Wykorzystamy do tego nastpujcy kod,
ktry umiecimy wewntrz metody pokazButton_Click:
string wyswietl = "Witaj " + imieTextBox + "!<br />";
if (plecDropDownList.SelectedValue == "K")
wyswietl += "Jeste kobiet";
else if (plecDropDownList.SelectedValue == "M")
wyswietl += "Jeste mczyzn";
wyswietlLabel.Text = wyswietl;
By zaprezentowa moliwo przesyania informacji midzy stronami, do przygotowanej
poprzednio aplikacji dodamy moliwo przekazywania wartoci wpisanej w polu tekstowym przy
pomocy metody GET, za wartoci wybranej z listy przy pomocy metody POST.
Zaczniemy od dodania do naszej strony jeszcze jednej kontrolki Button o nazwie wyslijButton
i etykiecie Wylij. W metodzie obsugi zdarzenia kliknicia dodajmy nastpujcy kod:
Server.Transfer("Ankieta.aspx?imie=" + imieTextBox.Text);
Spowoduje on przekierowanie po stronie serwera do strony Ankieta.aspx z parametrem imie,
przechowujcym zawarto kontrolki imieTextBox.
Dodajmy now stron do aplikacji. W tym celu moemy wybra z menu Website -> Add Add New
Item lub klikn prawym przyciskiem myszy w oknie Solution Explorer i z menu kontekstowego
wybra Add New Item. Pojawi si okno Add New Item. Na licie zainstalowanych szablonw
wybieramy Web Form, w polu Name wpisujemy Ankieta.aspx, za w polu Language wybieramy
Visual C#. Pozostawiamy zaznaczone tylko jedno pole wyboru, Place code in separate file, a
nastpnie klikamy Add.
Do nowej strony dodajemy kontrolk Label o nazwie wyswietlLabel, a nastpnie w widoku
podgldu strony klikamy dwukrotnie obszar formularza. Visual Studio otworzy edytor kodu strony i
umieci kursor w metodzie Page_Load. Dodamy w niej kod pobierajcy warto przekazanego w
adresie parametru imie:
string wyswietl = "Witaj " + Request.QueryString["imie"] + "<br />";
a take kod pobierajcy dane z poprzedniej strony:
DropDownList ddl =
(DropDownList)PreviousPage.FindControl("plecDropDownList");
Na podstawie wybranego element w licie rozwijanej do treci komunikatu dodamy dodatkowe
informacje:
if (ddl.SelectedValue == "K")
{ wyswietl += "Jeste kobiet."; }
if (ddl.SelectedValue == "M")
{ wyswietl += "Jeste mczyzn."; }
Na kocu przypisz zawarto zmiennej wyswietl do wasnoci Text kontrolki Label:
Piotr Bubacz Modu 4
Strona 4-14
wyswietlLabel.Text = wyswietl;
Porady praktyczne
Praca z Visual Studio
Jeli omykowo zamkne ktre z okien, moesz otworzy je ponownie korzystajc z menu
View.
Moesz przeciga mysz elementy z okna Solution Explorer do okna gwnego, uzyskujc
rne efekty. Przykadowo po przecigniciu obrazka Visual Studio automatycznie wygeneruje
znacznik <img>, za przy przenoszeniu arkusza stylw CSS w kodzie strony pojawi si znacznik
<link>.
By sprawnie pracowa w rodowisku Visual Studio, powiniene nauczy si najwaniejszych
skrtw klawiszowych. Niektre z nich s podane w tym module, za pen list znajdziesz w
plikach pomocy. Pamitaj te, e kady skrt moesz dostosowa, wybierajc z menu gwnego
Tools -> Customize -> Keyboard.
Tworzenie aplikacji
Jeli nie wykorzystujesz zaawansowanych funkcji serwera IIS, moesz umieci pliki aplikacji w
dowolnym miejscu w systemie plikw i testowa j wykorzystujc zintegrowany serwer WWW
dostarczany razem z Visual Studio. Opcja ta jest szczeglnie przydatna, gdy nie posiadasz
uprawnie administracyjnych do serwera IIS.
Jeli testowae swoj aplikacj jedynie pod zintegrowanym serwerem WWW, przed
uruchomieniem jej w rodowisku produkcyjnym koniecznie przetestuj j na serwerze IIS.
Istniej pewne subtelne rnice w zachowaniu tych dwch serwerw, m.in. w zakresie obsugi
statycznych plikw aplikacji, takich jak dokumenty HTML, arkusze stylw CSS czy pliki graficzne.
Tworzc now aplikacj Web w Visual Studio 2008 masz moliwo wyboru wersji
.NET Framework. Pamitaj, e musi ona by zainstalowana nie tylko na komputerze, na ktrym
tworzysz i testujesz aplikacj, lecz rwnie na serwerze, na ktrym zamierzasz docelowo j
umieci. Jeli zdecydujesz si utworzy aplikacj dla .NET Framework 2.0, musisz liczy si
z tym, e udogodnienia wprowadzone w wersji 3.5, m.in. zintegrowana obsuga Ajax, nie bd
dostpne.
Gdy uruchamiasz aplikacj bez debugowania, moesz z poziomu Visual Studio wprowadza
zmiany w kodzie aplikacji, ktre bd widoczne po odwieeniu strony w przegldarce.
Przed umieszczeniem aplikacji w rodowisku produkcyjnym upewnij si, e moliwo
debugowania jest wyczona w pliku konfiguracyjnym. Zapewnisz w ten sposb lepsz
wydajno aplikacji, za w przypadku bdu na stronie fragmenty kodu nie bd prezentowane
uytkownikowi.
Tworzenie stron
Staraj si umieszcza kod strony w osobnym pliku. Moliwo osadzania kodu wykonywalnego
w kodzie znacznikw przydaje si gwnie przy rnego rodzaju prezentacjach.
W oknie Add New Item lista szablonw zaley od dodatkw zainstalowanych w systemie.
Dodawanie kontrolek do strony
Kontrolki s rozmieszczane na stronie tak samo, jak elementy HTML. By mc swobodnie
sterowa ich pooeniem, moesz wykorzysta CSS.
Staraj si nie korzysta z wizualnych wasnoci kontrolek wymienionych w oknie Properties,
takich jak kolor ta czy rozmiar tekstu. Do zarzdzania wygldem strony uywaj CSS.
Elementy posiadajce atrybut runat="server" najczciej musz posiada rwnie atrybut
ID, dziki czemu mona odwoywa si do nich w kodzie. Pamitaj, e atrybuty te moesz
Piotr Bubacz Modu 4
Strona 4-15
nadawa nie tylko kontrolkom serwerowym, lecz rwnie zwykym elementom HTML, takim jak
<div> czy <img>.
Nigdy nie powiniene polega na tym, e waciwo ID elementu z atrybutem
runat="server" bdzie mie tak sam warto po stronie klienta i serwera. ASP.NET nie
gwarantuje tego w aden sposb i czsto dodaje dodatkowe elementy do nazwy. Z tego
wzgldu uycie selektorw ID w CSS, np. #imieTextBox { font-weight: bold } jest
zupenie niepraktyczne. W celu okrelenia wygldu kontrolek ASP.NET stosuj waciwo
CssClass i klasy CSS.
Przesyanie informacji midzy stronami w parametrach adresu URL ma ograniczone
zastosowanie, gdy nie chroni danych w aden sposb, jak rwnie nie pozwala przekazywa
wikszych porcji informacji.
By mc przekazywa dane binarne w parametrze adresu URL, powiniene zastosowa jakie
kodowanie transportowe powszechnie w tym celu wykorzystuje si kodowanie Base64.
Niestety musisz liczy si z tym, e rozmiar danych po zakodowaniu ulegnie zwikszeniu.
Moe si zdarzy, e w acuchu znakw przesyanym w parametrze adresu URL znajdzie si
jaki znak specjalny, np. ampersand (&). Jeli dokleimy taki acuch jako warto dla
parametru, moe ona pniej zosta nieprawidowo zinterpretowana przez serwer. By
zabezpieczy si przed tak sytuacj, powiniene kodowa wartoci parametrw przy pomocy
metody Server.UrlEncode.
Uwagi dla studenta
umiesz tworzy aplikacje internetowe ASP.NET w Visual Studio 2008
umiesz dodawa nowe strony do aplikacji
umiesz dodawa kontrolki do strony
wiesz co to jest i jak utworzy metod obsugi zdarzenia
umiesz programowo odwoywa si do kontrolek
wiesz co to jest Smart Tag i jak z niego korzysta
wiesz jak przesya informacj pomidzy stronami metod GET i POST
1. Dino Esposito, Programming Microsoft ASP.NET 3.5, Microsoft Press, 2008
Praktyczne podejcie do tworzenia aplikacji w ASP.NET 3.5. szczegowy
przewodnik po najwaniejszych elementach projektowania stron internetowych w
ASP.NET 3.5. Zawiera przegld od podstaw do zaawansowanych elementw
technologii.
2. Tomasz Jahokowski, Jacek Matulewski, ASP.NET w Visual Web Developer 2008. wiczenia,
Helion, 2008
Ksika przeznaczona jest dla pocztkujcych programistw, pragncych tworzy
witryny ASP.NET, ktrzy zetknli si ju z jakimkolwiek jzykiem programowania.
Dziki temu podrcznikowi nauczysz si korzysta z opisanych narzdzi,
dziaajcych w nowoczesnym rodowisku Visual Web Developer 2008.
3. Jesse Liberty, Dan Hurwitz, ASP.NET. Programowanie, Helion, 2006
Piotr Bubacz Modu 4
Strona 4-16
Podrcznik opisujcy zasady tworzenia aplikacji i witryn internetowych przy uyciu
jzyka C# 2.0, rodowiska programistycznego Visual Studio 2005 i bibliotek
.NET 2.0. Przedstawia rodowisko Visual Studio 2005 i szczegowo omawia
koncepcj budowania aplikacji za pomoc kontrolek.
4. Chris Hart, John Kauffman, David Sussman, Chris Ullman, Beginning ASP.NET 2.0 with C#, Wrox,
2006
W ksice autorzy prezentuj podstawy ASP.NET. Pokazuj nie tylko teori, ale
rwnie przykady kodu w jzyku C#.
5. The Official Microsoft ASP.NET Site, http://www.asp.net
Strona zawiera najnowsze informacje dotyczce technologii ASP.NET.
Pocztkujcym programistom ASP.NET warto poleci informacje zawarte w
zakadce Get Started. Z kolei cennym rdem wiedzy dla wszystkich bez wyjtku
jest zakadka Learn.
Piotr Bubacz
Problem 1 (czas realizacji
Twoja firma rozpocza ekspansj na rynku dynamicznych aplikacji internetowych. W kocu ile
mona zarabia na tworzeniu prostych
postanowie pozna technologi
pad na technologi ASP.NET.
wywietlenia na stronie internetowej fragment
od uytkownika imienia.
1. Utwrz now
stron w Visual
Studio 2008
Z menu wybierz
Z listy
Z listy
pliku w
Z listy
Kliknij
2. Dodaj tekst do
strony. Uruchom
aplikacj ASP.NET
Przecz
Na stronie internetowej
wiecie!
Zapisz stron wybierajc z menu
kombinacj klawiszy
Uruchom przygotowan aplikacj
Debug
opcji przy pierwszym uruchomieniu aplikacji pojawi si okno
z
W
3. Dodaj
kontrolki Label
Na stronie w nowej linii dopisz
przecignij
W
dzisiajLabel
4. Dodaj
procedur obsugi
zdarzenia
W widoku podgldu strony kliknij dwukrotnie formularz. Visual Studio
otworzy edytor kodu strony i umieci kursor
Do

Strona 4-17
tworzeniu prostych stron WWW? Poniewa chcesz by
pozna technologi, w ktrej bdziecie tworzyli dynamiczne aplikacj
pad na technologi ASP.NET. Swoj przygod z ni postanowie rozpocz
wywietlenia na stronie internetowej fragmentu tekstu, dzisiejszej daty
Tok postpowania
Z listy Visual Studio installed templates wybierz ASP.NET
Kliknij OK.
Przecz si na widok Split.
Na stronie internetowej w obszarze podgldu
wiecie!.
Zapisz stron wybierajc z menu File -> Save Default.aspx
kombinacj klawiszy Ctrl+S.
Uruchom przygotowan aplikacj wybierajc
Debug -> Start Debugging lub wykorzystujc klawisz
informacj o koniecznoci zezwolenia na debugowanie
Wcinij OK.
Rys. 12 Okno z informacj o modyfikacji pliku Web.config
Na stronie w nowej linii dopisz Dzisiaj jest, a nastpnie z okna
przecignij kontrolk Label, umieszczon w zakadce
Kontrolk moesz umieci w obszarze podgldu strony lub w kodzie
rdowym.
Wybierz dodan kontrolk i w oknie Properties
dzisiajLabel, natomiast pole Text zostaw puste.
otworzy edytor kodu strony i umieci kursor w metodzie
Do metody dodaj nastpujcy kod wywietlajc aktualn dat w
Modu 4
chcesz by dobrym szefem,
w ktrej bdziecie tworzyli dynamiczne aplikacje. Wasz wybr
postanowie rozpocz od prostego zadania
j daty oraz pobranego
ASP.NET Web Site.
, a w polu obok okrel lokalizacj dla
u strony wpisz Witaj
Save Default.aspx lub wciskajc
wybierajc z menu
lub wykorzystujc klawisz F5. Po wybraniu tej
informacj o koniecznoci zezwolenia na debugowanie (Rys. 12).

Okno z informacj o modyfikacji pliku Web.config
nastpnie z okna Toolbox
zakadce Standard.
obszarze podgldu strony lub w kodzie
Properties w polu (ID) wpisz
metodzie Page_Load.
dodaj nastpujcy kod wywietlajc aktualn dat w
Piotr Bubacz Modu 4
Strona 4-18
Page_Load kontrolce dzisiajLabel:
dzisiajLabel.Text = DateTime.Today.ToShortDateString();
Zapisz zmiany i uruchom przygotowan stron.
5. Dodaj
kontrolki TextBox,
Button i obsu
zdarzenia Click
Na stronie w nowej linii dopisz: Podaj swoje imi:, a nastpnie z okna
Toolbox przecignij kontrolk TextBox i w oknie Properities w polu (ID)
wpisz imieTextBox.
Nastpnie obok poprzedniej kontrolki dodaj do strony kontrolk Button
w oknie Properities w polu Text wpisz Wywietl, a w polu (ID)
wyswietlButton
W nowej linii dodaj kontrolk Label i w oknie Properities w polu (ID)
wpisz imieLabel i usu zwarto pola Text.
Dwukrotnie kliknij kontrolk Button. Visual Studio otworzy edytor kodu
strony i umieci kursor w metodzie wyswietlButton_Click. Do metody
dodaj:
imieLabel.Text = "Witaj " + imieTextBox.Text;
6. Przetestuj
stron
Zapisz zmiany i uruchom przygotowan stron. W oknie tekstowym
podaj swoje imi, a nastpnie wcinij przycisk Wywietl.
Poprzednie zadanie okazao si by atwiejsze ni sdzie. Zachcony pierwszymi sukcesami
rzucie sobie nowe wyzwanie postanowie dowiedzie si, jak przesya informacje midzy
stronami. Zdecydowae, e przygotujesz prost ankiet dla agencji modelek i modeli, ktr
prowadzi Twj dobry przyjaciel. Kto wie, moe nawet uda Ci si go namwi do zmiany strony
internetowej?
Wymylie, e na pierwszej stronie uytkownik bdzie mg wprowadzi imi oraz okreli swoj
pe, na podstawie ktrej bdzie nastpnie przekierowywany na odpowiedni stron z pytaniami.
1. Dodaj now
stron do aplikacji
Z listy Visual Studio installed templates wybierz ASP.NET Web Site.
Kliknij OK.
2. Dodaj
kontrolk do
wpisania imienia,
okrelenia pci
oraz
przekierowania na
stron ankiety
Na stronie napisz Podaj swoje imi:, a nastpnie z okna Toolbox
przecignij kontrolk TextBox. Ustaw jej waciwo ID na imieTextBox.
W nowej linii dodaj tekst Podaj pe:, a nastpnie kontrolk
DropDownList. Ustaw jej waciwo ID na plecDropDownList.
Zaznacz ostatnio dodan kontrolk w widoku projektowania strony,
a nastpnie kliknij ikon , ktra pojawi si po jej prawej stronie
(Smart Tag) i wybierz Edit Items (Rys. 13).
Piotr Bubacz Modu 4
Strona 4-19

Rys. 13 Okno Listitem Collection Editor
W oknie ListItem Collection Editor wcinij przycisk Add.
W obszarze Properties po prawej stronie w polu Text wpisz Kobieta, a w
polu Value K.
Kliknij przycisk Add.
W obszarze Properties po prawej stronie w polu Text wpisz Mczyzna,
a w polu Vaule M.
Dodaj kontrolk Button i w oknie Properities w polu Text wpisz
Wywietl, a w polu (ID) wyswietlButton. Nastpnie dwukrotnie j
kliknij. Visual Studio otworzy edytor kodu strony i umieci kursor
w metodzie wyslijButton_Click. W metodzie dodaj nastpujcy kod:
if (plecDropDownList.SelectedValue=="K")
{Response.Redirect("Kobieta.aspx?imie=" + imieTextBox.Text); }
else if (plecDropDownList.SelectedValue == "M")
{Response.Redirect("Mezczyzna.aspx?imie=" + imieTextBox.Text); }
3. Dodaj now
stron do
projektu
zawierajc
pytania dla kobiet
Wybierz menu Website -> Add Add New Item lub wcinij Ctrl+Shift+A
lub w oknie Solution Explorer kliknij prawym przyciskiem myszy i
wybierz Add New Item (Rys. 14).

Rys. 14 Okno Add New Item
Piotr Bubacz Modu 4
Strona 4-20
Okrel nastpujce elementy dla nowej strony:
nazwa: Kobieta.aspx
jzyk: Visual C#
opcja Place code in separate file zaznaczona
opcja Select master page niezaznaczona
4. Pobierz dane
przesane do
strony przy
pomocy metody
GET
Do nowej strony dodaj kontrolk Label. i w oknie Properities w polu (ID)
wpisz wyswietlLabel i usu zwarto pola Text.
otworzy edytor kodu strony i umieci kursor metodzie Page_Load.
Do metody dodaj kod pobierajcy dane z poprzedniej strony przesane
w parametrze imie adresu URL:
wyswietlLabel.Text = "Witaj " + Request.QueryString["imie"];
5. Umie
pytania do ankiety
W pliku Kobieta.aspx poniej kontrolki Label dodaj elementy
umoliwiajce pobranie informacji od uytkownika serwisu: wpisz E-
mail: i dodaj kontrolk TextBox. Nadaj jej odpowiedni waciwo ID.
Kolejno dodaj w osobnych wierszach kontrolki TextBox wraz z
poprzedzajcymi je informacjami umoliwiajce pobranie nastpujcych
danych:
wzrost
numer ubrania
numer buta
obwd biustu
talia
biodra
Na dole strony dodaj kontrolk Button i w oknie Properities w polu Text
wpisz Wywietl, a w polu (ID) wyswietlButton. Nastpnie dwukrotnie
j kliknij. W metodzie wyslijButton_Click dodaj nastpujcy kod:
Server.Transfer("Dziekujemy.aspx?imie=" +
Request.QueryString["imie"]);
6. Dodaj now
stron do
projektu
zawierajc
podzikowania za
wypenienie
ankiety
Dodaj now stron do projektu. Okrel nastpujce elementy dla nowej
strony:
nazwa: Dziekujemy.aspx
jzyk: Visual C#
Do nowoutworzonej strony dodaj kontrolk Label. Okrel jej waciwo
ID na wyswietlLabel, natomiast waciwo Text zostaw pust.
Do metody dodaj kod pobierajcy dane z poprzedniej strony przesane
wyswietlLabel.Text = Request.QueryString["imie"] +
", dzikujemy za wypenienie ankiety";
7. Dodaj now
stron do
projektu
zawierajc
Dodaj now stron do projektu. Okrel nastpujce elementy dla nowej
strony:
nazwa: Mezczyzna.aspx
jzyk: Visual C#
Piotr Bubacz
pytania dla
mczyzn i
pobierz dane
przesane przy
pomocy metody
GET
Do
wpisz
otworzy edytor kodu strony i umieci kursor metodzie
Do
w
8. Umie
pytania do ankiety
W pliku
umoliwiajce pobranie informacji od uytkownika serwisu: wpisz
mail
Kolejno dodaj w osobnych wierszach kontrolki
z
nastpujcych danych:
Na dole strony dodaj kontrolk

wpisz
kliknij. W meto
9. Przetestuj
stron
Zapisz zmiany i uruchom stron
swoje imi,

Strona 4-21
Do nowej strony dodaj kontrolk Label i w oknie
wpisz wyswietlLabel i usu zwarto pola Text.
otworzy edytor kodu strony i umieci kursor metodzie
Do metody dodaj kod pobierajcy dane z poprzedniej strony
W pliku Mezczyzna.aspx poniej kontrolki Label
umoliwiajce pobranie informacji od uytkownika serwisu: wpisz
mail: i dodaj kontrolk TextBox. Nadaj jej odpowiedni waciwo
Kolejno dodaj w osobnych wierszach kontrolki
poprzedzajcymi je informacjami umoliwiajce pobranie
nastpujcych danych:
wzrost
numer ubrania
numer buta
obwd klatki
obwd pasa
Na dole strony dodaj kontrolk Button i w oknie Properities
wpisz Wylij, a w polu (ID) wyslijButton. Nastpnie dwukrotnie
kliknij. W metodzie wyslijButton_Click dodaj nastpujcy kod
Zapisz zmiany i uruchom stron Default.aspx. W oknie tekstowym podaj
swoje imi, wybierz pe, a nastpnie wcinij przycisk
Dlaczego zastosowano Server.Transfer
wyslijButton_Click? Co to umoliwia?

Modu 4
i w oknie Properities w polu (ID)
metody dodaj kod pobierajcy dane z poprzedniej strony przesane
Label dodaj elementy
umoliwiajce pobranie informacji od uytkownika serwisu: wpisz E-
. Nadaj jej odpowiedni waciwo ID.
Kolejno dodaj w osobnych wierszach kontrolki TextBox wraz
umoliwiajce pobranie
Properities w polu Text
astpnie dwukrotnie j
nastpujcy kod:
. W oknie tekstowym podaj
a nastpnie wcinij przycisk Wywietl.
Server.Transfer w metodzie
Piotr Bubacz Modu 4
Strona 4-22
Po ukoczeniu poprzedniego zadania postanowie pokaza ankiet Twojemu koledze,
prowadzcemu agencj modeli i modelek. Bardzo spodoba mu si pomys na now stron dla
agencji. Ju dawno myla o takiej ankiecie na swojej stronie, aby uatwi sobie prowadzenie
rekrutacji i poszerzy swoj baz modeli i modelek.
W zwizku z tym zgodzie si przygotowa serwis internetowy dla agencji modelek i modeli
Modelinki. Twoim zadaniem jest opracowanie wygldu strony i przygotowanie strony gwnej, na
ktrej powiniene umieci m.in. link do ankiety. Strona ankiety musi umoliwi pobranie od
kadego chtnego do pracy w charakterze modela nastpujcych informacji:
imi
nazwisko
adres zamieszkania
telefon
e-mail
wiek
wzrost
waga
kolor wosw
kolor oczu
rozmiar ubrania
numer butw
dowiadczenie (wybierane od 1 do 5)
pe
Na podstawie pci naley pobra nastpujce informacje:
w przypadku kobiet:
obwd biustu
wielko miseczki
talia
biodra
dugo nogi
w przypadku mczyzn:
klatka
pas
dugo nogi
Na stronie z podzikowaniem za wypenienie ankiety powinno znale si podsumowanie
podanych w ankiecie informacji. Wszystkie strony aplikacji powinny mie spjny wygld.
Piotr Bubacz
Modu 5
Wersja 1
Kontrolki serwerowe
Spis treci
Kontrolki serwerowe ............................................................................................................................ 1

Piotr Bubacz Modu 5
ITA-103 Aplikacje Internetowe Kontrolki serwerowe
Strona 5-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce kontrolek dostpnych w
ASP.NET. Poznasz rnice midzy kontrolkami serwerowymi HTML a
kontrolkami Web. Nauczysz si wykorzystywa nie tylko rne kontrolki
serwerowe, ale rwnie walidowa wprowadzone dane po stronie klienta
lub/i po stronie serwera.
Cel moduu
Celem moduu jest przedstawienie moliwoci programowego
wykorzystania kontrolek serwerowych oraz prostej walidacji danych po
stronie klienta.
umia programowo odwoywa si do zoonych kontrolek
serwerowych
potrafi walidowa dane wprowadzane po stronie klienta
umia wykorzystywa rozbudowane kontrolki, takie jak MultiView
i AdRotator
wiedzia co to jest cykl ycia strony i w jaki sposb moesz sprawdzi,
czy strona jest przesana po raz pierwszy do klienta
Wymagania wstpne
zna podstawy jzyka XHTML.
tworzenia stron internetowych
Mapa zalenoci moduu
w moduach Podstawy HTML, Kaskadowe Arkusze Stylw CSS i
Wprowadzenie do ASP.NET.

Piotr Bubacz Modu 5
Strona 5-3
Przykadowy problem
Posiadamy ju wiedz dotyczc tworzenia aplikacji internetowych, dodawania prostych kontrolek
do strony, dodawania stron do aplikacji oraz przesyania informacji midzy stronami. Nadszed czas
na powaniejsze zadania.
Podstawowym problemem, z jakim spotykaj si twrcy aplikacji internetowych, jest sprawdzanie
poprawnoci danych wprowadzanych przez uytkownika. Walidacj powinnimy zawsze realizowa
po stronie serwera, istniej jednak sytuacje, w ktrych wstpne sprawdzenie danych warto
przeprowadzi ju po stronie klienta, np. gdy chcemy upewni si, czy wymagane pola zostay
wypenione lub czy format wprowadzonych danych jest prawidowy. Moemy to zrealizowa przy
pomocy wasnych skryptw napisanych w JavaScript, jednak najpierw musimy pozna ten jzyk,
a najczciej rwnie rnice w jego interpretacji przez rne przegldarki. Na szczcie
programicie ASP.NET do podstawowej walidacji wystarczy jedynie znajomo kilku kontrolek.
Innym problemem, z jakim moemy si spotka, jest konieczno prezentowania rnych
elementw na stronie w zalenoci od potrzeb. W module 3 wykorzystalimy dwie dodatkowe
strony do wywietlenia ankiety w zalenoci od pci uytkownika. Na pewno istnieje lepsze
rozwizanie tego problemu.
Kontrolki serwerowe ASP.NET moemy podzieli na dwie grupy: kontrolki Web i kontrolki HTML.
Komponentw z tej pierwszej grupy uywalimy ju w module 3. Kontrolki HTML to zwyke
elementy HTML, do ktrych moemy odwoywa si w kodzie strony.
Niezalenie od rodzaju kontrolki, przed przesaniem do klienta jest ona przeksztacana na kod
znacznikw zgodny ze standardem XHTML. Wygenerowany kod moe wyglda rnie, gdy
ASP.NET stara si dostosowa go do moliwoci, jakie oferuje przegldarka uytkownika.
Programista ma wpyw nie tylko na wygld kontrolki, , ale moe rwnie okreli pewne jej
zachowania, np. ktra kontrolka bdzie aktywna po wywoaniu strony.
Kontrolki HTML
Serwerowe kontrolki HTML definiuje si jak zwyke elementy HTML, nadajc im dodatkowo atrybut
runat="Server". W celu identyfikacji kontrolki oraz moliwoci programowego odwoywania si
do niej naley nada jej atrybut ID. Kontrolki te musz by umieszczone w znaczniku <form>, ktry
rwnie musi posiada atrybut runat="Server".
Serwerowe kontrolki HTML umoliwiaj m.in.:
programowe odwoywanie si do kontrolek z poziomu kodu aplikacji
obsug zdarze po stronie serwera
wspprac z walidatorami
wizanie waciwoci ze rdem danych
Kontrolki Web
Kontrolki Web, w porwnaniu do kontrolek serwerowych HTML, opisuj elementy strony na
wyszym poziomie abstrakcji. Cho po stronie klienta widoczne s jako standardowe znaczniki
HTML, po stronie serwera udostpniaj wiele zaawansowanych funkcjonalnoci.
Podstawowe kontrolki Web
Do podstawowych kontrolek nale:
Label wywietla statyczny tekst
Piotr Bubacz Modu 5
Strona 5-4
TextBox wywietla pole tekstowe
Button wywietla przycisk
LinkButton wywietla odnonik zachowujcy si jak przycisk
ImageButton wywietla obrazek, ktry po klikniciu myszk dziaa jak przycisk
HyperLink wywietla odnonik, ktry uytkownik moe klikn aby przenie si na inn
stron
DropDownList wywietla rozwijan list wyboru
ListBox wywietla list wielokrotnego wyboru
CheckBox wywietla pole wyboru
CheckBoxList wywietla list zoon z pl wyboru
Image wywietla obrazek
ImageMap wywietla obrazek z opcjonalnie zdefiniowan map aktywnych obszarw
Table wywietla tabel
BulletedList wywietla list numerowan lub wypunktowan
HiddenField tworzy ukryte pole
Literal wywietla statyczn zawarto
Rozbudowane kontrolki Web
rodowisko ASP.NET udostpnia nie tylko podstawowe kontrolki Web, ale rwnie bardziej zoone
komponenty. Przykadem takiej rozbudowanej kontrolki Web jest kontrolka MultiView. Kontrolka
ta umoliwia dynamiczne prezentowanie i ukrywanie zawartoci przed uytkownikiem. Definiuje
ona widoki, reprezentowanych przez kontrolk View. Tylko jeden widok moe by w danej chwili
widoczny dla uytkownika. Przykadowo kontrolki MultiView moemy uy nastpujco:
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="stronaView" runat="server">

</asp:View>
<asp:View ID="produktyView" runat="server">

</asp:View>
<asp:View ID="dziekujemyView" runat="server">

</asp:View>
</asp:MultiView>
Zmiana aktualnie wywietlonego widoku moliwa jest po komunikacji z serwerem za pomoc
metody SetActiveView.
MultiView1.SetActiveView(stronaView);
Kontrolki MultiView mona rwnie zagnieda, tworzc zoone struktury umoliwiajce
praktycznie dowolne manipulowanie zawartoci strony.
Innym przykadem rozbudowanej kontrolki Web jest kontrolka AdRotator. Umoliwia ona
wywietlanie elementw graficznych z odnonikami (najczciej reklam) na stronie. AdRotator
losowo wybiera grafik z uprzednio przygotowanej listy. Moliwe jest rwnie ledzenie iloci
klikni.
Aby skorzysta z kontrolki naley przygotowa elementy graficzne oraz odnoniki do zasobw.
Nastpnie naley przygotowa plik XML, w ktrym okrelimy wczeniej przygotowane informacje,
np.:
<Advertisements>
<Ad>
<ImageUrl>~/Adv/Adv1.png</ImageUrl>
<NavigateUrl>http://www.asp.net</NavigateUrl>
Piotr Bubacz Modu 5
Strona 5-5
<AlternateText>Strona gwna ASP.NET </AlternateText>
</Ad>
<Ad>
<NavigateUrl>http://www.codeplex.com</NavigateUrl>
<AlternateText>Projekty OpenSource - CodePlex </AlternateText>
</Ad>
</Advertisements>
Plik XML zawiera predefiniowane atrybuty umieszczone w Tab. 1. Tylko atrybut ImageUrl jest
wymagany.
Tab. 1 Atrybuty pliku XML dla kontrolki AdRotator
Atrybut Opis
ImageUrl Adres URL wywietlanego obrazka.
Height Wysoko obrazka w pikselach.
Width Szeroko obrazka w pikselach.
NavigateUrl Adres URL, do ktrego zostanie przekierowany uytkownik po klikniciu na
kontrolk.
AlternateText Tekst wywietlany w przypadku, kiedy obrazek nie jest dostpny.
Keyword Kategoria dla reklamy. Jest uywana w kontrolce AdRotator do filtrowania listy
reklam dla okrelonej kategorii.
Impressions Warto okrelajca, jak czsto reklama jest wywietlana w stosunku do innych
reklam. Im wiksza warto, tym wiksza czstotliwo wywietlania reklamy.
Suma wszystkich wartoci nie moe przekroczy 2 047 999 999.
Sprawdzanie poprawnoci wpisywanych danych
Typowym zadaniem przy projektowaniu stron Web jest walidacja danych wprowadzonych przez
uytkownika. Uytkownik moe celowo lub przez pomyk poda bdne dane, ktre mog
spowodowa niepodane dziaanie aplikacji. W ASP.NET s dostpne specjalne kontrolki, ktre w
prosty sposb umoliwiaj implementacj sprawdzania poprawnoci wpisanych danych.
Kontrolki sprawdzajce poprawno danych wprowadzanych przez uytkownika
Kontrolki do sprawdzania poprawnoci danych wprowadzanych przez uytkownika nazywane s
walidatorami. Walidator jest powizany z wybran kontrolk na stronie, ktra umoliwia
wprowadzanie danych przez uytkownika.
Ze wzgldu na rne typy wpisywanych danych, istniej rne kontrolki sprawdzajce. Jedna
kontrolka wejciowa moe by nadzorowana przez kilka walidatorw (kontrolujcych np. czy
wprowadzono warto oraz czy dana warto jest poprawna). Dodatkowo przygotowano kontrolk
wywietlajc podsumowanie bdw na stronie.
Kady walidator posiada nastpujce waciwoci:
ControlToValidate ustawia lub zwraca identyfikator kontrolki, ktr sprawdza
walidator
Display ustawia lub zwraca sposb wywietlania i rezerwowania miejsca na stronie na
komunikaty o bdach
ErrorMessage ustawia lub zwraca tre komunikatu bdu sprawdzania poprawnoci
umieszczonego w podsumowaniu bdw
IsValid ustawia lub zwraca informacje o poprawnoci weryfikowanych danych
Piotr Bubacz Modu 5
Strona 5-6
Text ustawia lub zwraca tre komunikatu bdu sprawdzenia poprawnoci wywietlanego
na stronie
Kontrolka RequiredFieldValidation
W celu sprawdzenia, czy uytkownik wypeni wymagane pole, wykorzystuje si kontrolk
RequiredFieldValidation:
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="imieStronaTextBox"
ErrorMessage="Pole Imi jest wymagane">*
</asp:RequiredFieldValidator>
Najwaniejsze elementy konfiguracji kontrolki to:
ControlToValidate="imieStronaTextBox" ID kontrolki do sprawdzenia
ErrorMessage="Pole Imi jest wymagane" komunikat pojawiajcy si w polu
podsumowania informujcy uytkownika o bdzie
* symbol wywietlany w miejscu walidatora w przypadku nie wpisania wartoci w polu
Kontrolka CompareValidator
W celu porwnania wartoci midzy sob, wykorzystuje si kontrolk CompareValidator.
Kontrolki tej uywa si m.in. do sprawdzenia wieku uytkownika lub porwnywania
wprowadzonych danych ze zdefiniowan sta.
Zachowanie kontrolki zaley od nastpujcych waciwoci:
ValueToCompare zawiera sta, z jak porwnywana jest warto wprowadzona przez
uytkownika
ControlToCompare zawiera ID kontrolki, z jak ma by porwnana warto w
sprawdzanej kontrolce
Typ definiuje typ porwnywanych danych, moliwe typy danych:
String (domylny) typ acuchowy
Integer typ cakowity
Double typ zmiennoprzecinkowy
Currency typ waluty
Date typ daty
Operator okrela sposb porwnania:
Equal sprawdza, czy wartoci s sobie rwne (ustawione domylnie)
NotEqual sprawdza, czy wartoci s rne
GreaterThan sprawdza, czy jedna warto jest wiksza od drugiej
GreaterThanEqual sprawdza, czy jedna warto jest wiksza lub rwna drugiej
LessThan sprawdza, czy jedna warto jest mniejsza od drugiej
LessThanEqual sprawdza, czy jedna kontrolka jest mniejsza lub rwna drugiej
DataTypeCheck sprawdza poprawno typw danych
Przykadowo by sprawdzi, czy podana ilo lat jest wiksza ni 18, moemy uy nastpujcej
definicji:
<asp:CompareValidator runat="server" id="CompareValidator1"
ControlToValidate=" wiekTextBox " ValueToCompare="18"
Operator="GreaterThanEqual" Type="Integer"
ErrorMessage="Musisz mie co najmniej 18 lat."> *
</asp:CompareValidator>
Piotr Bubacz Modu 5
Strona 5-7
Kontrolka RangeValidator
W celu sprawdzenia, czy podana warto mieci si w okrelonym zakresie, wykorzystuje si
kontrolk RangeValidator. Najwaniejsze waciwoci kontrolki to:
MinimumValue warto minimalna zakresu
MaximumValue warto maksymalna zakresu
Type typ danych
Dla przykadu by sprawdzi, czy podana liczba mieci si w zakresie od 1 do 5, moemy
skonfigurowa walidator nastpujco:
<asp:RangeValidator ID="RangeValidator1" runat="server"
ControlToValidate="ocenaStronaTextBox"
ErrorMessage="Podaj liczb w przedziale od 1 do 5" MinimumValue="1"
MaximumValue="5" Type="Integer">*
</asp:RangeValidator>
Kontrolka RegularExpressionValidator
W celu sprawdzenia, czy wprowadzona warto pasuje do okrelonego wzorca, wykorzystuje si
kontrolk RegularExpressionValidator. Kontrolki t uywa si do sprawdzania,
czy poprawnie podano kod pocztowy, adres mailowy, numer NIP itp. Do sprawdzenia poprawnoci
naley poda w atrybucie ValidationExpression wyraenie regularne (ang. regular
expression).
Przykadowo walidator zdefiniowany jak poniej moe zosta uyty do sprawdzenia, czy uytkownik
wprowadzi w polu tekstowym poprawny adres e-mail:
<asp:RegularExpressionValidator ID="RegularExpressionValidator2"
runat="server" ControlToValidate="emailProduktyTextBox"
ErrorMessage="Podaj poprawny adres e-mail"
ValidationExpression= "\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*
</asp:RegularExpressionValidator>
Podczas projektowania w Visual Studio mamy moliwo wyboru gotowego wyraenia regularnego
spord najczciej uywanych (Rys. 2).

Rys. 2 Edytor wyrae regularnych
Kontrolka CustomValidator
W celu sprawdzenia bardziej zoonych warunkw wykorzystuje si kontrolk CustomValidator.
By sprawdzi poprawno danych, wywouje ona funkcje dostarczone przez programist.
Piotr Bubacz Modu 5
Strona 5-8
Kontrolka ValidationSummary
Do wywietlenia podsumowania bdw na stronie wykorzystuje si kontrolk
ValidationSummary. Wywietla ona komunikaty zawarte w atrybutach ErrorMessage
walidatorw, ktre wykryy bdy w nadzorowanych kontrolkach.
Przykad:
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
HeaderText="Bdy na stronie:" ShowSummary="true"
DisplayMode="BulletList"/>
Zapamitywanie stanu kontrolki
Przegldajc kod HTML wygenerowany na podstawie formularza ASP.NET nie sposb przeoczy
ukrytego pola __VIEWSTATE, ktre moe wyglda tak:
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNzgzNDMwNTMzZGQlb8soeikaTu0we7QLkZItEc5wTQ==" />
ViewState mona przetumaczy jako stan strony. Przechowuje on informacj dotyczce
umieszczonych na niej kontrolek, np. zawarto pola tekstowego czy indeks listy z wynikami
wyszukiwania.
ViewState domylnie jest zapamitywany w kodzie strony. Przy duej liczba kontrolek na stronie
moe to prowadzi do znacznego zwikszenie rozmiaru dokumentu HTML przesyanego do klienta.
Naley rwnie wiedzie, e pole to nie jest szyfrowane, a jedynie kodowane przy pomocy Base64.
Za pomoc odpowiednich aplikacji mona podejrze jego zawarto.
Na szczcie ViewState mona wyczy dla wybranych stron lub kontrolek, korzystajc z atrybutu
EnableViewState dyrektywy @Page lub waciwoci o tej samej nazwie.
Wykorzystanie zdarze zwizanych ze stron
W module 3 poznalimy zdarzenia zwizane z interakcj uytkownika z kontrolkami.
Wspomnielimy, e istnieje rwnie grupa zdarze zwizanych z aplikacj oraz stron. W tym
miejscu przyjrzymy si zdarzeniom zwizanym ze stron.
W momencie, gdy uytkownik zada wywietlenia wybranego formularza ASP.NET, nastpuje seria
zdarze zwizanych ze stron. Wystpuj one zawsze w tej samej kolejnoci, ktra jest opisywana
jako cykl ycia strony.
Do najwaniejszych zdarze zwizanych z cyklem ycia strony nale:
1. Init jest wywoywane, gdy strona jest inicjowana.
2. Load jest wywoywane, gdy kontrolki na stronie zostay utworzone i zainicjalizowane.
3. Zdarzenia kontrolek s wywoywane np. w przypadku zmiany wartoci na licie lub
kliknicia przycisku.
4. Unload jest wywoywane po przesaniu kodu HTML do klienta, gdy obiekt strony jest
wyadowywany z pamici.
Zdarzenia te nastpuj po sobie w takiej kolejnoci, w jakiej zostay wymienione.
W ASP.NET formularz jest zaprojektowany do wysyania informacji do strony w celu jej
przetwarzania. Proces nazywa si komunikacja zwrotn (ang. postback). Komunikacja zwrotna
moe wystpi przy okrelonym dziaaniu uytkownika. Standardowo inicjuj j kontrolki
przyciskw, np. Button lub LinkButton. Moliwe jest rwnie przesanie strony po interakcji z
innymi kontrolkami w tym celu naley ustawi waciwo AutoPostBack. Dla przykadu jeli
chcemy, aby zmiana w licie rozwijanej spowodowaa przesanie strony do serwera, naley uy
nastpujcej definicji:
Piotr Bubacz Modu 5
Strona 5-9
<asp:DropDownList ID="plecDropDownList" runat="server" AutoPostBack="True">
<asp:ListItem Value="K">Kobieta</asp:ListItem>
<asp:ListItem Value="M">Mczyzna</asp:ListItem>
</asp:DropDownList>
Po stronie serwera bdziemy mogli wykona kod np. w metodzie obsugi zdarzenia
SelectedIndexChanged obiektu listy.
Czasem zachodzi potrzeba wykrycia, czy strona jest adowana po raz pierwszy. Jest to wane m.in.
ze wzgldu na potrzeb inicjalizacji wartoci kontrolek przy pierwszym przesaniu ich do klienta. W
kolejnych daniach zaley nam ju tylko na sprawdzeniu tego, co uytkownik zmieni na stronie.
W celu sprawdzenia, czy strona jest po raz pierwszy przesana do klienta, naley uy waciwoci
IsPostBack, zwracajcej warto true kiedy strona jest po raz kolejny wysyana do klienta (po
komunikacji zwrotnej) lub false, kiedy jest przesyana do niego po raz pierwszy. Przykad
wykorzystania:
private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack) {
// ten kod wykona si tylko przy pierwszym wysyaniu do klienta
}
// ten kod wykona si przy kadym daniu klienta
}
Podsumowanie
W tym rozdziale przedstawione zostay informacje dotyczce kontrolek serwerowych a ASP.NET.
Dowiedziae si, jak uywa rozbudowanych kontrolek tj. MulitView i AdRotator oraz poznae
zasady pracy z kontrolkami umoliwiajcymi walidacj danych. Dodatkowo wiesz ju, jak wyglda
cykl ycia strony i w jaki sposb moesz sprawdzi, czy strona jest po raz pierwszy przesyana do
klienta.
Wykorzystywanie osadzonych kontrolek MulitView
Zobaczmy, jak mona wykorzysta zaawansowane kontrolki ASP.NET do rozwizania typowego
problemu, z jakim moemy si spotka w pracy programisty aplikacji Web. W tym celu posuymy
si bardziej rozbudowanym przykadem, w ktrym osadzimy kilka kontrolek MultiView w sobie.
Wyobramy sobie, e chcemy zaprojektowa ankiet, ktra posiada cz wspln i cz zalen
np. od wybranego elementu na stronie. Przykadowo na podstawie wybranej pci chcemy zada
odpowiednie pytania. Dodatkowo chcemy mie moliwo wywietlenia podsumowania wpisanych
przez uytkownika informacji.
Zacznijmy od idei rozwizania. Gwnymi elementami naszej strony s: ankieta i podsumowanie.
W ankiecie na podstawie wybranej z listy rozwijanej pci chcemy wywietli odpowiednie pytania.
Szkic kontrolek prezentuje Rys. 3.
Piotr Bubacz Modu 5
Strona 5-10

Rys. 3 Szkic kontrolek
Tworzenie strony rozpoczynamy od zewntrznej kontrolki MulitView. Dodajemy do niej dwie
kontrolki View o ID odpowiednio: Ankieta i Podsumowanie:
<asp:MultiView ID="Multiview1" runat="server">
<asp:View ID="Ankieta" runat="server">
</asp:View>
<asp:View ID="Podsumowanie" runat="server">
</asp:View>
</asp:MultiView>
Nastpnie do kontrolki o ID="Ankieta" dodajemy list rozwijan umoliwiajc okrelenie pci.
Dodatkowo chcemy zapewni, aby po zmianie wywietlanej wartoci nastpio wysanie strony do
serwera i zmiana wywietlanego widoku. Aby to umoliwi musimy okreli waciwo
AutoPostBack="True":
<asp:DropDownList ID="plecDropDownList" runat="server" AutoPostBack="True">
<asp:ListItem Value="K">Kobieta</asp:ListItem>
<asp:ListItem Value="M">Mczyzna</asp:ListItem>
</asp:DropDownList>
Dodajmy rwnie zagniedon kontrolk MultiView zawierajc odpowiednie widoki dla kobiet i
dla mczyzn:
<asp:MultiView ID="MultiView2" runat="server">
<asp:View ID="Kobieta" runat="server">
Pytania dla kobiet
</asp:View>
<asp:View ID="Mezczyzna" runat="server">
Pytania dla mczyzn
</asp:View>
</asp:MultiView>
Teraz, aby moliwe byo wybranie odpowiedniego widoku w kontrolce MultiView2, musimy
napisa metod obsugi zdarzenia SelectedIndexChanged kontrolki plecDropDownList. Aby
j doda, naley w oknie Properties wybra ikon Events, a nastpnie dwukrotnie klikn
SelectedIndexChanged. Do metody naley doda nastpujcy kod:
if (plecDropDownList.SelectedValue=="K") {
MultiView2.SetActiveView(Kobieta);
}
else if (plecDropDownList.SelectedValue == "M") {
MultiView2.SetActiveView(Mezczyzna);
}
Piotr Bubacz Modu 5
Strona 5-11
Teraz musimy zapewni, e przy pierwszym przesaniu strony do klienta zostanie wybrany widok
ankiety (MultiView1) oraz czci przeznaczonej dla kobiet (ze wzgldu na domyln warto
wybran w licie rozwijanej). W tym celu do metody Page_Load naley doda nastpujcy kod:
if (!IsPostBack) {
Multiview1.SetActiveView(Ankieta);
MultiView2.SetActiveView(Kobieta);
}
Na koniec musimy jeszcze doda przycisk, ktry wyle ankiet do serwera. W metodzie obsugi
zdarzenia Click zmienimy widok na Posumowanie:
Multiview1.SetActiveView(Podsumowanie);
Moemy teraz uruchomi stron i sprawdzi, czy wszystko dziaa jak naley.
Losowe wywietlanie reklam na stronie
Czsto zachodzi potrzeba wywietlania na stronie reklam naszych produktw bd te reklam
prowadzcych do innych witryn. W ASP.NET moemy w tym celu wykorzysta kontrolk
AdRotator. Do poprawnego dziaania wymaga ona co najmniej podania adresu URL obrazka, ktry
ma zosta wywietlony w charakterze reklamy. Dodatkowo moemy sprecyzowa inne informacje.
Wszystkie wymagane dane umieszczamy w pliku XML o dowolnej nazwie, np. adv.xml. Przykad
zawartoci pliku:
<Advertisements>
<Ad>
</Ad>
</Advertisements>
Zarwno adres URL obrazka (ImageUrl), jak i miejsca docelowego (NavigateUrl), do ktrego
zostanie przeniesiony uytkownik po klikniciu reklamy, moe by wzgldny lub bezwzgldny. W
celu zapewnienia zgodnoci z XHTML 1.0 naley rwnie zdefiniowa tekst zastpczy
(AlternateText), ktry bdzie wywietlany przez przegldark uytkownika podczas adowania
obrazka lub gdy nie zostanie on odnaleziony.
Porady praktyczne
Uywanie kontrolek
Staraj si nadawa kontrolkom znaczce nazwy, np. WyslijButton zamiast Button1.
Uatwi to Tobie i innym programistom zrozumienie kodu i przeznaczenia poszczeglnych
elementw na stronie.
Wielu programistw do nazw kontrolek dodaje ich typ, np. w formie przyrostka. W ten
sposb piszc kod mog oni szybko zorientowa si, do jakiego rodzaju elementw si
odwouj. Moliwo szybkiego okrelenia typu kontrolki jest szczeglnie wana, gdy
korzysta si w Visual Studio z okna Document Outline, przedstawiajcego hierarchi
elementw na stronie. Zdarza si rwnie, e programici w nazwach kontrolek stosuj tzw.
notacj wgiersk, czyli prefiksuj je skrtem waciwym dla typu elementu, np. btn dla
przyciskw lub lbl dla etykiet. Dziki temu kontrolki tego samego rodzaju s wywietlane
jedna po drugiej na licie prezentowanej przez dostpny w Visual Studio mechanizm
autouzupeniania. Powiniene rozway stosowanie jednej z tych konwencji przy nazywaniu
elementw.
Najlepiej nadawaj kontrolkom nazwy tu po wstawieniu ich na stron. Visual Studio
wykorzystuje waciwo ID m.in. do automatycznego generowania nazw dla metod obsugi
Piotr Bubacz Modu 5
Strona 5-12
zdarze. Jeli zmienisz identyfikator kontrolki, nazwy tych metod nie zostan zaktualizowane,
za ich rczna zmiana moe by kopotliwa, gdy wymaga przerbek w kilku miejscach.
Kontrolek HTML uywaj wtedy, gdy chcesz mie wiksz kontrol nad kodem generowanym
dla klienta. Pamitaj, e najwaniejsze z nich maj swoje odpowiedniki wrd kontrolek Web,
ktre oferuj wiksze moliwoci i bardziej abstrakcyjny model programowania. Jeeli nie
jeste pewien, jakiego rodzaju kontrolk wybra, korzystniej bdzie zdecydowa si na
kontrolk Web.
By mc odwoywa si do wybranego elementu HTML w kodzie po stronie serwera, musisz
nada mu atrybut runat="Server" oraz unikatowe ID. Jeli zapomnisz o pierwszym
z atrybutw, warto ID bdzie traktowana wycznie jako identyfikator elementu w
wynikowym dokumencie HTML, w efekcie bdziesz mg odwoywa si do niego jedynie w
kodzie JavaScript wykonywanym po stronie klienta.
W kontrolkach DropDownList oraz CheckBoxList staraj si dla kadego elementu listy
okreli nie tylko waciwo Text, ale rwnie Value. Dziki temu w kodzie bdziesz mg
odwoywa si do nich nie polegajc na tym, jak s uoone lub wywietlane uytkownikowi.
Kontrolki inicjujce komunikacj zwrotn z serwerem, takie jak Button lub LinkButton,
mog by uyte w poczeniu z ASP.NET AJAX do wysyania da asynchronicznych.
W kontrolce MultiView ustalajc widoczn kontrolk uywaj metody SetActiveView
i nazwy kontrolki View, a nie waciwoci ActiveViewIndex.
Kontrolk AdRotator mona wykorzysta nie tylko do wywietlania losowych banerw
reklamowych rwnie dobrze mog to by zwyke obrazki.
Jeli na stronie uywasz kontrolki AdRotator i chcesz, by wynikowy dokument by zgodny ze
standardem XHTML, powiniene dla kadego wywietlanego obrazka okreli waciwo
AlternateText.
Walidacja danych
Walidacj danych po stronie klienta powiniene stosowa jedynie w celu ograniczenia ruchu
do serwera, by w ten sposb zmniejszy koszty utrzymania aplikacji i zwikszy czas jej
odpowiedzi w przypadku wprowadzenia przez uytkownika nieprawidowych informacji. Po
otrzymaniu danych po stronie serwera powiniene zawsze walidowa je ponownie.
Uytkownik moe stosunkowo atwo obej zabezpieczenia po stronie klienta i wymusi lub
upozorowa komunikacj zwrotn. Jeli nie zabezpieczysz aplikacji po stronie serwera, moe
ona pa ofiar gronych atakw, takich jak SQL Injection czy XSS (ang. Cross Site Scripting).
Zdecydowana wikszo walidatorw wymaga, aby okreli ich waciwo
ControlToValidate. Wyjtkiem jest CustomValidator, ktry moe suy do
sprawdzania poprawnoci danych wprowadzonych w wielu rnych kontrolkach.
Korzystajc z CompareValidator do sprawdzenia poprawnoci danych po stronie klienta
powiniene pamita, e format liczb zmiennoprzecinkowych, daty oraz wartoci
walutowych zaley od ustawie przegldarki lub systemu operacyjnego uytkownika. Dane
uznane za poprawne po stronie klienta mog w zwizku z tym spowodowa bd walidacji po
stronie serwera.
Pamitaj, e gdy korzystasz z walidacji po stronie klienta, wyraenie regularne uywane do
sprawdzania poprawnoci danych przez RegularExpressionValidator musi by
zrozumiae zarwno dla silnika wyrae regularnych uywanego po stronie serwera, jak i
tego, ktry jest dostpny w przegldarce uytkownika. Powiniene zatem ograniczy si do
pewnego podzbioru jzyka wyrae, ktry jest interpretowany tak samo przez
najpopularniejsze przegldarki oraz klasy do obsugi wyrae regularnych dostpne w .NET.
Obsuga zdarze zwizanych ze stron
Kade zdarzenie zwizane ze stron moesz obsuy na przynajmniej dwa sposoby.
Pierwszym, bardziej popularnym, jest przygotowanie metody o odpowiedniej sygnaturze.
Piotr Bubacz Modu 5
Strona 5-13
Metoda taka powinny mie zdefiniowany typ wartoci zwracanej jako void, przyjmowa
dwa parametry pierwszy typu object, drugi typu EventArgs oraz posiada nazw
utworzon poprzez dodanie do nazwy zdarzenia przedrostka Page_. Przykadem tak
zdefiniowanej metody jest generowana automatycznie przez Visual Studio metoda
Page_Load, ktra suy do obsugi zdarzenia Load strony. Ten sam efekt moesz uzyska
przysaniajc (ang. override) metod wirtualn, ktrej nazwa utworzona jest poprzez dodanie
do nazwy zdarzenia przedrostka On, np. OnLoad. Musisz wwczas pamita, by w jej ciele
wywoa odpowiedni metod z klasy bazowej, korzystajc ze sowa kluczowego base.
Za automatyczne kojarzenie metod ze zdarzeniami strony odpowiada mechanizm zwany
AutoEventWireup. Wie si on z pewnym narzutem, dlatego twrcy ASP.NET udostpnili
moliwo wyczenia go z poziomu dyrektywy @Page. Pamitaj, e jeli tak postpisz,
bdziesz musia samodzielnie kojarzy zdarzenia strony z odpowiednimi funkcjami obsugi
lub przysania odpowiadajce im metody wirtualne. Zazwyczaj nie ma potrzeby wyczania
mechanizmu AutoEventWireup.
Uwagi dla studenta
rozumiesz jak dziaaj kontrolki serwerowe w ASP i w jaki sposb moesz si programowo do
nich odwoa
umiesz tworzy zaawansowane strony internetowe bazujce na kontrolce MultiView
i wielu widokach
wiesz jak sprawdza poprawno danych wprowadzonych przez uytkownika
wiesz jak wyglda cykl ycia strony oraz w jaki sposb sprawdzi, czy strona jest po raz
pierwszy wysyana do uytkownika
1. ASP.NET QuickStart Tutorials, http://quickstarts.asp.net/QuickStartv20/aspnet
Na stronie w sekcji ASP.NET Control Reference znajdziesz podstawowe
informacje i przykady uycia wszystkich kontrolek dostpnych w ASP.NET.
2. Walkthrough: Displaying and Tracking Advertisements with the AdRotator Control,
http://msdn.microsoft.com/en-us/library/azwad69k.aspx
Na stronie zawarty jest opis moliwoci wykorzystania kontrolki AdRotator, ze
szczeglnym uwzgldnieniem moliwoci ledzenia iloci klikni kontrolki.
3. MultiView and View Web Server Controls Overview, http://msdn.microsoft.com/en-
us/library/ms227665.aspx
Na stronie zawarty jest opis kontrolki MultiView oraz przykady kodu.
4. Micha Jankowski, Walidacja danych w ASP.NET, http://www.codeguru.pl/article-635.aspx
Encyklopedyczny przegld walidatorw w jzyku polskim .
5. Anand Narayanaswamy, Performing Validations with ASP.NET,
http://www.codeguru.com/Csharp/.NET/net_asp/controls/article.php/c5349
Dwuczciowy artyku zawierajcy duo praktycznych przykadw wykorzystania
walidatorw.

Piotr Bubacz Modu 5
Strona 5-14
Jeste wacicielem niewielkiej firmy komputerowej wykonujcej rnego rodzaju zlecenia. Dzisiaj
przyszed do Ciebie prezes duego koncernu produkujcego rowery i zaproponowa, aby
przygotowa ankiet dla ich sklepu internetowego. Jeli si postarasz, to moe otrzymasz super
kontrakt na przygotowanie i wdroenie caej witryny sklepu.
Z jednej strony ma to by ankieta dla nowych klientw, planujcych dopiero zakup roweru, z
drugiej za firma myli o osobach, ktre ju nabyy rower i chciaaby ich zachci do wsplnego
podrowania, tworzc spoeczno uytkownikw jej produktw. W tym celu musi pozyska
informacj o preferencjach tej grupy klientw.
W ankiecie dla potencjalnego klienta powiniene pobra nastpujce informacje:
imi
pe
wiek
adres e-mail
telefon
adres zamieszkania
wzrost
rama roweru, do wyboru:
damska
mska
nie ma znaczenia
marka, do wyboru (mona zaznaczy kilka odpowiedzi):
Cateye
Giant
Kenda
Kross
nie ma znaczenia
rodzaj roweru, do wyboru:
grski
miejski
szosowy
BMX
dziecicy
nie wiem
kwota planowanych wydatkw
preferowany sposb kontaktu
W ankiecie dla osb ju posiadajcych rower firm interesuj takie dane, jak:
imi
pe
wiek
adres e-mail
telefon
adres zamieszkania
Piotr Bubacz Modu 5
Strona 5-15
rodzaj posiadanego roweru:
grski
miejski
szosowy
BMX
dziecicy
nie wiem
data ostatniej wycieczki
data nastpnej wycieczki
ilo kilometrw rednio na jednej wycieczce
poziom umiejtnoci
preferowany sposb kontaktu

1. Utwrz now
stron w Visual
Web Developer
2008 Express
Edition
Otwrz Visual Web Developer 2008 Express Edition.
Kliknij OK.
2. Wstaw linki do
ankiet na stronie
gwnej aplikacji
Na stronie Default.aspx wstaw dwa odnoniki wskazujce na ankiet dla
nowych klientw planujcych zakup nowego roweru oraz ankiet dla
osb ju posiadajcych rowery. W tym celu w widoku Source dodaj:
<a href="Ankieta.aspx?view=nowy">Ankieta dla nowych klientw</a>
<br />
<a href="Ankieta.aspx?view=wycieczki">Ankieta dla osb
posiadajcych rower</a>
3. Dodaj stron
Ankieta.aspx do
projektu.
Z listy Visual Studio installed templates wybierz Web Form.
W polu Name wpisz Ankieta.aspx.
Upewnij si, e opcja Place code in separate file jest zaznaczona.
Upewnij si, e opcja Select master page nie jest zaznaczona.
Kliknij OK.
4. Dodaj gwn
kontrolk
MultiView
Do formularza dodaj kontrolk MultiView, a nastpnie w oknie
Properties okrel waciwo ID na mainMultiView.
Dodaj do kontrolki MultiView dwie kontrolki View, nazywajc je po
kolei: ankietaGlowna i podsumowanie.
Piotr Bubacz
5. Przygotuj
wspln
pocztkow cz
obu ankiet
W kontrolce
E
nowej linii
W dodanej linii n
DropDownList
plecDropDownList
Items
Wcinij przycisk
Wcinij przycisk
Wcinij przycisk
Wcinij
Do formularza dodaj kontrolki
uytkownika nastpujcych danych:
6. Dodaj
kontrolk
MultiView
W kontrolce
dodaj kontrolk
Dodaj do kontrolki
kolei:

Strona 5-16
Zauwa, e mona wyoni cz wspln obydwu ankiet
W kontrolce ankietaGlowna w widoku Design
nter, a nastpnie umie kontrolk TextBox i
nowej linii. W oknie Properties okrel waciwo
W dodanej linii na formularzu napisz Pe:
DropDownList. W oknie Properties okrel wa
plecDropDownList. Kliknij Smart Tag dodanej kontrolki i wybierz
Items.
Wcinij przycisk Add, a nastpnie w obszarze ListItem
w polu Text wpisz Kobieta
w polu Value wpisz K
Wcinij przycisk Add, a nastpnie w obszarze ListItem properities
w polu Text wpisz Mczyzna
w polu Value wpisz M
Wcinij przycisk Add, a nastpnie w obszarze ListItem properities
w polu Text wpisz Nie podaj
w polu Value wpisz N
w polu Selected wybierz True
Wcinij OK.
Do formularza dodaj kontrolki TextBox umoliwiajce pobranie od
uytkownika nastpujcych danych:
e-mail (ID: emailTextBox)
telefon (ID: telTextBox)
ulica (ID: ulicaTextBox)
numer domu (ID: domTextBox)
numer mieszkania (ID: mieszTextBox)
kod pocztowy (ID: kodTextBox)
miejscowo (ID: miejscTextBox)
W kontrolce View o ID=AnkietaGlowna poniej dodanych kontrolek
dodaj kontrolk MultiView i nazwij j ankietaMultiView
Dodaj do kontrolki MultiView dwie kontrolki View
kolei: nowyView i wycieczkiView.
Modu 5
Kontrolki serwerowe
obydwu ankiet.
napisz Imi: i nacinij
i ponownie przejd do
o (ID) na imieTextBox.
Pe: i umie kontrolk
okrel waciwo (ID) na
dodanej kontrolki i wybierz Edit
ListItem properities:
umoliwiajce pobranie od
poniej dodanych kontrolek
ankietaMultiView.
View, nazywajc je po
Piotr Bubacz Modu 5
Strona 5-17
7. Dodaj
kontrolki do
kontrolki View -
Nowy
Ustaw kursor wewntrz kontrolki View o ID="nowyView".
Wpisz Wzrost: i w nowej linii dodaj kontrolk TextBox
o ID="wzrostTextBox".
Wpisz Rama roweru: i dodaj kontrolk DropDownList
o ID="ramaDropDownList". Kliknij Smart Tag i wybierz Edit Items.
Dodaj elementy o nastpujcych waciwociach, po czym zamknij okno:
tekst wywietlany: Damska, warto: D
tekst wywietlany: Mska, warto: M
tekst wywietlany: Nie ma znaczenia, warto: N, zaznaczenie
Wpisz Marka: i dodaj kontrolk ListBox o ID="markaListBox". Kliknij
Smart Tag i wybierz Edit Items.
tekst wywietlany: Cateye, warto: C
tekst wywietlany: Giant, warto: G
tekst wywietlany: Kenda, warto: Ke
tekst wywietlany: Kross, warto: Kr
tekst wywietlany: Nie ma znaczenia, warto: N, zaznaczenie
Wpisz Rodzaj roweru: i dodaj kontrolk ListBox o ID="rodzajListBox".
Kliknij Smart Tag i wybierz Edit Items.
tekst wywietlany: Grski, warto: G
tekst wywietlany: Miejski, warto: M
tekst wywietlany: Szosowy, warto: S
tekst wywietlany: BMX, warto: B
tekst wywietlany: Dziecicy, warto: D
tekst wywietlany: Nie wiem, warto: N, zaznaczenie
Wpisz Kwota planowanych wydatkw: i dodaj kontrolk
RadioButtonList o ID="cenaRadioButtonList". Dodaj do listy elementy
o nastpujcych waciwociach:
tekst wywietlany: Nie ma znaczenia, warto: 0, zaznaczenie
tekst wywietlany: do 500 z, warto: 5
tekst wywietlany: 500 1000 z, warto: 10
tekst wywietlany: 1000 - 1500, warto: 15
tekst wywietlany: pow. 1500, warto: 20
tekst wywietlany: Zakres:, warto: 1
Poniej kontrolki cenaRadioButtonList wpisz od: i dodaj kontrolk
TextBox o ID="odTextBox", a nastpnie w tej samej linii wpisz do:
i dodaj kontrolk TextBox o ID="doTextBox".
Piotr Bubacz
8. Dodaj
kontrolki do
kontrolki View
Stary
Ustaw kursor
Wpisz
o
wa
Wpisz
ID="
Wpisz
ID="
Wpisz
TextBox
Wpisz
ID="
wa
9. Dodaj wspln
cz kocow
Poniej kontrolki
Preferowany
o
wa
Poniej dodaj kontrolk

Wylij
10. Dodaj
podsumowanie
ankiety
W kontrolce
Dzikujemy za wypenienie ankiety
gwnej.

Strona 5-18
Ustaw kursor wewntrz kontrolki View o ID="wycieczkiView
Wpisz Rodzaj posiadanego roweru: i dodaj kontrolk
o ID="posiadaListBox". Dodaj do listy elementy o
waciwociach:
tekst wywietlany: Grski, warto: G
tekst wywietlany: Miejski, warto: M
tekst wywietlany: Szosowy, warto: S
tekst wywietlany: BMX, warto: B
tekst wywietlany: Dziecicy, warto: D
tekst wywietlany: Nie wiem, warto: N, zaznaczenie
Wpisz Data ostatniej wycieczki i dodaj poniej kontrolk
ID="ostatniaCalendar".
Wpisz Data nastpnej wycieczki: i dodaj poniej kontrolk
ID="nastepnaCalendar".
Wpisz Ilo kilometrw rednio na jednej wycieczce:
TextBox o ID="kmTextBox".
Wpisz Poziom umiejtnoci: i dodaj kontrolk
ID="poziomDropDownList". Dodaj do listy elementy o
waciwociach:
tekst wywietlany: Pocztkujcy, warto: P
tekst wywietlany: redniozaawansowany, warto
tekst wywietlany: Zaawansowany, warto: Z
Poniej kontrolki ankietaMultiView w nowym wierszu
Preferowany rodzaj kontaktu: i dodaj kontrolk
o ID="kontaktCheckBoxList". Dodaj do listy elementy o
waciwociach:
tekst wywietlany: E-Mail, warto: E
tekst wywietlany: Telefon, warto: T
tekst wywietlany: Osobisty, warto: O
Poniej dodaj kontrolk Button i w oknie Properities
Wylij, a w polu (ID) wyslijButton.
W kontrolce View o ID="Podsumowanie" w widoku
Dzikujemy za wypenienie ankiety i wstaw
gwnej.
Odnoniki do stron projektu mona szybko dodawa przecigajc dany
plik z okna Solution Explorer.
Modu 5
Kontrolki serwerowe
wycieczkiView".
i dodaj kontrolk ListBox
elementy o nastpujcych
, zaznaczenie
i dodaj poniej kontrolk Calendar o
i dodaj poniej kontrolk Calendar o
Ilo kilometrw rednio na jednej wycieczce: i dodaj kontrolk
i dodaj kontrolk DropDownList o
warto: S
Z
w nowym wierszu wpisz
i dodaj kontrolk CheckBoxList
Properities w polu Text wpisz
w widoku Design napisz
wstaw odnonik do strony
Odnoniki do stron projektu mona szybko dodawa przecigajc dany
Piotr Bubacz Modu 5
Strona 5-19
11. Dodaj kod
umoliwiajcy
wybranie
odpowiedniej
kontrolki View w
zalenoci od
parametru
wywoania strony
W widoku Design dwukrotnie kliknij formularz lub otwrz plik
Ankieta.aspx.cs.
W metodzie Page_Load dodaj kod sprawdzajcy, czy strona nie jest po
komunikacji zwrotnej. Jeli nie, to prezentowany jest pierwszy widok
kontrolki mainMultiView oraz, w zalenoci od parametru wywoania,
odpowiedni widok kontrolki ankietaMultiView:
if (!IsPostBack) {
mainMultiView.SetActiveView(ankietaGlowna);
if (Request.QueryString["view"] == "nowy")
ankietaMultiView.SetActiveView(nowyView);
else if (Request.QueryString["view"] == "wycieczki")
ankietaMultiView.SetActiveView(wycieczkiView);
else Response.Redirect("~/Default.aspx");
}
12. Dodaj obsug
wysania
wypenionej
ankiety do
serwera
Dwukrotnie kliknij kontrolk Button o ID="wyslijButton". Visual Studio
otworzy edytor kodu strony i umieci kursor w metodzie
wyslijButton_Click. Do metody dodaj kod aktywujcy widok
Podsumowanie w kontrolce o ID="mainMultiView":
mainMultiView.SetActiveView(podsumowanie);
13. Test dziaania
strony
Zapisz zmiany i przetestuj dziaanie strony

Piotr Bubacz
Poniewa chciaby si maksymalnie wykaza
formularzy przed bdnym wypenieniem pl, jak rwnie okrelajc niektre pola jako wymagane.
Bez tych informacji zbieranie danych w ankiecie raczej nie ma sensu.
wymagane:
imi
adres e-mail
Sprawdzenie poprawnoci wpisanych danych
adres e-mail (poprawny adres e
telefon (same cyfry w formacie 1234567890)
wzrost (liczba od 50 do 250 cm)
cena od i do (zarwno warto, jak i porwnanie wpisanych wartoci od<do)

1. Dodaj
kontrolki
sprawdzajce, czy
pole zostao
wypenione
Do
wstaw obok
o
Wybierz dodan kontrolk i w oknie
Wstaw obok kontrolki

Wybierz dodan kontrolk i w oknie
Zapi
wypenienia informacji w
2. Dodaj
kontrolk
wywietlajc
informacje o
bdach
Do formularza
mainMultiView
(kategoria
Zapisz zmiany i przetestuj moliwo wysania formularza bez
wypenienia informacji w
Wr do edycji strony
kontrolki
waciwo

Strona 5-20
Poniewa chciaby si maksymalnie wykaza, postanowie rozszerzy stron o zabezpieczenia
Bez tych informacji zbieranie danych w ankiecie raczej nie ma sensu. Okrelie nastpujce p
Sprawdzenie poprawnoci wpisanych danych powinno odbywa si w nastpujcych polach:
(poprawny adres e-mail w formacie uytkownik@serwer
(same cyfry w formacie 1234567890)
(liczba od 50 do 250 cm)
do (zarwno warto, jak i porwnanie wpisanych wartoci od<do)
Tok postpowania
Do wczeniej utworzonego formularza Ankieta.aspx
wstaw obok kontrolki imieTextBox kontrolk RequiredFieldValidator
okna Toolbox (kategoria Validation).
Wybierz dodan kontrolk i w oknie Properties:
w polu ControlToValidate z listy rozwijanej wybierz
w polu ErrorMessage wpisz Pole Imi jest wymagane
w polu Text wpisz *
Wstaw obok kontrolki emailTextBox kontrolk RequiredFieldValidator
Wybierz dodan kontrolk i w oknie Properties:
w polu ControlToValidate z listy rozwijanej wybierz
w polu ErrorMessage wpisz Pole E-mail jest wymagane
w polu Text wpisz *
wypenienia informacji w polach Imi i E-Mail.
Czy sprawdzenie wpisania danych to odbywa si po stronie serwera
czy klienta? Zobacz rdo strony. W jaki sposb jest realizowane to
sprawdzenie? Co jest wypisywane obok kontrolki? Czy pojawia si
komunikat wpisany w polu ErrorMessage?
Do formularza Ankieta.aspx na kocu (za kontrolk
mainMultiView) wstaw kontrolk ValidationSummary
(kategoria Validation).
wypenienia informacji w polach Imi i E-Mail.
Czy pojawia si komunikat wpisany w polu ErrorMessage
gdzie i dlaczego?
Wr do edycji strony i przetestuj inne moliwoci
kontrolki ValidationSummary zmieniajc w oknie
waciwo DisplayMode.

Modu 5
Kontrolki serwerowe
postanowie rozszerzy stron o zabezpieczenia
Okrelie nastpujce pola
powinno odbywa si w nastpujcych polach:
serwer.domena)
do (zarwno warto, jak i porwnanie wpisanych wartoci od<do)
aspx w widoku Design
RequiredFieldValidator z
z listy rozwijanej wybierz imieTextBox
Pole Imi jest wymagane
RequiredFieldValidator
z listy rozwijanej wybierz emailTextBox
mail jest wymagane
sz zmiany i przetestuj moliwo wysania formularza bez
Czy sprawdzenie wpisania danych to odbywa si po stronie serwera
Zobacz rdo strony. W jaki sposb jest realizowane to
est wypisywane obok kontrolki? Czy pojawia si
(za kontrolk MultiView -
ValidationSummary z okna Toolbox
ErrorMessage? Jeli tak, to
etestuj inne moliwoci wywietlania
w oknie Properties jej
Piotr Bubacz Modu 5
Strona 5-21
3. Dodaj
kontrolki
sprawdzajce
poprawno
wpisanych danych
za pomoc
wyrae
regularnych
Do formularza Ankieta.aspx obok kontrolki emailTextBox wstaw
kontrolk RegularExpressionValidator z okna Toolbox (kategoria
Validation) i w oknie Properties:
w polu ControlToValidate z listy rozwijanej wybierz emailTextBox
w polu ErrorMessage wpisz Nieprawidowy adres E-Mail
w polu Text wpisz *
w polu ValidationExpression wcinij przycisk , a nastpnie z listy
Standard expressions wybierz Internet e-mail address (Rys. 4).

Rys. 4 Okrelenie wyraenia regularnego
Obok kontrolki telTextBox wstaw kontrolk
RegularExpressionValidator. W oknie Properties:
w polu ControlToValidate z listy rozwijanej wybierz telTextBox
w polu ErrorMessage wpisz Nieprawidowy numer telefonu podaj
same cyfry
w polu Text wpisz *
w polu ValidationExpression wpisz: ([0-9]+)$
Obok kontrolki wzrostTextBox wstaw kontrolk
w polu ControlToValidate z listy rozwijanej wybierz wzrostTextBox
w polu ErrorMessage wpisz Nieprawidowy wzrost podaj wzrost w
centymetrach
w polu Text wpisz *
Obok kontrolki odTextBox wstaw kontrolk
w polu ControlToValidate z listy rozwijanej wybierz odTextBox
w polu ErrorMessage wpisz Nieprawidowa kwota podaj
zaokrglajc do penych zotych
w polu Text wpisz *
Obok kontrolki doTextBox wstaw kontrolk
Piotr Bubacz Modu 5
Strona 5-22
w polu ControlToValidate z listy rozwijanej wybierz doTextBox
w polu ErrorMessage wpisz Nieprawidowa kwota podaj
zaokrglajc do penych zotych
w polu Text wpisz *
Zapisz zmiany i przetestuj moliwo wysania formularza z bdami w
kontrolkach.
4. Dodaj
kontrolki
sprawdzajce
poprawno
wpisanych danych
za pomoc
porwnania
wartoci
Obok kontrolki wzrostTextBox wstaw kontrolk RangeValidator z okna
Toolbox (kategoria Validation) i w oknie Properties:
w polu ControlToValidate z listy rozwijanej wybierz wzrostTextBox
w polu ErrorMessage wpisz Podaj poprawny wzrost w zakresie od
50 do 250 cm
w polu MaximumValue wpisz 250
w polu MinimumValue wpisz 50
w polu Text wpisz *
w polu Type wybierz Integer
Obok kontrolki doTextBox wstaw kontrolk CompareValidator. W oknie
Properties:
w polu ControlToCompare z listy rozwijanej wybierz odTextBox
w polu ControlToValidate z listy rozwijanej wybierz doTextBox
w polu ErrorMessage wpisz Warto w polu Do musi by wiksza od
wartoci w polu Od
w polu Operator z listy rozwijanej wybierz GreaterThan
w polu Text wpisz *
w polu Type wybierz Integer
W metodzie wyslijButton_Click zamie istniejc lini nastpujcym
kodem:
if (IsValid)
{ mainMultiView.SetActiveView(podsumowanie); }
Zapisz zmiany i przetestuj moliwo wysania formularza z bdami w
kontrolkach.

Piotr Bubacz Modu 5
Strona 5-23
Twoja praca bardzo spodobaa si klientowi, jednak ma on jeszcze jedn prob. Chciaby, aby
umieci baner reklamowy na grze strony. Baner powinien wywietla losowo okrelone reklamy
umieszczone na serwerze.
1. Dodaj katalog i
pliki graficzne
reklam
Do projektu dodaj katalog Adv.
Kliknij katalog prawym przyciskiem myszy i wybierz Add Existing Item,
a nastpnie wska pliki Adv1.png i Adv2.png. Wcinij Add.
2. Okrel
lokalizacje plikw
reklam oraz
adresy na ktre
wskazuja
Kliknij prawym przyciskiem myszy katalog Adv i wybierz Add New Item.
Z okna Templates wybierz XML File, a nastpnie w polu Name wpisz
adv.xml.
Do pliku dodaj nastpujcy fragment:
<Advertisements>
<Ad>
</Ad>
<Ad>
<NavigateUrl>http://www.codeplex.com</NavigateUrl>
<AlternateText>Projekty OpenSource - CodePlex </AlternateText>
</Ad>
</Advertisements>
Zapisz zmiany.
3. Dodaj
kontrolk
AdRotator i
Do wczeniej utworzonego formularza Ankieta.aspx na pocztku strony
wstaw kontrolk AdRotator i w oknie Properties w polu
AdvertisementFile wpisz ~/Adv/adv.xml.
Zapisz zmiany i przetestuj funkcjonalno wywietlania reklam na
stronie.

Piotr Bubacz Modu 5
Strona 5-24
Jeste ju specjalist w zakresie ankiet, wic otrzymujesz coraz wicej zlece. Twj kolejny klient
poprosi Ci o przygotowanie ankiety dla internetowego sklepu z odzie. Ma ona by skierowana
zarwno do nowych klientw uytkownikw, badajc ich preferencje zakupowe, jak rwnie do
obecnych klientw, sprawdzajc ich poziom zadowolenia z towarw i obsugi. Twoim zadaniem jest
zaproponowanie i wykonanie ankiety z uwzgldnieniem czci wsplnej, ktra zawiera:
imi (wymagane)
adres e-mail (wymagane, poprawny adres)
kod pocztowy (wymagane, poprawny kod)
wiek (warto midzy 10 a 100)
pe
wyksztacenie
rozmiar (warto midzy 20 a 50)
Pytania wsplne dla nowych klientw:
Ile jeste w stanie przeznaczy miesicznie na zakup ubrania? (Lista wyboru, odpowiedzi: do
100 z, 100-500 z, 500-1000 z, powyej 1000 z.)
Gdzie najczciej dokonujesz zakupw ubrania? (Lista wielokrotnego wyboru, odpowiedzi:
Sklep firmowy, Hipermarket, Bazar, Sklep z odzie uywan.)
Jak czsto dokonujesz zakupu ubrania? (Lista wyboru, odpowiedzi: Codziennie, Raz w
tygodniu, Raz w miesicu, Kilka razy w roku.)
W jakich kolorach preferujesz ubrania? (Lista wielokrotnego wyboru, odpowiedzi:
Kolorowo-jaskrawych, Stonowanych w szarociach, W czerni i bieli, W samej czerni.)
W przypadku, gdy klient jest kobiet, pobierz odpowied na pytanie:
Jakiego rodzaju ubrania najchtniej kupujesz? (Lista wielokrotnego wyboru, odpowiedzi:
garsonki, bluzki, spdniczki, spodnie.)
W przeciwnym razie pobierz odpowied na nastpujce pytani:
Jakiego rodzaju ubrania najchtniej kupujesz? (Lista wielokrotnego wyboru, odpowiedzi:
spodnie, spodenki, garnitury, koszule, krawaty.)
W ankiecie badania satysfakcji klienta powiniene wywietli odpowiednio sformuowane pytania
w zalenoci od pci:
Kiedy ostatnio robia/robie u nas zakupy (Lista wyboru, odpowiedzi: Wczoraj, W
zeszym tygodniu, W zeszym miesicu, Kilka miesicy temu, Nie pamitam.)
Czy jeste zadowolona/zadowolony z zakupu (Lista wyboru, odpowiedzi: Tak, Raczej tak,
Raczej nie, Nie, Nie wiem.)
Czy jeste zadowolona/zadowolony z naszych pracownikw? (Lista wyboru, odpowiedzi:
Tak, Raczej tak, Raczej nie, Nie, Nie wiem.)
Wpisz swoje uwagi. (Pole tekstowe z moliwoci wpisania tekstu w wielu liniach.)
Koniecznie sprawd poprawno wpisywanych danych, a w podsumowaniu ankiety wywietl
informacje wypenione przez uytkownika. Klient zayczy sobie rwnie, by na stronie bya
moliwo losowego wywietlania reklam wraz z rejestracj iloci klikni banera.
Piotr Bubacz
Modu 6
Wersja 1
Projektowanie serwisw
internetowych
Spis treci
Projektowanie serwisw internetowych ............................................................................................. 1

Piotr Bubacz Modu 6
ITA-103 Aplikacje Internetowe Projektowanie serwisw internetowych
Strona 6-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce zarzdzania wygldem
aplikacji i tworzenia elementw nawigacyjnych. Poznasz moliwoci
centralnego zarzdzania wygldem witryny przy pomocy stron wzorcowych
i kompozycji. Poznasz metody tworzenia mapy witryny internetowej oraz
nauczysz si, jak wykorzystywa kontrolki nawigacyjne.
Cel moduu
Celem moduu jest przedstawienie moliwoci utrzymania wsplnego
wygldem aplikacji przy uyciu stron wzorcowych i kompozycji oraz
moliwoci tworzenia centralnie zarzdzanych elementw nawigacyjnych.
wiedzia jak zarzdza wygldem aplikacji przy uyciu stron
wzorcowych i kompozycji
potrafi tworzy centralnie zarzdzane mapy witryny
potrafi wywietla map witryny przy pomocy kontrolek
nawigacyjnych
Wymagania wstpne
tworzenia stron internetowych,
potrafi tworzy nowe aplikacje internetowe i dodawa strony.
Mapa zalenoci moduu
w moduach Podstawy HTML, Kaskadowe Arkusze Stylw CSS
i Wprowadzenie do ASP.NET

Piotr Bubacz Modu 6
Strona 6-3
Przykadowy problem
Przegldajc serwisy internetowe moemy zauway, e kada strona wyglda podobnie.
Wsplnymi elementami s menu, baner czy inne wizualne komponenty strony. Aby utrzyma
wsplny wygld strony tworzonej w XHTML naleao zaprojektowa wsplne elementy, a pniej
przekopiowa je na kad now stron. Oczywicie nie byo to rozwizanie dobre. Nie mwic o
problemach przy kopiowaniu naley pamita, e zmiana jakiegokolwiek elementu w czci
wsplnej powodowaa konieczno zmian we wszystkich plikach serwisu.
Kolejnym problemem jest wygld strony. Ju wiesz, e mona go okreli w pliku CSS, ale co, jeli
chcemy okresowo zmienia wygld naszej witryny. Co jeli chcemy, aby strona wygldaa inaczej w
zimie, lecie czy na jesie i wiosn. Oczywicie moemy podmienia wskazania pliku CSS na stronie,
jednak nie jest dobre rozwizanie, szczeglnie jeli mamy kilka stron w serwisie. Chcielibymy mie
centralne zarzdzanie plikami CSS wykorzystywanymi przez stron.
Ostatni problem na jaki napotkasz si tworzc serwisy internetowe to menu. Tworzenie menu jako
zbioru odnonikw do stron jest moe rozwizaniem prostym, ale zdecydowanie nieoptymalnym.
Chcielibymy mie centralne miejsce do zarzdzania elementami nawigacyjnymi. Dodatkowo
musimy mie moliwo prostego wywietlania naszej strony. Do tego celu potrzebujemy zbioru
kontrolek nawigacyjnych.
Budowanie wygldu serwisu w oparciu o strony wzorcowe
Strony serwisu internetowego posiadaj wiele wsplnych elementw, ktre powinny by
wywietlane na kadej ze stron (np. logo, elementy nawigacyjne itp.). Tworzenie podobnych stron
mona wykona kopiujc wsplne elementy. Gdy tych stron jest duo lub jeli w pewnym
momencie zaistnieje potrzeba zmiany wygldu serwisu, wtedy takie rozwizanie jest niepraktyczne.
ASP.NET zosta wyposaony w mechanizm stron wzorcowych, umoliwiajcych grupowanie
pewnych wsplnych elementw z wielu stron w jednym pliku.
Strona wzorcowa (ang. Master Page) umoliwia tworzenie wsplnego wygldu dla caej witryny
internetowej. Stanowi ona szkielet dla treci dostarczanej przez poszczeglne strony i zawiera tylko
wsplne elementy. Miejsce, w ktrym ma zosta umieszczona tre waciwej strony, jest
okrelone przez specjaln kontrolk ContentPlaceHolder. Ze wzgldu na fakt, e moliwe jest
umieszczenie dowolnej iloci kontrolek ContentPlaceHolder, kada kontrolka musi by
jednoznacznie nazwana za pomoc identyfikatora kontrolki ID.
Strona z zawartoci (ang. Content Page) korzysta ze strony wzorcowej, wypeniajc miejsca
okrelone przez ContentPlaceHolder. Tre jest umieszczona w kontrolce Content. Kontrolka
ta musi odwoywa si do odpowiedniej kontrolki ContentPlaceHolder za pomoc parametru
ContentPlaceHolderID (Rys. 2).

Rys. 2 Tworzenie strony internetowej na podstawie stron: wzorcowej i zawartoci
Strona wzorcowa i strona zawartoci mog zawiera dowolne kontrolki serwerowe, jak rwnie
wasny kod programowy. Zawartoci obu stron s czone w jedn struktur i wysyane do klienta,
dziki temu s widoczne jako jedna cao.
Piotr Bubacz Modu 6
Strona 6-4
Strona zawartoci moe umieszcza kontrolki tylko w wyznaczonych miejscach. Istnieje moliwo
umieszczenia kontrolki w dowolnym miejscu na stronie przy pomocy pozycjonowania CSS, ale jest
to w najwyszym stopniu niewskazane. Zmiana szablonu nie spowoduje zmiany pooenia kontrolki.
Jeli musimy co doda w okrelonym miejscu, najatwiej jest zdefiniowa w stronie wzorcowej
kolejn kontrolk ContentPlaceHolder.
Aby uatwi tworzenie rozbudowanych serwisw internetowych, moliwe jest zagniedanie stron
wzorcowych. Visual Studio 2008 wspiera ich wizualne projektowanie.
Konwersja istniejcej strony Web na stron zawartoci
Przy projektowaniu aplikacji istnieje czasami konieczno dopasowania istniejcej strony Web do
caego portalu. W tym celu naley z konwertowanej strony usun nastpujce znaczniki:
<!DOCTYPE>
<html>
<head>
<body>
<form>
Nastpnie naley do dyrektywy @Page doda atrybut MasterPageFile, podajc waciw nazw
pliku strony wzorcowej. W kolejnym kroku przed treci strony powinno si doda znacznik
<asp:Content>. Znacznik ten musi posiada atrybuty ID (dowolna nazwa),
ContentPlaceHolderID (nazwa kontrolki ContentPlaceHolder na stronie wzorcowej, w
ktrej ma znale si tre strony) oraz runat="Server". Na kocu pliku naley zamkn znacznik
</asp:Content>.
Jeli na stronie wzorcowej znajduje si klika kontrolek ContentPlaceHolder, to musimy
zapewni, e kada z nich bdzie posiadaa na tej stronie kontrolk Content z odpowiednim
ContentPlaceHolderID.
Sterowanie wygldem aplikacji przy uyciu kompozycji
Przy uyciu arkusza styli (CSS) moliwe jest definiowanie wygldu elementw w jzyku HTML, nie
jest to jednak moliwe w przypadku kontrolek serwerowych ASP.NET. CSS moe zmieni
interpretacje kodu HTML generowanego przez kontrolk serwerow, ale nie ma wpywu na sam
kontrolk. Aby umoliwi scentralizowany sposb sterowania wygldem kontrolek, wprowadzono
kompozycje (ang. themes).
Kompozycje s umieszczone na serwerze w specjalnym katalogu App_Themes, w podkatalogach,
ktrych nazwy s nazwami kompozycji. Podkatalogi zawiera mog pliki .skin (plik motywu) oraz
pliki arkuszy styli .css. Pliki styli zostan doczone do nagwka kadej ze stron.
Wizualne cechy kontrolek Web okrela si za porednictwem pliku motywu (.skin). Pojedynczy
folder kompozycji moe zawiera dowoln liczb takich plikw. Pliki motyww zawieraj znacznik
identyfikujcy dan kontrolk serwerow wraz z parametrami.
Definicja motyww ma wpyw tylko na wygld kontrolek serwerowych Web, nie ma natomiast
wpywu na nastpujce elementy:
elementy HTML
kontrolki serwerowe HTML
kontrolki serwerowe Web, ktre nie maj waciwoci wizualnych
niewizualne waciwoci kontrolek serwerowych Web (np. AutoPostBack)
Stosowanie kompozycji do wszystkich stron witryny jest moliwe w pliku Web.config w sekcji
<system.web> przy pomocy znacznika <pages>. Przykad:
<pages theme="NiebieskaSkorka" />
Piotr Bubacz Modu 6
Strona 6-5
W celu utworzenia kompozycji naley w oknie Solution Explorer klikn prawym przyciskiem i
wybra Add ASP.NET Folder, a nastpnie Theme. W tym momencie moliwe jest okrelenie
dowolnej nazwy folderu, ktra jednoczenie bdzie nazw kompozycji.
W celu dodania pliku kompozycji naley klikn prawym przyciskiem katalog zawierajcy
kompozycj i wybra z menu opcje Add New Item, a nastpnie Skin File i wcisn przycisk Add.

Rys. 3 Dodanie pliku motywu
W utworzonym pliku naley nastpnie umieci znaczniki i parametry definiujce wygld strony.
Nawigacja w serwisie internetowym
Wikszo serwisw internetowych posiada menu zbir odnonikw do poszczeglnych stron.
Moliwe jest okrelenie tego zbioru rcznie na kadej stronie lub na stronie wzorcowej, jednak nie
jest to rozwizanie elastyczne. Dodatkowo problemem jest ukrywanie czci odnonikw przed
uytkownikami anonimowymi oraz ograniczanie dostpu do odnonikw dla rnych grup
uytkownikw.
W ASP.NET 2.0 zaproponowano spjny, atwy do zarzdzania, scentralizowany system dostarczania
informacji o mapie serwisu. Moliwoci systemu nawigacji:
Centralne zarzdzanie logiczn struktur witryny dodawanie lub usuwanie odnonikw do
stron domylnie odbywa si w pliku Web.sitemap. Moliwe jest okrelenie innego dostawcy.
Kontrolki nawigacyjne kontrolki umoliwiajce wywietlenie menu serwisu bazujce na
pliku Web.sitemap.
Reguy dostpu moliwo okrelania regu wywietlania lub ukrywania odnonikw w
menu nawigacji.
Moliwo programowego dostpu do kontrolek nawigacji i wywietlanych w nich informacji.
Tworzenie mapy witryny
Pierwszym krokiem wykorzystania systemu nawigacji w ASP.NET jest okrelenie struktury serwisu.
Standardowo system nawigacji serwisem wykorzystuje plik XML Web.sitemap zawierajcy
hierarchi stron.
Plik Web.sitemap musi by umieszczony w katalogu gwnym aplikacji. Zawiera on elementy
<siteMapNode> dla kadej strony serwisu. Hierarchi serwisu ustala si poprzez osadzanie
elementw <siteMapNode>. Kady z nich zawiera nastpujce atrybuty:
title okrela tekst wywietlany w kontrolkach nawigacyjnych
Piotr Bubacz Modu 6
Strona 6-6
description - okrelenia tekst pomocy pojawiajcy si po ustawieniu kursora nad pozycj
menu (ang. tool tip)
url okrela lokalizacj strony
Przykad pliku Web.sitemap:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode>
<siteMapNode url="Default.aspx" title="Strona gwna"
description="Przenie do strony gwnej" />
<siteMapNode title="Produkty" description="Zapoznaj si z ofert">
<siteMapNode url="Produkty.aspx" title="Przegldaj"
description="Przejrzyj dostpne artykuy" />
<siteMapNode url="Szukaj.aspx" title="Szukaj"
description="Wyszukaj po nazwie" />
</siteMapNode>
</siteMapNode>
</siteMap>
Kontrolki nawigacyjne
Kolejnym krokiem po okreleniu struktury jest wywietlenie jej na stronie serwisu. ASP.NET
udostpnia nastpujce kontrolki nawigacyjne:
SiteMapPath
TreeView
Menu
Kontrolka SiteMapPath
Kontrolka SiteMapPath wywietla ciek nawigacji. Prezentuje ona uytkownikowi lokalizacj i
wywietla odnoniki umoliwiajce nawigacj do strony domowej.

Rys. 4 Kontrolka SiteMapPath
Kontrolka TreeView
Kontrolka TreeView wywietla map serwisu w postaci struktury. Wzy zawierajce elementy
potomne mog by rozwijane lub zwijane po klikniciu ich.

Rys. 5 Przykad kontrolki TreeView a) caa b) zwinity jeden wze
Piotr Bubacz Modu 6
Strona 6-7
Kontrolka Menu
Kontrolka Menu wywietla menu rozwijane. Wzy zawierajce elementy potomne s rozwijane w
momencie, kiedy przesunie si nad nimi kursor.

Rys. 6 Przykad dziaania kontrolki Menu
Podsumowanie
W tym rozdziale przedstawilimy podstawowe informacje dotyczce budowania witryn
internetowych w oparciu o strony wzorcowe. Pokazalimy, jak tworzy i zarzdza wygldem
witryny przy pomocy kompozycji oraz jak tworzy map witryny i wykorzystywa kontrolki
nawigacyjne do jej prezentowania.
Tworzenie strony wzorcowej i stron zawartoci
Naszym zadaniem jest utworzenie szablonu serwisu internetowego dla klienta. Szablon ma
zawiera elementy przedstawione na Rys. 7.

Rys. 7 Szablon strony
Po utworzeniu nowego projektu aplikacji internetowej dodamy stron wzorcow do projektu. Za
pomoc menu Website -> Add New Item, lub poprzez kombinacj klawiszy Ctrl+Shift+A. W oknie
dialogowym Add New Item naley wybra szablon Master Page oraz w oknie Name nada mu
nazw SzablonStrony.master. Dodatkowo zaznaczymy opcj Place Code In Separate File, aby
umieci kod strony w osobnym pliku. Po klikniciu przycisku Add tworzony jest plik strony
wzorcowej zawierajcy ju dwie kontrolki ContentPlaceHolder. Pierwsza kontrolka umoliwia
dodanie treci do nagwka strony. Dziki temu na stronie zawartoci moemy doda plik CSS lub
skrypt wykonywany po stronie klienta. Druga kontrolka zawiera tre, ktra zostanie wypeniona na
stronie zawartoci.
Teraz naley odpowiednio przygotowa nasz stron wzorcow. Aby to wykona, usuniemy
kontrolk ContentPlaceHolder. Uatwi nam to opisanie kolejnych czynnoci. Nastpnie dodamy
do znacznika <div> waciwo ID="Strona". W kolejnym kroku dodamy dwa znaczniki <div>,
pierwszy o ID="Naglowek", drugi o ID="ObszarRoboczy". Nastpnie do znacznika
zawierajcego nagwek dopiszemy: Logo. Do znacznika <div> o ID="ObszarRoboczy" dodamy
kolejne dwa znaczniki <div> o ID="Menu" i ID="Tresc". Do znacznika <div> o ID="Menu"
wpiszemy Menu, a do znacznika o ID="Tresc" dodamy kontrolk ContentPlaceHolder.
Tak przygotowana strona wzorcowa bdzie stanowia baz dla kolejnych podstron. Warto jeszcze
zdefiniowa wygld poszczeglnych sekcji w CSS, ze szczeglnym uwzgldnieniem odpowiedniego
rozmieszczenia obszaru treci i menu.
Zauwamy, e strona wzorcowa rni si od formularza internetowego tylko dwiema kontrolkami
ContentPlaceHolder. Kontrolki te bd wypeniane przez strony zawartoci bazujce na tej
Piotr Bubacz Modu 6
Strona 6-8
stronie. Strona zawartoci korzystajca z tej strony wzorcowej musi zawiera dwie kontrolki
Content, ktrych atrybut ContentPlaceHolderID jest rwny ContentPlaceHolder1 oraz
head. Naszym zadaniem jest umieci odpowiedni tre w tych kontrolkach, ktra pniej
zostanie poczona z szablonem strony i wywietlona w przegldarce uytkownika jako jedna
strona XHTML.
Nie moemy zobaczy szablonu strony bez strony zawartoci. Musimy zatem doda now stron
zawartoci bazujc na naszym szablonie.
Dodawanie stron zawartoci
Kolejnym krokiem jest dodanie strony zawartoci, ktra bdzie bazowaa na stronie wzorcowej.
Strona zawartoci to formularz internetowy, ktrego tre umieszczona jest w kontrolkach
Content odpowiadajcych kontrolkom ContentPlaceHolder na stronie wzorcowej.
Stron zawartoci dodajemy do aplikacji podobnie jak formularz internetowy, z t tylko rnic, e
w oknie Add New Item (Rys. 8) dodatkowo zaznaczamy opcj Select master page.

Rys. 8 Okno Add New Item dla strony zawartoci
Po klikniciu przycisku Add zostaniemy proszeni o wybranie strony wzorcowej (Rys. 9). W aplikacji
moemy zdefiniowa klika szablonw stron. Co wicej, szablony te mog by zagniedane.

Rys. 9 Okno Select a Master Page
Piotr Bubacz Modu 6
Strona 6-9
Po wybraniu przycisku OK tworzona jest nowa strona zawartoci oparta na wybranej stronie
wzorcowej. Zawiera ona dyrektyw @Page, w ktrej oprcz standardowych waciwoci znajduje
si waciwo okrelajca szablon strony. Na stronie znajduj si rwnie dwie kontrolki Content
odwoujce si do odpowiednich kontrolek ContentPlaceHolder.
Po przeczeniu w widok Design (Rys. 10) widoczna jest strona bdca poczeniem strony
wzorcowej i strony zawartoci. Dziki temu programista widzi j tak, jak zostanie ona wysana do
uytkownika. Cz zdefiniowana w stronie wzorcowej jest oznaczona kolorem szarym, a
dodawanie kontrolek jest moliwe wycznie w kontenerze Content oznaczonym kolorem biaym.
Umieszczenie kursora na szarym tle powoduje zmian kursora na znak zakazujcy.

Rys. 10 Widok WYSIWYG strony zawartoci
Moemy teraz wywietli nasz stron zawartoci w przegldarce. Po uruchomieniu widzimy stron
skadajc si z elementw umieszczonych zarwno na stronie wzorcowej, jak i stronie zawartoci.
Konwersja istniejcej strony Web na stron zawartoci
Projektujc aplikacj internetow czasami potrzebujemy doda do projektu star stron
przygotowan bez uycia szablonu. W tym celu naley ze strony usun nastpujce znaczniki ze
starej strony:
<!DOCTYPE>
<html>
<head>
<body>
<form>
Naley pamita, e musimy usun znaczniki pocztkowe i kocowe zostawiajc waciw tre
strony. Nastpnie naley do dyrektywy @Page doda atrybut MasterPageFile, okrelajcy
lokalizacj pliku strony wzorcowej. Nastpnie pod dyrektyw @Page, a przed treci strony naley
doda znacznik:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
Jeli potrzebujemy doda co w nagwku strony, to moemy to umieci wanie w tym znaczniku.
W naszym prostym przypadku nie potrzebujemy nic dodawa, zatem zostawiamy pust zawarto.
Kolejno do strony nale doda znacznik <asp:Content>. Znacznik ten musi posiada atrybuty ID
(dowolna nazwa), ContentPlaceHolderID (nazwa kontrolki ze strony wzorcowej
ContentPlaceHolder, w ktrej ma znale si tre strony) oraz runat="Server". W naszym
przypadku:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
Runat="Server">
Na kocu pliku musimy zamkn znacznik </asp:Content>.
Piotr Bubacz Modu 6
Strona 6-10
Jeli w stronie wzorcowej znajduje si wicej ni dwie kontrolki ContentPlaceHolder, to naley
do strony zawartoci doda odpowiednio tyle kontrolek Content tak, aby kada kontrolka ze
strony wzorcowej miaa odniesienie na stronie zawartoci.
Sterowanie wygldem aplikacji przy uyciu kompozycji
Naszym zadaniem bdzie stworzenie wygldu witryny w taki sposb, aby moliwa bya szybka
zmiana wygldu strony. Do tego celu uyjemy kompozycji.
W celu utworzenia kompozycji naley w oknie Solution Explorer klikn prawym przyciskiem i
wybra Add ASP.NET Folder, a nastpnie Theme. W tym momencie moliwe jest okrelenie nazwy
folderu, ktra jednoczenie bdzie nazw kompozycji. W naszym przypadku bdzie to
SkorkaZima.
Nastpnie dodajemy do folderu plik CSS, w ktrym znajduj si odpowiednie definicje wygldu
elementw na stronie. Oprcz pliku CSS moemy rwnie wykorzysta plik motyww. W celu
dodania pliku motyww naley klikn prawym przyciskiem katalog zawierajcy kompozycj i
wybra z menu opcje Add New Item, a nastpnie Skin File i wcisn przycisk Add. W utworzonym
pliku naley nastpnie umieci znaczniki i parametry definiujce wygld strony.
Aktualnie wykorzystywan kompozycje przez aplikacje definiujemy w pliku Web.config w sekcji
<system.web> przy pomocy znacznika <pages>. Przykad:
<pages theme="SkorkaZima" />
Moliwe jest rwnie umieszczenie bezporedniego odniesienia do odpowiedniego pliku w sekcji
head kadej strony w aplikacji, jednak ustawienia wykonane w pliku Web.config przykrywaj
ustawienia lokalne w sekcji <head>.
Porady praktyczne
Strony wzorcowe
Praca ze stron wzorcow jest analogiczna do pracy z formularzem internetowym. Moliwe
jest dodawanie dowolnych kontrolek i wykonywanie dowolnego kodu aplikacji. Naley
jednak pamita, e kontrolki i kod tej strony bd wykonywane na wszystkich potomnych
stronach.
Przy dodawaniu do projektu strony ju istniejcej naley:
w dyrektywie @Page wskaza lokalizacj bezwzgldn strony wzorcowej rozpoczynajc od
gwnej strony serwisu "~/"
doda tyle kontrolek Content, aby wszystkie kontrolki ContentPlaceHolder miay
swoje odwzorowanie
Kompozycje
Tworzenie kompozycji naley zacz od stworzenia kompozycji bazowej, a nastpnie
zmienia j odpowiednio do potrzeb.
Aby moliwe byo projektowanie strony w trybie podgldu, powiniene okreli styl bazowy
w nagwku strony wzorcowej.
W katalogu kompozycji moemy umieci nie tylko pliki CSS i kompozycje, ale rwnie
elementy graficzne niezbdne dla odpowiedniego wygldu strony.
Nawigacja w serwisie
W pliku Web.sitemap okrelaj zawsze element nadrzdny <siteMapNode>, a nastpnie w
kontrolce Menu okrel waciwo ShowStartingNode="False".
W pliku Web.sitemap staraj si zawsze umieszcza waciwo description. Uatwi to
odnajdowanie wanych elementw uytkownikom strony
Piotr Bubacz Modu 6
Strona 6-11
W pliku Web.sitemap nie musisz zawsze okrela waciwoci url. Jest to szczeglnie
przydatne dla nadrzdnych opcji menu.
Uwagi dla studenta
rozumiesz jak dziaaj strony wzorcowe
umiesz dodawa do projektu stron wzorcow i stron zawartoci
potrafisz dodawa i zarzdza kompozycjami
potrafisz tworzy mapy witryny w pliku Web.sitemap oraz wykorzystywa te informacje do
wywietlania w kontrolkach nawigacyjnych
1. Strony wzorcowe wprowadzenie,
http://aspnet.codeguru.pl/GuidedTourPL/webdev/webdev15.htm
Na stronie znajdziesz opis najwaniejszych kwestii zwizanych ze stronami
wzorcowymi.
2. Stephen Walther, ASP.NET 2.0. Ksiga eksperta, Helion, 2008
W ksice autor porusza wiele zagadnie zwizanych z ASP.NET 2.0. Z ksiki
nauczysz si tworzy efektowne witryny internetowe, a take dba o ich
bezpieczestwo oraz wysok skalowalno. Dowiesz si, jak mona dodawa nowe,
jednolite strony do aplikacji webowych.
3. Webcast Wykorzystanie stron wzorcowych,
http://www.microsoft.com/poland/developer/net/webcasty/09_wykorzystanie_stron_wzorcow
ych/default.aspx
Webcast w jzyku polskim umoliwiajcy zapoznanie si w nieco ponad 11 min z
najwaniejszymi kwestiami zwizanymi ze stronami wzorcowymi w ASP.NET.
Nauczysz si dodawa strony wzorcowe i strony zwartoci. Poznasz rwnie
mechanizm tworzenia mapy witryny i dodawania kontrolek nawigacyjnych.
4. Instrukcja: Dodawanie nawigacji do witryny sieci Web,
http://www.microsoft.com/poland/developer/net/podrecznik/customizing-01.mspx
Fragment podrcznika do ASP.NET, ktry w prosty sposb na przykadzie pokazuje,
jak tworzy map witryny oraz dodawa kontrolki nawigacyjne.

Piotr Bubacz Modu 6
Strona 6-12
Firma Adventure Works chciaaby w Polsce otworzy sklep internetowy sprzedajcy rowery.
Poniewa poprzednia ankieta, ktr przygotowae bardzo im si spodobaa, zaproponowali Tobie
wykonanie tej strony. Ich grafik zaproponowa ukad przedstawiony na Rys. 11. Twoim zadaniem
jest przygotowanie strony wzorcowej oraz zaprezentowanie jej klientowi.


1. Utwrz now
stron w Visual
Web Developer
2008 Express
Edition
Otwrz Visual Web Developer 2008 Express Edition.
Kliknij OK.
2. Utwrz
wzorzec strony
Usu z projektu stron Default.aspx.
Wybierz z menu opcj Websites -> Add New Item lub nacinij
kombinacj Ctrl+Shift+A.
Z wywietlonego okna dialogowego wybierz nastpujce opcje:
Templates: Master Page
Language: Visual C#
Name: SzablonStrony.master
Place Code In Separate File: zaznaczona
Nacinij przycisk Add.
Program utworzy stron wzorcow z dwiema kontrolkami
ContentPlaceHolder.
Usu kontrolk ContentPlaceHolder o id="ContentPlaceHolder1".
3. Utworzenie
gwnych
elementw strony
Zmie tytu strony na Adventure Works.
Wewntrz znacznika <body> dodaj:
<div id="Strona">
</div>

Piotr Bubacz Modu 6
Strona 6-13
4. Podzia
gwnych
elementw
Wewntrz znacznika zawierajcego nagwek (id="Naglowek") dodaj:
Logo
Wewntrz znacznika zawierajcego tre (id="Tresc") dodaj:
<div id="PierwszyObszarBoczny">Pierwszy obszar boczny</div>
<div id="DrugiObszarBoczny">Drugi obszar boczny</div>
<div id="ObszarRoboczy">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
5. Dodanie
nowego arkusza
stylw
Z listy Visual Studio installed templates wybierz Style Sheet.
Kliknij OK.
6. Okrelenie
pozycji
w obszarach
roboczych
Przecz widok strony na Design lub Split.
Wybierz Format -> New Style.
W polu Selector wpisz #PierwszyObszarBoczny.
W grnej czci okna z listy Define in wybierz Existing Style Sheet,
a z listy rozwijanej URL wybierz Style.css.
Z listy Category wybierz Layout, a nastpnie okrel waciwo float:
left.
Z listy Category wybierz Position, a nastpnie okrel waciwoci width:
200 px oraz height: 300 px.
Kliknij OK.
Postpuj podobnie z selektorem #DrugiObszarBoczny, tylko zmie
7. Okrelenie
podstawowego
wygldu
zawartoci strony
W pliku Style.css standardowo jest ju dodany selektor znacznika
<body>. Kliknij go prawym przyciskiem myszy i wybierz Build Style.
Okrel waciwoci font-family: Verdana, font-size: 8 pt i color:
#000033.
Z listy Category wybierz Background, a nastpnie okrel waciwo
backgroud-color: white.
Z listy Category wybierz Box, a nastpnie okrel waciwo margin: 0.
Upewnij si, e opcja Same for all jest zaznaczona.
Kliknij OK.
Otwrz plik SzablonStrony.master. W oknie Solution Explorer chwy
myszk plik Style.css i upu go w sekcji nagwka strony za znacznikiem
</title>. Zobacz jak zmieni si podgld pliku.
8. Okrelenie
wygldu
pozostaych
elementw strony
Przy pomocy narzdzi Visual Studio lub w kodzie pliku Style.css okrel
nastpujce style:
#Menu: kolor ta: #55BBFF, wielko tekstu: 7.5pt
#ObszarLogowania: wyrwnanie tekstu (waciwo text-align): do
prawej, kolor ta #C3DBEA, margines wewntrzny (ang. padding)
z gry i dou 5px, z lewej i prawej 10px
#ObszarRoboczy: kolor ta #EEE, margines wewntrzny (ang.
padding) z gry i dou 50px, z lewej i prawej 20px, margines z gry
i dou 0, z lewej i prawej 200px
Piotr Bubacz
9. Dodaj logo do
strony
Do aplikacji dodaj kat
nastpnie nazwij go
Do katalogu dodaj
wska nowo dodany folder, w
nastpnie wska obrazek
Usu napis
kontrolk
~/Ima
10. Dodawaj
stron z
zawartoci
W oknie
Websites
Nacinij przycisk
W oknie dialogowym
SzablonStrony.master
11. Sprawdzenie
wygldu strony w
przegldarce
W oknie
Default.aspx

Projektowanie serwisw internetowych
Strona 6-14
Do aplikacji dodaj katalog Images. Wybierz Website
nastpnie nazwij go Images.
Do katalogu dodaj obrazek AWlogo.jpg. W oknie
wska nowo dodany folder, wybierz Website ->
nastpnie wska obrazek AWlogo.jpg.
Usu napis Logo na grze strony, a nastpnie w to miejsce
kontrolk Image i w oknie Properties w polu
~/Images/AWlogo.jpg.
W oknie Solution Explorer wska nazw aplikacji.
Websites -> Add New Item lub nacinij kombinacj
Templates: Web Form
Language: Visual C#
Place Code In Separate File: zaznaczona
Select Master Page: zaznaczona
Nazwa: Default.aspx
W oknie dialogowym Select a Master Page
SzablonStrony.master, a nastpnie wcinij OK.
Zawarto strony Default.aspx i wszystkich pozostaych mona doda
w kontrolce Content. Aby zmieni zawarto pozostaych czci strony
naley dokona edycji strony wzorcowej.
W oknie Solution Explorer kliknij prawym przyciskiem
Default.aspx i wybierz View In Browser.
Strona w przegldarce powinna wyglda podobnie jak na
Rys. 12 Wygld strony po zastosowaniu stylw

Modu 6
Website -> New folder, a
W oknie Solution Explorer
> Add Existing Item, a
a nastpnie w to miejsce dodaj
w polu ImageUrl wpisz
wska nazw aplikacji. Wybierz z menu opcj
lub nacinij kombinacj Ctrl+Shift+A.
Select a Master Page wybierz
i wszystkich pozostaych mona doda
. Aby zmieni zawarto pozostaych czci strony
Strona w przegldarce powinna wyglda podobnie jak na Rys. 12.

Piotr Bubacz
Aby przetestowa szablon strony chciaby doda stron z ankietami wykonan w wiczeniu w
module 4.
1. Dodaj stron
do projektu
Wybierz
Znajd na dysku stron
Kliknij
Do projektu d
2. Usu
niepotrzebne
znaczniki
Usu nastpujce znaczniki ze strony:
3. Okrel
parametry
dyrektywy @Page
Na stronie w dyrektywie
MasterPageFile="~/SzablonStrony.master"
4. Dodaj
kontrolk Content
Po dyrektywie
<asp:Content ID="Content1

Na kocu strony po caej treci zamknij dodany znacznik
</asp:Content>
5. Dodaj do
strony gwnej
odnoniki do
ankiety
Do strony gwnej dodaj odnoniki odpowiednio uruchamiajcy ankiet
dla nowego klienta oraz dla osoby posiadajcej ju rower.
Przetestuj d

Strona 6-15
Tok postpowania
Wybierz Website -> Add Existing Item.
Znajd na dysku stron Ankieta.aspx.
Kliknij Add.
Do projektu dodaj rwnie katalog Adv z jego zawartoci.
Usu nastpujce znaczniki ze strony:
<!DOCTYPE>
<html>
<head>
<body>
<form>
Nie zapomnij o znacznikach kocowych.
Na stronie w dyrektywie @Page dodaj atrybuty:
MasterPageFile="~/SzablonStrony.master" Title="
Po dyrektywie @Page dodaj znacznik:
<asp:Content ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>.
Przetestuj dziaanie ankiety klikajc na linki na stronie gwnej.

Modu 6
z jego zawartoci.

Title="Ankieta"
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
na stronie gwnej.
Piotr Bubacz
Klient jest bardzo zadowolony z wyniku Twoich prac. Chciaby
nawigacyjne do strony. Zaproponowa, aby na stronie w miejscu, gdzie jest napis
si prawdziwe menu z rozsuwanymi elementami.
1. Dodaj nowe
strony do
projektu
Do aplikacji internetowej utw
cztery
Uwagi.aspx
waciwoci:
W kolejnym oknie wybierz

2. Utwrz map
witryny
Wybierz z menu opcj
kombinacj
W
Map
W gwnym oknie aplikacji zostanie zaprezentowana zawarto pliku.
Zamie zawarto pliku na
<?xml version="1.0" encoding="utf
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap
1.0" >
<siteMapNode>

o nas">

</siteMap>
Zapisz zmiany

Strona 6-16
Klient jest bardzo zadowolony z wyniku Twoich prac. Chciaby, aby doda jeszcze elementy
nawigacyjne do strony. Zaproponowa, aby na stronie w miejscu, gdzie jest napis
si prawdziwe menu z rozsuwanymi elementami.
Tok postpowania
Do aplikacji internetowej utworzonej w poprzednim zadaniu doda
cztery nowe strony aspx. Nazwij je kolejno: Produkty.aspx
Uwagi.aspx oraz Informacje.aspx i dla kadej okrel nastpujce
waciwoci:
Language: Visual C#
Place code in separate file: zaznaczona
Select master page: zaznaczona
W kolejnym oknie wybierz SzablonStrony.master
Strony dodajemy, aby po klikniciu na pozycje menu nie pojawia si
informacja o bdzie.
Wybierz z menu opcj Websites -> Add New Item
kombinacj Ctrl+Shift+A.
W wywietlonym oknie dialogowym w obszarze Templates
Map a w polu Nazwa wpisz Web.sitemap. Nacinij przycisk
Zamie zawarto pliku na nastpujc:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap
1.0" >
<siteMapNode>
<siteMapNode title="Produkty"
description="Zapoznaj si z ofert">
description="Przejrzyj dostpne filmy" />
description="Wyszukaj po nazwie" />
</siteMapNode>
<siteMapNode title="Ankiety"
description="Wypenij ankiet na stronie">
<siteMapNode url="Ankieta.aspx?view=nowy
title="Szukam roweru"
description="Okrel preferowane produkty" />
<siteMapNode url="Ankieta.aspx?view=wycie
title="Szukam towarzystwa na wycieczki "
description="Opowiedz nam o sobie" />
</siteMapNode>
<siteMapNode title="Informacje" description="Dowiedz si wicej
o nas">
<siteMapNode url="Informacje.aspx" title="O nas"
description="Dowiedz si wicej o nas" />
<siteMapNode url="Uwagi.aspx" title="Zgo uwag"
description="Zgo uwag odnonie dziaania serwisu" />
</siteMapNode>
</siteMapNode>
</siteMap>
Zapisz zmiany.

Modu 6
aby doda jeszcze elementy
nawigacyjne do strony. Zaproponowa, aby na stronie w miejscu, gdzie jest napis Menu pojawio
orzonej w poprzednim zadaniu dodaj
Produkty.aspx, Szukaj.aspx,
i dla kadej okrel nastpujce
i nacinij Add.
Strony dodajemy, aby po klikniciu na pozycje menu nie pojawia si
Add New Item lub nacinij
Templates wybierz Site
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-
description="Przejrzyj dostpne filmy" />
description="Wypenij ankiet na stronie">
nowy"
description="Okrel preferowane produkty" />
?view=wycieczki "
title="Szukam towarzystwa na wycieczki "
description="Opowiedz nam o sobie" />
<siteMapNode title="Informacje" description="Dowiedz si wicej
<siteMapNode url="Informacje.aspx" title="O nas"
on="Dowiedz si wicej o nas" />
<siteMapNode url="Uwagi.aspx" title="Zgo uwag"
description="Zgo uwag odnonie dziaania serwisu" />
Piotr Bubacz Modu 6
Strona 6-17
3. Dodaj
kontrolk Menu
Przejd do strony wzorcowej SzablonStrony.master. Przejd do widoku
Source.
W miejsce napisu Menu wstaw kontrolk SiteMapDataSource (okno
Toolbox, sekcja Data) i w oknie Properties:
w polu ID wpisz MapaSerwisu
w polu ShowStartingNode z listy rozwijanej wybierz False
kontrolk Menu (okno Toolbox, sekcja Navigation):
Obok dodanej kontrolki dodaj kontrolk Dla kontrolki Menu (okno
Toolbox, sekcja Navigation) i w oknie Properties:
w polu ID wpisz MenuGlowne
w polu DataSourceID wpisz MapaSerwisu
w polu Orientation z listy rozwijanej wybierz Horizontal
Zapisz zmiany i uruchom przygotowan aplikacj. Sprawd wywietlanie
menu i moliwo wybierania poszczeglnych stron.
4. Okrel wygld
kontrolki menu
Ponownie wybierz kontrolk Menu MenuGlowne i w oknie Propoerties:
Okrel waciwoci CssClass dla nastpujcych elementw:
w polu DynamicHoverStyle-CssClass wpisz
ZaznaczonyElementMenu
w polu DynamicMenuItemStyle-CssClass: wpisz
ElementMenuRozwijanego
w polu StaticHoverStyle-CssClass wpisz ZaznaczonyElementMenu
w polu StaticMenuItemStyle-CssClass wpisz
ElementMenuNadrzednego
Do pliku Style.css dodaj nastpujce definicje stylw:
.ElementMenuNadrzednego
{ color: #000033; font-weight: bold; padding: 3px 10px; }
.ElementMenuRozwijanego
{ background: #F5F5F5; color: #000033; padding: 3px 10px; }
.ZaznaczonyElementMenu
{ background: #000033; color: White; }
Zapisz zmiany i uruchom przygotowan aplikacj. Sprawd wywietlanie
menu.

Piotr Bubacz
Twj klient jest bardzo zadowolony z Twoich postpw w projekcie. Na dzisiejszym spotkaniu
pojawia si nowa kwestia. Firma chciaby mie moliwo szybkiej zmiany wygldu strony bez
koniecznoci ingerencji w jej kod.
1. Dodaj
kompozycje do
projektu
W
ASP.NET Folder
Okrel nazw nowej kompozycji jako
K
Add
CzerwonaSkorka
2. Skopiuj plik css
z gwnego
katalogu aplikacji
do nowych
kompozycji i
odpowiednio
przygotuj
kompozycje
CzerwonaSkorka
Skopiuj plik
Przenie plik
W nagwku strony wzorcowej zmie odniesienie do pliku CSS
umieszczonego w katalogu
Zmie style w kompozycji
bya w odcieniach czerwieni.
3. Okrel
aktywn
kompozycj
CzerwonaSkorka
Otwrz plik
do niego waciwo
wyglda nastpujco:
<pages theme="
4. Testowanie
zmian
Zapisz

Strona 6-18
acji 25 min)
koniecznoci ingerencji w jej kod.
Tok postpowania
W oknie Solution Explorer kliknij prawym przyciskiem i
ASP.NET Folder, a nastpnie Theme.
Okrel nazw nowej kompozycji jako NiebieskaSkorka
Kliknij prawym przyciskiem myszy na folderze App_T
Add ASP.NET Folder, a nastpnie Theme. Okrel nazw kompozycji jako
CzerwonaSkorka.
Skopiuj plik Style.css do katalogu CzerwonaSkorka
Przenie plik Style.css do katalogu NiebieskaSkorka
umieszczonego w katalogu NiebieskaSkorka.
Zmie style w kompozycji CzerwonaSkorka, tak, aby wywietlana strona
bya w odcieniach czerwieni.
Otwrz plik Web.config, a nastpnie odszukaj znacznika
do niego waciwo theme="CzerwonaSkorka", teraz ten znacznik ma
wyglda nastpujco:
<pages theme="CzerwonaSkorka" >
Zapisz zmiany i przetestuj aplikacj w przegldarce.
Dlaczego w Visual Studio wida kompozycj
przegldarce wida CzerwonaSkorka?

Modu 6
prawym przyciskiem i wybierz Add
NiebieskaSkorka.
App_Themes i wybierz
. Okrel nazw kompozycji jako
CzerwonaSkorka.
NiebieskaSkorka.
, tak, aby wywietlana strona
, a nastpnie odszukaj znacznika <pages>. Dodaj
, teraz ten znacznik ma
zmiany i przetestuj aplikacj w przegldarce.
Dlaczego w Visual Studio wida kompozycj NiebieskaSkorka, a w
Piotr Bubacz Modu 6
Strona 6-19
Przygotuj projekt strony dla firmy Adventure Works sprzedajcej rowery. Do tego celu moesz
wykorzysta wybrany przez Ciebie szablon ze strony Open Source Web Design
(http://www.oswd.org).
W ramach projektu zdefiniuj wsplny wygld przy pomocy strony wzorcowej oraz kompozycji.
Przygotuj i przetestuj co najmniej dwie rne kompozycje. Przygotuj te struktur nowego serwisu.
Zaplanuj, e w serii bd dostpne nastpujce strony (lub grupy stron):
Strona gwna strona zawierajca informacje oglne o sprzedawanym towarze
Nowoci strona zawierajca informacje o nowociach
Strona z informacj o produktach strony umoliwiajce przegldanie lub wyszukiwanie
produktw
Ankieta dla klientw ankieta dla klientw oraz ankieta opinie o stronie
Informacja o firmie informacje o dziaalnoci firmy
Zawarto serwisu strona zawiera map serwisu wywietlon w postaci struktury
Wywietl struktur w menu oraz na stronie Zawartosc.aspx umie kontrolk wywietlajc map
serwis w postaci struktury.
Piotr Bubacz
Modu 8
Wersja 1
Kontrolki danych w ASP.NET
Spis treci
Kontrolki danych w ASP.NET ................................................................................................................ 1
Uwagi dla studenta ...................................................................................................................... 8
Dodatkowe rda informacji....................................................................................................... 8
Laboratorium podstawowe .................................................................................................................. 9
Problem 1 (czas realizacji 20 min) ................................................................................................ 9

Piotr Bubacz Modu 8
ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET
Strona 8-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce komunikacji i wywietlania
informacji z bazy danych w aplikacjach internetowych. Nauczysz si
definiowa zapytania przy pomocy kontrolki LinqDataSource
i wywietla wyniki w kontrolkach GridView oraz Repeater.
Cel moduu
Celem moduu jest poznanie zasad wsppracy aplikacji internetowych
z baz danych, definiowania rde danych oraz wywietlania informacji na
podstawie tej definicji.
wiedzia jak okrela rdo danych w aplikacjach internetowych
potrafi konfigurowa kontrolki rda danych
potrafi czy kontrolki rda danych z kontrolkami prezentacji
danych
Wymagania wstpne
zna podstawy pracy z aplikacjami internetowymi
w Visual Studio 2008
zna podstawy jzyka zapyta SQL
Mapa zalenoci moduu
w moduach Podstawy HTML, Kaskadowe Arkusze Stylw CSS oraz

Piotr Bubacz Modu 8
Strona 8-3
Przykadowy problem
Kada dynamiczna aplikacja internetowa komunikuje si ze rdem danych. Takim rdem
najczciej jest serwer baz danych. Istnieje potrzeba pobierania tych danych i prezentowania ich na
stronach internetowych.
Firmy tworzc strony internetowe nie chc ju mie statycznych wizytwek, ale wymagaj, aby
aplikacje internetowe mogy dynamicznie tworzy zawarto na podstawie danych generowanych
przez systemy wewntrzne. Coraz czciej firmy na swoich stronach oferuj produkty lub/i usugi,
ktre klient strony moe kupi. W tym celu niezbdna jest interakcja z uytkownikiem. Musi on
mie moliwo wyszukania odpowiedniej oferty, dopasowania jej do wasnych potrzeb i w kocu
bezpiecznego zakupu wybranego towaru. Aby uatwi to zadanie musimy na naszych stronach
pobiera, wywietla, uaktualnia, dodawa, usuwa i sortowa rekordy pobierane z bazy.
Wane jest, aby praca, ktr woymy w tworzenie aplikacji bya jak najmniejsza. Chcemy mie
proste i atwe narzdzia do tworzenia rozbudowanych serwisw internetowych. Chcemy mc
odpytywa rdo danych nawet nie znajc jzyka SQL.
Aplikacje internetowe coraz czciej wymagaj przechowywania i przetwarzania duych iloci
danych. Dane te s przechowywane w bazie danych, skd s pobierane i dokd s zapisywane
nowe. ASP.NET dostarcza du kolekcj kontrolek umoliwiajcych pobieranie i wywietlanie
danych w rnych formach prezentacji.
Technologi umoliwiajc dostp do baz danych dla aplikacji napisanych na platformie .NET jest
ADO.NET. ADO.NET koncentruje si na trzech najwaniejszych elementach: poczeniu do bazy,
wysaniu zapyta do bazy i odebraniu wynikw tych zapyta.
Przegld kontrolek rda danych w ASP.NET 3.5
ASP.NET posiada zestaw kontrolek umoliwiajcych prac z rnego rodzaju rdem danych tj.
baza danych, plik XML czy warstwa porednia obiektw biznesowych. Kontrolki rda danych cz
si i pobieraj dane ze rda danych a nastpnie udostpniaj te dane innym kontrolkom bez
koniecznoci tworzenia kodu. Kontrolki te rwnie umoliwiaj zmian danych. Model rda
danych w ASP.NET jest rozszerzalny wic moemy tworzy wasne kontrolki rda danych ktre
pobieraj dane z rnych rde danych lub rozszerzaj funkcjonalno istniejcych rde danych.
W celu wsparcia rnych scenariuszy dodawania danych platforma .NET zawiera rne kontrolki
rda danych. Tab. 1 zawiera opis wbudowanych kontrolek.
Tab. 1 Przegld kontrolek rda danych
Nazwa kontrolki Opis
LinqDataSource

Umoliwia uycie jzyka LINQ na stronach ASP.NET poprzez model
deklaratywny do pobrania i modyfikowania danych z obiektw danych
takich jak tabele w bazie czy kolekcje w pamici serwera. Wspiera
automatyczne generowanie polece wybierania, aktualizacji, dodawania i
usuwania danych. Kontrolka wspiera sortowanie, filtrowanie i dzielenie na
strony.
EntityDataSource Umoliwia poczenie z danymi pochodzcymi z modelu Entity Data
Model (EDM). Wspiera automatyczne generowanie polece wybierania,
aktualizacji, dodawania i usuwania danych. Kontrolka wspiera sortowanie,
filtrowanie i dzielenie na strony.
Piotr Bubacz Modu 8
Strona 8-4
ObjectDataSource Umoliwia poczenie z obiektami logiki biznesowej i innych klas i suy do
tworzenia aplikacji webowych ktre bazuj na obiektach warstwy
poredniej do zarzdzania danymi. Wspiera zaawansowane sortowania i
dzielenie na strony niedostpne w innych kontrolkach rde danych.
SqlDataSource Umoliwia poczenie do serwerw baz danych takich jak Microsoft SQL
Server czy Oracle. We wsppracy z serwerem SQL Server wspiera
zaawansowane moliwoci buforowania. Kontrolka wspiera rwnie
sortowanie, filtrowanie i dzielenie na strony, jeli dane s zwracane jako
obiekt DataSet.
AccessDataSource Umoliwia wspprac z bazami danych zapisanymi w Microsoft Access.
Kontrolka wspiera sortowanie, filtrowanie i dzielenie na strony, jeli dane
s zwracane jako obiekt DataSet.
XmlDataSource Umoliwia pobieranie danych zapisanych w plikach XML, szczeglnie dla
hierarchicznych kontrolek serwerowych ASP.NET takich jak TreeView.
Wspiera filtrowanie przy uyciu wyrae XPath i umoliwia stosowanie
transformacji danych przy uyciu XSLT. Umoliwia rwnie aktualizacj
danych przez zapisanie caego dokumentu XML ze zmianami.
SiteMapDataSource Uywana w ASP.NET do nawigacji na stronie.
Przegld kontrolek prezentacji danych
Kontrolki prezentacji danymi umoliwiaj poczenie z dowoln kontrolk rda danych.
Automatycznie pobieraj dane, a nastpnie zamieniaj je w znaczniki przesyane do klienta w
przegldarce. Kontrolki te mog wykorzystywa moliwoci udostpniane przez kontrolki rda
danych takie jak sortowanie, dzielenie na strony, buforowanie, filtrowanie, aktualizacja, usuwanie i
dodawanie wierszy danych. Kontrolka wywietlania danych jest podczona do kontrolki rda
danych za pomoc waciwoci DataSourceID.
Lista kontrolek:
Kontrolki listy wywietlaj dane w rnych formatach, kontrolki listy to: BulletedList,
CheckBoxList, DropDownList, ListBox i RadioButtonList.
AdRotator wywietla ogoszenia na stronie dane o lokalizacji mog by umieszczone w
rdle danych.
DataList wywietla dane w tabeli, kady element jest wywietlany zgodnie z szablonem
zdefiniowanym przez nas.
DetailsView wywietla jeden rekord w ukadzie tabelarycznym i umoliwia edycj,
usuwanie i dodawanie rekordw.
FormView kontrolka podobna do kontrolki DetailsView, ale umoliwia definiowanie
wygldu dla kadego rekordu. Kontrolka FormView jest podobna do kontrolki DataList, ale
dla pojedynczego rekordu.
GridView wywietla dane w tabeli i umoliwia edycj, zmian, usuwanie, sortowanie,
dzielenie na strony bez koniecznoci pisania kodu.
ListView wywietla dane zgodnie z definicj umieszczon w szablonie. Umoliwia
automatyczne sortowanie, edycj, dodawanie i usuwanie rekordw. Moliwe jest rwnie
dzielenie na strony przy pomocy poczonej kontrolki DataPager.
Repeater wywietla dane w postaci listy. Kady rekord jest wywietlany przy uyciu
szablonu.
TreeView wywietla dane w postaci drzewa hierarchicznego z rozwijanymi wzami.
Menu wywietla dane w postaci hierarchicznego, dynamicznego menu, ktry moe
zawiera podmenu.
Piotr Bubacz Modu 8
Strona 8-5
Poczenie do bazy danych
Zanim rozpocznie si wysyanie zapyta do bazy naley si z ni poczy. W wielu przypadkach
wie si to z koniecznoci uwierzytelnienia (np. przy pomocy nazwy uytkownika i hasa).
Informacje o poczeniu s wysyane jako cig znakw zawierajcych rne parametry konfiguracji
poczenia w postaci tzw. acucha poczenia (ang. connection string).
W celu uzyskania dostpu do rda danych potrzebny jest dostawca danych (ang. provider) jest
to biblioteka, umoliwiajca komunikacj ze rdem danych w trybie binarnym.
W ASP.NET standardowo moliwe jest korzystanie z nastpujcych dostawcw:
ODBC .NET Data Provider (System.Data.ODBC)
OLE DB .NET Data Provider (System.Data.OleDb)
Oracle .NET Data Provider (System.Data.OracleClient)
Microsoft SQL Server .NET Data Provider (System.Data.SqlClient)
Poczenie i tworzenie zapyta przy pomocy kontrolki SqlDataSource
W celu utworzenia poczenia do bazy danych mona skorzysta z kontrolki SqlDataSource. Po
dodaniu kontrolki do formularza naley okreli nastpujce atrybuty:
ConnectionString acuch poczenia.
ProviderName nazwa dostawcy danych.
SelectCommand polecenie SQL zawierajce tre zapytania do bazy danych lub nazwa
procedury skadowanej do wykonania.
Przykad:
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|\CDDB.mdf;Integrated Security=True;
User Instance=True" ProviderName="System.Data.SqlClient"
SelectCommand="SELECT * FROM [Kategorie]">
</asp:SqlDataSource>
acuch poczenia najlepiej jest umieci w pliku konfiguracyjnym aplikacji. W tym celu naley
doda w bloku <configuration> w pliku konfiguracyjnym Web.config nastpujcy blok:
<connectionStrings>
<add name="PolaczenieDoBazy" connectionString="Data Source=.\SQLEXPRESS;
AttachDbFilename=|DataDirectory|\CDDB.mdf;Integrated Security=True;
User Instance=True" providerName="System.Data.SqlClient" />
</connectionStrings>
Teraz naley w kontrolce SqlDataSource zainicjalizowa waciwo ConnectionString jak w
przykadzie:
ConnectionString="<%$ ConnectionStrings:PolaczenieDoBazy %>"
SelectCommand="SELECT * FROM [Kategorie]">
Tre zapytania do bazy mona skonfigurowa bezporednio w kontrolce SqlDataSource. W
poprzednim rozdziale przedstawiono sposb deklaracji zapytania SELECT za pomoc atrybutu
SelectCommand. Atrybuty kontrolki umoliwiaj dodatkowo deklaracj treci polecenia INSERT
za pomoc atrybutu InsertCommand, UPDATE za pomoc atrybutu UpdateCommand oraz
DELETE za pomoc atrybutu DeleteCommand. Kontrolka umoliwia wysanie tych komend przy
pomocy metod Select, Insert, Update oraz Delete. Moliwe jest zdefiniowanie wszystkich
czterech polece w jednej kontrolce:
Piotr Bubacz Modu 8
Strona 8-6
ConnectionString="<%$ ConnectionStrings:PolaczenieDoBazy %>"
SelectCommand="SELECT * FROM [Kategorie]"
DeleteCommand="DELETE FROM [Kategorie] WHERE [KatID] = @KatID"
InsertCommand="INSERT INTO [Kategorie] ([Nazwa]) VALUES (@Nazwa)"
UpdateCommand="UPDATE [Kategorie] SET [Nazwa] = @Nazwa WHERE [KatID] =
@KatID">
<DeleteParameters>
<asp:Parameter Name="KatID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Nazwa" Type="String" />
<asp:Parameter Name="KatID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Nazwa" Type="String" />
</InsertParameters>
Poczenie do bazy i tworzenie zapyta przy pomocy kontrolki LinqDataSource
Najwiksz zalet kontrolki LinqDataSource jest moliwo definiowania zapyta poprzez model
deklaratywny. Kontrolka moe pobiera dane z bazy danych lub z kolekcji danych umieszczonych w
pamici serwera, takich jak tablice. W postaci deklaracji mona zapisa wszystkie warunki do
pobrania, filtrowania, sortowania i grupowania danych. Dodatkowo w przypadku pobierania
danych z bazy danych kontrolka umoliwia zmian, dodawanie i usuwanie rekordw. Kontrolka
wykonuje to bez koniecznoci tworzenia zapyta SQL, aby wykona te zadania.
W przypadku korzystania z bazy danych naley najpierw przygotowa opis struktury danych przy
pomocy DBML (ang. DataBase Markup Language). Visual Studio wspiera tworzenie tego opisu przy
pomocy szablonu LINQ to SQL Classes. Nastpnie moemy okreli nastpujce waciwoci
kontrolki:
ContextTypeName umoliwia okrelenie nazwy klasy zawierajcej opis struktury bazy
danych.
TableName nazwa tabeli lub widoku, ktry bdzie rdem danych.
Where okrelenie warunku.
Select umoliwia wybranie okrelonych kolumn.
Przykad kontrolki:
<asp:LinqDataSource ID="KategorieLinqDataSource" runat="server"
ContextTypeName="AdventureWorksDataContext"
TableName="ProductCategories" Where="ParentProductCategoryID=null" >
</asp:LinqDataSource>
Przykady kontrolek
Kontrolka GridView
Kontrolka GridView umoliwia wywietlanie, sortowanie, wybr, stronicowanie i edycj danych.
Kontrolka GridView wywietla dane w ukadzie tabelarycznym. Kady rekord jest prezentowany
jako wiersz tabeli. Kontrolka umoliwia okrelenia atrybutu DataSourceID zawierajcego
identyfikator rda danych zdefiniowanego w projekcie np. kontrolki SqlDataSource.
Sortowanie
Zezwolenie na sortowanie za pomoc przypisania do atrybutu AllowSorting wartoci
true,zmienia etykiety nagwka w odnoniki, po wybraniu ktrych rekordy s sortowane rosnco
lub malejco.
Piotr Bubacz Modu 8
Strona 8-7
<asp:GridView ID="GridView1" runat="server" AllowSorting="true"
DataSourceID="SqlDataSource1">
</asp:GridView>
Stronicowanie
Jeli w tabeli znajduje si wiele rekordw, to wywietlenie ich wszystkich na stronie moe
spowodowa pewne problemy, np. nieprawidow prezentacj elementw strony, dlatego warto
rozway podzielenie wynikw na strony. Stronicowanie ustala si z pomoc dwch atrybutw:
AllowPaging="true" wczenie stronicowania.
PageSize okrelenie (za pomoc liczby dziesitnej) iloci rekordw na stron.
Przykad:
<asp:GridView ID="GridView1" runat="server" AllowSorting="true"
DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="3">
</asp:GridView>
Edycja danych
Kontrolka GridView umoliwia rwnie edycj danych bez koniecznoci pisania kodu programu.
Przypisanie wartoci true do atrybutw AutoGenerateEditButton oraz
AutoGenerateDeleteButton tworzy odnoniki Edit oraz Delete, umoliwiajce edycj lub
usunicie danego rekordu:
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
AutoGenerateEditButton="true" AutoGenerateDeleteButton="true">
</asp:GridView>
Formatowanie kontrolki GridView
Kontrolka GridView zawiera wiele waciwoci umoliwiajcych okrelenie jej wygldu oraz
waciwo CssClass, umoliwiajc kontrolowanie jej wygldu przy pomocy klas CSS.
Kontrolka Repeater
Kontrolka Repeater umoliwia w peni konfigurowalne wywietlanie danych. Sposb prezentacji
danych w tej kontrolce jest cakowicie zaleny od programisty i umoliwia wywietlanie danych w
dowolnym ukadzie i formacie zalenym od zdefiniowanego szablonu.
Kontrolka Repeater udostpnia nastpujce typy szablonw:
ItemTemplate definiuje wygld kadego rekordu lub jeli zostanie zdefiniowany szablon
AlternatingItemTemplate wygld rekordw nieparzystych.
AlternatingItemTemplate definiuje wygld rekordw parzystych.
FooterTemplate definiuje wygld stopki kontrolki.
HeaderTemplate definiuje wygld nagwku kontrolki.
SeparatorTemplate definiuje wygld separatora kolejnych rekordw.
W celu wywietlenia rekordw naley stworzy szablon wywietlania. Poniszy przykad wywietla
odnoniki do strony Szczegoly.aspx wraz z przekazaniem parametrw prodID oraz KatID. Na
ekranie przegldarki zostanie wywietlony odnonik zawierajcy nazw produktu oraz informacja o
jego cenie. Najbardziej podstawowym z szablonw jest ItemTemplate. Kolejno deklaracji
szablonw nie ma znaczenia. Przykad:
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<a href="Szczegoly.aspx?prodID=<%# Eval("ProdID") %>&KatID=
<%# Eval("KatID") %>"><%# Eval("Nazwa") %></a><br />
<span style="padding-left: 20px">w super cenie
<span style="color:Red"><%# Eval("Cena","{0:c}") %></span></span><br/>
Piotr Bubacz Modu 8
Strona 8-8
</ItemTemplate>
<SeparatorTemplate>
===============<hr />
</SeparatorTemplate>
<FooterTemplate>
Pamitaj TA promocja jest TYLKO dzisiaj
</FooterTemplate>
</asp:Repeater>
Szablony kontrolki Repeater
Podsumowanie
W tym rozdziale przedstawione zostay kontrolki rda i prezentacji danych. Porwnano
poczenie i tworzenie zapyta do bazy danych przy pomocy kontrolki SqlDataSource i
LinqDataSource. Przedstawiono kontrolk GridView oraz Repeater.
Uwagi dla studenta
wiesz jakie kontrolki su do pobierania, a jakie do wywietlania danych
potrafisz wybra odpowiedni kontrolk prezentacji danych w zalenoci od potrzeb
wiesz jak doda i skonfigurowa kontrolk LinqDataSource, GridView oraz Repeater
1. Piotr Gaszewski, ASP.NET 2.0 Metody dostpu do danych - wprowadzenie,
http://codeguru.pl/article-454.aspx
W artykule autor przedstawi podstawy metod dostpu do danych. Prezentuje
kontroki SqlDataSource, GridView i DetailsView w akcji. Pokazuje rwnie
wstp do tworzenia biznesowej warstwy poredniej.
2. Jacek Matulewski, Sawomir Orowski, Technologie ASP.NET i ADO.NET w Visual Web Developer,
Helion, 2007
Ksika zawiera opis technik i narzdzi do tworzenia witryn internetowych za
pomoc ASP.NET i ADO.NET. Dziki niej nauczysz si korzysta z tych technologii w
rodowisku Visual Web Developer oraz uywa podstawowych jzykw do
programowania stron ASP.NET. Dowiesz si, jak wygodnie zarzdza bazami danych
w aplikacjach sieciowych i jak sprawnie umieci gotow witryn na serwerze.
3. Data Access Tutorials, http://www.asp.net/learn/data-access
Na stronie znajdziesz seri tutoriali, ktre przedstawi techniki implementacji
metod dostpu do danych w ASP.NET. Tutoriale zawieraj kod rdowy w Visual
C#.

Piotr Bubacz
Po przygotowaniu szablonu aplikacji Twj klient z umieche
i powiedzia To jest nasza baza, prosz zobacz j i przygotuj stron internetow do dziaania.
Co to znaczy dziaania? Okazao si, e baza jest dostpna w jzyku angielskim. Klient chce wej na
polski rynek i aktualnie p
przypieszenia prac nad stron masz ju teraz wykorzysta t baz, bo pniej nowa baza bdzie
miaa tak sam struktur.
Twoim pierwszym zadaniem bdzie wywietlenie produktw z wybranej przez
kategorii. Produkty s umieszczone w tabeli
Diagram z tymi tabelami przedstawia
Najbardziej zwrcia Twoj uwag
grupa kategorii nadrzdnych
stronie musisz zatem wywietli dwie kontrolki z kategoriami
kategorii podrzdn.
1. Otwrz
aplikacje
internetow z
poprzedniego
moduu
Otwrz Visual
Z menu wybierz
Zlokalizuj folder z aplikacj z poprzedniego moduu.
Kliknij
2. Dodaj rdo
danych
Kliknij prawym przyciskiem
existing item
O
3. Sprawd
rdo danych
Dwukrotnie kliknij dodany plik.
W oknie
Kli

Strona 8-9
Po przygotowaniu szablonu aplikacji Twj klient z umiechem na twarzy wrczy Tobie pyt
powiedzia To jest nasza baza, prosz zobacz j i przygotuj stron internetow do dziaania.
to znaczy dziaania? Okazao si, e baza jest dostpna w jzyku angielskim. Klient chce wej na
polski rynek i aktualnie przygotowuje lokalizacj produktw i informacji o nich. W celu

Twoim pierwszym zadaniem bdzie wywietlenie produktw z wybranej przez
kategorii. Produkty s umieszczone w tabeli Product, a kategorie w tabeli
z tymi tabelami przedstawia Rys. 2.
Rys. 2 Diagram z tabelami Product i ProductCategory
zwrcia Twoj uwag relacja na tabeli ProductCategory. Oznacza ona, e istnieje
nadrzdnych, ktrych pole ParentProductCategoryID
wywietli dwie kontrolki z kategoriami: nadrzdn i
Tok postpowania
Z menu wybierz File -> Open Web Site.
Kliknij OK.
Kliknij prawym przyciskiem myszy katalog App_Data
existing item.
Odnajd plik AdventureWorksLT_Data.mdf i kliknij
Dwukrotnie kliknij dodany plik.
W oknie Server Explorer sprawd zawarto bazy danych.
Kliknij dwukrotnie tabel Customer.
Jakie informacje moemy zobaczy? Jak sprawdzi zawarto tabeli

Modu 8
m na twarzy wrczy Tobie pyt
powiedzia To jest nasza baza, prosz zobacz j i przygotuj stron internetow do dziaania.
to znaczy dziaania? Okazao si, e baza jest dostpna w jzyku angielskim. Klient chce wej na
rzygotowuje lokalizacj produktw i informacji o nich. W celu
Twoim pierwszym zadaniem bdzie wywietlenie produktw z wybranej przez uytkownika strony
, a kategorie w tabeli ProductCategory.

. Oznacza ona, e istnieje
ParentProductCategoryID ma warto null. Na
nadrzdn i po dokonaniu wyboru
App_Data i wybierz Add
i kliknij Add.
sprawd zawarto bazy danych.
Jak sprawdzi zawarto tabeli?
Piotr Bubacz
4. Dodaj
konwerter danych
dla jzyka LINQ
Wybierz
Z okna
AdventureWorks.dbml
W oknie z
(Rys.
Do nowo otwartego pliku
Relational Designer
Zapisz plik.
5. Wywietl
gwne kategorie
produktw
Do strony
Properities:
Dodaj kontrolk
Kliknij
W oknie

Strona 8-10
Z okna Templates wybierz LINQ to SQL Classes, w oknie
AdventureWorks.dbml.
W oknie z pytaniem o dodanie specjalnego pliku do katalogu
Rys. 3) wcinij Yes.
Rys. 3 Pytanie o przeniesienie pliku do katalogu
Do nowo otwartego pliku po lewej jego stronie
Relational Designer z okna Server Explorer przenie
Address
Customer
CustomerAddress
Product
ProductCategory
ProduktDescription
ProduktModel
ProduktModelProduktDescription
SalesOrderDetail
SalesOrderHeader
Zauwa, e oprcz tabel pojawiy si rwnie relacje midzy nimi.
apisz plik.
Do strony Produkty.aspx dodaj kontrolk LinqDataSource
Properities:
w polu ID wpisz KategorieLinqDataSource
w polu ContextTypeName wpisz AdventureWorksDataContext
w polu TableName wpisz ProductCategories
w polu Where wpisz ParentProductCategoryID=null
w polu Select wpisz new (ProductCategoryID, Name)
Dodaj kontrolk ListBox i zmie jej waciwo ID
Kliknij Smart Tag i wybierz Choose Data Source.
W oknie Data Source Configuration Wizard (Rys.
z listy rozwijanej Select a data Source
KategorieLinqDataSource
wcinij link Refresh Schema
z listy rozwijanej Select a data field to display In the ListBox
Name
z listy rozwijanej Select a data field for the value of the ListBox
wybierz ProductCategoryID
Modu 8
, w oknie Name wpisz
o dodanie specjalnego pliku do katalogu App_Code

Pytanie o przeniesienie pliku do katalogu App_Code
do obszaru The Object
przenie nastpujce tabele:
Zauwa, e oprcz tabel pojawiy si rwnie relacje midzy nimi.
LinqDataSource i w oknie
AdventureWorksDataContext
ParentProductCategoryID=null
new (ProductCategoryID, Name)
ID na KategorieListBox.
Rys. 4):
Select a data Source wybierz
Select a data field to display In the ListBox wybierz
Select a data field for the value of the ListBox
Piotr Bubacz Modu 8
Strona 8-11

Rys. 4 Okno Data Source Configuration Wizard
Po klikniciu OK ponownie kliknij Smart Tag, a nastpnie zaznacz opcj
Enable AutoPostBack.
6. Wywietl list
podkategorii
Do strony dodaj kontrolk LinqDataSource i zmie jej waciwo ID na
PodkategorieLinqDataSource.
Kliknij SmartTag i wybierz Configure Data Source.
W oknie Choose a Content Object wybierz
AdventureWorksDataContext i kliknij Next.
W oknie Configure Data Selection z listy Tables wybierz
ProductCategories, w obszarze Select zaznacz ProductCategoryID oraz
Name.
Kliknij przycisk Where.
W oknie Configure Where Expression (Rys. 5):
z listy rozwijanej Column wybierz ParentProductCategoryID
z listy rozwijanej Operator wybierz ==
z listy rozwijanej Source wybierz Control
z listy rozwijanej Control ID wybierz KategorieListBox
w polu Default value wpisz -1
kliknij przycisk Add

Rys. 5 Konfiguracja w oknie Configure Where Expression
Piotr Bubacz Modu 8
Strona 8-12
Dodaj kontrolk ListBox i okrel jej waciwo ID na
PodkategorieListBox. Kliknij Smart Tag i wybierz Choose Data Source.
W oknie Data Source Configuration Wizard wybierz:
z listy rozwijanej Select a data Source wybierz
PodkategorieLinqDataSource
z listy rozwijanej Select a data field to display In the ListBox wybierz
Name
z listy rozwijanej Select a data field for the value of the ListBox
wybierz ProductCategoryID
Po klikniciu OK ponownie kliknij Smart Tag, a nastpnie zaznacz opcj
Enable AutoPostBack.
7. Dodaj
kontrolk danych
do wywietlania
produktw
w wybranej
kategorii
Do strony dodaj kontrolk LinqDataSource zmie waciwo ID na
ProduktyLinqDataSource.
Kliknij Smart Tag i wybierz Configure Data Source.
W oknie Choose a Content Object wybierz
AdventureWorksDataContext i kliknij Next.
W oknie Configure Data Selection z listy Tables wybierz Products. W
obszarze Select wybierz ProductID, Name, ProductNumber, Color,
ListPrice.
Kliknij przycisk Where.
W oknie Configure Where Expression:
z listy rozwijanej Column wybierz ProductCategoryID
z listy rozwijanej Operator wybierz ==
z listy rozwijanej Source wybierz Control
z listy rozwijanej ControlID wybierz PodkategorieListBox
w oknie Default value wpisz -1
kliknij przycisk Add
8. Sformatuj
wywietlanie
produktw
Z okna Toolbox, sekcja Data do strony dodaj kontrolk GridView.
Kliknij Smart Tag i z listy rozwijanej Choose Data Source wybierz
ProduktyLinqDataSource.Kliknij Smart Tag kontrolki GridView, a
nastpnie wybierz opcje Edit Columns.
Za pomoc przycisku usu wszystkie pola za wyjtkiem
ProductNumber, Color i ListPrice.
Z list Available fields wybierz HyperLinkField i wcinij Add.
W obszarze HyperLinkField properities:
w polu HeaderText wpisz Nazwa produktu
w polu DataNavigateUrlFields wpisz ProductID
w polu DataNavigateUrlFormatString wpisz ~/Szczegoly.aspx?id={0}
w polu DataTextField wpisz Name
Przy pomocy przycisku ustal pole na pierwszej pozycji.
Dla pola ProductNumber okrel waciwo HeaderText="Numer
katalogowy".
Dla pola Color okrel waciwo HeaderText="Kolor".
Dla pola ListPrice okrel waciwo HeaderText="Cena" oraz
DataFormatString="{0:c}".
9. Wcz
stronicowanie
Dla kontrolki GridView okrel waciwoci:
Piotr Bubacz
wywietlanych
wynikw
10. Zapisz i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i przetestuj
produktw na stronie
Zmie waciwo
najlepiej wywietlana na stronie.
11. Napraw bd
wywietlania
kontrolki
GridView
W przegldarce wybierz gwn kategori, nastpnie wybierz kategori
podrzdn. Tera wybierz pono
Wybierz kontrolk
EnableViewState
Zapisz zmiany i ponownie przetestuj kontrolk
Twoim kolejnym zdaniem jest umoliwienie wyszukiwania okrelonego produktu. Wyniki
wyszukiwania maj zosta wywietlone wraz z kontrolk
umoliwiajce wyszukiwanie.
1. Dodaj
kontrolk
uytkownika do
wyszukiwania
Wybierz
Kliknij prawym przyciskiem myszy dodany katalog i wybierz
Item
Na otwartej stronie
kontrolk
Dodaj
Dodaj kontrolk
Text="
Do metody obsugi przycisku dodaj nastpujcy kod:
string url = String.Format("~/
NazwaProduktuTextBox.Text);
Response.Redirect(url);
2. Do strony
Szukaj.aspx dodaj
kontrolk Szukaj
W widoku
przecignij
3. Dodaj stron
wywietlajc
wyniki
wyszukiwania
Do aplikacji dodaj stron
strony
Na stronie wpisz

Strona 8-13
AllowPaging: true
PageSize: 5
Zapisz zmiany w projekcie i przetestuj moliwo wywietlania
produktw na stronie Produkty.aspx.
Zmie waciwo PageSize kontrolki GridView
najlepiej wywietlana na stronie.
podrzdn. Tera wybierz ponownie inn kategori gwn.
Co si stao z kontrolk GridView? Dlaczego nadal jest wywietlana?
Wybierz kontrolk GridView i w oknie
EnableViewState z listy rozwijanej wybierz False.
Zapisz zmiany i ponownie przetestuj kontrolk GridView
Dlaczego tym razem kontrolka dziaa poprawnie?
wyszukiwania maj zosta wywietlone wraz z kontrolk do wyszukiwania.
umoliwiajce wyszukiwanie.
Tok postpowania
Wybierz Website->New Folder i nazwij go Kontrolki
Kliknij prawym przyciskiem myszy dodany katalog i wybierz
Item. W oknie Add New Item:
W obszarze Template wybierz Web User Control
w polu Name wpisz Szukaj.ascx
z listy Language wybierz Visual C#
Na otwartej stronie wpisz Podaj nazw produktu:
kontrolk TextBox i zmie jej waciwo ID na na
Dodaj kolejno kontrolk RequiredFieldValidator i w oknie
w polu ID wpisz NazwaRequiredFieldValidator
w polu ControlToValidate wpisz nazwaTextBox
w polu ErrorMessage wpisz Podaj fragment nazwy produktu
w polu Text wpisz *
Dodaj kontrolk Button o waciwociach ID="
Text="Szukaj". W widoku Design kliknij dwukrotnie kontrolk
string url = String.Format("~/WynikiWyszukiwania
NazwaProduktuTextBox.Text);
Response.Redirect(url);
W widoku Design do strony Szukaj.aspx z okna
przecignij kontrolk Szukaj.ascx.
Do aplikacji dodaj stron WynikiWyszukiwania.aspx
strony SzablonStrony.master.
Na stronie wpisz Wyniki wyszukiwania:.
Modu 8
moliwo wywietlania
GridView tak, aby bya jak
wnie inn kategori gwn.
? Dlaczego nadal jest wywietlana?
i w oknie Properties w polu
.
GridView.
Dlaczego tym razem kontrolka dziaa poprawnie?
do wyszukiwania. Przygotuj elementy
Kontrolki.
Kliknij prawym przyciskiem myszy dodany katalog i wybierz Add New
Web User Control
Podaj nazw produktu:, a nastpnie Dodaj
nazwaTextBox.
i w oknie Properties:
RequiredFieldValidator
nazwaTextBox
fragment nazwy produktu
ID="szukajButton" oraz
kliknij dwukrotnie kontrolk Button.
WynikiWyszukiwania.aspx?Nazwa={0}",
z okna Solution Explorer
WynikiWyszukiwania.aspx opart na szablonie
Piotr Bubacz Modu 8
Strona 8-14
W nowej linii dodaj kontrolk GridView i w oknie Properties:
w polu ID wpisz WynikiWyszukiwaniaGridView
w polu AutoGenerateColumns z listy rozwijanej wybierz False
w polu DataKeyNames wpisz ProductID
W widoku Source dodaj w ciele kontrolki GridView (pomidzy znaczniki
<asp:GridView> a </asp:GridView>):
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="ProductID"
DataNavigateUrlFormatString="~/Szczegoly.aspx?id={0}"
HeaderText="Nazwa produktu" DataTextField="Name"
Text="Nazwa produktu" />
<asp:BoundField DataField="ProductNumber"
HeaderText="Numer katalogowy" SortExpression="ProductNumber" />
<asp:BoundField DataField="Color" HeaderText="Kolor"
SortExpression="Color" />
<asp:BoundField DataField="ListPrice" DataFormatString="{0:c}"
HeaderText="Cena" SortExpression="ListPrice" />
</Columns>
Poniej kontrolki GridView w widoku Source wpisz <br />Szukaj:<br />.
W widoku Design do ostatniego wiersza na stronie dodaj kontrolk
uytkownika Szukaj.ascx.
4. Dodaj kod
umoliwiajcy
wyszukiwanie
W pliku WynikiSzukania.aspx.cs do metody Page_Load dodaj
nastpujcy kod:
string nazwa = Request.QueryString["Nazwa"];
if (nazwa!=null)
{
AdventureWorksDataContext db = new AdventureWorksDataContext();
var produkty = from p in db.Products
where p.Name.Contains(nazwa)
select p;
WynikiWyszukiwaniaGridView.DataSource = produkty;
WynikiWyszukiwaniaGridView.DataBind();
}
5. Zapisz i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i przetestuj moliwo wyszukiwania
produktw.

Piotr Bubacz
Twj klient wymyli, e na stronie gwnej ma by wywietlana lista kategorii nadrzdnych
klikniciu ktrych uytkownik strony
wybran nadrzdn kategori.
1. Dodaj
kontrolk
uytkownika
wywietlajc
gwne kategorie
Do katalogu
Kategorie.ascx
Nastpnie dodaj kontrolk
waciwo
Dodaj kontrolk
W
<HeaderTemplate>

</HeaderTemplate>
<ItemTemplate>

</ItemTemplate>
Zapisz zmiany.
2. Dodaj
kontrolk do
szablonu strony
Otwrz szablon strony
W widoku
po lewej stronie o
Zapisz zmiany.
3. Zapisz i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i sprawd
wywietlanie s odpowiednie podkategorie na stronie przegldania
produktw.
4. Dodaj
moliwo
wywietlania
podkategorii na
podstawie
parametru
wywoania strony
Otwrz plik
string katID= Request.QueryString["katID"];
if (katID != null)

5. Zapisz i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i sprawd
produktw.

Strona 8-15
Twj klient wymyli, e na stronie gwnej ma by wywietlana lista kategorii nadrzdnych
uytkownik strony bdzie przekierowywany na stron wywietlania produktw z
wybran nadrzdn kategori.
Tok postpowania
Do katalogu Kontrolki dodaj now kontrolk uytkownika o nazwie
Kategorie.ascx.
Nastpnie dodaj kontrolk LinqDataSource.
waciwo ID na KategorieLinqDataSource i w oknie
w polu ContextTypeName wpisz AdventureWorksDataContext
w polu Select wpisz new (ProductCategoryID, Name)
w polu TableName wpisz ProductCategories
w polu Where wpisz ParentProductCategoryID=null
Dodaj kontrolk Repeater i w oknie Properties:
w polu ID wpisz KategorieRepeater
w polu DataSourceID z listy rozwijanej wybierz
KategorieLinqDataSource".
W widoku Source w kontrolce Repeater dodaj:
<HeaderTemplate>
<strong>Wybierz kategori produktu</strong>
</HeaderTemplate>
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="Server"
NavigateUrl='<%# "~/Produkty.aspx?KatID=" +
Eval("ProductCategoryID") %>' Text='<%# Eval("Name") %>'>
</asp:HyperLink> <br />
</ItemTemplate>
Zapisz zmiany.
Otwrz szablon strony SzablonStrony.master
W widoku Design przenie kontrolk do obszaru roboczego pooonego
po lewej stronie o ID="PierwszyObszarBoczny".
Zapisz zmiany.
Zapisz zmiany w projekcie i sprawd, czy po klikniciu na kategorie
produktw.
Dlaczego nie s?
Otwrz plik Produkty.aspx.cs. Do metody Page_Loa
string katID= Request.QueryString["katID"];
if (katID != null)
{
KategorieListBox.SelectedValue = katID;
}
Zapisz zmiany w projekcie i sprawd, czy po klikniciu na kategorie
produktw.
Modu 8
Twj klient wymyli, e na stronie gwnej ma by wywietlana lista kategorii nadrzdnych, po
przekierowywany na stron wywietlania produktw z
dodaj now kontrolk uytkownika o nazwie
W kontrolce zmie
i w oknie Properties:
AdventureWorksDataContext
new (ProductCategoryID, Name)
ParentProductCategoryID=null
z listy rozwijanej wybierz
<br />
<asp:HyperLink ID="HyperLink1" runat="Server"
%# "~/Produkty.aspx?KatID=" +
Text='<%# Eval("Name") %>'>
rolk do obszaru roboczego pooonego

czy po klikniciu na kategorie
Page_Load dodaj:
czy po klikniciu na kategorie
Piotr Bubacz Modu 8
Strona 8-16

Piotr Bubacz
Modu 9
Wersja 1
LINQ w ASP.NET
Spis treci
LINQ w ASP.NET ................................................................................................................................... 1

Piotr Bubacz Modu 9
ITA-103 Aplikacje Internetowe LINQ w ASP.NET
Strona 9-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce technologii LINQ. Nauczysz
si, jak formuowa proste zapytania z wykorzystaniem zintegrowanego
jzyka zapyta i w jaki sposb poczy go z ASP.NET.
Cel moduu
Celem moduu jest przedstawienie technologii LINQ i moliwoci jego
wykorzystania w aplikacjach ASP.NET.
wiedzia czym jest i jak dziaa LINQ
potrafi tworzy proste zapytania w LINQ
potrafi wykorzystywa LINQ w ASP.NET
Wymagania wstpne
zna podstawy pracy z danymi w ASP.NET
Mapa zalenoci moduu
w moduach Podstawy HTML, Kaskadowe Arkusze Stylw CSS,
Wprowadzenie do ASP.NET oraz Kontrolki danych w ASP.NET.

Piotr Bubacz Modu 9
Strona 9-3
Przykadowy problem
Wikszo projektowanych programw manipuluje danymi w taki czy inny sposb. Dane s
najczciej przechowywane w relacyjnych bazach danych. Mimo to jest dua rnica midzy
nowoczesnymi jzykami programowania a bazami w sposobie, w jaki reprezentuj dane.
Najwiksz rnica tkwi w sposobie odwoywania si do danych w bazie. Pogram odwouje si do
bazy za pomoc API, ktre wymaga, aby zapytania byy przesane jako cigi znakw. Niestety nie
mam moliwoci weryfikacji poprawnoci tworzonych zapyta w czasie kompilacji, a jedynie w
czasie wykonania. Co wicej rnica, ta jest jeszcze bardziej widoczna przy odbieraniu wynikw.
Nowoczesne jzyki programowania przechowuj dane w postaci obiektw, natomiast bazy danych
organizuj je w wiersze.
Dotychczas poczenie tych dwch wiatw naleao do programisty osobno w kadej tworzonej
aplikacji. Najlepszym rozwizaniem byo uycie poredniej abstrakcyjnej warstwy dostpu, ktra
umoliwiaa przejcie pomidzy wiatem wierszy a wiatem obiektw.
Rozwizaniem problemu niekompatybilnoci wiata baz danych i nowoczesnych jzykw
programowania jest LINQ (ang. Language Integrated Query), nowe podejcie dostpu do danych,
ktre integruje jzyk zapyta bazodanowych bezporednio w jzykach programowania .NET. W
wyniku otrzymujemy nie wiersze, ale obiekty.
Korzyci:
niezaleno od typu danych
operowanie na danych jak na obiektach
lepsza integracja z jzykami programowania
wsparcie dla IntelliSense
Na Rys. 2 zostaa przedstawiona architektura i komponenty LINQ.W warstwie najbliszej klientowi
mamy jzyki programowania dostpne na platformie .NET, takie jak C# 3.0. Nastpnie mamy
warstw poredni, wykorzystywan do translacji zapyta formuowanych w jzykach
programowania z jednej strony, z drugiej za translacji danych z rnych rde na obiekty.
<book>
<title/>
<author/>
<year/>
<price/>
</book>
.NET Language Integrated Query

Rys. 2 Architektura i komponenty LINQ
Piotr Bubacz Modu 9
Strona 9-4
Operatory
W LINQ moemy uywa wielu operatorw. Najwaniejsze z nich zostay przedstawione w Tab. 1.
Tab. 1 Rodzaje operatorw w LINQ
Rodzaj operacji Nazwa operatora
filtrowanie Where
projekcja Select, SelectMany
kolejno OrderBy, ThenBy
grupowanie GroupBy
kwalifikatory Any, All
partycje Take, Skip, TakeWhile, SkipWhile
zbiory Distinct, Union, Intersect, Except
elementy First, FirstOrDefault, ElementAt
agregacja Count, Sum, Min, Max, Average
konwersja ToArray, ToList, ToDictionary
rzutowanie OfType<T>
LINQ to XML
W przypadku odwoywania si do dokumentw zapisanych w XML, wykorzystujemy warstw
poredni LINQ to XML. Porwnajmy kod aplikacji do tworzenia dokumentu XML z wynikw
poszukiwania innego dokumentu XML.
W wyniku chcemy otrzyma nastpujc list osb mieszkajcych w USA:
<contacts>
<contact>
<name>Great Lakes Food</name>
<phone>(503) 555-7123</phone>
</contact>
...
</contacts>
W przypadku programowania bez uycia LINQ napiszemy:
XmlDocument doc = new XmlDocument();
XmlElement contacts = doc.CreateElement("contacts");
foreach (Customer c in customers)
if (c.Country == "USA") {
XmlElement e = doc.CreateElement("contact");
XmlElement name = doc.CreateElement("name");
name.InnerText = c.CompanyName;
e.AppendChild(name);
XmlElement phone = doc.CreateElement("phone");
phone.InnerText = c.Phone;
e.AppendChild(phone);
contacts.AppendChild(e);
}
doc.AppendChild(contacts);
Uywajc LINQ:
XElement contacts = new XElement("contacts",
from c in customers
Piotr Bubacz
where c.Country == "USA"
select new XElement("contact",
new XElement("name",
new XElement("phone", c.Phone)
)
);
Porwnanie obu fragmentw
Tab. 2 Porwnanie programowania XML z i bez uycia LINQ
Programowanie XML bez LINQ
model imperatywny
bazowanie na dokumencie
brak wbudowanych zapyta
wymaga duej pamici
LINQ to SQL
Na Rys. 3 przedstawiono dziaanie zapytania do bazy zdefiniowanego w LINQ.
Programista tworzy zapytanie w
na zapytanie SQL. Zapytanie SQL jest przesyane do bazy, skd wracaj wiersze. Nastpnie wiersze
s przetwarzane na obiekty i udostpniane aplikacji. Podobnie jest w przypadku dodawania
informacji do bazy.
Podsumowanie
W tym rozdziale przedstawione
Uwagi dla studenta
rozumiesz jak dziaa LINQ
umiesz napisa proste zapytanie
Pamitaj o zapoznaniu si z
rozumiesz omawiane w nich
w uwagach, przeczytaj ponownie informacje z tego

Strona 9-5
where c.Country == "USA"
select new XElement("contact",
new XElement("name", c.CompanyName),
new XElement("phone", c.Phone)
fragmentw zostao przedstawione w Tab. 2.
ania XML z i bez uycia LINQ
Programowanie XML z uyciem LINQ

azowanie na dokumencie
wbudowanych zapyta
ymaga duej pamici
model deklaratywny
bazowanie na elemencie
zintegrowane zapytania
mniejsze i szybsze
przedstawiono dziaanie zapytania do bazy zdefiniowanego w LINQ.
Programista tworzy zapytanie w zintegrowanym jzyku wyrae, ktre warstwa porednia zamienia
Rys. 3 LINQ to SQL
przedstawione zostay podstawy jzyka LINQ.
jak dziaa LINQ
napisa proste zapytanie wykorzystujc zintegrowany jzyk zapyta
w nich zagadnienia. Jeli masz trudnoci ze zrozumieniem tematu zawartego
, przeczytaj ponownie informacje z tego rozdziau i zajrzyj do notatek z
Modu 9
LINQ w ASP.NET
Programowanie XML z uyciem LINQ
odel deklaratywny
azowanie na elemencie
integrowane zapytania
przedstawiono dziaanie zapytania do bazy zdefiniowanego w LINQ.
warstwa porednia zamienia

zintegrowany jzyk zapyta
zawartymi w tym module. Upewnij si, e
. Jeli masz trudnoci ze zrozumieniem tematu zawartego
zajrzyj do notatek z wykadw.
Piotr Bubacz Modu 9
Strona 9-6
1. Fabrice Marguerie, Steve Eichert, Jim Wooley, LINQ in Action, Manning Publications, 2008
Autor w prosty sposb przyblia zagadnienia zwizane z LINQ. Warto te zajrze na
stron ksiki http://linqinaction.net, gdzie autor umieszcza rne informacje na
temat LINQ.
2. Jacek Matulewski, C# 3.0 i .NET 3.5. Technologia LINQ, Helion, 2008
Dziki temu podrcznikowi nauczysz si pobiera dane z rnego rodzaju rde,
tworzy pliki XML w nowy, bardziej intuicyjny sposb, stosowa skadowane
rozszerzenia oraz nowego typu metody (oraz odpowiadajce im operatory),
zdefiniowane w najnowszej wersji jzyka C#. Ponadto dowiesz si, jak tworzy
wasne rda danych LINQ.
3. Paolo Pialorsi, Marco Russo, Introducing Microsoft LINQ, Microsoft Press, 2008
Ksika stanowi wprowadzenie do LINQ dla osb, ktre nie miay wczeniejszego
dowiadczenia ani z t technologi, ani z nowociami wprowadzonymi w C# 3.0. W
zwizy sposb omawia podstawy LINQ, w tym skadni, operatory i posugiwanie
si t technologi w odniesieniu do kolekcji obiektw, relacyjnych baz danych i
dokumentw XML.

Piotr Bubacz
Aplikacja, ktra tworzysz dla Adventure Works wymaga rozszerze. Przede wszystkim Twojemu
klientowi zaley na wywietlaniu obrazkw produktw. Twoim zadaniem jest zaimplementowanie
sposobu pobierania obrazkw z bazy danych.
Zadanie Tok postp
1. Dodaj now
stron
Otwrz stron przygotowan w poprzednim wiczeniu.
Do aplikacji dodaj now stron
2. Na podstawie
parametru ID
wylij obrazek
W metodzie
if (Request.QueryString["id"] != null)
{

}
3. Zapis i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie. Wywietl stron
co jest wywietlane.
Dodaj do adresu strony
4. Dodaj
wywietlanie
obrazka na
stronie
Produkty.aspx
Otwrz stron
W widoku
Tag
Z listy
Przesu pole na pierwsz pozycj korzystajc z
W
5. Zapisz i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie. Wywietl stron
czy wywietlane s miniatury produktw.

Strona 9-7
zacji 10 min)
sposobu pobierania obrazkw z bazy danych.
Tok postpowania
Do aplikacji dodaj now stron Miniatura.aspx opart o szablon strony
W metodzie Page_Load dodaj nastpujcy kod:

var miniaturka = (from p in db.Products
where p.ProductID == int.Parse(Request.QueryString["id"])
select p.ThumbNailPhoto).FirstOrDefault();
if (miniaturka != null)
{
Response.ContentType = "image/bmp";
Response.BinaryWrite(miniaturka.ToArray());
}

Zapisz zmiany w projekcie. Wywietl stron Miniatura.aspx
co jest wywietlane.
Dlaczego pojawia si pusta strona?
Dodaj do adresu strony ?id=771.
Co si zmienio? Dlaczego?
Otwrz stron Produkty.aspx.
W widoku Design wybierz kontrolk GridView, a nastpnie kilknij
Tag. Wybierz Edit Columns.
Z listy Available Fields wybierz ImageField i kliknij
Przesu pole na pierwsz pozycj korzystajc z przycisku
W obszarze ImageField Properties:
w polu DataAlternateTextField wpisz Name
w polu DataAlternateTextFormatString wpisz
w polu DataImageUrlField wpisz ProductID
w polu DataImageUrlFormatString wpisz ~/Miniatura.aspx?id={0}
Zapisz zmiany w projekcie. Wywietl stron Produkty.aspx
czy wywietlane s miniatury produktw.

Modu 9
LINQ w ASP.NET
opart o szablon strony
select p.ThumbNailPhoto).FirstOrDefault();
Response.BinaryWrite(miniaturka.ToArray());
Miniatura.aspx i sprawd,
a nastpnie kilknij Smart
i kliknij Add.
przycisku .
Miniatura {0}
~/Miniatura.aspx?id={0}
Produkty.aspx i sprawd,
Piotr Bubacz Modu 9
Strona 9-8
Teraz musisz przygotowa stron wywietlajc szczegy produktu Szczegoly.aspx.
1. Przygotuj
stron
Szczegoly.aspx do
wywietlenia
informacji o
produkcie
Do aplikacji dodaj stron Szczegoly.aspx opart na stronie wzorcowej, a
nastpnie dodaj do niej kontrolk MultiView, a nastpnie dwie
kontrolki View o ID: prawidlowyView i blednyView.
W pierwszej kontrolce umie kontrolk Label i w oknie Properties w
polu (ID) wpisz nazwaLabel, natomiast pole Text zostaw puste.
Dodaj znacznik <br /> i dodaj kontrolk Image i w oknie Properties w
polu (ID) wpisz produktImage.
Dodaj znacznik <br /> i napisz Kategoria:, a nastpnie umie kontrolk
Label i w oknie Properties w polu (ID) wpisz kategoriaLabel, natomiast
pole Text zostaw puste.
Dodaj znacznik <br /> i napisz Cena:, a nastpnie umie kontrolk
Label o waciwociach ID="cenaLabel" i Text="".
Dodaj znacznik <br /> i napisz Kolor:, a nastpnie umie kontrolk
Label i w oknie Properties w polu (ID) wpisz kolorLabel, natomiast pole
Text zostaw puste.
Dodaj znacznik <br /> i napisz Opis:, a nastpnie dodaj znacznik <br /> i
umie kontrolk Label i w oknie Properties w polu (ID) wpisz opisLabel.
W kontrolce blednyView w widoku Source dodaj:
Nieprawidowy produkt<br />
Na kocu w widoku Source dodaj:
<a href="Produkty.aspx">Powrt do przegldania produktw</a>
2. Wywietl
produkt zgodnie z
przesan
informacj przez
metod GET
Do metody Page_Load dodaj:
MultiView1.SetActiveView(blednyView);
{
var produkt = (from p in db.Products
select new
{
ProductID = p.ProductID,
Name = p.Name,
Category = p.ProductCategory.Name,
ListPrice = p.ListPrice,
Color = p.Color,
Description =
p.ProductModel.ProductModelProductDescriptions.
First().ProductDescription.Description
}).FirstOrDefault();
if (produkt != null)
{
MultiView1.SetActiveView(prawidlowyView);
Page.Title = "Przegldasz: " + produkt.Name;
nazwaLabel.Text = produkt.Name;
produktImage.ImageUrl = "Miniatura.aspx?id=" +
produkt.ProductID.ToString();
kategoriaLabel.Text = produkt.Category;
cenaLabel.Text = String.Format("{0:C}", produkt.ListPrice);
kolorLabel.Text = produkt.Color;
opisLabel.Text = produkt.Description;
} }
Piotr Bubacz Modu 9
Strona 9-9
3. Zapisz i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i przetestuj moliwo wywietlania
produktw na stronie Szczegoly.aspx.
Sprawd co si stanie, jak w adresie przypiszesz do id inn warto,
np. 1.
Sprawd co si stanie, jak w adresie przypiszesz do id cig znakw, np. a.
Teraz musisz przygotowa kontrolk wywietlajc nowe produkty na szablonie strony .
1. Dodaj
kontrolk
uytkownika
wywietlajc
nowe produkty
NoweProdukty.ascx.
Nastpnie dodaj kontrolk ListView i w oknie Properties:
w polu ID wpisz NoweProduktyListView
w polu ItemPlaceholderID wpisz ListaPlaceHolder
W widoku Source w kontrolce ListView umie:
<LayoutTemplate>
<strong>Nasze nowe produkty:</strong><br />
<asp:PlaceHolder ID="ListaPlaceHolder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<div class="OknoProduktow" >
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl='<%# "~/Szczegoly.aspx?id="+Eval("ProductID") %>'
Text='<%#Eval("Name") %>' /> <br />
<asp:Image ID="ProduktyImage" runat="server"
ImageUrl='<%# "~/Miniatura.aspx?id=" + Eval("ProductID") %>'
AlternateText='<%# Eval("Name") %>' /> <br />
Kategoria: <%#Eval("ProductCategory.Name") %> <br />
Kolor: <%#Eval("Color") %> <br />
Cena: <%#Eval("ListPrice", "{0:C}") %><br />
</div>
</ItemTemplate>
W metodzie Page_Load umie:
var noweProdukty = (from p in db.Products
orderby p.SellStartDate descending
select p).Take(4);
NoweProduktyListView.DataSource = noweProdukty;
NoweProduktyListView.DataBind();
Zapisz zmiany.
2. Dodaj
kontrolk do
szablonu strony
Otwrz szablon strony SzablonStrony.master.
po prawej stronie o ID=DrugiObszarBoczny.
Zapisz zmiany.
3. Dodaj
kontrolk do
gwnej strony
aplikacji
Otwrz stron Default.aspx.
w rodku strony.
Zapisz zmiany.

Piotr Bubacz Modu 9
Strona 9-10
4. Zapis i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i sprawd, czy wywietlane s nowe produkty
w drugim obszarze roboczym na kadej stronie.
5. Ustal wygld
wywietlanych
produktw
Do pliku Style.css dodaj nastpujce informacje o stylu:
.OknoProduktow
{
background-color: #C3DBEA;
border-style: solid;
border-color: #55BBFF;
margin: 5px auto 0px auto;
width: 120px;
}
6. Zapisz i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i sprawd, jak wywietlane s nowe produkty
w drugim obszarze roboczym na kadej stronie.
Ostatnim zadaniem jest przygotowanie kontrolki wywietlajcej losowe produkty.
7. Dodaj widok i
funkcj w TSQL
umoliwiajc
losowo
wybieranie
rekordw z bazy
W oknie Server Explorer rozwi ga zawierajc plik
AdventureWorksLT_Data.mdf i kliknij prawym przyciskiem myszy ga
Views i wybierz Add New View.
W oknie Add Table wcinij przycisk Close. W oknie zapytania zastp
SELECT FROM nastpujcym zapytaniem:
SELECT NEWID() AS ID
Wcinij CTRL+S i wprowad nazw vLosuj.
Kliknij prawym przyciskiem myszy ga Functions i wybierz Add New->
Scalar-valued Function.
Zamie zapytanie na:
CREATE FUNCTION Losuj ()
RETURNS uniqueidentifier AS
BEGIN RETURN (SELECT ID FROM vLosuj) END
Wcinij CTRL+S.
8. Dodanie
funkcji Losuj do
obiektu
AdventureWorksD
ataContext
W oknie Solution Explorer otwrz App_Code\AdventureWorks.dbml.
Do prawej strony opisanej Create methods by dragging items dodaj z
okna Server Explorer funkcj Losuj z gazi Functions.
9. Dodaj
kontrolk
uytkownika
wywietlajc
nowe produkty
WybraneProdukty.ascx.
Nastpnie dodaj kontrolk ListView i w oknie Properties:
w polu ID wpisz WybraneProduktyListView
w polu ItemPlaceholderID wpisz ListaPlaceHolder
W widoku Source w kontrolce umie:
<LayoutTemplate>
<strong>Wybrane produkty:</strong>
<asp:PlaceHolder ID="ListaPlaceHolder" runat="server" />
</LayoutTemplate>
Piotr Bubacz Modu 9
Strona 9-11
<ItemTemplate>
<div class="OknoProduktow">
<asp:HyperLink ID="HyperLink1" runat="server"
NavigateUrl='<%# "~/Szczegoly.aspx?id="+Eval("ProductID") %>'
Text='<%#Eval("Name") %>' /> <br />
<asp:Image ID="ProduktyImage" runat="server"
ImageUrl='<%# "~/Miniatura.aspx?id=" + Eval("ProductID") %>'
AlternateText='<%# Eval("Name") %>' /> <br />
Kategoria: <%#Eval("ProductCategory.Name") %><br />
Kolor: <%#Eval("Color") %><br />
Cena: <%#Eval("ListPrice", "{0:C}") %><br />
</div>
</ItemTemplate>
W metodzie Page_Load umie:
var noweProdukty = (from p in db.Products
orderby db.Losuj()
select p).Take(3);
WybraneProduktyListView.DataSource = noweProdukty;
WybraneProduktyListView.DataBind();
Zapisz zmiany.
10. Dodaj
kontrolk do
szablonu strony
Otwrz szablon strony SzablonStrony.master.
po lewej stronie o ID="PierwszyObszarBoczny".
Zapisz zmiany.
11. Dodaj
kontrolk do
gwnej strony
aplikacji
Otwrz stron Default.aspx
W widoku Design usu zawarto strony i umie kontrolk
WybraneProdukty.ascx na stron.
Zapisz zmiany.
12. Zapis i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i sprawd czy wywietlane s losowe
produkty w pierwszym obszarze roboczym na kadej stronie.
13. Zapisz i
przetestuj dodan
funkcjonalno
Zapisz zmiany w projekcie i sprawd jak wywietlane s losowe produkty
w pierwszym obszarze roboczym na kadej stronie.

Piotr Bubacz
Modu 10
Wersja 1
Bezpieczestwo serwisw
internetowych
Spis treci
Bezpieczestwo serwisw internetowych ........................................................................................... 1

Piotr Bubacz Modu 10
ITA-103 Aplikacje Internetowe Bezpieczestwo serwisw internetowych
Strona 10-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce sposobw zabezpieczania
dostpu do aplikacji internetowej przy pomocy mechanizmw autoryzacji.
Poznasz kontrolki logowania oraz nauczysz si, jak mona ukrywa opcje
menu przed rnymi grupami uytkownikw.
Cel moduu
Celem moduu jest przedstawienie wbudowanych w ASP.NET
mechanizmw zabezpieczajcych dostp do aplikacji internetowych.
potrafi wykorzysta uwierzytelnianie oparte na formularzu
potrafi zabezpiecza dostp do aplikacji przed nieautoryzowanymi
uytkownikami
potrafi okrela prawa dostpw dla rnych grup uytkownikw
Wymagania wstpne
zna podstawy HTML i CSS
zna zasady pracy w Visual Studio 2008
Mapa zalenoci moduu
w moduach Podstawy HTML, Kaskadowe Arkusze Stylw CSS
i Wprowadzenie do ASP.NET.

Strona 10-3
Przykadowy problem
Tworzc aplikacje internetowe czsto napotykamy problem zwizany z dodaniem moliwoci
uwierzytelniania uytkownikw naszego serwisu. Dodatkowo musimy zapewni mechanizm
ograniczenia dostpu do zasobw dla okrelonych uytkownikw lub grup uytkownikw.
Uwierzytelnianie uytkownikw to nie tylko formularz, w ktrym wpisuje si nazw i haso. Za tym
zagadnieniem kryje si szereg innych kwestii: jak i gdzie przechowywa informacje
o uytkownikach, jak umoliwi rejestracje, jak uatwi proces odzyskiwania hasa, jak w kocu
ograniczy dostp do opcji menu i katalogw aplikacji.
W tym celu wykorzystujemy mechanizmy uwierzytelnienia i autoryzacji. Tworzenie takich
mechanizmw nie jest proste i musi by poprzedzone dogbn analiz problemu. W aplikacjach
internetowych zaley nam na szybkim tworzeniu rozwiza. W celu zapewnienia odpowiedniego
poziomu zabezpiecze moemy skorzysta z mechanizmw dostarczanych przez ASP.NET.
Tworzenie, rejestracja, logowanie, zmiana hasa, przypomnienie hasa to najczstsze przypadki
uycia zarzdzania uytkownikami. Tworzc takie formularze od podstaw musimy nie tylko
zapewni odpowiedni interfejs uytkownika, ale rwnie zapewni odpowiednie zapisanie tych
danych do repozytorium. ASP.NET dostarcza nam gotowy zbir podstawowych kontrolek
uatwiajcych te zadania.
Uwierzytelnianie uytkownikw
Uwierzytelnianie (ang. authentication) jest to proces, w ktrym sprawdza si, czy dany uytkownik
jest tym, za kogo si podaje. Proces ten najczciej wie si z podaniem przez uytkownika nazwy i
hasa. W ASP.NET wspierane s rne mechanizmy uwierzytelniania:
uwierzytelnianie Windows
uwierzytelnianie za pomoc formularza
uwierzytelnianie przy uyciu Windows Live ID
Uwierzytelnianie Windows
Uwierzytelnianie Windows mona wykorzystywa, jeli baza uytkownikw znajduje si na
kontrolerze domeny Windows. Najwaniejsz zalet takiego uwierzytelnienia jest moliwo
korzystania z istniejcych kont systemowych oraz to, e nie potrzeba pisa dodatkowego kodu
zarzdzajcego uwierzytelnieniem. Serwer IIS identyfikuje uytkownika za pomoc etonw
przyznanych uytkownikowi przy zalogowaniu do serwera.
W celu konfiguracji uwierzytelniania Windows naley w pliku Web.config w sekcji <system.web>
dopisa:
<authentication mode="Windows"/>
Uwierzytelnianie Windows moe by wykorzystywane tylko w przypadku posiadania kont przez
uytkownikw na serwerze. Taka sytuacja ma miejsce najczciej w przypadku aplikacji
intranetowych. Uwierzytelnianie Windows jest domyln metod uwierzytelniania w aplikacjach
ASP.NET.
Uwierzytelnianie za pomoc formularza
W przypadku gdy projektowana aplikacja ma dziaa w sieci Internet, posiadanie konta na serwerze
przez wszystkich potencjalnych uytkownikw aplikacji jest niemoliwe. Dodatkowo istnieje
potrzeba przechowywania informacji o uytkownikach w innym miejscu ni system uytkownikw
Strona 10-4
Windows. Najczciej dane takie przechowywane s w bazie danych. Uwierzytelnianie formularzy
umoliwia atwe i bezpieczne potwierdzanie tosamoci.
Uytkownik w przypadku tej metody uwierzytelniania musi skorzysta ze specjalnej strony do
wprowadzenia nazwy i hasa, ktre nastpnie jest sprawdzane z danymi zapisanymi w bazie
danych, specjalnych plikach lub innych rdach. W przypadku maej iloci uytkownikw moliwe
jest przechowywanie tych danych w pliku Web.config, jednak dla wikszych rozwiza lepiej jest
wykorzysta baz danych.
Standardowo uwierzytelnianie to wykorzystuje plik cookie do przechowywania informacji
o uwierzytelnieniu midzy stronami. Plik taki jest wysyany do serwera wraz z kadym daniem.
Istnieje moliwo wykorzystania adresu URL do przechowywania tej informacji w przypadku, kiedy
przegldarka uytkownika ma wyczon obsug ciasteczek.
Poniej zostaa przedstawiona podstawowa konfiguracje tego typu uwierzytelniania z dodatkowym
znacznikiem <forms> okrelajcym stron logowania Zaloguj.aspx.
<authentication mode="Forms">
<forms loginUrl="Zaloguj.aspx" />
</authentication>
Uwierzytelnianie przy uyciu Windows Live ID
Windows Live ID to oglnodostpny, jednolity system, umoliwiajcy dowolnym uytkownikom
nie tylko klientom Microsoft korzystanie ze wszystkich stron Microsoft wymagajcych logowania.
Kady zarejestrowany uytkownik otrzymuje swj indywidualny identyfikator, ktry pomaga mu w
poruszaniu si po wszystkich zasobach Microsoft, na caym wiecie. Windows Live ID jest np.
konieczny do wzicia udziau w spotkaniu (konferencji lub seminarium) dziki niemu rejestracja
uczestnikw odbywa si atwiej i szybciej.
Windows Live ID zosta udostpniony programistom, aby atwo mogli doczy globalne
uwierzytelnianie do swoich aplikacji. Dziki temu uytkownik nie musi posiada na naszej stronie
dodatkowego hasa. Wystarczy, e zaloguje si na dowolnej stronie wspierajcej t technologie i
ma dostp do wszystkich zasobw.
Przechowywanie informacji o uytkownikach w bazie danych
W przypadku uwierzytelnienie za pomoc formularza ASP.NET wykorzystuje standardowych
dostawcw SqlMembershipProvider i SqlRoleProvider. Wykorzystuj one baz danych SQL
Server do przechowywania informacji o uytkownikach i rolach. Informacje te s przechowywane w
szeregu tabel i dostp do nich nastpuje przez procedury skadowane. Standardowo informacje te
s przechowywane w bazie ASPNETDB.MDF w katalogu App_Data.
Umieszczajc aplikacje internetow na serwerze dostawcy mamy do czsto ograniczenie iloci
baz. Z tego wzgldu, jeli w aplikacji wykorzystywane s rwnie inne dane, do czsto s one
dodawane do tej wanie bazy. Nie jest to rozwizanie bezpieczne, poniewa znajomo nazwy bazy
danych moe uatwi atak. Dodatkowo jeli posiadamy ju gotowe rozwizanie bazodanowe i
chcemy rozszerzy nasz aplikacj o moliwo uwierzytelniania, moemy te informacje umieci w
naszej bazie danych.
Aby umieci niezbdne tabele i procedury w naszej bazie, musimy wykorzysta ASP.NET SQL
Server Registration Tool (aspnet_regsql.exe). Narzdzie to moe by uywane z linii polece lub z
poziomu graficznego kreatora. W przypadku uycia linii polece mamy wiksze moliwoci
konfiguracji narzdzia.
W tym celu musimy uruchomi lini polece VS 2008. W systemie Windows XP/2003 musimy
wybra Start -> Programy -> Microsoft Visual Studio 2008 -> Visual Studio Tools -> Visual
Studio 2008 Command Prompt, a nastpnie wyda polecenie:
Strona 10-5
aspnet_regsql -A all -C "Data Source=.\SQLEXPRESS;Integrated
Security=True;User Instance=True" -d "X:\Projekt\APP_DATA\moja_baza.mdf"
Gdzie X:\Projekt to cieka do naszego projektu strony, a moja_baza.mdf, to plik zawierajcy
baz danych aplikacji.
Po utworzeniu niezbdnych tabel i procedur naley poinformowa dostawcw o koniecznoci
korzystania z naszej bazy danych. W tym celu do pliku Web.config musimy doda do sekcji
<system.web> nastpujce informacje:
<roleManager enabled="true" defaultProvider="CustomizedRoleProvider">
<providers>
<add name="CustomizedRoleProvider"
type="System.Web.Security.SqlRoleProvider"
connectionStringName="ConnectionString" />
</providers>
</roleManager>

<membership defaultProvider="CustomizedMembershipProvider">
<providers>
<add name="CustomizedMembershipProvider"
type="System.Web.Security.SqlMembershipProvider"
</providers>
</membership>
Gdzie ConnectionString to nazwa naszego poczenia do bazy skonfigurowana w sekcji
connectionStrings.
Autoryzacja uytkownikw
Autoryzacja (ang. authorization) to proces, w ktrym sprawdzane jest, czy uytkownik o ustalonej
wczeniej tosamoci ma prawo dostpu do zasobw, o ktre prosi. Uprawnienia mog dotyczy
np. dostpu do katalogu lub pliku.
Dostp do plikw
Autoryzacja dostpu do pliku jest zwizana z prawami, jakie uytkownik ma w systemie, zatem aby
uywa tej metody naley stosowa uwierzytelnianie Windows. W celu konfiguracji uprawnie
naley wykorzysta narzdzia sytemu i skonfigurowa odpowiednie poziomy dostpu dla
uytkownikw.
Dostp do pliku w obrbie aplikacji
W przypadku plikw w obrbie aplikacji moliwe jest okrelenie dostpu do pojedynczej strony lub
wirtualnego katalogu w aplikacji sieciowej. Moliwe jest uycie tego sposobu autoryzacji ze
wszystkimi sposobami uwierzytelnienia.
Dostp do katalogu mona ograniczy w pliku Web.config umieszczonym w gwnym katalogu
aplikacji lub katalogu, ktrego dotycz dane prawa.
W celu ustalenia praw w wybranym katalogu naley utworzy w nim plik Web.config, a nastpnie w
sekcji <authorization> zezwoli (element <allow>) lub zabroni (element <deny>) dostpu do
niego okrelonym uytkownikom lub grupom uytkownikw.
Do okrelania roli dopuszcza si rwnie uywanie nastpujcych symboli zastpczych:
* okrela dowolnego uytkownika
? okrela uytkownika anonimowego
Przykad zezwolenie dostpu dla uytkownikw Adam, Karol oraz Michal i zabronienie dostpu
dla uytkownikw anonimowych.
Strona 10-6
<authorization>
<allow users="Adam, Karol, Michal" />
<deny users="?" />
</authorization>
W celu ustalenia praw dla caej aplikacji z okreleniem katalogw aplikacji naley w gwnym pliku
Web.config doda sekcj <location path="ciezka_do_katalogu">, a nastpnie sekcj
<system.web>, a w niej sekcj <authorization>. Przykad:
<location path="Admin">
<system.web>
<authorization>
<allow roles="Administrator" />
<deny users="*" />
</authorization>
</system.web>
</location>
Kontrolki logowania
Kontrolki logowania stanowi zbir kontrolek serwerowych implementujcych wszystkie
najwaniejsze elementy niezbdne do zarzdzania uytkownikami i ich uwierzytelniania.
Kontrolka Login
Kontrolka Login (Rys. 2) umoliwia uwierzytelnienie uytkownika. Uwierzytelnienie odbywa si z
pomoc formularza przy uyciu obiektu MembershipProvider zdefiniowanego w pliku
Web.config.

Rys. 2 Kontrolka Login
Mechanizmy uwierzytelniania umoliwiaj zapamitanie uytkownika w pliku cookie, dziki temu
nie musi on za kadym razem wpisywa danych logowania.
Kontrolka ChangePassword
Kontrolka ChangePassword (Rys. 3) umoliwia zalogowanemu uytkownikowi zmian hasa.
Udana zmiana hasa powoduje wysanie do uytkownika wiadomoci e-mail.

Rys. 3 Kontrolka ChangePassword
Wysanie poczty elektronicznej jest moliwe po wczeniejszym skonfigurowaniu parametrw
serwera SMTP w pliku Web.config. Mona to rwnie zrobi przy pomocy ASP.NET Web Site
Administration Tool.

Strona 10-7
Przykad konfiguracji serwera poczty w pliku Web.config:
<system.net>
<mailSettings>
<smtp from="od">
<network host="adresSerwera" password="haslo" userName="uzytkownik" />
</smtp>
</mailSettings>
</system.net>
Kontrolka CreateUserWizard
Kontrolka CreateUserWizard (Rys. 4) umoliwia rejestracj nowego uytkownika. Nowy
uytkownik musi poda nazw, haso, adres e-mail oraz sekretne pytanie i odpowied . Sekretne
pytanie i odpowied su do odzyskiwania hasa w przypadku, gdy uytkownik je zapomni.
Udane utworzenie uytkownika powoduje wysanie wiadomoci elektronicznej na podany adres.

Rys. 4 Kontrolka CreateUserWizard
Kontrolka PasswordRecovery
Kontrolka PasswordRecovery umoliwia uytkownikowi przypomnienie hasa. Kontrolka po
wpisaniu nazwy uytkownika wymaga podania odpowiedzi na sekretne pytanie. Jeli odpowied
jest prawidowa, to wysyana jest wiadomo zawierajca nowe haso.

Rys. 5 Kontrolka PasswordRecovery

Kontrolka LoginView
Kontrolka LoginView jest kontenerem umoliwiajcym wywietlenie zawartoci w zalenoci od
tego, czy i kto jest zalogowany.
Standardowo kontrolka rozpoznaje uytkownika anonimowego (<AnonymousTemplate>) i
zalogowanego (<LoggedInTemplate>). Dla kadego ze stanw moliwe jest zdefiniowanie
osobnej zawartoci. Przykad:
Strona 10-8
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
Zawarto dla uytkownika zalogowanego
</LoggedInTemplate>
<AnonymousTemplate>
Zawarto dla uytkownika anonimowego
</AnonymousTemplate>
</asp:LoginView>
Kontrolka LoginStatus
Kontrolka LoginStatus umoliwia wywietlenie konfigurowalnych odnonikw w zalenoci od
tego, czy uytkownik jest zalogowany (Logout) czy anonimowy (Login). Jeli uytkownik nie jest
zalogowany, to po klikniciu na odnonik Login zostaje przekierowany na stron logowania
zdefiniowan w pliku Web.config w atrybucie loginUrl sekcji <authentication>. Jeli
uytkownik jest zalogowany, to kliknicie przycisku Logout zostaje wylogowany i przekierowany
na stron podan w atrybucie LogoutPageUrl kontrolki. Przykad:
<asp:LoginStatus ID="LoginStatus1" runat="server"
LogoutAction="Redirect" LogoutPageUrl="Default.aspx" />
Kontrolka LoginName
Kontrolka LoginName wywietla nazw uytkownika. Jest wykorzystywana najczciej do
wywietlenia komunikatu powitalnego dla uytkownika. Przykad:
Witaj <asp:LoginName ID="LN1" runat="server" />!
Ukrywanie opcji menu
W aplikacjach internetowych zachodzi czsto potrzeba ukrywania pewnych elementw
nawigacyjnych przed uytkownikami, ktrzy nie maj odpowiednich uprawnie, np. wybranych
opcji menu.
Aby tego dokona, naley doda atrybut roles do pliku Web.sitemap oraz w pliku Web.config
ustawi waciwo securityTrimmingEnabled obiektu XmlSiteMapProvider na warto
true.
Naley pamita o tym, e ukrycie przed uytkownikiem odnonika do strony nie zabrania mu do
niej dostpu. Aby ograniczy dostp do folderu lub pliku, naley skonfigurowa sekcj
<authorization> w pliku Web.config.
Koniecznym zatem jest jawne okrelenie roli jednoczenie na poziomie uprawnie do folderw
(Web.config), jak i wzw, z ktrymi nie jest skojarzony adres URL (Web.sitemap).
Konfiguracja atrybutu roles w pliku Web.sitemap
Konfiguracja atrybutu roles odbywa si poprzez dodanie go do sekcji <siteMapNode> i
przypisanie do niego odpowiednich rl. Przykad:
<siteMapNode
title="Administracja"
description="Zarzdzaj witryn"
roles="Administrator">
...
</siteMapNode>
Konfiguracja pliku Web.config
W pliku Web.config w sekcji <system.web> naley doda domylnego dostawc mapy serwisu
XmlSiteMapProvider. Przykad:
<siteMap defaultProvider="XmlSiteMapProvider" enabled="true" >
<providers>
Strona 10-9
<add
name="XmlSiteMapProvider"
description="Domylny dostawca mapy serwisu."
type="System.Web.XmlSiteMapProvider"
siteMapFile="Web.sitemap"
securityTrimmingEnabled="true" />
</providers>
</siteMap>
Podsumowanie
W tym rozdziale przedstawione zostay zagadnienia zwizane z uwierzytelnianiem uytkownikw
przy uyciu formularzy. Pokazano jak zabezpiecza dostp do katalogw oraz opcji menu.
Zaprezentowano kontrolki uatwiajce najczstsze zadania przy zarzdzaniu uytkownikami.
Uwagi dla studenta
umiesz skonfigurowa uwierzytelnianie za pomoc formularza
umiesz okreli dostp do wybranego katalogu w aplikacji
znasz kontrolki logowania i wiesz kiedy moesz je uy
potrafisz ukry opcje menu przed rnymi grupami uytkownikw
1. Scott Mitchell, Examining ASP.NET 2.0's Membership, Roles, and Profile,
http://aspnet.4guysfromrolla.com/articles/120705-1.aspx
12-czciowy artyku poruszajcy praktyczne zagadnienia zwizane z zarzdzaniem
uytkownikami, rolami i profilami. Nie tylko dobrze przedstawiona teoria, ale
przede wszystkim porady praktyczne i rozwizania najczciej spotykanych
problemw.
2. Jakub Zagrski, Portal Internetowy w ASP.NET 2.0 z czym to si je?,
http://www.codeguru.pl/article-560.aspx
Artyku dotyczcy wielu aspektw zwizanych z tworzeniem portalu
internetowego, z ciekawym opisem kwestii zwizanych z uwierzytelnieniem.
3. How To: Use Membership in ASP.NET 2.0, http://msdn.microsoft.com/en-
Obszerny artyku zespou patterns & practices przedstawiajcy kwestie
wykorzystania uwierzytelniania w aplikacjach ASP.NET.
4. Stefan Schackow, Professional ASP.NET 2.0 Security, Membership, and Role Management, Wrox,
2006
Autor w ksice poruszy wiele zagadnie zwizanych z bezpieczestwem, wcznie
z zabezpieczaniem konfiguracji. Ksika zawiera szczegowe informacje dotyczce
wszystkich najwaniejszych obszarw bezpieczestwa aplikacji ASP.NET.
Strona 10-10
Przygotowujesz aplikacj internetow dla firmy Adventure Works, ktra planuje ekspansje na rynku
internetowym w Polsce. Aktualnie aplikacja umoliwia ju przegldanie produktw oraz zawiera
klika ciekawych elementw uatwiajcych sprzeda produktw. Kolejnym krokiem w rozwoju
aplikacji jest implementacja uwierzytelniania jej uytkownikw. W bazie dostarczonej do
rozbudowy istniej ju informacje o uytkownikach, jednak ze wzgldu na krtki czas implementacji
aplikacji Twj zesp zaproponowa wykorzystanie wbudowanych mechanizmw uwierzytelniania.
Na szczcie klient si zgodzi. Twj zesp sprawdzi, e mechanizm ten potrzebuje bazy danych
ASPNETDB. Niestety na serwerze wykupionym przez klienta nie ma moliwoci dodania drugiej
bazy danych. Musisz zatem zintegrowa baz uwierzytelniania z istniejc baz danych oraz
utworzy dwch uytkownikw: admin i karol.

1. Dodaj tabele i
procedury z
uwierzytelniajce
do istniejcej bazy
danych
Otwrz aplikacj internetow przygotowan w poprzednim module.
W oknie Solution Explorer wybierz baz danych
AdventureWorksLT_Data.mdf znajdujc si w katalogu App_Data.
Skopiuj ciek dostpu znajdujca si w oknie Properties w polu
FullPath.
W systemie Windows XP/2003 wybierz Start -> Programy -> Microsoft
Visual Studio 2008 -> Visual Studio Tools -> Visual Studio 2008
Command Prompt.
W linii polece wpisz nie kopiuj:
aspnet_regsql -A all -C "Data Source=.\SQLEXPRESS;Integrated
Security=True;User Instance=True" -d
Dodaj na kocu wpisanego polecenia odstp, a nastpnie wklej
skopiowan ciek (kliknij prawym przyciskiem myszy, a nastpnie
wybierz Wklej).
2. Dodaj
informacj o
korzystaniu z
innej bazy do
pliku Web.config
Otwrz plik Web.config.
Do sekcji <system.web> dodaj nastpujce informacje:
<roleManager enabled="true"
defaultProvider="CustomizedRoleProvider">
<providers>
<add name="CustomizedRoleProvider"
type="System.Web.Security.SqlRoleProvider"
applicationName="AdventureWorks"
</providers>
</roleManager>

<membership defaultProvider="CustomizedMembershipProvider">
<providers>
<add name="CustomizedMembershipProvider"
type="System.Web.Security.SqlMembershipProvider"
applicationName="AdventureWorks"
</providers>
</membership>
Odnajd sekcj <connectionStrings>, a nastpnie znacznik <add>.
Skopiuj zawarto waciwoci name i wklej dwukrotnie w miejsce
ConnectionString (wyrnione miejsca w kodzie powyej) w dodanej
Strona 10-11
uprzednio fragmencie konfiguracji.
3. Uruchom
narzdzie
administracyjne
Uruchom ASP.NET Web Site Administration Tool, wybierajc z menu
gwngo Websites -> ASP.NET Configuration.
Zostanie uruchomiona przegldarka i wywietli si strona przedstawiona
na Rys. 6.

Rys. 6 ASP.NET Web Site Administration Tool
4. Dodaj
uytkownikw do
aaplikacji
Wybierz z menu zakadk Security, a nastpnie kliknij odnonik Use the
security Setup Wizard to configure security step by step. Nacinij
przycisk Next.
W kroku drugim (Select Access Method) okrel metod odstpu,
zaznaczajc opcj From the Internet. Nacinij przycisk Next.
W kroku trzecim (Data Store) nacinij przycisk Next.
W kroku czwartym (Define Roles) zaznacz opcj Enable roles for this
Web site. Nacinij przycisk Next. W polu tekstowym New Role Name
wpisz:
Administrator i wcinij Add Role
User i wcinij Add Role
Nacinij przycisk Next.
W kroku pitym (Add New Users) dodaj nowego uytkownika, podaj
nastpujce dane:
User Name: admin
Password: Pa$$word
Confirm Password: Pa$$word
E-mail: {adres e-mail}
Security Question: Ulubiony kolor
Security Answer: zielony
Nacinij przycisk Create User. Dodaj kolejnego uytkownika:
User Name: karol
Password: Pa$$word
Piotr Bubacz
Nacinij przycisk
W kroku szstym (
do katalogw dla poszczeglnych uytkownikw lub grup
przycisk
Krok sidmy informuje o zakoczeniu procesu konfigu
zabezpiecze.
Na
oraz ilo rl (
5. Przypisz konta
uytkownikw do
rl
W zakadce
P
uytkownika zaznaczajc pola wyboru
P
uytkownika zaznaczajc odpowiednie pole wyboru
6. Skonfiguruj
konto pocztowe
Wybierz zakadk
email settings
w
korzystasz

Po dodaniu i skonfigurowaniu uytkownikw czas na dodanie do aplikacji moliwoci logowania. Na
stronie Zaloguj.aspx uytkownik ma mie moliwo podania danych do uwierzytelnienia lub
przekierowania na stron Odzyskiwanie.aspx
Uytkownik ma mie rwnie moliwo utworzenia konta w systemie na stronie
Na stronie ZmianaHasla.aspx
dotychczasowego hasa.
1. Dodaj
wymagane strony
do aplikacji
Wybierz
Z listy
W polu
Z listy
Upewnij si, e opcja
Upewnij si, e opcja
Kliknij
Podobnie dodaj stron

Bezpieczestwo serwisw internetowych
Strona 10-12
Confirm Password: Pa$$word
E-mail: {adres e-mail}
Security Question: Ulubiony kolor
Security Answer: zielony
Nacinij przycisk Create User, a nastpnie przycisk
W kroku szstym (Add New Access Rules), pozwalajcym
do katalogw dla poszczeglnych uytkownikw lub grup
przycisk Next.
Krok sidmy informuje o zakoczeniu procesu konfigu
zabezpiecze. Nacinij przycisk Finish.
Na zakadce Security sprawd, czy ilo uytkownikw (
oraz ilo rl (Roles) 2.
W zakadce Security kliknij cze Manage users.
Przy uytkowniku admin kliknij cze Edit Roles
uytkownika zaznaczajc pola wyboru.
Przy uytkowniku karol kliknij cze Edit Roles i przypisz rol
uytkownika zaznaczajc odpowiednie pole wyboru
Wybierz zakadk Application, a nastpnie kliknij cze
email settings. Skonfiguruj ustawienia serwera poczty wysyajcej
wpisujc adres dowolnego serwera pocztowego, z jakiego na co dzie
korzystasz:
Server Name: adres serwera poczty wysyajcej
Server Port: port serwera poczty wysyajcej
From: Informacja, ktra pojawi si w licie jako
serwery blokuj podawanie innych nazw, ni nazwa konta)
Authentication: zaznacz Basic
Sender's user name: nazwa uytkownika poczty
Sender's password: haso uytkownika
Pamitaj, e wszystkie dane konta, w tym haso,
w postaci niezakodowanej w pliku Web.config.
uytkownik ma mie moliwo podania danych do uwierzytelnienia lub
Odzyskiwanie.aspx, na ktrej bdzie mg odzys
Uytkownik ma mie rwnie moliwo utworzenia konta w systemie na stronie
ZmianaHasla.aspx uytkownik zalogowany ma mie moliwo zmiany swojego
Tok postpowania
Z listy Visual Studio installed templates wybierz Web
W polu Name wpisz Zarejestruj.aspx.
Upewnij si, e opcja Place code in separate file jest zaznaczona.
Upewnij si, e opcja Select master page jest zaznaczona.
Kliknij OK.
Podobnie dodaj stron Zaloguj.aspx
Modu 10
przycisk Next.
pozwalajcym okreli prawa
do katalogw dla poszczeglnych uytkownikw lub grup, nacinij
Krok sidmy informuje o zakoczeniu procesu konfiguracji
, czy ilo uytkownikw (Users) wynosi 2

Edit Roles i przypisz obie role do
i przypisz rol User do
uytkownika zaznaczajc odpowiednie pole wyboru.
kliknij cze Configure SMTP
. Skonfiguruj ustawienia serwera poczty wysyajcej,
pisujc adres dowolnego serwera pocztowego, z jakiego na co dzie
: adres serwera poczty wysyajcej
: Informacja, ktra pojawi si w licie jako Od: (niektre
serwery blokuj podawanie innych nazw, ni nazwa konta)
uytkownika poczty
, w tym haso, zostan umieszczone
.
uytkownik ma mie moliwo podania danych do uwierzytelnienia lub
na ktrej bdzie mg odzyska zapomniane haso.
Uytkownik ma mie rwnie moliwo utworzenia konta w systemie na stronie Zarejestruj.aspx.
uytkownik zalogowany ma mie moliwo zmiany swojego
Web Form.
jest zaznaczona.
jest zaznaczona.
Strona 10-13
2. Dodaj
kontrolk
LoginView
Na stronie wzorcowej SzablonStrony.master w obszarze div o
ID="ObszarLogowania" umie kontrolk LoginView.
Kliknij Smart Tag i wybierz AnonymousTemplate. W kontrolce wpisz
Zarejestruj, zaznacz wpisany tekst i nacinij Ctrl+L lub wybierz
Format->Convert to Hyperlink. Kliknij przycisk Browse i wybierz plik
Zarejestruj.aspx. Nacinij OK. Ponownie nacinij OK.
Kliknij Smart Tag i wybierz LoggedInTemplate. W kontrolce wpisz
"Witaj ", a nastpnie dodaj kontrolk LoginName.
3. Dodaj
kontrolk
LoginStatus
Na stronie wzorcowej SzablonStrony.master w obszarze div o
ID="ObszarLogowania" za kontrolk LoginView wpisz symbol |, a
nastpnie umie kontrolk LoginStatus. W oknie Properties:
w polu CssClass wpisz LinkObszaruLogowania
w polu LoginText wpisz Zaloguj
w polu LogoutAction wpisz Redirect
w polu LogoutPageUrl wpisz ~/Default.aspx
w polu LogoutText wpisz Wyloguj
Do pliku Style.css dodaj definicj klasy LinkObszaruLogowania:
.LinkObszaruLogowania
{ color: #000033; }
4. Okrel stron
logowania
W pliku Web.config zamie znacznik <authentication mode="Forms" />
na:
<authentication mode="Forms">
<forms loginUrl="~/Zaloguj.aspx" />
</authentication>
5. Dodaj
kontrolk
logowania
Na stronie Zaloguj.aspx w widoku Design napisz Zaloguj si w serwisie,
a nastpnie umie kontrolk Login. W oknie Properties:
w polu FailureText wpisz Logowanie nie powiodo si. Upewnij si,
e poprawnie wpisae nazw uytkownika i haso.
w polu LoginButtonText wpisz Zaloguj
w polu PasswordLabelText wpisz Haso:
w polu PasswordRequiredErrorMessage wpisz Wprowad haso.
w polu RememberMeText wpisz Zapamitaj mnie
w polu UserNameLabelText wpisz Login:
w polu UserNameRequiredErrorMessage wpisz Wprowad nazw.
Do strony w widoku Source dodaj:
<a href="Odzyskiwanie.aspx">Zapomniaem hasa</a>
Zapisz zmiany na stronie.
6. Dodaj
kontrolk
tworzenia
uytkownika
Na stronie Zarejestruj.aspx w widoku Design umie kontrolk
CreateUserWizard. W oknie Properties zmie waciwoci tak, aby w
kontrolce byy wywietlane komunikaty w jzyku polskim.
7. Dodaj
kontrolk
odzyskiwania
hasa
Do aplikacji dodaj stron Odzyskiwanie.aspx opart o szablon strony
SzablonStrony.master. W widoku Design umie kontrolk
PasswordRecovery. W oknie Properties zmie waciwoci tak, aby w
kontrolce byy wywietlane komunikaty w jzyku polskim.
Strona 10-14
8. Dodaj
kontrolk zmiany
hasa
Do projektu dodaj katalog Zarzadzanie.
Do katalogu dodaj stron ZmianaHasla.aspx opart na szablonie strony
SzablonStrony.master.
Na stronie napisz Zmie haso i dodaj kontrolk ChangePassword. W
oknie Properties zmie waciwoci tak, aby w kontrolce byy
wywietlane komunikaty w jzyku polskim.
9. Sprawd
dziaanie aplikacji
Sprawd poprawno dziaania aplikacji.
Zaloguj si korzystajc z uytkownika karol.
Dodaj nowego uytkownika i sprawd moliwo zalogowania na
podane dane.
Ostatnim elementem zwizanym z zabezpieczeniami jest ukrycie opcji menu oraz zabezpieczenie
katalogu przed dostpem niepowoanych uytkownikw. Menu Zarzdzanie powinno by widoczne
tylko dla uytkownikw znajdujcych si w roli User i Administrator. Pozostali uytkownicy nie
powinni mie dostpu do katalogu.
1. Uzupenij
brakujce strony
w pliku Web.
sitemap
Otwrz plik Web.sitemap. Po sekcji wywietlajcej menu dla produktw
dodaj:
<siteMapNode title="Zarzdzanie" description="Zarzdzaj">
<siteMapNode url="Zarzadzanie/ZmianaHasla.aspx"
title="Zmiana hasa" description="Zmie haso" />
</siteMapNode>
2. Dodaj atrybut
roles do pliku
Web.sitemap
Dodaj do znacznika siteMapNode atrybut roles="*", gdy menu ma by
prezentowane dla wszystkich uytkownikw strony (nawet
anonimowych).
Dodaj do znacznika siteMapNode atrybut roles="X", gdzie X jest nazw
roli (moliwe podanie wielu rl oddzielonych przecinkiem np.
Administrator, User), gdy menu ma by prezentowane dla konkretnych
uytkownikw przypisanych do roli X.
Ustal odpowiednie prawa do menu. Dla wza siteMapNode o
waciwoci:
title="Produkty" ustal roles="*"
title="Zarzdzanie" ustal roles="User,Administrator"
title="Ankiety" ustal roles="*"
title="Informacje" ustal roles="*"
3. Okrel
dostawc
informacji o
ciece
nawigacyjnej
Do pliku Web.config do znacznika <system.web> dodaj nastpujcy
fragment:
<siteMap defaultProvider="XmlSiteMapProvider" enabled="true" >
<providers>
<add name="XmlSiteMapProvider"
description="Domylny dostawca mapy serwisu."
type="System.Web.XmlSiteMapProvider"
siteMapFile="Web.sitemap"
securityTrimmingEnabled="true" />
</providers>
</siteMap>

Piotr Bubacz
4. Sprawd
dziaanie aplikacji
Sprawd pop
Sprawd, ktre opcje menu s prezentowane.
Zaloguj si korzystajc z uytkownika
Sprawd, ktre opcje menu s teraz prezentowane
Jeli jeste zalogowany
wywoa stron
5. Zabezpiecz
katalog
Zarzadzanie przed
niepowoanym
dostpem
Otwrz plik
Do sekcji
<location path="Zarzadzanie">

</location>
6. Sprawd
dziaanie aplikacji
Jeli jeste zalogowany
wywoa stron

Strona 10-15
Sprawd, ktre opcje menu s prezentowane.
Zaloguj si korzystajc z uytkownika admin.
Jeli jeste zalogowany, wyloguj si z aplikacji. Sprawd, czy moesz
wywoa stron Zarzadzanie/ZmianaHasla.aspx.
Dlaczego strona zostaa wywietlona?
Otwrz plik Web.config.
Do sekcji configuration dodaj:
<location path="Zarzadzanie">
<system.web>
<authorization>
<allow roles="User,Administrator" />
<deny users="*"/>
</authorization>
</system.web>
</location>
Jeli jeste zalogowany, wyloguj si z aplikacji. Sprawd, czy moesz
wywoa stron Zarzadzanie/ZmianaHasla.aspx.
Co si teraz stao? Dlaczego?
Modu 10
wyloguj si z aplikacji. Sprawd, czy moesz

wyloguj si z aplikacji. Sprawd, czy moesz

Piotr Bubacz
Modu 11
Wersja 1
Zarzdzanie stanem w aplikacjach
ASP.NET
Spis treci
Zarzdzanie stanem w aplikacjach ASP.NET ........................................................................................ 1
Problem 1 (czas realizacji 5 min) .................................................................................................. 6

ITA-103 Aplikacje Internetowe Zarzdzanie stanem w aplikacjach ASP.NET
Strona 11-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce moliwoci zarzdzania
stanem w aplikacjach ASP.NET. Nauczysz si przechowywa zmienne i
obiekty w stanie sesji i aplikacji. Zobaczysz, w jaki sposb mona dodawa,
zarzdza i usuwa obiekty z tych stanw.
Cel moduu
Celem moduu jest przedstawienie moliwoci wykorzystania stanu aplikacji
i sesji do przechowywania zmiennych i obiektw.
rozumia potrzeb przechowywania wybranych informacji w stanie
aplikacji i sesji
potrafi dodawa zmienne i obiekty do stanu sesji i aplikacji
wiedzia jak utworzy obiekty i zmienne przy starcie aplikacji i sesji
Wymagania wstpne
Mapa zalenoci moduu
w moduach Podstawy HTML i Wprowadzenie do ASP.NET.

Strona 11-3
Przykadowy problem
Tworzc aplikacje internetow wikszo informacji przechowujemy w bazie danych. Czasami
wykorzystujemy pliki XML. Jednak s sytuacje, kiedy potrzebujemy szybkiego narzdzia do
przechowywania i zarzdzania danymi. Jeli implementujemy koszyk zakupw czy licznik na stronie,
to zapisywanie ich do bazy czy pliku XML jest zbyt dugie. Do tego celu musimy wykorzysta inny
mechanizm.
W aplikacjach ASP.NET czsto zachodzi potrzeba przechowywania stanu, np. pomidzy daniami
pojedynczego uytkownika. Niestety protok HTTP, z pomoc ktrego realizowana jest
komunikacja klienta z serwerem, jest bezstanowy. Oznacza to, e HTTP nie pozwala okreli, czy
dwa dania zostay wykonane przez tego samego, czy przez dwch rnych uytkownikw. Kade
nowe danie jest traktowane tak, jakby pochodzio od zupenie nowego uytkownika.
W poprzednich moduach pokazana zostaa moliwo przekazywania informacji pomidzy
stronami w postaci parametrw wywoania, metoda ta ma jednak wiele wad. Podstawow z nich
jest mae bezpieczestwo tak przekazywanych informacji, a take ograniczenie iloci danych, jakie
mog zosta przesane.
Stan obiektu tworz: jego konfiguracja, atrybuty, warunki lub informacje o zawartoci. W
aplikacjach internetowych stan jest ulotny i ograniczony do wygenerowania dokumentu po stronie
serwera i przesania go do uytkownika. W ASP.NET istnieje wiele mechanizmw przechowywania i
zarzdzania stanem, ktre mona podzieli ze wzgldu na kilka kryteriw: zasig, czas ycia i
dopuszczalny rozmiar przechowywanych danych oraz po jakiej stronie s przechowywane. Wrd
mechanizmw pozwalajcych zarzdza stanem indywidualnie dla kadego uytkownika wymieni
mona: parametry wywoania i pliki cookies po stronie klienta oraz stan strony (ViewState), stan
sesji i stan aplikacji po stronie serwera. Przykadem informacji, ktra powinna by przechowywana
w stanie sesji, jest zawarto koszyka zakupw uytkownika, w stanie aplikacji moemy z kolei
przechowywa np. informacje o liczbie odwiedzin naszej strony.
Stan aplikacji
Wspdzielenie informacji w caej aplikacji jest moliwe przy uyciu klasy
HttpApplicationState. Klasa ta pozwala przechowywa zmienne w sowniku kolekcji par
klucz-warto. Zmienne te s widoczne w obszarze caej aplikacji ASP.NET.
Uywajc stanu aplikacji do przechowywania obiektw musisz wzi pod uwag kilka istotnych
kwestii:
Zasoby poniewa stan aplikacji jest przechowywany w pamici, mamy do niego szybki
dostp, w odrnieniu od danych na dysku czy w bazie danych. Niestety przechowywanie
duych blokw danych w stanie aplikacji moe wypeni pami serwera i spowodowa
zapisywanie pamici na dysku.
Ulotno poniewa stan aplikacji jest przechowywany w pamici, jest usuwany z niej w
momencie zatrzymania lub restartu aplikacji lub w momencie awarii serwera.
Skalowalno stan aplikacji nie jest dzielony na serwery w farmie serwerw, wic jeli
Twoja aplikacja ma dziaa w rodowisku wielu serwerw, to nie powiniene wykorzystywa
stanu aplikacji.
Wspbieno do stanu aplikacji moe jednoczenie odwoywa si wiele wtkw, dlatego
wane jest zapewnienie mechanizmw bezpiecznej aktualizacji przechowywanych obiektw.
Tworzenie zmiennych stanu aplikacji jest moliwe poprzez obiekt Application. Przykad
utworzenia zmiennych aplikacji o nazwach info i AppStartTime:
Strona 11-4
Application["info"] = "Witaj wiecie";
Application["AppStartTime"] = DateTime.Now;
Pobranie wartoci tak utworzonej zmiennej stanu sesji mona zrealizowa za pomoc nastpujcej
konstrukcji:
string info = (string) Application["info"];
DateTime AppStartTime = (DateTime) Application["AppStartTime"];
Stan sesji
Tworzenie zmiennych stanu sesji jest moliwe poprzez obiekt Session. Przykad utworzenia nowej
zmiennej stanu sesji o nazwie info, przechowujcej acuch znakw o treci Witaj wiecie!:
Session["info"] = "Witaj wiecie!";
Pobranie wartoci tak utworzonej zmiennej stanu sesji mona zrealizowa za pomoc nastpujcej
konstrukcji:
string info = (string) Session["info"];
Przechowywanie i pobieranie zoonych danych, tj. obiektw, wymaga rzutowania do
odpowiedniego typu. Przykad zapisania obiektu typu Koszyk w zmiennej stanu sesji:
koszyk = new Koszyk();
Session["koszyk"] = koszyk;
Przykad odczytu zmiennej stanu sesji typu Koszyk:
koszyk = (Koszyk) Session["koszyk"];
Global Application Class
Plik Global.asax umoliwia deklarowanie i zarzdzanie zdarzeniami na poziomie aplikacji i sesji. Jest
on umieszczony w gwnym katalogu aplikacji. Podczas wykonywania plik jest parsowany i
kompilowany w dynamiczn klas dziedziczon z klasy bazowej HttpApplication.
Podsumowanie
W tym rozdziale przedstawione zostay podstawy pracy ze stanem sesji i aplikacji.
Uwagi dla studenta
potrafisz dodawa, odczytywa, zmienia i usuwa obiekty ze stanu sesji i aplikacji
wiesz do czego suy i co zawiera plik Global.asax
1. Design and Implementation Guidelines for Web Clients, http://msdn2.microsoft.com/en-
Zesp patterns & practices przygotowa wskazwki dotyczce planowania,
implementacji i zarzdzania stanem w aplikacjach ASP.NET. Na stronie znajdziesz
dobre praktyki zarzdzania stanem.
2. ASP.NET Application State, http://msdn.microsoft.com/en-us/library/bf9xhdz4.aspx
Na stronie przedstawiono szczegowe informacje dotyczce zarzdzania stanem w
aplikacjach ASP.NET.
Strona 11-5
3. Randy Connolly, ASP.NET 2.0. Projektowanie aplikacji internetowych, Helion, 2008
W ksice autor szczegowo porusza kwestie zwizane ze stanem sesji. Znajdziesz
tu m.in. informacje dotyczce dostawcw stanu sesji.
4. Stephen Walther, ASP.NET 2.0. Ksiga eksperta, Helion, 2007
W ksice autor przedstawi informacje zwizane z wykorzytsaniem stanu sesji i
aplikacji. Znajdziesz tu m.in. informacje dotyczce uywania stanu sesji bez
wykorzystywania mechanizmu cookies.

Strona 11-6
Ju jeste na ukoczeniu strony. Twj klient jednak cigle dodaje co nowego do funkcjonalnoci.
Teraz postanowi sprawdza ilo osb odwiedzajcych jego stron. Musisz zaimplementowa
licznik, ktry bdzie pokazywa ilo osb aktualnie przegldajcy stron oraz ilo wszystkich osb,
ktre odwiedziy stron.
1. Dodaj do
aplikacji plik
Global Application
Class
Otwrz projekt przygotowany na poprzednich zajciach.
Nastpnie wybierz Website -> Add New Item.
W oknie Templates wybierz Global Application Class, w polu Name
wpisz Global.asax, a w licie rozwijanej Language wybierz C#.
2. Dodaj obsug
licznika w pliku
Global Application
Class
W pliku Global.asax w metodzie Application_Start utwrz dwie
zmienne aplikacji: userCount oraz activeUserCount. Zainicjuj je
wartoci 0:
Application["userCount"] = 0;
Application["activeUserCount"] = 0;
W metodzie Session_Start zwiksz o jeden wartoci obu utworzonych
zmiennych:
int userCount = (int) Application["userCount"];
userCount++;
Application["userCount"] = userCount;
int activeUserCount = (int) Application["activeUserCount"];
activeUserCount++;
Application["activeUserCount"] = activeUserCount;
W metodzie Session_End zmniejsz o jeden ilo aktywnych
uytkownikw:
int activeUserCount = (int) Application["activeUserCount"];
activeUserCount--;
Application["activeUserCount"] = activeUserCount;
3. Utwrz now
kontrolk
uytkownika
zawierqajc
licznik
Utwrz now kontrolk uytkownika i nazwij j Licznik.ascx.
W widoku Source dodaj nastpujcy fragment:
Nasz stron odwiedzio:
<asp:Label ID="licznikLabel" runat="server" /><br />
Aktualnie przebywa na stronie:
<asp:Label ID="licznikActiveLabel" runat="server" />
Do metodzie Page_Load kontrolki dodaj kod programu odpowiedzialny
za pobranie i wywietlenie w odpowiednich kontrolkach Label wartoci
zmiennych aplikacji:
if (!IsPostBack)
{
licznikLabel.Text = Application["userCount"].ToString();
licznikActiveLabel.Text =
Application["activeUserCount"].ToString();
}
Umie kontrolk na stronie wzorcowej. Sprawd poprawno
wskazywania iloci uytkownikw. Aby zwikszy ilo uytkownikw
naley otworzy dowoln stron aplikacji w innej przegldarce.
Strona 11-7
Nadszed czas na najwiksze wyzwanie. Twoim zdaniem jest obsuga koszyka zakupw dla klientw
strony. Musisz najpierw przygotowa stron, ktra bdzie wywietlaa zawarto koszyka. Twj
klient musi mie moliwo zmiany ilo poszczeglnych produktw, jak i usuwania. Wraz z
zespoem zastanawiae si, jak zrealizowa dodawanie produktw do koszyka i doszlicie do
wniosku, e najlepiej i najprociej bdzie dodawa je przez parametr ProdID wywoania strony.
Nie zapomnij o uzupenieniu stron wywietlajcych produkty o moliwo dodawania ich do
koszyka. Wywietl w menu moliwo przegldania koszyka, jak i usuwania caej jego zawartoci.
1. Dodaj plik i
kontrolk
wywietlajc
zawarto koszyka
Do projektu dodaj plik Zakupy.aspx oparty na szablonie
Umie na stronie kontrolk GridView. W oknie Properties:
w polu ID wpisz KoszykGridView
w polu EmptyDataText wpisz Twj koszyk jest pusty
w polu EnableViewState z listy rozwijanej wybierz False
Kliknij Smart Tag kontrolki KoszykGridView i wybierz Edit Colmuns.
W obszarze Aviailable Fields wybierz BoundField i kliknij Add. W
obszarze BoundField Properities:
w polu HeaderText wpisz Nazwa produktu
w polu DataField wpisz Nazwa
w polu ReadOnly z listy rozwijanej wybierz True
w polu HeaderText wpisz Cena
w polu DataField wpisz Cena
w polu DataFormatString wpisz {0:c}
w polu HtmlEncode z listy rozwijanej wybierz False
w polu HeaderText wpisz Ilo sztuk
w polu DataFormatString wpisz {0:d}
w polu DataField wpisz IloscSztuk
w polu DataField wpisz Suma
w polu DataFormatString wpisz {0:c}
w polu HeaderText wpisz Warto
w polu HtmlEncode z listy rozwijanej wybierz False
2. Dodaj do
kontrolki
GridView przyciski
do edycji i
usuwania
W obszarze Aviailable Fields wybierz CommandField i kliknij Add. W
obszarze CommandField Properities:
w polu ButtonType z listy rozwijanej wybierz Button
w polu ShowDeleteButton z listy rozwijanej wybierz True
w polu ShowEditButton z listy rozwijanej wybierz True
Strona 11-8
rekordw w polu CancelText wpisz Anuluj
w polu DeleteText wpisz Usu towar
w polu EditText wpisz Zmie ilo
w polu UpdateText wpisz Aktualizuj
Dodaj kontrolk Button i w oknie Properties:
w polu ID wpisz kasaButton
w polu PostBackUrl wpisz ~/Zamowienie.aspx
w polu Text wpisz Do kasy
Zapisz zmiany.
3. Rozszerz
aplikacje
moliwo
dodawania
produktw do
koszyka
Otwrz stron Produkty.aspx. W widoku Design kliknij Smart Tag
kontrolki ProduktyGridView i wybierz Edit Columns. Z list Available
fields wybierz HyperLinkField i wcinij Add. W oknie HyperLinkField
properities:
w polu DataNavigateUrlFields wpisz ProductID
w polu DataNavigateUrlFormatString wpisz ~/Zakupy.aspx?id={0}
w polu HeaderText wpisz Dodaj do koszyka
Otwrz stron Szczegoly.aspx. W widoku Source przed znacznikiem
</asp:View> kontrolki View o ID="prawidlowyView" dodaj:
<asp:HyperLink ID="KoszykHyperLink" runat="server"
Text="Dodaj do koszyka" /> <br />
Otwrz plik Szczegoly.aspx.cs i wewntrz bloku if (produkt!=null) dodaj:
KoszykHyperLink.NavigateUrl = "~/Zakupy.aspx?ProdID=" +
produkt.ProductID;
Otwrz plik Web.sitemap. Do gwnego elementu za elementem
wywietlajcym menu produktw dodaj:
<siteMapNode title="Koszyk" description="Zarzdzaj koszykiem"
roles="*">
<siteMapNode url="Zakupy.aspx" title="Przegldaj"
description="Przejrzyj zawarto koszyka" />
<siteMapNode url="OproznijKoszyk.aspx"
title="Oprnij koszyk"
description="Oprnij zawarto koszyka" />
</siteMapNode>

Strona 11-9
Wsplnie z zespoem jeste zadowolony z wygldu aplikacji. Teraz naley przygotowa logik
obsugujc koszyk. Wsplnie przygotowalicie dwie klasy (Rys. 2), ktre bd odpowiedzialne za
obsug koszyka. Dodatkowo musisz napisa logik odpowiedzialn za zarzdzanie koszykiem na
stronie Zakupy.aspx. Musisz odpowiednio umoliwi dodawanie, edycja i usuwanie produktw z
koszyka

Rys. 2 Diagram klas elementw koszyka
1. Dodaj klas
ElementKoszyka
Kliknij prawym przyciskiem myszy folder App_code i wybierz Add New
Item. Nastpnie z okna Template wybierz Class, w polu Name wpisz
ElementKoszyka.cs, a w licie rozwijanej Language wybierz Visual C#.
W pliku utwrz cztery waciwoci Nazwa, ProdID, Cena i IloscSztuk:
public string Nazwa
{ get; set; }
public int ProdID
{ get; set; }
public decimal Cena
{ get; set; }
public int IloscSztuk
{ get; set; }
Do konstruktora domylnego klasy ElementyKoszyka dodaj nastpujcy
kod:
ProdID = 0;
Nazwa = "";
Cena = 0;
IloscSztuk = 0;
Dodaj konstruktor parametryzowany klasy przyjmujcy parametry:
prodID, nazwa, cena i iloscSztuk.
public ElementKoszyka(int prodID, string nazwa, decimal cena, int
iloscSztuk)
{ ProdID = prodID;
Nazwa = nazwa;
Cena = cena;
IloscSztuk = iloscSztuk; }
Utwrz waciwo Suma:
public decimal Suma
{ get { return Cena * IloscSztuk; } }
Zapisz zmiany w pliku.
Strona 11-10
2. Dodaj klas
Koszyk
Kliknij prawym przyciskiem myszy folder App_code i wybierz Add New
Item. Nastpnie z okna Template wybierz Class, w polu Name wpisz
Koszyk.cs, a w licie rozwijanej Language wybierz Visual C#.
W sekcji using dodaj:
using System.Collections.Generic;
Do klasy Koszyk dodaj pole prywatne _koszyk zawierajce list
obiektw klasy ElementKoszyka:
private List<ElementKoszyka> _koszyk;
Do konstruktora klasy Koszyk dodaj nastpujcy kod:
_koszyk = new List<ElementKoszyka>();
Do metody dodaj waciwo Ilosc zwracajc ilo elementw w
koszyku:
public int Ilosc
{ get { return _koszyk.Count; } }
Do klasy dodaj metod Pobierz zwracajc list elementw koszyka:
public List<ElementKoszyka> Pobierz()
{ return _koszyk; }
Do klasy dodaj metod AktualizujIlosc przyjmujc dwa parametry typu
int: indeks i iloscSztuk:
public void AktualizujIlosc(int indeks, int iloscSztuk)
{ ElementKoszyka element = _koszyk[indeks];
element.IloscSztuk = iloscSztuk; }
Do klasy dodaj metod UsunElement przyjmujc jeden parametr
indeks usuwanego element:
public void UsunElement(int indeks)
{ _koszyk.RemoveAt(indeks); }
Do klasy dodaj metod Dodaj przyjmujc parametr prodID
identyfikator produktu, ktry naley doda do koszyka. W metodzie
dodaj odpowiedni produkt:
public void Dodaj(int prodID)
{
bool znaleziono = false;
foreach (ElementKoszyka element in _koszyk)
{
if (element.ProdID == prodID)
{ element.IloscSztuk += 1;
znaleziono = true; }
}
if (!znaleziono)
{
var produkt = (from p in db.Products
where p.ProductID == prodID
select p).FirstOrDefault();
if (produkt != null)
{
ElementKoszyka element = new ElementKoszyka(prodID,
produkt.Name, produkt.ListPrice, 1);
_koszyk.Add(element);
}
}
}

Strona 11-11
3. Dodaj obsug
koszyka w pliku
Zakupy.aspx.cs
Otwrz plik Zakupy.aspx.cs. Do klasy Zakupy dodaj obiekt koszyka typu
Koszyk:
Koszyk koszyk;
W metodzie Page_Load utwrz nowy lub pobierz (jeli istnieje) obiekt
koszyka przechowywany w stanie sesji:
koszyk = (Koszyk)Session["koszyk"];
if (koszyk == null)
{
koszyk = new Koszyk();
Session["koszyk"] = koszyk;
}
Nastpnie w tej samej metodzie dodaj do koszyka produkt, ktrego
ProdID zosta przekazany przez parametr wywoania strony. Wywietl
koszyk w kontrolce GridView1:
if (!IsPostBack)
{
string req = Request.QueryString["prodID"];
if (req != null)
{
int prodID = int.Parse(Request.QueryString["prodID"]);
koszyk.Dodaj(prodID);
//usuwanie z adresu prodID
string url = Request.Url.AbsolutePath;
System.Web.HttpContext.Current.RewritePath(url, "", "");
}
}
KoszykGridView.DataSource = koszyk.Pobierz();
KoszykGridView.DataBind();
kasaButton.Enabled = (koszyk.Ilosc > 0);
W widoku Design wybierz kontrolk KoszykGridView. W oknie
Properties kliknij Events, a nastpnie dwukrotnie kliknij RowDeleting.
W metodzie obsugi zdarzenia dodaj:
koszyk.UsunElement(e.RowIndex);
Properties kliknij Events, a nastpnie dwukrotnie kliknij RowEditing. W
metodzie obsugi zdarzenia dodaj:
KoszykGridView.EditIndex = e.NewEditIndex;
Properties kliknij Events, a nastpnie dwukrotnie kliknij RowUpdating.
W metodzie obsugi zdarzenia dodaj:
TextBox tb = (TextBox)
KoszykGridView.Rows[e.RowIndex].Controls[2].Controls[0];
try {
int wartosc = int.Parse(tb.Text);
if (wartosc<0) { wartosc =wartosc*(-1); }
koszyk.AktualizujIlosc(e.RowIndex, wartosc);}
catch { e.Cancel = true; }
KoszykGridView.EditIndex = -1;
Properties kliknij Events, a nastpnie dwukrotnie kliknij
RowCancelingEdit. W metodzie obsugi zdarzenia dodaj:
Strona 11-12
e.Cancel = true;
KoszykGridView.EditIndex = -1;
Zapisz zamiany. Sprawd moliwo dodawania, edycji i usuwania
produktw z koszyka.
4. Dodaj stron
do usuwania
koszyka
Dodaj plik OproznijKoszyk.aspx oparty na szablonie
Do pliku OproznijKoszyk.aspx.cs dodaj:
Session["koszyk"] = null;
Response.Redirect("~/Default.aspx");
5. Przetestuj
dodawanie
produktw do
koszyka
Dodaj produkty do koszyka. Zmie ilo produktw wpisujc warto
ujemn oraz wpisujc tekst zamiast liczby.

Piotr Bubacz
Modu 12
Wersja 1
Spis treci
Technologia WebParts ......................................................................................................................... 1

ITA-103 Aplikacje Internetowe Technologia WebParts
Strona 12-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce technologii umoliwiajcej
personalizacj wygldu strony przez jej uytkownikw WebParts.
Nauczysz si, jak tworzy i zarzdza kontrolkami WebPart, jak rwnie, jak
zachowa ukad kontrolek umieszczonych na szablonie strony na wszystkich
stronach serwisu.
Cel moduu
Celem moduu jest przedstawienie moliwoci wykorzystania technologii
umoliwiajcej personalizacj wygldu strony przez jej uytkownikw.
wiedzia jak wykorzysta technologi WebPart tworzenia treci
personalizowanych przez uytkownikw strony
potrafi tworzy kontrolki WebPart na podstawie kontrolek
uytkownika
potrafi zachowa wygld kontrolek WebPart na wszystkich stronach
serwisu
Wymagania wstpne
zna podstawy HTML i CSS
zna zasady pracy w Visual Studio 2008
Mapa zalenoci moduu

Strona 12-3
Przykadowy problem
Coraz czciej jednym z wymaga stawianych przed portalem internetowym jest jego
interaktywno. Uytkownik powinien mie moliwo nie tylko dodawania treci czy interakcji z
elementami portalu, lecz rwnie ukadania elementw na stronach zgodnie z potrzebami.
Uytkownicy chc sami okrela, ktre komponenty i w jakich miejscach maj by umieszczone. Za
tym trendem podaj najwiksi. Na naszym rynku jeden z portali internetowych wprowadzi
moliwo zmiany ukadu elementw na stronie oraz iloci wywietlanych informacji. W sieci
Internet moemy znale wiele przykadw stron, ktre umoliwiaj nam indywidualn
konfiguracje elementw na stronie.
Napisanie takiej funkcjonalnoci nie jest proste. Chcielibymy mie gotowe rozwizanie, ktre
szybko i skutecznie moemy doda do naszej strony.
Kontrolki WebPart su do budowania portali internetowych, w ktrych uytkownik decyduje, co i
gdzie bdzie wywietlane. Uytkownik za pomoc przegldarki moe doda, usun oraz zamieni
zawarto wybranych przez programist kontrolek.
Moliwoci technologii WebParts
Gwne moliwoci, jakie zapewniaj nam kontrolki WebPart, to:
Personalizacja zawartoci strony uytkownik moe doda, usun, ukry lub
zminimalizowa kontrolk WebPart.
Personalizacja wygldu strony uytkownik moe przeciga kontrolki pomidzy strefami
na stronie, zmienia ich wygld, wasnoci i zachowanie.
Eksport i import kontrolek uytkownik moe eksportowa i importowa kontrolki WebPart
wraz z ustawieniami, wygldem a nawet danymi.
Tworzenie pocze pomidzy kontrolkami uytkownik moe zmienia wartoci w jednej
kontrolce, ktre maj wpyw na inn kontrolk (np. zmiana wartoci powoduje zmian
zawartoci innej kontrolki).
Kontrolki WebPart
Najwaniejsze kontrolki WebPart to:
WebPartManager zarzdza kontrolkami WebPart, musi zosta umieszczony przed innymi
kontrolkami WebPart, moe by tylko jeden na stronie.
CatalogZone zawiera katalog kontrolek WebPart, ktre uytkownik moe wybra z listy
dostpnych elementw i umieci w strefach Web Part.
EditorZone umoliwia edycj i personalizacj kontrolek WebPart przez uytkownika.
WebPartZone umoliwia umieszczanie kontrolek uytkownika, na stronie moe znajdowa
si wiele takich kontrolek. Moliwe jest rwnie umieszczanie w niej istniejcych kontrolek
serwerowych oraz kontrolek uytkownika, ktre staj si kontrolkami WebPart.
WebPart jest to klasa bazowa dla kontrolek WebPart, kontrolka dziedziczca po tej klasie
moe zosta dodana do WebPartZone.
Kontrolka WebPartManager
Kontrolka WebPartManager umoliwia zarzdzanie i kontrol zachowaniem kontrolek WebPart.
Na stronie internetowej moe by umieszczona tylko jedna taka kontrolka, ponadto musi zosta
umieszczona przed innymi kontrolkami WebPart.
Strona 12-4
WebPartManager umoliwia zmian trybu wywietlania strony zawierajcej kontrolki WebPart.
Moliwe tryby to:
Browse w tym trybie moliwe jest tylko przegldanie kontrolek.
Design w tym trybie moliwe jest przeciganie kontrolek pomidzy strefami WebPartZone
przy pomocy myszy. Zmiany s zapamitywane na serwerze.
Edit w tym trybie uytkownik moe robi to, co w trybie Design, dodatkowo, po
umieszczeniu kontrolki EditorZone moliwa jest zmiana atrybutw kontrolki.
Catalog w tym trybie uytkownik moe przy pomocy kontrolki CatalogZone dodawa i
usuwa kontrolki WebPart ze stref WebPartZone
Tryb pracy moe zosta zmieniony programowo przy pomocy zmiany wasnoci DisplayMode:
WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode
Kontrolka WebPartZone
Kontrolka WebPartZone jest kontenerem dla innych kontrolek WebPart i mona w niej umieci
dowoln ilo tych kontrolek. Kontrolki WebPart mog zosta dodane do WebPartZone statycznie
lub dynamicznie. Uytkownik moe, wykorzystujc kontrolk CatalogPart, wybra z listy
rozwijanej obiekt WebPart i doda go do odpowiedniej strefy WebPartZone.
Kontrolka CatalogZone
W trybie Catalog obiektu WebPartManager jest widoczna kontrolka CatalogZone. Przy jej
pomocy uytkownik moe doda kontrolk WebPart do wybranej strefy WebPartZone. Kontrolka
ta moe zawiera kontrolki PageCatalogPart, DeclarativeCatalogPart oraz
ImportCatalogPart.
Kontrolka PageCatalogPart (Rys. 2) wywietla wszystkie dostpne kontrolki WebPart, ktre
jeszcze nie s umieszczone na stronie. Po dodaniu kontrolki do strefy kontrolka jest usuwana z listy
dostpnych kontrolek.

Rys. 2 Kontrolka PageCatalogPart
Kontrolka ImportCatalogPart (Rys. 3) umoliwia zaimportowanie kontrolek WebPart na
serwer.
Strona 12-5

Rys. 3 Kontrolka ImportCatalogPart
Kontrolka DeclarativeCatalogZone umoliwia programowe okrelenie listy dostpnych
kontrolek.
Kontrolka EditorZone
W trybie Edit po wybraniu opcji Edit na kontrolce WebPart (Rys. 4) jest wywietlana kontrolka
EditorZone. Umoliwia ona edycj waciwoci kontrolek znajdujcych si w strefach
WebPartZone.

Rys. 4 Kontrolka i opcje dostpne w trybie Edit
Kontrolka EditorZone moe zawiera kontrolki AppearanceEditorPart (Rys. 5),
BehaviorEditorPart, LayoutEditorPart oraz PropertyGridEditorPart.

Rys. 5 Kontrolka AppearanceEditorPart w kontrolce EditorZone
Strona 12-6
AppearanceEditorPart (Rys. 5) umoliwia zmian wygldu kontrolki WebPartZone poprzez
konfigurowalne ustawienie kilku atrybutw strefy. Kontrolka umoliwia zmian tytuu, sposobu
wywietlania kontrolki WebPart (tytu i ramka), kierunku tekstu (z prawej do lewej lub odwrotnie),
rozmiarw oraz widocznoci kontrolki na stronie.
Kontrolki WebPart
W celu dodania kontrolek WebPart naley umieci na stronie kontrolk WebPartManager.
Kontrolki WebPart naley umieszcza w kontrolce WebPartZone. Zarzdzanie kontrolkami
umoliwiaj kontrolki EditorZone oraz CatalogZone.
Problemy z zachowaniem wygldu kontrolek WebPart
Informacje o rozoeniu kontrolek WebPart s przechowywane dla kadej strony osobno. Z tego
wzgldu naley przesoni metod LoadPersonalizationBlobs,
ResetPersonalizationBlob, and SavePersonalizationBlob klasy
SqlPersonalizationProvider.
Rozwizaniem tego problemu jest wykorzystanie klasy zmieniajcej standardowe zachowanie
kontrolek WebPart.
public class MasterPageOnlySqlPersonalizationProvider :
SqlPersonalizationProvider
{
protected override void LoadPersonalizationBlobs(
WebPartManager webPartManager,
string path,
string userName,
ref byte[] sharedDataBlob,
ref byte[] userDataBlob)
{
base.LoadPersonalizationBlobs(
webPartManager,
"master",userName,
ref sharedDataBlob,
ref userDataBlob);
}
protected override void ResetPersonalizationBlob(
string path,
string userName)
{
base.ResetPersonalizationBlob(
webPartManager,
"master",
userName);
}
protected override void SavePersonalizationBlob(
string path,
string userName,
byte[] dataBlob)
{
base.SavePersonalizationBlob(
webPartManager,
"master",
userName,
dataBlob);
}
}
Strona 12-7
Zmiany w pliku Web.config. Dodanie do sekcji <system.web> informacji o nowym dostawcy:
<webParts>
<personalization
defaultProvider="MasterPageOnlySqlPersonalizationProvider">
<providers>
<add name="MasterPageOnlySqlPersonalizationProvider"
type="MasterPageOnlySqlPersonalizationProvider, __code"
connectionStringName="LocalSqlServer" />
</providers>
</personalization>
</webParts>
Rozwizanie zaczerpnito ze strony http://jason.diamond.name/weblog/2005/11/09/web-parts-
and-master-pages.
Podsumowanie
W tym rozdziale przedstawione zostay podstawy pracy z kontrolkami WebPart oraz rozwizanie
problemu umieszczenia kontrolek na szablonie strony i utrzymanie ich wygldu w caej aplikacji.
Uwagi dla studenta
rozumiesz zasad dziaania kontrolek WebPart
umiesz zarzdza trybem pracy kontrolki WebPartManager
wiesz jak skonfigurowa kontrolki WebPart, aby byy wywietlane na wszystkich stronach
serwisu jednakowo
1. Instrukcja: Tworzenie strony Web Parts w programie Visual Web Developer,
http://www.microsoft.com/poland/developer/net/podrecznik/additional-2.mspx
Krok po kroku instrukcja prowadzi Ci przez tworzenie strony z uyciem kontrolek
WebPart.
2. Stephen Walther, ASP.NET 2.0 ksiga eksperta, Helion, 2008
W ksice autor powici wiele miejsca kontrolkom WebPart. Opisa metody
tworzenia aplikacji za pomoc tych kontrolek, zaprezentowa wszystkie kontrolki
WebPart. Pokaza ciek od podstawowej kontrolki WebPart a po rozbudowane
moliwoci tej platformy.
3. Darren Neimke, ASP.NET 2.0 Web Parts in Action: Building Dynamic Web Portals, Manning
Publications, 2006
Ta ponad 400-stronicowa ksika jest powicona w caoci technologii WebPart.
Autor przekazuje ca swoj wiedz, poczwszy od postaw, a skoczywszy na
wsppracy WebPart z AJAX.
4. ASP.NET QuickStart Tutorials, http://quickstarts.asp.net/QuickStartv20/aspnet
Na stronie w sekcji WebParts Controls znajdziesz podstawowe informacje i
przykady uycia kontrolek WebPart.

Strona 12-8
Przygotowujesz aplikacj internetow dla firmy Adventure Works, ktra planuje ekspansje na rynku
internetowym w Polsce. Aktualnie aplikacja praktycznie ju dziaa, teraz nadszed czas rozszerzania
jej funkcjonalnoci. Wybr Twojego zespou pad na technologi WebPart. Jest to ciekawa
technologia, z ktr ju mielicie wczeniej styczno w intranetowej witrynie SharePoint, ale
dopiero teraz testujecie j w ASP.NET.
1. Tworzenie
podstawowej
struktury dla
kontrolek
WebPart
Otwrz aplikacj internetow przygotowan w poprzednim module.
Otwrz plik SzablonStrony.master i przecz widok na Design.
Na grze strony dodaj kontrolk WebPartManager. Zmie jej ID na
MenadzerWebPartow.
Do pierwszego obszaru bocznego (ID="PierwszyObszarBoczny") dodaj
kontrolk WebPartZone i okrel jej ID jako PierwszyObszarWebPartow.
Do drugiego obszaru bocznego (ID="DrugiObszarBoczny") dodaj
kontrolk WebPartZone i okrel jej ID jako DrugiObszarWebPartow.
Przenie istniejce kontrolki uytkownika do odpowiednich obszarw
WebPart.
2. Utwrz stron
do zarzdzania
kontrolkami
WebPart
Do projektu w katalogu Zarzadzanie dodaj plik WP.aspx oparty na
stronie wzorcowej SzablonStrony.master.
Dodaj plik WP.aspx do pliku Web.sitemap. W wle siteMapNode o
waciwoci title="Zarzdzanie" dodaj:
<siteMapNode url="Zarzadzanie/WP.aspx"
title="Zarzdzanie ukadem strony"
description="Zarzdzaj kontrolkami WebPart" />
W pliku WP.aspx w widoku Design napisz Zarzdzanie kontrolkami
WebPart, nastpnie dodaj znak koca linii i napisz Wybierz tryb:.
Dodaj kontrolk DropDownList, a nastpnie w oknie Properties:
w polu ID wpisz trybDropDownList
w polu AutoPostBack z listy rozwijanej wybierz True
Z menu Smart Tag kontrolki trybDropDownList wybierz Edit Items, a
nastpnie dodaj elementy o nastpujcych waciwociach, po czym
zamknij okno:
tekst wywietlany: Przegldaj, warto: 0
tekst wywietlany: Projektuj, warto: 1
tekst wywietlany: Edytuj, warto: 2
tekst wywietlany: Katalog, warto: 3
Dodaj kontrolk EditorZone, nastpnie dodaj do niej kontrolk
AppearanceEditorPart.
Dodaj kontrolk CatalogZone, a nastpnie dodaj do niej kontrolk
PageCatalogPart
Dodaj procedur obsugi zdarzenia SelectedIndexChanged kontrolki
trybDropDownList. W procedurze dodaj nastpujcy kod:
WebPartManager wpm = new WebPartManager();
wpm = (WebPartManager)
Page.Master.FindControl("MenadzerWebPartow");
switch (trybDropDownList.SelectedValue)
Piotr Bubacz
{

}
W
using System.Web.UI.WebControls.WebParts;
Zapisz stron
3. Sprawd
poprawno
dziaania aplikacji
Uruchom aplikacj, zaloguj si i w
WebPartManager
Kontrolki uytkownika umieszczone w kontrolce
aby atwo mona je byo identyfikowa. W tym celu postanowie przeksztaci je na kontrolki
WebPart.
1. Zmiana
wywietlania
tytuu kontrolki
Kategorie
Otwrz plik
wraz z zawartoci
Otwrz plik
nastpujcy kod:
GenericWebPart gwp = Parent as GenericWebPart;
if (gwp != null)

2. Zmiana
wywietlania
tytuu kontrolki
Licznik
Otwrz plik
nastpujcy kod:
if (gwp != null)

3. Zmiana
wywietlania
tytuu kontrolki
NoweProdukty
Otwrz plik
<strong>Nasze nowe
Otwrz plik
umie nastpujcy kod:
if (gwp != null)

4. Zmiana
wywietlania
tytuu kontrolki
WybraneProdukty
Otwrz plik
Otwrz plik
Page_Load

Strona 12-9

case "1":
wpm.DisplayMode = WebPartManager.DesignDisplayMode;
break;
case "2":
wpm.DisplayMode = WebPartManager.EditDisplayMode;
break;
case "3":
wpm.DisplayMode = WebPartManager.CatalogDisplayMode;
break;
default:
wpm.DisplayMode = WebPartManager.BrowseDisplayMode;
break;

W pliku WP.aspx.cs w sekcji using na samej grze
Zapisz stron.
Uruchom aplikacj, zaloguj si i wybierz rne tryby pracy kontrolki
WebPartManager. Sprawd zachowanie kontrolek
Jakie nazwy nosz kontrolki?
Kontrolki uytkownika umieszczone w kontrolce WebPartZone wymagaj wywietlenia tytuu tak,
Tok postpowania
Otwrz plik Kontrolki/Kategorie.aspx. Usu sekcj
wraz z zawartoci wpisz tekst Wybierz kategori produktu
Otwrz plik Kontrolki/Kategorie.aspx.cs. w metodzie
nastpujcy kod:
if (gwp != null)
{ gwp.Title = "Wybierz kategori produktu";
Otwrz plik Kontrolki/Licznik.aspx.cs. w metodzie
nastpujcy kod:
if (gwp != null)
{ gwp.Title = "Licznik odwiedzin"; }
Otwrz plik Kontrolki/NoweProdukty.aspx. Usu
<strong>Nasze nowe produkty:</strong><br />
Otwrz plik Kontrolki/NoweProdukty.aspx.cs. w metodzie
umie nastpujcy kod:
if (gwp != null)
{ gwp.Title = "Nasze nowe produkty:"; }
Otwrz plik Kontrolki/WybraneProdukty.aspx. Usu nastpujcy kod:
Otwrz plik Kontrolki/WybraneProdukty.aspx.cs
Page_Load umie nastpujcy kod:
Modu 12
wpm.DisplayMode = WebPartManager.DesignDisplayMode;
wpm.DisplayMode = WebPartManager.EditDisplayMode;
wpm.DisplayMode = WebPartManager.CatalogDisplayMode;
wpm.DisplayMode = WebPartManager.BrowseDisplayMode;
na samej grze dodaj:
ybierz rne tryby pracy kontrolki
prawd zachowanie kontrolek.
wymagaj wywietlenia tytuu tak,
sekcj HeaderTemplate
Wybierz kategori produktu.
. w metodzie Page_Load umie
}
. w metodzie Page_Load umie
. Usu nastpujcy kod:
. w metodzie Page_Load
Usu nastpujcy kod:
.aspx.cs. W metodzie
Piotr Bubacz
GenericWeb
if (gwp != null)

5. Sprawd
poprawno
dziaania aplikacji
Sprawd poprawno dziaania aplikacji
Wybierz rne tryby i sprawd zachowanie kontrolek
Niestety okazao si, e kontrolki zachowuj swj ukad tylko na stronie WP.aspx. Musicie wraz z
zespoem znale rozwizanie tego problemu.
1. Dodaj klas
MasterPageOnlyS
qlPersonalizationP
rovider
Kliknij folder
Item
W obszarze
MasterPageOnlySqlPersonalizationProvider.cs
wybierz
Okrel klas bazow
class MasterPageOnlySqlPersonalizationProvider
public class
Usu konstruktor klasy i

{

}

{

}

{

Strona 12-10
if (gwp != null)
{ gwp.Title = " Wybrane produkty:"; }
Czy ukad kontrolek po zmianie na stronie WP.aspx
na wszystkich stronach aplikacji?
zespoem znale rozwizanie tego problemu.
Tok postpowania
Kliknij folder App_Code prawym przyciskiem myszy i wybierz
Item.
W obszarze Templates wybierz Class, w polu
MasterPageOnlySqlPersonalizationProvider.cs, a
wybierz Visual C#.
Okrel klas bazow SqlPersonalizationProvider
class MasterPageOnlySqlPersonalizationProvider
public class MasterPageOnlySqlPersonalizationProvider :
Usu konstruktor klasy i dodaj nastpujcy kod:
string path,
string userName,
ref byte[] sharedDataBlob,
ref byte[] userDataBlob)
{
base.LoadPersonalizationBlobs(
webPartManager,
"master",userName,
ref sharedDataBlob,
ref userDataBlob);

string path,
string userName)

base.ResetPersonalizationBlob(
webPartManager,
"master",
userName);

string path,
string userName,
byte[] dataBlob)

base.SavePersonalizationBlob(
webPartManager,
Modu 12
Part gwp = Parent as GenericWebPart;
Wybierz rne tryby i sprawd zachowanie kontrolek.
WP.aspx jest utrzymywany
prawym przyciskiem myszy i wybierz Add New
, w polu Name wpisz
, a z listy rozwijanej
SqlPersonalizationProvider. Zmie public
class MasterPageOnlySqlPersonalizationProvider na:
MasterPageOnlySqlPersonalizationProvider :
Piotr Bubacz

}
Zapisz zmiany w pliku
2. Dodaj nowego
dostawc w pliku
Web.config
Otwrz plik
<webParts>

</webParts>
Zapisz zmiany w pliku
3. Sprawd
poprawno
dziaania aplikacji
Sprawd poprawno dziaania aplikacji

Strona 12-11
"master",
userName,
dataBlob);

Otwrz plik Web.config i do sekcji <system.web>
<webParts>
<personalization
<providers>
</providers>
</personalization>
</webParts>
Czy ukad kontrolek po zmianie na stronie WP.aspx
na wszystkich stronach aplikacji?
Modu 12
dodaj:
Wybierz rne tryby i sprawd zachowanie kontrolek.
WP.aspx jest utrzymywany
Piotr Bubacz
Modu 13
Wersja 1
ASP.NET AJAX
Spis treci
ASP.NET AJAX ....................................................................................................................................... 1

ITA-103 Aplikacje Internetowe ASP.NET AJAX
Strona 13-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce tworzenia aplikacji
internetowych z wykorzystaniem AJAX. Zobaczysz, jak prosto i skutecznie
mona wykorzystywa podstawowe kontrolki dostpne w ASP.NET AJAX.
Nauczysz si, jak kilkoma klikniciami myszy rozszerzy funkcjonalno
aplikacji o moliwo asynchronicznej komunikacji z serwerem.
Cel moduu
Celem moduu jest przedstawienie AJAX oraz moliwoci wykorzystania go
w aplikacjach ASP.NET przy uyciu biblioteki ASP.NET AJAX.
potrafi tworzy strony czciowo aktualizowane
potrafi rozbudowywa istniejc aplikacj o AJAX
rozumia zalety stosowania technologii AJAX
Wymagania wstpne
Mapa zalenoci moduu

Strona 13-3
Przykadowy problem
Rozbudowane aplikacje internetowe wymagaj dugiego czasu na przesanie informacji od klienta
do serwera. W czasie przesyania klient moe jedynie cierpliwie oczekiwa na dane z serwera.
Niestety wikszo osb chciaa by dane od razu lub te mie chocia moliwo przegldania
strony w czasie pobierania danych. Dodatkowo dobrze by byo, gdybymy mogli pobiera dane nie
caej strony na raz, ale tylko wybranych elementw.
Klasyczny model aplikacji internetowej
W poprzednich moduach wykorzystywano klasyczny model aplikacji internetowej. W modelu
takim niewielkie zmiany wykonane przez uytkownika na stronie mog spowodowa wysanie
danych do serwera i wygenerowanie dla klienta nowego dokumentu HTML, nawet jeli nie rni si
on znaczco od poprzedniego (Rys. 2).

Rys. 2 Klasyczny model aplikacji internetowej
Przykadem takiej akcji w aplikacji tworzonej na zajciach moe by wybranie kategorii z listy
rozwijanej. W takim przypadku zmienia si tylko niewielka cz strony odpowiedzialna za
wywietlenie tytuw, ale serwer i tam musi wygenerowa nowy dokument i wysa go do
uytkownika.
Problemy wystpujce w klasycznym model aplikacji internetowej:
Komunikacja zwrotna po wykonaniu kadej akcji wymagajcej przetwarzania po stronie
serwera, caa strona jest przeadowywana, nawet jeli nowy dokument nie rni si znaczco
od poprzedniego.
Transfer danych poprzez sie dokument wygenerowany po stronie serwera w wyniku
komunikacji zwrotnej musi by za kadym razem w caoci wysany do klienta.
Przetwarzanie na serwerze generowanie caego dokumentu od nowa w przypadku
komunikacji zwrotnej powoduje niepotrzebne obcienie zasobw serwera.
Co to jest AJAX?
AJAX jest to technika pozwalajca aplikacjom Web komunikowa si asynchronicznie z serwerem
(Rys. 3). AJAX nie jest technologi jest podejciem czcym wiele technologii. AJAX to akronim
powstay od sw Asynchronous JavaScript And XML.
Strona 13-4

Rys. 3 Model aplikacji internetowej z uyciem AJAX
AJAX:
Asynchronous komunikacja odbywa si asynchronicznie.
JavaScript JavaScript jest odpowiedzialny za wysyanie informacji do serwera,
asynchroniczny odbir 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 przesyaniu i przetwarzaniu formatw takich jak JSON (ang. JavaScript Object Notation).
Zalety i wady AJAX
AJAX posiada wiele zalet, w tym m.in.:
Strony nie s odwieane po wykonaniu kadej akcji wymagajcej przetwarzania po stronie
serwera.
Tylko potrzebne dane s wymieniane z serwerem.
Zwikszona szybko odpowiedzi serwera.
Naley jednoczenie zdawa sobie spraw z pewnych wad tego rozwizania, m.in.:
Wymaga JavaScript, ktry moe by wyczony w przegldarce uytkownika.
Aplikacjom AJAX trudno zapewni zgodno z WCAG (ang. Web Content Availability
Guidelines, wytyczne dotyczce dostpnoci materiaw publikowanych w sieci Internet).
Jest trudny w oprogramowaniu:
naley odpowiedniego zainicjalizowa obiekt XmlHttpRequest
due problemy moe sprawia obsugi przyciskw nawigacyjnych w przegldarce
mog pojawi si problemy z zapamitywaniem i odtwarzaniem konkretnego stanu
aplikacji
ASP.NET AJAX
ASP.NET AJAX jest zbiorem rozszerze, ktre umoliwiaj wykorzystanie AJAX w aplikacjach
ASP.NET. Zalety ASP.NET AJAX to:
Odcienie serwera na rzecz przetwarzania po stronie klienta.
Moliwo wykorzystania elementw interfejsu uytkownika znanych z aplikacji Windows,
np. wskaniki postpu.
Aktualizacja tylko tych czci strony, ktre tego wymagaj.
Strona 13-5
Dostp po stronie klienta do usug aplikacji ASP.NET: autoryzacji formularzy i profili
uytkownika.
Integracja danych z rnych rde za pomoc odwoa do usug Web (niniejszy kurs nie
obejmuje zagadnie zwizanych z usugami Web wicej informacji na ten temat mona
znale m.in. pod adresem http://msdn.microsoft.com/webservices).
Wsparcie dla wikszoci popularnych i uywanych przegldarek, m.in. Microsoft Internet
Explorer, Mozilla Firefox i Apple Safari.
Architektura ASP.NET AJAX
Technologia ASP.NET AJAX zawiera biblioteki skryptw klienckich oraz komponenty serwerowe
(Rys. 4). Dodatkowo mona rozszerzy jej moliwoci 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 skryptw po stronie klienta
Biblioteka skryptw po stronie klienta zawiera rozszerzenia JavaScript, ktre pozwalaj na
programowanie zorientowane obiektowo. Taka moliwo nie bya wczeniej bezporednio
dostpna dla programistw JavaScript. Moliwoci programowania zorientowanego obiektowo
dodane do biblioteki skryptw ASP.NET AJAX pozwalaj na tworzenie bardziej spjnego i
modularnego kodu po stronie klienta.
Nastpujce warstwy zostay wczone do biblioteki:
Biblioteka klas podstawowych udostpnia podstawowe komponenty i rozszerzon obsug
bdw.
Moliwoci przegldarki zapewnia kompatybilno skryptw klienckich z wikszoci
uywanych przegldarek.
Sieci odpowiada za komunikacj z aplikacjami i usugami Web i zarzdza asynchronicznymi
wywoywaniami metod.
Usugi jdra zawiera rozszerzenia JavaScript, takie jak klasy, przestrzenie nazw, obsuga
bdw, dziedziczenie, typy danych i serializacja obiektw.
Strona 13-6
Technologie po stronie serwera
Kontrolki serwerowe ASP.NET AJAX to:
ScriptManager
UpdatePanel
UpdateProgress
Timer
Usugi Web, z jakich moemy korzysta z poziomu ASP.NET AJAX:
uwierzytelnianie formularzy
profile
Kontrolki serwerowe ASP.NET AJAX
Kontrolki serwerowe ASP.NET AJAX cz w sobie kod wykonywany zarwno po stronie serwera, jak
i klienta.
ScriptManager
Kontrolka ScriptManager zarzdza zasobami skryptowymi dla komponentw klienta, czciow
aktualizacj strony, lokalizacj, globalizacj i skryptami wasnymi uytkownika. Kontrolka ta musi
zosta umieszczona przed innymi kontrolkami ASP.NET AJAX na stronie. Koordynuje ona i rejestruje
skrypty odpowiedzialne za czciowe odwieanie strony, odpowiada za konfigurowanie, czy te
zwolnienie bd debugowanie skryptw wysyanych do przegldarki oraz interakcj skryptw z
metodami usug sieciowych.
UpdatePanel
Kontrolka UpdatePanel umoliwia aktualizacj wybranej czci strony przy uyciu
asynchronicznych da. Jest kluczowym elementem AJAX w ASP.NET. Umoliwia wykorzystanie
mechanizmu czciowego odwieania strony, dziki czemu moliwe jest ograniczenie czasu
potrzebnego na ponowne adowanie strony.
Kontrolka UpdatePanel jest kontenerem elementw podlegajcych pod system dynamicznego
odwieania strony. Najwaniejsze waciwoci kontrolki to:
ContentTemplate jest kontenerem dla kontrolek, ktre maj by dynamicznie
aktualizowane. Dodawanie kontrolek jest moliwe tylko do tej czci.
Triggers zawiera list wyzwalaczy zdarze, ktre mog wywoa aktualizacj kontrolek
znajdujcych si w ContentTemplate. Dziel si na dwie grupy:
AsyncPostBackTrigger moemy zdefiniowa zewntrzn wzgldem UpdatePanel
kontrolk i jej zdarzenie, ktre spowoduj jej aktualizacj
PostBackTrigger moemy zdefiniowa wewntrzn wzgldem UpdatePanel
kontrolk i jej zdarzenie, ktre spowoduje aktualizacj nie tylko panelu, ale i caej strony
Kontener kontrolek wskazujcy 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="Wcinij mnie!" runat="server"/>
<ContentTemplate>
</asp:UpdatePanel>
Pozostaa zawarto nie jest aktualizowana...
Strona 13-7
Kontrolka UpdatePanel automatycznie generuje wszystkie wymagane skrypty i wysya je do
przegldarki. Na stronie moemy umieci wiele kontrolek UpdatePanel i kada z nich bdzie
niezalenie aktualizowana.
UpdateProgress
Kontrolka UpdateProgress udostpnia informacje o statusie aktualizacja kontrolki
UpdatePanel. Kontrolka wywietla zawarto okrelon przez waciwo ProgressTemplate.
W momencie aktualizacji kontrolki UpdatePanel pojawia si zawarto zdefiniowana w kontrolce
UpdateProgress.
Moemy sterowa czasem, po jakim pojawi si wywietlana zawarto kontrolki
UpdateProgress za pomoc waciwoci DisplayAfter. Waciwo ta okrela czas w
milisekundach, po jakim zostanie wywietlona zawarto kontrolki UpdatePanel.
W przypadku kilku kontrolek UpdatePanel na stronie standardowo kontrolka UpdateProgress
wywietla si podczas aktualizacji kadej z nich. Jeli potrzebujemy ograniczy wywietlanie do
jednej kontrolki UpdatePanel, moemy to zrobi przy pomocy waciwoci
AssociatedUpdatePanelID.
Timer
Kontrolka Timer odpowiada za komunikacj zwrotn do serwera w okrelonych odstpach czasu.
Moliwe jest wysyanie caej strony lub jej czci ujtej w kontrolce UpdatePanel. Waciwo
Interval okrela ilo milisekund, po ktrej nastpi komunikacja zwrotna do serwera.
Podsumowanie
W tym rozdziale przedstawiona zostaa technologia AJAX ASP.NET.
Uwagi dla studenta
rozumiesz jak dziaa UpdatePanel
znasz kontrolki dostpne w AJAX Extensions
wiesz co to jest i jakie ma zalety czciowa aktualizacja strony
1. The Official Microsoft ASP.NET Site, http://www.asp.net/ajax
Na stronie znajdziesz wiele materiaw dotyczcych technologii AJAX. Szczeglnie
ciekawe s webcasty prezentujce wiele elementw technologii. Wanym
miejscem wartym przejrzenia jest zakadka Showcase, prezentujca list stron
wykorzystujcych t technologi.
2. Maciej Dadela, AJAX w ASP.NET, http://www.codeguru.pl/article-718.aspx
W artykule autor prezentuje przegld najwaniejszych informacji dotyczcych
technologii ASP.NET AJAX. Zawar opis kontrolek i ich waciwoci, pozwalajc
zapozna si bliej z t technologi.
3. Matt Gibbs, Dan Wahlin, ASP.NET 2.0 AJAX. Zaawansowane programowanie, Helion, 2008
W ksice autorzy pokazuj, jak korzysta z rnych bibliotek, jak uywa
zaawansowanych kontrolek z pakietu AJAX Toolkit, a take jak budowa wasne
Strona 13-8
kontrolki. Nauczysz si asynchronicznie uaktualnia fragmenty stron i zarzdza
skryptami uywanymi w przegldarce, dowiesz si, jak testowa takie aplikacje i
usuwa z nich bdy. Z t ksik zdobdziesz wiedz potrzebn do kreowania
nowoczesnych, interaktywnych aplikacji.
Piotr Bubacz
Przed wykorzystaniem technologii ASP.NET AJAX Twj zesp postanowi wysa Ci na
Twoim zadaniem jest zapoznanie si z moliwociami wykorzystania tej technologii w Waszych
projektach internetowych.
w ASP.NET AJAX.
1. Utwrz now
aplikacj
internetow w
systemie plikw
Otwrz Visual Studio wybierz
W oknie dialogowym
2. Dodaj
kontrolk
UpdatePanel
Do strony dodaj kontrolk
mysz
W kontrolce
Do kontrolki
Poza kontrolk
oknie
3. Dodaj
procedur obsugi
zdarzenia
Page_Load
Otwrz plik
kod
t1Label.Text = DateTime.Now.ToLongTimeString();
4. Zapisz i
sprawd dziaanie
strony
Zapisz zmiany i uruchom formularz.
Wcinij przycisk
5. Zapoznaj si z
zaletami
czciowej
aktualizacji
strony.
Do aplikacji dodaj kolejn stron
W kontrolce
kategoria
Poza kontrolk
Zapisz i uruchom formularz. Za pomoc przyciskw
miesice w jednej i drugiej kontrolce.
6. Zapoznanie z
moliwoci
odwieania
zawartoci
kontrolki
UpdatePanel przy
W kontrolce

Strona 13-9
Przed wykorzystaniem technologii ASP.NET AJAX Twj zesp postanowi wysa Ci na
Wynikiem Twoich prac maj by testy wszystkich kontrolek dostepnych
Tok postpowania
Otwrz Visual Studio wybierz File -> New -> Web Site
W oknie dialogowym New Web Site okrel nastpujce waciwoci
szablon: ASP.NET Web Site
lokalizacja: z listy rozwijanej wybierz File System
pooenie strony
jzyk: Visual C#
Do strony dodaj kontrolk ScriptManager i UpdatePanel
mysz z okna Toolbox (kategoria AJAX Extensions
W kontrolce UpdatePanel umie kontrolk Label
w polu ID wpisz t1Label
w polu Text usu zawarto
Do kontrolki UpdatePanel dodaj kontrolk Button
Poza kontrolk UpdatePanel umie dodatkow kontrolk
oknie Properties:
Otwrz plik Default.aspx.cs i do metody Page_Load
kod, wywietlajcy aktualn dat w kontrolkach Label
Zapisz zmiany i uruchom formularz.
Wcinij przycisk Button.
Ktra kontrolka jest aktualizowana? Dlaczego?
Do aplikacji dodaj kolejn stron ASPX.
Do strony dodaj kontrolk ScriptManager oraz UpdatePanel
W kontrolce UpdatePanel umie kontrolk Calendar
kategoria Standard.
Poza kontrolk UpdatePanel umie kolejn kontrolk
Zapisz i uruchom formularz. Za pomoc przyciskw
miesice w jednej i drugiej kontrolce.
Czy mona zaobserwowa rnic?
Modu 13
ASP.NET AJAX
Przed wykorzystaniem technologii ASP.NET AJAX Twj zesp postanowi wysa Ci na zwiady.
Wynikiem Twoich prac maj by testy wszystkich kontrolek dostepnych
Web Site.
okrel nastpujce waciwoci:
File System, a nastpnie okrel
UpdatePanel, przecigajc je
s).
Label i w oknie Properties:
Button.
umie dodatkow kontrolk Label i w
Page_Load dodaj nastpujcy
Label:

UpdatePanel.
Calendar z okna Toolbox
umie kolejn kontrolk Calendar.
Zapisz i uruchom formularz. Za pomoc przyciskw > kontrolki zmie
UpdatePanel.
Piotr Bubacz
uyciu
zewntrznego
przycisku
Poza kontrolk
Dwukrotnie
Click
Zapisz zmiany i uruchom formularz. Kliknij przycisk.
Przejd do widoku
a nastpnie w oknie
W oknie
listy zostanie dodany wyzwalacz i w
AsyncPostB
Kliknij przycisk
7. Zapoznanie z
moliwociami
wykorzystania
kontrolki
UpdateProgress.
W kontrolce
Do kontrolki
Kliknij dwukrotnie
Click
System.Threading.Thread.Sleep(3000);
//powysza linijka suy jednie celom TESTOWYM!!
Poza kontrolk

Strona 13-10
Poza kontrolk UpdatePanel dodaj do formularza kontrolk
Dwukrotnie kliknij dodan kontrolk. W metodzie obsugi zdarzenia
Click przycisku dodaj:
Czy dokonaa si pena czy czciowa aktualizacja strony? Dlaczego?
Przejd do widoku Design formularza. Wybierz kontrolk
a nastpnie w oknie Properities w polu Triggers wybierz
W oknie UpdatePanelTrigger Collection Editor nacinij przycisk
listy zostanie dodany wyzwalacz i w
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.
Do kontrolki UpdatePanel dodaj kontrolk Button
Kliknij dwukrotnie dodan kontrolk. W metodzie obsugi zdarzenia
Click przycisku dodaj:
Poza kontrolk UpdatePanel dodaj kontrolk
Modu 13
ASP.NET AJAX
dodaj do formularza kontrolk Button.
metodzie obsugi zdarzenia
formularza. Wybierz kontrolk UpdatePanel,
wybierz ().
nacinij przycisk Add. Do
listy zostanie dodany wyzwalacz i w obszarze
Click

UpdatePanelTrigger Collection Editor
UpdatePanel.
Button.
metodzie obsugi zdarzenia
dodaj kontrolk UpdateProgress. W
Piotr Bubacz
kontrolce
Zapisz zmiany i uruchom formularz
8. Zapoznanie z
moliwociami
kontrolki Timer.
W kontrolce
Do kontrolki
Poza kontrolk
Properties
Do
uruchomienia formularza w kontrolce
Kliknij dwukrotnie kontrol
dodaj:
Zapisz zmiany i uruchom formu

Po zapoznaniu si z technologi
stworzonej dla firmy Adventure Works
9. Wykorzystaj
czciow
aktualizacje
strony do
wywietlenia
produktw
Otwrz aplikacj przygotowan w poprzednim module
Otwrz stron
Przed wszystkimi kontrolkami na grze strony umie kontrolk
ScriptManager
niej wszystkie kontrolki
Zapisz zamiany w aplikacji i uruchom stron
10. Dodaj
wywietlania
informacji o
aktualizacji
W widoku
kontrolk
Wybierz kontrolk
a
obsugi zdarzenia

Strona 13-11
kontrolce UpdateProgress dodaj tekst Przetwarzanie
Zapisz zmiany i uruchom formularz, a nastpnie kliknij przycisk.
Czy dokonaa si pena czy czciowa aktualizacja strony? Co si dziao
w czasie aktualizacji?
Do kontrolki UpdatePanel dodaj kontrolk Timer.
w polu ID wpisz t1Timer
w polu Interval wpisz 5000
Poza kontrolk UpdatePanel umie kontrolk
Properties:
Do metody Page_Load dodaj nastpujcy kod wywietlajcy
uruchomienia formularza w kontrolce t2Label:
Kliknij dwukrotnie kontrolk Timer. W metodzie
dodaj:
Zapisz zmiany i uruchom formularz, a nastpnie p
Co si stao? Dlaczego?
Po zapoznaniu si z technologi Twoim zadaniem jest dodanie funkcjonalnoci AJAX do aplikacji
stworzonej dla firmy Adventure Works.
Tok postpowania
Otwrz aplikacj przygotowan w poprzednim module
ScriptManager z okna Toolbox (kategoria AJAX Extension
Do strony dodaj kontrolk UpdatePanel i w widoku
niej wszystkie kontrolki
Zapisz zamiany w aplikacji i uruchom stron Produkty.aspx
Czy nastpuje aktualizacja caej strony?
W widoku Design na stronie poniej kontrolki
kontrolk UpdateProgress. Umie w niej napis: Pobieranie danych
Wybierz kontrolk KategorieListBox i w oknie Properties
a nastpnie kliknij dwukrotnie pole SelectedIndexChang
obsugi zdarzenia dodaj nastpujcy kod:
Modu 13
ASP.NET AJAX
Przetwarzanie.
liknij przycisk.
Czy dokonaa si pena czy czciowa aktualizacja strony? Co si dziao
UpdatePanel.
.
umie kontrolk Label i w oknie
pujcy kod wywietlajcy czas
metodzie obsugi zdarzenia Tick
poczekaj 5 sekund.
odanie funkcjonalnoci AJAX do aplikacji
Otwrz aplikacj przygotowan w poprzednim module.
xtensions).
i w widoku Design przenie do
Produkty.aspx.
a stronie poniej kontrolki UpdatePanel umie
Pobieranie danych.
Properties kliknij Events,
SelectedIndexChanged. W metodzie
Piotr Bubacz
Zapisz wszystkie pliki i u
11. Zmiana
wywietlania
tekstu na obrazek
Znajd animowanego gifa (np. na stronie
Za
obrazek.
Zapisz wszystkie pliki i uruchom ponownie aplikacj
12. Dodanie
moliwoci
anulowania
aktualizacji
Do kontrolki
<br /><input type="button"
value="Anuluj aktualizacj" />
Do kontrolki
jzyku J
<script type="text/javascript" >function abortPB() {

</script>
Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji
nacinij przycisk
Twojemu klientowi zawsze marzya si reklama
przegldarce. Twoim ostatnim zadaniem
by odwieana cyklicznie co
13. Przygotuj
aplikacj do
korzystania z
kontrolki
ScriptMagerProxy
Otwrz stron
Usu kontrolk
ScriptMagerProxy
kontrolki
14. Dodaj
kontrolk
uytkownika
wywietlajcej
reklamy
Kliknij prawym przyciskiem myszy katalog
Item
wpisz
Dodaj kontrolk
UpdatePanel
W widoku
Okrel jej waciwo
Dodaj kontrolk
15. Umie
kontrolk
Reklama.ascx na
szablonie strony
do kontrolki
16. Zapisz i
przetestuj
Zapisz zmiany i uruchom aplikacj.
Otwrz stron

Strona 13-12
Znajd animowanego gifa (np. na stronie http://www.ajaxload.info
Zamie wywietlany tekst w kontrolce UpdateProgress
obrazek.
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
jzyku JavaScript:
var obj = Sys.WebForms.PageRequestManager.getInstan
if (obj.get_isInAsyncPostBack())
{ obj.abortPostBack(); }
}
</script>
nacinij przycisk Anuluj aktualizacj.
Czy aktualizacja zostaa anulowana?
Twojemu klientowi zawsze marzya si reklama, ktrej zawarto jest cyklicznie odwieana w
Twoim ostatnim zadaniem jest dodanie wywietlania reklamy na stronie. Reklama ma
by odwieana cyklicznie co 6 sekund.
Tok postpowania
Usu kontrolk ScriptManager i w jej miejsce wstaw kontrolk
ScriptMagerProxy z okna Toolbox (kategoria AJAX Extension
Otwrz szablon strony SzablonStrony.master i na grze strony obok
kontrolki WebPartManager dodaj kontrolk ScriptManager
Kliknij prawym przyciskiem myszy katalog Kontrolki
Item. W obszarze Templates wybierz Web User Control
wpisz Reklama.ascx. W licie rozwijanej Language
Dodaj kontrolk ScriptManagerProxy, a nastpnie kontrolk
UpdatePanel.
W widoku Design dodaj do kontrolki UpdatePanel
Okrel jej waciwo AdvertisementFile="~/Adv/adv.xml".
Dodaj kontrolk Timer i okrel jej waciwo Interval
Otwrz szablon strony SzablonStrony.master i w wido
do kontrolki div o ID="DrugiObszarBoczny" kontrolk
Zapisz zmiany i uruchom aplikacj.
Otwrz stron Default.aspx i sprawd, czy nastpuje zmiana reklamy.
Modu 13
ASP.NET AJAX
ruchom ponownie aplikacj.
http://www.ajaxload.info).
UpdateProgress na odnaleziony
Zapisz wszystkie pliki i uruchom ponownie aplikacj.
dodaj:
id="abortButton" onclick="abortPB()"
dodaj nastpujcy skrypt w
var obj = Sys.WebForms.PageRequestManager.getInstance();
ktrej zawarto jest cyklicznie odwieana w
dodanie wywietlania reklamy na stronie. Reklama ma
i w jej miejsce wstaw kontrolk
AJAX Extension).
i na grze strony obok
ScriptManager.
Kontrolki i wybierz Add New
Web User Control, w polu Name
Language wybierz Visual C#.
, a nastpnie kontrolk
UpdatePanel kontrolk AdRotator.
AdvertisementFile="~/Adv/adv.xml".
Interval="6000".
i w widoku Design dodaj
kontrolk Reklama.ascx.
i sprawd, czy nastpuje zmiana reklamy.
Piotr Bubacz
Modu 14
Wersja 1
ASP.NET AJAX Control Toolkit
Spis treci
ASP.NET AJAX Control Toolkit .............................................................................................................. 1

ITA-103 Aplikacje Internetowe ASP.NET AJAX Control Toolkit
Strona 14-2
Informacje o module
Opis moduu
W tym module znajdziesz informacje dotyczce biblioteki ASP.NET AJAX
Control Toolkit. Nauczysz si rozszerza moliwoci standardowych
kontrolek ASP.NET o funkcjonalnoci zawarte w bibliotece.
Cel moduu
Celem moduu jest przedstawienie moliwoci wykorzystania biblioteki
ASP.NET AJAX Control Toolkit w projektach stron internetowych do
szybkiego tworzenia zaawansowanych efektw.
wiedzia jakie kontrolki wchodz w skad ASP.NET AJAX Control
Toolkit
potrafi rozszerza moliwoci standardowych kontrolek ASP.NET
o funkcjonalnoci zawarte w bibliotece
Wymagania wstpne
zna zasady pracy w rodowisku Visual Studio 2008, w szczeglnoci
zna podstawy ASP.NET AJAX
Mapa zalenoci moduu
w moduach Podstawy HTML, Kaskadowe Arkusze Stylw CSS,
Wprowadzenie do ASP.NET oraz ASP.NET AJAX.

Strona 14-3
Przykadowy problem
Tworzenie rozbudowanych stron z efektownie wygldajcym interfejsem uytkownika wymaga
duo pracy. Niestety w codziennej pracy programistw jest mao czasu na implementacje tego, co
dla uytkownika jest najwaniejsze interfejsu. Aby na stronie pojawiay si zwijane, wysuwany,
wyskakujce czy animowane elementy niezbdna jest znajomo jzyka JavaScript oraz szczegw
jego implementacji we wszystkich popularnych przegldarkach. Niestety na to nie ma czasu i
musimy sign po gotowe komponenty, ktre najczciej nie s tanie. Zatem mamy wybr: albo
sami implementujemy rozwizania, albo kupujemy drogie kontrolki od innych dostawcw.
ASP.NET AJAX Control Toolkit udostpnia zbir komponentw umoliwiajcych szybkie tworzenie
stron o rozbudowanej funkcjonalnoci. Zawiera kod rdowy, szablony, dokumentacje i przykady.
Po dodaniu do Visual Studio 2008 kada kontrolka posiada Smart Tag z opcj Add Extender,
umoliwiajc rozszerzenie funkcjonalnoci kontrolki o moliwoci oferowane przez ASP.NET AJAX
Control Toolkit. Po dodaniu do kontrolki rozszerzenia dodana funkcjonalno jest wywietlana w
oknie Properties. W widoku rda moemy skonfigurowa funkcjonalno w kontrolce
rozszerzenia. Moliwe jest dodanie kilku rozszerze do jednej kontrolki.
ASP.NET AJAX Control Toolkit zawiera nastpujce kontrolki i rozszerzenia:
Accordion umoliwia przesanie kilku paneli i wywietlenie jednego z nich
AlwaysVisibleControl jest prostym rozszerzeniem umoliwiajcym przypicie
kontrolki do strony tak, e pojawia si jako ruchome okno ponad treci strony
Animation umoliwia tworzenie animacji dla elementw i kontrolek
AutoComplete rozszerza moliwoci kontrolki TextBox o mechanizm podpowiedzi
Calendar rozszerza moliwoci kontrolki TextBox wywietlajc kalendarz i przekazujc
wybran dat do kontrolki
CascadingDropDown umoliwia czenie kontrolek DropDown i wypenianie ich
zawartoci asynchronicznie
CollapsiblePanel rozszerza kontrolk Panel o moliwo zwijania i rozwijania jej
zawartoci
ConfirmButton rozszerza moliwoci kontrolki Button o potwierdzenie po stronie
klienta
DragPanel rozszerza kontrolk Panel o moliwo przesuwania i umieszczania jej w
dowolnym miejscu na stronie
DropDown rozszerza moliwoci niemal kadej kontrolki, udostpniajc funkcjonalno
menu, ktre moe by innym panelem lub kontrolk
DropShadow rozszerza dowolne kontrolki wizualne o moliwo rzucania cienia
DynamicPopulate wypenia zawarto elementu strony wynikiem pobranym z zapytania
do usugi Web
FilteredTextBox rozszerza moliwoci kontrolki TextBox o zezwolenie na
wprowadzania informacji jednego typu
HoverMenu rozszerza dowoln kontrolk o moliwo wywietlenia podrcznego menu w
momencie, kiedy kursor myszy znajdzie si nad kontrolk
MaskedEdit rozszerza kontrolk TextBox o moliwo wywietlenia formatu
wprowadzanych danych oraz ich walidacj po stronie klienta
ModalPopup umoliwia wywietlenie okna dialogowego na stronie i zablokowanie strony
przed jej edycj
Strona 14-4
MutuallyExclusiveCheckBox rozszerza kontrolki CheckBox o moliwo wzajemnego
wykluczania si
NoBot stosuje proste metody zapobiegajce wysyaniu strony przez automatycznych
klientw
NumericUpDown rozszerza kontrolk TextBox o moliwo zwikszenia lub zmniejszenia
wartoci w kontrolce przy pomocy powizanych przyciskw
PagingBulletedList rozszerza moliwoci kontrolki BulletedList o sortowanie i
stronicowanie po stronie klienta
PasswordStrength rozszerza kontrolk TextBox o moliwo sprawdzenia i
wywietlenia siy wprowadzanego hasa
PopupControl umoliwia dodanie do dowolniej kontrolki okna wyskakujcego (pop-up)
Rating umoliwia atw ocen dowolnej zawartoci za pomoc gwiazdek
ReorderList umoliwia przestawianie elementw listy poprzez przeciganie ich mysz
ResizableControl umoliwia zmian wielkoci dowolnego element w przegldarce
RoundedCorners rozszerza wizualne kontrolki o zaokrglone rogi
Slider peni funkcj paska przewijania
TabContainer umoliwia wywietlenie czci interfejsu uytkownika w zakadkach
TextBoxWatermark rozszerza kontrolk TextBox o moliwo wywietlania znaku
wodnego, gdy uytkownik nie wprowadzi adnej wartoci
ToggleButton rozszerza kontrolk CheckBox o moliwo wywietlania obrazkw w
miejscu elementw zaznaczonych i niezaznaczonych
UpdatePanelAnimation animuje elementy na stronie umoliwiajc graficzne
reprezentowanie stanu pobierania danych
ValidatorCallout rozszerza moliwoci standardowych kontrolek do sprawdzania
poprawnoci danych wprowadzanych przez uytkownika
Podsumowanie
W tym rozdziale przedstawiony zosta ASP.NET AJAX Control Toolkit.
Wyobramy sobie, e mamy rozszerzy funkcjonalno naszej aplikacji o moliwoci oferowane
przez bibliotek ASP.NET AJAX Control Toolkit.
Dodanie ASP.NET AJAX Control Toolkit do Visual Studio
Zanim bdziemy mogli wykorzysta funkcjonalno ASP.NET AJAX Control Toolkit w naszych
aplikacjach, musimy pobra ze strony http://www.codeplex.com/AjaxControlToolkit archiwum
zawierajce kontrolki przeznaczone dla .NET Framework 3.5. Archiwum moemy rozpakowa w
dowolnym miejscu, jednak ze wzgldu na lepsze zarzdzanie proponujemy zapisa zawarto do
katalogu C:\Program Files\Microsoft ASP.NET. Dziki temu bdziemy mieli jedno miejsce na
poszukiwanie elementw zwizanych z ASP.NET. Najwaniejsz bibliotek AjaxControlToolkit.dll,
znajdziemy w katalogu C:\Program Files\Microsoft ASP.NET\SampleWebSite\Bin. Najbezpieczniej
jest j skopiowa od razu do katalogu C:\Program Files\Microsoft ASP.NET\Binaries. W przyszoci
bdziemy ingerowa w kod kontrolek i sami kompilowa t bibliotek, wic bezpiecznie mie kopi
zapasow.
Kolejnym krokiem jest dodanie kontrolki do Visual Studio 2008. W tym celu dodamy now zakadk
w oknie Toolbox, klikaja w jego obszarze prawym przyciskiem myszy, a nastpnie wybierajc Add
Tab. Moemy nazwa j dowolnie, np. AJAX Control Toolkit. Nastpnie musimy wskaza lokalizacj
biblioteki. W tym celu klikamy dodan przed chwil zakadk prawym przyciskiem myszy i
wybieramy Choose Items.
Strona 14-5
Po wskazaniu pliku za pomoc przycisku Browse moemy doda bibliotek AjaxControlToolkit.dll.
W tym momencie w zakadce pojawi si lista kontrolek i rozszerze zawartych w bibliotece.
Jeli znajdziesz chwil czasu warto przetestowa wszystkie kontrolki dostpne w bibliotece. W tym
celu w Visual Studio otwieramy projekt C:\Program Files\Microsoft ASP.NET\
AjaxControlToolkit.sln.
Rozszerzanie funkcjonalnoci kontrolek przy pomocy ASP.NET AJAX Control Toolkit
Teraz nauczymy si rozszerza funkcjonalno kontrolek przy uyciu ASP.NET AJAX Control Toolkit.
Aby doda ktr z funkcjonalnoci oferowanych przez ASP.NET AJAX Control Toolkit do kontrolki,
wybieramy kontrolk, do ktrej chcemy doda rozszerzenie, a nastpnie w menu Smart Tag klikamy
Add Extender.

Rys. 2 Rozszerzanie funkcjonalnoci kontrolki TextBox przy pomocy ASP.NET AJAX Control Toolkit
W kolejnym oknie Extender Wizard (Rys. 3) musimy wybra rozszerzenie, ktre chcemy doda do
kontrolki. W naszym przypadku dodamy kontrolk TextBoxWatermarkExtender rozszerzajc
kontrolk TextBox o moliwo wywietlania znaku wodnego, gdy uytkownik nie wprowadzi
adnej wartoci.

Rys. 3 Okno Extender Wizard
Po dodaniu rozszerzenie w oknie Properties kontrolki znajdziemy now grup Extenders.

Rys. 4 Okno Properties kontrolki TextBox po dodaniu rozszerzenia TextBoxWatermarkExtender
Strona 14-6
Moemy rozwin i sprawdzi dodatkowe waciwoci kontrolki. Ustalimy, e kontrolka bdzie
posiadaa znak wodny o treci Podaj nazw produktu (waciwo WatermarkText) oraz
wykorzystamy zdefiniowan w szablonie strony klas CSS o nazwie watermarked (waciwo
WatermarkCssClass).
Po uruchomieniu strony w przegldarce moemy sprawdzi dziaanie rozszerzenia. W naszym
przypadku na stronie zostanie wywietlona kontrolka TextBox ze znakiem wodnym Podaj nazw
produktu. Po klikniciu znak wodny znika (Rys. 5).
a) b)
Rys. 5 Kontrolka TextBox po dodaniu TextBoxWatermarkExtender wywietlona w przegldarce
a) przed b) po klikniciu kontrolki
Uwagi dla studenta
potrafisz doda ASP.NET AJAX Control Toolkit do projektu
umiesz dodawa rozszerzenia do kontrolek
1. ASP.NET AJAX Extender Controls, http://msdn.microsoft.com/en-us/library/bb532368.aspx
Na stronie znajdziesz szczegowe informacje odnonie moliwoci rozszerzania
funkcjonalnoci kontrolek przy uyciu kontrolek bazujcych na ExtenderControl.
2. Adam Calderon, Joel Rumerman, Advanced ASP.NET AJAX Server Controls For .NET
Framework 3.5, Addison-Wesley, 2008
W ksice autor przedstawia wszystkie najwaniejsze zagadnienia zwizane z
kontrolkami serwerowymi w ASP.NET AJAX z uwzgldnieniem AJAX Control
Toolkit.
3. ASP.NET AJAX Control Toolkit: The Official Microsoft ASP.NET Site,
http://www.asp.net/ajax/ajaxcontroltoolkit
Oficjalna strona AJAX Control Toolkit, znajdziesz tu zawsze najnowsze wersje
kontrolek, dokumentacj oraz wideotutoriale uatwiajcy szybkie rozpoczcie
pracy z t bibliotek.

Strona 14-7
Twj zesp chciaby doda kilka nowych rozwiza, ktre mona zobaczy na innych stronach.
Niestety okazao si, e wymagaj one znajomoci jzyka JavaScript. Ju prawie zrezygnowalicie i
chcielicie odda projekt w takim stanie w jakim jest, ale na szczcie jeden z Twoich kolegw
znalaz informacje o bibliotece ASP.NET AJAX Control Toolkit. Na stronie gwnej by link do wersji
live, po przejrzeniu moliwoci biblioteki stwierdzilicie jednogonie, e to jest to, czego chcecie.
Jeden z czonkw zespou mia wtpliwoci, czy dacie rad szybko nauczy si tej biblioteki i za jej
pomoc uatrakcyjni wasz aplikacj. Na szczcie pobralicie kod biblioteki i okazao si, e Visual
Studio 2008 na tyle uatwia wspprac z ni, e moglicie od razu zacz prac.
Waszym pierwszym zadaniem jest dodanie funkcjonalnoci bibliotece ASP.NET AJAX Control Toolkit
do Visual Studio.
1. Dodanie
ASP.NET AJAX
Control Toolkit do
Visual Studio
Pobierz ze strony http://www.codeplex.com/AjaxControlToolkit
archiwum zawierajce kontrolki przeznaczone dla .NET Framework 3.5.
Rozpakuj archiwum na dysku w katalogu C:\Program Files\Microsoft
ASP.NET.
Z katalogu C:\Program Files\Microsoft ASP.NET\SampleWebSite\Bin
skopiuj pliki AjaxControlToolkit.dll i AjaxControlToolkit.pdb do
katalogu C:\Program Files\Microsoft ASP.NET\Binaries.
Otwrz stron przygotowan w poprzednim wiczeniu. Otwrz dowolny
plik z rozszerzeniem aspx.
W oknie Toolbox kliknij prawy przyciskiem myszy i wybierz Add Tab.
Nazwij j AJAX Control Toolkit.
Kliknij prawym przyciskiem myszy nowo dodan zakadk i wybierz
Choose Items.

Rys. 6 Okno Choose Toolbox Items
Kliknij Browse.
Wska plik C:\Program Files\Microsoft
ASP.NET\Binaries\AjaxControlToolkit.dll i kliknij Open. Nastpnie
kliknij OK.
Piotr Bubacz
W zakadce
kontrolek i rozszerze.
2. Przetestuj
moliwoci
rozszerze
dostpnych w
ASP.NET AJAX
Control Toolkit
W Visual Studio otwrz projekt
AjaxControlToolkit.sln
Nacinij
Zapoznaj si z moliwociami kontrolek i rozszerze kontrolek
dostpnymi w zbiorze
Szczeglnie zapoznaj si z rozszerzeniami:
AlwaysVisibleControlExtender
FilteredTextBoxExtender
Teraz Twj zesp wyznaczy sobie nastpujce zadnia: doda efekt znaku wodnego do wszystkich
kontrolek TextBox w aplikacji,
strony, doda filtrowanie wprowadzania
kalendarza na wywietlanie kalendarza po klikniciu na kontrolk
3. Rozszerz
moliwoci
kontrolki Szukaj
Otwrz kontrolk uytkownika
Wybierz kontrolk
nastpnie kliknij
W oknie
OK
W oknie
NazwaProduktuTextBox_TextBoxWatermarkExt
WatermarkText
WatermarkCssClass
Do pliku
.watermarked {

}
Zapisz zmiany i przetestuj dziaanie aplikacji. Otwrz stron
i s
4. Rozszerz
moliwoci
kontrolki Reklama
Otwrz kontrolk uytkownika
Wybierz
W oknie Extender
OK
W oknie
AdRotator1_AlwaysVisibleControlExtender
listy rozwijanej wybierz
Zapisz zmiany i otwrz dowoln stron. Zmniejsz okno przegldarki tak,
aby konieczne byo przewijanie treci.

Strona 14-8
W zakadce AJAX Control Toolkit powinna pojawi si lista nowych
kontrolek i rozszerze.
W Visual Studio otwrz projekt C:\Program Files
AjaxControlToolkit.sln.
Nacinij Ctrl+F5 lub wybierz Debug -> Start without debugging.
dostpnymi w zbiorze ASP.NET AJAX Control Toolkit
AlwaysVisibleControlExtender, CalendarExtender
FilteredTextBoxExtender i TextBoxWatermarkExtender
w aplikacji, ustawi pozycj kontrolki AdRotator w prawym grnym rogu
strony, doda filtrowanie wprowadzania numerw i kodu pocztowego
kalendarza na wywietlanie kalendarza po klikniciu na kontrolk TextBox.
Tok postpowania
Otwrz kontrolk uytkownika Kontrolki\Szukaj.aspx
Wybierz kontrolk TextBox o ID="NazwaProduktuTextBox
nastpnie kliknij Smart Tag. Wybierz Add Extender
W oknie Extender Wizard wybierz TextBoxWatermarkExtender
OK.
W oknie Properties kontrolki TextBox znajd grup
NazwaProduktuTextBox_TextBoxWatermarkExtender
WatermarkText wpisz Podaj nazw produktu
WatermarkCssClass wpisz watermarked.
Do pliku Style.css dodaj styl:
.watermarked {
height:20px;
width:150px;
padding:2px 0 0 2px;
border:1px solid #BEBEBE;
background-color:#F0F8FF;
color:gray;

Zapisz zmiany i przetestuj dziaanie aplikacji. Otwrz stron
sprawd, jak wyglda kontrolka TextBox.
Otwrz kontrolk uytkownika Kontrolki\Reklama.asp
Wybierz kontrolk AdRotator i kliknij Smart Tag. Wybierz
W oknie Extender Wizard wybierz AlwaysVisibleControlExtenderi
OK.
W oknie Properties znajd grup Extenders
AdRotator1_AlwaysVisibleControlExtender. W polu
listy rozwijanej wybierz Right.
aby konieczne byo przewijanie treci.
Gdzie znajduje si kontrolka AdRotator
zawartoci strony?
Modu 14
powinna pojawi si lista nowych
Program Files\Microsoft ASP.NET\
Start without debugging.
ol Toolkit.
CalendarExtender i
TextBoxWatermarkExtender.
w prawym grnym rogu
oraz zmieni kontrolki
.
Szukaj.aspx.
NazwaProduktuTextBox", a
Extender.
TextBoxWatermarkExtender i kliknij
znajd grup Extenders i rozwi
ender. W polu
Podaj nazw produktu, a w polu
Zapisz zmiany i przetestuj dziaanie aplikacji. Otwrz stron Szukaj.aspx
Reklama.aspx.
. Wybierz Add Extender.
AlwaysVisibleControlExtenderi kliknij
Extenders i rozwi
W polu HorizontalSide z
podczas przewijania
Piotr Bubacz
5. Dodaj
rozszerzenia do
strony
Ankieta.aspx
Otwrz stron
Wybierz kontrolk
Smart
W oknie
OK
W oknie
NazwaProduktuTextBox_
WatermarkText
watermarked
Podobnie postpuj ze wszystkimi kontrolkami
Wybierz kontrolk
SmartTag
W oknie
W oknie
telTextBox_FilteredTextBoxExtender
rozwijanej wybierz
Podobnie postpuj ze
mieszTextBox
liczbaKmTextBox
Wybierz kontrolk
Smart
W oknie
W oknie
kodTextBox_FilteredTextBoxExtender
Zapisz stron. Uruchom

Ankiety
Ankiety
Usu kontrolki
dodaj kontrolk
rozszerzenie
wpisz
WatermarkCssClass
Dodaj do kontrolki rozszerzenie
FirstDayOfWeek="Monday"
Poniej napisu
ID="nastepnaTextBox"
TextBoxWatermarkExtender
poda dat nastpnej wycieczki
watermarked
Dodaj do kontrolki rozszerzenie
FirstDayOfWeek
Zapisz
Ankiety

Strona 14-9
Otwrz stron Ankieta.aspx.
Wybierz kontrolk TextBox o ID="imieTextBox
Smart Tag. Wybierz Add Extender.
W oknie Extender Wizard wybierz TextBoxWatermarkExtender
OK.
NazwaProduktuTextBox_TextBoxWatermarkExtender
WatermarkText wpisz Podaj imi, a w polu WatermarkCssClass
watermarked.
Podobnie postpuj ze wszystkimi kontrolkami TextBox
Wybierz kontrolk TextBox o ID="telTextBox"
SmartTag. Wybierz Add Extender.
W oknie Extender Wizard wybierz FilteredTextBoxExtender
telTextBox_FilteredTextBoxExtender. W polu
rozwijanej wybierz Numbers.
Podobnie postpuj ze kontrolkami TextBox
mieszTextBox, wzrostTextBox, odTextBox
liczbaKmTextBox.
Wybierz kontrolk TextBox o ID="kodTextBox
Smart Tag. Wybierz Add Extender.
W oknie Extender Wizard wybierz FilteredTextBoxExtender
kodTextBox_FilteredTextBoxExtender:
w polu FilterType do listy rozwijanej wpisz Custom, Numbers
w polu ValidChars wpisz - (mylnik).
Zapisz stron. Uruchom j w przegldarce i z menu strony wybierz
Ankiety -> Szukam towarzystwa na wycieczki
Ankiety -> Szukam roweru i przetestuj dziaanie dodanych rozszerze.
Usu kontrolki Calendar ze strony. Poniej napisu
dodaj kontrolk TextBox. Okrel jej ID="ostatniaTextBox
rozszerzenie TextBoxWatermarkExtender i w polu
wpisz Kliknij, aby poda dat ostatniej wycieczki
WatermarkCssClass wpisz watermarked.
Dodaj do kontrolki rozszerzenie CalendarExtender
FirstDayOfWeek="Monday".
Poniej napisu Nastpna wycieczka dodaj kontrolk
ID="nastepnaTextBox". Dodaj rozszerzenie
TextBoxWatermarkExtender i w polu WatermarkText
poda dat nastpnej wycieczki, a w polu WatermarkCssClass
watermarked.
Dodaj do kontrolki rozszerzenie CalendarExtender
FirstDayOfWeek="Monday".
Zapisz stron. Uruchom w przegldarce i z menu strony wybierz
Ankiety -> Szukam towarzystwa na wycieczki.
W jakim jzyku wywietlana jest kontrolka kalendarza prezentowana
po klikniciu kontrolek ostatniaTextBox lub nastepnaTextBox

Modu 14
imieTextBox", a nastpnie kliknij
TextBoxWatermarkExtender i kliknij
Extenders i rozwi
TextBoxWatermarkExtender. W polu
WatermarkCssClass wpisz
TextBox na stronie.
", a nastpnie kliknij
FilteredTextBoxExtender i kliknij OK.
Extenders i rozwi
. W polu FilterType z listy
o ID: domTextBox,
odTextBox, doTextBox,
kodTextBox", a nastpnie kliknij
FilteredTextBoxExtender i kliknij OK.
Extenders i rozwi
Custom, Numbers
darce i z menu strony wybierz
Szukam towarzystwa na wycieczki, a nastpnie
i przetestuj dziaanie dodanych rozszerze.
ze strony. Poniej napisu Ostatnia wycieczka
ostatniaTextBox". Dodaj
i w polu WatermarkText
Kliknij, aby poda dat ostatniej wycieczki, a w polu
CalendarExtender. Okrel waciwo
dodaj kontrolk TextBox. Okrel jej
. Dodaj rozszerzenie
WatermarkText wpisz Kliknij, aby
WatermarkCssClass wpisz
CalendarExtender. Okrel waciwo
stron. Uruchom w przegldarce i z menu strony wybierz
nastepnaTextBox?
Piotr Bubacz
6. Zmiana
wywietlania
jzyka w
rozszerzeniu
CalendarExtender
W pliku
do niej nastpujce
EnableScriptGlobalization="true"
Ankiety
Jeli ko
przegldarce
Kliknij przycisk
przycisk
przycisku
grze listy. Wcinij
Ankiety

Strona 14-10
W pliku SzablonStrony.master znajd kontrolk
do niej nastpujce atrybuty:
nableScriptGlobalization="true"
po klikniciu kontrolek ostatniaTextBox lub nastepnaTextBox
Jeli kontrolka jest nadal wywietlana w jzyku angielskim, to w
przegldarce Internet Explorer wybierz Tools
Kliknij przycisk Languages. Jeli na licie nie ma jzyka polskiego
przycisk Add i wybierz Polish (Poland) [pl-PL]. Wcinij
przycisku Move up przesu wpis Polish (Poland) [pl
grze listy. Wcinij OK. Wcinij OK.
Modu 14
r znajd kontrolk ScriptManager. Dodaj
nastepnaTextBox?
ntrolka jest nadal wywietlana w jzyku angielskim, to w
Tools -> Internet Options.
. Jeli na licie nie ma jzyka polskiego, kliknij
. Wcinij OK. Za pomoc
Polish (Poland) [pl-PL] tak, aby by na

ITA 103 AplikacjeInternetowe

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ITA 103 AplikacjeInternetowe

Uploaded by

Copyright:

Available Formats

Piotr Bubacz

Na dole strony dodaj kontrolk

Poniej dodaj kontrolk

Wstaw obok kontrolki

W kolejnym oknie wybierz

Problem 2 (czas realizacji 20 min)

Zapisz stron. Uruchom

You might also like