Technologie ASP.

NET
i ADO.NET w Visual
Web Developer
Autor: Jacek Matulewski, Sawomir Orowski
ISBN: 978-83-246-0738-9
Format: B5, stron: 296
Firma bez wasnej witryn internetowych to obecnie rzadko, a wiele aplikacji
sieciowych korzysta z baz danych. Za porednictwem stron internetowych klienci mog
na przykad zamawia usugi i kupowa produkty oraz przeglda katalogi z ofert
sklepu, a firmy mog midzy innymi zarzdza magazynem czy danymi klientw.
Technologia ASP.NET umoliwia byskawiczne tworzenie rozbudowanych
i nowoczesnych witryn internetowych, a dziki ADO.NET mona szybko doda do nich
obsug baz danych. Bezpatne rodowisko Visual Web Developer Express pozwala
kademu przekona si o ogromnych moliwociach tych narzdzi.
Ksika Technologie ASP.NET i ADO.NET w Visual Web Developer zawiera
wszechstronny opis technik i narzdzi do tworzenia zaawansowanych 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.
Przykadowe studia przypadku pokazuj, jak zastosowa omawiane technologie
w praktyce, a w czci powiconej AJAX-owi zobaczysz, jak przyspieszy dziaanie
swych witryn.
Wprowadzenie do rodowiska Visual Web Developer
Korzystanie z jzykw C# i XML w projektach ASP.NET
Zapewnianie spjnego stylu za pomoc wzorcw stron
Zarzdzanie sesjami i plikami cookie
Korzystanie z ADO.NET do obsugi baz SQL Server 2005, Access i XML
Tworzenie i uywanie usug sieciowych
Budowanie kompletnych rozwiza sieciowych
Przyspieszanie witryn za pomoc AJAX-a
Dodawanie do witryny kontrolek AJAX-a

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Wyprbuj ASP.NET wraz z ADO.NET i przekonaj si, e tworzenie rozbudowanych witryn

internetowych z obsug baz danych nie musi by trudne.

Spis treci
Wstp, w ktrym namwimy Czytelnika na rendez-vous z ASP.NET ....... 7

Cz I

ASP.NET i ADO.NET ........................................................ 9

Rozdzia 1. ASP.NET i Visual Web Developer. Szybki start ................................. 11

Tworzenie projektu pierwszej strony ASP.NET ....................................................... 12
Projektowanie interfejsu strony ................................................................................. 13
Edycja kodu w pliku .aspx ........................................................................................ 16
Programowanie silnika strony ASP.NET .................................................................. 17
Walidacja danych ...................................................................................................... 19

Rozdzia 2. Wiea Babel, czyli jzyki wykorzystywane w projektach ASP.NET ....... 23

Jzyk C# .......................................................................................................................... 24
Podstawowe typy danych .......................................................................................... 24
Sterowanie przepywem ............................................................................................ 31
Zwracanie wartoci przez argument metody ............................................................. 34
Wyjtki ...................................................................................................................... 36
Kolekcje .................................................................................................................... 37
Jzyk XML ...................................................................................................................... 44
Podstawy jzyka XML .............................................................................................. 44
Zapis danych do pliku XML ..................................................................................... 46
Odczyt danych z pliku XML o znanej strukturze ..................................................... 48
Analiza i odczyt pliku XML o nieznanej strukturze ................................................. 49

Rozdzia 3. Nowoczesna i funkcjonalna strona ASP.NET ...................................... 53

Rozmieszczenie kontrolek na stronie .............................................................................. 53
Pozycjonowanie elementw serwisu za pomoc tabeli ............................................... 56
Pozycjonowanie bezwzgldne ................................................................................... 63
Witryna wielojzyczna .................................................................................................... 66
Zasoby lokalne .......................................................................................................... 67
Zasoby globalne ........................................................................................................ 73
Samodzielne wybieranie wersji jzykowej ............................................................... 76
Komponent MultiView ............................................................................................. 79
Wywietlanie banerw reklamowych ....................................................................... 82
Buforowanie zwracanych stron ....................................................................................... 83

Technologie ASP.NET i ADO.NET w Visual Web Developer

Rozdzia 4. Mechanizmy spajajce witryn ASP.NET ......................................... 87

Wzorzec strony (master page) ......................................................................................... 87
Przygotowywanie projektu ........................................................................................ 87
Definiowanie wzorca ................................................................................................. 88
Strona korzystajca ze wzorca .................................................................................. 90
Site map i komponent SiteMapPath ................................................................................ 90
Menu strony ............................................................................................................... 92
Drzewo pokazujce struktur stron w witrynie ......................................................... 94
Dwa sowa na temat kaskadowych arkuszy stylw ......................................................... 95
Tworzenie arkuszy stylw ......................................................................................... 95
Stosowanie arkuszy stylw ....................................................................................... 97
Czas ycia sesji i aplikacji ASP.NET .............................................................................. 98
Sesja i dane sesji ........................................................................................................ 99
Pliki cookie .............................................................................................................. 101
Dane aplikacji .......................................................................................................... 102

Rozdzia 5. Wsppraca ASP.NET i ADO.NET. SQL Server 2005 i Access .......... 105
Moc ADO.NET ....................................................................................................... 105
Tworzenie projektu i projektowanie strony gwnej ............................................... 106
SQL Server 2005 ........................................................................................................... 107
Tworzymy baz danych na serwerze SQL Server 2005 ............................................ 107
Tworzymy poczenie z baz danych SQL Server .................................................. 109
Tworzymy tabel w bazie danych ........................................................................... 109
Konfigurujemy kontrolk reprezentujc tabel w aplikacji .................................. 111
Microsoft Access ........................................................................................................... 111
Tworzenie bazy danych Access .............................................................................. 113
Doczanie pliku bazy Access do projektu ............................................................. 114
Konfigurujemy kontrolk reprezentujc tabel w aplikacji .................................. 115
Bardzo krtki wstp do jzyka SQL .............................................................................. 115
Modyfikacje danych z poziomu aplikacji ASP.NET ..................................................... 117
Dodawanie adresu e-mail do listy ........................................................................... 117
Walidacja danych .................................................................................................... 120
Usuwanie adresu z listy ........................................................................................... 121
Podgld listy adresw w siatce ................................................................................ 122

Rozdzia 6. Wsppraca ASP.NET i ADO.NET. Bazy danych XML ....................... 125

Projekt ............................................................................................................................ 126
Plik XML ....................................................................................................................... 126
Konfiguracja obiektu typu XmlDataSource .................................................................. 127
Edycja pliku XML za pomoc klasy XmlDocument ..................................................... 127
Walidacja danych formularza ........................................................................................ 129
Zabezpieczenie przed podwjnym dodaniem ................................................................ 129
Usuwanie elementu ........................................................................................................ 130
Prezentacja tabeli w siatce ............................................................................................. 131

Rozdzia 7. Udostpnianie witryny w sieci ....................................................... 133

Dostawca usug .............................................................................................................. 133
Przenoszenie witryny na serwer .................................................................................... 134

Rozdzia 8. Wzorce projektowe ASP.NET ........................................................ 139

Ping ................................................................................................................................ 139
Ksiga goci ................................................................................................................... 141
Prezentowanie danych umieszczonych w pliku XML .................................................. 144
Walidacja wpisywanych danych ................................................................................... 146
Formularz wysyajcy wiadomoci e-mail ......................................................................... 149
Wiadomo z zacznikami. Kontrolka FileUpload ...................................................... 151

Spis treci

5
Identyfikacja i autoryzacja uytkownikw .................................................................... 154
Formularz rejestrujcy nowych uytkownikw ...................................................... 159
Kontrolka LoginView ............................................................................................. 160

Rozdzia 9. Usugi sieciowe ............................................................................ 163

Pierwsza usuga sieciowa .............................................................................................. 164
Uycie usugi sieciowej ................................................................................................. 167

Cz II

Studia przypadkw ..................................................... 171

Rozdzia 10. Studium przypadku: konferencja ................................................... 173

Cz statyczna witryny (pliki .aspx) ............................................................................ 174
Szablon .................................................................................................................... 174
Strona gwna .......................................................................................................... 175
Formularz ................................................................................................................ 175
Walidacja danych w formularzu ............................................................................. 177
Pozostae strony formularza .................................................................................... 178
Dynamika witryny (pliki .cs) ......................................................................................... 182
Struktury danych ..................................................................................................... 182
Przechowywanie danych sesji ................................................................................. 183
Powrt do edycji danych ......................................................................................... 185
Zabezpieczenie przed jawnym wybraniem strony formularza w przegldarce ......... 187
Zapis do bazy danych .............................................................................................. 188
Szkodliwy znak apostrofu (') ................................................................................... 191
Wysanie listu z potwierdzeniem zgoszenia .......................................................... 193
Czyszczenie danych ................................................................................................ 194
Obsuga bdw ....................................................................................................... 195
Dynamiczna lista zgoszonych wykadw .............................................................. 197
Logowanie i edycja wczeniej zgoszonych danych ............................................... 197
Wysyanie listu z zapomnianym hasem ................................................................. 203
Uwierzytelnianie z uyciem mechanizmu Forms ................................................... 203
Estetyka witryny (pliki .css) .......................................................................................... 209
Tworzenie tematu .................................................................................................... 209
Formatowanie elementw HTML ........................................................................... 210
Formatowanie poszczeglnych obiektw ............................................................... 212
Klasy stylw ............................................................................................................ 214
Plik skrek ........................................................................................................... 215
Moliwe drogi rozwoju witryny .................................................................................... 216
Przeniesienie witryny na serwer IIS .............................................................................. 217

Rozdzia 11. Sklep internetowy ........................................................................ 219

Szablon strony ............................................................................................................... 219
Baza danych ................................................................................................................... 221
Strona gwna ................................................................................................................ 224
Koszyk ........................................................................................................................... 227
Rejestracja uytkownikw ............................................................................................. 232
Zamawianie ................................................................................................................... 234

Cz III Podstawy AJAX dla ASP.NET ...................................... 241

Rozdzia 12. Czciowa aktualizacja strony ...................................................... 243
Kontrolka UpdateProgress ............................................................................................. 243
Wyzwalanie czciowej aktualizacji przez komponent spoza UpdatePanel ................. 245
Sygnalizowanie czciowej aktualizacji ........................................................................ 246

Technologie ASP.NET i ADO.NET w Visual Web Developer

Cykliczne wyzwalanie aktualizacji ............................................................................... 247
Aktualizacja warunkowa ............................................................................................... 248

Rozdzia 13. Migracja aplikacji ASP.NET do AJAX ASP.NET ................................ 249

Rozdzia 14. AJAX Control Toolkit .................................................................... 253
Przegld ACT ................................................................................................................ 253
Uywanie kontrolek ACT we wasnych projektach ...................................................... 255
Instalacja kontrolek ACT w rodowisku VWD ...................................................... 255
Uycie rozszerzenia ConfirmButtonExtender ......................................................... 256
Jak oni to zrobili? .................................................................................................... 257
Suwaki ..................................................................................................................... 258
Reklama ................................................................................................................... 260
Akordeon ................................................................................................................. 260

Cz IV Dodatki ...................................................................... 265

Dodatek A Instalacja i konfigurowanie serwera IIS w systemie Windows ......... 267
Instalacja IIS i uruchamianie jego usug ......................................................................... 267
Rejestrowanie ASP.NET 2.0 w IIS ............................................................................... 270

Dodatek B Instalacja protokou SSL dla serwera IIS ....................................... 273

Dodatek C Uruchamianie projektw ASP.NET 2.0 w platformie Mono .............. 277
Dodatek D Dodatkowe projekty ..................................................................... 283
Skorowidz .................................................................................... 285

Rozdzia 4.

Mechanizmy spajajce
witryn ASP.NET
Jacek Matulewski

Wzorzec strony (master page)

W przypadku witryny zawierajcej kilka stron warto posuy si wzorcem. Wzorzec
(ang. master page) to zwyka strona ASP.NET zapisana do pliku z rozszerzeniem
.master. Wyrnia j jednak to, e zawiera komponenty ContentPlaceHolder, ktre rezerwuj miejsce do wypenienia przez strony korzystajce ze wzorca. Poza tym wzorzec moe zawiera zwyke elementy HTML, jak i komponenty ASP.NET.
Wzorzec suy jako szablon pozostaych stron projektu. Tworzc nowe strony projektu, moemy wskaza ich wzorzec, a wwczas w widoku projektowania, zamiast
edytowa ca stron, bdziemy edytowa jedynie te miejsca, ktre we wzorcu zostay
zarezerwowane komponentami ContentPlaceHolder.
W najprostszym przypadku mona posuy si wzorcem do ujednolicenia nagwkw
i stopek wszystkich stron witryny wwczas wzorzec zawiera tylko jeden komponent
ContentPlaceHolder. I wanie na takim przykadzie nauczymy si teraz tworzenia
wzorcw i korzystania z nich.

Przygotowywanie projektu
Nie mona, a przynajmniej nie jest to proste, przypisa strony master od istniejcej
witryny ASP.NET. Dlatego utworzymy zupenie nowy projekt Czytelnik odpocznie
wreszcie od Kolorw w ktrym pierwsz czynnoci bdzie usunicie domylnie utworzonej strony Default.aspx.

Cz I ASP.NET i ADO.NET

88
1. Tworzymy nowy projekt:
a) z menu File wybieramy New Web Site,
b) zaznaczamy pozycj ASP.NET Web Site,

c) w rozwijanej licie Location wybieramy File System (warto domylna),

d) a w rozwijanej licie Language Visual C#,
e) klikamy OK.
2. Z projektu usuwamy stron Default.aspx:
a) zaznaczamy j w oknie projektu (podokno o nazwie Solution Explorer),
b) rozwijamy menu kontekstowe
c) i wybieramy z niego polecenie Delete;
d) pojawi si pytanie o potwierdzenie, w ktrym naley klikn przycisk OK.

To usunie plik strony nie tylko z projektu, ale take z dysku. W tym miejscu umiecimy now wersj strony o nazwie Default.aspx, ale korzystajc ze wzorca. Wczeniej musimy oczywicie przygotowa wzorzec. Nie bdziemy w tym zbyt wymylni
zdefiniujemy prosty nagwek oraz stopk strony i zadowolimy si jednym komponentem ContentPlaceHolder.
Nie naley myli usuwania pliku (take z dysku), a wic polecenia Delete, z usuwaniem pliku z projektu, tj. z poleceniem Exclude From Project.

Definiowanie wzorca
1. W oknie projektu zaznaczamy gwn ga reprezentujc projekt caej

witryny (a nie katalog App_Data).

2. Z menu File wybieramy New File.
3. W oknie Add New Item (rysunek 4.1) zaznaczamy pozycj Master Page.
4. Klikamy Add. Do projektu dodany zostanie nowy plik MasterPage.master.

W edytorze zobaczymy jego kod.

5. Przejdmy od razu do widoku projektowania nowej strony (zakadka Design
w dole okna). Zobaczymy na niej tylko jeden komponent klasy ContentPlaceHolder

to jest miejsce, ktre bdzie zapeniane przez strony korzystajce z naszego

wzorca. Jeeli chcemy doda ich wicej, to komponent ten znajdziemy
na zakadce Standard.
6. Umiemy powyej i poniej tego komponentu jaki tekst penicy rol

nagwka i stopki stron naszej witryny. Przykad widoczny jest

na rysunku 4.2.

Rozdzia 4. Mechanizmy spajajce witryn ASP.NET

89

Rysunek 4.1. Polecenie dodawania pliku jest czue na zaznaczon pozycj w oknie projektu aby
zobaczy wszystkie moliwe rodzaje plikw, naley zaznaczy pozycj odpowiadajc caemu projektowi

Rysunek 4.2. Osadzanie komponentu ContentPlaceHolder we wzorcu witryny

Cz I ASP.NET i ADO.NET

90

Strona korzystajca ze wzorca

Nasz wzorzec jest prosty, eby nie powiedzie prymitywny, ale nie o estetyk teraz chodzi, a o ide. Stworzymy zatem przykadowe strony, ktre bd z tego wzorca korzysta.
1. Z menu File wybieramy ponownie pozycj New File.
2. Tym razem zaznaczamy ikon Web Form.
3. Koniecznie musimy zaznaczy pole opcji Select master page. Tylko w momencie

tworzenia strony mona wskaza jej wzorzec.

4. Zalecam rwnie zaznaczenie opcji Place code in separate file, dziki ktrej

ewentualne metody zdarzeniowe bd umieszczone w osobnym pliku.

5. Musimy wskaza jeszcze nazw pliku strony domylnie jest to Default.aspx

oraz jzyk uyty do programowania metod zdarzeniowych. Jak ju si pewnie

Czytelnik zorientowa, w tej ksice zalecamy uywanie C#.
6. Wreszcie klikamy Add.
7. Natychmiast pojawi si okno Select a Master Page. Wskazujemy w nim stron

MasterPage.master i klikamy OK.

Po utworzeniu strony znajdziemy si w edytorze kodu. Przejdmy niezwocznie do widoku projektowania. Zobaczymy w nim stron wzorca, ale poza obszarem wyznaczonym
przez komponent ContentPlaceHolder jest ona niedostpna do edycji (rysunek 4.3).
Miejscem, w ktrym moemy umieszcza nasze komponenty, jest wycznie miejsce
zarezerwowane wczeniej we wzorcu.
Wypenijmy miejsce przeznaczone na stron jak przykadow zawartoci. Umiemy
w nim np. komponent HyperLink. Za pomoc okna Properties do jego waciwoci
ImageUrl przypiszmy adres http://helion.pl//img/logo162_35.gif, natomiast do waciwoci NavigateUrl adres http://helion.pl. Na podgldzie powinnimy zobaczy natychmiast logo Wydawnictwa Helion (por. rysunek 4.3). Moemy stworzy teraz kolejne
strony korzystajce z tego samego wzorca, ktry ujednolici ich wygld. Wzorzec poprawia zatem spjno caej witryny. Nie do przecenienia jest fakt, e stopk i nagwek wszystkich stron witryny kontrolujemy z jednego pliku, zatem jeeli chcemy co
do nich doda lub je zmieni, wystarczy edytowa tylko plik wzorca.

Site map i komponent SiteMapPath

Pozostamy przy tym samym projekcie, a nawet dorzumy do niego jeszcze kilka stron.
Jeeli witryna ma wicej stron (mowa o kilkunastu, kilkudziesiciu), warto pomyle
o site map mapie witryny. W ASP.NET przygotowanie takiej mapy polega na
utworzeniu pliku XML o nazwie Web.sitemap, w ktrym znajduje si zhierarchizowana
grupa elementw siteMapNode. W atrybutach kadego z nich wskazujemy adres strony
z witryny, jej tytu i ewentualnie opis. Struktura znacznikw ma odzwierciedla logiczn struktur strony, wskazujc strony nadrzdne i ich podstrony. Ilo stopni hierarchii jest w zasadzie dowolna.

Rozdzia 4. Mechanizmy spajajce witryn ASP.NET

91

Rysunek 4.3. Edycja stron korzystajcych ze wzorca ogranicza si do obszarw wyznaczonych na

wzorcu przez komponent ContentPlaceHolder

W naszym projekcie jest tylko kilka stron (zamy, e trzy: Default.aspx, Default2.
aspx i Default3.aspx), ale i my zdefiniujemy plik Web.sitemap. Przyjmijmy, e Default.
aspx jest stron tytuow jakiego dziau witryny o nazwie cza do wanych stron,
a Default2.aspx i Default3.aspx s zwykymi stronami tego dziau. Z menu File wybieramy pozycj New File i w oknie Add New Item wskazujemy pozycj Site Map.
Powstanie plik Web.sitemap. Uzupeniamy go wedug wzoru z listingu 4.1.
Listing 4.1. Plik Web.sitemap to plik XML opisujcy logiczn struktur witryny ASP.NET na potrzeby
komponentw nawigacyjnych
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="Nazwa witryny" description="Opis witryny">
<siteMapNode url="Default.aspx" title="Linki do stron" description="Linki do
stron zwizanych z projektem" />
<siteMapNode url="Default2.aspx" title="Link do ASP.NET" description="Linki
do oficjalnej strony ASP.NET" />
<siteMapNode url="Default3.aspx" title="Link do MSDN" description="Link do
strony dokumentacji MSDN2" />
</siteMapNode>
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>

Cz I ASP.NET i ADO.NET

92

W elemencie siteMap moe by tylko jeden element siteMapNode, wic ewentualn

rozbudow powyszej struktury naley zacz od trzeciego poziomu zagniedenia
elementw XML.

Plik Web.sitemap moe by rdem danych dla komponentw umieszczanych na stronach, ktre pozwala bd internaucie na zorientowanie si w pozycji ogldanej strony
w strukturze caej witryny i szybkie przejcie do innych jej stron. Na pocztek przyjrzyjmy si komponentowi SiteMapPath.
1. Przejdmy do widoku projektowania wzorca MasterPage.master.
2. Umiemy na nim komponent SiteMapPath z zakadki Navigation. Komponent

ten pokazuje ciek aktualnej strony w strukturze zdefiniowanej w pliku

Web.sitemap (rysunek 4.4).
Rysunek 4.4.
Do dziaania
komponentu
SiteMapPath
konieczna jest
obecno pliku
Web.sitemap.
Zdefiniowane w nim
opisy pojawiaj si
w okienkach
podpowiedzi

3. Zwrmy uwag na may trjkcik widoczny po prawej stronie grnej krawdzi

nowego komponentu, jeeli ten jest zaznaczony. Jeeli go klikniemy, pojawi

si lista typowych zada dotyczcych tego komponentu (rysunek 4.5). W tym
przypadku skada si ona z dwch pozycji Auto Format oraz Edit Templates.
Pierwsze polecenie suy do niemal automatycznego konfigurowania wygldu
komponentu. Wybierzmy np. szablon Colorful.

Menu strony
Innym zastosowaniem mapy witryny jest automatycznie tworzone menu i drzewo zawierajce strony uwzgldnione w tym pliku. Zacznijmy od menu. Dodamy je do wzorca
tym razem ponad komponentem rezerwujcym miejsce dla stron.
1. Przechodzimy do widoku projektowania wzorca MasterPage.master.
2. Ponad komponentem ContentPlaceHolder umieszczamy komponent Menu

z zakadki Navigation.

Rozdzia 4. Mechanizmy spajajce witryn ASP.NET

Rysunek 4.5. Podrczna lista zada to zbir najczciej wykorzystywanych kreatorw zwizanych
z komponentem
3. W licie podrcznej z rozwijanej listy Choose Data Source wybieramy

<New data source>.

4. Pojawi si kreator Data Source Configuration Wizard pozwalajcy na wybr

rda danych, na podstawie ktrych utworzone zostanie menu. Moe ono

zosta zbudowane w oparciu o dowolny plik XML lub nasz gotowy plik
Web.sitemap. Wybieramy oczywicie t drug moliwo, zaznaczajc ikon
Site Map. Klikamy OK. Utworzony zostanie komponent SiteMapDataSource1.
5. Nam pozostaje tylko sformatowa wygld menu. Proponuj rwnie tym razem

wybra szablon Colorful (rysunek 4.6).

Rysunek 4.6.
Uycie tego samego
stylu do formatowania
menu i cieki
pokazujcej pozycj
w strukturze witryny
to zalek estetycznego
i spjnego wizerunku
wszystkich stron
witryny

93

Cz I ASP.NET i ADO.NET

94

Drzewo pokazujce struktur stron w witrynie

Na zakadce Navigation jest jeszcze jeden komponent, na ktry te warto zwrci uwag.
Jest to drzewo TreeView, ktre prezentuje struktur witryny. Nadaje si bardziej na
osobn stron ni do umieszczenia w nagwku lub stopce stron.
1. Z menu File wybieramy New File.
2. W oknie Add New Item zaznaczamy Web Form, wybierajc opcj Select

master page, i zmieniamy nazw pliku na MapaWitryny.aspx.

3. Klikamy Add. W nowym oknie wybieramy wzorzec i klikamy OK.
4. Przechodzimy do widoku projektowania nowej strony.
5. Na dostpnym obszarze umieszczamy komponent TreeView z zakadki

Navigation.
6. Postpujc identycznie jak w przypadku menu, tworzymy rdo danych

korzystajce z mapy witryny (niestety, nie mona uy gotowego komponentu

SiteMapDataSource1 widocznego w obszarze wzorca).
7. Formatujemy drzewo, wybierajc z podrcznej listy zada pozycj

Auto Format. Proponuj uycie stylu Arrows 2 (rysunek 4.7).

Rysunek 4.7.
Automatycznie
generowana
mapa witryny

8. Now stron warto dopisa do mapy witryny, tworzc wze rwnorzdny

do Default.aspx (por. rda doczone do ksiki).

Poza zwyk nawigacj, jak umoliwia komponent TreeView, mona definiowa metody zdarzeniowe zwizane z klikniciem rnych pozycji drzewa (zdarzenie SelectedNodeChanged).

Rozdzia 4. Mechanizmy spajajce witryn ASP.NET

95

Dwa sowa na temat

kaskadowych arkuszy stylw
Wiemy ju, e w projektach ASP.NET moemy w znacznym stopniu, w zasadzie nawet cakowicie, odseparowa kod C# od szablonu HTML strony. W ten sposb oddzielony zostaje kod odpowiedzialny za statyczny wygld stron witryny od metod
okrelajcych ich dynamik. Do tych dwch etapw projektowania dochodzi trzeci,
w ktrym za pomoc kaskadowych arkuszy stylw okrelamy estetyczny aspekt witryny. Podobnie jak w przypadku kodu C#, take arkusze stylu mog by cakowicie
odseparowane w plikach .css, a przez to ich rozwj, podobnie jak kodu C#, moe by
z atwoci powierzony innym osobom ni rozwj kodu z plikw .aspx.
W kilku poniszych przykadach przedstawi podstawowe narzdzia suce do budowania kaskadowych arkuszy stylw. Nieco dodatkowych przykadw znajdzie Czytelnik take w rozdziale 10.

Tworzenie arkuszy stylw

Kaskadowe arkusze stylw (ang. cascade style sheet) to kolejne obok wzorca narzdzie
ujednolicenia stron witryny, a jednoczenie zcentralizowania kontroli nad ich wygldem.
I w tym przypadku wsparcie ze strony VWD jest godne pochway.
1. Z menu File wybieramy New File.
2. W oknie Add New Item zaznaczamy pozycj Style Sheet, jeeli odczuwamy

tak potrzeb, zmieniamy nazw pliku i klikamy OK.

W edytorze zobaczymy niemal pusty plik, ktry zawiera jedynie tekst:
body {
}

To zalek stylu zwizanego ze zwykym tekstem umieszczonym na stronie (tekst

midzy znacznikami BODY w kodzie HTML). Na szczcie nie musimy zna si na
formacie arkuszy stylw, bo VWD zawiera proste narzdzie pozwalajce na ich definiowanie. Zacznijmy od rozbudowania reguy formatowania dotyczcej prostego
tekstu.
1. W edytorze ustawiamy kursor (edycji, nie myszy) midzy nawiasami istniejcej

reguy stylu.
2. Klikamy na pasku narzdzi przycisk Build Style.
3. W oknie Style Builder (rysunek 4.8) moemy wybra format i kolor czcionki,

ta, list i innych elementw umieszczonych na stronie. My ograniczymy si

do sformatowania czcionki, dlatego klikamy pozycj Font na licie zakadek
widocznej z lewej strony okna.

Cz I ASP.NET i ADO.NET

96

Rysunek 4.8. Definiowanie reguy stylu dla znacznika body

4. W czci zatytuowanej Font attributes klikamy przycisk z trzema kropkami

pozwalajcy na swobodny wybr koloru:

a) na zakadce Named Colors odnajdujemy kolor Peru (jeden z brzowych),

ktry bdzie dobrze wspgra ze stylem formatowania wybranym w menu

i innych komponentach nawigacyjnych;
b) odznaczamy pole opcji Use color names, aby uy okrelenia koloru poprzez

skadowe zamiast nazwy1, i klikamy OK, aby zamkn kreator stylu.

5. Nastpnie korzystajc z ikony Add Style Rule na pasku narzdzi, tworzony

nowy styl dla znacznika A (tj. dla umieszczonych na stronie czy):
a) tym razem wybierzmy kolor SaddleBrown (pamitajmy o wyczeniu opcji

Use color names);

b) w oknie Build Style w czci Effects zaznaczamy pole None.
6. Po tym zdefiniujmy jeszcze jedn regu formatowania dla A:hover (cze

po najechaniu na niego kursorem), w ktrym kolor ustalamy na Orange,

a w czci Effects (por. rysunek 4.8) wczamy opcj Underline.
Po tych czynnociach plik kaskadowego arkusza stylw (plik z rozszerzeniem .css)
powinien wyglda jak na listingu 4.2:

Bardziej egzotyczne nazwy kolorw mog by niezrozumiae dla starszych przegldarek.

Rozdzia 4. Mechanizmy spajajce witryn ASP.NET

97

Listing 4.2. Zawarto pliku kaskadowych arkuszy stylw

body
{
color: #cd853f;
}
A
{
color: #8b4513;
text-decoration: none;
}
A:hover
{
color: #ffa500;
text-decoration: underline;
}

Stosowanie arkuszy stylw

Czas, aby arkusz wykorzysta do formatowania stron naszej przykadowej witryny:
1. Przejdmy na stron Default.aspx.
2. W widoku projektowania dodajmy do niej prosty tekst (wpisujc go w widoku
projektowania w polu Content) oraz komponent HyperLink ze skonfigurowan
waciwoci NavigateUrl i etykiet (waciwo Text).
3. Teraz przejdmy do widoku projektowania pliku wzorca MastepPage.master.
4. Przecignijmy z okna projektu (Solution Explorer) utworzony plik .css. Do kodu
strony dodany zostanie element <link href="StyleSheet.css" rel="stylesheet"
type="text/css" />, dziki ktremu wzorzec i wszystkie uywajce go strony

bd korzystay z arkusza i zdefiniowanych w nim stylw.

W podgldzie wzorca i podgldzie stron, ktre z niego korzystaj, zobaczymy zmian
tekst zmieni kolor na brzowy, cza na jasnobrzowy. Ponadto cza pozbawione
zostay podkrelenia. Jeeli obejrzymy stron w przegldarce, to zobaczymy, e kolor
czy zmienia si na pomaraczowy, jeeli najecha na nie mysz, oraz e pojawia si
wwczas pod nimi podkrelenie.
Jeeli witryna nie ma wzorca, arkusz naley doda do kadej strony osobno. To samo
dotyczy stron w naszej witrynie, ktre nie korzystaj ze wzorca.

Mona rwnie edytowa indywidualny styl poszczeglnych komponentw na stronach. W ich menu kontekstowym znajduje si pozycja Style, ktra uruchamia okno
Style Builder z rysunku 4.8 lub, jeeli chcemy uy istniejcych klas stylu, w oknie
Properties odnajdujemy waciwo CssClass i tam wpisujemy nazw klasy zdefiniowanej w arkuszu stylu. Klasy mona definiowa w pliku .css, dodajc regu i zaznaczajc opcj Class name (zob. rozdzia 10.).