ASP.NET i Web Matrix – część 2

Działanie stron ASP.NET. Programowanie zdarzeniowe
5. Tworzenie prostego kalkulatora
5.1. Cel przedsięwzięcia i zasada działania
Nadeszła już pora, żeby stworzyć konkretną aplikację w ASP.NET. Będzie to kalkulator,
pozwalający wykonywać cztery podstawowe działania arytmetyczne na dwóch liczbach.
Rysunek 4. Planowany wygląd aplikacji
Jego zasada działania będzie następująca:
 Użytkownik ma wpisać dwie liczby w pola tekstowe, wybrać operację oraz nacisnąć
przycisk Wynik, w celu wykonania działania i obliczenia wyniku.
 Po kliknięciu w jeden z operatorów, w lewej dolnej etykiecie ma się pojawić tekst
opisujący wybraną operację (np. dla „+” napis [suma] itp.).
 Po naciśnięciu przycisku Wynik mają zostać odczytane napisy z obu pól tekstowych
i zamienione na liczby typu double (zmiennoprzecinkowe). Ma na nich zostać
wykonana żądana operacja, zaś wynik należy sformatować do postaci 5 + 3 = 8.
 Wpisanie błędnych wartości ma spowodować wyświetlenie ostrzeżenia dla użytkownika.
5.2. Budowa interfejsu użytkownika
W celu stworzenia żądanej strony, wykonaj poniższe czynności:
1. Załóż na dysku twardym własny katalog na pliki do tego zadania.
2. Otwórz program WebMatrix.
1
Działanie stron ASP.NET. Programowanie zdarzeniowe
3. Stwórz nową stronę ASP.NET Page, upewnij się czy w polu Language jest wybrana
opcja C#, a następnie zapisz stronę w swoim katalogu, w pliku o nazwie
Kalkulator.aspx.
4. Wstaw do tej strony nagłówek: Kalkulator.
5. Wstaw do tej strony tabelę, poleceniem HTML  Insert Table.
6. Podaj następujące dane:
Rows: 3 (liczba wierszy), Width: 400 (szerokość),
Columns: 4 (liczba kolumn), Height: 200 (wysokość).
7. Kliknij we wstawioną tabelę (w jedną z jej ramek), aby zaznaczył się znacznik
<TABLE>. Ustaw jej właściwość border na 1. W celu wskazania znacznika <TABLE>
możesz również kliknąć we wnętrze dowolnej komórki tabeli i skorzystać z listy
znaczników w oknie właściwości, zatytułowanej Click to see parent HTML elements.
8. Następnie, korzystając z menu kontekstowego, połącz komórki w drugim oraz trzecim
wierszu (polecenia Merge cell left oraz Merge cell right). Możesz również przełączyć
się na zakładkę HTML i samodzielnie usunąć zbędne znaczniki <td></td>, w zamian
wpisując w odpowiednich znacznikach <td> parametr colspan (o ile pamiętasz
jeszcze te elementy języka HTML).
9. W komórki tabeli wstaw kontrolki Web Controls, nazywając każdą z nich (zmieniając
im właściwość (ID)) następująco:
Label
– LabLiczba1,
TextBox – TxtLiczba1,
RadioButtonList – RblOperacja,
Label
– LabLiczba2,
Button
– BtnWynik,
Label
– LabOperacja,
TextBox – TxtLiczba2,
Label
– LabWynik.
10. Ustaw właściwość align wybranych komórek na Center, aby zmienić wygląd tabeli.
11. Dla kontrolki RblOperacja zmodyfikuj listę elementów (właściwość Items), dodając
przyciskiem Add elementy i ustaw ich właściwości Text oraz Value na:
+
[suma]
–
[różnica]
*
[iloczyn]
/
[iloraz]
12. Ustaw pozostałe właściwości kontrolek, zgodnie z poniższą tabelą:
Kontrolka
Nazwa kontrolki (ID)
Nazwa właściwości
2
Wartość właściwości
Działanie stron ASP.NET. Programowanie zdarzeniowe
Label
TextBox
RadioButtonLis
LabLiczba1
TxtLiczba1
RblOperacja
Text
MaxLength
AutoPostBack
Liczba 1:
20
True
ListItem[0]
Text
Value
Text
Value
Text
Value
Text
Value
Text
MaxLength
Text
Text
Font.Bold
Text
Font.Bold
+
[suma]
[różnica]
*
[iloczyn]
/
[iloraz]
Liczba 2:
20
Wynik
[...]
True
(...)
True
t
ListItem[1]
ListItem[2]
ListItem[3]
Label
TextBox
Button
Label
LabLiczba2
TxtLiczba2
BtnWynik
LabOperacja
Label
LabWynik
15. Zapisz dokonane zmiany i sprawdź, czy strona poprawnie wygląda w przeglądarce.
W tym celu naciśnij mały przycisk Play na pasku narzędzi środowiska WebMatrix
i zatwierdź uruchomienie serwera ASP.NET.
5.3. Reakcja na zmianę wybranej operacji
Jak być może dało się zauważyć, włączenie właściwości AutoPostBack kontrolki
RblOperacja dało ciekawy efekt: po każdej zmianie operacji strona jest automatycznie
wysyłana na serwer, który odsyła nową wersję tej strony. Jest to zachowanie pożądane,
na które jeszcze trzeba zareagować. Zgodnie z założeniem, powinien się wtedy zmieniać
napis w lewej dolnej etykiecie.
W tym celu wykonaj następujące czynności:
 Dla wstawionej kontrolki RblOperacja odszukaj na zakładce ze zdarzeniami zdarzenie
o nazwie SelectedIndexChanged (zmieniono numer wybranej opcji). Kliknij w to
zdarzenie dwa razy, aby dodać procedurę jego obsługi.
 Napisz obsługę zdarzenia zgodnie z punktem  pomysłu działania.
 Zapisz dokonane zmiany i sprawdź, czy strona poprawnie działa.
Zastanów się nad punktem 15. Jak napisać obsługę zdarzenia? Najpierw należy
skorzystać z przeglądarki klas. Jest ona dostępna po przełączeniu listy właściwości na
listę dokumentacji (zakładka Classes). W polu Enter Name to Search wpisz
RadioButtonList i naciśnij Enter. Szukany symbol pojawi się jako jedyny na liście.
Dwukrotne kliknięcie w niego wyświetli okno z opisem. Należy teraz otworzyć podlistę
Properties i zaznaczyć opcję Show Non-Public Members.
3
Działanie stron ASP.NET. Programowanie zdarzeniowe
Kontrolka RadioButtonList ma to do siebie, że gdy użytkownik zmieni wybraną opcję,
pojawia się zdarzenie SelectedIndexChanged. Jeśli dodana jest procedura obsługi tego
zdarzenia, można wykonać w odpowiedzi jakąś akcję. Przeglądając listę właściwości
kontrolki RadioButtonList można trafić na następujące właściwości o nazwach
rozpoczynających się od Selected: SelectedIndex (numer wybranej opcji liczony od
zera), SelectedItem (wybrany element z listy Items kontrolki) oraz SelectedValue
(właściwość Value wybranego elementu).
Rysunek 5. Opis właściwości SelectedItem kontrolki RadioButtonList
Skoncentrujmy się na właściwości SelectedItem. Kontrolka RadioButtonList
zapamiętuje w tej właściwości aktualnie zaznaczony element. Jak można zauważyć
w opisie właściwości, element ten jest typu ListItem. Kliknięcie w nazwę tego typu także
wyświetla jego opis. Otwierając jego podlistę Properties można znaleźć m.in. właściwości
Selected, Text i Value — takie same jak w oknie, w którym były dodawane do listy
elementów Items kontrolki RadioButtonList (w punkcie 11). Text jest napisem
wyświetlanym w oknie przeglądarki (jeden z operatorów), Value zaś jest opisem
wybranej operacji.
4
Działanie stron ASP.NET. Programowanie zdarzeniowe
Wniosek jest następujący: wyrażenie RblOperacja.SelectedItem.Value będzie opisem,
który został ustawiony w liście elementów (np. [dodawanie] lub [mnożenie]). Żeby
zmienić tekst wyświetlany w lewej dolnej etykiecie, wystarczy przypisać nową wartość
właściwości Text kontrolki LabOperacja. Tak więc cała obsługa zdarzenia sprowadzi się
do jednej linijki:
Przykład 5. Obsługa zdarzenia SelectedIndexChanged dla listy operacji
void RblOperacja_SelectedIndexChanged(object sender, EventArgs e) {
LabOperacja.Text = RblOperacja.SelectedItem.Value;
}
Warto jeszcze zauważyć, że wyrażenie RblOperacja.SelectedItem.Value jest
równoważne z RblOperacja.SelectedValue. Właściwość taka jest dostępna od wersji 1.1
platformy .NET.
5.4. Obliczanie wyniku
Aby tworzony kalkulator w końcu coś policzył, trzeba teraz dodać obsługę przycisku
Wynik. W tym celu wykonaj następujące czynności:
16. Dla przycisku BtnWynik odszukaj na zakładce ze zdarzeniami zdarzenie o nazwie
Click (przycisk wciśnięty). Kliknij w to zdarzenie dwa razy, aby dodać procedurę jego
obsługi.
17. Napisz obsługę zdarzenia zgodnie z punktem  pomysłu działania.
18. Zapisz dokonane zmiany i sprawdź, czy strona poprawnie działa.
Zastanów się nad punktem 18. Oto fakty:
 Skoro kontrolka RblOperacja posiada właściwość SelectedIndex, to można
sprawdzić jej wartość — gdy nie jest zaznaczona żadna opcja wynosi ona –1. Tylko
wtedy, gdy wartość SelectedIndex jest większa lub równa zero warto prowadzić
obliczenia, ponieważ wiadomo, jaki operator jest wybrany.
 Oba pola tekstowe — kontrolki TxtLiczba1 i TxtLiczba2 — mają właściwość Text.
Jest to napis aktualnie wpisany w takie pole.
 W obsłudze zdarzenia możesz zadeklarować lokalne zmienne typu double do
przechowywania wartości liczbowych odczytanych z kontrolek tekstowych oraz
wyniku.
 Do konwersji napisów na liczby możesz skorzystać z klasy Convert, która zawiera
m.in. metodę ToDouble().
5
Działanie stron ASP.NET. Programowanie zdarzeniowe
 Do rozpoznania wybranego operatora możesz użyć instrukcji switch, jako parametr
podając napis z wybranego elementu kontrolki RblOperacja — właściwość
SelectedItem.Text.
 Dla każdego typu operatora (przypadku case) można już obliczyć wartość wyniku.
 Można następnie (po skończeniu instrukcji switch) sformatować odpowiednio
uzyskany wynik tak, aby wyświetlone zostały obie wartości połączone operatorem,
znak równości oraz sam wynik (np. 5 + 3 = 8). Każdy składnik powinien być
oddzielony od swoich sąsiadów przynajmniej jedną spacją.
 Uzyskany napis można wstawić do etykiety LabWynik, ustawiając jej właściwość Text.
5.5. Kontrolki sprawdzające poprawność danych
Mimo sporej funkcjonalności kalkulatora jest on nadal narażony na błędy, spowodowane
wprowadzeniem niepoprawnych danych wejściowych. Wystarczy nie wpisać jednej z liczb
lub podać w jej miejsce napis (np. jakieś imię), aby pojawiły się problemy. Aby
zabezpieczyć stronę przed takimi oczywistymi błędami można skorzystać z gotowego
rozwiązania ASP.NET, a mianowicie kontrolek sprawdzających automatycznie poprawność
danych (ang. validators).
W tym celu wykonaj następujące czynności:
 Kliknij w kontrolkę TxtLiczba1, a następnie naciśnij na klawiaturze strzałkę w prawo.
Kursor zostanie postawiony za polem tekstowym. Wstaw „złamanie” linii, wciskając
kombinację klawiszy Shift + Enter (efektem będzie znacznik <br>).
 Dodaj w tym miejscu kontrolkę RequiredFieldValidator i zmień jej nazwę
(właściwość (ID)) na ReqLiczba1. Wybierz kontrolkę, która ma być sprawdzana,
wskazując we właściwości ControlToValidate kontrolkę TxtLiczba1.
 Wstaw również kontrolkę RequiredFieldValidator za drugim polem tekstowym,
nazywając ją ReqLiczba2 i wskazując do sprawdzania kontrolkę TxtLiczba2.
 Domyślnie kontrolki RequiredFieldValidator zawsze zajmują miejsce na stronie,
nawet gdy ich nie widać. Jeśli chcesz, żeby kontrolki pojawiały się tylko w przypadku
błędnych danych, ustaw ich właściwość Display na Dynamic.
 Podsumowanie właściwości wstawionych kontrolek:
Kontrolka
RequiredFieldValidator
Nazwa kontrolki (ID)
ReqLiczba1
RequiredFieldValidator
ReqLiczba2
6
Nazwa właściwości
ControlToValidate
Display
ErrorMessage
ControlToValidate
Display
Wartość właściwości
TxtLiczba1
Dynamic
wpisz liczbę!
TxtLiczba2
Dynamic
Działanie stron ASP.NET. Programowanie zdarzeniowe
ErrorMessage
wpisz liczbę!
 Sprawdź działanie strony — uruchom ją i wciśnij przycisk Wynik, np. wpisując tylko
jedną liczbę albo bez podania żadnej liczby.
 Strona jednak jeszcze nie jest zabezpieczona przed wpisaniem nieprawidłowych liczb.
Dodaj więc za poprzednimi kontrolkami dodatkowe kontrolki RangeValidator.
Pozwalają one na sprawdzenie, czy wpisana wartość odpowiada żądanemu typowi
danych oraz czy mieści się ona we wskazanym zakresie.
 Podstawowe nowe właściwości wstawionych kontrolek to Type, MinimumValue oraz
MaxiumValue. Proponowane wartości właściwości znajdują się w poniższej tabeli:
Kontrolka
RangeValidator
Nazwa kontrolki (ID)
RngLiczba1
RangeValidator
RngLiczba2
Nazwa właściwości
ControlToValidate
Display
ErrorMessage
Type
MinimumValue
MaximumValue
ControlToValidate
Display
ErrorMessage
Type
MinimumValue
MaximumValue
Wartość właściwości
TxtLiczba1
Dynamic
błędna liczba!
Double
-99999999
99999999
TxtLiczba2
Dynamic
błędna liczba!
Double
-99999999
99999999
 Zapisz stronę i sprawdź, czy poprawnie działa.
 Ostatnim ulepszeniem jest to, że po otrzymaniu wyniku i zmianie operatora (w liście
RblOperacja) w prawej etykiecie LabWynik wyświetlany jest wynik ostatniej operacji.
Jest to niekonsekwencja. Dodaj więc na końcu obsługi zdarzenia
SelectedIndexChanged jedną instrukcję, która będzie przywracać w prawej etykiecie
domyślny napis (...).
7