Ć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.
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 zró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
Wyszukiwarka
Podobne podstrony:
technologie internetowe cw KontrolkiSerw2
technologie internetowe cw HTML
technologie internetowe cw MasterPage Sitemap themes
technologie internetowe cw CSS
technologie internetowe cw UC
technologie internetowe cw JS2
technologie internetowe cw WS
technologie internetowe cw Formularze Html
technologie internetowe cw SkrSerw
technologie internetowe cw JS
Technologie Internetowe 2
Technologie Internetowe 1
Technologie Internetowe
Ćw 4 Kontrola funkcji granulocytow
Biofizyka kontrolka do cw nr
Umowa YouTube z żydowską masońską organizacją o kontroli internetu
Technologia kontroli umysłów
instrukcja kontroli procesow technologicznych badania surowcow i wyrobow gotowych ciastkarni
więcej podobnych podstron