ITA 103 Modul05

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:



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.

Wyszukiwarka

Podobne podstrony:
ITA 103 Modul04
ITA 103 Modul02
ITA 103 Modul03
ITA 103 Modul08
ITA 103 Modul06
ITA 103 Modul01
ITA 103 Modul09
ITA 103 Modul03
ITA 103 Modul11
ITA 103 Modul13
ITA 103 Modul12
ITA 103 Modul10

więcej podobnych podstron