Vous êtes sur la page 1sur 47

ASP.NET 2.0.

Tworzenie witryn
internetowych z wykorzystaniem
C# i Visual Basica
Autor: Cristian Darie, Zak Ruvalcaba
Tumaczenie: Ireneusz Jakbik, Maciej Jezierski
ISBN: 978-83-246-0999-4
Tytu oryginau: Build Your Own ASP.NET 2.0
Web Site Using C# & VB
Format: B5, stron: okoo 608
Przykady na ftp: 1991 kB

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

Poznaj ASP.NET 2.0 i naucz si tworzy wydajne aplikacje internetowe!


Jak dostosowa rodowisko robocze do wasnych wymogw?
Kiedy stosowa C#, a kiedy Visual Basic?
W jaki sposb przyspieszy proces tworzenia aplikacji?
Czas statycznych witryn WWW dawno ju przemin. Dzi, aby przycign
odwiedzajcych, naley regularnie aktualizowa stron, zamieszczajc na niej aktualne
treci. Serwisy i aplikacje internetowe pobierajce artykuy z baz danych, atwe
do modyfikowania i zabezpieczone przed niepowoanym dostpem to teraniejszo
i przyszo sieci. ASP to wykorzystywana od duszego czasu technologia tworzenia
dynamicznych witryn WWW, ktra po zaprezentowaniu platformy .NET zyskaa zupenie
nowe oblicze. Tworzenie serwisw i aplikacji internetowych z wykorzystaniem
ASP.NET 2.0 przebiega byskawicznie. Moliwo uycia jzyka C# lub Visual Basic
oraz bezpatnych i atwych w konfiguracji narzdzi sprawiaj, e ASP.NET 2.0 zyskuje
coraz wiksz popularno.
Po lekturze ksiki ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem
C# i Visual Basica ta technologia przestanie mie przed Tob tajemnice. Czytajc j,
dowiesz si, jak zainstalowa i skonfigurowa narzdzia do pracy, podejmiesz decyzj
o wyborze jzyka programowania, ktrego uyjesz do tworzenia aplikacji sieciowych,
i poznasz ten jzyk. Nauczysz si korzysta z kontrolek .NET, budowa aplikacje, czy je
z bazami danych i implementowa mechanizmy uwierzytelniania uytkownikw. Przeczytasz
take o generowaniu przesyek e-mail z poziomu aplikacji oraz o operacjach na plikach.
Instalacja i konfiguracja serwera i narzdzi produkcyjnych
Podstawy ASP.NET
Programowanie w C# i Visual Basic
Tworzenie stron internetowych z wykorzystaniem kontrolek
Zastosowanie kaskadowych arkuszy stylw
Sprawdzanie poprawnoci danych wprowadzanych w formularzach
Projektowanie i tworzenie baz danych
Manipulowanie danymi za pomoc jzyka SQL
Korzystanie z technologii ADO.NET
Wywietlanie danych na stronie za pomoc kontrolek
Zabezpieczanie aplikacji
Platforma .NET to przyszo programowania. Ju dzi poznaj jej elementy

Spis treci
O autorach .................................................................................................................. 11
Przedmowa ................................................................................................................. 13
Rozdzia 1. Wprowadzenie do platformy ASP.NET i .NET ....................................................... 17
Czym jest ASP.NET? ..................................................................................................................17
Instalacja niezbdnego oprogramowania .....................................................................................20
Instalowanie serwera stron internetowych .............................................................................21
Instalacja .NET Framework oraz SDK ..................................................................................24
Konfiguracja serwera internetowego .....................................................................................25
Instalacja SQL Server Express Edition ..................................................................................34
Instalacja SQL Server Management Studio Express .............................................................35
Instalacja Visual Web Developer 2005 .................................................................................36
Twoja pierwsza strona ASP.NET ................................................................................................38
Uzyskiwanie pomocy ..................................................................................................................42
Podsumowanie .............................................................................................................................43

Rozdzia 2. Podstawy ASP.NET .................................................................................................... 45


Struktura strony ASP.NET ..........................................................................................................45
Dyrektywy .............................................................................................................................47
Bloki deklaracji kodu ............................................................................................................48
Bloki wykonywanego kodu ...................................................................................................50
Kontrolki serwera ASP.NET .................................................................................................51
Komentarze po stronie serwera .............................................................................................52
Tekst i znaczniki HTML .......................................................................................................53
Stan widoku .................................................................................................................................54
Korzystanie z dyrektyw ...............................................................................................................57
Jzyki ASP.NET ..........................................................................................................................58
Visual Basic ..........................................................................................................................58
C# ..........................................................................................................................................58
Podsumowanie .............................................................................................................................59

Rozdzia 3. Podstawy programowania w VB i C# ....................................................................... 61


Podstawy programowania ............................................................................................................61
Zdarzenia i procedury kontrolek ............................................................................................62
Zdarzenia strony ....................................................................................................................65
Zmienne i deklaracje zmiennych ...........................................................................................68
Tablice ...................................................................................................................................70
Funkcje ..................................................................................................................................73
Operatory ..............................................................................................................................75
Instrukcje sterujce ................................................................................................................77

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica


Ptle .......................................................................................................................................79
Koncepcje programowania zorientowanego obiektowo ..............................................................83
Obiekty i klasy ......................................................................................................................84
Waciwoci ..........................................................................................................................86
Metody ..................................................................................................................................87
Klasy .....................................................................................................................................87
Konstruktory .........................................................................................................................88
Zasig ....................................................................................................................................88
Zdarzenia ...............................................................................................................................89
Dziedziczenie ........................................................................................................................89
Obiekty w .NET ....................................................................................................................90
Przestrzenie nazw ..................................................................................................................91
Wykorzystanie plikw chowajcych kod ....................................................................................92
Podsumowanie .............................................................................................................................96

Rozdzia 4. Tworzenie stron internetowych ASP.NET ............................................................... 97


Formatki internetowe ...................................................................................................................98
Kontrolki HTML serwera ............................................................................................................99
Korzystanie z kontrolek HTML serwera .............................................................................100
Kontrolki internetowe serwera ...................................................................................................103
Standardowe kontrolki internetowe serwera ........................................................................105
Kontrolki List ......................................................................................................................111
Zaawansowane kontrolki .....................................................................................................113
Kontrolki internetowe uytkownika ..........................................................................................124
Tworzenie kontrolki internetowej uytkownika ..................................................................124
Strony wzorcowe .......................................................................................................................130
Korzystanie z kaskadowych arkuszy stylw (CSS) ...................................................................132
Typy stylw i arkuszy stylw ..............................................................................................133
Podsumowanie ...........................................................................................................................137

Rozdzia 5. Tworzenie aplikacji internetowych ......................................................................... 139


Wstp do projektu Dorknozzle ..................................................................................................140
Korzystanie z programu Visual Web Developer .......................................................................141
Funkcje programu ...............................................................................................................143
Uruchamianie projektu ..............................................................................................................150
Wykorzystanie serwera internetowego wbudowanego
w program Visual Web Developer ....................................................................................151
Uywanie IIS .......................................................................................................................153
Gwne funkcjonalnoci aplikacji internetowej .........................................................................158
Web.config ..........................................................................................................................159
Global.asax ..........................................................................................................................162
Korzystanie ze stanu aplikacji .............................................................................................164
Korzystanie z sesji uytkownika .........................................................................................170
Korzystanie z obiektu Cache ...............................................................................................172
Korzystanie z Cookie ..........................................................................................................173
Pocztek projektu Dorknozzle ...................................................................................................176
Przygotowanie mapy witryny ..............................................................................................176
Korzystanie z tematw, skrek i stylw ..............................................................................178
Tworzenie strony wzorcowej ..............................................................................................183
Korzystanie ze strony wzorcowej ........................................................................................186
Rozbudowywanie Dorknozzle ...................................................................................................188
Debugowanie i obsuga bdw .................................................................................................191
Debugowanie w programie Visual Web Developer ............................................................191
Inne rodzaje bdw ............................................................................................................196

Spis treci

7
Bdy uytkownika ..............................................................................................................197
Lokalna obsuga wyjtkw ..................................................................................................198
Podsumowanie ...........................................................................................................................202

Rozdzia 6. Korzystanie z kontrolek sprawdzajcych poprawno ......................................... 203


Wprowadzenie do kontrolek ASP.NET sprawdzajcych poprawno .......................................204
Wymuszanie sprawdzania poprawnoci po stronie serwera ................................................207
Korzystanie z kontrolek sprawdzajcych poprawno ...............................................................212
RequiredFieldValidator .......................................................................................................212
CompareValidator ...............................................................................................................213
RangeValidator ....................................................................................................................216
ValidationSummary ............................................................................................................216
RegularExpressionValidator ................................................................................................217
CustomValidator .................................................................................................................220
Grupowanie sprawdzania poprawnoci .....................................................................................223
Aktualizacja witryny Dorknozzle ..............................................................................................225
Podsumowanie ...........................................................................................................................229

Rozdzia 7. Projektowanie i tworzenie bazy danych ................................................................. 231


Czym jest baza danych? ............................................................................................................231
Tworzenie pierwszej bazy danych .............................................................................................233
Tworzenie nowej bazy danych za pomoc programu Visual Web Developer .....................234
Tworzenie nowej bazy danych za pomoc SQL Server Management Studio ......................235
Tworzenie tabel w bazie danych ................................................................................................236
Typy danych ........................................................................................................................240
Waciwoci kolumny .........................................................................................................241
Klucze gwne .....................................................................................................................242
Tworzenie tabeli Pracownicy ..............................................................................................244
Tworzenie pozostaych tabel ...............................................................................................247
Wypenianie tabel z danymi ................................................................................................248
Koncepcje projektowania relacyjnej bazy danych .....................................................................250
Klucze obce .........................................................................................................................252
Korzystanie z diagramw bazy danych ...............................................................................254
Implementacja relacji w bazie danych Dorknozzle .............................................................257
Diagramy i relacje pomidzy tabelami ................................................................................260
Podsumowanie ...........................................................................................................................263

Rozdzia 8. Jzyk SQL ................................................................................................................. 265


Odczyt danych z pojedynczej tabeli ..........................................................................................266
Korzystanie z instrukcji SELECT .......................................................................................268
Wybieranie okrelonych pl ................................................................................................270
Wybieranie unikalnych danych za pomoc DISTINCT ......................................................270
Filtrowanie wierszy za pomoc WHERE ............................................................................273
Wybieranie zakresu wartoci za pomoc BETWEEN .........................................................273
Wyszukiwanie wzorcw za pomoc LIKE ..........................................................................274
Korzystanie z operatora IN ..................................................................................................275
Sortowanie wynikw za pomoc ORDER BY ....................................................................275
Ograniczanie liczby wynikw za pomoc TOP ...................................................................276
Odczytywanie danych z wielu tabel ..........................................................................................277
Podzapytania .......................................................................................................................277
Zczenia tabel .....................................................................................................................278
Wyraenia i operatory ...............................................................................................................279
Funkcje Transact-SQL ...............................................................................................................281
Funkcje arytmetyczne ..........................................................................................................281
Funkcje acuchowe ............................................................................................................283

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica


Funkcje daty i czasu ............................................................................................................284
Praca z grupami wartoci ...........................................................................................................285
Funkcja COUNT .................................................................................................................286
Grupowanie rekordw za pomoc GROUP BY ..................................................................286
Filtrowanie grup za pomoc HAVING ................................................................................287
Funkcje SUM, AVG, MIN i MAX ......................................................................................288
Aktualizowanie istniejcych danych ..........................................................................................288
Zapytanie INSERT ..............................................................................................................289
Zapytanie UPDATE ............................................................................................................290
Zapytanie DELETE .............................................................................................................290
Procedury skadowane ...............................................................................................................291
Podsumowanie ...........................................................................................................................295

Rozdzia 9. ADO.NET .................................................................................................................. 297


Wprowadzenie do ADO.NET ....................................................................................................297
Importowanie przestrzeni nazw SqlClient ...........................................................................299
Definiowanie poczenia do bazy danych ...........................................................................300
Przygotowanie Command ...................................................................................................301
Wykonywanie polecenia .....................................................................................................302
Konfiguracja uwierzytelniania bazy danych ........................................................................304
Odczytywanie danych .........................................................................................................306
Uywanie parametrw w zapytaniach .................................................................................308
Zabezpieczanie kodu dostpu do danych ............................................................................314
Korzystanie z kontrolki Repeater ........................................................................................316
Tworzenie wykazu pracownikw Dorknozzle ...........................................................................321
Wizanie kolejnych danych .................................................................................................326
Wstawianie rekordw ..........................................................................................................331
Aktualizowanie rekordw ...................................................................................................337
Usuwanie rekordw .............................................................................................................350
Korzystanie z procedur skadowanych ................................................................................353
Podsumowanie ...........................................................................................................................355

Rozdzia 10. Wywietlanie zawartoci za pomoc kontrolek DataList ...................................... 357


Podstawy DataList .....................................................................................................................358
Obsuga zdarze kontrolki DataList ..........................................................................................361
Edycja elementw DataList i korzystanie z szablonw .............................................................368
Kontrolka DataList i program Visual Web Developer ...............................................................374
Stylizowanie kontrolki DataList ................................................................................................377
Podsumowanie ...........................................................................................................................378

Rozdzia 11. Zarzdzanie zawartoci za pomoc kontrolek GridView


oraz DetailsView ....................................................................................................... 379
Korzystanie z kontrolki GridView .............................................................................................380
Dostosowanie kolumn kontrolki GridView .........................................................................386
Stylizowanie GridView za pomoc szablonw, skrek oraz arkuszy CSS ..........................387
Wybieranie rekordw ..........................................................................................................389
Korzystanie z kontrolki DetailsView .........................................................................................394
Stylizowanie kontrolki DetailsView ....................................................................................397
Zdarzenia GridView i DetailsView ...........................................................................................400
Przejcie do trybu edycji .....................................................................................................403
Korzystanie z szablonw .....................................................................................................405
Aktualizowanie rekordw w kontrolce DetailsView ...........................................................408
Podsumowanie ...........................................................................................................................412

Rozdzia 12. Zaawansowane metody uzyskiwania dostpu do danych ..................................... 415


Uywanie kontrolek rda danych ...........................................................................................416

Spis treci

9
Powizanie kontrolki GridView z obiektem klasy SqlDataSource ......................................417
Powizanie kontrolki DetailsView z obiektem klasy SqlDataSource ..................................423
Wywietlanie list w kontrolce DetailsView .........................................................................433
Wicej o obiektach klasy SqlDataSource ............................................................................435
Praca ze zbiorami danych i tabelami danych .............................................................................436
Z czego skada si zbir danych? ........................................................................................439
Powizanie obiektw klasy DataSet z kontrolkami .............................................................440
Implementacja stronicowania ..............................................................................................445
Przechowywanie zbiorw danych w zbiorze ViewState .....................................................446
Implementacja sortowania ...................................................................................................449
Filtrowanie danych ..............................................................................................................459
Aktualizacja bazy danych na podstawie zmodyfikowanego zbioru klasy DataSet ....................460
Podsumowanie ...........................................................................................................................464

Rozdzia 13. Bezpieczestwo i uwierzytelnianie uytkownika ................................................... 465


Podstawowe zasady bezpieczestwa .........................................................................................466
Zabezpieczanie aplikacji w rodowisku ASP.NET 2.0 ..............................................................468
Praca z uwierzytelnianiem formularzy ................................................................................469
Czonkostwa ASP.NET 2.0 oraz role ........................................................................................480
Tworzenie struktur danych czonkowskich .........................................................................480
Korzystanie z bazy danych w celu przechowywania danych czonkowskich ......................483
Korzystanie z narzdzia ASP.NET Web Site Configuration Tool .......................................487
Tworzenie uytkownikw i rl ............................................................................................489
Zmiana wymaga dotyczcych siy hasa ............................................................................491
Zabezpieczanie aplikacji sieciowej .....................................................................................493
Uywanie kontrolek logowania rodowiska ASP.NET .......................................................495
Podsumowanie ...........................................................................................................................502

Rozdzia 14. Praca z plikami i poczt e-mail ............................................................................... 503


Zapisywanie i odczytywanie plikw tekstowych .......................................................................504
Ustawienia bezpieczestwa .................................................................................................504
Zapisywanie treci w pliku tekstowym ................................................................................505
Czytanie treci z pliku tekstowego ......................................................................................511
Uzyskiwanie dostpu do katalogw i informacji o katalogach ..................................................513
Praca ze ciekami dostpu do katalogw i plikw .............................................................516
Przekazywanie plikw ...............................................................................................................520
Wysyanie wiadomoci e-mail w rodowisku ASP.NET ...........................................................522
Konfiguracja serwera SMTP ...............................................................................................525
Wysyanie testowej wiadomoci e-mail ..............................................................................527
Tworzenie firmowej strony z biuletynem ............................................................................530
Podsumowanie ...........................................................................................................................537

Dodatek A

Wykaz kontrolek sieciowych ................................................................................... 539


Skorowidz ................................................................................................................. 585

Rozdzia 4.

Tworzenie stron internetowych


ASP.NET
Jeli kiedykolwiek budowae modele z klockw lego, jeste dobrze przygotowany do tworzenia prawdziwych stron ASP.NET. Technologia ta oferuje wiele technik umoliwiajcych
programistom niezalene tworzenie rnych czci stron internetowych, a nastpnie skadanie
ich w cao.
Zawarto, ktr tworzymy podczas pracy z ASP.NET, prawie nigdy nie jest statyczna. W czasie
projektowania mylimy w kategoriach szablonw posiadajcych miejsca na zawarto, ktra
zostanie wygenerowana dynamicznie w czasie dziaania aplikacji.
W tym rozdziale omwimy wiele obiektw i technik, ktre nadaj stronom internetowym
ASP.NET wygld, wczajc w to:
formatki internetowe,
kontrolki HTML serwera,
kontrolki internetowe serwera,
kontrolki internetowe uytkownika,
strony wzorcowe,
obsug nawigacji strony,
stylizowanie stron i kontrolek za pomoc CSS.

Jeli ta lista troch Ci przestraszya nie przejmuj si. Wszystko to jest znacznie atwiejsze
do zrozumienia, ni by si wydawao.

98

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Formatki internetowe
Jak wiesz, podczas uczenia si nowej technologii zawsze trzeba opanowa now terminologi.
Jednak w ASP.NET nawet najprostsze terminy uywane do opisu podstaw stron internetowych
zostay zmienione, eby odzwierciedli procesy, ktre w nich zachodz.
Terminem uywanym do opisania strony internetowej ASP.NET jest formatka internetowa
(ang. web form). Jest to gwny obiekt w programowaniu ASP.NET. Spotkae si ju z formatkami internetowymi to pliki .aspx, z ktrymi dotd pracowae w tej ksice. Na
pierwszy rzut oka formatki internetowe wygldaj jak strony HTML, ale poza statyczn zawartoci HTML znajduj si w nich rwnie elementy prezentacyjne ASP.NET oraz kod wykonywany po stronie serwera, ktry generuje dynamiczn zawarto i wykonuje dane funkcje.
Kada formatka internetowa posiada znacznik <form runat="server">, zawierajcy
elementy specyficzne dla ASP.NET, z ktrych skada si strona. Na stronie moe znajdowa
si tylko jedna formatka. Podstawowa struktura formatki internetowej znajduje si poniej:
<html>
<head>\
<script runat="server" language="jzyk programowania">
...tu znajduje si kod
</script>
</head>
<body>
<form runat="server">
...tu znajduj si elementy interfejsu uytkownika...
</form>
</body>
</html>

Do odwoywania si do formatki internetowej i wykonywania na niej operacji z poziomu jzyka


programowania wykorzystujemy klas System.Web.UI.Page. By moe przypominasz j
sobie z przykadu z chowaniem kodu w rozdziale 3. W pliku chowajcym kod musimy jawnie
korzysta z tej klasy. W sytuacjach, w ktrych nie korzystamy z plikw chowajcych kod
(np. cay kod piszemy w pliku .aspx), klasa Page take jest uywana, tyle tylko, e niejawnie.
Wewntrz formatki moemy korzysta z rnorodnych elementw interfejsu uytkownika
poczwszy od statycznego kodu HTML, a po elementy, ktrych wartoci i waciwoci mog
zosta wygenerowane lub zmieniane albo przed pierwszym wczytaniem strony, albo po wysaniu formularza. Elementy te w terminologii ASP.NET nazywane kontrolkami umoliwiaj wielokrotne uywanie w rnych formatkach internetowych wsplnych funkcjonalnoci,
takich jak nagwek strony, kalendarz, zawarto koszyka na zakupy czy ramka z cytatem
dnia. W ASP.NET jest kilka typw kontrolek:
kontrolki HTML serwera,
kontrolki internetowe serwera,
kontrolki internetowe uytkownika,
strony wzorcowe.

Rozdzia 4. Tworzenie stron internetowych ASP.NET

99

Pomidzy powyszymi typami kontrolek s znaczne rnice techniczne, jednak czy je atwo
integracji i moliwo wielokrotnego wykorzystywania w witrynach internetowych. Przyjrzyjmy si wszystkim powyszym typom kontrolek po kolei.

Kontrolki HTML serwera


Kontrolki HTML serwera s na pozr podobne do zwykych znacznikw HTML, ale zawieraj
atrybut runat="server". Pozwala on ASP.NET na sterowanie tymi kontrolkami, dziki czemu moemy odnosi si do nich z poziomu jzyka programowania. Jeli na przykad na stronie mamy znacznik <a> i chcemy dynamicznie, za pomoc kodu VB lub C#, zmieni adres,
do ktrego si odnosi, wykorzystamy atrybut runat="server".
Dla wikszoci czsto uywanych elementw HTML s odpowiednie kontrolki HTML po
stronie serwera. Stworzenie takiej kontrolki jest atwe: wystarczy na kocu zwykego znacznika
HTML doda atrybut runat="server". Pena lista biecych klas kontrolek HTML i powizanych z nimi znacznikw znajduje si tabeli 4.1.
Tabela 4.1. Klasy kontrolek HTML
Klasa

Powizany znacznik

HtmlAnchor

<a runat="server">

HtmlButton

<button runat="server">

HtmlForm

<form runat="server">

HtmlImage

<img runat="server">

HtmlInputButton

<input type="submit" runat="server">


<input type="reset" runat="server">
<input type="button" runat="server">

HtmlInputCheckBox

<input type="checkbox" runat="server">

HtmlInputFile

<input type="file" runat="server">

HtmlInputHidden

<input type="hidden" runat="server">

HtmlInputImage

<input type="image" runat="server">

HtmlInputRadioBut
ton

<input type="radio" runat="server">

HtmlInputText

<input type="text" runat="server">


<input type="password" runat="server">

HtmlSelect

<select runat="server">

HtmlTable

<table runat="server">

HtmlTableRow

<tr runat="server">

HtmlTableCell

<td runat="server">
<th runat="server">

HtmlTextArea

<textarea runat="server">

HtmlGenericContro
l

<span runat="server">
<div runat="server">

Wszystkie pozostae znaczniki HTML

100

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Bardziej szczegowy opis tych klas znajduje si w dodatku A.


Wszystkie klasy kontrolek HTML serwera s zawarte w przestrzeni nazw System.Web.UI.
HtmlControls. Poniewa s one przetwarzane przez ASP.NET po stronie serwera, mamy dostp z poziomu kodu do ich waciwoci w kadym miejscu strony. Jeli znasz JavaScript,
HTML i CSS, wiesz, e zmienianie tekstu w znacznikach HTML, a nawet modyfikowanie zawartych w nich stylw moe by kopotliwe i podatne na bdy. Kontrolki HTML serwera
pozwalaj rozwiza te problemy, umoliwiajc atw modyfikacj strony za pomoc wybranego jzyka ASP.NET, np. VB lub C#.

Korzystanie z kontrolek HTML serwera


Nic nie wyjania teorii lepiej ni dziaajcy przykad. Stwrzmy prost ankiet korzystajc
z nastpujcych kontrolek:
HtmlForm,
HtmlButton,
HtmlInputText,
HtmlSelect.

Rozpoczniemy od stworzenia nowego pliku o nazwie Survey.aspx. Umie go w katalogu


Learning, ktry zaoye w rozdziale 1. Poniszy kod tworzy wizualny interfejs ankiety:
Plik: Survey.aspx (fragment)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Korzystanie z kontrolek HTML serwera w ASP.NET</title>
<!-- Tu bdzie znajdowa si kod -->
</head>
<body>
<form runat="server">
<h2>We udzia w ankiecie!</h2>
<!-- Wywietl imi uytkownika -->
<p>
Imi:<br />
<input type="text" id="name" runat="server" />
</p>
<!-- Wywietl e-mail -->
<p>
E-mail:<br />
<input type="text" id="email" runat="server" />
</p>
<!-- Wywietl list technologii -->
<p>
Ktrych technologii po stronie serwera uywasz?<br />
<select id="serverModel" runat="server" multiple="true">
<option>ASP.NET</option>
<option>PHP</option>
<option>JSP</option>
<option>CGI</option>

Rozdzia 4. Tworzenie stron internetowych ASP.NET

101

<option>ColdFusion</option>
</select>
</p>
<!-- Wywietl .NET opcje opinii o net -->
<p>
Czy wci lubisz .NET?<br />
<select id="likeDotNet" runat="server">
<option>Tak</option>
<option>Nie</option>
</select>
</p>
<!-- Wywietl przycisk potwierdzajcy -->
<p>
<button id="confirmButton" OnServerClick="Click"
runat="server">Zatwierd</button>
</p>
<!-- Etykieta potwierdzenia -->
<p>
<asp:Label id="feedbackLabel" runat="server" />
</p>
</form>
</body>
</html>

Z tego, co dotd dowiedziae si o kontrolkach HTML, powiniene wywnioskowa, z jakimi


klasami bdziemy mieli do czynienia na tej stronie. Wszystko, co zrobilimy, to umieszczenie
kilku kontrolek HtmlInputText, kontrolki HtmlButton oraz HtmlSelect wewntrz wymaganej kontrolki HtmlForm. Dodalimy take kontrolk Label, ktr wykorzystamy do
wywietlenia wynikw uytkownikowi.

Kontrolki HTML serwera w dziaaniu


Zapamitaj, e kontrolki HTML serwera s w istocie znacznikami HTML z atrybutem runat=
"server". W wikszoci przypadkw bdziesz musia take przypisa im identyfikatory, ktre
umoliwi Ci uywanie ich w kodzie.

Kiedy wszystko bdzie ju gotowe, formatka internetowa Survey.aspx bdzie przypominaa


rysunek 4.1.
Kiedy uytkownik nacinie przycisk, wywietlimy przesane odpowiedzi w przegldarce.
W prawdziwej aplikacji najprawdopodobniej zapisalibymy informacje w bazie danych i by
moe pokazalibymy wyniki w postaci wykresu. W kadym przypadku bdziemy odnosi si
do waciwoci kontrolek HTML w nastpujcy sposb:
Visual Basic

Plik: Survey.aspx (fragment)

<script runat="server" language="VB">


Sub Click(ByVal s As Object, ByVal e As EventArgs)
Dim i As Integer
feedbackLabel.Text = "Nazywasz si: " & name.Value & "<br />"
feedbackLabel.Text += "Twj adres e-mail: " & email.Value & _
"<br />"

102

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Rysunek 4.1. Prosta formatka wykorzystujca kontrolki HTML serwera


feedbackLabel.Text += "Lubisz pracowa w:<br />"
For i = 0 To serverModel.Items.Count - 1
If serverModel.Items(i).Selected Then
feedbackLabel.Text += " - " & _
serverModel.Items(i).Text & "<br />"
End If
Next i
feedbackLabel.Text += "Lubisz .NET: " & likeDotNet.Value
End Sub
</script>

C#

Plik: Survey.aspx (fragment)


<script runat="server" language="C#">
void Click(Object s, EventArgs e)
{
feedbackLabel.Text = "Nazywasz si: " + name.Value + "<br />";
feedbackLabel.Text += "Twj adres e-mail: " + email.Value +
"<br />";
feedbackLabel.Text += "Lubisz pracowa w:<br />";
for (int i = 0; i <= serverModel.Items.Count - 1; i++)
{
if (serverModel.Items[i].Selected)
{
feedbackLabel.Text += " - " + serverModel.Items[i].Text +
"<br />";
}
}
feedbackLabel.Text += "Lubisz .NET: " + likeDotNet.Value;
}
</script>

Rozdzia 4. Tworzenie stron internetowych ASP.NET

103

Podobnie jak w przykadach z poprzednich rozdziaw, rozpoczniemy od umieszczenia kodu


VB lub C# w bloku kodu skryptu strony serwera wewntrz czci <head> strony. Nastpnie
stworzymy now funkcj obsugi zdarzenia Click, ktra bdzie przyjmowaa dwa parametry zwyczajowe parametry. W kocu uyjemy kontrolki Label do wywietlenia na stronie
odpowiedzi uytkownika.
Po napisaniu kodu zapisz swoj prac i przetestuj wyniki w przegldarce. Wpisz jakie informacje i nacinij przycisk. eby wybra kilka opcji z listy serverModel, kiedy bdziesz
klika opcje, nacinij i przytrzymaj Ctrl. Informacje, ktre wprowadzie, pojawi si u dou
strony, tak jak na rysunku 4.2.

Rysunek 4.2. Podgld wynikw ankiety

Konkludujc, praca z kontrolkami HTML serwera jest naprawd prosta. Wszystko, czego potrzebujesz, to przypisanie kadej kontrolce identyfikatora oraz dodanie atrybutu runat="server". Nastpnie moesz w prosty sposb odwoywa si i przeprowadza na nich
operacje wykorzystujc kod VB lub C# po stronie serwera.

Kontrolki internetowe serwera


Kontrolki internetowe serwera mog by postrzegane jako bardziej zaawansowana wersja
kontrolek. Su one do generowania zawartoci za Ciebie nie masz wpywu na to, jaki HTML
zostanie wygenerowany. O ile dobra znajomo HTML-a jest przydatna, o tyle nie jest ona
konieczna dla tych, ktrzy korzystaj z kontrolek internetowych serwera.
Spjrzmy na przykad. Moemy uy kontrolki serwera Label do umieszczenia tekstu wewntrz formatki internetowej. eby zmieni tekst w kontrolce Label z poziomu kodu C# lub
VB, po prostu ustawiamy jej waciwo Text, tak jak poniej:
Visual Basic
myLabel.Text = "Myszka Miki"

104

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Podobnie, eby doda pole tekstowe do formatki, uywamy kontrolki internetowej serwera
TextBox. Ponownie moemy odczyta bd zapisa tekst za pomoc waciwoci Text:
C#
username = usernameTextBox.Text;

Mimo e stosujemy kontrolk TextBox, ASP.NET tak naprawd uywa elementu input, jednak nie musimy si ju przejmowa jego szczegami. Dziki kontrolkom internetowym
serwera Microsoft po prostu ponownie wymyli HTML.
W przeciwiestwie do kontrolek HTML serwera, kontrolki internetowe serwera nie przekadaj
si bezporednio na tworzone przez nie elementy HTML. Na przykad, do wygenerowania
elementu select moemy uy jednej z dwch kontrolek internetowych serwera: DropDownList lub ListBox.
Kontrolki internetowe serwera stosuj ten sam podstawowy wzr co znaczniki HTML, ale
nazwa znacznika jest poprzedzona przez asp: i zapisana w notacji jzyka Pascal. Notacja jzyka Pascal polega na zapisywaniu pierwszych liter kadego wyrazu wielk liter (np. TextBox). Identyfikatory obiektw s zazwyczaj zapisywane za pomoc notacji wielbdziej, w
ktrej wszystkie pierwsze litery poszczeglnych wyrazw, z wyjtkiem pierwszego, s zapisywane wielk liter (np. usernameTextBox).
Rozpatrzmy poniszy element HTML input, ktry tworzy pole tekstowe:
<input type="text" name="usernameTextBox" size="30" />

Odpowiadajc mu kontrolk internetow serwera jest kontrolka TextBox, ktra wyglda nastpujco:
<asp:TextBox id="usernameTextBox" runat="server" Colums="30">
</asp:textBox>

Pamitaj o tym, e w przeciwiestwie do zwykych elementw HTML, ktre mgby wykorzysta w formatkach internetowych, kontrolki internetowe serwera s najpierw przetwarzane
przez ASP.NET i zamieniane na HTML. Efektem ubocznym tego podejcia jest to, e musisz
pamita o tym, eby zawsze wstawia znaczniki zamykajce (</asp:TextBox> w powyszym kodzie). Parsery HTML-a w przegldarkach nie s rygorystyczne co do poprawnoci
kodu, ale ASP.NET jest. Pamitaj o tym, e jeli niczego nie ma pomidzy znacznikami otwierajcymi i zamykajcymi kontrolk internetow serwera, moesz uy skrtowej skadni
(/>). Tak wic kontrolka TextBox mogaby wyglda nastpujco:
<asp:TextBox id="usernameTextBox" runat="server" Colums="30" />

Podsumowujc, kluczowe rzeczy, o ktrych naley pamita podczas pracy z kontrolkami


internetowymi serwera, to:
eby prawidowo dziaa, kontrolki internetowe serwera musz zosta umieszczone
wewntrz znacznika <form runat="server">.
Internetowe kontrolki serwera wymagaj atrybutu runat="server".
Internetowe kontrolki serwera wstawiamy do formatki za pomoc przedrostka asp:.

Rozdzia 4. Tworzenie stron internetowych ASP.NET

105

Internetowych kontrolek serwera jest wicej ni kontrolek HTML. Niektre z nich oferuj
zaawansowane funkcje, ktrych po prostu nie mona zrealizowa za pomoc samego HTML-a,
a inne z kolei tworz dosy zoony HTML za Ciebie. Z wieloma kontrolkami internetowymi
serwera oraz sposobem ich dziaania zapoznamy si w kolejnych rozdziaach.
Wicej o kontrolkach internetowych serwera, wczajc w to waciwoci metody i zdarzenia,
dowiesz si w dodatku A.

Standardowe kontrolki internetowe serwera


Zbir standardowych kontrolek internetowych serwera dostarczany z ASP.NET na wiele sposobw odzwierciedla kontrolki HTML serwera. Jednak kontrolki internetowe serwera udostpniaj
wiele udoskonale i rozszerze, takich jak obsuga zdarze czy stanu widoku, spjniejszy zestaw
waciwoci i metod oraz wicej wbudowanych funkcjonalnoci. W tym punkcie przyjrzymy si
kilku kontrolkom, z ktrych najprawdopodobniej bdziesz korzysta w codziennej pracy.
Pamitaj o tym, eby korzysta z dokumentacji .NET Framework 2.0 SDK za kadym razem,
kiedy bdziesz chcia dowiedzie si wicej o jakiej klasie (lub kontrolce). Dokumentacja
dostpna jest w menu Start/Programy/Microsoft .NET Framework SDK 2.0/Documentation.
eby znale klas, po prostu wyszukaj jej nazw. Jeli jest wiele klas o tej samej nazwie, ale
znajduj si one w rnych przestrzeniach nazw, bdziesz mg wybra odpowiedni z okienka
Index Results. Na przykad s trzy klasy o nazwie Label umieszczone w przestrzeniach
nazw System.Web.UI.MobileControls, System.Web.UI.WebControls oraz System.Windows.Form, co wida na rysunku 4.3. Najprawdopodobniej bdziesz zainteresowany
wersj klasy umieszczon w przestrzeni nazw WebControls.

Label
Najprostszym sposobem wywietlenia statycznego tekstu na stronie jest po prostu wpisanie
go bezporednio do sekcji body strony bez adnych znacznikw. Jeli jednak chcesz zmienia
wywietlany na stronie tekst za pomoc kodu ASP.NET, moesz umieci go wewntrz
kontrolki Label. Poniej znajduje si typowy przykad:
<asp:Label id="messageLabel" Text="" runat="server" />

Poniszy kod ustawia waciwo Text kontrolki Label, tak eby wywietlaa tekst Witaj
wiecie!:
Visual Basic
Public Sub Page_Load()
messageLabel.Text = "Witaj wiecie!"
End Sub

106

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Rysunek 4.3. Dokumentacja kontrolki Label


C#
public void Page_Load()
{
messageLabel.Text = "Witaj swiecie";
}

W kodzie funkcji Page_Load moemy zobaczy, e kiedy strona po raz pierwszy jest wczytywana, waciwo Text kontrolki Label z identyfikatorem message zostanie ustawiona
na Witaj wiecie.

Literal
Jest to najprawdopodobniej najprostsza kontrolka w ASP.NET. Jeli ustawisz jej waciwo
Text, spowoduje to po prostu wstawienie tekstu do wynikowego kodu HTML bez adnych
zmian. W przeciwiestwie do Label, ktra ma podobna funkcjonalno, Literal nie opakowuje tekstu w znaczniki <span> umoliwiajce ustawienie informacji o stylu.

TextBox
Kontrolka TextBox jest wykorzystywana do tworzenia pola tekstowego, w ktrym uytkownik moe zapisywa bd z ktrego moe czyta zwyky tekst. Waciwo TextMode
umoliwia ustawienie sposobu wywietlania tekstu, tak eby znajdowa si w jednej linijce, w

Rozdzia 4. Tworzenie stron internetowych ASP.NET

107

wielu linijkach lub by ukrywany podczas wprowadzania (na przykad tak jak w polach hase
HTML). Poniszy kod demonstruje, w jaki sposb moglibymy uy jej w prostej stronie logowania:
<p>
Uytkownik: <asp:TextBox id="userTextBox" TextMode="SingleLine"
Columns="30" runat="server" />
</p>
<p>
Haso: <asp:TextBox id="passwordTextBox"
TextMode="Password" Columns="30" runat="server" />
</p>
<p>
Komentarz: <asp:TextBox id="commentsTextBox"
TextMode="MultiLine" Columns="30" rows="10"
runat="server" />
</p>

W kadej z powyszych instancji TextBox atrybut TextMode ustawia rodzaj pola tekstowego, ktre ma zosta stworzone.

HiddenField
HiddenField jest prost kontrolk, ktra tworzy element input z atrybutem type rwnym
hidden. Moemy ustawi jej jedyn wan waciwo: Value.

Button
Domylnie kontrolka Button tworzy element input z atrybutem type o wartoci submit.
Po naciniciu przycisku formularz, ktry go zawiera, jest wysyany do serwera w celu przetworzenia i wywoywane s zdarzenia Click oraz Command.
Poniszy kod wywietla kontrolk Button i Label:
<asp:Button id="submitButton" Text="Wylij" runat="server"
OnClick="WriteText" />
<aps:Label id="messageLabel" runat="server" />

Zauwa atrybut OnClick w kontrolce. Po naciniciu przycisku wywoywane jest zdarzenie


Click, co powoduje wywoanie procedury WriteText. Bdzie ona zawieraa kod, ktry wykonuje funkcje przeznaczone dla omawianego przycisku, na przykad wywietlenie komunikatu:
Visual Basic
Public Sub WriteText(s As Object, e As EventArgs)
messageLabel.Text = "Witaj swiecie!"
End Sub

C#
public void WriteText(Object s, EventArgs e)
{
messageLabel.Text = "Witaj swiecie!";
}

108

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

To wane, eby zrozumie, i zdarzenia s zwizane z wikszoci kontrolek internetowych


serwera, a podstawowe techniki korzystania z nich s takie same, jak technika, ktrej uywalimy ze zdarzeniem Click kontrolki Button. Wszystkie kontrolki implementuj standardowy zestaw zdarze, poniewa dziedzicz po klasie bazowej WebControl.

ImageButton
Kontrolka ImageButton jest podobna do kontrolki Button, ale zamiast z systemowego przycisku korzysta z podanego przez nas obrazka. Spjrz na przykad:
<asp:ImageButton id="myImgButton" ImageUrl="myButton.gif
runat="server" OnClick="WriteText" />
<asp:Label id="messageLabel" runat="server" />

Zdarzenie Click kontrolki ImageButton odbiera koordynaty punktu, w ktrym zosta kliknity obrazek:
Visual Basic
Public WriteText(s As Object, e As ImageClickEventArgs)
messsageLabel.Text = "Koordynaty: " & e.X & "," & e.Y
End Sub

C#
public void WriteText(Object s, ImageClickEventArgs e)
{
messageLabel.Text = "Koordynaty: " + e.X + "," + e.Yl
}

LinkButton
Kontrolka LinkButton tworzy hipercze, po ktrego klikniciu wywoywane jest zdarzenie Click. Z punktu widzenia kodu ASP.NET, kontrolki LinkButton mog by traktowane w
wikszoci przypadkw jak przyciski.
<asp:LinkButton id="myLinkButton" Text="Nacinij tu"
runat="server" />

HyperLink
Kontrolka HyperLink tworzy na stronie hipercze o adresie ustalanym przez waciwo
NavigateUrl. W przeciwiestwie do kontrolki LinkButton udostpniajcej funkcjonalnoci, takie jak zdarzenia Click czy sprawdzanie poprawnoci, kontrolki HyperLink s przeznaczone do nawigacji z jednej strony do innej.
<asp:HyperLink id="myLink" NavigateUrl="http://www.sitepoint.com/"
ImageUrl="splogo.gif" runat="server">SitePoint</asp:HyperLink>

Rozdzia 4. Tworzenie stron internetowych ASP.NET

109

Jeli jest podany, atrybut ImageUrl powoduje, e kontrolka wywietla okrelony obrazek.
W takim przypadku tekst podany wewntrz kontrolki bdzie funkcjonowa jako alternatywny
tekst obrazka.

CheckBox
Kontrolk CheckBox moesz wykorzysta do wywietlenia pola wyboru, ktre ma tylko
dwa stany zaznaczone lub niezaznaczone.
<asp:CheckBox id="questionCheck" Text="Tak, lubi .NET!"
Checked="True" runat="server" />

Gwnym zdarzeniem zwizanym z kontrolk CheckBox jest CheckChanged, ktre moe


zosta obsuone przez atrybut OnCheckChanged. Waciwo Checked ma warto True,
jeli pole wyboru jest zaznaczone, i False, jeli nie jest.

RadioButton
Kontrolka RadioButton jest podobna do CheckBox z tym wyjtkiem, e kontrolki tego typu mog by grupowane razem, dziki czemu bd reprezentowa zbir opcji, z ktrych tylko jedna moe zosta wybrana. Do grupowania suy waciwo GroupName.
<asp:RadioButton id="warszawa" GropupName="City" Text="Warszawa"
runat="server" /><.br />
<asp:RadioButton id="katowice" GropupName="City" Text="Katowice"
runat="server" /><.br />
<asp:RadioButton id="kielce" GropupName="City" Text="Kielce"
runat="server" /><.br />
<asp:RadioButton id="krakow" GropupName="City" Text="Krakw"
runat="server" /><.br />

Podobnie jak w kontrolce CheckBox, gwnym zdarzeniem zwizanym z kontrolkami RadioButton jest CheckChanged, ktre moe zosta obsuone przez atrybut OnCheckChanged.
Inn kontrolk, ktr moemy wykorzysta do wywietlenia pl wielokrotnego wyboru, jest
RadioButtonList, opisana w dalszej czci rozdziau.

Image
Kontrolka Image tworzy obrazek, ktry moe by zmieniany dynamicznie z poziomu kodu.
Odpowiada ona znacznikowi <img> w HTML-u. Oto przykad:
<asp:Image id="myImage" ImageUrl="mygif.gif" runat="server"
AlternateText="opis" />

ImageMap
Kontrolka ImageMap generuje HTML wywietlajcy obrazki posiadajce klikalne obszary,
nazywane aktywnymi miejscami. Kade z takich miejsc inaczej reaguje na kliknicie przez
uytkownika.

110

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Obszary s definiowane za pomoc trzech kontrolek, okrelajcych aktywne miejsca o rnych


ksztatach: CircleHotspot (okrg), RectangleHotspot (prostokt) oraz PolygonHotspot (wielokt). Poniej znajduje si przykad definiujcy kontrolk ImageMap z dwoma okrgymi aktywnymi miejscami:
<asp:ImageMap id="myImageMap" tunat="server" ImageUrl="image.jpg">
<asp:CircleHotSpot AlternateText="Przycisk1"
Radius="20" X="50" Y="50" />
<asp:CircleHotSpot AlternateText="Przycisk2"
Radius="20" X="100" Y="50" />
</asp:ImageMap>

eby skonfigurowa dziaania wynikajce z kliknicia aktywnych miejsc przez uytkownika,


musimy ustawi waciwo HotSpotMode kontrolki ImageMap i (lub) poszczeglnych obiektw aktywnych miejsc, uywajc wartoci przedstawionych w tabeli 4.2. Jeli waciwo HotSpotMode jest ustawiona zarwno w kontrolce ImageMap, jak i dla miejsca aktywnego, ta
ostatnia waciwo nadpisze t ustawion w bardziej oglnej kontrolce ImageMap.
Tabela 4.2. Wartoci HotSpotMode
warto HotPotMode

Zachowanie po klikniciu aktywnego miejsca

Inactive

brak

Navigate

Uytkownik jest przenoszony do okrelonego adresu URL.

NotSet

Jeli jest ustawiona dla kontrolki HotSpot, zachowanie jest dziedziczone


po rodzicielskiej kontrolce ImageMap. Jeli w rodzicielskiej kontrolce ImageMap
okrelonej domylnej wartoci, ustawiana jest warto Navigate.
Jeli jest ustawiona dla ImageMap, warto ta jest rwnowana z Navigate.

PostBack

Miejsce aktywne wywouje zdarzenie Click, ktre moe zosta obsuone


po stronie serwera i pozwala wykona jak operacje w odpowiedzi na dziaanie
uytkownika.

Dokumentacja Microsoft .NET Framework 2.0 SDK dla klasy ImageMap zawiera szczegowe
przykady korzystania z wartoci HotSpotMode.

PlaceHolder
Kontrolka PlaceHolder umoliwia dynamiczne za pomoc kodu dodawanie elementw w okrelonych miejscach na stronie:
<asp:PlaceHolder id="placeHolder" runat="server"

/>

Poniszy kod dodaje now kontrolk HtmlButton wewntrz kontrolki PlaceHolder:


Visual Basic
Public Sub Page_Load()
Dim myButton As HtmlButton = New HtmlButton()
myButton.InnerText = "Nowy przycisk"
placeHolder.Controls.Add(myButton)
EndSub

Rozdzia 4. Tworzenie stron internetowych ASP.NET

111

C#
public void Page_Load()
{
HtmlButton myButton = new HtmlButton();
myButton.InnerText = "Nowy przycisk";
placeHolder.Controls.Add(myButton);
}

Panel
Kontrolka Panel dziaa podobnie do elementu div w HTML, poniewa umoliwia traktowanie zawartych w niej elementw jako grupy i wykonywanie na nich zbiorczych operacji. Na
przykad panel mona wywietla lub chowa za pomoc zdarzenia Click kontrolki:
<asp:Panel id="myPanel" runat="server">
<p>Uytkownik: <asp:TextBox id="usernameTextBox" Colums="30"
runat="server" /></p>
<p>Haso: <asp:TextBox id="passwordTextBox"
TextMode="Password" Colums="30" runat="server" />
</p>
</asp:Panel>
<asp:Button id="hideButton" Text="Ukryj panel" OnClick="HidePanel"
runat="server" />

Powyszy kod umieszcza w kontrolce Panel dwie kontrolki TextBox. Kontrolka Button
znajduje si poza kontrolk Panel. Procedura HidePanel bdzie sterowaa widocznoci
kontrolki Panel poprzez ustawianie jej waciwoci Visible na False:
Visual Basic
Public Sub HidePanel(s As Object, e As EventArgs)
myPanel.Visible = False
End Sub

C#
public void HidePanel(Object s, EventArgs e)
{
myPanel.Visible = false;
}

W powyszym przykadzie, kiedy uytkownik kliknie przycisk, wywoywane jest zdarzenie


Click, ktre wykonuje procedur HidePanel ustawiajc waciwo kontrolki Panel na False.

Kontrolki List
W tym punkcie zapoznamy si z kontrolkami ASP.NET wywietlajcymi proste listy elementw: ListBox, DropDownList, CheckBoxList, RadioButtonList oraz BulletedList.

112

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

DropDownList
Kontrolka DropDownList jest podobna do elementu HTML select. Umoliwia ona wybr
jednego elementu z listy za pomoc rozwijanego menu.
<asp:DropDownList id="ddlFavColor" runat="server">
<asp:ListItem Text="Czerwony" value="red" />
<asp:ListItem Text="Zielony" value="green" />
<asp:ListItem Text="Niebieski" value="blue" />
</asp:DropDownList>

Najbardziej przydatnym zdarzeniem udostpnianym przez t kontrolk jest SelectedIndexChanged. Zdarzenie to jest udostpniane przez inne kontrolki list, takie jak CheckBoxList
i RadioButtonList, i umoliwia programicie atw komunikacj z kontrolk. Kontrolki te
mog by rwnie powizane baz danych, dziki czemu mona do rozwijanego menu wstawia dynamiczn zawarto.

ListBox
Kontrolka ListBox odpowiada elementowi HTML select z ustawionym atrybutem multiple lub size (size musi mie warto 2 lub wiksz). Jeli ustawisz atrybut SelectionMode na multiple, uytkownik bdzie mg wybra wicej ni jeden element z listy,
tak jak w poniszym przykadzie:
<asp:ListBox id="listTechnologies" runat="server"
SelectionMode="Multiple">
<asp:ListItem Text="ASP.NET" Value="aspnet" />
<asp:ListItem Text="JSP" Value="jsp" />
<asp:ListItem Text="PHP" Value="php" />
<asp:ListItem Text="CGI" Value="cgi" />
<asp:ListItem Text="ColdFusion" Value="cf" />
</asp:ListBox>

RadioButtonList
Podobnie jak kontrolka RadioButton, kontrolka RadioButtonList reprezentuje pola wielokrotnego wyboru, z t rnic, e ta druga reprezentuje ich list i uywa bardziej zwizej
skadni. Oto przykad:
<asp:RadioButton id="favouriteColor" runat="server">
<asp:ListItem Text="Czerwony" Value="red" />
<asp:ListItem Text="Zielony" Value="green" />
<asp:ListItem Text="Niebieski" Value="blue" />
</asp:RadioButtonList>\

CheckBoxList
Jak si pewnie domylasz, CheckBoxList reprezentuje grup pl wyboru. Jest odpowiednikiem uycia kilku kontrolek CheckBox obok siebie:
<asp:CheckBoxList id="favoutiteFood" runat="server">
<asp:ListItem Text="Pizza" Value="pizza" />
<asp:ListItem Text="Tacos" Value="tacos" />
<asp:ListItem Text="Pasta" Value="pasta" />
<.asp:CheckListBox>

Rozdzia 4. Tworzenie stron internetowych ASP.NET

113

BulletedList
Kontrolka BulletedList wywietla wypunktowane bd ponumerowane listy za pomoc
znacznikw <ul> (lista wypunktowana) lub <ol> (lista numerowana). W przeciwiestwie do
innych kontrolek list, BulletedList nie umoliwia wyboru elementw i w zwizku z tym nie
obsuguje zdarzenia SelectedIndexChanged.
Pierwsz waciwoci, ktr bdziesz chcia ustawi, jest DisplayMode. Moesz jej przypisa warto Text (domylna) lub HyperLink (elementy bd wywietlane jako cza). Jeli
DisplayMode ma warto HyperLink, moesz uy zdarzenia Click do reagowania na
kliknicie jednego z elementw przez uytkownika.
Inn wan waciwoci jest BulletStyle. Okrela ona styl wypunktowania. Moe mie nastpujce wartoci: Numbered (1, 2, 3, ), LowerAlpha (a, b, c, ), UpperAlpha (A, B, C,
), LowerRoman (i, ii, iii, ), UpperRoman (I, II, III, ), Circle, Disc, Square i CustomImage. Jeli styl zostanie ustawiony na CustomImage, bdziesz musia ustawi take
waciwo BulletImageUrl okrelajc obrazek, ktry bdzie uywany w wypunktowaniu.
Jeli styl jest jedn z list numerowanych, moesz ustawi waciwo FirstBulletNumber,
ktra okrela pocztkow liczb lub liter numerowania.

Zaawansowane kontrolki
Kontrolki te s zaawansowane w nastpujcych znaczeniach: sposobu, w jaki si ich uywa,
generowanego przez nie kodu HTML oraz pracy wykonywanej za Ciebie. Niektre z tych
kontrolek nie s dostpne w starszych wersjach ASP.NET. Wiele z nich poznamy w dalszej
czci ksiki (w tym rozdziale opiszemy tylko niektre).

Calendar
Calendar jest wietnym przykadem tego, e kontrolek ASP.NET mona wielokrotnie uywa. Generuje ona intuicyjny kalendarz, ktry uytkownik moe klika i wybiera dni, tygodnie, miesice itd.

Kontrolka Calendar wymaga tylko niewielkiego dostosowania. Mona j stworzy na stronie w nastpujcy sposb:
Plik: Calendar.aspx (fragment)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test kalendarza</title>
</head>
<body>
<form runat="server">
<asp:Calendar id="myCalendar" runat="server" />
</form>
</body>
</html>

114

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Jeli zapiszesz t stron w katalogu Learning, a nastpnie j wczytasz, wynik bdzie podobny
do rysunku 4.4.
Rysunek 4.4.
Wywietlanie
domylnego
kalendarza

Kontrolka Calendar zawiera szeroki wachlarz waciwoci, metod i zdarze, wczajc te


przedstawione w tabeli 4.3.
Przyjrzyjmy si przykadowi, ktry uywa niektrych z tych waciwoci, zdarze oraz metod do stworzenia kontrolki Calendar umoliwiajcej uytkownikowi wybieranie dni, tygodni i miesicy. Zmie kontrolk Calendar w pliku Calendar.aspx i dodaj do niej etykiet w nastpujcy sposb:
Plik: Calendar.aspx (fragment)
<asp:Calendar id="myCalendar" runat="server" DayNameFormat="Short"
FirstDayOfWeek="Sunday" NextPrevFormat="FullMonth"
SelectionMode="DayWeekMonth" SelectWeekText="Select Week"
SelectMonthText="Select Month" TitleFormat="Month"
OnSelectionChanged="SelectionChanged" />
<h2>Wybrae nastpujce daty:</h2>
<asp:Label ID="myLabel" runat="server" />

Teraz dodaj znacznik <script runat="server"> do sekcji head formatki internetowej i


docz funkcj obsugi zdarzenia SelectionChanged, do ktrej bdzie odwoywa si kalendarz:
Visual Basic

Plik: Calendar.aspx (fragment)

<script runat="server" language="VB">


Sub SelectionChanged(ByVal s As Object, ByVal e As EventArgs)
myLabel.Text = ""
For Each d As DateTime In myCalendar.SelectedDates
myLabel.Text &= d.ToString("D") & "<br />"
Next
End Sub
</script>

Rozdzia 4. Tworzenie stron internetowych ASP.NET

115

Tabela 4.3. Niektre waciwoci kontrolki Calendar


Waciwo

Opis

DayNameFormat

Ta waciwo ustawia format nazw dni. Moliwymi wartociami s FirstLetter,


FirstTwoLetters i Short. Domyln wartoci jest Short wywietlane s
trzyliterowe skrty.

FirstDayOfWeek

Ta waciwo ustawia dzie, od ktrego zaczyna si tydzie. Domylna warto jest


okrelana przez ustawienia regionalne serwera, ale jeli chcesz, moesz j zmieni na
Sunday (niedziela) lub Monday (poniedziaek).

NextPrevFormat

Ta waciwo steruje formatem czy nastpnego i poprzedniego miesica. Domylnie


jest ustawiona na CustomText, ale mona jej przypisa ShortMonth lub
FullMonth.

SelectedDate

Ta waciwo zawiera warto typu DateTime okrelajc podwietlony dzie.


Bdziesz jej czsto uywa do okrelania, ktry dzie zosta wybrany przez
uytkownika.

SelectionMode

Ta waciwo okrela, czy mona wybiera dni, tygodnie lub miesice. Moliwymi
wartociami s: Day, DayWeek, DayWeekMonth oraz None, a domyln jest Day. Jeli
wybrana jest warto Day, uytkownik moe wybra tylko dzie; jeli DayWeek,
uytkownik moe wybra dzie i tydzie, itd.

SelectedMonthT
ext

Ta waciwo okrela tekst cza wywietlanego w celu umoliwienia uytkownikowi


wybrania caego miesica z kalendarza.

SelectedWeekTe
xt

Ta waciwo okrela tekst cza wywietlanego w celu umoliwienia uytkownikowi


wybrania caego tygodnia z kalendarza.

ShowDayHeader

Jeli ta waciwo ma warto True, wywietlane s nazwy dni tygodnia. Domyln


wartoci jest True.

ShowGridLines

Jeli ta waciwo ma warto True, wywietlane s nazwy dni tygodnia. Domyln


wartoci jest True.

ShowNextPrevMo
nth

Jeli ta waciwo ma warto True, wywietlane s cza do nastpnego i


poprzedniego miesica. Domyln wartoci jest True.

ShowTitle

Jeli ta waciwo ma warto True, wywietlany jest tytu kalendarza. Domyln


wartoci jest False.

TitleFormat

Ta waciwo okrela, w jaki sposb wywietlane s nazwy miesicy w pasku tytuu.


Moliwymi wartociami s: Month (miesic) i MonthYear (miesic i rok).
Domyln wartoci jest MonthYear.

TodaysDate

Ta waciwo typu DateTime okrela biec dat kalendarza. Domylnie warto


ta nie jest podwietlana w kontrolce Calendar.

VisibleDate

Ta waciwo typu DateTime okrela, ktry miesic jest wywietlany.

C#

Plik: Calendar.aspx (fragment)


<script runat="server" language="C#">
void SelectionChanged(Object s, EventArgs e)
{
myLabel.Text = "";
foreach (DateTime d in myCalendar.SelectedDates)
{
myLabel.Text += d.ToString("D") + "<br />";
}
}

116

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica


</script>

Zapisz swoj prac i przetestuj w przegldarce. Sprbuj wybra dzie, tydzie lub miesic.
Wybrane daty zostan podwietlone, tak jak na rysunku 4.5.
Rysunek 4.5.
Korzystanie
z kontrolki Calendar

W SelectionChanged sprawdzamy kad dat wybran przez uytkownika i dodajemy j


do etykiety umieszczonej na stronie.

AdRotator
Kontrolka AdRotator umoliwia losowe wywietlanie listy banerw reklamowych w aplikacji
internetowej. Jest jednak czym wicej ni tylko substytutem stworzenia skryptu losujcego
od zera. Poniewa kontrolka AdRotator pobiera zawarto z pliku XML, administracja i aktualizacja plikw z banerami reklamowymi oraz zmiana ich waciwoci jest bardzo prosta. Ponadto plik XML umoliwia sterowanie rysunkiem banera, czem, adresem docelowym cza
oraz czstotliwoci pojawiania si banera w stosunku do innych banerw.
Korzyci wynikajce z korzystania z tej kontrolki nie kocz si tylko na tym. Poniewa
wikszo waciwoci kontrolki AddRorator znajduje si w pliku XML, jeli chcesz, mo-

Rozdzia 4. Tworzenie stron internetowych ASP.NET

117

esz je wspuytkowa w internecie, dziki czemu inni sprzedawcy lub partnerzy Twojej
firmy mog korzysta z Twoich banerw reklamowych na swoich stronach.

Podstawy XML-a
W swojej istocie XML jest po prostu formatem tekstowym do przesyania lub przechowywania danych. Nie zawiera on informacji, w jaki sposb dane powinny by prezentowane. XML jest bardzo prosty dla pocztkujcych, poniewa bardzo przypomina HTML: obydwa zawieraj du
liczb znacznikw wewntrz pojedynczych ostrych nawiasw (< oraz >). Najwiksz rnic pomidzy XML-em a HTML-em jest to, e XML nie ma staych znacznikw i umoliwia tworzenie wasnych do opisu danych, ktre chcemy reprezentowa.
Przyjrzyj si poniszemu elementowi HTML:
<p>Gwiezdne Wojny Epizod I: Mroczne Widmo</p>

W tym przykadzie zawarto pomidzy znacznikami jest opisana jako paragraf. Jest to wystarczajce, jeli wszystkim, co chcemy zrobi, jest wywietlenie tekstu Gwiezdne Wojny Epizod
I: Mroczne Widmo na stronie internetowej. Co bdzie jednak, gdybymy chcieli mie dostp do
tych sw jak do danych?
Podobnie jak w przypadku HTML-a, celem XML-a jest opisanie zawartoci dokumentu. Jednak w
przeciwiestwie do HTML-a, XML nie opisuje, w jaki sposb jaka zawarto ma by wywietlana opisuje on, czym jest ta zawarto. Za pomoc XML-a autor strony internetowej moe
oznaczy zawarto dokumentu, opisujc j w kategoriach jej znaczenia jako danych.
Moemy wykorzysta XML-a do oznaczenia sw Gwiezdne Wojny Epizod I: Mroczne Widmo w
sposb, ktry lepiej odzwierciedla znaczenie tej zawartoci jako danych:
<film>
<title>Gwiezdne Wojny Epizod I: Mroczne Widmo</title>
</film>

Wybrane przez nas nazwy znacznikw najlepiej opisuj zawarto elementu. Definiujemy take w
miar potrzeb wasne nazwy atrybutw. Na przykad w powyszym przykadzie mgby zechcie rozrnia pomidzy wersj VHS i DVD czy zapisywa, jak si nazywa reyser filmu. Mona to zrobi, dodajc atrybuty i elementy w sposb pokazany poniej:
<film format="DVD">
<title>Gwiezdne Wojny Epizod I: Mroczne Widmo</title>
<director>George Lucas</director>
</film>

Jeli chcesz to przetestowa, stwrz plik o nazwie ads.xml w katalogu Learning i umie w nim
zawarto przedstawion poniej. Sprbuj stworzy wasne banery albo wykorzysta te dostarczone z kodem do ksiki.
Plik: Ads.xml (fragment)
<?xml version="1.0" encoding="Windows-1250"?>
<Advertisements>
<Ad>
<ImageUrl>workatdorknozzle.gif</ImageUrl>
<NavigateUrl>http://www.dorknozzle.com</NavigateUrl>
<TargetUrl>_blank</TargetUrl>
<AlternateText>Praca w Dorknozzle.com!</AlternateText>
<Keyword>Witryna dziau HR</Keyword>
<Impressions>2</Impressions>

118

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica


</Ad>
<Ad>
<ImageUrl>getthenewsletter.gif</ImageUrl>
<NavigateUrl>http://www.dorknozzle.com</NavigateUrl>
<TargetUrl>_blank</TargetUrl>
<AlternateText>Pobierz gazetk Nozzle!</AlternateText>
<Keyword>Witryna dziau sprzeday</Keyword>
<Impressions>1</Impressions>
</Ad>
</Advertisements>

Jak moesz zobaczy, element Advertisements jest gwnym wzem i zgodnie ze specyfikacj XML pojawia si tylko raz. Dla kadej poszczeglnej reklamy po prostu dodajemy
element potomny Ad. Na przykad powyszy plik z reklamami zawiera szczegy dwch banerw.
Jak ju prawdopodobnie zauwaye, plik .xml umoliwia okrelenie waciwoci dla kadego
banera poprzez wpisanie odpowiedniego elementu wewntrz poszczeglnych elementw Ad.
ImageUrl

Adres URL obrazka wywietlanego jako baner reklamowy.


NavigateURL

Strona, do ktrej zostanie przeniesiony uytkownik po klikniciu banera.


AlternateText

Tekst, ktry bdzie wywietlany, jeli przegldarka nie obsuguje obrazkw.


Keyword

Sowo kluczowe uywane do okrelenia kategorii banera.


Jeli wykorzystasz waciwo KeywordFilter kontrolki AdRotator, moesz
okreli kategori banerw do wywietlania.
Impressions

Czstotliwo, z jak bd wywietlane poszczeglne banery w odniesieniu do innych


banerw.
Im wiksza jest ta liczba, tym czciej okrelony baner bdzie wywietlany
w przegldarce. Liczba dla tego elementu moe przyjmowa wartoci
od 1 do 2 048 000 000. Jeli je przekracza, strona wywoa wyjtek.
Wszystkie elementy poza ImageURL s opcjonalne. Ponadto jeli okrelisz Ad bez NavigateURL, baner bdzie wywietlany bez hipercza.
eby skorzysta z pliku Ads.xml, stwrz now stron ASP.NET o nazwie AdRotator.aspx
zawierajc poniszy kod:
Plik AdRotator.aspx (fragment)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>AdRotator Control</title>
</head>
<body>

Rozdzia 4. Tworzenie stron internetowych ASP.NET

119

<form runat="server">
<asp:AdRotator id="adRotator" runat="server"
AdvertisementFile="Ads.xml" />
</form>
</body>
</html>

eby zobaczy obrazki reklamowe, bdziesz musia umieci pliki workatdorknozzle.gif oraz
getthenewsletter.gif w katalogu Learning. Zapisz swoj prac i przetestuj w przegldarce.
Wynik powinien wyglda podobnie do przedstawionego na rysunku 4.6.

Rysunek 4.6. Wywietlanie reklam za pomoc AdRotator.aspx

Po kilkukrotnym przeadowaniu strony bdziesz mg zauway, e pierwszy baner pojawia


si czciej ni drugi. Dzieje si tak, poniewa warto Impressions w pierwszym elemencie Ad jest dwukrotnie wiksza od wartoci w drugim elemencie, dlatego te pierwszy element bdzie pojawia si dwa razy czciej.

TreeView
Kontrolka TreeView ma ogromne moliwoci i pozwala na wywietlanie zoonej hierarchicznej struktury elementw. Zazwyczaj uywamy jej do wywietlenia struktury katalogu bd
hierarchii nawigacji, ale moe by rwnie wykorzystywana do pokazania drzewa genealogicznego, struktury organizacyjnej korporacji czy innej struktury.
TreeView moe pobiera dane z rnych rde. Rne rda danych przedstawimy w dalszej
czci ksiki. Na razie skupimy si na klasie SiteMapDataSource, zawierajcej hierar-

chiczn map witryny. Domylnie mapa ta jest wczytywana z pliku o nazwie Web.sitemap,
umieszczonego w gwnym katalogu projektu. Jest to plik XML, wygldajcy podobnie do
poniszego:
Plik: Web.sitemap
<?xml version="1.0" encoding="Windows-1250"?>
<siteMap
xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode title="Strona gwna" url="~/Default.aspx"
description="Strona gwna">
<siteMapNode title="Demo kontrolki TreeView"
url="~/TreeViewDemo.aspx"
description="Przykad kontrolki TreeView" />

120

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica


<siteMapNode title="Zdarzenie Click" url="~/ClickEvent.aspx"
description="Przykad zdarzenia Click" />
url="~/Loops.aspx"
<siteMapNode title="Ptle"
description="Przykad ptli" />
</siteMapNode>
</siteMap>

Ograniczenia Web.sitemap
Wanym ograniczeniem, o ktrym naley pamita podczas pracy z plikami Web.sitemap, jest to,
e musz zawiera tylko jeden wze SiteMapNode bdcy bezporednim potomkiem gwnego
elementu siteMap.
W powyszym przykadzie element siteMapNode z tytuem Strona gwna jest pojedynczy.
Jeli dodalibymy obok niego (a nie wewntrz niego) kolejny element siteMapNode, plik
Web.sitemap byby nieprawidowy.

eby korzysta z tego pliku, musisz doda do strony kontrolk SiteMapDataSource oraz TreeView, ktra pobiera z niej dane:
Plik: TreeViewDemo.aspx (fragment)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Demo kontrolki TreeView</title>
</head>
<body>
<form runat="server">
<asp:SiteMapDataSource ID="mySiteMapDataSource"
runat="server" />
<asp:TreeView ID="myTreeView" runat="server"
DataSourceID="mySiteMapDataSource" />
</form>
</body>
</html>

Zauwa, e SiteMapDataSource jest kontrolk, ktra nie generuje adnego kodu HTML
na stronie. Jest wiele podobnych do niej kontrolek bdcych rdami danych szczegowo zgbimy ten temat w dalszej czci ksiki.
Po poczeniu z przykadowym plikiem Web.sitemap powysza formatka internetowa wygeneruje wynik przedstawiony na rysunku 4.7.
Jak moesz zobaczy, kontrolka TreeView wygenerowaa drzewko za nas. Mona nawet rozwija i zwija ga Strona gwna.
W wielu przypadkach nie bdziemy chcieli pokazywa gwnej gazi. Moemy j ukry,
ustawiajc waciwo ShowStartingNode kontrolki SiteMapDataSource na false.

Rozdzia 4. Tworzenie stron internetowych ASP.NET

121

Rysunek 4.7.
Prosta kontrolka
TreeView

<asp:SiteMapDataSource ID="mySiteMapDataSource" runat="server"


ShowStartNode="false" />

SiteMapPath
Kontrolka SiteMapPath udostpnia funkcjonalno generujc ciek nawigacji strony.
cieka nawigacji uatwia uytkownikom orientacj, przedstawiajc w prosty sposb informacj, w jakim miejscu witryny si znajduj, oraz wywietlajc podrczne cza do rodzicielskich gazi biecej lokacji. Przykad cieki nawigacji jest przedstawiony na rysunku 4.8.
Rysunek 4.8.
cieka nawigacji
stworzona za pomoc
kontrolki SiteMapPath

Kontrolka SiteMapPath do wywietlenia biecego miejsca witryny, w ktrym znajduje si


uytkownik, automatycznie wykorzysta kad kontrolk SiteMapDataSource znajdujc
si w formatce internetowej. eby zobaczy wynik przedstawiony na rysunku 4.8, mgby
na przykad po prostu doda poniszy kod do formatki z poprzedniego przykadu:
<asp:SiteMapPath id="mySiteMapPath" runat="server"
PathSeparator=" > ">
</asp:SiteMapPath>

Jeli uruchomisz teraz przykad, zobaczysz, e cieka nawigacji pojawi dokadnie tak jak na
rysunku 4.8.
Pamitaj o tym, e kontrolka SiteMapPath pokazuje tylko ga odpowiadajc istniejcej
stronie witryny, jeli wic nie bdzie pliku Default.aspx, gwna ga nie pokae si. Podobnie,
jeli strona, ktr wczytujesz, nie nazywaaby si TreeViewDemo.aspx, kontrolka SiteMapPath niczego nie wywietli.

122

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Menu
Kontrolka Menu jest podobna do TreeView, poniewa wywietla hierarchiczne dane ze rda danych. Sposb, w jaki dziaaj obydwie kontrolki, take jest bardzo podobny. Najwaniejszymi rnicami jest ich wygld oraz to, e Menu obsuguje szablony, dziki czemu
mona j lepiej dostosowa, a take wywietla tylko dwa poziomy elementw(menu i podmenu).

MultiView
Kontrolka MultiView jest podobna do kontrolki Panel, poniewa nie generuje sama interfejsu, ale zawiera inne kontrolki. MultiView moe przechowywa wicej stron danych (nazywanych widokami) i pozwala na wywietlanie jednej z nich w danym czasie. Moesz zmieni aktywny widok (ten, ktry jest prezentowany uytkownikowi), ustawiajc warto waciwoci
ActiveViewIndex. Pierwsza strona odpowiada ActiveViewIndex o wartoci 0, druga 1,
trzecia 3, itd.
Zawarto kadego szablonu okrelana jest wewntrz potomnych elementw View. Przyjrzyj
si poniszemu fragmentowi kodu tworzcemu kontrolk Button oraz kontrolk MultiView:
Plik: MultiViewDemo.aspx (fragment)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Demo kontrolki MultiView</title>
</head>
<body>
<form runat="server">
<p>
<asp:Button id="myButton" Text="Przecz stron"
runat="server" OnClick="SwitchPage" />
</p>
<asp:MultiView ID="myMultiView" runat="server"
ActiveViewIndex="0">
<asp:View ID="firstView" runat="server">
<p>... zawarto pierwszego widoku ...</p>
</asp:View>
<asp:View ID="secondView" runat="server">
<p>... zawarto drugiego widoku ...</p>
</asp:View>
</asp:MultiView>
</form>
</body>
</html>

Jak moesz zobaczy, domyln wartoci ActiveIndex jest 0, dlatego te po pierwszym uruchomieniu powyszego kodu MultiView wywietli pierwszy szablon przedstawiony na rysunku 4.9.
Kliknicie przycisku spowoduje wywietlenie drugiego szablonu. Poniej znajduje si funkcja
obsugi SwitchPage:

Rozdzia 4. Tworzenie stron internetowych ASP.NET

123

Rysunek 4.9. Wykorzystanie kontrolki MultiView


Visual Basic

Plik: MultiViewDemo.aspx (fragment)

<script runat="server" language="VB">


Sub SwitchPage(s as Object, e as EventArgs)
myMultiView.ActiveViewIndex = _
(myMultiView.ActiveViewIndex + 1) Mod 2
End Sub
</script>

C#

Plik: MultiViewDemo.aspx (fragment)


<script runat="server" language="C#">
public void SwitchPage(Object s, EventArgs e)
{
myMultiView.ActiveViewIndex =
(myMultiView.ActiveViewIndex + 1) % 2;
}
</script>

Ta prosta procedura do ustawienia AcvtiveIndex na 1, kiedy biec wartoci jest 0 i na odwrt, uywa operatora reszty dzielenia.
Kontrolka MultiView ma wiele uytecznych funkcji, dlatego te powiniene przeczyta dokumentacj, jeli bdziesz korzysta z niej w rodowisku produkcyjnym.

Wizard
Kontrolka Wizard (kreator) jest bardziej zaawansowan wersj kontrolki MultiView. Umoliwia ona wywietlanie jednej lub wicej stron za jednym razem i posiada rwnie dodatkowe
wbudowane funkcjonalnoci, takie jak przyciski nawigacyjne czy panel boczny wywietlajcy
poszczeglne kroki kreatora.

FileUpload
Kontrolka FileUpload umoliwia uytkownikom wysyanie plikw na stron. Sposobu korzystania z tej kontrolki nauczysz si w rozdziale 14.

124

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Kontrolki internetowe uytkownika


W miar jak bdziesz tworzy rzeczywiste projekty, czsto spotkasz si z fragmentami interfejsu uytkownika, ktre pojawiaj si w wielu miejscach nagwki lub stopki, cza nawigacyjne czy okienka do logowania s tylko przykadami. Umieszczanie ich wygldu oraz zachowania we wasnych kontrolkach umoliwi Ci ponowne uycie tych skadnikw w taki sam
sposb, w jaki wielokrotnie korzystasz z wbudowanych kontrolek ASP.NET.
Tworzenie wasnych kontrolek internetowych serwera wie si z pisaniem zaawansowanego
kodu VB lub C# i wykracza poza zakres tej ksiki, ale dobrze wiedzie, e jest to moliwe.
Tworzenie dopasowanych kontrolek internetowych serwera ma sens, kiedy musisz zrobi bardziej zoone kontrolki, ktre udostpniaj due moliwoci sterowania nimi i cechuj si wysok
wydajnoci, albo jeli chcesz stworzy kontrolki, ktre atwo mona zintegrowa z wieloma
projektami.
Ci z nas, ktrzy nie s zaawansowanymi programistami, mog rozwija wasne kontrolki poprzez
tworzenie kontrolek internetowych uytkownika. One rwnie maj due moliwoci i da
si je wielokrotnie wykorzystywa w danym projekcie. Tak jak inne kontrolki, mog one udostpnia waciwoci, zdarzenia oraz metody i s atwe do zaimplementowania.
Kontrolka internetowa uytkownika jest reprezentowana przez klas, dziedziczc po System.Web.UI.UserControl i zawierajc podstawow funkcjonalno, ktr musisz rozszerzy, eby stworzy swoje wasne kontrolki. Gwn wad kontrolek internetowych uytkownika jest to, e s one silnie zwizane z projektem, w ktrym s zaimplementowane. W
zwizku z tym rozpowszechnianie czy umieszczanie ich w innym projekcie jest znacznie trudniejsze ni w przypadku internetowych kontrolek serwera.
Kontrolki internetowe uytkownika s implementowane bardzo podobnie jak zwyczajne formatki internetowe zawieraj inne kontrolki, znaczniki HTML oraz kod strony serwera.
Rozszerzeniem pliku kontrolki internetowej uytkownika jest .ascx.

Tworzenie kontrolki internetowej uytkownika


Przeledmy prosty przykad tworzenia kontrolki internetowej uytkownika. Przyjmijmy, e
na witrynie internetowej posiadasz wiele formularzy skadajcych si z par kontrolek Label
i TextBox, tak jak na rysunku 4.10.
Wszystkie etykiety musz mie sta szeroko 100 pikseli, a pola tekstowe musz przyjmowa
maksymalnie 20 znakw.
Zamiast dodawa wiele etykiet i pl tekstowych do formatki, a nastpnie ustawia ich waciwoci, uatwmy sobie ycie tworzc kontrolk internetow uytkownika, ktra zawiera
kontrolk Label o okrelonej szerokoci i pole tekstowe przyjmujce 20 znakw. Dziki temu
bdziesz mg uywa takiej kontrolki za kadym razem, kiedy bdzie potrzebna w projekcie.
W katalogu Learning stwrz nowy plik o nazwie SmartBox.ascx. Nastpnie umie w nim
czci skadowe kontrolki kontrolk Label i TextBox tak jak poniej:

Rozdzia 4. Tworzenie stron internetowych ASP.NET

125

Rysunek 4.10. Prosty formularz


Plik: SmartBox.ascx (fragment)
<p>
<asp:Label ID="myLabel" runat="server" Text="" Width="100" />
<asp:TextBox ID="myTextBox" runat="server" Text="" Width="200"
MaxLength="20" />
</p>

Szeroko etykiet w Firefoksie


Niestety, ustawienie waciwoci Width kontrolki Label nie gwarantuje, e bdzie ona miaa t
sam szeroko we wszystkich przegldarkach. Na przykad bieca wersja Firefoksa nie wywietli
powyszej etykiety tak samo jak Internet Explorer.
eby obej ten problem, powiniene wykorzysta arkusz stylw CSS oraz waciwo
CssClass. Przyjrzymy si jej w dalszej czci rozdziau.

W rozdziale 3. krtko opisalimy waciwoci, ale nie powiedzielimy, w jaki sposb stworzy
wasne waciwoci w klasie. Dotd pracowae z wieloma waciwociami wbudowanymi
w kontrolki. Na przykad widziae mnstwo przykadw kodu, w ktrym ustawiana jest waciwo Text kontrolki Label.
Poniewa kontrolka internetowa uytkownika jest klas, moe mie take metody, waciwoci
itp. Nasza kontrolka SmartBox.ascx rozszerza klas System.Web.UI.UserControl poprzez
dodanie dwch waciwoci:
LabelText jest waciwoci tylko do zapisu, umoliwiajc formatk ustawienie

tekstu etykiety w kontrolce;


Text jest waciwoci tylko do odczytu, ktra zwraca tekst wpisany w polu tekstowym

przez uytkownika.
Dodajmy do skryptu strony serwera element, ktry umoliwi nam sterowanie tymi kontrolkami jedn o nazwie Text dla tekstu w polu tekstowym i jedn o nazwie LabelText dla
tekstu w etykiecie:

126

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Visual Basic

Plik: SmartBox.ascx (fragment)

<script runat="server" language="VB">


Public WriteOnly Property LabelText() As String
Set(ByVal value As String)
myLabel.Text = value
End Set
End Property
Public ReadOnly Property Text() As String
Get
Text = myTextBox.Text
End Get
End Property
</script>

C#

Plik: SmartBox.ascx (fragment)


<script runat="server" language="C#">
public string LabelText
{
set
{
myLabel.Text = value;
}
}
public string Text
{
get
{
return myTextBox.Text;
}
}
</script>

Podobnie jak formatki internetowe, kontrolki internetowe uytkownika mog pracowa z plikami
chowajcymi kod, ale poniewa chcemy uproci przykady, nie bdziemy ich stosowa.
Z bardziej zoonymi kontrolkami internetowymi uytkownika spotkasz si w nastpnym
rozdziale.
Kiedy korzystasz z kontrolki SmartBox, moesz w poniszy sposb ustawi jej etykiet i pobra tekst wpisany przez uytkownika:
Visual Basic
mySmartBox.LabelText = "Adres:"
userAddress = mySmartBox.Text

C#
mySmartBox.LabelText = "Adres:";
userAddress = mySmartBox.Text;

Przyjrzyjmy si, jak zaimplementowalimy t funkcjonalno. W .NET waciwoci mog


by tylko do odczytu, tylko do zapisu bd do zapisu i odczytu. W wielu przypadkach bdziesz
chcia, eby waciwoci mogy by zarwno odczytywane, jak i zapisywane. Jednak w tym

Rozdzia 4. Tworzenie stron internetowych ASP.NET

127

przypadku chcemy, eby tekst wewntrznej etykiety dao si zapisa, a tekst z pola tekstowego odczytywa.
eby w VB zdefiniowa waciwo tylko do zapisu, musimy uy modyfikatora WriteOnly. Waciwoci tylko do zapisu musz definiowa specjalny blok kodu rozpoczynajcy si
od sowa kluczowego Set. Taki blok kodu, nazywany akcesorem, wyglda jak procedura
przyjmujca parametr zawierajcy warto, ktra ma by ustawiana. Warto jest wykorzystywana w kodzie do przeprowadzenia danych operacji w przypadku waciwoci LabelText bdzie to ustawienie waciwoci Text etykiety, tak jak poniej:
Visual Basic

Plik: SmartBox.ascx (fragment)

Public WriteOnly Property LabelText() As String


Set(ByVal value As String)
myLabel.Text = value
End Set
End Property

Zakadajc, e formatka korzysta z obiektu SmartBox o nazwie mySmartbox, moemy


ustawi waciwo tekst etykiety w poniszy sposb:
Visual Basic
mySmartBox.LabelText = "Adres:"

Kiedy wykonywany jest powyszy kod, wywoywany jest akcesor Set waciwoci LabelText z parametrem value o wartoci Adres:. Akcesor uyje tej wartoci do ustawienia
waciwoci Text kontrolki Label.
Innym akcesorem, ktrego moesz uy podczas definiowania waciwoci, jest Get. Umoliwia on zamiast zapisywania, odczytywanie wartoci. Oczywicie, nie moesz doda akcesora
Get do wartoci z modyfikatorem WriteOnly, ale jest on wymagany dla waciwoci z modyfikatorem ReadOnly, takiej jak Text:
Visual Basic

Plik: SmartBox.ascx (fragment)

Public ReadOnly Property Text() As String


Get
Text = myTextBox.Text
End Get
End Property

Waciwo Text jest tylko do odczytu, ale nie musi tak by. Jeli chciaby umoliwi formatkom wykorzystywanie kontrolki do ustawiania domylnego tekstu w polu tekstowym,
musiaby doda akcesor Set i usun modyfikator ReadOnly.
Kiedy definiujesz waciwoci w C#, nie musisz ustawia adnych specjalnych modyfikatorw, takich jak ReadOnly czy WriteOnly, dla waciwoci tylko do zapisu i tylko do odczytu. Waciwo, ktra ma tylko akcesor get, bdzie domylnie uznawana jako tylko do
odczytu.

128

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

C#

Plik: SmartBox.ascx (fragment)


public string Text
{
get
{
return myTextBox.Text;
}
}

Podobnie, waciwo, ktra ma tylko akcesor set, bdzie uznawana za tylko do zapisu:
C#

Plik: SmartBox.ascx (fragment)


public string LabelText
{
set
{
myLabel.Text = value;
}
}

Korzystanie z kontrolek internetowych uytkownika


Po stworzeniu kontrolki uytkownika mona si do nich odnosi ze strony ASP.NET za pomoc
dyrektywy Register:
<%@ Register TagPrefix="prefix" TagName="name"'
Src="source.ascx" %>

Dyrektywa Register wymaga trzech atrybutw:


TagPrefix

Przedrostek dla kontrolki uytkownika umoliwiajcy grupowanie powizanych


kontrolek razem i uniknicie konfliktu nazw.
TagName

Nazwa znacznika kontrolki, ktra bdzie uywana podczas dodawania kontrolki


do strony ASP.NET.
Src

cieka do pliku .ascx opisujcego kontrolk uytkownika.


Po zarejestrowaniu kontrolki, jej instancje tworzymy za pomoc znacznika <TagPrefix:TagName>.
Wyprbujmy przykad korzystajcy z kontrolki SmartBox. Stwrz nowy plik o nazwie ControlTest. aspx w katalogu Learning i umie w nim nastpujc zawarto:
Plik: ControlTest.aspx (fragment)
<%@ Register TagPrefix="sp" TagName="SmartBox"
Src="SmartBox.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

Rozdzia 4. Tworzenie stron internetowych ASP.NET

129

<head>
<title>Tworzenie kontrolki internetowej uytkownika w ASP.NET</title>
</head>
<body>
<form id="Form1" runat="server">
<sp:SmartBox id="nameSb" runat="server" LabelText="Imi:" />
<sp:SmartBox id="addressSb" runat="server"
LabelText="Adres:" />
<sp:SmartBox id="countrySb" runat="server"
LabelText="Kraj:" />
<sp:SmartBox id="phoneSb" runat="server"
LabelText="Telefon:" />
</form>
</body>
</html>

Wczytanie tej strony spowoduje wygenerowanie wyniku, ktry widzielimy na rysunku 4.10.
Oczywicie jest to bardzo prosty przykad, ale atwo moemy go rozbudowa do innych celw.
W powyszym kodzie moesz zobaczy, e ustawiamy waciwo LabelText bezporednio w znaczniku kontrolki. Zamiast tego moglibymy odwoywa si do waciwoci z poziomu kodu, tak jak poniej:
Visual Basic

Plik: ControlTest.aspx (fragment)

<script runat="server" language="VB">


Protected Sub Page_Load()
nameSb.LabelText = "Imi:"
addressSb.LabelText = "Adres:"
countrySb.LabelText = "Kraj:"
phoneSb.LabelText = "Telefon:"
End Sub
</script>

C#

Plik: ControlTest.aspx (fragment)


<script runat="server" language="C#">
protected void Page_Load()
{
nameSb.LabelText = "Imi:";
countrySb.LabelText = "Adres:";
addressSb.LabelText = "Kraj:";
phoneSb.LabelText = "Telefon:";
}
</script>

Strony wzorcowe
Strony wzorcowe s now funkcjonalnoci w ASP.NET, ktra wiele zmienia w sposobie
skadania formatek internetowych. Strony wzorcowe s podobne do kontrolek internetowych
uytkownika, poniewa skadaj si z HTML-a i innych kontrolek, mog by rozszerzane o zdarzenia, metody i waciwoci, a take nie mog by wczytywane bezporednio przez uytkowni-

130

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

kw zamiast tego s uywane jak klocki, ktre mona wykorzysta podczas projektowania
struktury formatki internetowej.
Strona wzorcowa jest szablonem strony, ktry moe by zastosowany do nadania wielu formatkom internetowym spjnego wygldu. Na przykad moe ona okrela standardow struktur
zawierajc nagwek, stopk i inne elementy, ktre maj by wywietlane na wielu formatkach
internetowych aplikacji.
Pliki stron wzorcowych zawsze maj rozszerzenie .master i, podobnie do formatek internetowych i kontrolek internetowych uytkownika, obsuguj pliki ukrywajce kod. Wszystkie
strony wzorcowe dziedzicz po klasie System.Web.UI.MasterPage.
Tworzenie struktury witryny za pomoc stron wzorcowych i kontrolek internetowych uytkownika daje due moliwoci atwego modyfikowania i rozszerzania witryny. Jeli witryna
korzysta z tych funkcjonalnoci w dobrze zaplanowany sposb, modyfikowanie poszczeglnych elementw strony lub jej funkcjonalnoci moe by bardzo atwe, poniewa aktualizowanie strony wzorcowej lub kontrolki internetowej uytkownika wywouje natychmiastowy
efekt we wszystkich formatkach internetowych, ktre z nich korzystaj.
Jak ju wspomnielimy, strona wzorcowa jest tworzona za pomoc HTML-a i kontrolek,
wczajc w to specjaln kontrolk ContentPlaceHolder. Jest ona zamarkowanym miejscem, ktre moe by wypenione zawartoci odpowiedni do potrzeb kadej formatki internetowej korzystajcej ze strony wzorcowej. Podczas tworzenia strony wzorcowej doczamy do
niej ca podstawow struktur przyszych stron, ktre bd z niej korzysta, wczajc w
to znaczniki <html>, <head> oraz <body>, i umoliwiamy stronie internetowej okrelenie
zawartoci wywietlanej w zamarkowanych miejscach.
Zobaczmy na prostym przykadzie, w jaki sposb to dziaa. Przypumy, e mamy witryn
z wieloma stronami zawierajcymi standardowy nagwek, stopk i menu nawigacyjne, uoone
tak jak ramki na rysunku 4.11.
Jeli wszystkie strony w witrynie maj ten sam nagwek, stopk i menu nawigacyjne, mona
umieci te komponenty w stronie wzorcowej i tworzy formatki internetowe, ktre na kadej
stronie dopasowuj tylko obszary zawartoci. Zaczniemy tworzy tak stron w rozdziale 5.,
ale przyjrzyjmy si krtkiemu przykadowi.
Dla uproszczenia nie doczymy menu doczymy tylko nagwek, stopk i miejsce na
zawarto. W folderze Learning stwrz nowy plik o nazwie FrontPages.master i wpisz do niego
poniszy kod:
Plik: FrontPages.master (fragment)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

Rozdzia 4. Tworzenie stron internetowych ASP.NET

131

Rysunek 4.11.
Prosty ukad witryny
internetowej

<head>
<title>Strona gwna</title>
</head>
<body>
<form id="myForm" runat="server">
<h1>Witamy w SuperSite Inc!</h1>
<asp:ContentPlaceHolder id="FrontPageContent"
runat="server" />
<p>Copyright 2006</p>
</form>
</body>
</html>

Strona wzorcowa wyglda niemale jak formatka internetowa, z wyjtkiem jednej wanej
rnicy: ma pust kontrolk ContentPlaceHolder. Jeli chcesz stworzy formatk internetow opart na tej stronie wzorcowej, musisz tylko odnie si do niej za pomoc dyrektywy Page i doda kontrolk Content z zawartoci, ktr chcesz umieci.
Sprbujmy to zrobi. Stwrz formatk internetow o nazwie FronPage.aspx i dodaj do niej
poniszy kod:
Plik: FrontPage.master (fragment)
<%@ Page MasterPageFile="FrontPages.master" %>
<asp:Content id="myContent" runat="server"
ContentPlaceHolderID="FrontPageContent">
<p>
Witamy na naszej witrynie! yczymy przyjemnej wizyty.
</p>
</asp:Content>

Wszystko gotowe! Po wczytaniu FrontPage.aspx przegldarka wygeneruje wynik widoczny


na rysunku 4.12.

132

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Rysunek 4.12. Korzystanie ze strony wzorcowej

Chocia powyszy przykad jest bardzo prosty, atwo mona zobaczy otwierajce si moliwoci: moesz bez problemu stworzy wiele formatek internetowych opartych na tym szablonie. W naszym przypadku strona wzorcowa zawiera tylko pojedyncz kontrolk ContentPlaceHolder, ale mogaby mie ich wicej. Ponadto strona wzorcowa moe
definiowa zawarto, domylnie wywietlan wewntrz kontrolki ContentPlaceHolder na
stronach, ktrych formatki nie maj elementu Content dla tej kontrolki.

Korzystanie z kaskadowych arkuszy stylw (CSS)


To oczywiste, e kontrolki uatwiaj ponowne uywanie funkcjonalnoci w wielu miejscach.
Nie sposb wyobrazi sobie atwiejszego sposobu dodawania kalendarzy do wielu formatek
internetowych ni wykorzystanie kontrolki internetowej serwera Calendar.
Jednak kontrolki nie rozwizuj problemu okrelania i zarzdzania wizualnymi elementami
witryny internetowej. Nowoczesne witryny internetowe, eby zachowa wiey wygld, wymagaj cigej aktualizacji. Rczna edycja setek stron po to tylko, eby zmieni na przykad
kolor ramki, nie jest zbyt przyjemna, nie wspominajc ju o tym, e po takiej operacji trzeba
sprawdzi, czy zmiany s spjne. Bywa to nawet jeszcze bardziej nieprzyjemne, jeli klient
chce powaniejszej aktualizacji, takiej jak poprzestawianie elementw na stronie.
Dobr wiadomoci jest to, e praca utrzymaniowa moe by duo atwiejsza dziki planowaniu na przyszo, prawidowemu zastosowaniu kilku podstawowych zasad i wydajnemu
wykorzystaniu narzdzi, ktre oferuje HTML i ASP.NET.
Podstawowym narzdziem do tworzenia wizualnych stylw wielokrotnego uytku jest CSS
(kaskadowy arkusz stylw). Pocztkowo HTML by projektowany do udostpniania prostej
zawartoci tekstowej i nie zwracano zbyt wielkiej uwagi na to, jak poszczeglne elementy
wyglday w przegldarce. HTML pozostawia t decyzj kadej przegldarce, a ona z kolei
dopasowywaa wygld do ogranicze i moliwoci komputera uytkownika. Chocia moemy
zmieni czcionk, rozmiary kolory itp. za pomoc znacznikw HTML, moe to doprowadzi
do skomplikowania kodu i spowodowa, e pniej bdzie bardzo trudno zmieni styl stron.
CSS umoliwia twrcom witryn internetowych tworzenie pojedynczych zestaww stylw
w jednym miejscu i zastosowanie ich we wszystkich stronach witryny. Strony korzystajce

Rozdzia 4. Tworzenie stron internetowych ASP.NET

133

z takiego arkusza stylw bd wywietla te same czcionki, kolory i rozmiary, dziki czemu
witryna bdzie miaa spjny wygld. Bez wzgldu na to, czy witryna zawiera trzy czy trzysta
stron, zmiana stylu w arkuszu spowoduje, e natychmiast zmieni si wygld wszystkich stron,
ktre z niego korzystaj.

Przyjrzyj si tematom i skrkom


ASP.NET 2.0 udostpnia dodatkowe moliwoci dla twrcw elementw wizualnych wielokrotnego uycia tematy i skrki. Dowiesz si o nich wicej w rozdziale 5.

Typy stylw i arkuszy stylw


S trzy rne sposoby powizania stylw z elementami na stronie:
Zewntrzne arkusz stylw
Dziki umieszczeniu regu stylw w zewntrznym arkuszu stylw kada strona, ktra
bdzie z nich korzysta, musi by poczona tylko z jednym plikiem. Powoduje to,
e aktualizacja wygldu strony staje si dziecinnie prosta.
eby skorzysta z zewntrznego arkusza stylw w formatce internetowej, naley
umieci w jej elemencie head nastpujcy znacznik:
<link rel="stylesheet" type="text/css" href="plik.css" />

W powyszym przykadzie plik.css byby plikiem tekstowym zawierajcym reguy CSS,


podobnym do poniszego:
a
{
background: #ff9;
color: #00f;
text-decoration: underline;
}

Osadzony arkusz stylw


Reguy stylw moesz umieci wewntrz znacznikw <style
type="text/css"> w sekcji head strony.
<style type="text/css">
a
{
background: #ff9;
color: #00f;
text-decoration: underline;
}
</style>

Problemem podczas korzystania z osadzonych stylw jest to, e nie mona ich uy
ponownie w innej stronie, co znacznie utrudnia wprowadzanie zmian dotyczcych
caej witryny.

134

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica

Wplatane reguy stylw


Wplatane style umoliwiaj nadanie stylu pojedynczemu elementowi za pomoc
atrybutu style. Na przykad za pomoc poniszego oznaczenia moglibymy nada
akapitowi czerwon ramk:
<p style="border-style: groove; color: red;">
Copyright 2006
</p>

Jeli dana regua jest uywana w osadzonym lub zewntrznym arkuszu stylw, jej pierwsza
cz musi okrela elementy, ktrych ma dotyczy ta regua. Robimy to za pomoc selektora.
W ASP.NET zazwyczaj uywamy dwch typw selektorw:
Selektor typu elementu
Selektor typu elementu jest stosowany dla kadej instancji okrelonego elementu. Na
przykad jeli chcielibymy zmieni kolor wszystkich nagwkw drugiego poziomu
w dokumencie, uylibymy selektora dla elementu typu <h2>:
h2
{
color: #369;
}

Klasy
Bezsprzecznie najpopularniejszym sposobem wykorzystania stylw w stronie jest
nadanie kademu elementowi atrybutu class, a nastpnie okrelenie stylu dla
elementw posiadajcych dan warto tego atrybutu. Na przykad ponisze oznaczenie
wywietla akapit, ktrego atrybut class ma warto fineprint:
<p class="fineprint">
Copyright 2006
</p>

Teraz, wiedzc, e wszystkie elementy z atrybutem class rwnym fineprint maj


by wywietlone drobnym drukiem, stworzymy regu stylu, ktra zmniejszy tekst w
tym akapicie oraz we wszystkich elementach z atrybutem class="fineprint":
.fineprint
{
font-family: Arial;
fon-size: x-small;
}

Bez wzgldu na to, czy tworzysz zewntrzne arkusze, osadzone arkusze czy wplatane reguy
stylw, deklaracje stylw uywaj tej samej skadni.
Masz ju podstawowe pojcie o niektrych koncepcjach zawartych w CSS, przyjrzyjmy si
wic rnym typom stylw, ktre mog by uywane w aplikacjach ASP.NET.

Waciwoci stylw
Za pomoc stylw moesz zmienia wiele rnych typw waciwoci. Poniej znajduje si
lista najbardziej powszechnych typw waciwoci:

Rozdzia 4. Tworzenie stron internetowych ASP.NET

135

Czcionka
Ta kategoria udostpnia formatowanie elementw tekstowych, wczajc w to krj
czcionki, rozmiary, ozdabianie, grubo, kolory itp.
To
Ta kategoria umoliwia dostosowanie ta obiektw i tekstu. Wartoci w tej kategorii
pozwalaj zmienia to, wczajc w to wybr, czy jako to ma by uywany kolor,
czy rysunek i czy rysunek ta ma by powtarzany.
Blok
Ta kategoria umoliwia zmian odlegoci pomidzy akapitami, liniami tekstu, sowami
i literami.
Pudeko
Ta kategoria umoliwia dopasowanie tabel. W zalenoci od potrzeb moesz zmienia
obramowanie, marginesy wewntrzne, odlegoci i kolory w tabeli, wierszu lub
komrce.
Ramki
Tak kategoria umoliwia wywietlanie wok elementw strony ramek o rnych
kolorach, stylach i gruboci.
Lista
Ta kategoria umoliwia dopasowanie sposobu, w jaki tworzone s numerowane
i nienumerowane listy.
Pozycjonowanie
Zmiana pozycjonowania umoliwia dowolne przesuwanie i umiejscawianie znacznikw
i kontrolek na stronie.
Powysze kategorie przedstawiaj zarys aspektw projektowych, ktre mog by zmieniane
za pomoc CSS. W miar postpw w lekturze tej ksiki wiele z tych typw waciwoci
stylw zostanie wyjanionych.

Waciwo CssClass
Po zdefiniowaniu klasy w arkuszu stylw (zewntrznym bd wewntrznym) bdziesz chcia
j powiza z elementami w formatkach internetowych. Moesz je powiza z kontrolkami
internetowymi serwera w ASP.NET za pomoc waciwoci CssClass. W wikszoci
przypadkw warto, jak nadasz waciwoci CssClass, bdzie uywana jako warto
atrybutu class elementu tworzonego przez kontrolk.
Przyjrzyjmy si przykadowi. Najpierw w katalogu Learning stwrz plik o nazwie Styles.css
i skopiuj do niego poniszy kod:
Plik: Styles.css
.title
{
font-family: Arial, Helvetica, sans-serif;
font-size: 19px
}
.dropdownmenu
{

136

ASP.NET 2.0. Tworzenie witryn internetowych z wykorzystaniem C# i Visual Basica


font-family: Arial;
background-color: #0099FF;
}
.textbox
{
font-family: Arial;
background-color: #0099FF;
border: 1px solid
}
.button
{
font-family: Arial;
background-color: #0099FF;
border: 1px solid
}

Nastpnie stwrz plik o nazwie UsingStyles.aspx zawierajcy poniszy kod:


Plik: UsingStyles.aspx (fragment)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testowanie CSS</title>
<link href="Styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<p class="title">Prosz wybra produkt:</p>
<p>
<asp:DropDownList id="productsList"
CssClass="dropdownmenu" runat="server">
<asp:ListItem Text="Koszula" selected="true" />
<asp:ListItem Text="Kapelusz" />
<asp:Listitem Text="Majtki" />
<asp:ListItem Text="Skarpetki" />
</asp:DropDownList>
</p>
<p>
<asp:TextBox id="quantityTextBox" CssClass="textbox"
runat="server" />
</p>
<p>
<asp:Button id="addToCartButton" CssClass="button"
Text="Dodaj do koszyka" runat="server"
/>
</p>
</form>
</body>
</html>

Po wczytaniu tej strony powinien wywietli si wynik, widoczny na rysunku 4.13.

Rozdzia 4. Tworzenie stron internetowych ASP.NET

137

Rysunek 4.13. CSS w dziaaniu

W nastpnym rozdziale nauczymy si korzysta z programu Visual Web Developer do tworzenia definicji CSS za pomoc prostego wizualnego interfejsu.

Podsumowanie
W tym rozdziale omwilimy formatki internetowe, kontrolki HTML serwera, kontrolki internetowe serwera, kontrolki internetowe uytkownika, strony wzorcowe oraz arkusze stylw.
Wszystkie te elementy mog by poczone w celu stworzenia struktur o duych moliwociach
dla witryn internetowych.
W nastpnym rozdziale zaczniemy tworzy prawdziwe aplikacje internetowe, przekadajc
na praktyk wikszo teorii, ktr dotd poznae, a take korzystajc z profesjonalnych
rodowisk programistycznych, ktre wykonaj cz pracy za Ciebie.

Vous aimerez peut-être aussi