Rozdzia³ 4. Web Forms i ASP.NET. Cele

Rozdzia³ 4 Web Forms i ASP.NET Cele l Poznanie modelu interakcji ASP.NET l Sposób dzia³ania zdarzeñ oraz DOM l Przypomnienie podstaw projektowania interfejsu u ytkownika l Tworzenie aplikacji bazuj¹cej na zdarzeniach l Model kodowania Web Forms l Praktyka w stosowaniu IDE (VS.NET) l Tworzenie kilku prostych Web Forms l Pisanie procedury sprawdzania dla formularza Web Form

150 ASP.NET - KURS PODSTAWOWY Podczas gdy ASP jest u yteczne w tworzeniu interaktywnych aplikacji sieciowych, ASP.NET wznosi tworzenie aplikacji na wy szy poziom, wraz z wszystkimi narzêdziami i potrzebnymi mo liwoœciami do tworzenia kompletnych aplikacji, niezale nie od tego, czy s¹ one sieciowe czy te nie. Wbudowane komponenty ASP s¹ u yteczne, ale Microsoft stworzy³o ca³y interaktywny model o nazwie Web Forms do obs³ugi interfejsu u ytkownika. Web Forms obejmuje wbudowane obiekty ASP i dodaje sporo innych obiektów oraz mo liwoœci dla ca³kowitej kontroli aplikacji. W rozdziale tym zademonstrujemy tworzenie projektu przy u yciu Visual Studio.NET (VS.NET), i poka emy podstawy tworzenia aplikacji przy u yciu Web Forms, ASP.NET oraz VB.NET. Nasze u ycie kodu ASP bêdzie siê zmniejszaæ za wyj¹tkiem tego, gdzie bêdzie to konieczne przez wzgl¹d na kompatybilnoœæ. Web Forms Web Forms to nazwa jak¹ da³ Microsoft specjalnym stronom HTML ASP.NET zawieraj¹cym formularze oraz obs³uguj¹ce je przetwarzanie. Korzystaj¹ one ze wspólnych technik ASP plus dodane nowe mo liwoœci dla stworzenia spójnej struktury dla aplikacji Web. U ytkownik mo e skorzystaæ z tych form do interakcji z aplikacj¹, natomiast przetwarzanie po stronie serwera mo e zapewniæ odpowiednie wyjœcie dla u ytkownika. Zwyk³e statyczne strony HTML mog¹ byæ wci¹ u yteczne dla wielu treœci wyœwietlanych na witrynie, które nie zmieniaj¹ siê zbytnio. Programowanie Web Forms Z drugiej jednak strony, Web Forms s¹ interfejsem programowym, z obiektami, w³asnoœciami oraz zdarzeniami do Twojej dyspozycji. Je eli kiedykolwiek robi³eœ coœ w aplikacji takiej jak Microsoft Access lub jakimkolwiek z jêzyków programowania Visual, prawdopodobnie widzia³eœ mo liwoœci o jakich tutaj mówimy. Na przyk³ad w Microsoft Access 97 i 2000, aby stworzyæ aplikacjê bazodanow¹, tworzysz tabele, zapytania, formy oraz raport, jaki sk³ada siê na aplikacje, a tak e specjalne formy, które s³u ¹ jako pomoc w nawigacji dla u ytkowników (czyli interfejs u ytkownika). W czasie projektowania mo esz tworzyæ formy, dodawaæ kontrolki dla dostêpu do danych z tabel/zapytañ oraz dodawaæ przyciski dla okreœlonych funkcji. Je eli klikniesz prawym klawiszem myszy na przycisku jaki doda³eœ i otworzysz jego okno dialogowe w³aœciwoœci, wtedy mo esz ³¹czyæ kod ze zdarzeniami, tak e gdy nast¹pi klikniêcie na przycisku, spowoduje to aktywacje zdarzenia onclick, a nastêpnie kodu. Sposób programowania w jêzykach Visual jest bardzo popularny, i Microsoft zrobi³ wszystko

ROZDZIA 4: Web Forms i ASP.NET 151 aby wnieœæ go w œrodowisko programowania aplikacji sieciowych, chocia pewne podstawy s¹ nowe i ró ni¹ siê od tego, co by³o dotychczas. Bezstanowa natura sieci Jak powiemy szerzej w Rozdziale 5, sieæ jest bezstanowa. Oznacza to, e nie ma utrzymanych wartoœci zmiennych lub aktualnego stanu strony, gdy wykonywane s¹ ¹danie i odpowiedzi pomiêdzy serwerem a klientem. Naturalnie, utrudnia to w³aœciw¹ interakcjê z u ytkownikami, stworzono wiele metod obejœcia tego problemu, niektóre z nich dobrze siê sprawdzaj¹. Web Forms pozwalaj¹ u ytkownikowi na dostêp do pewnych metod, które zachowuj¹ wartoœci w kontroli, ASP.NET zawiera obiekty specjalnie stworzone, aby dostarczyæ kontrolê dla zarz¹dzania stanem jako indywidualn¹ sesjê u ytkownika i jako ca³¹ aplikacjê. Razem czyni¹ one mo liwym stworzenie aplikacji sieciowych o takiej samej elastycznoœci jak zwyk³e aplikacje. 4 Mo liwoœci Web Forms Strony Web Stron w przegl¹darce sk³adaj¹ siê z HTML tak samo jak inne strony, tak wiêc mog¹ one byæ tworzone, aby wykonywa³y siê poprawnie na dowolnych przegl¹darkach lub tak, aby by³y specyficzne dla przegl¹darek, je eli chcesz korzystaæ z mo liwoœci okreœlonej przegl¹darki (jak np. Internet Explorer). Czêœæ robocza Web Forms mo e byæ zaprogramowana w jakimkolwiek jêzyku obs³ugiwanym przez CLR (my bêdziemy korzystaæ z VB.NET), bêdzie siê ona wykonywaæ szybko, poniewa jest kompilowana. Struktura Web Forms Web Forms sk³adaj¹ siê z frontowej strony (plik z rozszerzeniem.aspx z HTML i kodem, które sk³adaj¹ siê na to, co zostanie wyœwietlone u u ytkownika) oraz logiki po stronie serwera, która odpowiada u ytkownikowi. Interesuj¹c¹ rzecz¹ jest to, e kod ze strony serwera mo e byæ czêœci¹ pliku strony (aktywowany tylko gdy u ytkownik wykona odpowiedÿ) lub znajdowaæ siê w osobnym pliku, znanym jako zakulisowy kod. Model kodu Web Forms Model w tym kontekœcie oznacza sposób myœlenia o ró nych czêœciach ca³ej pracy razem. Model kodu Web Forms dokonuje podzia³u funkcjonalnoœci aplikacji na dwie g³ówne czêœci, wyœwietlaj¹c¹ i przetwarzaj¹c¹ dane. Wyœwietlanie zachodzi, gdy strona jest po raz pierwszy ¹dana, chocia mog¹ zachodziæ pewne procesy w celu zdecydowania, jaka wersja strony ma byæ wyœwietlona dla klienta (przegl¹darki). Przetwarzanie zachodzi, gdy pewien rodzaj danych wejœciowych jest zaoferowany przez

152 ASP.NET - KURS PODSTAWOWY klienta innych ni ¹danie innej strony, aplikacja musi przeprowadziæ kilka funkcji, zanim ponownie zwróci materia³ do wyœwietlenia. Chocia jest ³atwo po³¹czyæ kod wyœwietlaj¹cy (zwykle HTML) z kodem przetwarzania (ASP, VBScript, VB.NET, SQL, itd.) i ten model jest stosowany w wielu skryptach i aplikacjach ASP, dobrze jest uczyniæ trochê wysi³ków dla oddzielenia tych dwóch rodzajów kodu. W przeciwnym razie bêdzie o wiele trudniej u ywaæ ponownie kodu, poza tym trudniej bêdzie go debugowaæ i efektywnie modyfikowaæ. Plik Class Je eli przechowujesz swój kod oddzielnie, bêdzie siê on znajdowa³ w pliku z kodem przetwarzania, tak e znanym jako plik z kodem zakulisowym, o jakim mówiliœmy. Pomimo to kod wyœwietlaj¹cy (plik.aspx) oraz plik z kodem przetwarzania (prawdopodobnie.aspx.vb, je eli korzystasz z VB.NET) tworz¹ pojedyncz¹ jednostkê do wspó³pracy z serwerem w formie pliku class strony. ASP.NET dynamicznie tworzy now¹ klasê w oparciu o kod przetwarzania i wyœwietlania, a nastêpnie kompiluje go. Ta nowa klasa bazuje na klasie strony ASP.NET, ale jest poszerzona o kontrolki i kod przetwarzania jaki doda³eœ. Gdy strona jest ¹dana, dzia³a ona jak ma³y program wykonywalny, który daje zwyk³e wyniki HTML. Chocia tworzysz go jak tradycyjn¹ stronê HTML i skrypt ASP, staje siê ona skompilowanym, wykonywalnym programem na serwerze. l l Jakie s¹ dwie g³ówne czêœci modelu kodu Web Forms? Co dzieje siê z Twoimi plikami Web Forms gdy s¹ one kompilowane? Przetwarzanie Web Forms Omówiliœmy ju jak dzia³aj¹ na serwerze zwyk³e strony przeprowadzaj¹ce normalne funkcje witryny. U ytkownik mo e za ¹daæ strony (albo wspó³dzia³aæ ze stron¹) wpisuj¹c adres URL w obszarze adresowym przegl¹darki i nacisn¹æ Enter, klikaj¹c na ³¹czu lub klikaj¹c na przycisku Wyœlij formularza. W ka dym przypadku ¹danie jest wysy³ane do serwera, nastêpnie serwer odpowiada albo bezpoœrednio wysy³aj¹c stronê, l l Plik strony HTML z frontu oraz plik zawieraj¹cy program po stronie serwera. S¹ one u ywane do tworzenia nowej klasy wyprowadzonej z klasy Page.

ROZDZIA 4: Web Forms i ASP.NET albo przekazuj¹c zawartoœæ ¹dania do programu, nastêpnie wykonuj¹c przetwarzanie, jeœli jest to koniecznie, a w rezultacie i tak wysy³a stronê. Za ka dym razem gdy wystêpuje cykl ¹danie/odpowiedŸ, nazywa siê to podró ¹ tam i z powrotem (round trip). Cykle takie nie tylko zabieraj¹ sporo czasu, ale tak e zajmuj¹ miejsce na serwerze i eliminuj¹ informacje z ostatniego cyklu ¹danie/odpowiedŸ. Niestety, podczas gdy rzeczy takie jak sprawdzanie wprowadzonych danych czêsto mog¹ siê odbywaæ w przegl¹darce przy pomocy JavaScript, jedynym sposobem odœwie enia widoku na bazê danych lub przeprowadzenia jakiegoœ typu przetwarzania jest uczynienie wêdrówki do serwera i z powrotem. Tak wiêc minimalizacja iloœci cykli jest jednym z zadañ podczas projektowania. W miarê wzrostu prêdkoœci po³¹czenia, pracy z bardziej wydajnymi serwerami oraz technologiami takimi jak ASP.NET, wady wykonywania du ej iloœci cykli zmniejszaj¹ siê, gdy wzrosta zapotrzebowanie na zachowanie bli sze zwyk³ej aplikacji. 153 4 Minimalizacja wyst¹pieñ cykli ¹danie/odpowiedŸ W wielu sytuacjach pojedynczy dostêp do bazy danych mo e zapewniæ wystarczaj¹co du o danych (w formie zestawu rekordów) dla potrzeb u ytkownika na danym etapie pracy z aplikacj¹. Poprzez wi¹zanie danych, status dowolnych danych w zestawie rekordów, a tak e zmiany dokonane przez u ytkownika mog¹ byæ utrzymywane bez kosztownych wêdrówek do serwera i ³¹czenia siê z baz¹ danych. Innym sposobem w jaki Web Forms pomagaj¹ ograniczyæ wêdrówki jest to, e dostêpne kontrolki serwera zmieniaj¹ swój stan tylko przy wyst¹pieniu zdarzenia w odpowiedzi na jawn¹ akcjê u ytkownika. Na przyk³ad marnotrawstwem by³oby ³¹czenie siê z serwerem, aby zaktywowaæ rozwijane menu za ka dym razem gdy u ytkownik przesunie mysz nad jego obszarem ale nie kliknie na nim. Web Forms i stan widoku Aktualny stan strony Web Forms oraz jej kontrolek nazwy siê stanem widoku. Oznacza to wszystkie wybory jakich dokona³ u ytkownik, wszystkie dane jakie wprowadzi³, itd. Struktura Web Forms zachowuje te informacje przy ka dej wêdrówce dziêki czemu mo na je ³atwo odtworzyæ przy ka dym po³¹czeniu, co oszczêdza Ci wiele czasu, gdybyœ chcia³ jawnie zachowywaæ te szczegó³y. Web Forms i zdarzenia Wiêkszoœæ programistów i jêzyków programowania ewoluuje w kierunku programowania zorientowanego obiektowo (OOP); nowa edycja Visual Basic (VB.NET) jest tego przyk³adem. Jednym z powodów takiej sytuacji jest sk³onnoœæ obiektów do wyzwalania zdarzeñ gdy zmieni siê ich stan lub gdy jakieœ zewnêtrzne akcje

154 ASP.NET - KURS PODSTAWOWY wp³yn¹ na nie. Jedn¹ z najprostszych interakcji pomiêdzy obiektem a zdarzeniem jest zdarzenie onclick, które wystêpuje gdy u ytkownik kliknie na przycisku formy. Klikniêcie na przycisku aktywuje zdarzenie onclick, które mo e nastêpnie przes³aæ zdarzenie do innego obiektu, uruchomiæ pewien kod, lub zrobiæ obydwie te rzeczy. Zdarzenia mog¹ tak e byæ ca³kowicie ignorowane, przetwarzane warunkowo, itd. Mechanizm ten jest bardzo u yteczny w nowoczesnych jêzykach programowania, poniewa nigdy nie wiesz, na czym mo e klikn¹æ u ytkownik lub co zrobiæ, je eli prowadzisz zak³ady, chcia³byœ powiadomiæ u ytkownika gdy up³ynie czas na wprowadzanie wpisu, nawet je eli nie skoñczy³ on jeszcze wype³niaæ swojego formularza, tak aby nie móg³ ju nic wpisaæ gdy up³ynie czas. Zwyk³e zdarzenia HTML Zwyk³e strony sk³adaj¹ siê z HTML lub XHTML, obydwie zawieraj¹ Document Object Model (DOM). DOM to kolejny model, reprezentuje on szczególny sposób myœlenia o stronach i ich obiektach. Jak ju wspomnieliœmy w naszej krótkiej dyskusji o HTML/ XHTML, znaczniki, które tworz¹ obiekty na stronie (np. znacznik <IMG>), elementy (w tym przypadku zdjêcie na stronie), czêœci wewn¹trz elementu HTML (np. name lub ID) s¹ nazywane atrybutami. W DOM s¹ one równowa ne obiektom, tak wiêc o obrazku na stronie mo na myœleæ jako o obiekcie na swoich w³asnych prawach. Atrybuty elementu s¹ równowa ne w³asnoœci¹ obiektu, zaœ nieod³¹czne zdarzenia elementu HTML s¹ tym samym jak zdarzenia, na które odpowiada obiekt. DOM ustala hierarchiê obiektów na stronie Web. Okno, w którym jest wyœwietlana strona posiada najwy szy poziom (lub jest klas¹ bazow¹), podczas gdy strona jako taka znajduje siê na ni szym poziomie, forma (je eli istnieje) bêdzie siê znajdowaæ na jeszcze ni szym poziomie, natomiast kontrolki formy bêd¹ na jeszcze ni szym poziomie ni forma, i tak dalej. Obiekty z ni szych poziomów s¹ nazywane obiektami potomnymi, zaœ obiekty wy szego poziomu s¹ nazywane obiektami rodzicielskimi (bazowymi) (s¹ one rodzicami swoich dzieci oraz dzieæmi swoich w³asnych rodziców). DOM jest tylko modelem; aby zaimplementowaæ jego wymagania, w przegl¹darki musi zostaæ wbudowana obs³uga programowa jego zdarzeñ i obiektów. Na szczêœcie takie wsparcie jest wbudowane w wiele wersji Internet Explorer i Netscape Navigator. Przyk³adem takiego wsparcia jest mo liwoœæ pisania skryptów, które dynamicznie zmieniaj¹ zawartoœæ obiektu wyœwietlaj¹cego stronê (strona w DOM to obiektem document). Za³ó my, e chcesz zmieniæ kolor t³a strony w odpowiedzi na umieszczenie przez u ytkownika wskaÿnika myszy nad okreœlonym zdjêciem. Mo esz napisaæ funkcjê JavaScript, która przeprowadza tê akcjê:

ROZDZIA 4: Web Forms i ASP.NET 155 <html> <head> <title>dokument bez tytu³u</title> <meta http-equiv= Content-Type content= text/html; charset=iso-8859-1"> <script language= JavaScript > function changecolor() { document.bgcolor = #FF0000 } </script> </head> <body bgcolor= #FFFFFF > <img src= Back8.png width= 80" height= 30" onmouseover= changecolor() > </body> </html> Ta kombinacja skryptu z HTML korzysta ze zdarzenia onmouseover powi¹zanego z elementem jakim jest zdjêcie. Gdy zdarzenie jest wyzwalane, funkcja zostanie uruchomiona, w tym przypadku zmieniaj¹c kolor t³a obiektu document (strony). Pamiêtaj, kolor t³a jest atrybutem elementu BODY i jako taki mo e byæ zmieniony jako w³asnoœæ obiektu BODY w DOM (Document Object Model). Istnieje wiele zdarzeñ jakie mog¹ wystêpowaæ na zwyk³ych stronach (onmouseover, onlick, onload, itd.), DOM dostarcza dla nich coœ co nazywa siê architektur¹ przep³ywu zdarzeñ (event flow architecture). Zdarzenia w DOM rozpoczynaj¹ siê w obiektach wysokiego poziomu, i przenosz¹ siê (przep³ywaj¹) do obiektu gdzie wyst¹pi³o zdarzenie, nastêpnie wracaj¹ z powrotem na górê. W czasie tego przemieszczania siê, mog¹ one byæ przechwytywane, przepuszczane, lub kasowane w zale noœci od programu. Powodem takiej architektury jest udostêpnienie programistom du ej elastycznoœci. Wiêcej informacji mo na znaleÿæ na witrynie World Wide Web Consorcium (www.w3.org) w nag³ówku DOM Level 2. 4 Zdarzenia Web Forms Gdy u ywasz Web Forms masz dostêp do wszystkich obiektów i zdarzeñ powi¹zanych ze zwyk³ymi formami i kontrolkami HTML, ale masz tak e do dyspozycji pewne dodatkowe kroki przetwarzania i zdarzenia. G³ówn¹ ró nic¹ jest to e struktura Web Forms u ywa tych obiektów i zdarzeñ nieco inaczej, i wymagaj¹ one cyklu po³¹czenia, zamiast wystêpowaæ wy³¹cznie w przegl¹darce. Chocia wymagaj¹ nieco wiêcej nak³adu czasu, przeprowadzaj¹ wiele u ytecznych funkcji które sprawiaj¹ e Twoja aplikacja sieciowa bardziej przypomina zwyk³a stacjonarn¹ aplikacje. Na przyk³ad, mo esz tworzyæ swoje w³asne metody obs³ugi zdarzeñ, które s¹ aktywowane i uruchamiane na

156 ASP.NET - KURS PODSTAWOWY serwerze, gdy tylko wyzwolone zostanie okreœlone zdarzenie. Czêsto zdarzenia bêd¹ wyzwalane jawnie jako czêœæ interakcji u ytkownika zakodowana w przygotowanych kontrolkach serwera, które mo na zwyczajnie przeci¹gaæ na formy Web Forms gdy korzysta siê z VS.NET, w ten sam sposób jak korzystaj¹c z narzêdzi programistycznych Visual. U³atwia to znacznie programowanie. Podobnie jak w innych systemach zdarzeñ, istnieje szczególny przep³yw w czasie, w którym zdarzenia zachodz¹ automatycznie. Gdy strona jest ³adowana, wystêpuje zdarzenie onload dla obiektu document i wszelkiego kodu z nim powi¹zanego. Dzieje siê tak niezale nie od tego, co zrobi u ytkownik. Model stron Web Form Page obejmuje tak e zdarzenia, które wystêpuj¹ automatycznie, ale na serwerze. Na przyk³ad zdarzenie pageload wystêpuje, gdy strona jest ³adowana, mo na je wykorzystaæ, aby sprawdziæ, czy strona jest ³adowana po raz pierwszy, ustawiæ konfiguracje wszystkich kontrolek na stronie (w³¹czaj¹c w to wszelkie zmiany, jakich dokona³ u ytkownik ostatni) i przeprowadziæ wi¹zanie danych, je eli jest to konieczne. Gdy ju wszystko jest poprawnie ustawione, strona Web Form mo e byæ przes³ana do u ytkownika. Tworzenie uchwytów zdarzeñ Web Forms Aby wspó³pracowaæ ze zdarzeniami, przechwytywaæ je i przetwarzaæ swój w³asny kod w odpowiedzi na nie, trzeba stworzyæ metody uchwyty zdarzeñ i powi¹zaæ je ze zdarzeniami. Twoim pierwszym krokiem jest znalezienie nazwy lub nazw zdarzeñ jakie s¹ obs³ugiwane (nieod³¹czne dla kontrolek serwera jakich u ywasz do wyzwolenia zdarzenia, jak np. przyciski, pola tekstowe, przyciski opcji itd.). Musisz tak e u yæ poprawnej sygnatury dla uchwytu zdarzenia. Podczas gdy wiele zdarzeñ posiada tê sam¹ sygnaturê, niektóre wymagaj¹ specyficznych klas obs³ugi zdarzeñ. Kodowanie metod obs³ugi zdarzeñ Kontrolki serwera, jak wskazuje nazwa, dzia³aj¹ na serwerze. Posiadaj¹ one swoje w³asne nazwy (w³aœciwie korzysta siê z atrybutu ID poniewa zawsze jest unikalny) i s¹ kodowane w podobny sposób do zwyk³ych kontrolek HTML. Mo esz po³¹czyæ ich zdarzenia z metodami korzystaj¹c z bardzo podobnej sk³adni, w sposób nastêpuj¹cy: <asp:button id= MyButton runat= SERVER OnClick= Metoda /> Aby wszystko dzia³a³o prawid³owo, musisz u yæ nastêpuj¹cej sygnatury: Private Sub Metoda(ByVal sender As Object, ByVal e as EventArgs)

ROZDZIA 4: Web Forms i ASP.NET Nastêpnie mo esz napisaæ kod, który tworzy metodê uchwytu zdarzenia. Kod ten jest taki sam jak ka dy inny, ale nazywa siê uchwytem zdarzenia, poniewa jest uruchamiany w odpowiedzi na to zdarzenie. Mo esz jako metodê napisaæ coœ takiego: <%@ Page Language= VB %> <%@ Import Namespace= System.Collections %> <HTML> <HEAD> <SCRIPT RUNAT= SERVER > Protected Sub MyButton_Click(Source As Object, e As EventArgs) MyLabel.Text = Wyst¹pi³o zdarzenie OnClick End Sub </SCRIPT> </HEAD> <BODY> <FORM RUNAT=SERVER> <asp:button id=mybutton runat= server Text= Aktywacja zdarzenia onclick= MyButton_Click /> <br /> <asp:label id=mylabel runat=server /> </FORM> </BODY> </HTML> 157 4 Pytanie: Zdaje siê, e zrobiliœmy du y krok naprzód od rêcznego tworzenia stron i formularzy. Jak wiele pozosta³o z tradycyjnego ASP oraz gdzie zabiera nas ASP.NET? OdpowiedŸ: Oryginalne ASP dostarcza wiele mo liwoœci po stronie serwera, dziêki którym mo na przetwarzaæ formularze, co jest g³ówn¹ interakcj¹ u ytkownika w wielu aplikacjach Web. ASP.NET dokonuje du ego kroku naprzód, nie tylko kompiluj¹c formy oraz przetwarzanie po stronie serwera w plik class, ale tak e zapewniaj¹c wiele nowych narzêdzi i kontrolek, aby u³atwiæ pracê programisty. Na przyk³ad do³¹czenie sprawdzanych kontrolek znacznie u³atwia przeprowadzanie funkcji sprawdzania, nie trzeba polegaæ na skryptach JavaScript po stronie klienta. Chocia operacje po stronie klienta zabieraj¹ mniej czasu i nie obci¹ aj¹ serwera, smutne jest to, e aby w³aœciwie zabezpieczyæ aplikacjê, sprawdzanie musi siê odbywaæ po stronie serwera, eby nie zak³ócaæ pracy

158 ASP.NET - KURS PODSTAWOWY aplikacji nieodpowiednimi danymi lub zbyt d³ugimi strumieniami przez z³oœliwych u ytkowników. Poniewa w VS.NET znajduje siê ju wiele narzêdzi i szablonów do tworzenia aplikacji, i poniewa narzêdzia te u³atwiaj¹ pracê w formie wizualnej, z któr¹ jest ju obeznanych wielu programistów, korzystanie z VS.NET bêdzie siê stawaæ coraz przyjemniejsze. Tworzenie interaktywnych aplikacji przy pomocy VS.NET Omówiliœmy instalacjê VS.NET w Rozdziale 1, tak wiêc w tym æwiczeniu zaczniemy VS.NET i rozpoczniemy od tego miejsca. Gdy dojdziemy do Projektu 4-1, stworzymy formê Web Form krok po kroku, ale przedtem omówimy interfejs u ytkownika i narzêdzia dostêpne w VS.NET, tak abyœ by³ ju z nimi obeznany. Gdy rozpoczniesz VS.NET, powinieneœ zobaczyæ ekran przypominaj¹cy ten z Rysunku 4-1. Rys. 4-1 Pocz¹tkowy ekran VS.NET

ROZDZIA 4: Web Forms i ASP.NET Rozwi¹zania i projekty w VS.NET Jak ju wiesz, aplikacja sk³ada siê z wiêcej ni tylko jednego pliku z kodem; czêsto s¹ to pliki do wyœwietlania danych, pliki do przetwarzania danych, pliki przechowuj¹ce odwo³ania (referencje) do bazy danych, itd. Aby efektywnie u ywaæ VS.NET, jednym z pierwszych kroków jest stworzenie pojemnika na wszystkie pliki, katalogi, odwo³ania, oraz pozosta³e zasoby, które sk³adaj¹ siê na ogólne rozwi¹zanie zadanego problemu. VS.NET oferuje dwa typy takich pojemników: rozwi¹zania (solutions) i projekty (projects). Rozwi¹zanie zwykle sk³ada siê z jednego lub wiêcej projektów, zaœ projekt zawiera pliki, katalogi oraz odwo³ania (zwane elementami) obs³uguj¹ce poszczególne czêœci aplikacji. Dodatkowo rozwi¹zanie mo e zawieraæ elementy nazwane ró norodnymi plikami, które nie s¹ powi¹zane z jakimkolwiek poszczególnym projektem lub musz¹ byæ dostêpne dla kilku projektów w rozwi¹zaniu. Projekty przechowuj¹ w³aœciwe pliki w fizycznym katalogu na maszynie do tworzenia (publikowane póÿniej na serwerze). Katalog w jakim s¹ przechowywane te pliki nazywa siê katalogiem projektu. 159 4 Tworzenie rozwi¹zañ (solutions) Aby stworzyæ nowe rozwi¹zanie, tworzysz nowy projekt, przez co automatycznie powstaje nowy pojemnik rozwi¹zania do przechowywania projektu. Kliknij File New Project, aby otworzyæ okno dialogowe New Project (Rysunek 4-2). W polu Project Types z lewej strony, wybierz Visual Studio Solutions, nazwij swoje rozwi¹zanie ReminderForm (Rysunek 4-3) i kliknij OK, aby zapisaæ go w domyœlnej lokalizacji. Gdy zakoñczysz, zobaczysz rozwi¹zanie ReminderForm w panelu Solution Explorer w VS.NET wraz z do³¹czon¹ notatk¹ (0 projects). Oczywiœcie, w rozwi¹zaniu nie ma jeszcze adnych projektów lub elementów. Tworzenie projektów Aby stworzyæ projekt, jaki znajdzie siê we w³aœnie stworzonym rozwi¹zaniu, mo esz albo klikn¹æ prawym klawiszem myszy na rozwi¹zaniu i wybraæ Add New Project, lub przejœæ do menu File i wybraæ Add Project New Project. Gdy otworzy siê okno dialogowe New Project, upewnij siê, e po lewej stronie jest zaznaczone Visual Basic Project w polu Project Types, nastêpnie wybierz ASP.NET Web Application z sekcji Templates na prawo. Nazwij projekt ReminderForm i kliknij OK. Pliki i katalogi stworzone dla tego projektu znajd¹ siê w domyœlnej lokalizacji, któr¹ w tym przypadku bêdzie http://localhost. Koñcowym rezultatem bêdzie jeden projekt zawarty w rozwi¹zaniu oraz kilka plików bêd¹cych czêœci¹ projektu, a tak e strona Web Form pokazana w g³ównym oknie dokumentu w widoku Design (zobacz Rysunek 4-4).

160 ASP.NET - KURS PODSTAWOWY Rys. 4-2 Okno dialogowe New Projects Rys. 4-3 Zapisywanie rozwi¹zania

ROZDZIA 4: Web Forms i ASP.NET 161 4 Rys. 4-4 Projekt, pliki i dokument w programie ReminderForm Solution Explorer Solution Explorer jest jednym z narzêdzi VS.NET zapewniaj¹cym ³atwoœæ zarz¹dzania rozwi¹zaniami i projektami. Pokazuje ono pliki, katalogi oraz inne obiekty, które sk³adaj¹ siê na rozwi¹zanie lub s¹ z nim powi¹zane; je eli klikniesz na którymœ elemencie, pod oknem Solution Explorer pojawi siê okno Properties pokazuj¹ce szczegó³owe informacje o elemencie. Je eli kiedykolwiek tworzy³eœ aplikacje przy pomocy produktu Microsoft Office takiego jak Access, wiesz jak wygodny jest dostêp do w³asnoœci. Plik projektu ReminderForm jest rodzicem dla innych plików sk³adaj¹cych siê na projekt. Pozosta³e pliki to: l l References AssemblyInfo.vb

162 ASP.NET - KURS PODSTAWOWY l l l l l Global.asax ReminderForm.vsdisco Styles.css Web.config WebForm1.aspx Solution Explorer zapewnia wygodny sposób zarz¹dzania zasobami projektu, jednoczeœnie nie rzucaj¹c siê w oczy w lewym górnym rogu VS.NET. Klikniêcie na menu View poka e wiele innych widoków, jak np. Class View, Server Explorer, Resource Vies, itd. Ide¹ tych wszystkich narzêdzi jest udostêpnienie Ci wygodnego dostêpu do tego, czego potrzebujesz w danej chwili daj¹c jednoczeœnie wystarczaj¹co du o miejsca do dalszej pracy. Tworzenie form Web Forms Gdy ju stworzysz nowy projekt, powinieneœ zobaczyæ dokument o nazwie WebForm1.aspx w widoku dokumentu z lewej strony. Najlepszym sposobem tworzenia formy Web jest skorzystanie z trybu GridLayout, jak zreszt¹ wspomina sam dokument. Aby zmieniæ tryb (je eli tego chcesz) z GridLayout (uk³ad siatki) na FlowLayout (uk³ad swobodny) oraz zobaczyæ inne rzeczy, kliknij prawym klawiszem myszy na dokumencie i wybierz Properties z menu kontekstowego. Zobaczysz okno dialogowe Document Property Page pokazane na Rysunku 4-5. Okno dialogowe Document Property Page Okno dokumentu zapewnia przestrzeñ robocz¹, która pozwala programistom na ³atwe tworzenie i umieszczanie elementów strony zarówno dla stron statycznych, jak i dynamicznych bêd¹cych czêœci¹ ca³ej aplikacji. W trybie GridLayout, elementy dodawane do strony s¹ umieszczane dok³adnie w miejscach okreœlonych przez koordynaty pikseli X i Y. Koordynat X jest mierzony od lewej do prawej w pikselach, zaœ koordynat Y jest mierzony od góry do do³u w pikselach. U ycie GridLayout znacznie u³atwia ustawianie rozmiaru i uk³adu obiektów na ekranie. To, czy siatka ma byæ pokazywana na ekranie, mo e byæ ustawione poprzez przycisk opcji Show Grid w oknie dialogowym. Tytu³ strony oraz zdjêcie w tle, domyœlne jêzyki klienta oraz serwera, kolory i marginesy, s³owa kluczowe, wszystko to mo e byæ ustawione w tym oknie dialogowym. Na przyk³ad ustaw dokument tak, aby posiada³ tytu³ Reminder, kolor na lekki b³êkit (#ccffff w kodzie kolorów HTML) oraz s³owa kluczowe Urodziny, Wakacje, Spotkania, Stanowiska. Kliknij OK, dokument powinien zmieniæ kolor na lekki

ROZDZIA 4: Web Forms i ASP.NET 163 4 Rys. 4-5 Okno dialogowe Document Property Page b³êkit. Aby zobaczyæ w³aœciwe zmiany w HTML, przejdÿ do widoku HTML klikaj¹c na zak³adce HTML na dole dokumentu. Zobacz nastêpuj¹cy kod HTML: <%@ Page Language= vb AutoEventWireup= false Codebehind= WebForm1.aspx.vb Inherits= ReminderForm.WebForm1"%> <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN > <HTML> <HEAD> <meta name= keywords content= Urodziny, Wakacje, Spotkania, Stanowiska > <title>reminder Form</title> <meta name= GENERATOR content= Microsoft Visual Studio.NET 7.0"> <meta name= CODE_LANGUAGE content= Visual Basic 7.0"> <meta name= vs_defaultclientscript content= JavaScript > <meta name= vs_targetschema content= http://schemas.microsoft.com/ intellisense/ie5"> </HEAD> <body MS_POSITIONING= GridLayout bgcolor= #ccffff > <form id= Form1" method= post runat= server > </form> </body> </HTML>

164 ASP.NET - KURS PODSTAWOWY Zauwa, e kod w ogranicznikach ASP.NET, które rozpoczynaj¹ stronê, okreœla jêzyk programowania dla tej strony, a tak e stronê kodu za kulisami (Codebehind) o nazwie WebForm1.aspx.vb. Zauwa tak e, e forma zosta³a ju dodana do strony HTML, nawet pomimo tego, i nie jest ona jeszcze widoczna jako obiekt w dokumencie w widoku Design. Dodawanie kontrolek do formy Aby stworzyæ w³asn¹ formê, mo esz dodawaæ kontrolki na formê z okna Toolbox, dostêpnego po klikniêciu View Toolbox. Okno Toolbox zawiera wiele zak³adek (np. Web Forms i HTML), ka da z nich rozwija siê po klikniêciu, zawieraj¹ one kontrolki takie jak Label (etykieta), Text Box (pole tekstowe) oraz Text Area (obszar tekstowy). Klikniêcie na jednej z nich pozwoli Ci przeci¹gn¹æ j¹ na dokument, bêdziesz potem móg³ sprawdzaæ i zmieniaæ jej w³asnoœci. Mo esz dodawaæ kontrolki do dokumentu tylko wewn¹trz obszaru formy w HTML. Aby sprawdziæ i zmieniæ w³asnoœci kontrolki po tym jak doda³eœ j¹ do dokumentu, po prostu kliknij na niej aby j¹ zaznaczyæ, a nastêpnie sprawdziæ w³asnoœci wypisane w panelu Properties w prawym dolnym rogu. Wypisane w³asnoœci odpowiadaj¹ atrybutom HTML reprezentowanym przez kontrolkê. Na przyk³ad pole tekstowe posiada w³asnoœci name, value, size oraz maxlength itd., wszystkie odpowiadaj¹ce tym samym atrybutom dla elementu INPUT (gdy ustawione jako pole tekstowe) z HTML. Projekt 4-1: Tworzenie aplikacji Web Form W projekcie tym bêdziesz tworzy³ formê, która pozwala u ytkownikowi na wpisanie informacji kontaktowych, a tak e kilku elementów informacji, o których u ytkownik bêdzie informowany w zale noœci od daty. Forma bêdzie zbieraæ i sprawdzaæ dane, ma³a aplikacja na serwerze bêdzie je przetwarzaæ, aby wygenerowaæ listê dat do przypomnienia, dane te zostan¹ zaprezentowane u ytkownikowi do ostatecznego sprawdzenia. W³aœciw¹ aplikacjê przypominaj¹c¹ stworzysz w dalszych rozdzia³ach. Krok po kroku Masz ju przygotowan¹ do obróbki formê Web Form; mo esz siê teraz skoncentrowaæ na w³aœciwych elementach formy oraz tym, co chcesz aby robi³a. Po pierwsze, chcesz zebraæ wystarczaj¹co du o informacji, abyœ móg³ zapewniæ u ytkownikowi przypomnienie i ustanowienie konta na Twoim systemie us³ugowym online. Z tego wzglêdu bêdziesz potrzebowaæ kilka pól tekstowych dla imienia, adresu, numeru telefonu, adresu e-mail,

ROZDZIA 4: Web Forms i ASP.NET 165 itd. Poniewa jest to us³uga darmowa, nie ma potrzeby zbieraæ informacji o rachunku u ytkownika. 1. Dodaj nag³ówek, który stanowi opis formy. Prze³¹cz formê w tryb FlowLayout klikaj¹c prawym klawiszem myszy na formie i otwieraj¹c Document Property Page, nastêpnie zmieniaj¹c tryb w rozwijanej liœcie na œrodku. Dziêki temu bêdziesz móg³ ³atwo dodawaæ tekst, tak samo jak bêd¹c w edytorze HTML. Napisz ³adny nag³ówek, coœ w stylu Proszê wprowadziæ swoje dane. Mo esz nieco powiêkszyæ tekst, aby by³o ³atwiej go odczytaæ oraz zmieniæ czcionkê na bardziej czyteln¹ (na Rysunku 4-6 u ywamy rozmiaru 4 i czcionki Arial Black). Narzêdzia do zmiany czcionki mo esz znaleÿæ na pasku narzêdziowym Formatting. Pasek ten powinien byæ domyœlnie otwarty, ale je eli go nie ma, przejdÿ do View Toolbars i wybierz Formatting. Zobaczysz tak e inne dostêpne paski narzêdziowe. 2. Nastêpnie prze³¹cz siê z powrotem w tryb GridLayout klikaj¹c View Property Pages, otwieraj¹c okno dialogowe Document Property Page i wybieraj¹c GridLayout. Rozpocznij tworzenie formy od dodania tabeli do strony pod nag³ówkiem, klikaj¹c View Toolbox. Pojawi siê okno Toolbox (domyœlnie z lewej strony obszaru roboczego). Kliknij na zak³adce Web Forms, aby otworzyæ listê dostêpnych kontrolek Web Forms. Kliknij na przycisku tabeli i przeci¹gnij j¹ na œrodek formy. 3. Teraz gdy ju narysowa³eœ tabelê, kliknij na niej prawym klawiszem myszy, aby otworzyæ okno dialogowe Table Property Pages, nastêpnie zmieniæ kolor t³a tabeli na ³adny lekki b³êkit i zamkn¹æ okno dialogowe. 4. Mo esz u yæ menu Table do odnalezienia opcji dotycz¹cych wstawiania i usuwania wierszy w tabeli. Dodawaj lub usuwaj wiersze i kolumny (umieszczaj¹c kursor w wierszu lub kolumnie, o któr¹ Ci chodzi) a bêdziesz mia³ 8 wierszy i 2 kolumny. Umieœæ etykiety tekstowe (mo esz wpisaæ tekst, zamiast korzystaæ z kontrolek Label) w lewej kolumnie: Imie (First Name), Nazwisko (Last Name), Adres (Address), Miasto (City), Województwo (State), Kod Pocztowy (Zip), E-mail, Telefon (Phone), z prawej strony dodaj do ka dej kolumny kontrolkê TextBox z zak³adki Web Forms w oknie Toolbox. Ustaw rozmiar tabeli a bêdzie ona pasowaæ do tekstu i pól tekstowych, nastêpnie przenieœ tabele na œrodek strony, aby mia³a ³adny uk³ad. Mo e pomóc Ci w³¹czenie opcji Snap To Grid, wybieraj¹c Format Snap To Grid. Dziêki temu wszystko bêdzie ustawiane automatycznie wraz ze znacznikami siatki (mo esz tak e w³¹czyæ lub wy³¹czyæ 4

166 ASP.NET - KURS PODSTAWOWY znaczniki siatki przy u yciu opcji w menu tu nad Snap To Grid). Twoja forma powinna byæ podobna do tej z Rysunku 4-6. Rys. 4-6 Forma w czasie konstruowania 5. Aby u yæ pól tekstowych, musisz nazwaæ je odpowiednio, tak wiêc kliknij prawym klawiszem na pierwszym polu i wybierz z menu kontekstowego opcje Properties. Z prawej strony na dole ekranu znajdziesz panel Properties, powinieneœ widzieæ w nim w³asnoœæ ID. Wpisz tam opisow¹ nazwê bez spacji lub znaków specjalnych. Na przyk³ad pole Imiê nazwij Imie (Name). Pole tekstowe E-mail nazwij Email. 6. Przeznaczeniem tej aplikacji jest pozwolenie na zebranie wystarczaj¹cej iloœci informacji, tak aby mog³a póÿniej przypomnieæ u ytkownikowi o urodzinach poprzez telefon lub e-mail. Zmodyfikuj

ROZDZIA 4: Web Forms i ASP.NET tabele dodaj¹c wiersze, kolumny, nag³ówki oraz pola tekstowe dopóki nie bêdzie ona wygl¹da³a jak ta pokazana na Rysunku 4-7. Jako rozwijanej listy u yj kontrolki HTML (kliknij na zak³adce HTML w oknie Toolbox) dla listy Dropdown i dodaj j¹ obok s³ów Powiadomienie przez (Notify By). Nazwij j¹ MetodaPowiadomienia (Notification Method) i kliknij na niej prawym klawiszem myszy, aby otworzyæ okno dialogowe Property Page. Wpisz mo liwoœci Telefon (Phone) oraz Email zarówno w obszarach Text, jak i Value jako opcje dla rozwijanej listy (Bêdziesz musia³ wpisaæ Telefon (Phone) w obydwu polach, a nastêpnie klikn¹æ na przycisku Insert; to samo dla Email, jak pokazano na Rysunku 4-8). 7. Jesteœ teraz gotów aby dodaæ kontrolki, które sprawdzaj¹ poprawnoœæ wpisanych danych. Forma musi siê upewniæ, e dane zosta³y wprowadzone w okreœlone pola (imie i nazwisko, numer 167 4 Rys. 4-7 Forma z dodanymi obszarami odnoœnie przypomnienia

168 ASP.NET - KURS PODSTAWOWY Rys. 4-8 Okno dialogowe <SELECT> Property Pages telefonu, adres e-mail, przynajmniej jedna data urodzin oraz liczba dni przed urodzinami, kiedy trzeba przypomnieæ). Forma sprawdzi tak e, aby siê upewniæ, e format adresu e-mail jest odpowiedni oraz e daty urodzin s¹ poprawnie sformatowane jako daty. 8. Kliknij na zak³adce Web Forms w oknie Toolbox i zaznacz kontrolkê RequiredFieldValidator, nastêpnie przeci¹gnij j¹ i upuœæ obok wymaganych pól. We w³asnoœci ControlToValidate ka dej kontrolki sprawdzaj¹cej wpisz nazwê pola tekstowego jakie ma sprawdzaæ; we w³asnoœci Text ka dej kontrolki sprawdzaj¹cej wpisz znak asteriks (*); natomiast we w³asnoœci ErrorMessage wpisz odpowiedni komunikat dla u ytkownika, np. Wymagane jest podanie imienia (First Name is required). Twoja forma powinna teraz przypominaæ Rysunek 4-9. 9. Aby sprawdziæ czy u ytkownik wpisa³ dzia³aj¹cy adres e-mail, dodaj kontrolkê RegularExpressionValidator obok pola Email. W jej w³asnoœci ControlToValidate wpisz Email (UserEmail); w jej w³asnoœæ Text wpisz znak asteriks (*); natomiast w jej w³asnoœæ ErrorMessage wpisz Twój