Ćwiczenie 7
Temat:
Kontrolki serwerowe
ASP.NET
Cel ćwiczenia:
W ramach ćwiczenia student zapozna się z metodami używania kontrolek
serwerowych ASP.NET oraz z metodami programowego odwoływania się do
tych kontrolek. Student pozna także wybrane metody obsługi interakcji z
użytkownikiem odwiedzającym stronę.
Kontrolki serwerowe - Wstęp
Środowisko ASP.NET udostępnia wiele gotowych elementów i klas używanych do budowania
dynamicznych aplikacji internetowych. Znaczną grupę stanowią kontrolki serwerowe.
Kontrolki to elementy stron, które programowane są po stronie serwera, a każda z nich
posiada unikalny parametr  id jednoznacznie definiujący kontrolkę na danej stronie.
W środowisku Visual Studio znalez
ć można kilka grup kontrolek. Kontrolki znajdują się w
pasku narzędziowym Toolbox (menu: widok (view) -> Toolbox):
Kontrolki widoczne po zainstalowaniu środowiska Visual Studio w pasku Toolbox są
kontrolkami dostarczonymi przez firmę Microsoft, jako podstawowe kontrolki serwerowe.
Jednak istnieje także wiele innych kontrolek, zarówno darmowych jak i płatnych, które mogą
zostać zainstalowane i dołączone do strony internetowej. Jednym z najpopularniejszych
rozszerzeń jest zestaw Ajax Control Toolkit, z którym czytelnik zapoznany zostanie w ramach
kolejnych laboratoriów.
Najpopularniejszymi kontrolkami są:
1. Label  wyświetlająca tekst
2. TextBox  umożliwiająca wpisywanie tekstu
3. Button  wstawiająca przycisk
4. LinkButton  wstawiająca łącze które posiada właściwości przycisku
Kontrolki serwerowe ASP.NET 58
5. HyperLink  wstawia odnośnik
6. DropDownList  wstawia rozwijaną listę wyboru
7. ListBox  wstawia listę wielokrotnego wyboru
8. CheckBox  wstawia pole wyboru
9. CheckBoxList  wstawia listę pól wyboru
10. RadioButton  wstawia pole jednokrotnego wyboru
11. RadioButtonList - wstawia listę pól jednokrotnego wyboru
Działanie i obsługa najpopularniejszych kontrolek serwerowych
Kontrolki serwerowe zdefiniowane są jako abstrakcyjne obiekty HTML, które w dynamiczny
sposób generują po stronie serwera standardowe znaczniki HTML. W przeglądarce klienta (w
kodzie strony) kontrolki widziane są jako standardowe znaczniki HTML, jednak podczas
programowania strony (w programie na serwerze) udostępniają dużo większą ilość
zaawansowanych funkcji.
Wstawianie kontrolek na stronę
Wstawianie kontrolki może odbywać się za pomocą pisywania kodu w trybie Source lub w
trybie Design za pomocą przeciągania odpowiednich kontrolek z paska Toolbox na stronę
internetową.
Składnia znacznika umieszczającego kontrolkę serwerową na stronie jest następująca:

lub w przypadku niektórych kontrkolek, które muszą posiadać znacznik zamknięcia:

Zadanie 1 Umieszczanie kontrolki
Utworzyć pierwszą stronę w technologii ASP.NET. Przetestować efekt wstawienia na stronę
kontroli kalendarza. W celu realizacji zadania postępuj wg poleceń:
1. Uruchomić środowisko Visual Studio
Wstawianie kontrolek na stronę 59
2. Utworzyć nową stronę sieci WEB  Szablon: Strona ASP.NET
3. W oknie Solution Explorer edytować stronę główną projektu Default.aspx
4. Przełączyć edytor w tryb projektowania (Design)
5. Z paska Toolbox przeciągnąć na stronę kontrolkę kalendarza (Calendar) znajdującą się w
sekcji standardowych kontrolek (Standard)
6. Uruchomić serwer WWW oraz tryb debugowania strony (klawisz F5 lub guzik )
6.1. Jak zachowuje się kontrolka kalendarza w przeglądarce ?
7. Zatrzymać serwer WWW (Shift+F5, lub klawisz )
8. Przełączyć edytor w tryb kodu (Source)
8.1. Poprzez jaki znacznik został dołączony do strony kalendarz ?
8.2. Jaka została nadana nazwa ID dla kontrolki kalendarza ?
Właściwości kontrolek
Każda kontrolka posiada zestaw właściwości, które odpowiadają za jej wygląd i zachowanie.
Okno właściwości kontrolki zazwyczaj znajduje się pod oknem eksploratora projektu
(Solution explorer). Jeśli w danej chwili nie jest dostępne może zostać wywołane poprzez
kliknięcie prawym guzikiem myszy na kontrolce (kontrolce znajdującej się już na stronie) a
następnie wybranie z menu kontekstowego polecenia właściwości (Properties). Okno
Właściwości kontrolek 60
właściwości posiada dwie zakładki. Zakładka podstawowa pozwalająca ustalić parametry
kontrolki związane z wyglądem, oraz zakładka (wywoływana przyciskiem ) definiująca
obsługę zdarzeń dla danej kontrolki.
Zadanie 2 Zmiana właściwości kontrolki
Dla kontrolki kalendarza utworzonej w poprzednim zadaniu, w oknie właściwości zmienić na
dowolne wartości poniższe parametry:
" Kolor tła (BackColor),
" Kolor obramowania (BorderColor),
" Styl obramowania (BorderStyle),
" Opcję wyświetlania linii rozdzielających komórki (ShowGridLines)
Sprawdzić w widoku kodu jak zostały zdefiniowane powyższe parametry.
Label  kontrolka tekstowa
Kontrolka Label jest prostą kontrolką do wyświetlania tekstu. Do jej najbardziej
podstawowych właściwości zaliczyć można:
" Text  zawartość tekstowa kontrolki
" Font  nazwa czcionki kontrolki
" BackColor  kolor tła kontrolki
" ForeColor  kolor teksu kontrolki
" Visible  kontrolka widoczna / niewidoczna
TextBox  kontrolka wprowadzania tekstu
Kontrolka umożliwia wprowadzanie tekstu przez użytkownika strony. Jest obiektem
analogicznym to statycznego elementu formularzy  input. Do podstawowych właściwości
kontrolki Textbox należą:
" Text  treść tekstowa kontrolki (początkowa lub wpisana)
Label  kontrolka tekstowa 61
" Font  czcionka tekstu kontrolki
" BackColor  kolor tła kontrolki
" ForeColor  kolor tekstu kontrolki
" TexMode  tryb wpisywania: jedna linia, wiele linii lub maskowane hasło
" AutoPostBack  automatyczne powiadomienie serwera o zmianie zawartości
kontrolki
" Visible  kontrolka widoczna / niewidoczna
" ReadOnly  kontrolka tylko do odczytu: tak/nie
Zdarzenie:
" TextChanged  definiuje metodę wywołaną po zdarzeniu zmiany tekstu kontrolki
Button  kontrolka przycisku
Kontrolka Button wstawia na stronę przycisk, który umożliwia zainicjowanie akcji na
serwerze. Najważniejszymi właściwościami kontrolki są:
" Text  treść tekstu na przycisku
" Font  czcionka tekstu kontrolki
" BackColor  kolor tła kontrolki
" ForeColor  kolor teksu kontrolki
" Visible  kontrolka widoczna / niewidoczna
Zdarzenie:
" Click - definiuje metodę wywołaną po zdarzeniu przyciśnięcia guzika
Obsługa zdarzeń kontrolek
Zdarzenia to akcja wykonywana po wystąpieniu interakcji użytkownika odwiedzającego
stronę z kontrolkami. Zdarzenie może nastąpić w przypadku, gdy użytkownik naciska na
przycisk guzika, zaznacza pole wyboru, wybiera jedną z opcji listy rozwijanej.
Button  kontrolka przycisku 62
Przykład  obsługa zdarzeń
W poniższym przykładzie na stronie Default.aspx zdefiniowane zostały dwie kontrolki:
kontrolka typu TextBox o nazwie ID  TxtB_imie oraz kontrolka typu Label o nazwie ID
 Lbl_Powitanie . Jak można zauważyć kontrolka typu Label nie ma ustalonych żadnych
właściwości, oprócz tych ściśle obowiązkowych dla kontrolek serwerowych (czyli id oraz
runat). Natomiast kontrolka typu TextBox ma zdefiniowaną właściwość AutoPostBack oraz
metodę TxtB_imie_TextChanged, która zostanie wywołana, gdy nastąpi zdarzenie
ontextchanged, czyli gdy zmieni się tekst kontrolki TxtB_imie.

Wpisz swoje imię:
ontextchanged="TxtB_imie_TextChanged">

Aby zaszła interakcja po zdarzeniu zmiany tekstu kontrolki TxtB_imie należy zdefiniować
metodę TxtB_imie_TextChanged. Metodę tą można zdefiniować pomiędzy znacznikami
w nagłówku dokumentu Default.aspx lub w pliku kodu
Default.aspx.cs. Uwaga! Kod może być definiowany w pliku kodu tylko wtedy, gdy
zdefiniowany został odpowiedni parametr dyrektywy Page w pliku Default.aspx :
<%@ Page Language="C#" CodeFile="Default.aspx.cs" %>
Poniższy przykład prezentuje definicję metody w nagłówku dokumenty Default.aspx. Metoda
TxtB_imie_TextChanged zostanie wywołana, gdy zmieni się tekst kontrolki TxtB_imie. Sama
metoda realizuje tylko jedno polecenie: przypisuje kontrolce Lbl_Powitanie tekst
zawierający frazę wpisaną przez użytkownika.

Przykład  obsługa zdarzeń 63
Zadanie 3 Zdarzenia - Obliczanie objętości walca
Wykorzystując kontrolki serwerowe napisać program do obliczania objętości walca.
Zastosować poniższe kontrolki zgodnie z poniższymi zaleceniami:
" TextBox  dwa pola: wysokość i promień podstawy
" Label  dynamiczny tekst który wyświetli wynik obliczeń. Kontrolka powinna być
niewidoczna do momentu wyświetlenia obliczeń. Tekst wyniku powinien być koloru
czerwonego.
" Button  przycisk, który wywoła metodę obliczającą objętość walca oraz przypisującą
wynik do kontrolki typu label
DropDownList  kontrolka listy rozwijanej
Kontrolka DropDownList wstawia na stronę listę rozwijaną. Najważniejszą jej właściwością
jest kolekcja items która zawiera elementy listy. Elementy listy rozwijanej mogą zostać
zdefiniowane za pomocą kodu:

Katowice
Sosnowiec

Edycja elementów listy może także odbywać się za pomocą metod usuwania czy dodawania
elementów kolekcji w kodzie c#:
miasta.Items.Add("Będzin");
miasta.Items.Remove("Katowice");
DropDownList  kontrolka listy rozwijanej 64
Najprostszą metodą edycji elementów listy jest skorzystanie z formatki, uaktywnianej w polu
Items w oknie właściwości kontrolki (patrz screen poniżej), która prezentuje kolekcję
elementów listy w formie tabeli. Możliwe jest także uruchomienie kreatora, który umożliwia
pobranie elementów listy z bazy danych lub innych z
ródeł danych.
Najważniejsze właściwości kontrolki DropDownList:
" Items  kolekcja elementów listy
" SelectedIndex  numer wybranego elementu
" SelectedValue  wartość wybranego elementu
" AutoPostBack  automatyczne powiadomienie serwera
" Font  czcionka tekstu kontrolki
" BackColor  kolor tła kontrolki
" ForeColor  kolor teksu kontrolki
" Visible  kontrolka widoczna / niewidoczna
Zdarzenie:
" SelectedIndexChange - definiuje metodę wywołaną po zdarzeniu zmiany wybranego
elementu kontrolki
DropDownList  kontrolka listy rozwijanej 65
Zadanie 4 Lista rozwijana
Dodać do strony listę rozwijaną zawierającą spis miast. Za pomocą kontrolek TextBox oraz
Button stworzyć metody dodające kolejne miasta do istniejącego spisu.
Image  kontrolka obrazka
Kontrolka Image wstawia na stronę grafikę. Używając ścieżek do pliku zamiast adresów URL
warto pamiętać, aby wstawiane za pomocą kontrolki grafiki zostały dodane do projektu w
środowisku Visual Studio. Grafiki mogą zostać dodane do projektu poprzez wybranie z menu
kontekstowego całego projektu polecenia  Add existing item . (Patrz screen poniżej).
Dodane grafiki pojawią się w drzewie projektu i od tego momentu będzie można je
wskazywać za pomocą formatki, klikając w pole ImageUrl w oknie właściwości kontrolki.
Image  kontrolka obrazka 66
Podstawowe właściwości kontrolki:
" ImageUrl  ścieżka do grafiki (ew. URL)
" AlternativeText  tekst zastępczy, jeśli z jakiegoś powodu zdjęcie nie zostanie
poprawnie wczytane
Zadanie 5 Zastosowanie kontrolek  Objętość i pole brył obrotowych
Rozbudować program z zadania 3 według poniższych wytycznych:
1. Zastosować listę rozwijaną, w której wybrać będzie można rodzaj bryły, której objętość i
pole ma zostać wyliczona (Stożek, Kula, Walec)
2. W przypadku, gdy z listy rozwijanej wybrana zostanie bryła Walec, ukryte zostaną pola
opisujące tworzącą stożka. Natomiast w przypadku, gdy z listy wybrana zostanie Kula,
dodatkowo ukryte zostaną pola związane z wysokością figury (ukrywane będą kontrolki
Label  opis pola oraz TextBox  wartość pola)
3. Zastosować kontrolkę Image, tak aby wyświetlana była wybrana figura geometryczna. Do
tego celu zastosować można wcześniej przygotowane grafiki:
http://kzi.polsl.pl/ti/cwiczenia/figury.zip
Image  kontrolka obrazka 67
Podczas realizacji tego zadania, pamiętać należy o tym, że:
" Indeksy list numerowane są od wartości 0 (Jeśli wykorzystujesz własność listy
rozwijanej: SelectedIndex zamiast SelectedValue)
" Należy włączyć własność Autopostback dla kontrolek których zmiana stanu musi
 zostać zauważona przez serwer.
Image  kontrolka obrazka 68