ITA-103 Aplikacje Internetowe. Piotr Bubacz. Moduł 5. Wersja 1. Kontrolki serwerowe

Transkrypt

1 Piotr Bubacz Moduł 5 Wersja 1 Spis treści... 1 Informacje o module... 2 Przygotowanie teoretyczne... 3 Przykładowy problem... 3 Podstawy teoretyczne... 3 Przykładowe rozwiązanie... 9 Porady praktyczne Uwagi dla studenta Dodatkowe źródła informacji Laboratorium podstawowe Problem 1 (czas realizacji 20 min) Problem 2 (czas realizacji 20 min) Problem 3 (czas realizacji 10 min) Laboratorium rozszerzone Zadanie 1 (czas realizacji 90 min)... 24

2 Informacje o module Opis modułu W tym module znajdziesz informacje dotyczące kontrolek dostępnych w ASP.NET. Poznasz różnice między kontrolkami serwerowymi HTML a kontrolkami Web. Nauczysz się wykorzystywad nie tylko różne kontrolki serwerowe, ale również walidowad wprowadzone dane po stronie klienta lub/i po stronie serwera. Cel modułu Celem modułu jest przedstawienie możliwości programowego wykorzystania kontrolek serwerowych oraz prostej walidacji danych po stronie klienta. Uzyskane kompetencje Po zrealizowaniu modułu będziesz: umiał programowo odwoływad się do złożonych kontrolek serwerowych potrafił walidowad dane wprowadzane po stronie klienta umiał wykorzystywad rozbudowane kontrolki, takie jak MultiView i AdRotator wiedział co to jest cykl życia strony i w jaki sposób możesz sprawdzid, czy strona jest przesłana po raz pierwszy do klienta Wymagania wstępne Przed przystąpieniem do pracy z tym modułem powinieneś: znad podstawy języka XHTML. znad zasady pracy w środowisku Visual Studio, w szczególności tworzenia stron internetowych 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, Kaskadowe Arkusze Stylów CSS i Wprowadzenie do ASP.NET. MODUŁ 14 MODUŁ 13 MODUŁ 1 MODUŁ 12 MODUŁ 2 MODUŁ 11 MODUŁ 5 MODUŁ 3 MODUŁ 10 MODUŁ 4 MODUŁ 9 MODUŁ 8 MODUŁ 6 Rys. 1 Mapa zależności modułu Strona 5-2

3 Przygotowanie teoretyczne Przykładowy problem Posiadamy już wiedzę dotyczącą tworzenia aplikacji internetowych, dodawania prostych kontrolek do strony, dodawania stron do aplikacji oraz przesyłania informacji między stronami. Nadszedł czas na poważniejsze zadania. Podstawowym problemem, z jakim spotykają się twórcy aplikacji internetowych, jest sprawdzanie poprawności danych wprowadzanych przez użytkownika. Walidację powinniśmy zawsze realizowad po stronie serwera, istnieją jednak sytuacje, w których wstępne sprawdzenie danych warto przeprowadzid już po stronie klienta, np. gdy chcemy upewnid się, czy wymagane pola zostały wypełnione lub czy format wprowadzonych danych jest prawidłowy. Możemy to zrealizowad przy pomocy własnych skryptów napisanych w JavaScript, jednak najpierw musimy poznad ten język, a najczęściej również różnice w jego interpretacji przez różne przeglądarki. Na szczęście programiście ASP.NET do podstawowej walidacji wystarczy jedynie znajomośd kilku kontrolek. Innym problemem, z jakim możemy się spotkad, jest koniecznośd prezentowania różnych elementów na stronie w zależności od potrzeb. W module 3 wykorzystaliśmy dwie dodatkowe strony do wyświetlenia ankiety w zależności od płci użytkownika. Na pewno istnieje lepsze rozwiązanie tego problemu. Podstawy teoretyczne ASP.NET możemy podzielid na dwie grupy: kontrolki Web i kontrolki HTML. Komponentów z tej pierwszej grupy używaliśmy już w module 3. Kontrolki HTML to zwykłe elementy HTML, do których możemy odwoływad się w kodzie strony. Niezależnie od rodzaju kontrolki, przed przesłaniem do klienta jest ona przekształcana na kod znaczników zgodny ze standardem XHTML. Wygenerowany kod może wyglądad różnie, gdyż ASP.NET stara się dostosowad go do możliwości, jakie oferuje przeglądarka użytkownika. Programista ma wpływ nie tylko na wygląd kontrolki,, ale może również określid pewne jej zachowania, np. która kontrolka będzie aktywna po wywołaniu strony. Kontrolki HTML Serwerowe kontrolki HTML definiuje się jak zwykłe elementy HTML, nadając im dodatkowo atrybut runat="server". W celu identyfikacji kontrolki oraz możliwości programowego odwoływania się do niej należy nadad jej atrybut ID. Kontrolki te muszą byd umieszczone w znaczniku <form>, który również musi posiadad atrybut runat="server". Serwerowe kontrolki HTML umożliwiają m.in.: programowe odwoływanie się do kontrolek z poziomu kodu aplikacji obsługę zdarzeo po stronie serwera współpracę z walidatorami wiązanie właściwości ze źródłem danych Kontrolki Web Kontrolki Web, w porównaniu do kontrolek serwerowych HTML, opisują elementy strony na wyższym poziomie abstrakcji. Chod po stronie klienta widoczne są jako standardowe znaczniki HTML, po stronie serwera udostępniają wiele zaawansowanych funkcjonalności. Podstawowe kontrolki Web Do podstawowych kontrolek należą: Label wyświetla statyczny tekst Strona 5-3

4 TextBox wyświetla pole tekstowe Button wyświetla przycisk LinkButton wyświetla odnośnik zachowujący się jak przycisk ImageButton wyświetla obrazek, który po kliknięciu myszką działa jak przycisk HyperLink wyświetla odnośnik, który użytkownik może kliknąd aby przenieśd się na inną stronę DropDownList wyświetla rozwijaną listę wyboru ListBox wyświetla listę wielokrotnego wyboru CheckBox wyświetla pole wyboru CheckBoxList wyświetla listę złożoną z pól wyboru Image wyświetla obrazek ImageMap wyświetla obrazek z opcjonalnie zdefiniowaną mapą aktywnych obszarów Table wyświetla tabelę BulletedList wyświetla listę numerowaną lub wypunktowaną HiddenField tworzy ukryte pole Literal wyświetla statyczną zawartośd Rozbudowane kontrolki Web Środowisko ASP.NET udostępnia nie tylko podstawowe kontrolki Web, ale również bardziej złożone komponenty. Przykładem takiej rozbudowanej kontrolki Web jest kontrolka MultiView. Kontrolka ta umożliwia dynamiczne prezentowanie i ukrywanie zawartości przed użytkownikiem. Definiuje ona widoki, reprezentowanych przez kontrolkę View. Tylko jeden widok może byd w danej chwili widoczny dla użytkownika. Przykładowo kontrolki MultiView możemy użyd następująco: <asp:multiview ID="MultiView1" runat="server"> <asp:view ID="stronaView" runat="server"> </asp:view> <asp:view ID="produktyView" runat="server"> </asp:view> <asp:view ID="dziekujemyView" runat="server"> </asp:view> </asp:multiview> Zmiana aktualnie wyświetlonego widoku możliwa jest po komunikacji z serwerem za pomocą metody SetActiveView. MultiView1.SetActiveView(stronaView); Kontrolki MultiView można również zagnieżdżad, tworząc złożone struktury umożliwiające praktycznie dowolne manipulowanie zawartością strony. Innym przykładem rozbudowanej kontrolki Web jest kontrolka AdRotator. Umożliwia ona wyświetlanie elementów graficznych z odnośnikami (najczęściej reklam) na stronie. AdRotator losowo wybiera grafikę z uprzednio przygotowanej listy. Możliwe jest również śledzenie ilości kliknięd. Aby skorzystad z kontrolki należy przygotowad elementy graficzne oraz odnośniki do zasobów. Następnie należy przygotowad plik XML, w którym określimy wcześniej przygotowane informacje, np.: <Advertisements> <Ad> <ImageUrl>~/Adv/Adv1.png</ImageUrl> <NavigateUrl> Strona 5-4

5 <AlternateText>Strona główna ASP.NET </AlternateText> </Ad> <Ad> <ImageUrl>~/Adv/Adv2.png</ImageUrl> <NavigateUrl> <AlternateText>Projekty OpenSource - CodePlex </AlternateText> </Ad> </Advertisements> Plik XML zawiera predefiniowane atrybuty umieszczone w Tab. 1. Tylko atrybut ImageUrl jest wymagany. Tab. 1 Atrybuty pliku XML dla kontrolki AdRotator Atrybut Opis ImageUrl Height Width NavigateUrl AlternateText Keyword Impressions Adres URL wyświetlanego obrazka. Wysokośd obrazka w pikselach. Szerokośd obrazka w pikselach. Adres URL, do którego zostanie przekierowany użytkownik po kliknięciu na kontrolkę. Tekst wyświetlany w przypadku, kiedy obrazek nie jest dostępny. Kategoria dla reklamy. Jest używana w kontrolce AdRotator do filtrowania listy reklam dla określonej kategorii. Wartośd określająca, jak często reklama jest wyświetlana w stosunku do innych reklam. Im większa wartośd, tym większa częstotliwośd wyświetlania reklamy. Suma wszystkich wartości nie może przekroczyd Sprawdzanie poprawności wpisywanych danych Typowym zadaniem przy projektowaniu stron Web jest walidacja danych wprowadzonych przez użytkownika. Użytkownik może celowo lub przez pomyłkę podad błędne dane, które mogą spowodowad niepożądane działanie aplikacji. W ASP.NET są dostępne specjalne kontrolki, które w prosty sposób umożliwiają implementację sprawdzania poprawności wpisanych danych. Kontrolki sprawdzające poprawność danych wprowadzanych przez użytkownika Kontrolki do sprawdzania poprawności danych wprowadzanych przez użytkownika nazywane są walidatorami. Walidator jest powiązany z wybraną kontrolką na stronie, która umożliwia wprowadzanie danych przez użytkownika. Ze względu na różne typy wpisywanych danych, istnieją różne kontrolki sprawdzające. Jedna kontrolka wejściowa może byd nadzorowana przez kilka walidatorów (kontrolujących np. czy wprowadzono wartośd oraz czy dana wartośd jest poprawna). Dodatkowo przygotowano kontrolkę wyświetlającą podsumowanie błędów na stronie. Każdy walidator posiada następujące właściwości: ControlToValidate ustawia lub zwraca identyfikator kontrolki, którą sprawdza walidator Display ustawia lub zwraca sposób wyświetlania i rezerwowania miejsca na stronie na komunikaty o błędach ErrorMessage ustawia lub zwraca treśd komunikatu błędu sprawdzania poprawności umieszczonego w podsumowaniu błędów IsValid ustawia lub zwraca informacje o poprawności weryfikowanych danych Strona 5-5

6 Text ustawia lub zwraca treśd komunikatu błędu sprawdzenia poprawności wyświetlanego na stronie Kontrolka RequiredFieldValidation W celu sprawdzenia, czy użytkownik wypełnił wymagane pole, wykorzystuje się kontrolkę RequiredFieldValidation: <asp:requiredfieldvalidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="imieStronaTextBox" ErrorMessage="Pole Imię jest wymagane">* </asp:requiredfieldvalidator> Najważniejsze elementy konfiguracji kontrolki to: ControlToValidate="imieStronaTextBox" ID kontrolki do sprawdzenia ErrorMessage="Pole Imię jest wymagane" komunikat pojawiający się w polu podsumowania informujący użytkownika o błędzie * symbol wyświetlany w miejscu walidatora w przypadku nie wpisania wartości w polu Kontrolka CompareValidator W celu porównania wartości między sobą, wykorzystuje się kontrolkę CompareValidator. Kontrolki tej używa się m.in. do sprawdzenia wieku użytkownika lub porównywania wprowadzonych danych ze zdefiniowaną stałą. Zachowanie kontrolki zależy od następujących właściwości: ValueToCompare zawiera stałą, z jaką porównywana jest wartośd wprowadzona przez użytkownika ControlToCompare zawiera ID kontrolki, z jaką ma byd porównana wartośd w sprawdzanej kontrolce Typ definiuje typ porównywanych danych, możliwe typy danych: String (domyślny) typ łaocuchowy Integer typ całkowity Double typ zmiennoprzecinkowy Currency typ waluty Date typ daty Operator określa sposób porównania: Equal sprawdza, czy wartości są sobie równe (ustawione domyślnie) NotEqual sprawdza, czy wartości są różne GreaterThan sprawdza, czy jedna wartośd jest większa od drugiej GreaterThanEqual sprawdza, czy jedna wartośd jest większa lub równa drugiej LessThan sprawdza, czy jedna wartośd jest mniejsza od drugiej LessThanEqual sprawdza, czy jedna kontrolka jest mniejsza lub równa drugiej DataTypeCheck sprawdza poprawnośd typów danych Przykładowo by sprawdzid, czy podana ilośd lat jest większa niż 18, możemy użyd następującej definicji: <asp:comparevalidator runat="server" id="comparevalidator1" ControlToValidate=" wiektextbox " ValueToCompare="18" Operator="GreaterThanEqual" Type="Integer" ErrorMessage="Musisz mieć co najmniej 18 lat."> * </asp:comparevalidator> Strona 5-6

7 Kontrolka RangeValidator W celu sprawdzenia, czy podana wartośd mieści się w określonym zakresie, wykorzystuje się kontrolkę RangeValidator. Najważniejsze właściwości kontrolki to: MinimumValue wartośd minimalna zakresu MaximumValue wartośd maksymalna zakresu Type typ danych Dla przykładu by sprawdzid, czy podana liczba mieści się w zakresie od 1 do 5, możemy skonfigurowad walidator następująco: <asp:rangevalidator ID="RangeValidator1" runat="server" ControlToValidate="ocenaStronaTextBox" ErrorMessage="Podaj liczbę w przedziale od 1 do 5" MinimumValue="1" MaximumValue="5" Type="Integer">* </asp:rangevalidator> Kontrolka RegularExpressionValidator W celu sprawdzenia, czy wprowadzona wartośd pasuje do określonego wzorca, wykorzystuje się kontrolkę RegularExpressionValidator. Kontrolki tę używa się do sprawdzania, czy poprawnie podano kod pocztowy, adres mailowy, numer NIP itp. Do sprawdzenia poprawności należy podad w atrybucie ValidationExpression wyrażenie regularne (ang. regular expression). Przykładowo walidator zdefiniowany jak poniżej może zostad użyty do sprawdzenia, czy użytkownik wprowadził w polu tekstowym poprawny adres <asp:regularexpressionvalidator ID="RegularExpressionValidator2" runat="server" ControlToValidate=" ProduktyTextBox" ErrorMessage="Podaj poprawny adres " ValidationExpression= "\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">* </asp:regularexpressionvalidator> Podczas projektowania w Visual Studio mamy możliwośd wyboru gotowego wyrażenia regularnego spośród najczęściej używanych (Rys. 2). Rys. 2 Edytor wyrażeo regularnych Kontrolka CustomValidator W celu sprawdzenia bardziej złożonych warunków wykorzystuje się kontrolkę CustomValidator. By sprawdzid poprawnośd danych, wywołuje ona funkcje dostarczone przez programistę. Strona 5-7

8 Kontrolka ValidationSummary Do wyświetlenia podsumowania błędów na stronie wykorzystuje się kontrolkę ValidationSummary. Wyświetla ona komunikaty zawarte w atrybutach ErrorMessage walidatorów, które wykryły błędy w nadzorowanych kontrolkach. Przykład: <asp:validationsummary ID="ValidationSummary1" runat="server" HeaderText="Błędy na stronie:" ShowSummary="true" DisplayMode="BulletList"/> Zapamiętywanie stanu kontrolki Przeglądając kod HTML wygenerowany na podstawie formularza ASP.NET nie sposób przeoczyd ukrytego pola VIEWSTATE, które może wyglądad tak: <input type="hidden" name=" VIEWSTATE" id=" VIEWSTATE" value="/wepdwujnzgzndmwntmzzgqlb8soeikatu0we7qlkzitec5wtq==" /> ViewState można przetłumaczyd jako stan strony. Przechowuje on informację dotyczące umieszczonych na niej kontrolek, np. zawartośd pola tekstowego czy indeks listy z wynikami wyszukiwania. ViewState domyślnie jest zapamiętywany w kodzie strony. Przy dużej liczba kontrolek na stronie może to prowadzid do znacznego zwiększenie rozmiaru dokumentu HTML przesyłanego do klienta. Należy również wiedzied, że pole to nie jest szyfrowane, a jedynie kodowane przy pomocy Base64. Za pomocą odpowiednich aplikacji można podejrzed jego zawartośd. Na szczęście ViewState można wyłączyd dla wybranych stron lub kontrolek, korzystając z atrybutu EnableViewState lub właściwości o tej samej nazwie. Wykorzystanie zdarzeń związanych ze stroną W module 3 poznaliśmy zdarzenia związane z interakcją użytkownika z kontrolkami. Wspomnieliśmy, że istnieje również grupa zdarzeo związanych z aplikacją oraz stroną. W tym miejscu przyjrzymy się zdarzeniom związanym ze stroną. W momencie, gdy użytkownik zażąda wyświetlenia wybranego formularza ASP.NET, następuje seria zdarzeo związanych ze stroną. Występują one zawsze w tej samej kolejności, która jest opisywana jako cykl życia strony. Do najważniejszych zdarzeo związanych z cyklem życia strony należą: 1. Init jest wywoływane, gdy strona jest inicjowana. 2. Load jest wywoływane, gdy kontrolki na stronie zostały utworzone i zainicjalizowane. 3. Zdarzenia kontrolek są wywoływane np. w przypadku zmiany wartości na liście lub kliknięcia przycisku. 4. Unload jest wywoływane po przesłaniu kodu HTML do klienta, gdy obiekt strony jest wyładowywany z pamięci. Zdarzenia te następują po sobie w takiej kolejności, w jakiej zostały wymienione. W ASP.NET formularz jest zaprojektowany do wysyłania informacji do strony w celu jej przetwarzania. Proces nazywa się komunikacja zwrotną (ang. postback). Komunikacja zwrotna może wystąpid przy określonym działaniu użytkownika. Standardowo inicjują ją kontrolki przycisków, np. Button lub LinkButton. Możliwe jest również przesłanie strony po interakcji z innymi kontrolkami w tym celu należy ustawid właściwośd AutoPostBack. Dla przykładu jeśli chcemy, aby zmiana w liście rozwijanej spowodowała przesłanie strony do serwera, należy użyd następującej definicji: Strona 5-8

9 <asp:dropdownlist ID="plecDropDownList" runat="server" AutoPostBack="True"> <asp:listitem Value="K">Kobieta</asp:ListItem> <asp:listitem Value="M">Mężczyzna</asp:ListItem> </asp:dropdownlist> Po stronie serwera będziemy mogli wykonad kod np. w metodzie obsługi zdarzenia SelectedIndexChanged obiektu listy. Czasem zachodzi potrzeba wykrycia, czy strona jest ładowana po raz pierwszy. Jest to ważne m.in. ze względu na potrzebę inicjalizacji wartości kontrolek przy pierwszym przesłaniu ich do klienta. W kolejnych żądaniach zależy nam już tylko na sprawdzeniu tego, co użytkownik zmienił na stronie. W celu sprawdzenia, czy strona jest po raz pierwszy przesłana do klienta, należy użyd właściwości IsPostBack, zwracającej wartośd true kiedy strona jest po raz kolejny wysyłana do klienta (po komunikacji zwrotnej) lub false, kiedy jest przesyłana do niego po raz pierwszy. Przykład wykorzystania: private void Page_Load(object sender, System.EventArgs e) { if (!IsPostBack) { // ten kod wykona się tylko przy pierwszym wysyłaniu do klienta } // ten kod wykona się przy każdym żądaniu klienta } Podsumowanie W tym rozdziale przedstawione zostały informacje dotyczące kontrolek serwerowych a ASP.NET. Dowiedziałeś się, jak używad rozbudowanych kontrolek tj. MulitView i AdRotator oraz poznałeś zasady pracy z kontrolkami umożliwiającymi walidację danych. Dodatkowo wiesz już, jak wygląda cykl życia strony i w jaki sposób możesz sprawdzid, czy strona jest po raz pierwszy przesyłana do klienta. Przykładowe rozwiązanie Wykorzystywanie osadzonych kontrolek MulitView Zobaczmy, jak można wykorzystad zaawansowane kontrolki ASP.NET do rozwiązania typowego problemu, z jakim możemy się spotkad w pracy programisty aplikacji Web. W tym celu posłużymy się bardziej rozbudowanym przykładem, w którym osadzimy kilka kontrolek MultiView w sobie. Wyobraźmy sobie, że chcemy zaprojektowad ankietę, która posiada częśd wspólną i częśd zależną np. od wybranego elementu na stronie. Przykładowo na podstawie wybranej płci chcemy zadad odpowiednie pytania. Dodatkowo chcemy mied możliwośd wyświetlenia podsumowania wpisanych przez użytkownika informacji. Zacznijmy od idei rozwiązania. Głównymi elementami naszej strony są: ankieta i podsumowanie. W ankiecie na podstawie wybranej z listy rozwijanej płci chcemy wyświetlid odpowiednie pytania. Szkic kontrolek prezentuje Rys. 3. Strona 5-9

10 Rys. 3 Szkic kontrolek Tworzenie strony rozpoczynamy od zewnętrznej kontrolki MulitView. Dodajemy do niej dwie kontrolki View o ID odpowiednio: Ankieta i Podsumowanie: <asp:multiview ID="Multiview1" runat="server"> <asp:view ID="Ankieta" runat="server"> </asp:view> <asp:view ID="Podsumowanie" runat="server"> </asp:view> </asp:multiview> Następnie do kontrolki o ID="Ankieta" dodajemy listę rozwijaną umożliwiającą określenie płci. Dodatkowo chcemy zapewnid, aby po zmianie wyświetlanej wartości nastąpiło wysłanie strony do serwera i zmiana wyświetlanego widoku. Aby to umożliwid musimy określid właściwośd AutoPostBack="True": <asp:dropdownlist ID="plecDropDownList" runat="server" AutoPostBack="True"> <asp:listitem Value="K">Kobieta</asp:ListItem> <asp:listitem Value="M">Mężczyzna</asp:ListItem> </asp:dropdownlist> Dodajmy również zagnieżdżoną kontrolkę MultiView zawierającą odpowiednie widoki dla kobiet i dla mężczyzn: <asp:multiview ID="MultiView2" runat="server"> <asp:view ID="Kobieta" runat="server"> Pytania dla kobiet </asp:view> <asp:view ID="Mezczyzna" runat="server"> Pytania dla mężczyzn </asp:view> </asp:multiview> Teraz, aby możliwe było wybranie odpowiedniego widoku w kontrolce MultiView2, musimy napisad metodę obsługi zdarzenia SelectedIndexChanged kontrolki plecdropdownlist. Aby ją dodad, należy w oknie Properties wybrad ikonę Events, a następnie dwukrotnie kliknąd SelectedIndexChanged. Do metody należy dodad następujący kod: if (plecdropdownlist.selectedvalue=="k") { MultiView2.SetActiveView(Kobieta); } else if (plecdropdownlist.selectedvalue == "M") { MultiView2.SetActiveView(Mezczyzna); } Strona 5-10

11 Teraz musimy zapewnid, że przy pierwszym przesłaniu strony do klienta zostanie wybrany widok ankiety (MultiView1) oraz części przeznaczonej dla kobiet (ze względu na domyślną wartośd wybraną w liście rozwijanej). W tym celu do metody Page_Load należy dodad następujący kod: if (!IsPostBack) { Multiview1.SetActiveView(Ankieta); MultiView2.SetActiveView(Kobieta); } Na koniec musimy jeszcze dodad przycisk, który wyśle ankietę do serwera. W metodzie obsługi zdarzenia Click zmienimy widok na Posumowanie: Multiview1.SetActiveView(Podsumowanie); Możemy teraz uruchomid stronę i sprawdzid, czy wszystko działa jak należy. Losowe wyświetlanie reklam na stronie Często zachodzi potrzeba wyświetlania na stronie reklam naszych produktów bądź też reklam prowadzących do innych witryn. W ASP.NET możemy w tym celu wykorzystad kontrolkę AdRotator. Do poprawnego działania wymaga ona co najmniej podania adresu URL obrazka, który ma zostad wyświetlony w charakterze reklamy. Dodatkowo możemy sprecyzowad inne informacje. Wszystkie wymagane dane umieszczamy w pliku XML o dowolnej nazwie, np. adv.xml. Przykład zawartości pliku: <Advertisements> <Ad> <ImageUrl>~/Adv/Adv1.png</ImageUrl> <NavigateUrl> <AlternateText>Strona główna ASP.NET </AlternateText> </Ad> </Advertisements> Zarówno adres URL obrazka (ImageUrl), jak i miejsca docelowego (NavigateUrl), do którego zostanie przeniesiony użytkownik po kliknięciu reklamy, może byd względny lub bezwzględny. W celu zapewnienia zgodności z XHTML 1.0 należy również zdefiniowad tekst zastępczy (AlternateText), który będzie wyświetlany przez przeglądarkę użytkownika podczas ładowania obrazka lub gdy nie zostanie on odnaleziony. Porady praktyczne Używanie kontrolek Staraj się nadawad kontrolkom znaczące nazwy, np. WyslijButton zamiast Button1. Ułatwi to Tobie i innym programistom zrozumienie kodu i przeznaczenia poszczególnych elementów na stronie. Wielu programistów do nazw kontrolek dodaje ich typ, np. w formie przyrostka. W ten sposób pisząc kod mogą oni szybko zorientowad się, do jakiego rodzaju elementów się odwołują. Możliwośd szybkiego określenia typu kontrolki jest szczególnie ważna, gdy korzysta się w Visual Studio z okna Document Outline, przedstawiającego hierarchię elementów na stronie. Zdarza się również, że programiści w nazwach kontrolek stosują tzw. notację węgierską, czyli prefiksują je skrótem właściwym dla typu elementu, np. btn dla przycisków lub lbl dla etykiet. Dzięki temu kontrolki tego samego rodzaju są wyświetlane jedna po drugiej na liście prezentowanej przez dostępny w Visual Studio mechanizm autouzupełniania. Powinieneś rozważyd stosowanie jednej z tych konwencji przy nazywaniu elementów. Najlepiej nadawaj kontrolkom nazwy tuż po wstawieniu ich na stronę. Visual Studio wykorzystuje właściwośd ID m.in. do automatycznego generowania nazw dla metod obsługi Strona 5-11

12 zdarzeo. Jeśli zmienisz identyfikator kontrolki, nazwy tych metod nie zostaną zaktualizowane, zaś ich ręczna zmiana może byd kłopotliwa, gdyż wymaga przeróbek w kilku miejscach. Kontrolek HTML używaj wtedy, gdy chcesz mied większą kontrolę nad kodem generowanym dla klienta. Pamiętaj, że najważniejsze z nich mają swoje odpowiedniki wśród kontrolek Web, które oferują większe możliwości i bardziej abstrakcyjny model programowania. Jeżeli nie jesteś pewien, jakiego rodzaju kontrolkę wybrad, korzystniej będzie zdecydowad się na kontrolkę Web. By móc odwoływad się do wybranego elementu HTML w kodzie po stronie serwera, musisz nadad mu atrybut runat="server" oraz unikatowe ID. Jeśli zapomnisz o pierwszym z atrybutów, wartośd ID będzie traktowana wyłącznie jako identyfikator elementu w wynikowym dokumencie HTML, w efekcie będziesz mógł odwoływad się do niego jedynie w kodzie JavaScript wykonywanym po stronie klienta. W kontrolkach DropDownList oraz CheckBoxList staraj się dla każdego elementu listy określid nie tylko właściwośd Text, ale również Value. Dzięki temu w kodzie będziesz mógł odwoływad się do nich nie polegając na tym, jak są ułożone lub wyświetlane użytkownikowi. Kontrolki inicjujące komunikację zwrotną z serwerem, takie jak Button lub LinkButton, mogą byd użyte w połączeniu z ASP.NET AJAX do wysyłania żądao asynchronicznych. W kontrolce MultiView ustalając widoczną kontrolkę używaj metody SetActiveView i nazwy kontrolki View, a nie właściwości ActiveViewIndex. Kontrolkę AdRotator można wykorzystad nie tylko do wyświetlania losowych banerów reklamowych równie dobrze mogą to byd zwykłe obrazki. Jeśli na stronie używasz kontrolki AdRotator i chcesz, by wynikowy dokument był zgodny ze standardem XHTML, powinieneś dla każdego wyświetlanego obrazka określid właściwośd AlternateText. Walidacja danych Walidację danych po stronie klienta powinieneś stosowad jedynie w celu ograniczenia ruchu do serwera, by w ten sposób zmniejszyd koszty utrzymania aplikacji i zwiększyd czas jej odpowiedzi w przypadku wprowadzenia przez użytkownika nieprawidłowych informacji. Po otrzymaniu danych po stronie serwera powinieneś zawsze walidowad je ponownie. Użytkownik może stosunkowo łatwo obejśd zabezpieczenia po stronie klienta i wymusid lub upozorowad komunikację zwrotną. Jeśli nie zabezpieczysz aplikacji po stronie serwera, może ona paśd ofiarą groźnych ataków, takich jak SQL Injection czy XSS (ang. Cross Site Scripting). Zdecydowana większośd walidatorów wymaga, abyś określił ich właściwośd ControlToValidate. Wyjątkiem jest CustomValidator, który może służyd do sprawdzania poprawności danych wprowadzonych w wielu różnych kontrolkach. Korzystając z CompareValidator do sprawdzenia poprawności danych po stronie klienta powinieneś pamiętad, że format liczb zmiennoprzecinkowych, daty oraz wartości walutowych zależy od ustawieo przeglądarki lub systemu operacyjnego użytkownika. Dane uznane za poprawne po stronie klienta mogą w związku z tym spowodowad błąd walidacji po stronie serwera. Pamiętaj, że gdy korzystasz z walidacji po stronie klienta, wyrażenie regularne używane do sprawdzania poprawności danych przez RegularExpressionValidator musi byd zrozumiałe zarówno dla silnika wyrażeo regularnych używanego po stronie serwera, jak i tego, który jest dostępny w przeglądarce użytkownika. Powinieneś zatem ograniczyd się do pewnego podzbioru języka wyrażeo, który jest interpretowany tak samo przez najpopularniejsze przeglądarki oraz klasy do obsługi wyrażeo regularnych dostępne w.net. Obsługa zdarzeń związanych ze stroną Każde zdarzenie związane ze stroną możesz obsłużyd na przynajmniej dwa sposoby. Pierwszym, bardziej popularnym, jest przygotowanie metody o odpowiedniej sygnaturze. Strona 5-12

13 Metoda taka powinny mied zdefiniowany typ wartości zwracanej jako void, przyjmowad dwa parametry pierwszy typu object, drugi typu EventArgs oraz posiadad nazwę utworzoną poprzez dodanie do nazwy zdarzenia przedrostka Page_. Przykładem tak zdefiniowanej metody jest generowana automatycznie przez Visual Studio metoda Page_Load, która służy do obsługi zdarzenia Load strony. Ten sam efekt możesz uzyskad przysłaniając (ang. override) metodę wirtualną, której nazwa utworzona jest poprzez dodanie do nazwy zdarzenia przedrostka On, np. OnLoad. Musisz wówczas pamiętad, by w jej ciele wywoład odpowiednią metodę z klasy bazowej, korzystając ze słowa kluczowego base. Za automatyczne kojarzenie metod ze zdarzeniami strony odpowiada mechanizm zwany AutoEventWireup. Wiąże się on z pewnym narzutem, dlatego twórcy ASP.NET udostępnili możliwośd wyłączenia go z poziomu Pamiętaj, że jeśli tak postąpisz, będziesz musiał samodzielnie kojarzyd zdarzenia strony z odpowiednimi funkcjami obsługi lub przysłaniad odpowiadające im metody wirtualne. Zazwyczaj nie ma potrzeby wyłączania mechanizmu AutoEventWireup. Uwagi dla studenta Jesteś przygotowany do realizacji laboratorium jeśli: rozumiesz jak działają kontrolki serwerowe w ASP i w jaki sposób możesz się programowo do nich odwoład umiesz tworzyd zaawansowane strony internetowe bazujące na kontrolce MultiView i wielu widokach wiesz jak sprawdzad poprawnośd danych wprowadzonych przez użytkownika wiesz jak wygląda cykl życia strony oraz w jaki sposób sprawdzid, czy strona jest po raz pierwszy wysyłana do użytkownika 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. ASP.NET QuickStart Tutorials, Na stronie w sekcji ASP.NET Control Reference znajdziesz podstawowe informacje i przykłady użycia wszystkich kontrolek dostępnych w ASP.NET. 2. Walkthrough: Displaying and Tracking Advertisements with the AdRotator Control, Na stronie zawarty jest opis możliwości wykorzystania kontrolki AdRotator, ze szczególnym uwzględnieniem możliwości śledzenia ilości kliknięd kontrolki. 3. MultiView and View Web Server Controls Overview, Na stronie zawarty jest opis kontrolki MultiView oraz przykłady kodu. 4. Michał Jankowski, Walidacja danych w ASP.NET, Encyklopedyczny przegląd walidatorów w języku polskim. 5. Anand Narayanaswamy, Performing Validations with ASP.NET, Dwuczęściowy artykuł zawierający dużo praktycznych przykładów wykorzystania walidatorów. Strona 5-13

14 Laboratorium podstawowe Problem 1 (czas realizacji 20 min) Jesteś właścicielem niewielkiej firmy komputerowej wykonującej różnego rodzaju zlecenia. Dzisiaj przyszedł do Ciebie prezes dużego koncernu produkującego rowery i zaproponował, abyś przygotował ankietę dla ich sklepu internetowego. Jeśli się postarasz, to może otrzymasz super kontrakt na przygotowanie i wdrożenie całej witryny sklepu. Z jednej strony ma to byd ankieta dla nowych klientów, planujących dopiero zakup roweru, z drugiej zaś firma myśli o osobach, które już nabyły rower i chciałaby ich zachęcid do wspólnego podróżowania, tworząc społecznośd użytkowników jej produktów. W tym celu musi pozyskad informację o preferencjach tej grupy klientów. W ankiecie dla potencjalnego klienta powinieneś pobrad następujące informacje: imię płed wiek adres telefon adres zamieszkania wzrost rama roweru, do wyboru: damska męska nie ma znaczenia marka, do wyboru (można zaznaczyd kilka odpowiedzi): Cateye Giant Kenda Kross nie ma znaczenia rodzaj roweru, do wyboru: górski miejski szosowy BMX dziecięcy nie wiem kwota planowanych wydatków preferowany sposób kontaktu W ankiecie dla osób już posiadających rower firmę interesują takie dane, jak: imię płed wiek adres telefon adres zamieszkania Strona 5-14

15 rodzaj posiadanego roweru: górski miejski szosowy BMX dziecięcy nie wiem data ostatniej wycieczki data następnej wycieczki ilośd kilometrów średnio na jednej wycieczce poziom umiejętności preferowany sposób kontaktu Zadanie 1. Utwórz nową stronę w Visual Web Developer 2008 Express Edition 2. Wstaw linki do ankiet na stronie głównej aplikacji 3. Dodaj stronę Ankieta.aspx do projektu. 4. Dodaj główną kontrolkę MultiView Tok postępowania Otwórz Visual Web Developer 2008 Express Edition. 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 Default.aspx wstaw dwa odnośniki wskazujące na ankietę dla nowych klientów planujących zakup nowego roweru oraz ankietę dla osób już posiadających rowery. W tym celu w widoku Source dodaj: <a href="ankieta.aspx?view=nowy">ankieta dla nowych klientów</a> <br /> <a href="ankieta.aspx?view=wycieczki">ankieta dla osób posiadających rower</a> Wybierz Website -> Add New Item. Z listy Visual Studio installed templates wybierz Web Form. W polu Name wpisz Ankieta.aspx. Z listy Language wybierz Visual C#. Upewnij się, że opcja Place code in separate file jest zaznaczona. Upewnij się, że opcja Select master page nie jest zaznaczona. Kliknij OK. Do formularza dodaj kontrolkę MultiView, a następnie w oknie Properties określ właściwośd ID na mainmultiview. Dodaj do kontrolki MultiView dwie kontrolki View, nazywając je po kolei: ankietaglowna i podsumowanie. Strona 5-15

16 5. Przygotuj wspólną początkową częśd obu ankiet 6. Dodaj kontrolkę MultiView Zauważ, że można wyłonid częśd wspólną obydwu ankiet. W kontrolce ankietaglowna w widoku Design napisz Imię: i naciśnij Enter, a następnie umieśd kontrolkę TextBox i ponownie przejdź do nowej linii. W oknie Properties określ właściwośd (ID) na imietextbox. W dodanej linii na formularzu napisz Płed: i umieśd kontrolkę DropDownList. W oknie Properties określ właściwośd (ID) na plecdropdownlist. Kliknij Smart Tag dodanej kontrolki i wybierz Edit Items. Wciśnij przycisk Add, a następnie w obszarze ListItem properities: w polu Text wpisz Kobieta w polu Value wpisz K Wciśnij przycisk Add, a następnie w obszarze ListItem properities: w polu Text wpisz Mężczyzna w polu Value wpisz M Wciśnij przycisk Add, a następnie w obszarze ListItem properities: w polu Text wpisz Nie podaję w polu Value wpisz N w polu Selected wybierz True Wciśnij OK. Do formularza dodaj kontrolki TextBox umożliwiające pobranie od użytkownika następujących danych: (ID: textbox) telefon (ID: teltextbox) ulica (ID: ulicatextbox) numer domu (ID: domtextbox) numer mieszkania (ID: miesztextbox) kod pocztowy (ID: kodtextbox) miejscowośd (ID: miejsctextbox) W kontrolce View o ID=AnkietaGlowna poniżej dodanych kontrolek dodaj kontrolkę MultiView i nazwij ją ankietamultiview. Dodaj do kontrolki MultiView dwie kontrolki View, nazywając je po kolei: nowyview i wycieczkiview. Strona 5-16

17 7. Dodaj kontrolki do kontrolki View - Nowy Ustaw kursor wewnątrz kontrolki View o ID="nowyView". Wpisz Wzrost: i w nowej linii dodaj kontrolkę TextBox o ID="wzrostTextBox". Wpisz Rama roweru: i dodaj kontrolkę DropDownList o ID="ramaDropDownList". Kliknij Smart Tag i wybierz Edit Items. Dodaj elementy o następujących właściwościach, po czym zamknij okno: tekst wyświetlany: Damska, wartośd: D tekst wyświetlany: Męska, wartośd: M tekst wyświetlany: Nie ma znaczenia, wartośd: N, zaznaczenie Wpisz Marka: i dodaj kontrolkę ListBox o ID="markaListBox". Kliknij Smart Tag i wybierz Edit Items. Dodaj elementy o następujących właściwościach, po czym zamknij okno: tekst wyświetlany: Cateye, wartośd: C tekst wyświetlany: Giant, wartośd: G tekst wyświetlany: Kenda, wartośd: Ke tekst wyświetlany: Kross, wartośd: Kr tekst wyświetlany: Nie ma znaczenia, wartośd: N, zaznaczenie Wpisz Rodzaj roweru: i dodaj kontrolkę ListBox o ID="rodzajListBox". Kliknij Smart Tag i wybierz Edit Items. Dodaj elementy o następujących właściwościach, po czym zamknij okno: tekst wyświetlany: Górski, wartośd: G tekst wyświetlany: Miejski, wartośd: M tekst wyświetlany: Szosowy, wartośd: S tekst wyświetlany: BMX, wartośd: B tekst wyświetlany: Dziecięcy, wartośd: D tekst wyświetlany: Nie wiem, wartośd: N, zaznaczenie Wpisz Kwota planowanych wydatków: i dodaj kontrolkę RadioButtonList o ID="cenaRadioButtonList". Dodaj do listy elementy o następujących właściwościach: tekst wyświetlany: Nie ma znaczenia, wartośd: 0, zaznaczenie tekst wyświetlany: do 500 zł, wartośd: 5 tekst wyświetlany: zł, wartośd: 10 tekst wyświetlany: , wartośd: 15 tekst wyświetlany: pow. 1500, wartośd: 20 tekst wyświetlany: Zakres:, wartośd: 1 Poniżej kontrolki cenaradiobuttonlist wpisz od: i dodaj kontrolkę TextBox o ID="odTextBox", a następnie w tej samej linii wpisz do: i dodaj kontrolkę TextBox o ID="doTextBox". Strona 5-17

18 8. Dodaj kontrolki do kontrolki View Stary 9. Dodaj wspólną częśd koocową 10. Dodaj podsumowanie ankiety Ustaw kursor wewnątrz kontrolki View o ID="wycieczkiView". Wpisz Rodzaj posiadanego roweru: i dodaj kontrolkę ListBox o ID="posiadaListBox". Dodaj do listy elementy o następujących właściwościach: tekst wyświetlany: Górski, wartośd: G tekst wyświetlany: Miejski, wartośd: M tekst wyświetlany: Szosowy, wartośd: S tekst wyświetlany: BMX, wartośd: B tekst wyświetlany: Dziecięcy, wartośd: D tekst wyświetlany: Nie wiem, wartośd: N, zaznaczenie Wpisz Data ostatniej wycieczki i dodaj poniżej kontrolkę Calendar o ID="ostatniaCalendar". Wpisz Data następnej wycieczki: i dodaj poniżej kontrolkę Calendar o ID="nastepnaCalendar". Wpisz Ilośd kilometrów średnio na jednej wycieczce: i dodaj kontrolkę TextBox o ID="kmTextBox". Wpisz Poziom umiejętności: i dodaj kontrolkę DropDownList o ID="poziomDropDownList". Dodaj do listy elementy o następujących właściwościach: tekst wyświetlany: Początkujący, wartośd: P tekst wyświetlany: Średniozaawansowany, wartośd: S tekst wyświetlany: Zaawansowany, wartośd: Z Poniżej kontrolki ankietamultiview w nowym wierszu wpisz Preferowany rodzaj kontaktu: i dodaj kontrolkę CheckBoxList o ID="kontaktCheckBoxList". Dodaj do listy elementy o następujących właściwościach: tekst wyświetlany: , wartośd: E tekst wyświetlany: Telefon, wartośd: T tekst wyświetlany: Osobisty, wartośd: O Poniżej dodaj kontrolkę Button i w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) wyswietlbutton. W kontrolce View o ID="Podsumowanie" w widoku Design napisz Dziękujemy za wypełnienie ankiety i wstaw odnośnik do strony głównej. Odnośniki do stron projektu można szybko dodawad przeciągając dany plik z okna Solution Explorer. Strona 5-18

19 11. Dodaj kod umożliwiający wybranie odpowiedniej kontrolki View w zależności od parametru wywołania strony 12. Dodaj obsługę wysłania wypełnionej ankiety do serwera 13. Test działania strony W widoku Design dwukrotnie kliknij formularz lub otwórz plik Ankieta.aspx.cs. W metodzie Page_Load dodaj kod sprawdzający, czy strona nie jest po komunikacji zwrotnej. Jeśli nie, to prezentowany jest pierwszy widok kontrolki mainmultiview oraz, w zależności od parametru wywołania, odpowiedni widok kontrolki ankietamultiview: if (!IsPostBack) { mainmultiview..setactiveview(ankietaglowna); if (Request.QueryString["view"] == "nowy") ankietamultiview.setactiveview(nowyview); else if (Request.QueryString["view"] == "wycieczki") ankietamultiview.setactiveview(wycieczkiview); else Response.Redirect("~/Default.aspx"); } Dwukrotnie kliknij kontrolkę Button o ID="wyslijButton". Visual Studio otworzy edytor kodu strony i umieści kursor w metodzie wyslijbutton_click. Do metody dodaj kod aktywujący widok Podsumowanie w kontrolce o ID="mainMultiView": mainmultiview.setactiveview(podsumowanie); Zapisz zmiany i przetestuj działanie strony Strona 5-19

20 Problem 2 (czas realizacji 20 min) Ponieważ chciałbyś się maksymalnie wykazad, postanowiłeś rozszerzyd stronę o zabezpieczenia formularzy przed błędnym wypełnieniem pól, jak również określając niektóre pola jako wymagane. Bez tych informacji zbieranie danych w ankiecie raczej nie ma sensu. Określiłeś następujące pola wymagane: imię adres Sprawdzenie poprawności wpisanych danych powinno odbywad się w następujących polach: adres (poprawny adres w formacie użytkownik@serwer.domena) telefon (same cyfry w formacie ) wzrost (liczba od 50 do 250 cm) cena od i do (zarówno wartośd, jak i porównanie wpisanych wartości od<do) Zadanie 1. Dodaj kontrolki sprawdzające, czy pole zostało wypełnione 2. Dodaj kontrolkę wyświetlającą informacje o błędach Tok postępowania Do wcześniej utworzonego formularza Ankieta.aspx w widoku Design wstaw obok kontrolki imietextbox kontrolkę RequiredFieldValidator z okna Toolbox (kategoria Validation). Wybierz dodaną kontrolkę i w oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz imietextbox w polu ErrorMessage wpisz Pole Imię jest wymagane w polu Text wpisz * Wstaw obok kontrolki textbox kontrolkę RequiredFieldValidator Wybierz dodaną kontrolkę i w oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz textbox w polu ErrorMessage wpisz Pole jest wymagane w polu Text wpisz * Zapisz zmiany i przetestuj możliwośd wysłania formularza bez wypełnienia informacji w polach Imię i . Czy sprawdzenie wpisania danych to odbywa się po stronie serwera czy klienta? Zobacz źródło strony. W jaki sposób jest realizowane to sprawdzenie? Co jest wypisywane obok kontrolki? Czy pojawia się komunikat wpisany w polu ErrorMessage? Do formularza Ankieta.aspx na koocu (za kontrolką MultiView - mainmultiview) wstaw kontrolkę ValidationSummary z okna Toolbox (kategoria Validation). Zapisz zmiany i przetestuj możliwośd wysłania formularza bez wypełnienia informacji w polach Imię i . Czy pojawia się komunikat wpisany w polu ErrorMessage? Jeśli tak, to gdzie i dlaczego? Wród do edycji strony i przetestuj inne możliwości wyświetlania kontrolki ValidationSummary zmieniając w oknie Properties jej właściwośd DisplayMode. Strona 5-20