Ćwiczenie 8
Temat:
Kontrolki serwerowe
ASP.NET cz.2
Cel ćwiczenia:
W ramach tego ćwiczenie student zapozna się z kolejnymi kontrolkami
serwerowymi oraz z metodami ich walidacji, a także z kontrolkami
umożliwiającymi walidację innych kontrolek. Dodatkowo student pozna
metodę zamiany znacznika HTML na kontrolkę serwerową, nauczy się zmiany
stylu i atrybutów znaczników uruchamianych po stronie serwera z poziomu
kodu c#.
Działanie i obsługa najpopularniejszych kontrolek serwerowych
W poprzednim ćwiczeniu czytelnik zapoznany został z metodami wstawiania na stronę
kontrolek serwerowych, ustalania ich własności, a także korzystania z ich metod. W trakcie
tego ćwiczenia przedstawione zostaną kolejne najpopularniejsze kontrolki. Pierwszą
przedstawianą grupą kontrolek są kontrolki list. W poprzednim ćwiczeniu, jako
przedstawiciel tej grupy, przedstawiona został lista rozwijana (drop down list). Kolejnymi
kontrolkami są:
ListBox  Kontrolka listy wielokrotnego wyboru
Kontrolka wstawia listę w postaci ramki analogicznie jak kontrolka DropDownList z tą różnicą,
iż kontrolka ListBox umożliwia zastosowania zaznaczenia wielu pozycji na liście (właściwość
SelectionMode). Do jej najważniejszych właściwości należą:
Właściowści:
" Items  kolekcja elementów listy
" SelectedIndex  numer wybranego elementu
" SelectedValue  wartość wybranego elementu
" AutoPostBack  automatyczne powiadomienie serwera
" SelectionMode  wielokrotny wybór: tak / nie
" BackColor  kolor tła kontrolki
" ForeColor  kolor teksu kontrolki
" Visible  kontrolka widoczna / niewidoczna
Zdarzenie:
" SelectedIndexChange
Pamiętać należy, że jeśli kontrolka ma ustaloną możliwość wielokrotnego wyboru to
właściwości SelectedIndex oraz SelectedValue posiadają tylko wartości pierwszej
zaznaczonej pozycji na liście. Aby poprawnie obsłużyć wszystkie zaznaczone elementy należy
ListBox  Kontrolka listy wielokrotnego wyboru 70
odwołać się do kolekcji elementów listy, np. tak jak to zostało przedstawione w poniższym
przykładzie.
Przykład
Na stronie .aspx zdefiniowana została kontrolka typu ListBox która posiada 3 pozycje, a także
zdefiniowaną możliwość wielokrotnego wyboru, oraz określoną metodę, która zostanie
wywołana po zmianie zaznaczonych pozycji listy:
onselectedindexchanged="ListBox1_SelectedIndexChanged"
SelectionMode="Multiple">
A
B
C

Natomiast w pliku kodu, aspx.cs zdefiniowana została metoda:
protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = "Wybrano odpowiedz
: ";
for (int i = 0; i < ListBox1.Items.Count;i++ )
{
if (ListBox1.Items[i].Selected)
{
Label1.Text += ListBox1.Items[i].Value+", ";
}
}
}
Właściwość:
" Listbox1.Items.Count - zwraca ilość elementów listy
" ListBox1.Items[i].Selected  zwraca prawdę lub fałsz, w zależności, czy element  i
jest wybrany
" ListBox1.Items[i].Value  zwraca wartość elementu  i
Przykład 71
CheckBoxList
Jest kontrolką reprezentująca listę wielokrotnego wyboru, składającą się z pól typu
CheckBox. Kontrolka posiada analogiczne właściwości i metody jak kontrolka ListBox.
RadioButtonList
Jest kontrolką reprezentująca listę jednokrotnego wyboru, składającą się z pól typu
RadioButton. Kontrolka posiada analogiczne właściwości i metody jak kontrolka
DropDownList.
Zadanie 1 Kontrolki List
Stworzyć cztery pytania ankiety, jak w poniższym przykładzie. Po wciśnięciu przycisku
 Wyślij wyświetlić pod ankietą wybrane odpowiedzi w kontrolce Label.
CheckBoxList 72
Walidacja
W poprzednich ćwiczeniach czytelnik zapoznany został z metodami walidacji formularzy
HTML z wykorzystaniem skryptów JavaScript. W ramach tego ćwiczeniach przedstawione
zostaną metody walidacji zawartości po stronie serwera, a także z wykorzystaniem kontrolki
walidującej zawartość innej kontrolki.
Metody walidacji po stronie serwera
Do najważniejszych metod wykorzystywanych przy walidacji zawartości wykorzystywanych
po stronie serwera należą:
" IsMatch  metoda sprawdza, czy łańcuch jest zgodny ze wzorcem opisanym
wyrażeniem regularnym
" Matches - Zwraca kolekcję wystąpień wzorca
" Replace - Zastępuje wystąpienia wzorca łańcuchem tekstowym
Walidacja może zostać dokonana np. po wystąpieniu zmiany w danej kontrolce lub dopiero
po zdarzeniu zbiorowego wysłania danych, np. po wciśnięciu guzika  wyślij . Jeśli walidacja
zostaje wykonana zaraz po wpisaniu danych, warto jest zastosować dodatkową kontrolkę,
np. typu Label, która będzie wyświetlała informację o tym, że tekst wprowadzony do danej
kontrolki jest nieprawidłowy. W poniższym przykładzie zastosowana została metoda isMatch
porównująca wyrażenie regularne z wpisanym przez użytkownika adresem email:
Przykład
W pliku .aspx zdefiniowane zostały tylko dwie kontrolki, TextBox w którym użytkownik
wpisywał będzie adres email oraz kotrolka Label, w której wpisany został domyślnie
komunikat błędu, który domyślnie jest niewidoczny:
ontextchanged="tb_email_TextChanged">
Text="Wpisz poprawnie adres e-mail" Visible="False">
Metody walidacji po stronie serwera 73
W pliku kodu .aspx.cs zdefiniowana została metoda wywoływana po zmianie w polu
tekstowym. Zadaniem metody jest sprawdzenie, czy wpisany adres email spełnia kryteria
wyrażenia regularnego, jeśli nie, wyświetlona zostanie kontrolka Label z komunikatem błędu:
protected void tb_email_TextChanged(object sender, EventArgs e)
{
Regex re_email = new Regex("\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-
.]\\w+)*");
if (tb_email.Text != null && re_email.IsMatch(tb_email.Text) != true)
{
lbl_valid_email.Visible = true;
}
else
{
lbl_valid_email.Visible = false;
}
}
(pamiętać należy aby używając wyrażeń regularnych użyć przestrzeni nazw:
using System.Text.RegularExpressions;
Przykład 2
Innym przykładem może być wykorzystanie metody replace np. w celu zamiany symbolu  @
w adresach email na inny symbol sugerujący, iż jest to adres poczty elektronicznej. Taki
zabieg stosuje się, aby adres email umieszony na stronie internetowej nie został odnaleziony
przez automatyczne roboty zbierające adresy email w sieci Internet, a następnie dopisany do
list adresów na które wysyłane są niepożądane reklamy itp. Poniższy przykład przypisuje do
kontrolki Label zawartość pola TextBox zamieniając symbol  @ na zwrot  [at]
Label1.Text = TextBox1.Text.Replace("@", "[at]");
Zadanie 2  Walidacja po stronie serwera
Utworzyć formularz za pomocą 3 pól typu TextBox. Wyświetlić w odpowiednich polach typu
Label ostrzeżenie, jeśli dane wpisane w polach są niepoprawne, wg wytycznych:
" pole imię powinno posiadać co najmniej 3 znaki oraz powinno zaczynać się od dużej
litery
Przykład 2 74
" pole nazwisko powinno posiadać co najmniej 3 znaki oraz powinno zaczynać się od
dużej litery
" pole email powinno posiadać składnię odpowiednią dla adresów email
Kontrolki walidacyjne
Środowisko Visual Studio udostępnia grupę kontrolek walidacyjnych, służących do walidacji
innych kontrolek. Kontrolki te znalez
ć można w sekcji  Validation paska narzędzi Toolbox.
Do najważniejszych  wspólnych  właściwości kontrolek walidacyjnych należą:
" ErrorMessage  określa komunikat błędu
" ControlToValidate  określa kontrolkę, która ma być weryfikowana za pomocą
kontrolki walidacyjnej
Do najpopularniejszych kontrolek walidacyjnych należą:
" RequiredFieldValidator  sprawdza, czy pole zostało wypełnione (walidator pola
wymaganego)
" RangeValidator  sprawdza, czy wprowadzone wartość jest z podanego zakresu
(właściwości MinimumValue oraz MaximumValue)
" RegularExpressionValidator  sprawdza, czy wprowadzone wartość spełnia wzór
wyrażenia regularnego
Efekt działania wyżej wymienionych kontrolek jest taki sam jak w przypadku walidacji z
wykorzystaniem kontrolki Label oraz metody isMatch, z tą jednak różnicą, że kontrolki z
grupy Validation działają po stronie przeglądarki klienta poprzez wygenerowanie
odpowiedniego skryptu JavaScript, dzięki czemu walidacja odbywa się znacznie szybciej niż w
Kontrolki walidacyjne 75
przypadku walidacji serwerowej, jednak nie gwarantuje w pełni poprawności przesyłanych
danych, ponieważ kod po stronie przeglądarki może zostać zmieniony w ten sposób, że dane
które są wysyłane za pomocą formularza nie będą wymagały walidacji, dlatego właśnie
walidacja po stronie przeglądarki klienta powinna być zawsze traktowana jako walidacja
wstępna.
Zadanie 3  Kontrolki walidacji
Wykorzystując kontrolki serwerowe wykonać formularz wg poniższego wzoru. Do walidacji
pól użyć kontrolek walidacyjnych wg założeń:
" pola imię i nazwisko powinno posiadać co najmniej 3 znaki oraz powinno zaczynać się
od dużej litery
" pola email i strona domowa powinny być weryfikowane za pomocą odpowiednich
wyrażeń regularnych
" Pole wiek powinno być weryfikowane według zakresu: od 10 do 60
Zamiana kontrolek HTML na kontrolki serwerowe
Każdy znacznik HTML może zostać przekształcony na kontrolkę serwerową w technologii
ASP.NET. W tym celu zastosować należy dyrektywę runat= server oraz pamiętać o nadaniu
znacznikowi unikalnego parametru ID, np.:
Kontrolki walidacyjne 76


...

Taki zabieg umożliwia dostęp do atrybutów oraz stylów dowolnych znaczników z poziomu
kodu c#, dzięki czemu wygląd i wartości atrybutów mogą być nadawane dynamicznie po
zajściu odpowiedniego zdarzenia na stronie (po wywołaniu odpowiedniej metody, która w
odpowiedni sposób zmodyfikuje znacznik).
Dostęp do atrybutów znacznika
Dostęp do atrybutów znacznika uruchamianego na serwerze odbywa się za pomocą składni:
IDznacznika.Attributes["nazwa_atrybutu"] = "wartość";
Jeśli np. paragraf tekstu uruchamiany będzie po stronie serwera:

....

to aby wyrównać tekst tego paragrafu do strony prawej za pomocą kodu c#, użyć należy
składni:
par1.Attributes["align"] = "right";
Dostęp do stylu znacznika
Analogicznie jak w przypadku ustalania wartości atrybutów znacznika uruchamianego po
stronie serwera, ustalony może zostać styl znacznika:
IDznacznika.Style[HtmlTextWriterStyle.Właściwość_stylu]= "wartość";
Jeśli np. paragraf tekstu uruchamiany będzie po stronie serwera:

....

to aby za pomocą kodu c#, ustalić kolor tekstu paragrafu na niebieski, użyć należy składni:
par2.Style[HtmlTextWriterStyle.Color] = "blue";
Możliwość dynamicznego dostępu do atrybutów oraz stylu znacznika z poziomu kodu c# daje
ogromne możliwości projektującemu stronę, ponieważ pozwala na zmianę wyglądu strony
Dostęp do atrybutów znacznika 77
po zajściu żądanego zdarzenia czy też interakcji z odwiedzającym lub dodatkowo pod
określonym warunkiem itd.
Zadanie 4  Dynamiczna zmiana styli elementów HTML
Wykonać stronę wg poniższego wzoru. Wykorzystać kontrolki list do sterowania wyglądem
tła strony oraz do sterowania wyglądem akapitu tekstowego:
Dostęp do stylu znacznika 78