Wprowadzenie do ASP.NET

Transkrypt

1 ITA- 103 Aplikacje internetowe Piotr Bubacz Moduł 4 Wersja 1 Spis treści... 1 Informacje o module... 2 Przygotowanie teoretyczne... 3 Przykładowy problem... 3 Podstawy teoretyczne... 3 Przykładowe rozwiązanie Porady praktyczne Uwagi dla studenta Dodatkowe źródła informacji Laboratorium podstawowe Problem 1 (czas realizacji 15 min) Problem 2 (czas realizacji 30 min) Laboratorium rozszerzone... 22

2 Informacje o module Opis modułu W tym module znajdziesz informacje dotyczące podstaw tworzenia aplikacji internetowych w Visual Studio Nauczysz się dodawad strony internetowe do aplikacji oraz umieszczad na nich kontrolki dostępne w ASP.NET. Poznasz zasady programowego odwoływania się do kontrolek oraz interakcji z użytkownikiem strony. Cel modułu Celem modułu jest poznanie zasad pracy z aplikacjami internetowymi w ASP.NET, dodawania i programowego odwoływania się do kontrolek oraz dodawania i przesyłania informacji między stronami. Uzyskane kompetencje Po zrealizowaniu modułu będziesz: potrafił tworzyd aplikacje internetowe w ASP.NET w Visual Studio 2008 potrafił dodawad kontrolki do strony internetowej potrafił odwoływad się programowo do kontrolek na stronie rozumiał zasadę przesyłania informacji między stronami Wymagania wstępne Przed przystąpieniem do pracy z tym modułem powinieneś: znad podstawy języka XHTML znad podstawy CSS Mapa zależności modułu Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu należy zapoznad się z materiałem zawartym w modułach Podstawy HTML i Kaskadowe Arkusze Stylów CSS. MODUŁ 14 MODUŁ 13 MODUŁ 1 MODUŁ 12 MODUŁ 2 MODUŁ 11 MODUŁ 4 MODUŁ 3 MODUŁ 10 MODUŁ 5 MODUŁ 9 MODUŁ 8 MODUŁ 6 Rys. 1 Mapa zależności modułu Strona 4-2

3 Przygotowanie teoretyczne Przykładowy problem Podstawowym ograniczeniem języka HTML jest jego statycznośd. Nie ma możliwości w tym języku dynamicznej zmiany wyświetlanej zawartości ani reagowania na działania użytkownika. Statyczne strony są bardzo dobre jako wizytówki, ale dzisiaj ciężko sobie wyobrazid stronę internetową bez elementów dynamicznych. Firmowe strony internetowe muszą przynajmniej umożliwiad wyszukiwanie czy przeglądanie produktów. Dzisiaj firmy coraz częściej zwracają się w kierunku Web 2.0, udostępniając użytkownikom swoich serwisów możliwośd samodzielnego generowania treści. Takie narzędzia jak blog stają się podstawą komunikacji z klientami już nie tylko w dużych korporacjach, ale i w małych firmach. Firmy dostrzegają możliwości Wikipedii i udostępniają możliwośd rozszerzania swojej podstawowej wiedzy o produktach. Te wszystkie nowe elementy pojawiające się na stronach wymagają dynamicznych technologii tworzenia zawartości stron. Podstawy teoretyczne ASP.NET jest zbiorem technologii programistycznych zbudowanych na platformie.net, używanych do budowania dynamicznych aplikacji internetowych. W ASP.NET programista ma do dyspozycji wiele gotowych komponentów i klas związanych z najczęściej wykonywanymi zadaniami. Aplikacja ASP.NET Na aplikację ASP.NET mogą składad się następujące elementy: formularze internetowe (ang. Web Forms) pliki z rozszerzeniem.aspx usługi Web (ang. Web Services) pliki z rozszerzeniem.asmx pliki logiki aplikacji pliki z rozszerzeniem.vb lub.cs globalna klasa aplikacji plik Global.asax pliki konfiguracyjne pliki Web.config inne pliki np. strony HTML, arkusze CSS itp. Formularz internetowy Formularze internetowe reprezentują dynamicznie budowane strony internetowe. Składają się ze znaczników ASP.NET oraz logiki i są przesyłane do użytkownika najczęściej w postaci standardowych dokumentów XHTML. Aplikacja ASP.NET zawiera jeden lub więcej formularzy. Cała logika jest wykonywana po stronie serwera, chociaż możliwe jest wykonywanie części kodu w postaci skryptów po stronie użytkownika. Pliki konfiguracyjne Najważniejsze pliki zawierające ustawienia konfiguracyjne aplikacji ASP.NET to: Machine.config przechowywane w nim ustawienia dotyczą wszystkich aplikacji na komputerze lokalnym Web.config przechowywane w nim ustawienia dotyczą tylko wybranej aplikacji Pliki konfiguracyjne mogą byd modyfikowane w czasie działania aplikacji, lecz wiąże się to z koniecznością jej ponownego uruchomienia. Zintegrowane środowisko programistyczne Visual Studio 2008 Zintegrowane środowisko programistyczne umożliwia wytwarzanie i weryfikację aplikacji oraz przygotowywanie ich do wdrożenia. Charakteryzuje się tym, że udostępnia funkcjonalności obejmujące edycję i kompilowanie kodu źródłowego, tworzenie zasobów programu, zarządzanie bazami danych itp. Strona 4-3

4 Visual Studio 2008 IDE składa się z wielu okien o różnym przeznaczeniu (Rys. 2). W menu View można określid, które z nich mają byd widoczne dla użytkownika Rys. 2 Okno Visual Studio Okno dokumentu centralne okno aplikacji. W trybie projektowania (Design) możliwe jest graficzne projektowanie stron w trybie WYSIWYG (ang. What You See Is What You Get). W trybie podglądu kodu źródłowego (Source) w oknie wyświetlany jest kod strony. Tryb dzielony (Split) umożliwia jednoczesne wyświetlanie strony w obu widokach. 2. Toolbox zbiór elementów, które można umieścid na projektowanej stronie, pogrupowanych w kategorie. 3. Solution Explorer lista plików i folderów wchodzących w skład projektu. Wyświetla hierarchię plików. Z tego okna można przenosid i modyfikowad pliki, w szczególności możliwe jest: przenoszenia plików poprzez przeciąganie ich myszą wyświetlenie zawartości pliku w oknie dokumentów po dwukrotnym kliknięciu go wywołanie menu kontekstowego skojarzonego z elementem poprzez kliknięcie go prawym przyciskiem myszy 4. Properties lista dostępnych właściwości oraz bieżące ustawienia aktualnie zaznaczonego obiektu. 5. Error List informacje o błędach, które wystąpiły w projekcie. 6. Server Explorer interakcja z narzędziami dostępnymi na serwerze. Aplikacje internetowe w Visual Studio Tworzenie aplikacji Aby utworzyd nową aplikację w Visual Studio musimy wybrad z menu File -> New -> Web Site. Na ekranie pojawi się okno New Web Site (Rys. 3), w którym możemy określid podstawowe parametry tworzonej witryny. Strona 4-4

5 Elementy wyświetlane w oknie New Web Site: Rys. 3 Okno New Web Site 1. Zainstalowane szablony aplikacji lista, w której możemy określid, jakiego typu aplikację chcemy utworzyd. Najczęściej wybieramy szablon ASP.NET Web Site. 2. Docelowa wersja.net Framework docelowa wersja środowiska, pod którą ma byd uruchamiana aplikacja. 3. Lokalizacja witryny umiejscowienie plików aplikacji. 4. Ścieżka lub adres serwera dokładne położenie plików aplikacji na lokalnym dysku twardym lub na serwerze, zależnie od wybranej lokalizacji. 5. Język programowania języka programowania, w którym tworzona będzie aplikacja. 6. Przycisk Browse przycisk umożliwiający określenie dokładnego położenia plików aplikacji. Uruchamianie aplikacji Aby uruchomid aplikację, wybieramy z menu Debug -> Start Debugging lub naciskamy klawisz F5. Po wybraniu tej opcji przy pierwszym uruchomieniu aplikacji pojawi się okno z informacją o konieczności zezwolenia na debugowanie. W tym przypadku należy wcisnąd OK. W tym trybie nie będzie możliwe dynamiczne poprawianie strony, ale będzie możliwe debugowanie aplikacji. Możemy w dowolnym miejscu w kodzie aplikacji zatrzymad wykonywanie programu, podejrzed zmienne, sprawdzid krok po kroku wykonywanie poszczególnych wierszy kodu itp. Aplikację można również uruchomid w trybie bez możliwości debugowania, wybierając z menu głównego Debug -> Start Without debugging lub wciskając Ctrl+F5. Zaletą tego trybu jest możliwośd wprowadzania zmian w kodzie, które widoczne są po odświeżeniu strony w przeglądarce. Strona internetowa Struktura strony Stronę internetową (formularz internetowy) definiuje się w pliku z rozszerzeniem.aspx. Struktura takiego pliku składa się z trzech sekcji: dyrektyw strony, kodu aplikacji i układu strony. Dyrektywy Dyrektywy umożliwiają definiowanie podstawowych ustawieo. Mają one następującą składnię: <%@ dyrektywa atrybut="wartość" [, atrybut="wartość"[,...n] ] %> Najważniejszą i zarazem jedyną obowiązkową dyrektywą jest umieszczona na początku każdej strony internetowej ASP.NET Strona 4-5

6 określa atrybuty używane przez parser i kompilator. Pozwala m.in. określid parametry protokołu HTTP, przestrzenie nazw, wykorzystywany język programowania. Sekcja kodu aplikacji Sekcja kodu aplikacji zawiera procedury obsługi zdarzeo wraz dodatkowymi procedurami pomocniczymi. Kod aplikacji może zostad osadzony wewnątrz kodu znacznikowego (Code Inline) lub umieszczaniu kodu w osobnym pliku (Code Behind) (Rys. 4). <%@ Page <script runat="server > //logika aplikacji </script> <html> </html> plik.aspx Inline Logika aplikacji w pliku plik.aspx.cs <html> </html> plik.aspx Codebehind Rys. 4 Strona plik.aspx jako Code Inline i Code Behind W przypadku Code Inline kod aplikacji jest umieszczany w sekcji nagłówka strony (<head>) wewnątrz znacznika <script> z atrybutem runat="server", który informuje kompilator, że zawartośd tego znacznika będzie przetwarzana na serwerze przed wygenerowaniem kodu HTML dla klienta. Strona może posiadad znacznik <script> bez atrybutu runat, zawierający skrypt wykonywany po stronie klienta. Jeśli kod aplikacji ma zostad umieszczony w osobnym pliku (Code Behind), to w są zdefiniowane atrybuty CodeFile (nazwa pliku) oraz Inherits (nazwa klasy częściowej zawierającej kod aplikacji). Kod aplikacji jest zawsze kompilowany przed wykonaniem. Może on byd także prekompilowany i dołączony do aplikacji w postaci binarnej. Układ strony Układ strony jest opisany za pomocą kodu znacznikowego, który zawiera kontrolki serwerowe, ciągi tekstu oraz znaczniki języka HTML. Wygląd strony może byd zdefiniowany na stronie poprzez ustawienie właściwości indywidualnych elementów lub przy pomocy arkuszy styli. Dodawanie stron internetowych do aplikacji Do Projektu witryny można dodad nową lub istniejącą stronę internetową. Dodanie nowej strony możliwe jest: po wybraniu z menu głównego Website -> Add New item po wciśnięciu kombinacji klawiszy Ctrl+Shift+A po wybraniu Add New Item z menu kontekstowego wywoływanego po kliknięciu prawym przyciskiem myszy nazwy projektu w oknie Solution Explorer Po wybraniu jednej z powyższych opcji zostanie wyświetlone okno dialogowe (Rys. 5). Strona 4-6

7 Rys. 5 Okno dialogowe Add New Item Okno dialogowe dodawania nowego obiektu do aplikacji zawierające następujące elementy: 1. Templates opcja to umożliwia wybranie szablonu dodawanego pliku. 2. Name pole tekstowe umożliwiające określenie nazwy pliku. 3. Language lista rozwijana umożliwiająca wybór jednego z języków programowania stron internetowych. 4. Place code in separate file pole wyboru określające, czy kod aplikacji ma zostad umieszczony w osobnym pliku (pole zaznaczone), czy też w pliku.aspx w znaczniku <script> (pole niezaznaczone). 5. Select master page pole wyboru określające, czy strona internetowa bazuje na stronie wzorcowej (pole zaznaczone). Jeśli opcja ta została zaznaczona, to po wciśnięciu przycisku OK użytkownik zostanie poproszony o wskazanie strony wzorcowej. Więcej informacji na temat stron wzorcowych zostanie przedstawionych później. Kontrolki na stronie Dodawanie kontrolek do strony Kontrolki możemy dodad do strony w dowolnym widoku: Design, Split lub Source. W oknie Toolbox należy wybrad interesujący nas komponent, a następnie, przeciągnąd go na formularz lub dwukrotnie kliknąd. Kontrolka jest umieszczana zgodnie z przepływem elementów na stronie internetowej. Aby umieścid ją w dowolnym miejscu, musimy wykorzystad pozycjonowanie CSS. Określanie właściwości kontrolki Każda kontrolka posiada zbiór właściwości, które możemy określid w oknie Properites (Rys. 6). Strona 4-7

8 Rys. 6 Przykład okna Properties dla kontrolki Label Najczęściej wykorzystuje się właściwośd ID, określającą nazwę kontrolki oraz Text, pozwalającą określid wyświetlany w niej tekst. Obsługa zdarzeń Zdarzenia to pewne akcje wykonywane w odpowiedzi na interakcję użytkownika z kontrolkami na stronie. Mogą nastąpid, gdy naciska on przycisk, wybiera rekord w liście rekordów lub w inny sposób wchodzi w interakcję z interfejsem użytkownika. Zdarzenia mogą byd również generowane przez aplikację, gdy rozpoczyna lub kooczy jakieś zadanie (np. generowanie wynikowego dokumentu HTML). Możemy programowo kontrolowad działanie aplikacji za pomocą metody obsługi zdarzenia. Jest to funkcja napisana w wybranym języku programowania, wywoływana w momencie, gdy nastąpi powiązane z nią zdarzenie. Najczęściej wykorzystywanym zdarzeniem jest zdarzenie Load klasy Page. Jest ono wywoływane w momencie, gdy po stronie serwera aplikacja zainicjalizuje wszystkie obiekty kontrolek. Innym często wykorzystywanym zdarzeniem jest zdarzenie Click klasy Button, pozwalające określid, co ma się stad po wciśnięciu przycisku przez użytkownika. Wiele klas udostępnia więcej niż jedno zdarzenie, np. klasa Button oprócz wspomnianego już zdarzenia Click udostępnia również zdarzenie Command. W takim wypadku jedno z nich jest określane jako domyślne. Dla przykładu zdarzenie Click jest domyślnym zdarzeniem klasy Button. Z poziomu Visual Studio dostęp do domyślnego zdarzenia uzyskujemy po dwukrotnym kliknięciu wybranej kontrolki w trybie projektowania. Wygenerowana zostanie wówczas pusta metoda do jego obsługi. Dostęp do wszystkich zdarzeo jest możliwy po wybraniu kontrolki, a następnie kliknięciu w oknie Properties przycisku Events (oznaczone na Rys. 7 przez czerwone koło). By wygenerowad metodę obsługi dla któregoś z nich, wystarczy dwukrotnie kliknąd jego nazwę. Strona 4-8

9 Rys. 7 Okno Properties z listą zdarzeo Programowe odwoływanie do kontrolek Możemy programowo zmieniad właściwości kontrolek, odwołując się do nich w kodzie po ich nazwie, określonej przy pomocy właściwości ID (Rys. 8). Visual Studio podpowiada, jakie właściwości (np. Text) kontrolki możemy zmienid lub jakie metody możemy na niej wywoład (np. ToString). Przesyłanie informacji między stronami Rys. 8 Właściwości i metody kontrolki Label Metoda przesyłanie danych w parametrach adresu URL Przesyłane dane są widoczne w adresie docelowym dokumentu. Adres dokumentu jest oddzielany od parametrów znakiem zapytania, a parametry oddzielone są od siebie znakiem ampersand ( & ). Główną wadą tej metody jest ograniczenie ilości wysyłanych danych do maksymalnej długości paska adresu przeglądarki klienta. Dodatkowo problem może sprawiad przesyłanie danych binarnych. Wysyłanie informacji tą metodą polega na przygotowaniu odpowiednio sformatowanego ciągu znaków, który będzie zawierał lokalizację i nazwę pliku, do którego należy wysład zapytanie oraz odpowiednio dodane nazwy parametrów wraz z ich wartościami po znaku =. Ogólna postad adresu URL z dołączonymi parametrami żądania przesyłanego metodą GET: strona.aspx?parametr=wartość[&parametr=wartość[&...n] ] Na przykład jeśli chcemy wysład zmienną imie i nazwisko do strony Info.aspx, to dane te można przesład w adresie w następujący sposób: Info.aspx?imie=wartosc&nazwisko=wartosc Przygotowany ciąg znaków należy wysład przy pomocy metody Response.Redirect(url), gdzie url jest ciągiem znaków, np.: Strona 4-9

10 Response.Redirect("Info.aspx?imie=" + imietextbox.text + "&nazwisko=" + nazwiskotextbox.text); Po wykonaniu powyższego kodu przeglądarka zostanie przekierowana do strony Info.aspx, a w pasku adresu może pojawid się przykładowo następujący ciąg znaków: W celu wykorzystania tych informacji na stronie docelowej należy użyd właściwości QueryString obiektu Request, np. Request.QueryString["imie"] Metoda przesyłania zawartości jednego formularza do drugiego Metoda przesyłania zawartości jednego formularza do drugiego umożliwia przesyłanie niemal nieograniczonych ilości danych, dlatego jest stosowana w większości formularzy internetowych. Dodatkową jej zaletą jest to, że przesyłane informacje nie pokazują się w pasku adresu przeglądarki. Ta właściwośd czyni ją najlepszym rozwiązaniem przy przesyłaniu poufnych danych z uwzględnieniem takich mechanizmów, jak szyfrowanie połączenia. Przykład kodu po stronie wysyłającej: <form id="form1" runat="server"> <asp:textbox id="textbox1" runat="server"></asp:textbox> <asp:button ID="Button2" runat="server" Text="Wyślij" PostBackUrl="~/Default2.aspx" /> </form> Przykład kodu po stronie odbierającej: TextBox txt = (TextBox) PreviousPage.FindControl("TextBox1"); dane= txt.text; Połączenie obu metod Po stronie wysyłającej: protected void Button1_Click(object sender, EventArgs e) { Server.Transfer("Default2.aspx?imie=Piotr"); } Po stronie odbierajacej: protected void Page_Load(object sender, EventArgs e) { daneget= Request.QueryString["imie"]; danepost1 = Request.Form["TextBox1"].ToString(); TextBox txt = (TextBox) PreviousPage.FindControl("TextBox2"); danepost2 = txt.text; } Podsumowanie W tym rozdziale przedstawione zostały podstawowe informacje dotyczące aplikacji ASP.NET i pracy w środowisku Visual Studio. Dowiedziałeś się, jak tworzyd aplikacje ASP.NET oraz jak dodawad kontrolki do formularzy i nowe strony do aplikacji. Zostały również omówione mechanizmy przesyłania informacji między stronami. Przykładowe rozwiązanie Utworzenie aplikacji internetowej Aplikacje internetowe w Visual Studio 2008 nauczymy się tworzyd na przykładzie prostej aplikacji, której zadaniem będzie wyświetlenie komunikatu Witaj świecie. Aby utworzyd nową aplikację internetową w Visual Studio 2008, wybieramy z menu File -> New Web Site. Otworzy się okno New Web Site. Z listy Visual Studio installed templates wybieramy Strona 4-10

11 ASP.NET Web Site. Pliki aplikacji możemy przechowywad w systemie plików, na lokalnym serwerze WWW lub pod zdalną lokalizacją. Zdecydujemy się na pierwsze rozwiązanie, w tym celu z listy Location wybieramy File System, a w polu obok określamy położenie plików aplikacji w dowolnym miejscu na dysku, nazywając ostatni katalog MojaPierwszaStrona. Projekt chcemy przygotowad w języku Visual C#, więc wybieramy go z listy Language. Po kliknięciu OK we wskazanym katalogu zostaną utworzone pliki aplikacji. W oknie Solution Explorer możemy zobaczyd nowo utworzony projekt. Składają się na niego: plik Default.aspx pusta strona ASP.NET plik Web.config plik przechowujący ustawienia konfiguracyjne katalog App_Data specjalny katalog, w którym umieszczane są dane aplikacji Rys. 9 Początkowa zawartośd aplikacji Plik Default.aspx standardowo otwiera się w głównym oknie Visual Studio w widoku Source. By móc edytowad stronę w trybie WYSIWYG, możemy przełączyd się na widok Design. Zróbmy tak, następnie kliknijmy obszar strony i wpiszmy Witaj świecie!. Aby zobaczyd wynik naszej pracy w przeglądarce internetowej, musimy uruchomid aplikację. W tym celu wybieramy z menu Debug -> Start Debugging. Przy pierwszym uruchomieniu aplikacji pojawi się okno z informacją, że możliwośd debugowania nie jest włączona (Rys. 10). Jeśli nie zmienimy niczego i klikniemy OK, Visual Studio samodzielnie zmodyfikuje plik Web.config, umożliwiając nam posługiwanie się debuggerem. Na czas projektowania aplikacji warto włączyd tę opcję. Rys. 10 Okno Debugging Not Enabled Aplikację można również uruchomid w trybie bez możliwości debugowania, wybierając z menu głównego Debug -> Start Without debugging. Po uruchomieniu aplikacji powinna otworzyd się przeglądarka internetowa, a w niej strona Default.aspx. Adres strony może wyglądad następująco: Poszczególne elementy oznaczają: aplikacja jest uruchamiana na serwerze lokalnym 5110 numer portu, na którym został uruchomiony serwer MojaPierwszaStrona nazwa aplikacji Strona 4-11

12 Default.aspx strona internetowa Posługiwanie się kontrolkami Podstawową umiejętnością, jaką powinniśmy posiadad tworząc aplikacje ASP.NET, jest umiejętnośd posługiwania się kontrolkami. Pracy z nimi nauczymy się na przykładzie prostej aplikacji, pobierającej od użytkownika imię oraz płed i wyświetlającej te informacje na stronie. Utwórzmy nową aplikację, a następnie otwórzmy plik Default.aspx w trybie Design i w obszarze strony wpiszmy Podaj imię:. Obok napisu powinniśmy dodad pole tekstowe, w które użytkownik będzie mógł wpisad swoje imię. Funkcję tę spełnia kontrolka TextBox. Znajdziemy ją w oknie Toolbox, w kategorii Standard by dodad ją do strony, możemy przeciągnąd ją na obszar projektowania lub kliknąd ją dwukrotnie. Warto zauważyd, że nie możemy umieścid kontrolki w dowolnym miejscu na stronie, a jedynie obok napisu. Jest to związane z układem elementów na stronie internetowej. Jeśli chcemy swobodnie rozmieszczad kontrolki na stronie, powinniśmy użyd CSS. Warto pamiętad, aby zawsze nadawad kontrolkom znaczące nazwy. W tym celu w oknie Properties zmienimy właściwośd ID kontrolki TextBox z TextBox1 na imietextbox. Kursor w widoku projektowania powinien aktualnie znajdowad się za polem tekstowym. Naciskając Enter przeniesiemy go do nowej linii. Zobaczmy, jak wygląda kod strony, przełączając się na widok Source (możemy również przejśd do widoku Split i obserwowad jednocześnie widoki Design i Source). Warto zauważyd, że naciśnięcie klawisza ENTER spowodowało dodanie znacznika <br />. Przełączmy się z powrotem na widok Design i w drugiej linii wpiszmy Podaj płed:. Następnie dodajmy kontrolkę DropDownList reprezentującą listę rozwijaną i nadajmy jej nazwę plecdropdownlist. Możemy wypełnid ją dopuszczalnymi wartościami na dwa sposoby: wykorzystując narzędzia Visual Studio lub ręcznie dodając kolejne pozycje w kodzie strony. Zdecydujemy się na pierwsze rozwiązanie. Jeśli zaznaczymy kontrolkę w widoku Design, po jej prawej stronie powinniśmy zauważyd ikonę, tzw. Smart Tag. Smart Tag umożliwia szybki dostęp do najczęściej używanych funkcji związanych z kontrolką. Kliknijmy go i wybierzmy Edit Items. Otworzy się okno ListItem Collection Editor (Rys. 11), w którym możemy dodad elementy do listy. By dodad pierwszy element, kliknijmy przycisk Add. Rys. 11 Okno ListItem Collection Editor Na liście właściwości po prawej stronie odnajdźmy właściwośd Text, która określa tekst wyświetlany dla elementu i przypiszmy jej wartośd Kobieta. Następnie w polu Value, określającym jego unikatową wartośd, wpiszmy K. Dodajmy kolejny element do listy, lecz tym razem w polach Text i Value wpiszmy odpowiednio: Mężczyzna i M. Warto zwrócid uwagę, że standardowo pole Value jest wypełniane taką samą wartością, jak pole Text, lecz w naszym Strona 4-12

13 przypadku ze względu na problemy, które mogą występowad z polskimi znakami diakrytycznymi, lepiej będzie zastosowad skróty. Po wypełnieniu listy dodajemy na stronie kontrolkę Button o nazwie pokazbutton i w następnej linii kontrolkę Label o nazwie wyswietllabel. Chcemy, by po kliknięciu przycisku w etykiecie wyświetlały się informacje o użytkowniku. Aby wygenerowad metodę obsługi kliknięcia przycisku, wystarczy kliknąd go dwukrotnie. W efekcie w pliku Default.aspx.cs powinna pojawid się pusta metoda pokazbutton_click. Komunikat dla użytkownika przygotujemy na podstawie wartości wybranych w poszczególnych kontrolkach, a następnie ustawimy go jako treśd etykiety. Wykorzystamy do tego następujący kod, który umieścimy wewnątrz metody pokazbutton_click: string wyswietl = "Witaj " + imietextbox + "!<br />"; if (plecdropdownlist.selectedvalue == "K") wyswietl += "Jesteś kobietą"; else if (plecdropdownlist.selectedvalue == "M") wyswietl += "Jesteś mężczyzną"; wyswietllabel.text = wyswietl; Przesyłanie informacji między stronami By zaprezentowad możliwośd przesyłania informacji między stronami, do przygotowanej poprzednio aplikacji dodamy możliwośd przekazywania wartości wpisanej w polu tekstowym przy pomocy metody GET, zaś wartości wybranej z listy przy pomocy metody POST. Zaczniemy od dodania do naszej strony jeszcze jednej kontrolki Button o nazwie wyslijbutton i etykiecie Wyślij. W metodzie obsługi zdarzenia kliknięcia dodajmy następujący kod: Server.Transfer("Ankieta.aspx?imie=" + imietextbox.text); Spowoduje on przekierowanie po stronie serwera do strony Ankieta.aspx z parametrem imie, przechowującym zawartośd kontrolki imietextbox. Dodajmy nową stronę do aplikacji. W tym celu możemy wybrad z menu Website -> Add Add New Item lub kliknąd prawym przyciskiem myszy w oknie Solution Explorer i z menu kontekstowego wybrad Add New Item. Pojawi się okno Add New Item. Na liście zainstalowanych szablonów wybieramy Web Form, w polu Name wpisujemy Ankieta.aspx, zaś w polu Language wybieramy Visual C#. Pozostawiamy zaznaczone tylko jedno pole wyboru, Place code in separate file, a następnie klikamy Add. Do nowej strony dodajemy kontrolkę Label o nazwie wyswietllabel, a następnie w widoku podglądu strony klikamy dwukrotnie obszar formularza. Visual Studio otworzy edytor kodu strony i umieści kursor w metodzie Page_Load. Dodamy w niej kod pobierający wartośd przekazanego w adresie parametru imie: string wyswietl = "Witaj " + Request.QueryString["imie"] + "<br />"; a także kod pobierający dane z poprzedniej strony: DropDownList ddl = (DropDownList)PreviousPage.FindControl("plecDropDownList"); Na podstawie wybranego element w liście rozwijanej do treści komunikatu dodamy dodatkowe informacje: if (ddl.selectedvalue == "K") { wyswietl += "Jesteś kobietą."; } if (ddl.selectedvalue == "M") { wyswietl += "Jesteś mężczyzną."; } Na koocu przypisz zawartośd zmiennej wyswietl do własności Text kontrolki Label: Strona 4-13

14 wyswietllabel.text = wyswietl; Porady praktyczne Praca z Visual Studio Jeśli omyłkowo zamknąłeś któreś z okien, możesz otworzyd je ponownie korzystając z menu View. Możesz przeciągad myszą elementy z okna Solution Explorer do okna głównego, uzyskując różne efekty. Przykładowo po przeciągnięciu obrazka Visual Studio automatycznie wygeneruje znacznik <img>, zaś przy przenoszeniu arkusza stylów CSS w kodzie strony pojawi się znacznik <link>. By sprawnie pracowad w środowisku Visual Studio, powinieneś nauczyd się najważniejszych skrótów klawiszowych. Niektóre z nich są podane w tym module, zaś pełną listę znajdziesz w plikach pomocy. Pamiętaj też, że każdy skrót możesz dostosowad, wybierając z menu głównego Tools -> Customize -> Keyboard. Tworzenie aplikacji Jeśli nie wykorzystujesz zaawansowanych funkcji serwera IIS, możesz umieścid pliki aplikacji w dowolnym miejscu w systemie plików i testowad ją wykorzystując zintegrowany serwer WWW dostarczany razem z Visual Studio. Opcja ta jest szczególnie przydatna, gdy nie posiadasz uprawnieo administracyjnych do serwera IIS. Jeśli testowałeś swoją aplikację jedynie pod zintegrowanym serwerem WWW, przed uruchomieniem jej w środowisku produkcyjnym koniecznie przetestuj ją na serwerze IIS. Istnieją pewne subtelne różnice w zachowaniu tych dwóch serwerów, m.in. w zakresie obsługi statycznych plików aplikacji, takich jak dokumenty HTML, arkusze stylów CSS czy pliki graficzne. Tworząc nową aplikację Web w Visual Studio 2008 masz możliwośd wyboru wersji.net Framework. Pamiętaj, że musi ona byd zainstalowana nie tylko na komputerze, na którym tworzysz i testujesz aplikację, lecz również na serwerze, na którym zamierzasz docelowo ją umieścid. Jeśli zdecydujesz się utworzyd aplikację dla.net Framework 2.0, musisz liczyd się z tym, że udogodnienia wprowadzone w wersji 3.5, m.in. zintegrowana obsługa Ajax, nie będą dostępne. Gdy uruchamiasz aplikację bez debugowania, możesz z poziomu Visual Studio wprowadzad zmiany w kodzie aplikacji, które będą widoczne po odświeżeniu strony w przeglądarce. Przed umieszczeniem aplikacji w środowisku produkcyjnym upewnij się, że możliwośd debugowania jest wyłączona w pliku konfiguracyjnym. Zapewnisz w ten sposób lepszą wydajnośd aplikacji, zaś w przypadku błędu na stronie fragmenty kodu nie będą prezentowane użytkownikowi. Tworzenie stron Staraj się umieszczad kod strony w osobnym pliku. Możliwośd osadzania kodu wykonywalnego w kodzie znaczników przydaje się głównie przy różnego rodzaju prezentacjach. W oknie Add New Item lista szablonów zależy od dodatków zainstalowanych w systemie. Dodawanie kontrolek do strony Kontrolki są rozmieszczane na stronie tak samo, jak elementy HTML. By móc swobodnie sterowad ich położeniem, możesz wykorzystad CSS. Staraj się nie korzystad z wizualnych własności kontrolek wymienionych w oknie Properties, takich jak kolor tła czy rozmiar tekstu. Do zarządzania wyglądem strony używaj CSS. Elementy posiadające atrybut runat="server" najczęściej muszą posiadad również atrybut ID, dzięki czemu można odwoływad się do nich w kodzie. Pamiętaj, że atrybuty te możesz Strona 4-14

15 nadawad nie tylko kontrolkom serwerowym, lecz również zwykłym elementom HTML, takim jak <div> czy <img>. Nigdy nie powinieneś polegad na tym, że właściwośd ID elementu z atrybutem runat="server" będzie mied taką samą wartośd po stronie klienta i serwera. ASP.NET nie gwarantuje tego w żaden sposób i często dodaje dodatkowe elementy do nazwy. Z tego względu użycie selektorów ID w CSS, np. #imietextbox { font-weight: bold } jest zupełnie niepraktyczne. W celu określenia wyglądu kontrolek ASP.NET stosuj właściwośd CssClass i klasy CSS. Przesyłanie informacji między stronami Przesyłanie informacji między stronami w parametrach adresu URL ma ograniczone zastosowanie, gdyż nie chroni danych w żaden sposób, jak również nie pozwala przekazywad większych porcji informacji. By móc przekazywad dane binarne w parametrze adresu URL, powinieneś zastosowad jakieś kodowanie transportowe powszechnie w tym celu wykorzystuje się kodowanie Base64. Niestety musisz liczyd się z tym, że rozmiar danych po zakodowaniu ulegnie zwiększeniu. Może się zdarzyd, że w łaocuchu znaków przesyłanym w parametrze adresu URL znajdzie się jakiś znak specjalny, np. ampersand ( & ). Jeśli dokleimy taki łaocuch jako wartośd dla parametru, może ona później zostad nieprawidłowo zinterpretowana przez serwer. By zabezpieczyd się przed taką sytuacją, powinieneś kodowad wartości parametrów przy pomocy metody Server.UrlEncode. Uwagi dla studenta Jesteś przygotowany do realizacji laboratorium jeśli: umiesz tworzyd aplikacje internetowe ASP.NET w Visual Studio 2008 umiesz dodawad nowe strony do aplikacji umiesz dodawad kontrolki do strony wiesz co to jest i jak utworzyd metodę obsługi zdarzenia umiesz programowo odwoływad się do kontrolek wiesz co to jest Smart Tag i jak z niego korzystad wiesz jak przesyład informację pomiędzy stronami metodą GET i POST Pamiętaj o zapoznaniu się z uwagami i poradami zawartymi w tym module. Upewnij się, że rozumiesz omawiane w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego w uwagach, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z wykładów. Dodatkowe źródła informacji 1. Dino Esposito, Programming Microsoft ASP.NET 3.5, Microsoft Press, 2008 Praktyczne podejście do tworzenia aplikacji w ASP.NET 3.5. szczegółowy przewodnik po najważniejszych elementach projektowania stron internetowych w ASP.NET 3.5. Zawiera przegląd od podstaw do zaawansowanych elementów technologii. 2. Tomasz Jahołkowski, Jacek Matulewski, ASP.NET w Visual Web Developer Ćwiczenia, Helion, 2008 Książka przeznaczona jest dla początkujących programistów, pragnących tworzyd witryny ASP.NET, którzy zetknęli się już z jakimkolwiek językiem programowania. Dzięki temu podręcznikowi nauczysz się korzystad z opisanych narzędzi, działających w nowoczesnym środowisku Visual Web Developer Jesse Liberty, Dan Hurwitz, ASP.NET. Programowanie, Helion, 2006 Strona 4-15

16 Podręcznik opisujący zasady tworzenia aplikacji i witryn internetowych przy użyciu języka C# 2.0, środowiska programistycznego Visual Studio 2005 i bibliotek.net 2.0. Przedstawia środowisko Visual Studio 2005 i szczegółowo omawia koncepcję budowania aplikacji za pomocą kontrolek. 4. Chris Hart, John Kauffman, David Sussman, Chris Ullman, Beginning ASP.NET 2.0 with C#, Wrox, 2006 W książce autorzy prezentują podstawy ASP.NET. Pokazują nie tylko teorię, ale również przykłady kodu w języku C#. 5. The Official Microsoft ASP.NET Site, Strona zawiera najnowsze informacje dotyczące technologii ASP.NET. Początkującym programistom ASP.NET warto polecid informacje zawarte w zakładce Get Started. Z kolei cennym źródłem wiedzy dla wszystkich bez wyjątku jest zakładka Learn. Strona 4-16

17 Laboratorium podstawowe Problem 1 (czas realizacji 15 min) Twoja firma rozpoczęła ekspansję na rynku dynamicznych aplikacji internetowych. W koocu ile można zarabiad na tworzeniu prostych stron WWW? Ponieważ chcesz byd dobrym szefem, postanowiłeś poznad technologię, w której będziecie tworzyli dynamiczne aplikacje. Wasz wybór padł na technologię ASP.NET. Swoją przygodę z nią postanowiłeś rozpocząd od prostego zadania wyświetlenia na stronie internetowej fragmentu tekstu, dzisiejszej daty oraz pobranego od użytkownika imienia. Zadanie 1. Utwórz nową stronę w Visual Studio Dodaj tekst do strony. Uruchom aplikację ASP.NET Tok postępowania Otwórz Visual Studio Z menu wybierz File -> New Web Site. Z listy Visual Studio installed templates wybierz ASP.NET Web Site. Z listy Location wybierz File System, a w polu obok określ lokalizację dla pliku w dowolnym miejscu na dysku. Z listy Language wybierz Visual C#. Kliknij OK. Przełącz się na widok Split. Na stronie internetowej w obszarze podglądu strony wpisz Witaj świecie!. Zapisz stronę wybierając z menu File -> Save Default.aspx lub wciskając kombinację klawiszy Ctrl+S. Uruchom przygotowaną aplikację wybierając z menu Debug -> Start Debugging lub wykorzystując klawisz F5. Po wybraniu tej opcji przy pierwszym uruchomieniu aplikacji pojawi się okno z informacją o konieczności zezwolenia na debugowanie (Rys. 12). Wciśnij OK. Rys. 12 Okno z informacją o modyfikacji pliku Web.config 3. Dodaj kontrolki Label 4. Dodaj procedurę obsługi zdarzenia Na stronie w nowej linii dopisz Dzisiaj jest, a następnie z okna Toolbox przeciągnij kontrolkę Label, umieszczoną w zakładce Standard. Kontrolkę możesz umieścid w obszarze podglądu strony lub w kodzie źródłowym. Wybierz dodaną kontrolkę i w oknie Properties w polu (ID) wpisz dzisiajlabel, natomiast pole Text zostaw puste. W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio otworzy edytor kodu strony i umieści kursor w metodzie Page_Load. Do metody dodaj następujący kod wyświetlającą aktualną datę w Strona 4-17

18 Page_Load 5. Dodaj kontrolki TextBox, Button i obsłuż zdarzenia Click 6. Przetestuj stronę kontrolce dzisiajlabel: dzisiajlabel.text = DateTime.Today.ToShortDateString(); Zapisz zmiany i uruchom przygotowaną stronę. Na stronie w nowej linii dopisz: Podaj swoje imię:, a następnie z okna Toolbox przeciągnij kontrolkę TextBox i w oknie Properities w polu (ID) wpisz imietextbox. Następnie obok poprzedniej kontrolki dodaj do strony kontrolkę Button w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) wyswietlbutton W nowej linii dodaj kontrolkę Label i w oknie Properities w polu (ID) wpisz imielabel i usuo zwartośd pola Text. Dwukrotnie kliknij kontrolkę Button. Visual Studio otworzy edytor kodu strony i umieści kursor w metodzie wyswietlbutton_click. Do metody dodaj: imielabel.text = "Witaj " + imietextbox.text; Zapisz zmiany i uruchom przygotowaną stronę. W oknie tekstowym podaj swoje imię, a następnie wciśnij przycisk Wyświetl. Problem 2 (czas realizacji 30 min) Poprzednie zadanie okazało się byd łatwiejsze niż sądziłeś. Zachęcony pierwszymi sukcesami rzuciłeś sobie nowe wyzwanie postanowiłeś dowiedzied się, jak przesyład informacje między stronami. Zdecydowałeś, że przygotujesz prostą ankietę dla agencji modelek i modeli, którą prowadzi Twój dobry przyjaciel. Kto wie, może nawet uda Ci się go namówid do zmiany strony internetowej? Wymyśliłeś, że na pierwszej stronie użytkownik będzie mógł wprowadzid imię oraz określid swoją płed, na podstawie której będzie następnie przekierowywany na odpowiednią stronę z pytaniami. Zadanie 1. Dodaj nową stronę do aplikacji 2. Dodaj kontrolkę do wpisania imienia, określenia płci oraz przekierowania na stronę ankiety Tok postępowania Otwórz Visual Studio Z menu wybierz File -> New Web Site. Z listy Visual Studio installed templates wybierz ASP.NET Web Site. Z listy Location wybierz File System, a w polu obok określ lokalizację dla pliku w dowolnym miejscu na dysku. Z listy Language wybierz Visual C#. Kliknij OK. Na stronie napisz Podaj swoje imię:, a następnie z okna Toolbox przeciągnij kontrolkę TextBox. Ustaw jej właściwośd ID na imietextbox. W nowej linii dodaj tekst Podaj płed:, a następnie kontrolkę DropDownList. Ustaw jej właściwośd ID na plecdropdownlist. Zaznacz ostatnio dodaną kontrolkę w widoku projektowania strony, a następnie kliknij ikonę, która pojawi się po jej prawej stronie (Smart Tag) i wybierz Edit Items (Rys. 13). Strona 4-18

19 Rys. 13 Okno Listitem Collection Editor 3. Dodaj nową stronę do projektu zawierającą pytania dla kobiet W oknie ListItem Collection Editor wciśnij przycisk Add. W obszarze Properties po prawej stronie w polu Text wpisz Kobieta, a w polu Value K. Kliknij przycisk Add. W obszarze Properties po prawej stronie w polu Text wpisz Mężczyzna, a w polu Vaule M. Dodaj kontrolkę Button i w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) wyswietlbutton. Następnie dwukrotnie ją kliknij. Visual Studio otworzy edytor kodu strony i umieści kursor w metodzie wyslijbutton_click. W metodzie dodaj następujący kod: if (plecdropdownlist.selectedvalue=="k") {Response.Redirect("Kobieta.aspx?imie=" + imietextbox.text); } else if (plecdropdownlist.selectedvalue == "M") {Response.Redirect("Mezczyzna.aspx?imie=" + imietextbox.text); } Wybierz menu Website -> Add Add New Item lub wciśnij Ctrl+Shift+A lub w oknie Solution Explorer kliknij prawym przyciskiem myszy i wybierz Add New Item (Rys. 14). Rys. 14 Okno Add New Item Strona 4-19

20 4. Pobierz dane przesłane do strony przy pomocy metody GET 5. Umieśd pytania do ankiety 6. Dodaj nową stronę do projektu zawierającą podziękowania za wypełnienie ankiety 7. Dodaj nową stronę do projektu zawierającą Określ następujące elementy dla nowej strony: nazwa: Kobieta.aspx język: Visual C# opcja Place code in separate file zaznaczona opcja Select master page niezaznaczona Do nowej strony dodaj kontrolkę Label. i w oknie Properities w polu (ID) wpisz wyswietllabel i usuo zwartośd pola Text. W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio otworzy edytor kodu strony i umieści kursor metodzie Page_Load. Do metody dodaj kod pobierający dane z poprzedniej strony przesłane w parametrze imie adresu URL: wyswietllabel.text = "Witaj " + Request.QueryString["imie"]; W pliku Kobieta.aspx poniżej kontrolki Label dodaj elementy umożliwiające pobranie informacji od użytkownika serwisu: wpisz E- mail: i dodaj kontrolkę TextBox. Nadaj jej odpowiednią właściwośd ID. Kolejno dodaj w osobnych wierszach kontrolki TextBox wraz z poprzedzającymi je informacjami umożliwiające pobranie następujących danych: wzrost numer ubrania numer buta obwód biustu talia biodra Na dole strony dodaj kontrolkę Button i w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) wyswietlbutton. Następnie dwukrotnie ją kliknij. W metodzie wyslijbutton_click dodaj następujący kod: Server.Transfer("Dziekujemy.aspx?imie=" + Request.QueryString["imie"]); Dodaj nową stronę do projektu. Określ następujące elementy dla nowej strony: nazwa: Dziekujemy.aspx język: Visual C# opcja Place code in separate file zaznaczona opcja Select master page niezaznaczona Do nowoutworzonej strony dodaj kontrolkę Label. Określ jej właściwośd ID na wyswietllabel, natomiast właściwośd Text zostaw pustą. W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio otworzy edytor kodu strony i umieści kursor metodzie Page_Load. Do metody dodaj kod pobierający dane z poprzedniej strony przesłane w parametrze imie adresu URL: wyswietllabel.text = Request.QueryString["imie"] + ", dziękujemy za wypełnienie ankiety"; Dodaj nową stronę do projektu. Określ następujące elementy dla nowej strony: nazwa: Mezczyzna.aspx język: Visual C# Strona 4-20

21 pytania dla mężczyzn i pobierz dane przesłane przy pomocy metody GET 8. Umieśd pytania do ankiety 9. Przetestuj stronę opcja Place code in separate file zaznaczona opcja Select master page niezaznaczona Do nowej strony dodaj kontrolkę Label i w oknie Properities w polu (ID) wpisz wyswietllabel i usuo zwartośd pola Text. W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio otworzy edytor kodu strony i umieści kursor metodzie Page_Load. Do metody dodaj kod pobierający dane z poprzedniej strony przesłane w parametrze imie adresu URL: wyswietllabel.text = "Witaj " + Request.QueryString["imie"]; W pliku Mezczyzna.aspx poniżej kontrolki Label dodaj elementy umożliwiające pobranie informacji od użytkownika serwisu: wpisz E- mail: i dodaj kontrolkę TextBox. Nadaj jej odpowiednią właściwośd ID. Kolejno dodaj w osobnych wierszach kontrolki TextBox wraz z poprzedzającymi je informacjami umożliwiające pobranie następujących danych: wzrost numer ubrania numer buta obwód klatki obwód pasa Na dole strony dodaj kontrolkę Button i w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) wyswietlbutton. Zmieo jej właściwośd Text na Wyślij, a ID na wyslijbutton. Następnie dwukrotnie ją kliknij. W metodzie wyslijbutton_click dodaj następujący kod: Server.Transfer("Dziekujemy.aspx?imie=" + Request.QueryString["imie"]); Zapisz zmiany i uruchom stronę Default.aspx. W oknie tekstowym podaj swoje imię, wybierz płed, a następnie wciśnij przycisk Wyświetl. Dlaczego zastosowano Server.Transfer w metodzie wyslijbutton_click? Co to umożliwia? Strona 4-21

22 Laboratorium rozszerzone Po ukooczeniu poprzedniego zadania postanowiłeś pokazad ankietę Twojemu koledze, prowadzącemu agencję modeli i modelek. Bardzo spodobał mu się pomysł na nową stronę dla agencji. Już dawno myślał o takiej ankiecie na swojej stronie, aby ułatwid sobie prowadzenie rekrutacji i poszerzyd swoją bazę modeli i modelek. W związku z tym zgodziłeś się przygotowad serwis internetowy dla agencji modelek i modeli Modelinki. Twoim zadaniem jest opracowanie wyglądu strony i przygotowanie strony głównej, na której powinieneś umieścid m.in. link do ankiety. Strona ankiety musi umożliwid pobranie od każdego chętnego do pracy w charakterze modela następujących informacji: imię nazwisko adres zamieszkania telefon wiek wzrost waga kolor włosów kolor oczu rozmiar ubrania numer butów doświadczenie (wybierane od 1 do 5) płed Na podstawie płci należy pobrad następujące informacje: w przypadku kobiet: obwód biustu wielkośd miseczki talia biodra długośd nogi w przypadku mężczyzn: klatka pas długośd nogi Na stronie z podziękowaniem za wypełnienie ankiety powinno znaleźd się podsumowanie podanych w ankiecie informacji. Wszystkie strony aplikacji powinny mied spójny wygląd. Strona 4-22