14

ASP.NET Starter Kit

www.sdjournal.org

Software Developer’s Journal Extra! 20

Stefan Turalski

Podstawy ASP.NET 2.0

– tworzenie aplikacji internetowych

N

iezwykle trudno jest stworzyć artykuł oma-

wiający wszystkie aspekty zastosowania naj-

nowszej platformy programistycznej firmy

Microsoft. Wszak ASP.NET 2.0 to zestaw wielu narzę-

dzi oraz możliwość skorzystania z całego potencjału

platformy .NET 2.0. Jeszcze trudniej jest przedstawić

zarówno nowe, jak i istniejące już w poprzednich wer-

sjach elementy środowiska, tak aby zarówno doświad-

czeni programiści jak i osoby stawiające pierwsze kro-

ki mogły czerpać z tego artykułu. Postaraliśmy się

przedstawić na prostym przykładzie w miarę szero-

ki wachlarz możliwości ASP.NET 2.0. Zapraszamy do

podróży – nasz cel to poznanie podstawowych funkcji

ASP.NET 2.0 i narzędzi firmy Microsoft wspierających

proces tworzenia aplikacji w tym środowisku.

Narzędzia

Zanim rozpoczniemy naszą podróż warto się do niej

odpowiednio przygotować, kolekcjonując odpowied-

ni ekwipunek. Jak wiadomo, co do sprzętu i narzędzi

opinii jest tyle, ilu jest ekspertów. Na początek propo-

nujemy sprawdzony duet: Visual Web Developer 2005
Express Edition oraz SQL Server 2005 Express Edi-
tion. Dlaczego? Przede wszystkim dlatego, że opro-

gramowanie to możemy nieodpłatnie pobrać ze strony

Microsoft. Także dlatego, że wersje te posiadają niemal

wszystkie funkcje potrzebne do rozwoju aplikacji inter-

netowych. Są wręcz przygotowane z myślą o osobie,

która dopiero rozpoczyna przygodę z ASP.NET. Śro-

dowisko IDE pozwalające programiście w sposób łatwy

i przyjemny tworzyć aplikacje jest jednym z wielu powo-

dów, dla jakich początkujący deweloperzy decydują się

na wybór platformy .NET jako podstawy do dalszej na-

uki. Pod tym względem środowisko IDE Visual Web De-
veloper nie odstępuje o wiele bardziej rozbudowanym,

ale dostępnym odpłatnie wersjom Visual Studio:

• Zawiera graficzny interfejs, który umożliwia tworze-

nie interfejsu użytkownika przy pomocy „drag-and-
drop”.

• Zastosowano w nim usprawnioną technologię

IntelliSense, która podpowiada programiście skład-

nię podczas tworzenia kodu. Mechanizm ten został

udoskonalony – w porównaniu z poprzednią wersją

produkt. Podpowiadanie działa nie tylko wtedy, gdy

kod aplikacji tworzony jest w osobnym pliku, ale tak-

że gdy jest on wymieszany wraz z kodem odpowie-

dzialnym za wizualną część strony internetowej. Co

więcej, IntelliSense wspomaga programistę także

w tworzeniu tagów HTML, czy nawet w skryptów Ja-
vaScript.

• Wraz z platformą ASP.NET dostarczany jest boga-

ty zestaw kontrolek, przydatnych szczególnie przy

tworzeniu konwencjonalnych rozwiązań, takich jak:

typowe serwisy, strony internetowe czy standardo-

we metody uwierzytelniania. Znajdziemy też kom-

ponenty usprawniające proces przeprowadzania

operacji związanych z pobieraniem danych z wszel-

kich źródeł, takich jak bazy danych, pliki XML, itp.

• W rozwiązanie wbudowany jest również samodziel-

ny serwer HTTP o ograniczonej funkcjonalności,

dzięki czemu tworzenie oprogramowania jest ła-

twiejsze.

Jeśli poważnie myślisz o rozwoju aplikacji .NET pole-

cam jednak pełną wersję środowiska IDE, używane-

go do rozwoju komercyjnych rozwiązań. Podczas two-

rzenia aplikacji internetowych często korzysta się z ba-

zy danych. Dlatego kolejnym narzędziem przydatnym

w naszej podróży z ASP.NET jest SQL Server 2005
Express Edition. Wybór był oczywisty – SQL Server

Autor pracuje na stanowisku – projektant oprogramowa-
nia w firmie Silicon & Software Systems Polska. Z za-
interesowaniem przygląda się rozwojowi technologii IT,
dawno już straciwszy nadzieję, że jest w stanie ogarnąć
tę dziedzinę wiedzy.
Kontakt z autorem [e-mail]

Rysunek 1.

Okno Solution Explorer

Plik konfiguracyjny Web.config

Plik Web.config jest plikiem konfiguracyjnym aplikacji
w formacie XML. Pozwala on modyfikować zachowa-
nie aplikacji w takich aspektach jak: bezpieczeństwo, za-
rządzanie pamięcią, czy też tryb kompilacji oraz wiele in-
nych ustawień dotyczących elementów działania aplika-
cji webowej. Ustawienia modyfikujemy dodając do ele-
mentu

<configuration><system.web>

odpowiednie po-

delementy np.

<trace enabled=„true”/>

. Lista ele-

mentów jakie może zawierać Web.con fig znajduje się
w pliku Web.config.comments w katalogu C:\Windows\
Microsoft.NET\Framework\WersjaFramework\Config

15

www.sdjournal.org

Software Developer’s Journal Extra! 20

2005 Express Edition posiada bowiem wiele funkcji silnie zintegro-

wanych ze środowiskiem .NET, jest dostępny nieodpłatnie i stan-

dardowo dołączony do pakietu instalacyjnego Visual Web Develo-
per. SQL Server 2005 Express Edition to także pełnowartościowy

silnik bazy danych SQL Server 2005. Mimo pewnych ograniczeń,

które stają się istotne dopiero przy wdrażaniu komercyjnych apli-

kacji, doskonale sprawdza się w warunkach deweloperskich.

Przygodę czas zacząć

Najtrudniej będzie nam rozpocząć podróż. Część z Was być

może jeszcze nie miała doświadczenia w budowaniu aplikacji

webowych. Może tworzyliście rozwiązania w ASP lub w oparciu

o PHP i z zainteresowaniem przypatrujecie się rozwojowi kon-

kurencyjnego środowiska. A może doskonale znacie rozwiąza-

nia ze świata J2EE lub programowaliście w ASP.NET 1.1 i inte-

resują Was tylko zmiany wprowadzone w nowej wersji? Jakakol-

wiek będzie Wasza odpowiedź, wędrówkę najlepiej będzie roz-

począć od początku, czyli od samych podstaw tworzenia aplika-

cji webowych w technologii ASP 2.0. Trasa będzie jednak na ty-

le urozmaicona, że mam nadzieję, że osoby sprawnie posługu-

jące się ASP.NET 1.* także znajdą w tym artykule coś dla siebie.

Doświadczonych programistów rozwiązań webowych prosimy

jednak o wyrozumiałość. Aby artykuł ten był ogólnie przystępny

i zrozumiały, zastosowano w nim wiele uogólnień czy też

uproszczeń. Sugerowane rozwiązania mogą być zalecane

głównie przy tworzeniu niewielkich serwisów informacyjnych

lub wręcz nie zalecane, np. jawne podanie hasła w Connection-
String w pliku konfiguracyjnym, który powinien być odpowiednio

zaszyfrowany i niedostępny dla postronnych użytkowników.

Jak działają aplikacje internetowe?

Aplikacje webowe funkcjonują dzięki współpracy i komunikacji

pomiędzy serwerem webowym (HTTP) oraz przeglądarką klien-

ta. Wymiana danych odbywa się przy użyciu protokołu HTTP,

a sam mechanizm komunikacji jest prosty i oferuje zestaw ko-

mend, z których najistotniejsze to

HEAD

,

GET

i

POST

. Serwer webo-

wy nasłuchuje na żądania najczęściej na porcie TCP 80. Gdy ser-

wer otrzyma żądanie typu

HEAD

, po odpowiednim przygotowaniu,

klientowi zostaną odesłane informacje o udostępnionym pod da-

nym adresem URI dokumencie. Otrzymanie przez serwer żąda-

nia typu

GET

spowoduje odesłanie oprócz informacji zawierają-

cych opis dokumentu także jego zawartość, natomiast polecenie

POST

uruchamia proces, który przetwarza informacje dostarczone

przez klienta do serwera, a następnie odsyła odpowiedź. Doku-

ment przesyłany do przeglądarki to najczęściej: strumień znaków

składających się na plik HTML, dane w formacie XML, zawartość

multimedialna taka jak pliki graficzne, animacje, słowem wszystko

z czego zbudowany jest dzisiejszy Internet. W przeszłości serwi-

sy internetowe złożone były głównie ze statycznych stron HTML.

Znacznie ograniczało to ich funkcjonalność, a zarządzanie tego

typu witryną, w miarę jej rozwoju, stawało się bardzo pracochłon-

nym zadaniem. W związku z tym pojawiało się wiele rozwiązań

pozwalających na dynamiczne generowanie stron HTML. Jed-

nym z tych rozwiązań jest technologia Active Server Pages (ASP)

oraz oczywiście jej następca – ASP.NET. Być może znasz już in-

ne platformy pozwalające na tworzenie dynamicznych serwisów

i zarządzanie nimi w łatwy i przyjemny sposób. Postaramy się

jednak zaprezentować, w czym ASP.NET jest lepszy.

Musimy zdać sobie sprawę z tego, że ASP.NET jest swoistym

rozszerzeniem zwykłego serwera HTTP. Gdy serwer otrzyma żą-

danie przetwarzania strony, która jest uruchamiana w środowi-

sku ASP.NET, silnik ASP.NET wywołuje specjalną metodę Pro-
cessRequest interfejsu IHttpHandler. Metoda ta dynamicznie two-

rzy specjalną klasę służącą do obsługi żądania pliku aspx. Auto-

matycznie jest ustanawiany cały kontekst wywołania HTTP oraz

tworzone są obiekty Request i Response służące jako wejście

i wyjście w komunikacji środowiska ze światem. Środowisko przy-

gotowuje również drzewo kontrolek, które są zadeklarowane we-

wnątrz plików stron ASP.NET (aspx). Następnie kolejno, w zależ-

ności od typu żądania, wczytywana i odpowiednio interpretowana

jest zawartość strony. To właśnie dzięki temu, że praktycznie każ-

de odwołanie się do serwera może spowodować wygenerowanie

nowej, zmodyfikowanej strony, środowiska typu ASP.NET są dziś

tak powszechnie stosowane przy tworzeniu zaawansowanych

rozwiązań internetowych. Każda kontrolka może być odpowied-

nio modyfikowana w czasie działania aplikacji. Dane pochodzące

od klienta mogą być odpowiednio przetwarzane po stronie ser-

wera np. mogą wpływać na proces przetwarzania i wyświetlania

strony. Proces przetwarzania po stronie serwera umożliwia bar-

dzo łatwą integrację ze źródłami danych i warstwą logiki bizneso-

wej. A przy tym budowanie dynamicznych stron jest stosunkowo

łatwe, dzięki wspomnianym już narzędziom. Jak wykorzystać po-

tencjał tego środowiska postaramy się zaprezentować na poniżej

zaprezentowanym przykładzie.

Zarządzanie kodem

Visual Web Developer pozwala Ci wybrać jeden z dwóch mode-
li zarządzania kodem. Pierwszy model zakłada, że cały kod: HTML
i funkcje wywoływane po stronie serwera znajdują się w tym samym
pliku. W odróżnieniu od ASP.NET 1.1 wersja 2.0 dostarcza pełnego
wsparcia dla takiego rozwiązania. Możemy także wybrać opcję roz-
dzielenia kodu. Wtedy oprócz pliku .aspx, zostanie utworzony do-
datkowo powiązany z nim plik .cs lub vb. Jest to rozwiązanie zale-
cane głównie ze względu na czytelność kodu.

Rysunek 2.

WelcomePage.aspx w widoku Source i Design

Rysunek 3.

Web Form AddAlbum.aspx po dodaniu kontrolek

16

ASP.NET Starter Kit

www.sdjournal.org

Software Developer’s Journal Extra! 20

Tworzymy aplikację w ASP.NET 2.0

Aby utworzyć nowy projekt należy z menu File->New Web Site

wybrać opcję ‘Empty Web Site’ oraz podać nazwę projektu – w na-

szym przypadku WebSitePhotoAlbums. Postaramy się zbudować

prosty webowy serwis służący do prezentowania albumów zdjęć.

Podczas tworzenia projektu mamy możliwość dokonania wy-

boru języka programowania. Zamieszczone w tym artykule frag-

menty kodu są stworzone w języku C#. Choć jeśli znasz Visual
Basic.NET nic nie stoi na przeszkodzie, abyś wybrał tę opcję. Du-

żą zaletą środowiska .NET jest fakt, że sposób podejścia do roz-

woju aplikacji ASP.NET jest prawie niezależny od języka progra-

mowania. Im lepiej poznasz samą platformę .NET tym szybciej

zorientujesz się, że wszystkie języki programowania, są wykony-

wane przez wspólny silnik – Common Language Runtime (CLR).

Kontynuując konfigurowanie nowego projektu lokację po-

zostawimy bez zmian (File System). Szczegółowe informacje

o tym, jakie możliwości stwarza, a jakie odbiera wybranie takiej

lokacji, zawiera artykuł pod tytułem: „Możliwości umiejscowie-

nia Web Applications oferowane przez Visual Studio 2005”.

Pusta aplikacja internetowa została utworzona. Pliki wcho-

dzące w skład projektu można zawsze obejrzeć w oknie Solution
Explorer. Jeśli twoje środowisko jest skonfigurowane tak, że okno

to nie jest widoczne, można je uruchomić korzystając z opcji me-

nu View->Solution Explorer. Narzędzie to, nie tylko prezentują-

ce w widoku drzewa pliki wchodzące w skład naszej aplikacji, ale

także pozwalajala na zarządzanie nimi poprzez m.in. dodawa-

nie nowych elementów, zmianę ich nazwy, czy też przenoszenie

ich w obrębie projektu. Należy zwrócić uwagę na fakt, że w skład

aplikacji mogą wchodzić różne typy plików: począwszy od cha-

rakterystycznych dla stron ASP.NET plików o rozszerzeniu aspx,

plików cs czy vb zawierających kod źródłowy poprzez pliki z ko-

dem HTML, pliki graficzne, arkusze styli CSS, pliki XML zawiera-

jące dane konfiguracyjne i wiele, wiele innych.

Załóżmy, że posiadamy już stronę HTML, którą chcielibyśmy

dołączyć do tworzonej aplikacji ASP.NET 2.0. Możemy to zrobić,

klikając prawym klawiszem myszki WebSitePhotoAlbums w So-
lution Explorer i wybierając z menu ‘Add Exiting Item…’ Następ-

nie wskazujemy ścieżkę do pliku HTML, który automatycznie

zostanie dołączony do projektu. Pozostaje nam tylko dodać pli-

ki graficzne. Obrazy dodajemy do projektu tak samo jak wszyst-

kie inne pliki. Aby jednak zachować pewien porządek, środowi-

sko umożliwia nam tworzenie w ramach projektu struktury kata-

logów. Zakładamy zatem nowy folder o nazwie „graph”, w którym

przechowywać będziemy pliki graficzne. Aby dodać nowy folder

do projektu, z menu kontekstowego WebSitePhotoAlbums wy-

bieramy opcję ‘New Folder’. Gdy już utworzyliśmy katalog, mo-

żemy dodać do niego odpowiednie pliki. Po zakończeniu ope-

racji, widok w oknie Solution Explorer powinien prezentować się

mniej więcej tak, jak na Rysunku 1.

Możemy teraz podejrzeć, jak wygląda nasza strona. Aby uru-

chomić projekt, wybieramy opcję menu „Debug->Start Debug-
ging”. Środowisko zareaguje pytaniem, czy stworzyć nowy plik

konfiguracyjny na potrzeby naszej aplikacji, czy wolimy urucho-

mić aplikację bez funkcji debuggowania. My wybieramy opcję

‘Add a new Web.config file’ i w oknie przeglądarki możemy oglą-

dać nasze dzieło. Nic imponującego? Faktycznie, mimo iż Visu-
al Web Developer udostępnia funkcjonalność związaną z two-

rzeniem tradycyjnych stron, taką jak kolorowanie składni czy for-

matowanie kodu, to szkoda nie wykorzystać pełni możliwości te-

go środowiska IDE, ograniczając się jedynie do tworzenia stron

HTML. Dodajmy zatem do projektu prawdziwą stronę ASP.NET.

Klikamy prawym klawiszem WebSitePhotoAlbums i korzystamy

z funkcji ‘Add New Item…’. W pojawiającym się oknie wybiera-

my ‘Web Form’ i podajmy nazwę pliku „WelcomePage.aspx”. Po-

nownie będziemy mogli wybrać język programowania. Będziemy

mogli także zadecydować, czy chcemy aby kod został umiesz-

czony w osobnym pliku. Ze względu na to, że przykład zawiera

niewielką ilość kodu, opcję ‘Place code in separate file’ pozosta-

wiamy niezaznaczoną. Na razie nie wybieramy także opcji ‘Se-
lect Master Page’ – do czego ona służy, dowiemy się w ramce

„Zarządzanie kode”.

Nowo utworzona strona pojawi się w oknie Solution Explorer.

Poprzez dwukrotne kliknięcie otwieramy ją w głównym oknie śro-

dowiska IDE. Strona jest pusta, istnieje wiele sposobów na wy-

pełnienie jej treścią. Wykonać to zadanie możemy edytując za-

wartość strony w domyślnym widoku, jakim jest Source. Wówczas

modyfikujemy zawartość strony, tak jak zawartość zwykłego pliku

Listing 1.

Obsługa zdarzenia oraz pobranie pliku

graficznego

protected

void

ButtonAddPhoto_Click

(

object

sender

,

EventArgs

e

)

{

string

newfilename

=

""

;

if

(

FileUpload

.

HasFile

)

{

try

{

string

fileextention

=

FileUpload

.

FileName

.

Substring

(

FileUpload

.

FileName

.

LastIndexOf

(

'.'

)

,

4

);

newfilename

=

System

.

Guid

.

NewGuid

()

.

ToString

()+

fileextention

;

FileUpload

.

SaveAs

(

System

.

Configuration

.

ConfigurationManager

.

AppSettings

[

"PhotoResources"

]

.

ToString

()+

"

}

catch

(

Exception

ex

)

{

LabelInfo

.

Text

=

"Wystapil blad podczas

zapisywania pliku "

+

ex

.

Message

;

}

LabelInfo

.

Text

=

"Obrazek pobrano i zapisano

na serwerze"

;

ViewState

.

Add

(

"Filename"

,

newfilename

);

ImageCover

.

ImageUrl

=

"

}

else

{

LabelInfo

.

Text

=

"Wskaz lokalizacje obrazka"

;

}

}

Layout

Po upuszczeniu kontrolki zostanie ona przesunięta tak, by jej poło-
żenie było dopasowane do położenia poprzedniej kontrolki lub le-
wego górnego brzegu strony. Taki layout nazywa się ‘flow’ i jest do-
myślnym sposobem rozmieszczenia elementów na stronie. Jednak
jeśli chcemy, aby po upuszczeniu kontrolka znajdowała się dokład-
nie w miejscu, w którym ją położyliśmy, możemy zmienić wartość
własności layout na absolute. W menu Layout->Position->Auto po-
sition Options… należy wybrać opcję ‘Absolutely positioned’.

17

www.sdjournal.org

Software Developer’s Journal Extra! 20

HTML w dowolnym edytorze. Możemy także skopiować fragment

dokumentu HTML czy nawet treści pochodzącej z innej aplika-

cji np. programu Microsoft Word, zmienić widok na Design i wkle-

ić zawartość schowka na stronę. Dodatkowo trzeba także zacho-

wać szczególną ostrożność przy linkach oraz obrazkach.

Aby strona WelcomePage.aspx była uruchamiana jako

pierwsza strona naszego serwisu, w jej menu kontekstowym

wybieramy opcję ‘Set As Start Page’. I tak oto powstał zalążek

pierwszego serwisu internetowego. Jednak aby stworzyć taki

serwis, wystarczy przecież zwykły edytor HTML, więc aby wy-

jaśnić zaletę wykorzystania ASP.NET będziemy musieli zapre-

zentować kilka bardziej zaawansowanych elementów platformy.

Kontrolki

Jedną z zalet, która sprawia, że pisanie aplikacji w ASP.NET jest

tak szybkie, jest zestaw kilkudziesięciu kontrolek gotowych do

użycia na naszych stronach WWW. Kontrolki, które są przetwa-

rzane po stronie serwera HTTP możemy podzielić na dwie gru-

py. Są to kontrolki HTMLServer controls, czyli dobrze znane języ-

ka HTML tagi: button, text, radio, select i inne oraz kontrolki Web
Server controls – czyli charakterystyczne dla ASP.NET kontrolki,

posiadające funkcje renderujące je do kodu HTML

Oczywiście jeśli chcesz, możesz nadal bezpośrednio w kor-

dzie używać kontrolek HTML, do których jesteś zapewne przy-

zwyczajony. Ale warto skorzystać z kontrolek Web Server, po-

nieważ mają one dużo większą funkcjonalność. Zawierają mię-

dzy innymi możliwość konfigurowania własności (j.ang. Proper-
ties) które pozwalają nam zarządzać wyglądem, zawartością

i stanem kontrolki. Każda kontrolka posiada tzw.handlery repre-

zentujące charakterystyczne dla danej kontrolki zdarzenia (j.ang.
Events), które pozwalają nam określić zachowanie kontrolki w in-

terakcji z użytkownikiem. Dysponują także mechanizmem poma-

gające zarządzać stanem kontrolki (j.ang. ViewState).

Aby dodać nową kontrolkę do strony, wystarczy wybrać od-

powiedni symbol z listy dostępnej w oknie Toolbox a następnie

przeciągnąć ją na Web Form (można to zrobić zarówno w wi-

doku Design jak i Source). Bardziej szczegółowe informacje za-

wiera artykuł „Kontrolki serwerowe dostępne w ASP.NET”.

Otwórzmy nowy Web Form o nazwie „AddAlbum” i przejdź-

my do prezentacji strony w widoku Design. Aby ułatwić rozmiesz-

czanie kontrolek, najpierw umieszczamy na formularzu tabelę

o 6 wierszach i 3 kolumnach (Layout->Insert Table ). A następ-

nie w odpowiednie miejsca (patrz Rysunek 3) przeciągamy na

formularz kilka kontrolek, które umożliwią użytkownikowi poda-

nie podstawowych informacji o albumie: TextBox(x3), Label(x1),
Image(x1), FileUpload(x1), Button (x2).

Jak widzimy na Rysunku 3, po prawej stronie okna znajdu-

je się narzędzie Properties umożliwiające nam zmianę własno-

ści kontrolek. Skoro już dodaliśmy kontrolki, wykorzystajmy teraz

ich możliwości. Na formularzu znajduje się kontrolka FileUpload.

Ma ona bardzo podobną funkcjonalność uzyskana poprzez frag-

ment kodu HTML

<input type="file">

, którą być może już dobrze

znacie. Gdy użytkownik kliknie przycisk [Browse] podczas prze-

glądania strony, uruchomi dialog umożliwiający mu wskazanie lo-

kacji pliku na dysku. Po kliknięciu OK wybrana ścieżka pojawi się

w polu tekstowym kontrolki. Obok kontrolki FileUpload znajduje

się Button, a poniżej kontrolka Image. Chcemy, aby po kliknięciu

przycisku [Dodaj Album], wskazany za pośrednictwem kontrolki
FileUpload obrazek został przesłany do serwera, a następnie wy-

świetlony w kontrolce Image. Musimy zatem podpiąć odpowiednią

funkcję pod zdarzenie kliknięcia przycisku

ButtonAddPhoto

. Jest

kilka sposobów, aby to zrobić. Możemy np. zaznaczyć przycisk,

a następnie w oknie Properties kliknąć symbol błyskawicy.

W miejsce listy własności kontrolki pojawi się lista zdarzeń. My wy-

bieramy zdarzenie Click, poprzez dwukrotne kliknięcie pola obok

nazwy zdarzenia. Automatycznie zostaniemy przeniesieni do wi-

doku Source, w którym czekać na nas będzie już przygotowany

szkielet funkcji. Uzupełnimy ją kodem zgodnie z Listingiem 1.

Powyższa funkcja pobiera wskazaną przez użytkownika

ścieżkę do pliku graficznego, który zawiera okładkę albumu. Dla

uproszczenia zakładamy, że to rzeczywiście jest plik graficz-

ny. Aby nazwy plików nie kolidowały ze sobą, za pomocą kla-

sy System.GUID generowany jest unikalny klucz, który będzie

nową nazwą pliku. Następnie plik jest pobierany i zapisywany

w folderze „Photo” na serwerze. Adres do miejsca na serwerze,

w którym chcemy zapisywać pliki jest pobierany z pliku konfigu-

racyjnego Web.config. Dlatego w pliku tym dodano element:

<appSettings>
<add key="PhotoResources" value="C:\Documents and Settings\
Developer\My Documents\Visual Studio 2005\WebSites\
WebSitePhoto\"/>
</appSettings>

Na zakończenie funkcja zapamiętuje nazwę zapisywane-

go pliku w ViewState i wyświetla zawartość pliku graficznego

w kontrolce ImageCover.

Master Pages

Stworzona do tej pory niewielka kolekcja formularzy, sprawia

raczej wrażenie chaotycznego zbioru niż aplikacji webowej.

Aby to zmienić, proponujemy wykorzystać kilka dodatkowych

elementów i funkcjonalności specyficznych dla ASP.NET 2.0.

Serwisy internetowe składają się najczęściej nie z kilku ani

kilkudziesięciu, ale wręcz z setek podstron. I tu projektant in-

terfejsu użytkownika napotyka wiele problemów. Jednym

z głównych wyzwań jest zapewnienie spójności w obszarze

układu (struktury) strony. Twórcy środowiska ASP.NET opra-

cowali dedykowane do tego problemu rozwiązanie. ASP.NET

2.0 wprowadza nowy mechanizm – tzw. Master Pages.
Master page jest szablonem, definiującym ogólny wygląd stro-

ny w obszarach wspólnych dla wszystkich podstron. Dodatko-

wo Master Page wyznacza regiony (j.ang. containers), w któ-

rych umieszczona zostanie zawartość stron podrzędnych. Tak

więc efekt końcowy jest jakby złożeniem podstrony z zawarto-

ścią zdefiniowaną w stronie podrzędnej.

ViewState

ViewState jest jednym z mechanizmów pozwalających przechowy-
wać informacje zawarte na stronie. Jeśli własność EnableViewState
dla kontrolki jest ustawiona na true, jej stan czyli np. tekst który wpi-
saliśmy do pola TextBox nie znika po zajściu zdarzenia postback –
czyli odesłaniu treści strony do serwera. Należy jednak pamiętać,
że dla każdej kontrolki obiekt ViewState musi dokonać odpowied-
niego ukrytego zapisu informacji, co może znacznie zwiększyć ilość
przesyłanych danych. ViewState działa nie tylko dla kontrolek ale
i dla całej strony. Możemy wykorzystać go także do zapisu informa-
cji w postaci pary – klucza i skojarzonej z nim wartości.

18

ASP.NET Starter Kit

www.sdjournal.org

Software Developer’s Journal Extra! 20

Jak pozostałe elementy, Master Page dodajemy do aplikacji

korzystając z menu ‘Add New Item’. Master Page edytuje się jak

zwykły plik html, tak więc tworzenie go nie powinno przysporzyć

Wam trudności. Trzeba tylko pamiętać, aby odpowiednio wy-

brać miejsce dla elementu ContentPlaceHolder – to w tym miej-

scu pojawiać się będzie zawartość stron podrzędnych względem
Master Page. Jak już się pewnie domyślacie, aby stworzyć stro-

nę podrzędną wystarczy dodając nowy Web Form zaznaczyć

opcję ‘Select Master Page’ i wskazać odpowiedni plik. Jednak

ponieważ nasz serwis zawiera już strony, chcielibyśmy je także

uwzględnić podczas wykorzystywania mechanizmów Master Pa-
ge. Jest to zadanie nieco trudniejsze, aczkolwiek nie niewykonal-

ne. Jako przykład weźmy plik „WelcomePage.aspx”. Po pierwsze

musimy dodać w dyrektywie Page odpowiednia deklarację:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master"%>

Dodatkowy warunek to taki, że Content file nie może zawierać

takich elementów html jak:

<html>

,

<body>,

<form>

, a treść, którą

chcemy wyświetlić, powinna zawierać się w elemencie

<asp:Con-

tent>.

Zatem najlepiej jest wyciąć właściwy fragment kodu, usu-

wając całą resztę zbytecznych elementów HTML. A następnie

dodać element

<asp:Content>

z odpowiednio ustawionym atry-

butem

ContentPlaceHolderID

(nazwa powinna być taka sama, jak

nazwa odpowiedniego ContentPlaceHolder w pliku MasterPage).

Po przekształceniu na Content file, plik WelcomePage.aspx wy-

gląda jak na Listingu 2.

Theme i skin

Wykorzystanie Master Pages nie jest jedynym mechani-

zmem ułatwiającym developerowi zachowanie spójnego tzw.

„Look&Feel” aplikacji. Aby ułatwić zarządzanie układem strony

oraz jej szatą graficzną w ASP.NET 2.0 wprowadzono dwa nowe

mechanizmy: Themes i Skins. Na temat, bo tak pozwolę sobie

przetłumaczyć Theme, składać się mogą arkusze styli, obrazki,
XSLT lub też skins. Skin to specjalny rodzaj arkusza stylów dedy-

kowany do formatowania wyglądu kontrolek serwerowych. Funk-

cjonalność powyższych mechanizmów najłatwiej będzie zrozu-

mieć, obserwując je w działaniu.

Aby stworzyć nowy temat w Solution Explorer zaznacza-

my korzeń strony i wybieramy ‘Add ASP.NET Folde’r->|Theme.

W ten sposób do projektu zostanie dodany folder App_Theme

wraz z przykładowym, ale pustym tematem. Zmieńmy jego na-

zwę na „Szaruga”. Temat, jak już wspomniano, może składać się

z różnych typów plików. Na początek dodajmy do naszego tema-

tu zwykły i dobrze znany arkusz styli (j.ang. Style Sheet). Nie bę-

dziemy tłumaczyli, co można wpisać do arkuszów styli, ponieważ

zakładamy, że już nieraz je tworzyliście. Dodawanie nowych sty-

li dla poszczególnych tagów oraz klas nie różni się niczym od two-

rzenia CSS formatującego zwykłe pliki HTML. Z tą małą różnicą,

że w skład Visual Web Developer wchodzi narzędzie Style Builder,

które może ułatwić definiowanie styli. Ale oczywiście programista

nadal może wpisywać selektory bez pomocy kreatora lub też do-

dać do swojego projektu plik CSS stworzony w innym narzędziu.

Oprócz arkusza styli, do naszego tematu „Szaruga” do-

damy także Skin File (‘Add New Item…’ -> Skin file). Skin file

tworzy się prawie identycznie jak arkusz styli. Pozwala on jed-

nak na formatowanie kontrolek serwera (takich jak np. Label,
GridView czy Calendar), dlatego lista właściwości wchodzących

w skład stylu jest znacznie szersza i zależy od typu kontrolki.

I tak oto temat został stworzony. Teraz wystarczy tylko za-

deklarować jego użycie na stronie. Można to zrobić na kilka

sposobów, w zależności od tego czy chcemy zastosować te-

mat do całej aplikacji, czy tylko do wybranych stron. My za-

stosujemy wariant pierwszy. Aby podpiąć temat pod wszystkie

strony dodajemy odpowiedni element do pliku Web.config:

<pages theme="Szaruga" styleSheetTheme="Szaruga"/>

Po dokonaniu powyższych operacji wszystkie strony wcho-

dzące w skład aplikacji powinny zostać sformatowane.

Zastosowanie tematów ułatwia także personalizację apli-

kacji webowych, czyli zmianę wyglądu aplikacji w zależności

od preferencji użytkownika. W takich sytuacjach twórca apli-

kacji tworzy kilka tematów, aby dać użytkownikowi możliwość

wyboru. Ale to już wykracza poza temat tego artykułu.

Nawigacja

Mimo, iż w zakres naszego serwisu wchodzi już całkiem pokaź-

ny zbiór elementów, nadal nie tworzą one spójnej całości. Bra-

kuje bowiem funkcjonalności, która umożliwiałaby nam swobod-

ne poruszanie się między stronami. Przy użyciu kilku elementów

wchodzących w skład ASP.NET 2.0 możemy szybko umożliwić

sprawną nawigację po stronie. Zaczynamy od dodania do pro-

jektu nowego elementu Site Map. Site Map jest to plik XML o roz-

szerzeniu sitemap przechowujący, jak sama nazwa mówi, mapę

strony. Każda strona, do której chcemy umożliwić nawigację, jest

reprezentowana w postaci elementu

<siteMapNode>

. Zawartość

naszego pliku Web.sitemap jest zaprezentowana na Listingu 4.

Gdy stworzyliśmy już mapę strony, pozostało nam tylko udo-

stępnienie elementu prezentującego tą mapę. Element ten pro-

ponuję dodać do Master Page, tak aby nawigacja była dostępna

Listing 3.

Przykładowy fragment pliku skin

<

asp

:

button

runat

=

"server"

BackColor

=

"#6D7894"

Font

-

Bold

=

"True"

ForeColor

=

"White"

/

>

<

asp

:

GridView

runat

=

"server"

GridLines

=

"Horizontal"

BorderColor

=

"#6d7894"

BorderStyle

=

"Double"

BorderWidth

=

"3px"

CellSpacing

=

"1"

ForeColor

=

"DimGray"

>

<

RowStyle

BackColor

=

"#F5F7FC"

ForeColor

=

"#483D64"

BorderColor

=

Gray

BorderStyle

=

Solid

BorderWidth

=

5

px

/

>

<

HeaderStyle

BackColor

=

"#6D7894"

Font

-

Bold

=

"True"

ForeColor

=

"White"

/

>

<

/

asp

:

GridView

>

Listing 2.

Przykładowy ContentPlaceHolder

<

script

runat

=

"server"

>

(

…

)

<

/

script

>

<

asp

:

Content

ID

=

"Content1"

runat

=

"server"

ContentPlaceHolderID

=

"ContentPlaceHolder"

>

<

div

>

<

p

align

=

"center"

style

=

"text-align: center;

font-family: Arial"

>

Witajcie

mi

ł

o

ś

nicy

fotografii

.

(

…

)

<

/

p

><

/

div

><

/

asp

:

Content

>

19

www.sdjournal.org

Software Developer’s Journal Extra! 20

na każdej podstronie. Gdy na formularzu Master Page umieści-

my element TreeView, automatycznie otworzy się okienko ‘Tre-
eView Tasks’. Z listy ‘Choose Data Source’ wybieramy opcję ‘New
Data’, a na pojawiającym się oknie ‘Data Source Configuration
Wizard’ opcję ‘Site Map’. Po czym zatwierdzamy wybór. Utworzo-

na przez nas mapa strony zostanie automatycznie wyszukana

i podpięta pod TreeView. Aż trudno uwierzyć, że to takie proste.

Zachęcam do klikania niepozornie wyglądających małych

czarnych strzałek przy kontrolkach. Zawierają one wiele intere-

sujących kreatorów, takich jak np. ‘Auto Format…’ który umożliwia

wybór jednego z kilkunastu szablonów formatowania kontrolki.

Wstęp do ADO.NET

Korzystając z zaprezentowanych do tej pory elementów skła-

dających się na ASP.NET 2.0 można stworzyć serwis interne-

towy o bogatej funkcjonalności. Jednak na zakończenie chcie-

libyśmy jeszcze pokazać, jaki dodatkowy potencjał stwarza

wykorzystanie w aplikacji bazy danych.

Na początku musimy stworzyć bazę, korzystając przy tym

rzecz jasna z SQL Server Express Edition. Jak wspominali-

śmy SQL Express jest silnie zintegrowany z aplikacją Visu-
al Web Developer. Środowisko IDE będziemy wykorzystywali

do wykonywania wszystkich podstawowych operacji na bazie

danych. Aby stworzyć nową bazę, dodajemy do projektu fol-

der App_Data (menu ‘Add ASP.NET Folder’). Folder ten poja-

wi się w oknie Solution Explorer. W jego menu kontekstowym

znajduje się opcja ‘Add New Item’, wybieramy SQL Database

i wpisujemy nazwę bazy „dbAlbums.mdf”.

Ponieważ obsługa baz danych leży poza obszarem tego ar-

tykułu, pominiemy etap dodawania do bazy tabel i wypełniania

ich danymi. Podpowiemy tylko, że we wszelkich operacjach wy-

konywanych na bazie danych pomocne jest narzędzie Databa-
se Explorer (dostępne w menu View). Zakładamy, że mamy już

wypełnioną danymi bazę danych dbAlbums zawierająca tabelę

tblAlbum

.

Do prezentacji danych służyć nam będzie nowy Web Form

– „TopAlbums.aspx”. Aby wyświetlić na formularzu zawartość

tabeli

tblAlbum

, wystarczy chwycić tabelę w oknie Databa-

se Explorer i przeciągnąć ją na odpowiednie miejsce w Web
Form. Kontrolka GridView, który pojawi się na formularzu, jest

wierną reprezentacją danych znajdujących się w wybranej ta-

beli. Wiadomo jednak, że do prezentacji chcielibyśmy wy-

brać tylko kilka kolumn. Edycji kolumn można dokonać w wi-

doku Design, jednak GridView jest kontrolką o bardzo rozbu-

dowanej funkcjonalności i do jej formatowania służy wiele roż-

nych narzędzi. Zatem tym razem zaprezentujemy, jak wyglą-

da fragment kodu w widoku Source.

Na Listingu 5 widzimy przykładową konfigurację Gridview.

W zademonstrowanym fragmencie kodu pominięto formato-

wanie samego elementu GridView, ponieważ jest ono już za-

deklarowane w stworzonym uprzednio pliku skin (patrz Listing

3). Do zaprezentowania wybrano kolumny Title, Author oraz
Cover - pole Cover zawiera nazwę pliku graficznego znajdu-

jącego się na serwerze. Atrybut

DataImageUrlFormatString

po-

zwala stworzyć adres url obrazka - wstawiając wartość po-

la

DataImageUrlField

w miejsce

{0}

. Dodatkowo dzięki zasto-

sowaniu

<ControlStyle Width="80px" />

wczytywany obrazek

jest proporcjonalnie skalowany.

I tak oto praktycznie bez konieczności pisania kodu, uda-

ło nam się połączyć z serwerem i zaprezentować dane z ba-

zy danych. To oczywiście tylko minimalny wycinek z tego, co

oferuje ASP.NET 2.0 w kwestii obsługi bazy danych. W skład

platformy wchodzi wiele mechanizmów pozwalających na do-

dawanie, edycję i usuwanie danych.

Publikujemy aplikację

W sekcji dotyczącej ekwipunku wspomniano, że Visual Web
Developer posiada wbudowany lokalny serwer HTTP (Cassini).

Jednak jest on przeznaczony tylko do wspomagania procesu

rozwoju aplikacji Web i prędzej czy później i tak zaistnieje po-

trzeba umieszczenia naszej aplikacji na pełnowartościowym

serwerze HTTP. W ASP.NET rolę tą pełni IIS (Internet Infor-
mation Services).

O tym jak przeprowadzić poprawną konfigurację serwera

IIS przeczytasz w artykule „ Aplikacje ASP.NET na platformie
Internet Information Services”

Podsumowanie

I tak oto od początku do końca stworzyliśmy naszą pierw-

szą aplikację internetową przy pomocy programu Visual
Web Developer, SQL Server 2005 Express Edition i środowi-

ska ASP.NET 2.0. Zadania, których się podjęliśmy nie są być

może ambitne aczkolwiek pozwoliły nam poznać te z elemen-

tów ASP.NET 2.0, które są najważniejsze dla początkujące-

go programisty. Z czasem z pewnością Twój apetyt na wiedzę

o ASP.NET będzie rósł. Mamy nadzieję, że pomoże Ci w tym

ten numer naszego czasopisma.

n

Listing 5.

Konfiguracja GridView

<

asp

:

GridView

ID

=

"GridView1"

runat

=

"server"

AutoGenerateColumns

=

"False"

DataSourceID

=

"SqlDataSource1"

>

<

Columns

>

<

asp

:

ImageField

DataImageUrlField

=

"Cover"

HeaderText

=

"Okladka"

ReadOnly

=

"True"

NullImageUrl

=

"~/graph/DefaultCover.jpg"

DataImageUrlFormatString

=

"~/Photo/{0} "

>

<

ControlStyle

Width

=

"80px"

/

>

<

/

asp

:

ImageField

>

<

asp

:

BoundField

DataField

=

"Title"

HeaderText

=

"Tytul"

/

>

<

asp

:

BoundField

DataField

=

"Author"

HeaderText

=

"Autor"

/

>

<

/

Columns

>

<

/

asp

:

GridView

>

Listing 4.

Mapa strony Web.sitemap

<

?

xml

version

=

"1.0"

encoding

=

"utf-8"

?

>

<

siteMap

xmlns

=

"http://schemas.microsoft.com/AspNet/

SiteMap-File-1.0"

>

<

siteMapNode

url

=

"Default.aspx"

title

=

"Strona glowna"

>

<

siteMapNode

url

=

"WelcomePage.aspx"

title

=

"Strona Powitalna"

/

>

<

siteMapNode

url

=

"AddAlbum.aspx"

title

=

"Dodaj Album"

/

>

<

siteMapNode

url

=

"TopGaleries.html"

title

=

"Najlepsze Albumy"

/

>

<

/

siteMapNode

><

/

siteMap

>