plik

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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Ł 5

MODUŁ 14

MODUŁ 3

MODUŁ 8

MODUŁ 1

MODUŁ 6

MODUŁ 2

MODUŁ 4

MODUŁ 9

MODUŁ 10

MODUŁ 11

MODUŁ 12

MODUŁ 13

Rys. 1 Mapa zależności modułu

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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

Kontrolki serwerowe 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

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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.:

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-5

  <AlternateText>Strona główna ASP.NET </AlternateText>
</Ad>
<Ad>
  <ImageUrl>~/Adv/Adv2.png</ImageUrl>
  <NavigateUrl>http://www.codeplex.com</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

Adres URL wyświetlanego obrazka.

Height

Wysokośd obrazka w pikselach.

Width

Szerokośd obrazka w pikselach.

NavigateUrl

Adres URL, do którego zostanie przekierowany użytkownik po kliknięciu na
kontrolkę.

AlternateText

Tekst wyświetlany w przypadku, kiedy obrazek nie jest dostępny.

Keyword

Kategoria dla reklamy. Jest używana w kontrolce AdRotator do filtrowania listy
reklam dla określonej kategorii.

Impressions

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 2 047 999 999.

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

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 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>

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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 e-mail:

<asp:RegularExpressionValidator ID="RegularExpressionValidator2"
    runat="server" ControlToValidate="emailProduktyTextBox"
    ErrorMessage="Podaj poprawny adres e-mail"
    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ę.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-8

Kontrolka ValidationSummary

wyświetlenia

podsumowania

błędów

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:

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 dyrektywy @Page 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:

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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);
}

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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>http://www.asp.net</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

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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  dyrektywy  @Page.  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, http://quickstarts.asp.net/QuickStartv20/aspnet

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,

http://msdn.microsoft.com/en-us/library/azwad69k.aspx

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, http://msdn.microsoft.com/en-

us/library/ms227665.aspx

Na stronie zawarty jest opis kontrolki MultiView oraz przykłady kodu.

4. Michał Jankowski, Walidacja danych w ASP.NET, http://www.codeguru.pl/article-635.aspx

Encyklopedyczny przegląd walidatorów w języku polskim .

5. Anand

Narayanaswamy,

Performing

Validations

with

ASP.NET,

http://www.codeguru.com/Csharp/.NET/net_asp/controls/article.php/c5349

Dwuczęściowy artykuł zawierający dużo praktycznych przykładów wykorzystania
walidatorów.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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 e-mail



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 e-mail



telefon



adres zamieszkania

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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

Tok postępowania

1. Utwórz nową
stronę w Visual
Web Developer
2008 Express
Edition



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.

2. Wstaw linki do
ankiet na stronie
głównej aplikacji



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>

3. Dodaj stronę
Ankieta.aspx do
projektu.



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.

4. Dodaj główną
kontrolkę
MultiView



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.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-16

5. Przygotuj
wspólną
początkową częśd
obu ankiet

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:

—  e-mail (ID: emailTextBox)
—  telefon (ID: telTextBox)
—  ulica (ID: ulicaTextBox)
—  numer domu (ID: domTextBox)
—  numer mieszkania (ID: mieszTextBox)
—  kod pocztowy (ID: kodTextBox)
—  miejscowośd (ID: miejscTextBox)

6. Dodaj
kontrolkę
MultiView



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.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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:

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: 500 – 1000 zł, wartośd: 10
—  tekst wyświetlany: 1000 - 1500, 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".

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-18

8. Dodaj
kontrolki do
kontrolki View
Stary



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

9. Dodaj wspólną
częśd koocową



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: E-Mail, 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.

10. Dodaj
podsumowanie
ankiety



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.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-19

11. Dodaj kod
umożliwiający
wybranie
odpowiedniej
kontrolki View w
zależności od
parametru
wywoł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");
}

12. Dodaj obsługę
wysłania
wypełnionej
ankiety do
serwera



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);

13. Test działania
strony



Zapisz zmiany i przetestuj działanie strony

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-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 e-mail

Sprawdzenie poprawności wpisanych danych powinno odbywad się w następujących polach:



adres e-mail (poprawny adres e-mail w formacie użytkownik@serwer.domena)



telefon (same cyfry w formacie 1234567890)



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

Tok postępowania

1. Dodaj
kontrolki
sprawdzające, czy
pole zostało
wypełnione



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 emailTextBox kontrolkę RequiredFieldValidator



Wybierz dodaną kontrolkę i w oknie Properties:

—  w polu ControlToValidate z listy rozwijanej wybierz emailTextBox
—  w polu ErrorMessage wpisz Pole E-mail jest wymagane
—  w polu Text wpisz *



Zapisz zmiany i przetestuj możliwośd wysłania formularza bez
wypełnienia informacji w polach Imię i E-Mail.

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?

2. Dodaj
kontrolkę
wyświetlającą
informacje o
błędach



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 E-Mail.

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.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-21

3. Dodaj
kontrolki
sprawdzające
poprawnośd
wpisanych danych
za pomocą
wyrażeo
regularnych



Do formularza Ankieta.aspx obok kontrolki emailTextBox wstaw
kontrolkę RegularExpressionValidator z okna Toolbox (kategoria
Validation) i w oknie Properties:

—  w polu ControlToValidate z listy rozwijanej wybierz emailTextBox
—  w polu ErrorMessage wpisz Nieprawidłowy adres E-Mail
—  w polu Text wpisz *

— w polu ValidationExpression wciśnij przycisk

, a następnie z listy

Standard expressions wybierz Internet e-mail address (Rys. 4).

Rys. 4 Określenie wyrażenia regularnego



Obok

kontrolki

telTextBox

wstaw

kontrolkę

RegularExpressionValidator. W oknie Properties:

— w polu ControlToValidate z listy rozwijanej wybierz telTextBox
— w polu ErrorMessage wpisz Nieprawidłowy numer telefonu podaj

same cyfry

— w polu Text wpisz *
— w polu ValidationExpression wpisz: ([0-9]+)$



Obok

kontrolki

wzrostTextBox

wstaw

kontrolkę

RegularExpressionValidator. W oknie Properties:

— w polu ControlToValidate z listy rozwijanej wybierz wzrostTextBox
— w polu ErrorMessage wpisz Nieprawidłowy wzrost – podaj wzrost w

centymetrach

— w polu Text wpisz *
— w polu ValidationExpression wpisz: ([0-9]+)$



Obok

kontrolki

odTextBox

wstaw

kontrolkę

RegularExpressionValidator. W oknie Properties:

— w polu ControlToValidate z listy rozwijanej wybierz odTextBox
— w polu ErrorMessage wpisz Nieprawidłowa kwota – podaj

zaokrąglając do pełnych złotych

— w polu Text wpisz *
— w polu ValidationExpression wpisz: ([0-9]+)$



Obok

kontrolki

doTextBox

wstaw

kontrolkę

RegularExpressionValidator. W oknie Properties:

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-22

— w polu ControlToValidate z listy rozwijanej wybierz doTextBox
— w polu ErrorMessage wpisz Nieprawidłowa kwota – podaj

zaokrąglając do pełnych złotych

— w polu Text wpisz *
— w polu ValidationExpression wpisz: ([0-9]+)$



Zapisz zmiany i przetestuj możliwośd wysłania formularza z błędami w
kontrolkach.

4. Dodaj
kontrolki
sprawdzające
poprawnośd
wpisanych danych
za pomocą
porównania
wartości



Obok kontrolki wzrostTextBox wstaw kontrolkę RangeValidator z okna
Toolbox (kategoria Validation) i w oknie Properties:

— w polu ControlToValidate z listy rozwijanej wybierz wzrostTextBox
— w polu ErrorMessage wpisz Podaj poprawny wzrost w zakresie od

50 do 250 cm

—  w polu MaximumValue wpisz 250
—  w polu MinimumValue wpisz 50
—  w polu Text wpisz *
—  w polu Type wybierz Integer



Obok kontrolki doTextBox wstaw kontrolkę CompareValidator. W oknie
Properties:

—  w polu ControlToCompare z listy rozwijanej wybierz odTextBox
—  w polu ControlToValidate z listy rozwijanej wybierz doTextBox
—  w polu ErrorMessage wpisz Wartośd w polu Do musi byd większa od

wartości w polu Od

—  w polu Operator z listy rozwijanej wybierz GreaterThan
—  w polu Text wpisz *
—  w polu Type wybierz Integer



W metodzie wyslijButton_Click zamieo istniejącą linię następującym
kodem:

if (IsValid)
{ mainMultiView.SetActiveView(podsumowanie); }



Zapisz zmiany i przetestuj możliwośd wysłania formularza z błędami w
kontrolkach.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-23

Problem 3 (czas realizacji 10 min)

Twoja praca bardzo spodobała się klientowi, jednak ma on jeszcze jedną prośbę. Chciałby, abyś
umieścił baner reklamowy na górze strony. Baner powinien wyświetlad losowo określone reklamy
umieszczone na serwerze.

Zadanie

Tok postępowania

1. Dodaj katalog i
pliki graficzne
reklam



Do projektu dodaj katalog Adv.



Kliknij katalog prawym przyciskiem myszy i wybierz Add Existing Item,
a następnie wskaż pliki Adv1.png i Adv2.png. Wciśnij Add.

2. Określ
lokalizacje plików
reklam oraz
adresy na które
wskazuja



Kliknij prawym przyciskiem myszy katalog Adv i wybierz Add New Item.



Z okna Templates wybierz XML File, a następnie w polu Name wpisz
adv.xml.



Do pliku dodaj następujący fragment:

<Advertisements>
  <Ad>
    <ImageUrl>~/Adv/Adv1.png</ImageUrl>
    <NavigateUrl>http://www.asp.net</NavigateUrl>
    <AlternateText>Strona główna ASP.NET </AlternateText>
  </Ad>
  <Ad>
    <ImageUrl>~/Adv/Adv2.png</ImageUrl>
    <NavigateUrl>http://www.codeplex.com</NavigateUrl>
    <AlternateText>Projekty OpenSource - CodePlex </AlternateText>
  </Ad>
</Advertisements>



Zapisz zmiany.

3. Dodaj
kontrolkę
AdRotator i



Do wcześniej utworzonego formularza Ankieta.aspx na początku strony
wstaw kontrolkę AdRotator i w oknie Properties w polu
AdvertisementFile wpisz ~/Adv/adv.xml.



Zapisz zmiany i przetestuj funkcjonalnośd wyświetlania reklam na
stronie.

Piotr Bubacz

Moduł 5

ITA-103 Aplikacje Internetowe

Kontrolki serwerowe

Strona 5-24

Laboratorium rozszerzone

Zadanie 1 (czas realizacji 90 min)

Jesteś  już  specjalistą w  zakresie  ankiet,  więc  otrzymujesz  coraz  więcej  zleceo.  Twój  kolejny  klient
poprosił Cię o przygotowanie ankiety dla internetowego sklepu z odzieżą. Ma ona byd skierowana
zarówno  do  nowych  klientów  użytkowników,  badając  ich  preferencje  zakupowe,  jak  również  do
obecnych klientów, sprawdzając ich poziom zadowolenia z towarów i obsługi. Twoim zadaniem jest
zaproponowanie i wykonanie ankiety z uwzględnieniem części wspólnej, która zawiera:



imię (wymagane)



adres e-mail (wymagane, poprawny adres)



kod pocztowy (wymagane, poprawny kod)



wiek (wartośd między 10 a 100)



płed



wykształcenie



rozmiar (wartośd między 20 a 50)

Pytania wspólne dla nowych klientów:



Ile jesteś w stanie przeznaczyd miesięcznie na zakup ubrania? (Lista wyboru, odpowiedzi: „do
100 zł”, „100-500 zł”, „500-1000 zł”, „powyżej 1000 zł”.)



Gdzie najczęściej dokonujesz zakupów ubrania? (Lista wielokrotnego wyboru, odpowiedzi:
„Sklep firmowy”, „Hipermarket”, „Bazar”, „Sklep z odzieżą używaną”.)



Jak często dokonujesz zakupu ubrania? (Lista wyboru, odpowiedzi: „Codziennie”, „Raz w
tygodniu”, „Raz w miesiącu”, „Kilka razy w roku”.)



W jakich kolorach preferujesz ubrania? (Lista wielokrotnego wyboru, odpowiedzi:
„Kolorowo-jaskrawych”, „Stonowanych w szarościach”, „W czerni i bieli”, „W samej czerni”.)

W przypadku, gdy klient jest kobietą, pobierz odpowiedź na pytanie:



Jakiego rodzaju ubrania najchętniej kupujesz? (Lista wielokrotnego wyboru, odpowiedzi:
„garsonki”, „bluzki”, „spódniczki”, „spodnie”.)

W przeciwnym razie pobierz odpowiedź na następujące pytanię:



Jakiego rodzaju ubrania najchętniej kupujesz? (Lista wielokrotnego wyboru, odpowiedzi:
„spodnie”, „spodenki”, „garnitury”, „koszule”, „krawaty”.)

W ankiecie badania satysfakcji klienta powinieneś wyświetlid odpowiednio sformułowane pytania
w zależności od płci:



Kiedy ostatnio robiłaś/robiłeś u nas zakupy (Lista wyboru, odpowiedzi: „Wczoraj”, „W
zeszłym tygodniu”, „W zeszłym miesiącu”, „Kilka miesięcy temu”, „Nie pamiętam”.)



Czy jesteś zadowolona/zadowolony z zakupu (Lista wyboru, odpowiedzi: „Tak”, „Raczej tak”,
„Raczej nie”, „Nie”, „Nie wiem”.)



Czy jesteś zadowolona/zadowolony z naszych pracowników? (Lista wyboru, odpowiedzi:
„Tak”, „Raczej tak”, „Raczej nie”, „Nie”, „Nie wiem”.)



Wpisz swoje uwagi. (Pole tekstowe z możliwością wpisania tekstu w wielu liniach.)

Koniecznie sprawdź poprawnośd wpisywanych danych, a w podsumowaniu ankiety wyświetl
informacje wypełnione przez użytkownika. Klient zażyczył sobie również, by na stronie była
możliwośd losowego wyświetlania reklam wraz z rejestracją ilości kliknięd banera.