Aplikacje Internetowe -...

Piotr Bubacz

Aplikacje Internetowe

ITA-103

Wersja 1

Warszawa, październik 2008

Piotr Bubacz

ITA-103 Aplikacje Internetowe

Strona i-2

2008 Piotr Bubacz. Autor udziela prawa do bezpłatnego kopiowania

i dystrybuowania wśród pracowników uczelni oraz studentów objętych

programem ITAcademy. Wszelkie informacje dotyczące programu można

uzyskać: [email protected].

Wszystkie inne nazwy firm i producentów wymienione w niniejszym

dokumencie mogą być znakami towarowymi zarejestrowanymi przez ich

właścicieli.

Inne produkty i nazwy firm używane w treści mogą być nazwami

zastrzeżonymi przez ich właścicieli.

Piotr Bubacz


Strona i-3

Spis treści Wprowadzenie i-4

Moduł 1 Podstawy HTML 1-1

Moduł 2 Kaskadowe Arkusze Stylów – CSS 2-1

Moduł 3 Podstawy JavaScript 3-1

Moduł 4 Wprowadzenie do ASP.NET 4-1

Moduł 5 Kontrolki serwerowe 5-1

Moduł 6 Projektowanie serwisów internetowych 6-1

Moduł 7 Kolokwium 1 7-1

Moduł 8 Kontrolki danych w ASP.NET 8-1

Moduł 9 LINQ w ASP.NET 9-1

Moduł 10 Bezpieczeństwo serwisów internetowych 10-1

Moduł 11 Zarządzanie stanem w aplikacjach ASP.NET 11-1

Moduł 12 Technologia WebParts 12-1

Moduł 13 ASP.NET AJAX 13-1

Moduł 14 ASP.NET AJAX Control Toolkit 14-1

Moduł 15 Kolokwium 2 15-1

Piotr Bubacz


Strona i-4

Wprowadzenie

Informacje o kursie

Opis kursu Kurs zawiera informacje dotyczące programowania dynamicznych stron

internetowych w technologii ASP.NET. Przedstawia kompletny projekt

witryny internetowej sklepu Adventure Works realizowany w czasie zajęć,

dzięki któremu zapoznasz się z najważniejszymi komponentami tej

technologii.

Kurs rozpoczynamy od przedstawienia podstaw HTML i CSS, by później

przeprowadzić Cię przez podstawy tworzenia aplikacji internetowych oraz

dodawania i konfigurowania kontrolek dostępnych w ASP.NET. Te wszystke

zagadnienia poznajemy na przykładzie projektu sklepu internetowego, który

stopniowo rozbudowujemy o nowe, poznawane w kolejnych modułach

elementy.

Cel kursu Celem kursu jest przedstawienie zagadnień związanych z tworzeniem

aplikacji internetowych w ASP.NET, dzięki którym będziesz w stanie

samodzielnie projektować i wykonywać proste serwisy internetowe.

Uzyskane kompetencje Po zrealizowaniu kursu będziesz:

• potrafił tworzyć strony w XHTML przyjazne dla CSS

• rozumiał potrzebę tworzenia stron internetowych zgodnych ze

standardami

• potrafił tworzyć proste aplikacje działające po stronie klienta w

języku JavaScript

• potrafił tworzyć aplikacje internetowe w Visual Studio 2008

• potrafił dodawać i konfigurować kontrolki serwerowe dostępne w

ASP.NET

• potrafił zaprojektować szablon strony i zarządzać wyglądem serwisu

• potrafił dodawać i konfigurować różne kontrolki źródła prezentacji

danych

• potrafił tworzyć proste zapytania LINQ

• rozumiał potrzebę i znał możliwości zabezpieczania portalu przed

niepowołanym dostępem

• potrafił zarządzać stanem aplikacji

• potrafił tworzyć aplikacje internetowe konfigurowalne przez

użytkownika

• potrafił wykorzystywać zalety asynchronicznej komunikacji z

serwerem przy pomocy AJAX

• wiedział jak wykorzystać kontrolki dostępne w ASP.NET AJAX

Control Toolkit

Wymagania wstępne Do zrealizowania tego kursu powinieneś posiadać:

• wiedzę z zakresu programowania obiektowego w języku C#, którą

obejmują kursy ITA-104 „Wprowadzenie do programowania„ i

ITA-105 „Programowanie obiektowe”

Piotr Bubacz


Strona i-5

Zakres tematyczny kursu

Opis modułów W Tab. 1 przedstawiony został opis modułów, zawierający podział na

zajęcia. Każde zajęcie jest zaplanowane na 90 minut. Wykładowca może

dostosować harmonogram do swoich potrzeb.

Tab. 1 Zakres tematyczny modułów

Numer moduł

Tytuł

Opis

Moduł 1

Podstawy HTML

W tym module znajdziesz informacje dotyczące języka

HTML. Poznasz jego możliwości i ograniczenia.

Zobaczysz, w jaki sposób używać tabel i formularzy do

pobierania informacji od użytkownika. Nauczysz się, jak

tworzyć proste strony i serwisy internetowe.

Moduł 2

Kaskadowe Arkusze

Stylów – CSS

W tym module znajdziesz informacje dotyczące

kaskadowych arkuszy stylów i zalet wynikających z ich

stosowania. Zobaczysz, w jaki sposób używać

selektorów i jak utworzyć układ strony wykorzystując

pozycjonowanie CSS. Dodatkowo nauczysz się, jak

zmienić istniejący dokument HTML wykorzystujący

formatowanie przy pomocy tabel, aby był zgodny ze

standardem XHTML i przyjazny dla CSS.

Moduł 3

Podstawy JavaScript

W tym module znajdziesz informacje dotyczące podstaw

języka JavaScript. Nauczysz się tworzyć kod działający po

stronie klienta w przeglądarce. Poznasz sposoby

sprawdzania poprawności wprowadzanych informacji

przez użytkownika.

Moduł 4

Wprowadzenie do

ASP.NET

W tym module znajdziesz informacje dotyczące podstaw

tworzenia aplikacji internetowych w Visual Studio 2008.

Nauczysz się dodawać strony internetowe do aplikacji

oraz umieszczać na nich kontrolki dostępne w ASP.NET.

Poznasz zasady programowego odwoływania się do

kontrolek oraz interakcji z użytkownikiem strony.

Moduł 5

Kontrolki serwerowe


kontrolek dostępnych w ASP.NET. Poznasz różnice

między kontrolkami serwerowymi HTML a kontrolkami

Web. Nauczysz się wykorzystywać nie tylko różne

kontrolki serwerowe, ale również walidować

wprowadzone dane po stronie klienta lub/i po stronie

serwera.

Moduł 6

Projektowanie

serwisów

internetowych


zarządzania wyglądem aplikacji i tworzenia elementów

nawigacyjnych. Poznasz możliwości centralnego

zarządzania wyglądem witryny przy pomocy stron

wzorcowych i kompozycji. Poznasz metody tworzenia

mapy witryny internetowej oraz nauczysz się, jak

wykorzystywać kontrolki nawigacyjne.

Moduł 8

Kontrolki danych w

ASP.NET


komunikacji i wyświetlania informacji z bazy danych w

aplikacjach internetowych. Nauczysz się definiować

zapytania przy pomocy kontrolki LinqDataSource i

wyświetlać wyniki w kontrolkach GridView oraz

Repeater.

Piotr Bubacz


Strona i-6

Moduł 9

LINQ w ASP.NET


technologii LINQ. Nauczysz się, jak formułować proste

zapytania z wykorzystaniem zintegrowanego języka

zapytań i w jaki sposób połączyć go z ASP.NET.

Moduł 10

Bezpieczeństwo

serwisów

internetowych


sposobów zabezpieczania dostępu do aplikacji

internetowej przy pomocy mechanizmów autoryzacji.

Poznasz kontrolki logowania oraz nauczysz się, jak

można ukrywać opcje menu przed różnymi grupami

użytkowników.

Moduł 11

Zarządzanie stanem w

aplikacjach ASP.NET


możliwości zarządzania stanem w aplikacjach ASP.NET.

Nauczysz się przechowywać zmienne i obiekty w stanie

sesji i aplikacji. Zobaczysz, w jaki sposób można

dodawać, zarządzać i usuwać obiekty z tych stanów.

Moduł 12

Technologia WebParts


technologii umożliwiającej personalizację wyglądu

strony przez jej użytkowników – WebParts. Nauczysz się,

jak tworzyć i zarządzać kontrolkami WebPart, jak

również, jak zachować układ kontrolek umieszczonych

na szablonie strony na wszystkich stronach serwisu.

Moduł 13

ASP.NET AJAX


tworzenia aplikacji internetowych z wykorzystaniem

AJAX. Zobaczysz, jak prosto i skutecznie można

wykorzystywać podstawowe kontrolki dostępne w

ASP.NET AJAX. Nauczysz się, jak kilkoma kliknięciami

myszy rozszerzyć funkcjonalność aplikacji o możliwość

asynchronicznej komunikacji z serwerem.

Moduł 14

ASP.NET AJAX Control

Toolkit


biblioteki ASP.NET AJAX Control Toolkit. Nauczysz się

rozszerzać możliwości standardowych kontrolek

ASP.NET o funkcjonalności zawarte w bibliotece.


Piotr Bubacz

Moduł 2

Wersja 1

Podstawy HTML Spis treści

Podstawy HTML ................................................................................................................................... 1

Informacje o module ............................................................................................................................ 2

Przygotowanie teoretyczne ................................................................................................................. 3

Przykładowy problem .................................................................................................................. 3

Podstawy teoretyczne.................................................................................................................. 3

Uwagi dla studenta .................................................................................................................... 18

Dodatkowe źródła informacji..................................................................................................... 18

Piotr Bubacz Moduł 1 ITA-103 Aplikacje Internetowe Podstawy HTML

Strona 1-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące języka HTML. Poznasz jego możliwości i ograniczenia. Zobaczysz, w jaki sposób używać tabel i formularzy do pobierania informacji od użytkownika. Nauczysz się, jak tworzyć proste strony i serwisy internetowe.

Cel modułu

Celem modułu jest przedstawienie możliwości wykorzystania języka HTML, formatowania dokumentu przy użyciu tabel oraz pobierania informacji od użytkownika.

Uzyskane kompetencje

Po zrealizowaniu modułu będziesz:

• potrafił tworzyć nowe strony internetowe w języku HTML

• wiedział jak tworzyć i kiedy warto stosować tabele

• potrafił tworzyć formularze i przesyłać je do odbiorcy

Wymagania wstępne

Ten moduł nie ma żadnego wymagania wstępnego. Możesz od razu rozpocząć pracę z tym modułem.

Mapa zależności modułu

Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu nie jest wymagane zapoznanie się z materiałem zawartym w innych modułach.

Rys. 1 Mapa zależności modułu


Strona 1-3

Przygotowanie teoretyczne

Przykładowy problem

Znajomość języka HTML w projektowaniu stron internetowych w dobie narzędzi pracujących w trybie WYSIWYG (ang. What You See Is What You Get, co znaczy dosłownie „to co widzisz jest tym, co otrzymasz) wydaje się niepotrzebna. Nie jest to prawdą. Projektant aplikacji internetowej musi w swojej pracy sięgać również na poziom znaczników HTML.

Pełna kontrola nad kodem tworzonym po stronie użytkownika wymaga jawnego odwołania się do znaczników HTML. Znaczniki HTML nie wymagają przetwarzania na serwerze Znajomość znaczników pozwala nam również łatwiej zrozumieć problemy wyświetlania informacji.

Bez znajomości języka HTML bardzo trudno jest nam tworzyć dobre strony. Tabele w HTML są bardzo przydatne do przedstawiania danych tabelarycznych, choć niektórzy do dzisiaj budują w oparciu o nie wygląd aplikacji. Nie jest to błąd, ale powoduje ograniczenie dostępności strony dla urządzeń mobilnych, czy dla osób z ograniczonymi zdolnościami percepcji.

Formularze w języku HTML udostępniają podstawową funkcjonalność tworzenia elementów interakcji z użytkownikiem.

Podstawy teoretyczne

World Wide Web (w skrócie WWW lub Web) jest multimedialnym, hipertekstowym systemem informacyjnym opartym na publicznie dostępnych, otwartych standardach. Podstawowym zadaniem WWW jest publikowanie informacji.

WWW jest siecią milionów komputerów działających w oparciu o model klient-serwer. Serwer przechowuje informacje i obsługuje zapytania klienta. Klient tworzy zapytanie, wysyła, odbiera je i przetwarza, a następnie wyświetla informacje dla końcowego użytkownika. Klientem sieci Web jest najczęściej przeglądarka internetowa.

Cechy WWW:

• hipertekstowy system informacyjny

• graficzna reprezentacja informacji

• łatwa nawigacja

• system wieloplatformowy

• system rozproszony

• sieć dynamiczna

• sieć interaktywna

• uniwersalny sposób nazewnictwa zasobów informacyjnych (URI)

• ustalony protokół dostępu do zasobów (HTTP)

• stosowanie specjalnego typu języka w celu nawigacji po zasobach (HTML)

Strona internetowa

Strona internetowa to dokument tekstowy napisany w jednej z odmian języka znaczników, np. HTML, interpretowanego przez przeglądarkę użytkownika. Strony można podzielić ze względu na sposób jej tworzenia na statyczne i dynamiczne.

Strona statyczna musi być przygotowana wcześniej przez twórcę. Jej ostateczny wygląd oraz cała treść musi być znany na etapie projektowania.

Zalety:

• łatwość implementacji

Wady:


Strona 1-4

• brak elastyczności

Strona dynamiczna jest generowana przez serwer na podstawie działania użytkownika serwisu i danych zapisanych najczęściej w relacyjnej bazie danych.

Zalety:

• interaktywność

• łatwość aktualizacji

Wady:

• trudność w implementacji, testowaniu i wdrażaniu

• większe wymagania sprzętowe serwera i łącz internetowych

Serwis internetowy

Zbiór powiązanych ze sobą i umieszczonych w jednej lokalizacji stron internetowych nazywa się witryną lub serwisem internetowym. Portal jest zbiorem wielu informacji i zasobów z kilku lub jednej dziedziny. Portale zawierają najczęściej: wiadomości, informacje tematyczne, forum, Portale można podzielić na:

• poziome – zawierają informacje z wielu dziedzin, dodatkowo mogą udostępniać np. wyszukiwarki, pocztę elektroniczną

• pionowe – zawierają informacje z jednej dziedziny (nazywane wortalami)

Protokół HTTP

HTTP (ang. HyperText Transfer Protocol) – protokół warstwy aplikacji służący do transferu dokumentów HTML, obrazów, multimediów itp. Jest protokołem bezstanowym – interakcja klienta (najczęściej przeglądarki internetowej) z serwerem WWW odbywa się w modelu bezpołączeniowym:

• Klient nawiązuje połączenie TCP/IP z serwerem, najczęściej na porcie 80.

• Klient wysyła żądanie do serwera wraz z informacjami na temat systemu operacyjnego, wersji języka, obsługiwanych protokołów informacyjnych. W sieci przesyłane są polecenia tekstowe zorganizowane w wiersze np.:

GET /KatalogNaSerwerze/plik.html HTTP/1.0 User–agent: Mozilla/4.0 Accept: text/html, image/gif,image/jpeg Accept–language:pl [dodatkowa pusta linia]

• Serwer wysyła do klienta kod odpowiedzi (informujący o sukcesie lub problemach z wysyłaniem żądanego zasobu), informacje dotyczące rodzaju zawartości zasobu, kodowania, itp. oraz żądany zasób:

HTTP/1.1 200 OK. Server: ASP.NET Development Server/8.0.0.0 Date: Sat, 29 Jul 2006 22:49:42 GMT X–AspNet–Version: 2.0.50727 Cache–Control: private Content–Type: text/html; charset=utf–8 Content–Length: 487 Connection: Close

• Serwer po przesłaniu odpowiedzi automatycznie zamyka połączenie z klientem.


Strona 1-5

Najważniejsze metody klienta

Jeśli użytkownik musi podać jakieś dane, to jedyną możliwością jest pobranie ich ze standardowego formularza HTML. Dane podane mogą być przesłane do serwera za pomocą ośmiu metod, z których najczęściej wykorzystywane to:

• GET – pobieranie zasobu wskazanego przez URL. Może zawierać parametry dołączane do URL (po znaku zapytania).

• POST – wysyła dane użytkownika do określonego zasobu:

• dane zawarte są w ciele komunikatu

• nagłówek Content–Type i Content–Length

• w odpowiedzi klient otrzymuje dokument wygenerowany dynamicznie.

Przekazywanie parametrów

Parametry można przesyłać przy pomocy metody POST lub GET.

W metodzie GET Parametry są przekazywane w adresie URL po znaku zapytania, oddzielone od siebie znakiem &, w formacie parametr=wartość, np.

GET /index.aspx?cat=2&prodid=23

Znaki zastrzeżone (=, &, &, +) są kodowane do postaci %xx, gdzie xx jest kodem ASCII znaku zapisanym szesnastkowo, np. znak spacji zamieniany jest na %20.

W metodzie POST informacje są pobierane z formularza znajdującego się na stronie internetowej.

Język HTML

HTML (ang. HyperText Markup Language) jest językiem znaczników zaprojektowanym do tworzenia stron internetowych. Służy on do opisywania struktury dokumentu (nagłówki, akapity, listy), a nie jego formatowania. Umieszczanie informacji o formatowaniu w dokumencie jest złą praktyką. Interpretacją znaczników i graficznym przedstawieniem zawartości zajmują się przeglądarki internetowe. Gramatyka języka jest oparta o standard SGML.

SGML (ang. Standard Generalized Markup Language) to ustandaryzowany nadrzędny język znaczników służący do ujednolicania struktury i formatu różnego typu informacji. Umożliwia zapisywanie informacji w formie dokumentu tekstowego, dzięki czemu możliwe jest ich łatwe przenoszenie, wyświetlanie i drukowanie.

Podstawowe właściwości:

• Znacznik jest reprezentowany przez tekst zawarty w nawiasach trójkątnych (< i >).

• Tekst pomiędzy nawiasami to nazwa znacznika.

• Istnieją trzy rodzaje znaczników:

• otwierający postaci <znacznik>

• zamykający postaci </znacznik>

• samodzielny postaci <znacznik />

• Znacznik otwierający może posiadać szereg atrybutów definiowanych jako nazwa="wartość".

• Znaki białe, np. spacje, tabulatory lub znaki nowej linii są ignorowane.

Dokument HTML

Dokument HTML jest plikiem tekstowym, w którym znajdują się polecenia (znaczniki) HTML. Z tego wynika, że dokument taki można utworzyć za pomocą dowolnego edytora tekstowego, ręcznie dodając znaczniki. Metoda taka jest skuteczna, ale zbyt uciążliwa i podatna na błędy, szczególnie przy projektowaniu dużych serwisów internetowych. Dlatego na rynku pojawiło się wiele


Strona 1-6

specjalizowanych edytorów, które wydatnie ułatwiają konstruowanie dokumentu, wspomagając wprowadzanie poleceń. Narzędzia można podzielić na dwie kategorie: narzędzia graficzne WYSIWYG oraz tekstowe. Narzędzia graficzne umożliwiają tworzenie serwisów osobom, które nie znają języka HTML, jednak znajomość tego języka ułatwia pracę twórcom stron.

Dokument rozpoczyna się definicją typu dokumentu. W języku HTML w wersji 4.01 element ten jest wymagany, podobnie jak w języku XHTML. Cały dokument zawarty jest w znaczniku <html> i składa się z dwóch głównych części: nagłówka (<head>) oraz ciała – treści dokumentu <body>.

Wersja minimalna dokumentu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!– Naglowek dokumentu ––> <title> Tytuł strony </title> </head> <body> <!– Tresc dokumentu ––> </body> </html>

Definicja typu dokumentu

Definicja typu dokumentu określa wersję języka, która jest wykorzystywana w dokumencie. Poprawny dokument HTML w wersji 4.01 zawiera w pierwszym wierszu definicje typu dokumentu. Podobnie jest w XHTML. Deklaracja typu zawiera informacje o dokumencie definicji typu (ang. Document Type Definition, DTD) wykorzystywanym w dokumencie. DTD zawiera definicje elementów, które można użyć w danym dokumencie.

W języku HTML w wersji 4.01 określono trzy dokumenty definicji typu, które można użyć w projektowanej stronie internetowej:

• Ścisły (ang. strict) – zawiera wszystkie elementy i atrybuty, które są zdefiniowane w standardzie bez elementów nie zalecanych oraz informacji dotyczących dokumentów zawierających ramki. Deklaracja typu dokumentu:

<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• Przejściowy (ang. transitional) – zawieray wszystkie elementy typu bezpośredniego oraz elementy i atrybuty niezalecane (większość dotyczy wizualnej formatowania). Deklaracja typu dokumentu:

<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• Zbiór ramek (ang. frameset) – zawiera wszystkie elementy typu przejściowego oraz elementy zbioru ramek. Deklaracja typu dokumentu:

<!DOCTYPE HTML PUBLIC "–//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

W dokumencie XHTML przed elementem korzenia (najczęściej znacznikiem <html>) musi znajdować się deklaracja typu dokumentu, tzw. DOCTYPE. Publiczny identyfikator dołączony do tej deklaracji musi odnosić się do jednego z trzech DTD:

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–transitional.dtd">


Strona 1-7

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–frameset.dtd">

Nagłówek strony

Nagłówek strony zawiera informacje, które nie są wyświetlane na stronie, ale mają wpływ na jej wygląd. Przykłady tu prezentowane zapisane zostały zgodnie z językiem HTML. Różnica pomiędzy zapisem HTML a XHTML to przede wszystkim konieczność stosowania w XHTML bardziej restrykcyjnych reguł formatowania dokumentu, np. zamknięcie znacznika czy pisanie nazw znaczników małymi literami, lub otaczanie wartości atrybutów cudzysłowem, podczas gdy w HTML można użyć apostrofów, w XHTML wymagana jest również odpowiednia kolejność zamykania znaczników.

Przykładowe znaczniki w sekcji <head>:

• <title> – zawiera tytuł dokumentu wyświetlany w pasku tytułowym okna przeglądarki. Zgodnie ze specyfikacją języka, każdy dokument musi posiadać ten znacznik w sekcji <head>.

• <meta> – umożliwia autorom strony na podawanie informacji o stronie. Informacje mogą być zawarte w następujących atrybutach:

• lang – określa język zawartości

• content – ustala wartość atrybutu

• name – ustala nazwę i rodzaj informacji

• scheme – określa schemat interpretacji informacji

• http–equiv – ustala nazwę i rodzaj informacji

• <link> – określa relację pomiędzy połączonymi dokumentami. Znacznik wykorzystywany do określania lokalizacji zewnętrznego dokumentu CSS. Atrybuty znacznika:

• charset – definiuje kodowanie znaków we wskazanym zasobie

• href – adres zasobu

• type – określa typ MIME wskazanego zasobu

• href – adres zasobu

• rel – definiuje związek pomiędzy aktualnym, a wskazywanym zasobem. Rodzaje związków:

• stylesheet – zewnętrzny arkusz styli

• alternate – alternatywna wersja dokumentu, często stosowana z atrybutem Lang

• glosssary – słownik

• copyright – prawa autorskie dokumentu

• help – plik z dodatkową pomocą, linkami itp.

• rev – definiuje związek pomiędzy wskazywanym, a aktualnym zasobem

Formatowanie treści dokumentu

W znaczniku <body> umieszczona jest treść dokumenty. W tym miejscu możliwe jest korzystanie z pełnej palety możliwości języka HTML, w szczególności:

• Definiowanie struktury tekstu:

• nagłówki, akapity itp.

• listy wypunktowane i numerowane

• wyróżnianie cytatów, itp.

• Formatowanie tekstu:

• wielkość i kolor tekstu

• podkreślanie, pogrubianie, pochylanie, wyrównanie tekstu do lewej, prawej, środka, lub do obydwu marginesów, itp.


Strona 1-8

• Tabele

• Osadzanie grafiki i innych obiektów

• Odnośniki

• Formularze

Definiowanie struktury tekstu

Definiowanie struktury dokumentu polega na określaniu podziału tekstu na rozdziały, akapity i inne jednostki logiczne dokumentu.

Nagłówki

Znacznik <h1> do <h6> określa nagłówek – tytuł rozdziału. <h1> definiuje nagłówek najwyższego poziomu (dotyczy głównego rozdziału i jest wyświetlany największymi literami), a <h6> najniższego poziomu (jest wyświetlany najmniejszą czcionką). Dobrą praktyką jest umieszczanie co najwyżej jednego nagłówka pierwszego poziomu <h1>.

<h1>To jest nagłówek 1</h1>






Akapity i wiersze

Akapity są podstawową jednostką logiczną podziału dokumenty. HTML nie rozpoznaje białych znaków (spacje, znaki końca linii), traktując je, niezależnie od ich ilości, jak pojedynczą przerwę – odstęp. Zawartość akapitu należy umieścić w specjalnym znaczniki <p>. Znacznik <p> musi zostać zamknięty (</p>).

Przeglądarka sama decyduje, w którym miejscu ma zostać przełamana linia. Użytkownik może wymusić przełamanie za pomocą znacznika <br />.

Listy wypunktowane i numerowane

W wielu dokumentach istnieje potrzeba zaprezentowania fragmentu tekstu za pomocą listy wypunktowanej lub numerowanej. Możliwe jest również tworzenie wielopoziomowych list.

Znacznik <ul> umożliwia utworzenie szkieletu wykazu wypunktowanego. Poszczególne punkty wykazu należy umieszczać między znacznikami <li> i </li>. Standardowo pozycje listy oznaczone są kołem. Do utworzenia listy numerowanej zamiast znacznika <ul> wykorzystuje się znacznik <ol>. Standardowo pozycje listy są numerowane za pomocą liczb arabskich.

Zmiana wyglądu oraz sposobu znakowania listy jest możliwa przy pomocy kaskadowych arkuszy stylów, które poznasz w kolejnym module.

Inne wyróżnienia tekstu

W języku HTML możliwe jest logiczne wyróżnianie pewnych informacji, np. cytatów. Wyróżnienie nie tylko dodaje informacje o strukturze, ale również jest związane z formatowaniem danego fragmentu przez przeglądarkę. Przeglądarki albo zmieniają wygląd zawartości tekstu, albo ignorują dany znacznik nie zmieniając formatowania.

Lista znaczników:

• <em> – wyróżnienie

• <strong> – mocniejsze wyróżnienie


Strona 1-9

• <cite>– zawiera cytowanie lub odnośnik do innego źródła

• <dfn> – zawiera definicję

• <code> – fragment kodu programu komputerowego

• <samp> – zawiera przykładowy wynik działania programu, skryptu, itp.

• <kbd> – określa tekst, który ma wprowadzić użytkownik

• <var> – zawiera zmienną lub argument programu

• <acronym> – zawiera akronim, np. WWW, HTTP, URI, itp.

Osadzanie grafiki i innych obiektów

Grafika oraz inne multimedialne elementy są dzisiaj jedną z najbardziej charakterystycznych wyróżników stron internetowych.

Osadzanie grafiki na stronie

Podstawowa konstrukcja ma następującą postać:

<img src="zrodlo_pliku" alt="tekst">

Atrybut alt służy do wyświetlania tekstu, gdy nie jest możliwe wyświetlenie grafiki.

Atrybuty wymagane:

• src – lokalizacja pliku (URL)

• alt – krótki opis wyświetlany, gdy nie można wyświetlić grafiki

Pozostałe atrybuty opcjonalne są w większości przestarzałe i zamiast nich lepiej jest używać styli CSS.

Osadzanie multimediów na stronie

Do osadzania grafiki służy znacznik <object>. Umożliwia on określenie danych i parametrów obiektu osadzonego w dokumencie HTML wraz z kodem, który może być użyty do wyświetlenie lub manipulacji danymi.

Atrybuty znacznika:

• align – wyrównanie obiektu (top, bottom, left, right)

• archive – lista ładowanych wstępnie zasobów

• border – rozmiar ramki obiektu

• classid – klasa obiektu

• codebase – określa adres bazowy dla classid, data i archive

• codetype – określa typ obiektu

• data – wskazuje adres danych obiektu

• declare – deklaracja obiektu

• height – określa wysokość obiektu

• hspace – pionowy odstęp od obiektu

• name – unikatowa nazwa elementu

• standby – informacja pokazywana w trakcie ładowania obiektu

• type – określa typ danych

• usemap – podaje mapę elementu

• vspace – odstęp poziomy od obiektu

• width – określa szerokość obiektu


Strona 1-10

Grupowanie liniowe i blokowe

Znacznik <span> tworzy uniwersalny zakres liniowy i pozwala nadać mu wspólne atrybuty za pomocą stylu.

Znacznik <div> obejmuje blokiem grupę elementów w dokumencie i pozwala im nadać wspólne atrybuty. Element ten jest kontenerem umożliwiającym dodanie struktury do dokumentu HTML. Najczęściej służy on do logicznego podziału zawartości strony, np. nawigacji, nagłówka czy stopki strony.

Odnośniki

Odnośniki (odsyłacze, hiperłącza, łącza hipertekstowe, odnośniki) są najbardziej charakterystycznym elementem sieci WWW. Dzięki nim można mówić o HTML jako języku hipertekstowym – odnośniki w jednym kontekście do innego kontekstu. Bez odsyłaczy nie byłoby możliwe tworzenie serwisów internetowych, bez nawigacji stałby się on tylko zbiorem niepowiązanych dokumentów lub musiałby zostać przedstawiony na jednej stronie, co jest najczęściej możliwe, chociaż w przypadku dużych portali mało prawdopodobne.

Odnośnik to wskazanie do innego miejsca. Kliknięcie na nim przenosi użytkownika do określonego miejsca. Może to być miejsce na tej samej stronie, w tym samym serwisie, ale równie dobrze może to być strona na drugim końcu świata.

Do utworzenia odnośnika w języku HTML potrzebne są lokalizacja zasobu oraz tekst opisujący zasób. Format najprostszego odnośnika:

<a href="lokalizacja_zasobu">Tekst opisujący zasób</a>

Parametr href (ang. Hypertext Reference) – odnośnik hipertekstowy. Służy do określenia URL zasobu, wskazywanego przez dane połączenie.

Lokalizacja to najczęściej adres URL do zasobu lub nazwa pliku. Lokalizacja może zawierać ścieżkę względną lub bezwzględną.

Ścieżka względna jest podawana względem aktualnego pliku, np.:

<a href="../plik_w_katalogu_nadrzednym">Tekst opisujący zasób</a> <a href="/kat/plik_w_katalogu_podrzednym">Tekst opisujący zasób</a>

Ścieżka bezwzględna jest podawana jako pełny adres internetowy strony.

<a href="http://www.example.com/plik">Tekst opisujący zasób</a>

Połączenie do określonych miejsc w dokumencie

Aby odwołać się do określonego miejsca w dokumencie należy określić zakładkę (kotwicę, etykietę), a następnie wskazać ją w odnośniku.

Aby utworzyć zakładkę należy użyć konstrukcji:

<a name="nazwa_zakladki"> </a>

Możliwe jest utworzenie dowolnej ilości etykiet na stronie. Jest to szczególnie wygodne w przypadku stron o dużej objętości.

Odnośnik do etykiety ma postać:

<a href="strona.html#nazwa_zakladki">Odnośnik do zakładki</a>

lub jeśli odnośnik jest na tej samej stronie co zakładka, to można odnieść się w skróconej formie:

<a href="#nazwa_zakladki">Odnośnik do zakładki</a>


Strona 1-11

Odnośniki do adresu e-mail

Odnośnik do adresu e-mail jest taki sam, jak standardowy odnośnik. Różnica polega na tym, że po kliknięci go nie zostanie otworzona nowa strona, lecz aplikacja do wysyłania listów elektronicznych. Linki do adresów e-mail są szczególnie pomocne dla kontaktu z autorem strony czy biurem obsługi klienta na stronie firmowej.

Odnośnik do adresu e-mail ma postać:

<a href="mailto:adres@serwer">Wyślij do nas list</a>

Tabele

Tabele w języku HTML są podobne do tabel spotykanych w innych dziedzinach życia, umożliwiając przedstawienie danych w uporządkowanej postaci. Dodatkowo umożliwiają układanie danych – tekstu, obrazków, odnośników, formularzy, pól formularza, innych tabel, itp. w wiersze i kolumny komórek. Należy jednak dodać, że współcześnie panuje tendencja odchodzenia od wykorzystywania tabel w charakterze szkieletu strony.

Tabela może zawierać nagłówek zawierający krótki opis zawartości tabeli. Tabel składa się z wierszy, które zawierają komórki. Istnieje możliwość scalania wielu wierszy lub kolumn.

Znacznik <table>

Tabelę rozpoczyna znacznik <table>, a kończy </table>. Znacznik <table> posiada kilka atrybutów. Atrybut width określa szerokość tabeli. Może być ona podana m.in. w pikselach lub jako procent całej szerokości dostępnej dla okna przeglądarki. Przykłady:

<table width="150"> <table width="50%">

Innym atrybutem jest border, który określa grubość ramki. Parametr ten określa w pikselach grubość ramki. Wartość 0 oznacza całkowite wyłączenie ramki.

Dodatkowo możliwe jest określenie odległości pomiędzy komórkami – atrybut cellspacing. Odległość od komórki do jej zawartości określa atrybut cellpadding. Obie wartości określane są w pikselach.

<table border="2" cellspacing="3" cellpadding="3">

Wiersze tabeli

Podstawową jednostką tabeli są wiersze. Każda tabela musi zawierać co najmniej jeden wiersz. Wiersz tabeli reprezentowany jest przez znacznik <tr>.

<table border="2" cellspacing="3" cellpadding="3"> <tr> </tr> </table>

Wiersz tabeli tworzy ramy dla komórek z danymi. Możliwe jest dodanie wielu wierszy do tabeli:

<table border="2" cellspacing="3" cellpadding="3"> <tr> </tr> <tr> </tr> </table>

Komórka tabeli

Komórka tabeli dodaje pionową kolumnę do tabeli. Są one reprezentowane przez znacznik <td>. Wspólnie ze znacznikami <table> oraz <tr>, znacznik <td> stanowi najważniejsze elementy budowy tabeli:

<table width="80%" border="2" cellspacing="3" cellpadding="3"> <tr> <td></td> <td></td>


Strona 1-12

</tr> </table>

Powyższy kod HTML tworzy tabelę przedstawioną poniżej.

Nagłówki tabeli

Nagłówek tabeli określa nagłówek kolumny lub wiersza. Tekst w komórce, która jest nagłówkiem jest pogubiony. Nagłówek tabeli reprezentowany jest przez znacznik <th>.

W przypadku nagłówka wiersza:

<table width="80%" border="2" cellspacing="3" cellpadding="3"> <tr> <th>Lp.</th> <th>Imię</th> </tr> <tr> <td>1</td> <td>Piotr</td> </tr> </table>

W przypadku nagłówka kolumny:

<table width="80%" border="2" cellspacing="3" cellpadding="3"> <tr> <th>Lp.</th> <td>1</td> </tr> <tr> <th>Imię</th> <td>Piotr</td> </tr> </table>

Tytuł tabeli

Często niezbędne jest dołączenie do tabeli jej tytułu. Tytuł powinien zawierać krótki opis wyjaśniający jej treść. Tytuł reprezentowany jest przez znacznik <caption>, który należy umieścić zaraz za znacznikiem <table>, a przed znacznikami <tr>.

<table width="80%" border="2" cellspacing="3" cellpadding="3"> <caption>Tytuł</caption> <tr> <th>Lp.</th><td>1</td> </tr> <tr> <th>Imię</th><td>Piotr</td> </tr> </table>

Scalanie wierszy

Czasem istnieje konieczność scalenia kilku wierszy w jednej komórce. W tym celu należy użyć atrybutu rowspan, podając ile wierszy ma zostać połączonych.

Przykład:

<table border="1" cellpadding="2"cellspacing="2"> <tr> <th rowspan="2" >Nagłowek (scalone 2 wiersze)</th> <td>dane</td> <td rowspan="3" > dane (scalone 3 wiersze)</td>


Strona 1-13

<td> dane</td> </tr> <tr> <td>dane</td> <td>dane</td> </tr> <tr> <th>Nagłowek</th> <td>dane</td> <td>dane</td> </tr> </table>

Scalanie kolumn

Podobnie jak wiersze, można również scalić kolumny. Służy do tego atrybut colspan.

<table border="2" cellpadding="2" cellspacing="2"> <tr> <th>Nagłówek</th> <th>Nagłowek</th> <th colspan="2">Nagłówek (scalne 2 kolumny)</th> </tr> <tr> <td>dane</td> <td colspan="2"> dane (scalone 2 kolumny)</td> <td>dane</td> </tr> <tr> <td colspan="2">dane (scalone 2 kolumny)</td> <td>dane</td> <td>dane</td> </tr>

</table>

Możliwe jest również jednoczesne scalanie wierszy i kolumn:

<table border="2" cellpadding="2" cellspacing="2"> <tr> <th>Nagłówek</th> <th>Nagłowek</th> <th>Nagłówek</th> <th>Nagłówek</th> <th>Nagłówek</th> <th>Nagłówek</th> </tr> <tr> <td>dane</td> <td colspan="2">dane (scalone 2 kolumny)</td> <td rowspan="2" colspan="2">dane (scalone 2 wiersze, 2 kolumny)</td> <td>dane</td> </tr> <tr> <td>dane</td> <td>dane</td> <td>dane</td> <td>dane</td> </tr> </table>


Strona 1-14

Rys. 2 Przykład tabeli

Formularze

Formularz umożliwia pobranie od użytkownika pewnych informacji. Zawiera przycisk umożliwiający wysłanie danych do określonego pliku/aplikacji na serwerze. Przykłady wykorzystania formularza to:

• podanie danych osobowych i adresu email w celu zapisania się na forum

• rezerwacja miejsca wakacji w biurze podróży

• podawanie danych do przelewu w bankowości elektronicznej

• zakup określonych towarów i usług w sklepie internetowym

Formularze są relatywnie proste do tworzenia, przynajmniej z pozycji kodu HTML. Największy problem stanowi przetworzenie wpisanych danych po stronie serwera tak, aby odpowiadały one zamierzeniom projektanta i użytkownika.

Formularz zawarty jest w znaczniku <form>. Ma on dwa atrybuty:

• method – określa metodę, jaką zostaną wysłane dane do serwera. Są to metody protokołu http, takie jak GET i POST.

• action – określa ścieżkę do miejsca, w którym skrypt zostanie przetworzony.

Parametr action może wskazywać nie tylko ścieżkę na serwerze, ale również w prostych przypadkach umożliwia przesyłanie danych z formularza przy użyciu poczty elektronicznej:

<form method="post" action="mailto:adres@serwer?subject=tytuł">

Pola tekstowe

Pola tekstowe są wykorzystywane w wielu przypadkach do pobrania od użytkownika określonych, krótkich fragmentów tekstu, takich jak imię, nazwisko i numeru telefonu. Pole tekstowe jest tworzone przy wykorzystaniu znacznika input z parametrem type="text".

Przykład:

<form method="post" action="Default.aspx"> Imię: <input type="text" /><br /> Nazwisko: <input type="text" /><br /> Telefon: <input type="text" /> </form>

Rys. 3 Przykład formularz

Należy zauważyć, że nie ma możliwości rozróżnienia poszczególnych pól formularz. Do tego celu służą parametry name i id z odpowiednimi wartościami. Wykorzystanie obu parametrów zapewni


Strona 1-15

kompatybilność z wcześniejszymi aplikacjami oraz umożliwi identyfikowanie określonych przestrzeni formularza dla formatowania oraz oprogramowania.

<form method="post" action="Default.aspx"> Imię: <input id="imie" name="imie" type="text" /> <br /> Nazwisko: <input id="nazwisko" name="nazwisko" type="text" /> <br /> Telefon: <input id="telefon" name="telefon"type="text" /> </form>

Kolejnym elementem związanym z polem tekstowym jest określanie rozmiaru pola za pomocą atrybutu size oraz określanie maksymalnej ilości znaków, jaką pole akceptuje za pomocą atrybutu maxlength.

Pole tekstowe umożliwia również ukrywanie wprowadzanych ważnych informacji, takich jak hasła, zamieniając atrybut type="text" na type="password":

Hasło <input id="haslo" name="haslo" type="password" />

Rys. 4 Pole ukryte

Obszar tekstowy

Obszar tekstowy to miejsce, w którym użytkownik strony może wpisać swoje dodatkowe uwagi. Obszar ten umożliwia również wielowierszowe wprowadzanie danych. Jest on tworzony przy pomocy znacznika <textarea> wraz z parametrami rows i cols, określającymi odpowiednio ilość wierszy i kolumn przeznaczonych do wprowadzania tekstu.

<form method="post" action="Default.aspx">Wpisz swoje uwagi:<br /> <textarea id="komentarz" cols="20" rows="20" > </textarea> </form>

Rys. 5 Przykład obszaru tekstowego

Pole opcji i pole wyboru

Pole opcji (przełącznika) jest polem, w którym użytkownik wybiera jedną z dostępnych możliwości. W polu stosowany jest znacznik <input> oraz parametr type="radio".

Do grupowania wartości poszczególnych opcji wykorzystywany jest parametr name, który musi być wspólny dla wszystkich elementów listy. Parametr checked="checked" umożliwia domyślne zaznaczenie danej opcji.

<form method="post" action="Default.aspx"> Podaj swoją płeć<br /> <input id="mezczyzna"name="plec" type="radio" /> Mężczyzna<br /> <input id="kobieta" name="plec" type="radio" /> Kobieta<br /> <input id="brak" name="plec" type="radio" checked="checked" /> Wolę nie podawać<br /> </form>


Strona 1-16

Rys. 6 Przykład pola opcji

Pole wyboru umożliwia dokonanie wyboru kilku opcji jednocześnie, np. zaznaczenie kilku zainteresowań, czy kilku sposobów odpoczynku. W polu stosowany jest znacznik <input> oraz parametr type="checkbox".

<form method="post" action="Default.aspx"> <input type="checkbox" name="zain" id="elektronika"/>elektronika<br /> <input type="checkbox" name="zain" id="fotografia"/>fotografia<br /> <input type="checkbox" name="zain" id="internet"/>internet<br /> <input type="checkbox" name="zain" id="inwestycje"/>inwestycje<br /> <input type="checkbox" name="zain" id="ksiazki"/>ksiazki<br /> <input type="checkbox" name="zain" id="muzyka"/>muzyka<br /> <input type="checkbox" name="zain" id="sport"/>sport<br /> <input type="checkbox" name="zain" id="polityka"/>polityka </form>

Rys. 7 Przykład pola wyboru

Lista rozwijana oraz wyboru

Lista rozwijana służy do tworzenia rozwijanych menu, zawierających kilka opcji. Użytkownik może wybrać jedną z nich. Składnia jest następująca:

<select name="nazwa_listy" size="liczba_wyświetlanych_pozycji" > <option> pierwsza pozycja</option> <option> druga pozycja</option> <option> trzecia pozycja</option> ... </select>

Przeglądarka tworzy listę rozwijaną zawierającą poszczególne elementy zawarte w znaczniku <option>, parametr value umożliwia rozpoznanie wybranego elementu:

<form method="post" action="Default.aspx"> Wybierz ulubioną potrawę:<br /> <select id="potrawa"> <option value="pierogi">Pierogi</option> <option value="slatka">Sałatka warzywna</option> <option value="slimaki">Ślimaki</option> </select> </form>


Strona 1-17

Rys. 8 Przykład listy rozwijanej

Lista wyboru służy do tworzenia do tworzenia menu, zawierających kilka opcji. Możliwe jest wybranie jednej lub kilku z nich. Listę ta tworzy się podobnie do listy rozwijanej dodając atrybut size="wyświetlana wielkość listy". wybór wielokrotny możliwy jest po dodaniu atrybutu multiple="multiple".

<form method="post" action="Default.aspx"> <select id="potrawa" size="5" multiple="multiple"> <option value="pierogi">Pierogi</option> <option value="slatka">Sałatka warzywna</option> <option value="slimaki">Ślimaki</option> </select> </form>

Rys. 9 Przykład listy wyboru

Wysyłanie informacji

Po wykonaniu formularza należy jeszcze zapewnić wysłanie jego zawartości do autora. Sposób wysłania jest określony w atrybutach method i action znacznika <form>. Do wysłania służy znacznik input z atrybutem type="submit". Po kliknięciu tego przycisku przeglądarka wyśle dane (wypełnione pola tekstowe, wybrane opcje itp.) do miejsca zdefiniowanego w znaczniku form.

Często istnieje potrzeba zresetowania całego formularza, służy do tego znacznik input z atrybutem type="reset".

<form method="post" action="Default.aspx"> <input type="reset" /> <input type="submit" /> </form>

Rys. 10 Przyciski formularza - Reset i Submit

Parametr value w obu przypadkach umożliwia dopasowanie wyświetlanego komunikatu na przyciskach:

<form method="post" action="Default.aspx"> <input type="reset" value="Skasuj dane"/> <input type="submit" value="Wyślij"/> </form>


Strona 1-18

Podsumowanie

W tym rozdziale przedstawione zostały podstawy języka HTML. Pokazaliśmy najważniejsze znaczniki, które są wykorzystywane do tworzenia stron internetowych.

Uwagi dla studenta

Jesteś przygotowany do realizacji laboratorium jeśli:

• znasz podstawowe znaczniki HTML

• wiesz jak tworzyć tabelę i jak łączyć wiersze i kolumny

• wiesz jak tworzyć i przesyłać formularze internetowe napisane w języku HTML

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. Bryan Pfaffenberger, Steven M. Schafer, Chuck White, Bill Karow, HTML, XHTML i CSS. Biblia, Helion, 2005

Książka zawiera opis najnowszych standardów związanych z tworzeniem stron WWW – obowiązującej obecnie specyfikacji HTML, CSS oraz XHTML. Przedstawia nowoczesne metodologie tworzenia i testowania witryn WWW oraz ich aktualizowania i modyfikowania.

2. Wempen Faithe, HTML i XHTML Krok po kroku, RM, 2007

Z książki nauczysz się nadawać strukturę stronom WWW, stosując tabele, ramki lub makiety oparte na podziałach. Utworzysz listy wypunktowane i numerowane, aby poprawić przekaz informacji. Będziesz wiedział, jak dodać hiperłącza i paski menu, aby ułatwić nawigację. Dowiesz się, w jaki sposób umieść obrazki, klipy dźwiękowe i wideo na stronach WWW. Wprowadzisz kolory, rozmiary czcionek i różne formatowanie, stosując znaczniki i kaskadowe arkusze stylów. Zbudujesz formularze z przyciskami opcji, polami wyboru i rozwijanymi menu.

3. Jennifer Niederst Robbins, HTML i XHTML. Leksykon kieszonkowy, Helion, 2006

W książce znajdziesz zestawienie znaczników HTML – wraz z atrybutami i ich dopuszczalnymi wartościami – które jest niezwykle przydatne każdemu projektantowi witryn WWW. Autor opisuje najnowsze specyfikacje HTML i XHTML, wskazuje podobieństwa i różnice pomiędzy nimi, a także zawiera praktyczne informacje, dzięki którym Twoja witryna WWW zostanie zaprojektowana zgodnie z rekomendacjami W3C.


Piotr Bubacz

Moduł 2

Wersja 1

Kaskadowe Arkusze Stylów – CSS

Spis treści

Kaskadowe Arkusze Stylów – CSS ........................................................................................................ 1





Przykładowe rozwiązanie ............................................................................................................. 9

Porady praktyczne ..................................................................................................................... 11



Laboratorium podstawowe ................................................................................................................ 14

Problem 1 (czas realizacji 20 min) .............................................................................................. 14


Laboratorium rozszerzone ................................................................................................................. 21

Zadanie 1 (czas realizacji 45 min) ............................................................................................... 21




Piotr Bubacz Moduł 2 ITA-103 Aplikacje internetowe Kaskadowe Arkusze Stylów – CSS

Strona 2-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące kaskadowych arkuszy stylów i zalet wynikających z ich stosowania. Zobaczysz, w jaki sposób używać selektorów i jak utworzyć układ strony wykorzystując pozycjonowanie CSS. Dodatkowo nauczysz się, jak zmienić istniejący dokument HTML wykorzystujący formatowanie przy pomocy tabel, aby był zgodny ze standardem XHTML i przyjazny dla CSS.

Cel modułu

Celem modułu jest przedstawienie możliwości wykorzystania kaskadowych arkuszy stylów do określenia wyglądu dokumentu XHTML, jak również przedstawienie zasad pracy z arkuszami stylów w Visual Studio.



• wiedział czym są i gdzie warto stosować kaskadowe arkusze stylów

• potrafił tworzyć nowe strony przyjazne dla kaskadowych arkuszy stylów

• rozumiał potrzebę przystosowania istniejących dokumentów HTML do wymagań standardu XHTML

Wymagania wstępne

Przed przystąpieniem do pracy z tym modułem powinieneś:

• znać podstawy języka XHTML (patrz: moduł „Wprowadzenie do XHTML”)

• rozumieć zasady grupowania elementów przy pomocy znaczników <div> i <span>

• znać zasady pracy w środowisku Visual Studio, w szczególności tworzenia stron internetowych zgodnych z XHTML


Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu należy zapoznać się z materiałem zawartym w module „Podstawy HTML”.



Strona 2-3



Mając już pewne doświadczenie z językiem HTML, na pewno próbowałeś określić układ elementów na stronie przy pomocy tabel, a jej wygląd przy pomocy znaczników takich jak <i>, <b> czy <font>. Stosując takie podejście prędzej czy później zauważysz jego oczywiste wady. Przy bardziej złożonych stronach kod HTML staje się nieczytelny, a próba zmiany stylu lub układu elementów pociąga za sobą konieczność wprowadzenia poprawek w wielu miejscach w kodzie. Co więcej, jeśli strona, którą tworzysz, jest tylko jedną z wielu stron w serwisie, to zmiany najprawdopodobniej trzeba wprowadzić również w pozostałych dokumentach. Rozwiązaniem tych problemów może być oddzielenie treści dokumentu od jego prezentacji. Niestety język HTML nie wspiera takiej możliwości. Do tego celu powszechnie wykorzystuje się inne narzędzie – kaskadowe arkusze stylów lub w skrócie CSS (ang. Cascading Style Sheets).

O ile tworzenie reguł CSS nie jest trudne, o tyle nauka efektywnego posługiwania się nim może zająć dużo więcej czasu, niż w przypadku języka HTML. Musisz nie tylko wiedzieć, jakie właściwości mają poszczególne elementy HTML, lecz również jak właściwości te są interpretowane przez najpopularniejsze przeglądarki. Ponadto musisz nauczyć się odpowiednio przygotowywać dokumenty HTML i poprawnie pozycjonować elementy na stronie.


Kaskadowe arkusze stylów to mechanizm używany do opisywania wyglądu dokumentów HTML. Wśród głównych zalet wynikających z jego stosowania wymienić można:

• Łatwiejsze zarządzanie wyglądem dokumentów – CSS pozwala grupować informacje o wyglądzie poszczególnych elementów strony, jak również wykorzystywać je wielokrotnie, nawet przez wiele dokumentów.

• Mniejszy rozmiar stron – stosowanie arkuszy stylów pozwala zmniejszyć rozmiar dokumentów HTML i ogólnie ograniczyć ilość danych, jakie musi pobrać użytkownik, by wyświetlić je w przeglądarce – w przypadku, gdy wiele stron wykorzystuje ten sam arkusz CSS, jest on pobierany przez przeglądarkę tylko raz.

• Oddzielenie treści od wyglądu dokumentów – dzięki CSS można oddzielić zawartość stron od ich wyglądu, dzięki czemu ich treść staje się łatwiej dostępna np. dla wyszukiwarek internetowych lub czytników ekranowych, wykorzystywanych przez osoby niewidome.

Reguły CSS

Arkusz CSS stanowi zbiór reguł, które informują przeglądarkę, jak wyświetlać określone elementy na stronie. Każda reguła składa się z dwóch części: tzw. selektora i definicji, którą tworzy zbiór par właściwość-wartość:

selektor { właściwość: wartość[; właściwość: wartość[;...n] ] }

Selektor określa, jakich elementów strony dotyczy reguła, definicja zaś mówi, jakie wartości powinny przyjąć wybrane właściwości tych elementów, takie jak kolor czy styl tekstu. Przykładowo następująca reguła:

h1 { font-family: Arial; font-style: italic; }

określa, że tekst wewnątrz wszystkich elementów h1 na stronie powinien zostać wyświetlony krojem Arial, pismem pochyłym.

Rodzaje selektorów

Selektory to jedne z najważniejszych aspektów CSS. Dzielą się one na kilka rodzajów, z których te najczęściej używane omówimy w kolejnych punktach.


Strona 2-4

Selektor typu

Selektor typu odnosi się do wszystkich elementów określonego rodzaju. Przykładowo reguła:

h1 { font-weight: bold }

zostanie zastosowana dla wszystkich elementów h1 w dokumencie.

Selektor klasy

Selektor klasy odnosi się do wszystkich elementów o określonej wartości atrybutu class. Przykładowo reguła:

.akapit { font-weight: bold; }

zostanie zastosowana dla elementów dowolnego rodzaju, którym przypisano klasę akapit, np.:

<p class="akapit">…</p>

Selektor ID

Selektor ID działa na podobnej zasadzie, co selektor klasy, z tymże wybiera elementy o określonej wartości atrybutu id. Ponieważ wartość tego atrybutu jest unikatowa, selektor tego typu zawsze odnosi się do co najwyżej jednego elementu na stronie. Przykładowo reguła:

#stopka { font-weight: bold; }

zostanie zastosowana dla elementu dowolnego rodzaju posiadającego atrybut id="stopka", np.:

<div id="stopka">…</div>

Łączenie selektorów

By precyzyjniej określić elementy, poszczególne rodzaje selektorów można łączyć ze sobą. Przykładowo reguła:

p.akapit { font-weight: bold; }

zostanie zastosowana wyłącznie dla takich elementów p, którym przypisano klasę akapit.

Definiowanie stylów dla dokumentu HTML

Reguły możemy definiować:

• bezpośrednio w dokumencie HTML, w nagłówku strony:

<head>

…

<style type="text/css">

h1 { color: olive; }

p { color: gray; }

</style>

</head>

• w dokumencie HTML jako wartość atrybutu style wybranych elementów:

<h1 style="color:olive">…</h1>

<p style="color:gray">…</p>

• w zewnętrznym pliku CSS – wymagane jest wskazanie go przy pomocy elementu link , np.:

<head>

…

<link rel="stylesheet" type="text/css" href="style.css" />

</head>


Strona 2-5

Praca z CSS w środowisku Visual Studio 2008

Środowisko Visual Studio udostępnia wizualny edytor reguł CSS (Rys. 2), który można przywołać wybierając z menu Format -> New Style.

Rys. 2 Okno New Style, kategoria Font

Najważniejsze pola w edytorze to:

• Selector – selektor dla reguły.

• Define In – miejsce przechowywania reguły, może być nim nagłówek aktualnej strony lub zewnętrzny arkusz stylów.

• URL – lokalizacja zewnętrznego arkusza stylów.

• Preview – podgląd zdefiniowanego formatowania.

• Description – podgląd definicji reguły.

• Category – lista kategorii, na które podzielone zostały właściwości elementów HTML.

Kategoria Font

W kategorii Font (Rys. 2) znajdują się opcje pozwalające określić sposób wyświetlania tekstu. Przykładowe właściwości:

• font-family – krój pisma

• font-size – stopień pisma

• color – kolor tekstu

Kategoria Block

W kategorii Block (Rys. 3) znajdują się opcje pozwalające określić sposób ułożenia tekstu wewnątrz elementów blokowych.

Rys. 3 Okno New Style, kategoria Block


Strona 2-6

Przykładowe właściwości:

• line-height – odległość między sąsiednimi liniami tekst

• vertical-align – ułożenie tekstu w pionie

• text-align – ułożenie tekstu w poziomie

Kategoria Background

W kategorii Background (Rys. 4) znajdują się opcje pozwalające określić wygląd tła elementu.

Rys. 4 Okno New Style, kategoria Background

Przykładowe właściwość:

• background-color – kolor tła

• background-image – obraz wyświetlany w tle

• background-repeat – powtarzanie obrazu wyświetlanego w tle w pionie i/lub w poziomie

Kategoria Border

W kategorii Border (Rys. 5) znajdują się opcje pozwalające określić wygląd obramowania wokół elementu.

Rys. 5 Okno New Style, kategoria Border

Opcja Same for all umożliwia zastosowanie tych samych ustawień dla wszystkich krawędzi obramowania. Przykładowe właściwości:

• border-style – styl obramowania

• border-width – grubość obramowania

• border-color – kolor obramowania


Strona 2-7

Kategoria Box

W kategorii Box (Rys. 6) znajdują się opcje pozwalające określić marginesy zewnętrzne i wewnętrzne elementów.

Rys. 6 Okno New Style, kategoria Box

Opcja Same for all umożliwia zastosowanie tych samych ustawień dla wszystkich marginesów. Właściwości:

• padding – rozmiar marginesu wewnętrznego

• margin – rozmiar marginesu zewnętrznego

Kategoria Position

W kategorii Position (Rys. 7) znajdują się opcje pozwalające określić rozmiar i położenie elementów.

Rys. 7 Okno New Style, kategoria Position


• position – rodzaj pozycjonowania (statyczne, względne lub bezwzględne)

• width – szerokość elementu

• height – wysokość elementu

• left – położenie lewej krawędzi elementu (zależy od rodzaju pozycjonowania)

• top – położenie górnej krawędzi elementu (zależy od rodzaju pozycjonowania)


Strona 2-8

Kategoria Layout

W kategorii Layout (Rys. 8) znajdują się opcje pozwalające określić zaawansowane pozycjonowanie elementów na stronie.

Rys. 8 Okno New Style, kategoria Layout


• visibility – widoczność elementu

• float – przyciąganie elementu do krawędzi bocznych innych elementów (tzw. pływanie)

• clear – zakaz możliwości przyciągania innych elementów do krawędzi bocznych elementu

Kategoria List

W kategorii List (Rys. 9) znajdują się opcje pozwalające określić wygląd list.

Rys. 9 Okno New Style, kategoria List

Właściwości:

• list-style-type – rodzaj listy (numerowana lub punktowana)

• list-style-image – obrazu używany jako punktor w listach punktowanych

• list-style-position – położenie punktora

Podsumowanie

W tym rozdziale przedstawione zostały najważniejsze pojęcia związane z kaskadowymi arkuszami stylów. Dowiedziałeś się, czym są reguły i jak stosować je do wybranych elementów strony wykorzystując selektory.

Choć do edycji kaskadowych arkuszy stylów wystarczy najprostszy edytor tekstu, Visual Studio udostępnia dużo wygodniejszy, wizualny edytor stylów, wyposażony m.in. w dynamicznie aktualizowany podgląd formatowania i możliwość zarządzania umiejscowieniem reguł.


Strona 2-9

Przykładowe rozwiązanie

Przygotowanie dokumentu HTML przyjaznego dla CSS

Zanim będziemy mogli zdefiniować wygląd elementów na stronie przy pomocy kaskadowych arkuszy stylów, powinniśmy najpierw odpowiednio przygotować dokument HTML. Wyobraźmy sobie, że chcemy przy pomocy HTML i CSS stworzyć stronę o ułożeniu elementów jak na Rys. 10.

Rys. 10 Szkic wyglądu strony

Pierwszym problemem, z jakim musimy sobie poradzić, jest podzielenie strony na główne obszary. Jeśli przyjrzysz się rysunkowi, zauważysz, że można wyodrębnić dwa główne elementy, oznaczone na rysunku pogrubioną linią: nagłówek strony oraz jej treść. Możemy zdefiniować je za pomocą znaczników <div>. Dodatkowo każdemu z nich warto nadać atrybut id, aby można było jednoznacznie je identyfikować. By ułatwić pozycjonowanie, możemy dodać jeszcze jeden, dodatkowy znacznik <div>, który obejmie całą stronę:

<body>

<div id="Strona">

<div id="Naglowek"></div>

<div id="Tresc"></div>

</div>

</body>

Teraz należy przeanalizować zawartość głównych elementów. Rozpoczniemy od nagłówka. Składa się on z trzech głównych elementów: logo, menu oraz obszaru logowania. Postępując według tej samej zasady, co poprzednio, powinniśmy otrzymać:

<div id="Naglowek">

Logo

<div id="Menu">Menu</div>

<div id="ObszarLogowania">Zaloguj</div>

</div>

W analogiczny sposób możemy wyróżnić trzy obszary, w których prezentowana będzie treść strony:

<div id="Tresc">

<div id="PierwszyObszarBoczny">Pierwszy obszar boczny</div>

<div id="DrugiObszarBoczny">Drugi obszar boczny</div>

<div id="ObszarRoboczy">Obszar roboczy</div>

</div>

Możemy teraz podejrzeć tak przygotowany dokument w przeglądarce. Jak łatwo zauważyć, na razie wyglądem strona w ogóle nie przypomina tej z rysunku. Mimo to prace nad kodem HTML możemy praktycznie zakończyć.

Podejście hierarchiczne ułatwia nam zarządzanie wyglądem strony. Zmiana właściwości elementu nadrzędnego powoduje zmianę wszystkich elementów podrzędnych. Podział hierarchiczny może


Strona 2-10

wynikać z dwóch czynników, po pierwsze z logicznego podziału strony, po drugie z podziału strony na elementy podobne.

Definiowanie reguł CSS dla dokumentu – definiowanie ułożenia elementów

W kolejnym kroku powinniśmy utworzyć arkusz stylów (np. plik Style.css) i dołączyć go do dokumentu przy pomocy znacznika <link>. W pliku zdefiniujemy reguły, które pozwolą wyświetlić obok siebie obszary, w których prezentowana jest treść. Aby odwołać się do tych elementów posłużymy się selektorem ID:

#PierwszyObszarBoczny { width:200px; height:300px; float:left; }

#DrugiObszarBoczny { width:200px; height:300px; float:right; }

Zdefiniowaliśmy rozmiar obu elementów oraz przyciąganie elementu do krawędzi bocznych innych elementów (w tym przypadku elementu nadrzędnego <div id="Tresc">). Możemy teraz uruchomić stronę w przeglądarce i zweryfikować poprawność reguł. Obszary boczne zgodnie z oczekiwaniami wyświetlane są przy przeciwległych krawędziach strony.

Teraz zajmiemy się obszarem roboczym (<div id="ObszarRoboczy">). W pierwszym kroku spróbujemy określić jego aktualny zasięg. W tym celu zdefiniujemy dla niego kolor tła, dodając następującą regułę CSS:

#ObszarRoboczy { background-color: #EEE; }

Możemy teraz zapisać plik CSS i odświeżyć stronę w przeglądarce. Jak zauważymy, obszar roboczy jest aktualnie wyświetlany na całą szerokość strony. Powinniśmy odsunąć go od lewej i prawej krawędzi o 200px, aby zrobić miejsce dla obszarów bocznych. W tym celu zastosujemy marginesy. Dodatkowo wprowadzimy marginesy wewnętrzne, aby treść prezentowana w obszarze głównym nie zlewała się z treścią wyświetlaną w pozostałych obszarach. Po zmodyfikowaniu zdefiniowana wcześniej reguła CSS powinna mięć następującą postać:

#ObszarRoboczy { background-color: #EEE;

padding: 50px 20px;

margin: 0 200px; }

Jeśli teraz zapiszemy plik CSS i odświeżymy stronę w przeglądarce, zauważymy, że obszar główny jest wyświetlany tak, jak oczekiwaliśmy.

Definiowanie reguł CSS dla dokumentu – definiowanie wyglądu elementów

Otrzymaliśmy stronę, której elementy są odpowiednio ułożone. W kolejnym kroku określimy wygląd poszczególnych elementów. Rozpoczniemy od zdefiniowania wyglądu elementu na najwyższym poziomie hierarchii. Dla treści strony internetowej takim elementem jest znacznik <body>. Do określenia jego właściwości, w pliku CSS, wykorzystamy selektor typu:

body {

font-family: Verdana;

font-size: 8pt;

color: #000033; }

Określimy teraz nie tylko wygląd tekstu wyświetlanego bezpośrednio w znaczniku <body>, ale również wszystkich znaczników zagnieżdżonych, w tym przypadku wszystkich tekstów na stronie. Zajmiemy się teraz elementami nagłówka.

Określimy właściwości elementu <div id="Menu">. Dla tego elementu określimy inny kolor tła oraz zmniejszymy wyświetlany tekst. W pliku CSS dodajemy następującą regułę:

#Menu {

background-color: #55BBFF;

font-size: 7.5pt; }


Strona 2-11

Dla elementu <div id="ObszarLogowania"> określimy wyrównanie do prawej, inny kolor tła oraz marginesy wewnętrzne. Reguła w pliku CSS będzie miała postać:

#ObszarLogowania {

text-align: right;

background-color: #C3DBEA;

padding: 5px 10px; }

Jeśli teraz zapiszemy plik CSS i odświeżymy stronę w przeglądarce, zauważymy, że wszystkie elementy są wyświetlane zgodnie ze szkicem strony przedstawionym na Rys. 10. Teraz jedyne co pozostało, to dodać treść do naszej nowej strony.

Porady praktyczne

Uwagi ogólne

• Pamiętaj, że Twoje strony powinny wyświetlać się poprawnie we wszystkich najpopularniejszych przeglądarkach internetowych, co ze względu na różnice w interpretacji CSS może być czasem trudne.

• Sprawdzaj zgodność kodu HTML oraz CSS ze standardami przy pomocy walidatorów na stronach W3C. Jeśli Twoja strona spełnia wymagania standardów, to umieść na niej informację o zgodności. Możesz w tym celu wykorzystać kod zawarty na stronach walidatorów W3C.

• Staraj się umieszczać w kodzie CSS komentarze. W ten sposób nawet rok po jego napisaniu będziesz mógł szybko przypomnieć sobie, do czego służą poszczególne reguły.

• Organizuj arkusze stylów, np. dzieląc je na sekcje. Dobra organizacja pliku ułatwia jego modyfikację i przeglądanie w przyszłości.

• Jeśli w regule określasz wartość 0, możesz pominąć jednostkę (np. zamiast 0px możesz napisać 0).

Stosowanie stylów w dokumentach XHTML

• Możliwe jest dobieranie stylów na podstawie atrybutów class i id, jak również definiowanie ich bezpośrednio jako wartość atrybutu style. Najczęściej powinieneś stosować klasy, ponieważ umożliwiają one wielokrotne wykorzystanie tych samych definicji, natomiast zdecydowanie powinieneś unikać stosowania atrybutu style. Jeśli chcesz nadać unikatowy styl jakiemuś elementowi, skorzystaj z atrybutu id.

• Jako wartość atrybutu class możesz podać wiele klas, np. <div class="pierwszy

drugi">. Powinieneś jednak uważać, aby wskazane style nie określały tych samych własności, bo różne przeglądarki mogą odmiennie to zinterpretować.

• W nazwach elementów i klas zawsze używaj słów określających ich znaczenie (np. id="Menu" lub class="ObszarBoczny"), a nie ułożenie na stronie lub wygląd (np. id="LewyObszarBoczny" lub class="NiebieskieTło"). W końcu jedną z największych zalet CSS jest umożliwienie kompletnej zmiany wyglądu stron bez potrzeby modyfikowania dokumentów HTML.

Definiowanie układu elementów na stronie

• Staraj się nie używać tabel do układania elementów. Stosując je utrudniasz dostęp do treści i możliwość zmiany wyglądu strony w przyszłości.

• Układ elementów na stronie można zdefiniować wykorzystując statyczne pozycjonowanie lub pływanie. Oba podejścia mają wady. Pływanie jest trudne do opanowania, a pozycjonowanie ogranicza elastyczność układu strony. O wyborze jednego z nich powinny zdecydować wymagania względem strony.


Strona 2-12

Określanie wielkości pisma

• Wielkość pisma możemy określić m.in. w pikselach, punktach lub firetach (em). Wybór właściwej jednostki jest trudny. Wybierając piksele mamy największą kontrolę nad wyglądem strony, ale blokujemy możliwość zmiany wielkości tekstu w przeglądarce. Problemu tego nie mamy, jeśli zastosujemy firety, jednak wówczas musimy upewnić się, że po zmianie rozmiaru tekstu w przeglądarce strona nadal wygląda tak, jak tego chcemy.

• Rozmiar tekstu można określić wykorzystując wartości symboliczne: xx-small, x-small, small, medium, large, x-large, xx-large oraz smaller i larger. Ich użycie jest jednak niepraktyczne, bowiem nie wiemy dokładnie, jaką wielkość przyjmie tekst wyświetlany w przeglądarce.

Skrócona notacja

Tam, gdzie to możliwe, powinieneś używać skróconej notacji CSS oraz grupować style, np. zamiast:

.styl1 { margin-top: 11px; margin-right: 11px; margin-bottom: 11px;

margin-left: 11px; }

.styl2 { margin-top: 11px; margin-right: 11px; margin-bottom: 11px;

margin-left: 11px; }

powinieneś napisać:

.styl1, .styl2 { margin: 11px; }

Uwagi dla studenta


• rozumiesz zasadę i potrzebę budowania dokumentów XHTML przyjaznych dla CSS

• umiesz posługiwać się selektorami

• umiesz zmienić istniejący dokument w języku HTML na zgodny z XHTML i przyjazny dla CSS

• potrafisz podać przykłady przestarzałych znaczników HTML, które można zastąpić przy pomocy CSS

• umiesz zdefiniować w pliku CSS podstawowe własności związane z wyglądem i położeniem elementu na stronie

• umiesz podać przykład zastosowania CSS, jego wady i zalety

• wiesz, w jaki sposób można określić reguły CSS w Visual Studio 2008



1. Eric A. Meyer, CSS według Erica Meyera. Kolejna odsłona, Helion, 2005

W książce autor prezentuje możliwości CSS na przykładzie różnych projektów prezentując krok po kroku ich rozwiązanie.

2. Dave Shea, Molly E. Holzschlag, Zen stosowania CSS, Helion, 2006

Jest to książka autora witryny CSS Zen Garden. Na przykładzie różnych projektów opisuje on różnorodne aspekty tworzenia stron, m.in. projektowanie, układ, typografia czy efekty specjalne.

3. Working with CSS Overview, http://msdn2.microsoft.com/en-us/library/bb398931.aspx

Na stronie opisano możliwości pracy z CSS w Visual Studio 2008.

4. Cascading Style Sheets, http://www.w3.org/Style/CSS


Strona 2-13

Na stronie znajdziesz wszystkie informacje związane ze standardem CSS.

5. CSS Zen Garden, http://www.csszengarden.com

Na stronie znajdziesz przykłady zastosowania wielu stylów do jednej strony.

6. CSS Vault, http://cssvault.com

Na stronie znajdziesz przykłady zastosowania CSS w różnych projektach.

7. Open Source Web Design, http://www.oswd.org

Na stronie znajdziesz setki gotowych projektów szablonów stron.


Strona 2-14

Laboratorium podstawowe

Problem 1 (czas realizacji 20 min)

Jesteś właścicielem niewielkiej firmy komputerowej wykonującej różnego rodzaju zlecenia. Właśnie dzisiaj przyszedł do Ciebie Twój dobry klient i poprosił o przygotowanie dla niego strony internetowej jego firmy zajmującej się handlem nieruchomościami. Przedstawił Ci swoją koncepcję układu elementów na stronie (Rys. 11) i zaproponował, abyś w oparciu o nią przygotował szablon wyglądu. Ucieszyłeś się i przyjąłeś zlecenie, gdyż dodatkowe pieniądze są zawsze potrzebne, jednak po chwili odkryłeś, że wszyscy Twoi pracownicy są już obłożeni pracą na następnych kilka dni. Postanowiłeś zatem sam wykonać zadanie.


Pamiętaj, że strona musi być zgodna ze standardem XHTML oraz CSS. Powinieneś zweryfikować to za pomocą walidatorów na stronie W3C.

Zadanie Tok postępowania

1. Utwórz nową stronę w Visual Studio 2008

• Otwórz Visual Studio 2008.

• Z menu wybierz File -> New -> Web Site.

• Z listy Visual Studio installed templates wybierz Empty 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. Dodanie strony do projektu. Utworzenie głównych elementów strony

• Wybierz Website -> Add New Item.

• Z listy Visual Studio installed templates wybierz HTML Page.

• W polu Name wpisz Szablon.htm.

• Kliknij OK.

• Zmień typ dokumentu z XHTML 1.0 Transitional na XHTML 1.1, modyfikując pierwszą linię pliku do postaci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

• Zmień tytuł strony na „Strona firmowa”.

• Wewnątrz znacznika <body> dodaj:

<div id="Strona">



</div>

3. Podział głównych

• Wewnątrz znacznika zawierającego nagłówek (id="Naglowek") dodaj:

Logo

Piotr Bubacz ITA-103 Aplikacje internetowe

elementów <div id="Menu">Menu</div>


• Wewnątrz

<div id="PierwszyObszarBoczny">

<div id="DrugiObszarBoczny">

<div id="ObszarRoboczy">Obszar

4. Sprawdzenie wyniku prac

• W oknie

5. Dodanie nowego arkusza stylów

• Wybierz

• Z listy

• W polu

• Kliknij

6. Określenie pozycji w obszarach roboczych

• Przełącz widok strony na

• Wybierz

• W polu

• W górnej częścia

• Z listyleft

• Z listy200

• Kliknij

• Postępuj podobnie z selektorem właściwość

7. Określenie podstawowego wyglądu zawartości strony

• W pliku <body

• Określ właściwości#

• Z listybackgroud

• Z listyUpewnij się, że opcja

• Kliknij

• Otwórz plik Style.css

Zobacz ja

8. Określenie wyglądu pozostałych elementów strony

• Przynastępując

—

—

—

Kaskadowe Arkusze Stylów

Strona 2-15



Wewnątrz znacznika zawierającego treść (id="Tresc"

<div id="PierwszyObszarBoczny">Pierwszy obszar

<div id="DrugiObszarBoczny">Drugi obszar boczny

<div id="ObszarRoboczy">Obszar roboczy</div>

W oknie Solution Explorer kliknij prawym przyciskiem myszy plikSzablon.htm, a następnie wybierz View In Browser

Czy w przeglądarce internetowej strona wygląda takDlaczego nie?

Wybierz Website -> Add New Item.

Z listy Visual Studio installed templates wybierz Style

W polu Name wpisz Style.css.

Kliknij OK.

Przełącz widok strony na Design lub Split.

Wybierz Format -> New Style.

W polu Selector wpisz #PierwszyObszarBoczny.

W górnej części okna z listy Define in wybierz z listy rozwijanej URL wybierz Style.css.

Z listy Category wybierz Layout, a następnie określ właściwośćleft.

Z listy Category wybierz Position, a następnie określ 200 px oraz height: 300 px.

Kliknij OK.

Postępuj podobnie z selektorem #DrugiObszarBoczny

właściwość float na right.

W pliku Style.css standardowo jest już dodany selektor znacznika <body>. Kliknij go prawym przyciskiem myszy i wybierz

Określ właściwości font-family: Verdana, font

#000033.

Z listy Category wybierz Background, a następniebackgroud-color: white.

Z listy Category wybierz Box, a następnie określ Upewnij się, że opcja Same for all jest zaznaczona

Kliknij OK.

Otwórz plik Szablon.htm. W oknie Solution Explorer

Style.css i upuść go w sekcji nagłówka strony za znacznikiem Zobacz jak zmienił się podgląd pliku.

Przy pomocy narzędzi Visual Studio lub w kodzie pliku następujące style:

— #Menu: kolor tła: #55BBFF, wielkość tekstu: 7.5pt

— #ObszarLogowania: wyrównanie tekstu (właściwość prawej, kolor tła #C3DBEA, margines wewnętrznyz góry i dołu 5px, z lewej i prawej 10px.

— #ObszarRoboczy: kolor tła #EEE, margines wewnętrzny (padding) z góry i dołu 50px, z lewej i prawej i dołu 0, z lewej i prawej 200px.

Moduł 2 Kaskadowe Arkusze Stylów – CSS

id="Tresc") dodaj:

bszar boczny</div>

boczny</div>

kliknij prawym przyciskiem myszy plik Browser.

wygląda tak, jak na szkicu?

Style Sheet.

wybierz Existing Style Sheet,

określ właściwość float:

a następnie określ właściwości width:

DrugiObszarBoczny, tylko zmień

standardowo jest już dodany selektor znacznika i wybierz Build Style.

font-size: 8 pt i color:

, a następnie określ właściwość

określ właściwość margin: 0. jest zaznaczona.

Explorer chwyć myszką plik za znacznikiem </title>.

Studio lub w kodzie pliku Style.css określ

7.5pt. (właściwość text-align): do

wewnętrzny (ang. padding)

, margines wewnętrzny (ang. , z lewej i prawej 20px, margines z góry


9. Sprawdzenie wyglądu strony w przeglądarce

• W oknie Szablon.htm

• Strona w przeglądarce powinna wyglądać podobnie

10. Sprawdzenie poprawności na stronie W3C

• Wejdź na stronę dokumentu XHTML

• Wejdź na stronę

11. Dodanie informacji o zgodności ze standardami

• Wewnątrz znacznika zawierającego obszar roboczy (id="ObszarRoboczy"

<p>

</p>

12. Zamiana położenia obszarów bocznych

• W pliku właściwość

• W left

13. Przygotowanie propozycji własnej stylistyki

• Przygotuj strony. Zmień kolory,


Strona 2-16

W oknie Solution Explorer kliknij prawym przyciskiem myszy plik Szablon.htm i wybierz View In Browser.

Strona w przeglądarce powinna wyglądać podobnie

Rys. 12 Wygląd strony po zastosowaniu stylów

Wejdź na stronę http://validator.w3.org i zweryfikuj poprawność dokumentu XHTML.

Czy Twój dokument jest zgodny ze standardemprzeanalizuj błędy i spróbuj je poprawić.

Wejdź na stronę http://jigsaw.w3.org/css-validator

poprawność arkusza CSS.

Czy Twój arkusz stylów jest zgodny ze standardem CSSprzeanalizuj błędy i spróbuj je poprawić.

Wewnątrz znacznika zawierającego obszar roboczy id="ObszarRoboczy") dodaj następujący kod:

<p>

<a href="http://validator.w3.org/check?uri=referer">

<img style="border:0;width:88px;height:31px"

src="http://www.w3.org/Icons/valid-xhtml11

alt="Valid XHTML 1.1" /></a>

<a href="http://jigsaw.w3.org/css-validator/">

<img style="border:0;width:88px;height:31px"

src="http://jigsaw.w3.org/css-validator/images/vcss

alt="Poprawny CSS!" /></a>

</p>

W pliku Style.css w regule z selektorem #PierwszyObszarBoczny


W regule z selektorem #DrugiObszarBoczny zmień właściwość left.

Czy oba obszar zamieniły się miejscami? wykonać, gdyby dokument sformatowany był z użyciem tabel

Przygotuj arkusz CSS zawierający Twoją propozycję nowestrony. Zmień kolory, krój tekstu i inne właściwości


kliknij prawym przyciskiem myszy plik

Strona w przeglądarce powinna wyglądać podobnie jak na Rys. 12.

i zweryfikuj poprawność

zgodny ze standardem XHTML? Jeśli nie, to

validator i zweryfikuj

zgodny ze standardem CSS? Jeśli nie, to

Wewnątrz znacznika zawierającego obszar roboczy

href="http://validator.w3.org/check?uri=referer">

style="border:0;width:88px;height:31px"

xhtml11-blue"

validator/">

dth:88px;height:31px"

validator/images/vcss-blue"

PierwszyObszarBoczny zmień

zmień właściwość float na

Czy oba obszar zamieniły się miejscami? Jakie kroki musiałbyś wykonać, gdyby dokument sformatowany był z użyciem tabel?

CSS zawierający Twoją propozycję nowego wyglądu właściwości.



Akurat wtedy, kiedy skończyłeś ze sobą stronę przygotowaną kilka lat wcześniej i poprosił, abyś dostosował ją do obecnych standardów. Bardzo zależało mu na zachowaniu obecnego wygląz możliwością łatwego wprowadzania zmian w przyszłości. Spojrzałeś w kod i zauważyłeś, że drozmieszczania elementów strony używane są tabele, zaś wygląd definiowany jest przy użyciu przestarzałych znaczników, takich jak trzeba będzie przepisać kod od początku, ale ponieważ klientowi w potodmawia, zgodziłeś się podjąć zadania.


1. Utwórz nową stronę w Visual Web Developer 2008 Express Edition

• Otwórz Visual

• Z menu wybierz

• Z listy

• Z listypliku w

• Z

• Kliknij

2. Dodanie oryginalnej strony do projektu

• Dodaj do projektu ->

• Otwórz stronę klikając Solution

3. Sprawdzenie poprawności dokumentu

• Źródło dokumentu przekopiuj na stronę w zakładce

4. Utworzenie szablonu strony

• Wybierz

• Z listy

• W polu

• Kliknij

• Zamień zawartość pliku na:

<!DOCTYPE html PUBLIC "


<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>Lorem ipsum dolor sit amet</title></head>

<body>


Strona 2-17

(czas realizacji 25 min)

skończyłeś pracę nad szablonem, przyszedł do Ciebie przygotowaną kilka lat wcześniej i poprosił, abyś dostosował ją do obecnych

standardów. Bardzo zależało mu na zachowaniu obecnego wyglądu i układu elementów, jednak możliwością łatwego wprowadzania zmian w przyszłości. Spojrzałeś w kod i zauważyłeś, że d

rozmieszczania elementów strony używane są tabele, zaś wygląd definiowany jest przy użyciu przestarzałych znaczników, takich jak <b>, <i> czy <font>. Uświadomiłeś sobie, że praktycznie trzeba będzie przepisać kod od początku, ale ponieważ klientowi w potodmawia, zgodziłeś się podjąć zadania.

Tok postępowania

Otwórz Visual Web Developer 2008 Express Edition

Z menu wybierz File -> New Web Site.

Z listy Visual Studio installed templates wybierz Empty

Z listy Location wybierz File System, a w polu obok określ lokalizację pliku w dowolnym miejscu na dysku.

listy Language wybierz Visual C#.

Kliknij OK.

Dodaj do projektu istniejący plik StronaGlowna.htm

> Add Existing Item, a następnie wskaż jego lokalizację.

Otwórz stronę klikając dwukrotnie plik StronaGlowna.htm

Solution Explorer.

Źródło dokumentu przekopiuj na stronę http://validator.w3.org

w zakładce Validate by Direct Input.

• Wciśnij przycisk Check.

Ile błędów jest na stronie?

• Z listy Doctype wybierz XHTML 1.1 i wciśnij przycisk

Ile błędów jest wyświetlanych teraz?


Z listy Visual Studio installed templates wybierz HTML

W polu Name wpisz Szablon.htm.

Kliknij OK.

Zamień zawartość pliku na:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"


<html xmlns="http://www.w3.org/1999/xhtml">


<body>

<div id="Strona">

<div id="Naglowek">

<h1></h1>

<h2></h2>

</div>

<div id="Tresc">

<div id="Obszar1">

<div class="Ramka"></div>


<div class="Ramka Ostatnia"></div>

</div>

<div id="Obszar2"></div>


, przyszedł do Ciebie kolejny klient. Przyniósł przygotowaną kilka lat wcześniej i poprosił, abyś dostosował ją do obecnych

du i układu elementów, jednak możliwością łatwego wprowadzania zmian w przyszłości. Spojrzałeś w kod i zauważyłeś, że do

rozmieszczania elementów strony używane są tabele, zaś wygląd definiowany jest przy użyciu . Uświadomiłeś sobie, że praktycznie

trzeba będzie przepisać kod od początku, ale ponieważ klientowi w potrzebie nigdy się nie

Edition.

Empty Web Site.

w polu obok określ lokalizację

StronaGlowna.htm. Wybierz Website

lokalizację.

StronaGlowna.htm w oknie

http://validator.w3.org do pola

i wciśnij przycisk Revalidate.

HTML Page.

//W3C//DTD XHTML 1.1//EN"




</body>

</html>

• Przekopiuj treśszablonu

• Do wnętrza znacznika tabeli

• Do wnętrza znacznika

• Do wnętrza znacznika wiersza tabeli.

• Tekst zapisany stylem pogrubionym umieść wewnątrz znaczników <h3>

• Resztę tekstu umieść wewnątrz znaczników

• Wewnątrz znacznika o <h3>

<img

5. Dodanie nowego arkusza stylów

• Wybierz

• Z listy

• W polu

• Kliknij

6. Określenie podstawowego ułożenia strony

• Do pliku

#Obszar1 { float: left;

#Obszar2 { float: right; width: 200px; }

#Strona { width: 620px; }

#Tresc { float: left;

.Ramka { float: left; width: 200px; }


• Otwórz plik Style.css

• W oknie Szablon.htm

projektowana strona.

8. Określenie wyglądu strony

• Przy pomocy narzędzi Visual Studio lub w kodzie pliku style dla wymienionych

• Dla

—

—

• Dla

—

—

—


Strona 2-18

<div id="ObszarGlowny"></div>

<div id="Obszar3">


<div class="Ramka Ostatnia"></div>

</div>

</div>

<div id="Stopka"></div>

</div>

</body>

</html>

Zauważ, że został zmieniony standardowy typ dokumentu z XHTML 1.0 Transitional na XHTML 1.1.

Przekopiuj treść z pliku StronaGlowna.htm do nowo utworzonego szablonu na podstawie wskazówek poniżej.

Do wnętrza znacznika <h1> przekopiuj tekst z pierwszego wiersza tabeli.

Do wnętrza znacznika <h2> przekopiuj tekst z drugiego wiersza tabeli.

Do wnętrza znacznika o id="Stopka" przekopiuj tekst wiersza tabeli.

Tekst zapisany stylem pogrubionym umieść wewnątrz znaczników <h3>.

Resztę tekstu umieść wewnątrz znaczników <p>.

Wewnątrz znacznika o id="ObszarGlowny", pomiędzy znacznikami <h3> i <p>, dodaj następujący kod:

<img src="Pictures/WebPage.png" alt="Web page" />


Z listy Visual Studio installed templates wybierz Style

W polu Name wpisz Style.css.

Kliknij OK.

Do pliku Style.css dodaj następujące reguły:

#Obszar1 { float: left; width: 620px; }

#Obszar2 { float: right; width: 200px; }

#Strona { width: 620px; }

#Tresc { float: left; width: 620px; }

.Ramka { float: left; width: 200px; }

Otwórz plik Szablon.htm. W oknie Solution Explorer

Style.css i upuść go w sekcji nagłówka strony za znacznikiem

W oknie Solution Explorer kliknij prawym przyciskiem myszy plik Szablon.htm i wybierz View In Browser. Zobacz jak wygląda projektowana strona.

Przy pomocy narzędzi Visual Studio lub w kodzie pliku style dla wymienionych niżej elementów.

Dla elementu body:

— Kolor tła: #708090 — Kolor czcionki: #F5F5F5

Dla elementów h1:

— Rodzinę fontów: Arial, Helvetica, sans-serif — Margines górny: 0 — Wyrównanie: wyśrodkowane


, że został zmieniony standardowy typ dokumentu

do nowo utworzonego

ekst z pierwszego wiersza

przekopiuj tekst z drugiego wiersza tabeli.

przekopiuj tekst z ostatniego

Tekst zapisany stylem pogrubionym umieść wewnątrz znaczników

, pomiędzy znacznikami

src="Pictures/WebPage.png" alt="Web page" />

Style Sheet.

Explorer chwyć myszką plik za znacznikiem </title>.

kliknij prawym przyciskiem myszy plik Zobacz jak wygląda

Przy pomocy narzędzi Visual Studio lub w kodzie pliku Style.css określ


Strona 2-19

• Dla elementów h2:

— Wielkość tekstu: 1em — Styl tekstu: kursywa — Margines: 0

• Dla elementów h3:

— Wielkość fontów: 1em — Styl fontów: pogubienie — Margines: 0

• Dla elementów img:

— Pływanie: do lewej — Margines: 10px 10px 10px 0 — Szerokość: 172px

• Dla elementów p:

— Margines: 0

• Dla elementu o id="Obszar2" dodaj:

— Margines górny: 10px

• Dla elementu o id="Strona" dodaj:

— Margines lewy: auto — Margines prawy: auto

• Dla elementu o id="Tresc" dodaj:

— Margines górny i dolny: 10px — Margines prawy i lewy: 0

• Dla elementu o id=" Obszar3" oraz id="ObszarGlowny":

— Pływanie: do lewej — Margines górny: 10px — Szerokość: 410px

• Dla elementu o id="Stopka" dodaj:

— Styl fontów: pogubienie — Wyrównanie: wyśrodkowane

• Dla elementów klasy Ramka dodaj:

— Margines prawy: 10px

• Dla elementów klasy Ostatnia:

— Margines prawy: 0

• Dla elementów klasy Ikona:

— Obramowanie: 0 — Szerokość: 88px — Wysokość: 31px


• W oknie Solution Explorer kliknij prawym przyciskiem myszy plik Szablon.htm i wybierz View In Browser. Zobacz jak teraz wygląda projektowana strona.


• Strona powinna wyglądać podobnie

10. Sprawdzenie poprawności na stronie W3C

• Wejdź na stronę dokumentu XHTML.

• Wejdź na stronę

11. Dodanie informacji o zgodności ze standardem

• Wewnątrz znacznika

<p>

</p>

12. Przygotowanie propozycji własnej stylistyki

• Przygotuj arkusz CSS zawierający Twoją propozycję nowego wyglądu strony. Zmień kolory, krój tekstu i inne właściwości.


Strona 2-20

Strona powinna wyglądać podobnie do strony StronaGlowna.htm

Wejdź na stronę http://validator.w3.org i zweryfikuj poprawność dokumentu XHTML.

Czy Twój dokument jest zgodny ze standardemprzeanalizuj błędy i spróbuj je poprawić.

Wejdź na stronę http://jigsaw.w3.org/css-validator

poprawność arkusza CSS.

Czy Twój arkusz stylów jest zgodny ze standardem przeanalizuj błędy i spróbuj je poprawić.

Wewnątrz znacznika o id="Stopka" dodaj następujący kod:

<p>

<a href="http://validator.w3.org/check?uri=referer">

<img class="Ikona"

src="http://www.w3.org/Icons/valid-xhtml11

alt="Valid XHTML 1.1" /></a>

<a href="http://jigsaw.w3.org/css-validator/">

<img class="Ikona"

src="http://jigsaw.w3.org/css-validator/images/vcss

alt="Poprawny CSS!" /></a>

</p>

Przygotuj arkusz CSS zawierający Twoją propozycję nowego wyglądu strony. Zmień kolory, krój tekstu i inne właściwości.


StronaGlowna.htm.

i zweryfikuj poprawność

zgodny ze standardem XHTML? Jeśli nie, to

validator i zweryfikuj

zgodny ze standardem CSS? Jeśli nie, to

następujący kod:

href="http://validator.w3.org/check?uri=referer">

xhtml11-blue"

validator/">

validator/images/vcss-blue"

Przygotuj arkusz CSS zawierający Twoją propozycję nowego wyglądu strony. Zmień kolory, krój tekstu i inne właściwości.


Strona 2-21

Laboratorium rozszerzone

Zadanie 1 (czas realizacji 45 min)

Przygotowałeś dla klienta stronę internetową z wykorzystaniem XHTML i CSS. Ten bardzo się ucieszył, że jest ona zgodna ze standardami i można łatwo wprowadzać w niej modyfikacje, a ponieważ zbliża się rocznica powstania jego firmy, zaproponował, abyś z tej okazji przygotował propozycję nowego układu oraz wyglądu strony. Ponieważ nie masz dużego doświadczenia w dziedzinie projektowania, postanowiłeś poszukać inspiracji na jednej z witryn oferujących gotowe rozwiązania. Z pomocą wyszukiwarki trafiłeś na stronę Open Source Web Design (http://www.oswd.org), oferującą darmowe szablony. Spróbuj zaadoptować style z któregoś z projektów do strony przygotowanej w poprzednim zadaniu.


Spółka usługowo-handlowa Kowalski-Sale posiada witrynę internetową wykonaną 4 lata temu. Firma się rozwija i w związku z tym chciałaby odświeżyć wizerunek oraz rozszerzyć informacje na swojej stronie. Niestety nie jest to łatwe, gdyż do zdefiniowania wyglądu i ułożenia elementów zostały użyte tabele i przestarzałe znaczniki. Przeanalizuj dokumenty zawarte w archiwum Kowalski-Sale.zip i opracuj nową wersję strony zgodną ze standardami XHTML i CSS. Przygotuj co najmniej dwie różne wersje układu i wyglądu strony.


Starasz się o świetnie płatną pracę w dużej firmie tworzącej aplikacje internetowe. Jesteś jednym z kilku kandydatów, którzy przeszli do drugiej tury rozmów. Twój przyszły pracodawca postanowił sprawdzić Twoje umiejętności posługiwania się kaskadowymi arkuszami stylów, prosząc Cię o przygotowanie pliku CSS dla strony głównej witryny CSS Zen Garden (http://csszengarden.com).

Podpowiedź: w serwisie znajdują się przykładowe pliki CSS przygotowane przez innych użytkowników. Zobacz, jak został w nich zdefiniowany wygląd strony głównej. Pamiętaj, że w firmie działa system antyplagiatowy!


Jesteś niezależnym projektantem stron internetowych. Twoim nowym zleceniem jest przygotowanie profesjonalnie wyglądającej galerii zdjęć. Twój klient określił następujące wymagania:

• Strona powinna być zgodna ze standardem XHTML 1.1 oraz CSS 2.1.

• Wygląd strony musi być zdefiniowany w zewnętrznym pliku CSS.

• Na głównej stronie galerii ma być wyświetlana lista miniatur zdjęć wraz z odnośnikami do zdjęcia. Każda miniatura musi być umieszczona w wystylizowanej w CSS ramce. Ilość miniatur w wierszu ma być zależna od szerokości okna przeglądarki.

Jako zawartość galerii wykorzystaj wybrane przez siebie zdjęcia umieszczone w serwisie Live Spaces (http://www.spaces.live.com).


Piotr Bubacz

Moduł 3

Wersja 1

Podstawy JavaScript

Spis treści

Podstawy JavaScript ............................................................................................................................. 1











Piotr Bubacz Moduł 3

ITA-103 Aplikacje Internetowe Podstawy JavaScript

Strona 3-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące podstaw języka JavaScript.

Nauczysz się tworzyć kod działający po stronie klienta w przeglądarce.

Poznasz sposoby sprawdzania poprawności wprowadzanych informacji

przez użytkownika.

Cel modułu

Celem modułu jest przedstawienie możliwości wykorzystania języka

JavaScript do tworzenia interaktywnych aplikacji działających po stronie

klienta, jak również przedstawienie możliwości pracy z tym językiem

w Visual Studio 2008.



• wiedział jak tworzyć interaktywne aplikacje działające po stronie

klienta w przeglądarce

• potrafił pisać aplikację w języku JavaScript

• potrafił pracować z językiem JavaScript w Visual Studio 2008

Wymagania wstępne


• znać podstawy języka XHTML (patrz: moduł „Wprowadzenie do

XHTML”)

• znać zasady pracy w środowisku Visual Studio, w szczególności

tworzenia stron internetowych zgodnych z XHTML

• znać podstawy definiowania wyglądu aplikacji w oparciu o style

kaskadowe CSS


Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem

do realizacji tego modułu należy zapoznać się z materiałem zawartym

w module Wprowadzenie do XHTML oraz Kaskadowe Arkusze Stylów – CSS.




Strona 3-3



Mając pewne doświadczenie w tworzeniu stron internetowych zgodnych ze standardem XHTML,

których wygląd definiujemy za pomocą arkusza stylów CSS kolejnym krokiem jest chęć

umieszczenia elementów interaktywnych na stronie. Możemy wykorzystać np. technologię Flash

czy Silverlight, jednak, nie jest to proste zadanie. Potrzebujemy prostego języka, który umożliwia

tworzenie pewnej interakcji z użytkownikiem po stronie klienta w przeglądarce. Umożliwi

sprawdzenie poprawności wpisywanych danych do formularza czy uatrakcyjni Twoją stronę

poprzez rozwijane elementy np. menu. Do tego celu powszechnie wykorzystuje się język JavaScript.


JavaScript jest skryptowym, interpretowanym językiem o składni podobnej do języka C. Aplikacje

napisane w tym języku są wykonywane po stronie klienta. Zaletą tego rozwiązania jest

natychmiastowe działanie, dzięki czemu strony wydają się funkcjonować szybciej. Możliwe jest

również osiąganie pewnych dodatkowych funkcjonalności od wyświetlania okien dialogowych po

zaawansowane aplikacje AJAX.

Umieszczanie kodu JavaScript

Kod aplikacji możemy umieszczać w stronie lub w zewnętrznym pliku. Możemy również odwoływać

się do wielu plików równocześnie, co ułatwia nam tworzenie i korzystanie z bibliotek funkcji.

Umieszczanie kodu JavaScript na stronie

Kod aplikacji na stronie HTML należy umieścić w znacznikach scripts:

<script type="text/javascript"> // Tutaj umieszczamy kod aplikacji </script>

Na stronie możemy umieścić więcej niż jeden blok scripts praktycznie w dowolnym miejscu,

najczęściej dla łatwego odnajdowania kodu umieszczany on jest w nagłówku pliku – znaczniku

head. Jeśli jednak skrypt tworzy dynamiczną zawartość należy umieścić go w miejscu, w którym ta

zawartość ma się pojawić.

Umieszczanie kodu JavaScript w zewnętrznych repozytoriach

Tworząc aplikacje w języku JavaScript możemy budować bibliotekę funkcji lub korzystać z innych

rozbudowanych bibliotek. Repozytorium jest umieszczane w zewnętrznych plikach tekstowych,

najczęściej z rozszerzeniem js. Dołączmy je do aplikacji podobnie jak skrypt podając w właściwości

src ścieżkę dostępu do pliku.

<script type="text/javascript" src="biblioteka.js"></script>

Przeglądarka po napotkaniu takiego znacznika zatrzyma wykonywanie strony aż do załadowania

zewnętrznego pliku, dlatego najlepiej jest pododawać taką informację w nagłówku strony.

Obsługa wejścia i wyjścia

W przypadku aplikacji internetowych jednym z najważniejszych elementów jest wyświetlanie

i pobieranie informacji. W tym względzie język JavaScript udostępnia kilka możliwości począwszy od

pisania na stronie, poprzez okna dialogowe, aż po wyświetlanie kodu HTML w dowolnym

elemencie.

Pisanie na stronie

Możliwe jest umieszczenie dowolnego napisu na stronie. W tym celu wykorzystujemy polecenie:

document.writeln(napis)



Strona 3-4

gdzie napis jest ciągiem znaków wyświetlonym na stronie. To polecenie powinno być wykorzystane

jedynie podczas tworzenie strony. Użycie tego polecenie podczas działania strony spowoduje

w większości przeglądarek usunięcie strony i wypisanie jedynie podanego ciągu znaków.

Przykładowy kod wykorzystujący to polecenie:

<script type="text/javascript"> document.writeln("Witaj świecie"); </script>

Podczas renderowania strony w przeglądarce napis pojawi się dokładnie w miejscu jego użycia.

Okna dialogowe

Kolejną możliwością wyświetlania komunikatów są okna dialogowe. Jeśli wyświetlimy okno

dialogowe aplikacja zatrzyma wykonanie skryptu aż do momentu kiedy użytkownik kliknie OK.

Przykład użycia:

<script type="text/javascript"> alert("Witaj świecie"); </script>

Użycie tej metody powinniśmy ograniczyć do niezbędnego minimum. Wyskakujące okna dialogowe

są raczej negatywnie odbierane przez użytkowników.

Wyświetlanie kodu HTML w dowolnym elemencie

Kolejną możliwością jest dynamiczne wyświetlanie kodu HTML w dowolnym elemencie na stronie.

Każdy element na stronie może posiadać właściwość ID jednoznacznie go identyfikującą.

Wykorzystujemy ją nie tylko przy definiowaniu stylów css, ale również przy odwoływaniu się do

elementu w języku JavaScript. Przy pomocy konstrukcji:

document.getElementById(idElementu)

możemy jednoznacznie odwołać się do elementu o id=idElementu. Następnie możemy odwoływać

się do właściwości takiego elementu. Najpopularniejsze właściwości to:

• innerHTML – umożliwia określenie kodu HTML który zostanie umieszczony w elemencie

• innerText – umożliwia określenie ciągu znaków który zostanie umieszczony w elemencie

• className – umożliwia określenie klasy CSS użytej do prezentacji elementu.

Przykład użycia:

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> .wyroznienieCzerwone { color: Red; font-weight: 600; } </style> </head> <body> <div id="nazwa"></div> <script type="text/javascript"> document.getElementById("nazwa").innerHTML = "Witaj świecie"; document.getElementById("nazwa").className = "wyroznienieCzerwone"; </script> </body> </html>

Zawartość elementu, w tym przypadku div o id="nazwa" może zostać zmieniona w momencie

ładowania strony.



Strona 3-5

Pobieranie informacji od użytkownika

Najprostszą metodą komunikacji jest wciśnięcie przycisku lub innego elementu na stronie. Każdy

element na stronie umożliwia obsługę zdarzenia kliknięcia za pomocą właściwości onclick.

Podajemy w niej jako parametr nazwę funkcji która zostanie wywołana. Zmieniając zawartość body

z powyższego przykładu otrzymujemy:

<div id="nazwa" onclick="zmien()"></div> <script type="text/javascript"> document.getElementById("nazwa").innerHTML = "Witaj świecie"; function zmien() { document.getElementById("nazwa").innerHTML = "Witaj ważny świecie!"; document.getElementById("nazwa").className = "wyroznienieCzerwone"; } </script>

Po kliknięciu na napis Witaj świecie pojawia się na czerwono napis Witaj ważny świecie. Kod

umieszczony w znacznikach jest wykonywany od razu, natomiast kod umieszczony w funkcji

dopiero po jej wywołaniu po kliknięciu na aktywną zawartość.

Kolejną możliwością pobierania informacji od użytkownika są pola tekstowe. Fragment strony

umożliwiający wyświetlenie w miejscu div id="wynik" informacji wpisanej w kontrolce input o

id="dane".

<input id="dane" type="text" /> <input type="button" value="Wyświetl" onclick="Wyswietl()" /> <div id="wynik" ></div> <script type="text/javascript"> function Wyswietl() { document.getElementById("wynik").innerHTML = "Wpisałeś " + document.getElementById("dane").value; } </script>

Jak wynika z powyższego przykładu konstrukcja document.getElementById służy nie tylko do

określania właściwości ale również do ich pobierania.

Inną możliwością jest przekazanie do funkcji formularza i odwoływanie się do elementów przy

pomocy właściwości value. W przypadku formularza przypisanie powyższe będzie miało postać:

document.getElementById("wynik").innerHTML= "Wpisałeś " + form.imie.value ;

Zdarzenia w JavaScript

W poprzednim rozdziale wprowadziliśmy pojęcie obsługi zdarzeń w JavaScript. Zdarzenie to inaczej

zajście jakiejś sytuacji np. kliknięcie myszką, przesuwanie kursora myszki nad obiektem lub

wpisywanie treści do kontrolki. Metoda obsługi zdarzenia to w języku JavaScript funkcja, która jest

wywoływana w momencie wystąpienia określonego zdarzenia. Listę najważniejszych zdarzeń jakie

są możliwe do obsłużenia w tym języku przedstawia Tab. 1.

Tab. 1 Lista najważniejszych zdarzeń w języku JavaScript

Zdarzenie Opis

onChange Zawartość elementu uległa zmianie.

onClick Użytkownik kliknął na tym elemencie.

onDblClick Użytkownik kliknął dwukrotnie na tym elemencie.

onFocus Użytkownik wybrał dany element.

onKeyDown Użytkownik nacisnął klawisz.

onKeyPress Użytkownik nacisnął lub zwolnił klawisz.



Strona 3-6

onKeyUp Użytkownik zwolnił klawisz.

onMouseDown Użytkownik wcisnął przycisk myszki.

onMouseOut Użytkownik przesunął kursor myszki poza element.

onMouseOver Użytkownik przesunął kursor myszki poza element.

onSubmit Użytkownik wcisnął przycisk wysyłający dane z formularza.

Przepisywanie treści z jednej kontrolki do drugiej można również obsłużyć za pomocą zdarzenia

onKeyUp:

<input id="dane" type="text" onKeyUp="Wyswietl()" /> <div id="wynik" ></div> <script type="text/javascript"> function Wyswietl() { document.getElementById("wynik").innerHTML = "Wpisałeś " + document.getElementById("dane").value; } </script>

Co ciekawe nie trzeba nic zmieniać w funkcji Wyswietl.

Zmienne

Język JavaScript nie jest językiem silnie typowanym, co znaczy, że nie musimy przejmować się

typem zmiennych. Możemy przypisać do zmiennej daną dowolnego typu, a następnie poprzez

ponowne przypisanie zmienić nie tylko zawartość, ale również typ przechowywanej informacji, co

nie jest polecane, bo w czasie wykonywania aplikacji nie wiadomo jakiego typu jest dana zmienna.

Nazwa zmiennej nie może być słowem zarezerwowanym, zaczynać się od liczby lub symbolu innego

niż $ lub _. Należy również unikać nazw zmiennych, które są takie same jak nazwy elementów

HTML.

Zmiennymi mogą być w języku JavaScript również funkcje. Możliwe jest następujące przypisanie:

var mojaFunkcja = function() { return "Jestem sobie funkcją!"; }

Po zdefiniowaniu takiej funkcji może ona być przekazana jako argument do innej funkcji lub

przypisana do innej zmiennej tak, jak ciąg znaków, tablica czy inny obiekt JavaScript. Ogólnie

funkcje użyte bez nawiasów są traktowane jak zmienne: mogą być przekazywane do innych funkcji

i można do nich przypisać dowolne wartości. Użycie nawiasów wywołuje działanie funkcji

i przekazuje wartość zwrotną.

Zmienne mogą być deklarowane ze słowem kluczowym var lub bez niego. W przypadku, kiedy

użyjemy tego słowa zmienne są widoczne tylko wewnątrz funkcji w której są zdefiniowane. Jeśli

zadeklarujemy (przypisując po raz pierwszy wartość) jakąś zmienna bez tego słowa kluczowego, to

zmienna ma zasięg globalny.



Strona 3-7

Operatory

Operatory arytmetyczne

Operatory arytmetyczne zostały przedstawione w Tab. 2.

Tab. 2 Operatory arytmetyczne w JavaScript

Operator Opis

+ Dodawanie – również konkatenacja ciągów znaków

- Odejmowanie

* Mnożenie

/ Dzielenie

% Reszta z dzielenia

++ Inkrementacja przed lub po

-- Dekrementacja przed lub po

Operatory inkrementacji i dekrementacji zachowują się podobnie jak w języku C. Jeśli występują

przed zmienną to operacja następuje natychmiast, jeśli po zmiennej, to operacja następuje po całej

linii kodu. Przykład:

var x = 1; var y = x++; // y=1, x=2 var z = ++x; // z=3, x=3

Operatory logiczne

Operatory logiczne zostały przedstawione w Tab. 3.

Tab. 3 Operatory logiczne

Operator Opis

= Przypisania x=5; // przypisuje 5 do zmiennej x

== Równości, czy x==5?

=== Identyczności, x===5 czy x ma wartość 5 i czy jest liczbą?

!= Nie równe

!== Nie identyczne

! Negacja

|| Lub (OR)

&& I (AND)

< Mniejsze niż

<= Mniejsze niż lub równe

> Większe niż

>= Większe niż lub równe



Strona 3-8

Język JavaScript umożliwia porównanie nie tylko równości (==) ale również identyczności (===). Przy

porównaniu równości porównanie jest dokonywane bez sprawdzania typu, zatem 5=="5". Przy

sprawdzaniu identyczności sprawdzana jest nie tylko wartość, ale i typ zmiennych.

Sterowanie

W każdym języku programowania instrukcje sterujące określają kolejność wykonywania obliczeń.

Instrukcja warunkowa if

Instrukcję if stosuje się przy podejmowaniu decyzji. Formalnie możemy ją zapisać jako:

if (wyrazenie) instrukcja_1 else instrukcja_2

Jeśli wyrażenie wyrazenie jest spełnione, to wykonywana jest instrukcja_1 w przeciwnym

przypadku wykonywana jest instrukcja_2.

Instrukcja warunkowa switch

Instrukcja switch służy do podejmowania decyzji wielowariantowych, w których sprawdzana się,

czy wartość pewnego wyrażenia pasuje do jednej z kilku całkowitych stałych wartości, jeśli tak, to

przy pomocy instrukcji break następuje wyjście z porównania. Formalnie możemy ją zapisać jako:

switch (wyrazenie) { case wyrazenie_stale_1: instrukcja_1; break; case wyrazenie_stale_2: instrukcja_2 ; break; default: instrukcja_3; }

Instrukcja następująca po słowie default (w tym przypadku instrukcja_3) zostanie wykonana,

jeśli wyrażenie nie spełniło żadnego z wyrażeń stałych.

Pętle

Pętle umożliwiają powtórzenie pewnych instrukcji dopóki nie zostanie spełniony określony

warunek.

Jedną z pętli dostępnych w języku JavaScript jest pętla for. Formalnie możemy ją zapisać jako:

for (stanPoczatkowy; warunekZakonczenia; zmiany) lista_instrukcji

Na początku zostanie ustalony stan początkowy zdefiniowany w stanPoczatkowy. Następnie

pętla będzie wykonywana aż do spełnienia warunku określonego w warunekZakonczenia. Przy

każdej iteracji pętli będą wykonywane operacje umieszczone w zmiany.

Bardzo pomocną pętlą jest pętla for/in. Pętla ta umożliwia przeglądanie kolekcji obiektów – jest

podobna do pętli foreach w języku C#. Formalnie możemy ją zapisać jako:

for (var element in kolekcja) lista_instrukcji

gdzie kolekcja jest kolekcją obiektów, a element jest poszczególnym (kolejnym) elementem w

kolekcji podczas jej przeglądania.

Kolejną pętlą jest pętla while. Umożliwia ona wykonywanie ciągu instrukcji aż do spełnienia

określonego warunku sprawdzanego na początku działania pętli. Formalnie możemy ją zapisać jako:

while (warunekKoncowy) lista_instrukcji

Ponieważ warunek sprawdzany jest na początku pętla ta może się nie wykonać ani razu.



Strona 3-9

Pętlą podobną jest pętla do-while. W tej pętli najpierw następuje przetwarzanie a później

sprawdzenie warunku. Formalnie możemy ją zapisać jako:

do { lista_instrukcji } while (warunekKoncowy);

Praca z JavaScript w Visual Studio 2008

Nowości wprowadzonymi do Visual Studio w wersji 2008 są IntelliSense i debugowanie dla języka

JavaScript.

InteliSens to automatyczne, kontekstowe uzupełnianie – podpowiadanie kodu i konstrukcji

językowych dostępne m.in. w VisualStudio. Dotychczas ta technologia nie wspierała języka

JavaScript. Teraz mamy możliwość podejrzenia listy możliwych poleceń, jak również argumentów

funkcji (Rys. 2).

Rys. 2 Przykład użycia technologii IntelliSense w VisualStudio dla języka JavaScript

Visual Studio umożliwia łatwe debugowanie aplikacji JavaScript. Możemy w dowolnym miejscu w

kodzie ustawić punkt przerwania (breakpoint) i uruchamiać aplikację krok po kroku. Możliwe jest

również, w oknie Watch, przeglądanie i edycja właściwości dowolnych zmiennych i obiektów ().

Rys. 3 Przykład przerwania wykonania aplikacji oraz podgląd obiektu form



Strona 3-10

Szczegółowe informacje o możliwościach pracy z IntelliSense i debugowaniem w Visual Studio

możemy znaleźć na blogu Scott Guthrie umieszczonego w dodatkowych źródłach informacji.

Podsumowanie

W tym rozdziale przedstawione zostały podstawy języka JavaScript oraz wprowadzenie do pracy

z tym językiem w VisualStudio 2008.

Uwagi dla studenta


• umiesz dodawać kod JavaScript do strony HTML

• potrafisz napisać prostą aplikację w JavaScript

• wiesz, co umożliwia IntelliSense i jak uruchomić debugowanie w Visual Studio 2008

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.


1. Scott Guthrie, VS 2008 JavaScript Intellisense - ScottGu's Blog

http://weblogs.asp.net/scottgu/archive/2007/06/21/vs-2008-javascript-intellisense.aspx

Na blogu autor prezentuje możliwości technologii Intellisense w języku JavaScript.

2. Scott Guthrie, VS 2008 JavaScript Debugging - ScottGu's Blog,

http://weblogs.asp.net/scottgu/archive/2007/07/19/vs-2008-javascript-debugging.aspx

Na blogu autor prezentuje możliwości debugowania aplikacji napisanych w języku

JavaScript.

3. Danny Goodman, JavaScript. Biblia, Helion

W książce znajdziesz wszystko, co jest ważne przy tworzeniu aplikacji w języku

JavaScript. Na prawie 1500 stronach autor umieścił prawie wszystko co chciałbyś

wiedzieć o tym języku.

4. Shelley Powers, JavaScript. Wprowadzenie, Helion

W książce autor przedstawił praktyczne wprowadzenie do języka JavaScript.

Z książki nauczysz się przechwytywać zdarzenia zachodzące w oknie przeglądarki,

sprawdzać dane wprowadzane przez użytkowników do formularzy na stronach

WWW oraz korzystać z plików cookie. Poznasz obiektowy model dokumentu

(DOM), technologię AJAX i dodatkowe biblioteki.



Strona 3-11



Jesteś właścicielem niewielkiej firmy i Twój pracownik przygotował prostą ankietę w języku HTML

umożliwiającą pobranie od użytkownika podstawowych informacji dotyczących imienia, adresu,

wzrostu i zakresu cen. Ankieta została przedstawiona na Rys. 4.

Rys. 4 Ankieta

Niestety klient zażyczył sobie aby dodać sprawdzenie danych po stronie przeglądarki:

• Pola wymagane:

• Imie

• E-mail

• Cena od i do

• Sprawdzenie poprawności wpisanych wartości dla pól:

• E-mail (e-mail w formacie [email protected])

• Kod pocztowy (kod odpowiedni dla naszego kraju)

• Wzrost (zakres od 40 do 250 cm)

• Wartości w polach od i do wpisane odpowiednio

Twoim zadaniem jest przygotowanie odpowiednich skryptów w języku JavaScript umożliwiających

spełnienie oczekiwań klienta.


1. Utwórz nową

stronę w Visual

Studio 2008

Express Edition




• Z listy Location wybierz File System, a w polu obok określ lokalizację dla

pliku w dowolnym miejscu na dysku.

• Kliknij OK.



Strona 3-12

2. Dodaj do

projektu

utworzone przez

pracownika pliki

• Wybierz Website->Add Existing Item a następnie wskaż plik

Ankieta.htm.

• Podobnie dodaj plik Style.css.

• Wybierz prawym przyciskiem myszy plik Ankieta.htm i wybierz View in

Browser.

3. Dodaj nowy

plik, który będzie

zawierał kod

sprawdzający

• Wybierz Website->Add New Item a następnie w oknie Add New Item:

— W obszarze Templates wybierz JScript File

— W polu Name wpisz Walidacja.js

• Otwórz plik Ankieta.htm i z okna Solution Explorer przeciągnij plik

Walidacja.js do środka znacznika head na stronie.

• Zapisz zmiany.

4. Dodanie

funkcji walidującej

formularz i

sprawdź, czy

wymagane w

zadaniu pola są

wypełnione

• Do pliku Walidacja.js wpisz następujący kod:

function sprawdz ( form ) { if (form.imie.value == "") { alert( "Proszę wprowadzić imię." ); form.imie.focus(); return false ; } if (form.email.value == "") { alert( "Proszę wprowadzić adres email." ); form.email.focus(); return false ; } if (form.cenaOd.value == "") { alert( "Proszę wprowadzić wartość od." ); form.cenaOd.focus(); return false ; } if (form.cenaDo.value == "") { alert( "Proszę wprowadzić wartość do." ); form.cenaDo.focus(); return false ; } return true ; }

• W pliku Ankieta.htm do znacznika form dodaj właściwość

onsubmit="return sprawdz(this)" tak, aby znacznik wyglądał jak

poniżej

<form name="ankietaSklepu" onsubmit="return sprawdz(this)">

• Zapisz oba pliki i otwórz plik Ankieta.htm w przeglądarce. Sprawdź, czy

możesz wysłać formularz (wcisnąć przycisk Wyślij) bez wypełnienia pól

wymaganych.

5. Sprawdź

poprawność

adresu e-mail

• W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje adresEmail

sprawdzającą przy pomocy wyrażenia regularnego poprawność

wpisanego adresu E-mail wpisz:

function adresEmail( adres ) { var regex = /^[a-zA-Z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/; return regex.test(adres); }

• W funkcji sprawdz powyżej linii return true wpisz:

if (!adresEmail(form.email.value)) { alert( "Proszę wprowadzić poprawny adres email \n w formacie: [email protected]." ); form.email.focus(); return false ; }



Strona 3-13

• Zapisz plik Walidacja.js i otwórz plik Ankieta.htm w przeglądarce.

Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij

wypełniając pole E-mail w złym formacie.

6. Sprawdź

poprawność kodu

pocztowego

• W pliku Walidacja.js poniżej funkcji sprawdz dodaj funkcje

kodPocztowy

function kodPocztowy( kod ) { var regex = /^[0-9]{2}\-[0-9]{3}$/; return regex.test(kod); }


if (!kodPocztowy(form.kodPocztowy.value)) { alert( "Proszę wprowadzić poprawny kod pocztowy." ); form.kodPocztowy.focus(); return false ; }



wypełniając pole Kod pocztowy w złym formacie.

7. Sprawdź

poprawność

wpisanej wartości

w polu Wzrost


sprawdzWzrost. Dodatkowo dodaj funkcje pomocniczą liczbaCalkowita.

function liczbaCalkowita( liczba ) { var regex = /^[\-]{0,1}[0-9]{1,8}$/; return regex.test(liczba); } function sprawdzWzrost( liczba ) { if (!liczbaCalkowita(liczba)) { return false ;} var wzrost=parseInt(liczba); if((wzrost<40) || (wzrost>250)) {return false;} return true; }


if (!sprawdzWzrost(form.wzrost.value)) { alert( "Proszę wprowadzić poprawny wzrost w cm. (zakres 40-250cm)" ); form.wzrost.focus(); return false ; }



wypełniając pole Wzrost w złym formacie.

8. Sprawdź

poprawność

wpisanych

wartości w polach

Od i Do


sprawdzOdDo przyjmującą dwa parametry cenaOd i cenaDo

function sprawdzOdDo( cenaOd, cenaDo) { if (!liczbaCalkowita(cenaOd)) { return false ;} if (!liczbaCalkowita(cenaDo)) { return false ;} var zakres=parseInt(cenaDo)-parseInt(cenaOd); if(zakres<0){return false;} return true; }


if (!sprawdzOdDo(form.cenaOd.value,form.cenaDo.value)) { alert( "Proszę wprowadzić poprawny zakres cenowy" ); form.wzrost.focus(); return false ; }



Strona 3-14



wypełniając pole od i do wartościami innymi niż liczba oraz umieszczając

w polu od większą wartość niż w polu do.


Zbliża się termin oddania projektu dla ważnego klienta, gdy nagle okazuje się, że brakuje istotnego

elementu jakim jest formularz rejestracji nowego użytkownika na stronie. Formularz ma zawierać

jedynie trzy pola nazwa i dwa razy hasło, jednak klient zażyczył sobie następującą funkcjonalność

realizowaną w przeglądarce:

• nazwa użytkownika ma mieć co najmniej 5 znaków, nie więcej jednak jak 10 i może zawierać

tylko litery

• hasło ma mieć co najmniej 7 znaków i ma być wyświetlana informacja o sile hasła.

Dodatkowo hasło powinno posiadać możliwość określenia poziomu jego zabezpieczenia – podczas

tworzenia użytkownik ma być powiadamiany o sile hasła. Wszystkie informacje mają pojawiać się

obok pola do wpisywania.


1. Utwórz nową

stronę w Visual

Studio 2008

Express Edition






• Kliknij OK.

2. Dodaj do

projektu

utworzone przez

pracownika pliki

• Wybierz Website->Add Existing Item a następnie wskaż plik

Rejestracja.htm.

• Podobnie dodaj plik StyleRej.css.

• Wybierz prawym przyciskiem myszy plik Rejestracja.htm i wybierz View

in Browser.

3. Umieść na

formularzu pola

do których będą

wpisywane

informacje o

błędach

• Otwórz stronę Rejestracja.htm za polem input o właściwości

name="nazwa" umieść następujący znacznik:

<span id="zlaNazwa"></span>

• Za polem input o właściwości name="haslo" umieść następujący

znacznik:

<span id="opisHasla"></span>

• Za polem input o właściwości name="haslo2" umieść następujący

znacznik:

<span id="zgodneHasla"></span>

• Zapisz zmiany.

4. Dodaj styl do

wyświetlania

informacji o

błędach na

stronie

• Do pliku StyleRej.css dodaj następujący styl:

.wyroznienieCzerwone{ padding-left:10px; color:Red; font-weight:600; }



Strona 3-15

5. Sprawdź liczbę

znaków w nazwie

użytkownika i

haśle

• Wybierz Website->Add New Item a następnie w oknie Add New Item:

— W obszarze Templates wybierz JScript File

— W polu Name wpisz Rejestracja.js

• Otwórz plik Rejestracja.htm i z okna Solution Explorer przeciągnij

dodany plik do środka znacznika head na stronie.

• W pliku Rejestracja.htm do znacznika form dodaj właściwość

onsubmit="return sprawdz(this)".

• Zapisz zmiany.

• W pliku Rejestracja.js dodaj następujący kod:

function sprawdz (form){ var user=form.nazwa.value; if ((user.length<5) || (user.length>10)) { document.getElementById("zlaNazwa").innerHTML = "Nazwa użytkownika może mieć od 5 do 10 liter"; document.getElementById("zlaNazwa").className = "wyroznienieCzerwone"; form.nazwa.focus; return false; } else { document.getElementById("zlaNazwa").innerHTML = "";} if (form.haslo.value.length < 7) { document.getElementById("opisHasla").innerHTML = "Proszę wprowadzić hasło co najmniej 7 literowe."; document.getElementById("opisHasla").className = "wyroznienieCzerwone"; form.haslo.focus(); return false ; } return true; }

• Zapisz plik Rejestracja.js i otwórz plik Rejestracja.htm w przeglądarce.

Sprawdź, czy możesz wysłać formularz (wcisnąć przycisk Wyślij. Wpisz

nazwę użytkownika i hasło zawierające odpowiednią liczbę znaków.

6. Sprawdź znaki

w nazwie

użytkownika

• W pliku Rejestracja.js w funkcji sprawdz powyżej linii return true

dodaj następujący kod:

if (!((user.match(/[a-z]/)) || (user.match(/[A-Z]/)))) { document.getElementById("zlaNazwa").innerHTML = "Nazwa użytkownika zawierać tylko litery"; document.getElementById("zlaNazwa").className = "wyroznienieCzerwone"; form.nazwa.focus; return false; } else { document.getElementById("zlaNazwa").innerHTML = ""; }



nazwę użytkownika zawierające inne znaki niż małe czy duże litery.

7. Sprawdź

zgodność

wpisanych haseł

• W pliku Rejestracja.js w funkcji sprawdz powyżej linii return true

dodaj następujący kod:

if (form.haslo.value!=form.haslo2.value) { document.getElementById("zgodneHasla").innerHTML = "Hasła nie są zgodne!"; document.getElementById("zgodneHasla").className = "wyroznienieCzerwone"; return false; }



różne hasła w polach.



Strona 3-16

8. Dodaj

możliwość

wyświetlania

informacji o sile

hasła

• W pliku Rejestracja.htm do pola Input o właściwości name="haslo"

dodaj właściwość onkeyup="silaHasla(this.value)"

• Do pliku Rejestracja.js dodaj następująca funkcję:

function silaHasla( haslo ) { var punkty=0; if (haslo.length >=7) punkty++; if ((haslo.match(/[a-z]/)) && (haslo.match(/[A-Z]/))) punkty++; if (haslo.match(/\d+/)) punkty++; if (haslo.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) punkty++; if (punkty<1) { document.getElementById("opisHasla").innerHTML = "Bardzo słabe"; document.getElementById("opisHasla").className = "opisHaslaBardzoSlabe"} else if (punkty<2) { document.getElementById("opisHasla").innerHTML = "Słabe"; document.getElementById("opisHasla").className = "opisHaslaSlabe"} else if (punkty<3){ document.getElementById("opisHasla").innerHTML = "Średnie"; document.getElementById("opisHasla").className = "opisHaslaSrednie"} else { document.getElementById("opisHasla").innerHTML = "Silne"; document.getElementById("opisHasla").className = "opisHaslaSilne"} }

• Do pliku StyleRej.css dodaj następujące stylu umożliwiające

wyświetlenie w różnych kolorach informacji o sile hasła:

.opisHaslaBardzoSlabe { padding-left:10px; color:Red; } .opisHaslaSlabe { padding-left:10px; color:Maroon; } .opisHaslaSrednie { padding-left:10px; color:Yellow; } .opisHaslaSilne { padding-left:10px; color:Green; }


Sprawdź, jak zachowuje się strona przy wpisywaniu hasła. Wymyśl

hasło, które zostanie ocenione jako silne.



Strona 3-17


Twoim zadaniem jest przygotowanie i walidacja ankiety dla agencji modelek i modeli „Modelinki”.

Strona ankiety musi umożliwić pobranie od każdego chętnego do pracy w charakterze modela

następujących informacji:

• imię

• nazwisko

• adres zamieszkania

• telefon

• e-mail

• wiek

• wzrost

• waga

• kolor włosów

• kolor oczu

• rozmiar ubrania

• numer butów

• doświadczenie (wybierane od 1 do 5)

• płeć

Po wybraniu płci użytkownikowi zostaje wyświetlony albo formularz dla kobiet albo dla mężczyzn,

który umożliwia pobranie następujących informacji:

• w przypadku kobiet:

• obwód biustu

• wielkość miseczki

• talia

• biodra

• długość nogi

• w przypadku mężczyzn:

• klatka

• pas

• długość nogi

Ponieważ wszystkie pola są wymagane opracuje schemat sprawdzania pola w odpowiedniej funkcji.

Sprawdzenie poprawności wpisanych wartości ma odbywać się dla pól:

• E-mail (e-mail w formacie [email protected])

• Kod pocztowy (kod odpowiedni dla naszego kraju)

• Wzrost – liczba w zakresie od 40 do 250 cm,

• Waga – liczba w zakresie od 20 do 80 kg

Wszystkie operacje sprawdzenia poprawności i wyświetlania elementów dla kobiet i mężczyzn maja

być realizowane po stronie klienta w przeglądarce!

ITA- 103 Aplikacje internetowe

Piotr Bubacz

Moduł 4

Wersja 1

Wprowadzenie do ASP.NET Spis treści

Wprowadzenie do ASP.NET ................................................................................................................. 1





Przykładowe rozwiązanie ........................................................................................................... 10









ITA-103 Aplikacje internetowe Wprowadzenie do ASP.NET

Strona 4-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące podstaw tworzenia aplikacji

internetowych w Visual Studio 2008. Nauczysz się dodawać strony

internetowe do aplikacji oraz umieszczać na nich kontrolki dostępne w

ASP.NET. Poznasz zasady programowego odwoływania się do kontrolek

oraz interakcji z użytkownikiem strony.

Cel modułu

Celem modułu jest poznanie zasad pracy z aplikacjami internetowymi w

ASP.NET, dodawania i programowego odwoływania się do kontrolek oraz

dodawania i przesyłania informacji między stronami.



• potrafił tworzyć aplikacje internetowe w ASP.NET w Visual Studio

2008

• potrafił dodawać kontrolki do strony internetowej

• potrafił odwoływać się programowo do kontrolek na stronie

• rozumiał zasadę przesyłania informacji między stronami

Wymagania wstępne


• znać podstawy języka XHTML

• znać podstawy CSS




w modułach „Podstawy HTML” i „Kaskadowe Arkusze Stylów – CSS”.




Strona 4-3



Podstawowym ograniczeniem języka HTML jest jego statyczność. Nie ma możliwości w tym języku

dynamicznej zmiany wyświetlanej zawartości ani reagowania na działania użytkownika. Statyczne

strony są bardzo dobre jako wizytówki, ale dzisiaj ciężko sobie wyobrazić stronę internetową bez

elementów dynamicznych.

Firmowe strony internetowe muszą przynajmniej umożliwiać wyszukiwanie czy przeglądanie

produktów. Dzisiaj firmy coraz częściej zwracają się w kierunku Web 2.0, udostępniając

użytkownikom swoich serwisów możliwość samodzielnego generowania treści. Takie narzędzia jak

blog stają się podstawą komunikacji z klientami już nie tylko w dużych korporacjach, ale i w małych

firmach. Firmy dostrzegają możliwości Wikipedii i udostępniają możliwość rozszerzania swojej

podstawowej wiedzy o produktach. Te wszystkie nowe elementy pojawiające się na stronach

wymagają dynamicznych technologii tworzenia zawartości stron.


ASP.NET jest zbiorem technologii programistycznych zbudowanych na platformie .NET, używanych

do budowania dynamicznych aplikacji internetowych. W ASP.NET programista ma do dyspozycji

wiele gotowych komponentów i klas związanych z najczęściej wykonywanymi zadaniami.

Aplikacja ASP.NET

Na aplikację ASP.NET mogą składać się następujące elementy:

• formularze internetowe (ang. Web Forms) – pliki z rozszerzeniem .aspx

• usługi Web (ang. Web Services) – pliki z rozszerzeniem .asmx

• pliki logiki aplikacji – pliki z rozszerzeniem .vb lub .cs

• globalna klasa aplikacji – plik Global.asax

• pliki konfiguracyjne – pliki Web.config

• inne pliki – np. strony HTML, arkusze CSS itp.

Formularz internetowy

Formularze internetowe reprezentują dynamicznie budowane strony internetowe. Składają się ze

znaczników ASP.NET oraz logiki i są przesyłane do użytkownika najczęściej w postaci

standardowych dokumentów XHTML. Aplikacja ASP.NET zawiera jeden lub więcej formularzy. Cała

logika jest wykonywana po stronie serwera, chociaż możliwe jest wykonywanie części kodu w

postaci skryptów po stronie użytkownika.

Pliki konfiguracyjne

Najważniejsze pliki zawierające ustawienia konfiguracyjne aplikacji ASP.NET to:

• Machine.config – przechowywane w nim ustawienia dotyczą wszystkich aplikacji na

komputerze lokalnym

• Web.config – przechowywane w nim ustawienia dotyczą tylko wybranej aplikacji

Pliki konfiguracyjne mogą być modyfikowane w czasie działania aplikacji, lecz wiąże się to

z koniecznością jej ponownego uruchomienia.

Zintegrowane środowisko programistyczne Visual Studio 2008

Zintegrowane środowisko programistyczne umożliwia wytwarzanie i weryfikację aplikacji oraz

przygotowywanie ich do wdrożenia. Charakteryzuje się tym, że udostępnia funkcjonalności

obejmujące edycję i kompilowanie kodu źródłowego, tworzenie zasobów programu, zarządzanie

bazami danych itp.



Strona 4-4

Visual Studio 2008 IDE składa się z wielu okien o różnym przeznaczeniu (Rys. 2). W menu View

można określić, które z nich mają być widoczne dla użytkownika.

Rys. 2 Okno Visual Studio 2008

1. Okno dokumentu – centralne okno aplikacji. W trybie projektowania (Design) możliwe jest

graficzne projektowanie stron w trybie WYSIWYG (ang. What You See Is What You Get). W

trybie podglądu kodu źródłowego (Source) w oknie wyświetlany jest kod strony. Tryb

dzielony (Split) umożliwia jednoczesne wyświetlanie strony w obu widokach.

2. Toolbox – zbiór elementów, które można umieścić na projektowanej stronie,

pogrupowanych w kategorie.

3. Solution Explorer – lista plików i folderów wchodzących w skład projektu. Wyświetla

hierarchię plików. Z tego okna można przenosić i modyfikować pliki, w szczególności możliwe

jest:

• przenoszenia plików poprzez przeciąganie ich myszą

• wyświetlenie zawartości pliku w oknie dokumentów po dwukrotnym kliknięciu go

• wywołanie menu kontekstowego skojarzonego z elementem poprzez kliknięcie go

prawym przyciskiem myszy

4. Properties – lista dostępnych właściwości oraz bieżące ustawienia aktualnie zaznaczonego

obiektu.

5. Error List – informacje o błędach, które wystąpiły w projekcie.

6. Server Explorer – interakcja z narzędziami dostępnymi na serwerze.

Aplikacje internetowe w Visual Studio

Tworzenie aplikacji

Aby utworzyć nową aplikację w Visual Studio musimy wybrać z menu File -> New -> Web Site. Na

ekranie pojawi się okno New Web Site (Rys. 3), w którym możemy określić podstawowe parametry

tworzonej witryny.



Strona 4-5

Rys. 3 Okno New Web Site

Elementy wyświetlane w oknie New Web Site:

1. Zainstalowane szablony aplikacji – lista, w której możemy określić, jakiego typu aplikację

chcemy utworzyć. Najczęściej wybieramy szablon ASP.NET Web Site.

2. Docelowa wersja .NET Framework – docelowa wersja środowiska, pod którą ma być

uruchamiana aplikacja.

3. Lokalizacja witryny – umiejscowienie plików aplikacji.

4. Ścieżka lub adres serwera – dokładne położenie plików aplikacji na lokalnym dysku twardym

lub na serwerze, zależnie od wybranej lokalizacji.

5. Język programowania – języka programowania, w którym tworzona będzie aplikacja.

6. Przycisk Browse – przycisk umożliwiający określenie dokładnego położenia plików aplikacji.

Uruchamianie aplikacji

Aby uruchomić aplikację, wybieramy z menu Debug -> Start Debugging lub naciskamy klawisz F5.

Po wybraniu tej opcji przy pierwszym uruchomieniu aplikacji pojawi się okno z informacją o

konieczności zezwolenia na debugowanie. W tym przypadku należy wcisnąć OK. W tym trybie nie

będzie możliwe dynamiczne poprawianie strony, ale będzie możliwe debugowanie aplikacji.

Możemy w dowolnym miejscu w kodzie aplikacji zatrzymać wykonywanie programu, podejrzeć

zmienne, sprawdzić krok po kroku wykonywanie poszczególnych wierszy kodu itp.

Aplikację można również uruchomić w trybie bez możliwości debugowania, wybierając z menu

głównego Debug -> Start Without debugging lub wciskając Ctrl+F5. Zaletą tego trybu jest

możliwość wprowadzania zmian w kodzie, które widoczne są po odświeżeniu strony w

przeglądarce.

Strona internetowa

Struktura strony

Stronę internetową (formularz internetowy) definiuje się w pliku z rozszerzeniem .aspx. Struktura

takiego pliku składa się z trzech sekcji: dyrektyw strony, kodu aplikacji i układu strony.

Dyrektywy

Dyrektywy umożliwiają definiowanie podstawowych ustawień. Mają one następującą składnię:

<%@ dyrektywa atrybut="wartość" [, atrybut="wartość"[,...n] ] %>

Najważniejszą i zarazem jedyną obowiązkową dyrektywą jest umieszczona na początku każdej

strony internetowej ASP.NET dyrektywa @Page.



Strona 4-6

Dyrektywa @Page określa atrybuty używane przez parser i kompilator. Pozwala m.in. określić

parametry protokołu HTTP, przestrzenie nazw, wykorzystywany język programowania.

Sekcja kodu aplikacji

Sekcja kodu aplikacji zawiera procedury obsługi zdarzeń wraz dodatkowymi procedurami

pomocniczymi. Kod aplikacji może zostać osadzony wewnątrz kodu znacznikowego (Code Inline) lub

umieszczaniu kodu w osobnym pliku (Code Behind) (Rys. 4).

<%@ Page …

<script runat="server“>

…//logika aplikacji

</script>

<html>…

</html>plik.aspx

Inline

Logika aplikacji w pliku

plik.aspx.cs

<html>

…

</html>

plik.aspx

Codebehind

Rys. 4 Strona plik.aspx jako Code Inline i Code Behind

W przypadku Code Inline kod aplikacji jest umieszczany w sekcji nagłówka strony (<head>)

wewnątrz znacznika <script> z atrybutem runat="Server", który informuje kompilator, że

zawartość tego znacznika będzie przetwarzana na serwerze przed wygenerowaniem kodu HTML dla

klienta. Strona może posiadać znacznik <script> bez atrybutu runat, zawierający skrypt

wykonywany po stronie klienta.

Jeśli kod aplikacji ma zostać umieszczony w osobnym pliku (Code Behind), to w dyrektywie @Page

są zdefiniowane atrybuty CodeFile (nazwa pliku) oraz Inherits (nazwa klasy częściowej

zawierającej kod aplikacji).

Kod aplikacji jest zawsze kompilowany przed wykonaniem. Może on być także prekompilowany i

dołączony do aplikacji w postaci binarnej.

Układ strony

Układ strony jest opisany za pomocą kodu znacznikowego, który zawiera kontrolki serwerowe, ciągi

tekstu oraz znaczniki języka HTML. Wygląd strony może być zdefiniowany na stronie poprzez

ustawienie właściwości indywidualnych elementów lub przy pomocy arkuszy styli.

Dodawanie stron internetowych do aplikacji

Do Projektu witryny można dodać nową lub istniejącą stronę internetową. Dodanie nowej strony

możliwe jest:

• po wybraniu z menu głównego Website -> Add New item

• po wciśnięciu kombinacji klawiszy Ctrl+Shift+A

• po wybraniu Add New Item z menu kontekstowego wywoływanego po kliknięciu prawym

przyciskiem myszy nazwy projektu w oknie Solution Explorer

Po wybraniu jednej z powyższych opcji zostanie wyświetlone okno dialogowe (Rys. 5).



Strona 4-7

Rys. 5 Okno dialogowe Add New Item

Okno dialogowe dodawania nowego obiektu do aplikacji zawierające następujące elementy:

1. Templates – opcja to umożliwia wybranie szablonu dodawanego pliku.

2. Name – pole tekstowe umożliwiające określenie nazwy pliku.

3. Language – lista rozwijana umożliwiająca wybór jednego z języków programowania stron

internetowych.

4. Place code in separate file – pole wyboru określające, czy kod aplikacji ma zostać

umieszczony w osobnym pliku (pole zaznaczone), czy też w pliku .aspx w znaczniku

<script> (pole niezaznaczone).

5. Select master page – pole wyboru określające, czy strona internetowa bazuje na stronie

wzorcowej (pole zaznaczone). Jeśli opcja ta została zaznaczona, to po wciśnięciu przycisku OK

użytkownik zostanie poproszony o wskazanie strony wzorcowej. Więcej informacji na temat

stron wzorcowych zostanie przedstawionych później.

Kontrolki na stronie

Dodawanie kontrolek do strony

Kontrolki możemy dodać do strony w dowolnym widoku: Design, Split lub Source. W oknie Toolbox należy wybrać interesujący nas komponent, a następnie, przeciągnąć go na formularz lub

dwukrotnie kliknąć. Kontrolka jest umieszczana zgodnie z przepływem elementów na stronie

internetowej. Aby umieścić ją w dowolnym miejscu, musimy wykorzystać pozycjonowanie CSS.

Określanie właściwości kontrolki

Każda kontrolka posiada zbiór właściwości, które możemy określić w oknie Properites (Rys. 6).



Strona 4-8

Rys. 6 Przykład okna Properties dla kontrolki Label

Najczęściej wykorzystuje się właściwość ID, określającą nazwę kontrolki oraz Text, pozwalającą

określić wyświetlany w niej tekst.

Obsługa zdarzeń

Zdarzenia to pewne akcje wykonywane w odpowiedzi na interakcję użytkownika z kontrolkami na

stronie. Mogą nastąpić, gdy naciska on przycisk, wybiera rekord w liście rekordów lub w inny

sposób wchodzi w interakcję z interfejsem użytkownika. Zdarzenia mogą być również generowane

przez aplikację, gdy rozpoczyna lub kończy jakieś zadanie (np. generowanie wynikowego

dokumentu HTML).

Możemy programowo kontrolować działanie aplikacji za pomocą metody obsługi zdarzenia. Jest to

funkcja napisana w wybranym języku programowania, wywoływana w momencie, gdy nastąpi

powiązane z nią zdarzenie.

Najczęściej wykorzystywanym zdarzeniem jest zdarzenie Load klasy Page. Jest ono wywoływane w

momencie, gdy po stronie serwera aplikacja zainicjalizuje wszystkie obiekty kontrolek. Innym

często wykorzystywanym zdarzeniem jest zdarzenie Click klasy Button, pozwalające określić, co

ma się stać po wciśnięciu przycisku przez użytkownika.

Wiele klas udostępnia więcej niż jedno zdarzenie, np. klasa Button oprócz wspomnianego już

zdarzenia Click udostępnia również zdarzenie Command. W takim wypadku jedno z nich jest

określane jako domyślne. Dla przykładu zdarzenie Click jest domyślnym zdarzeniem klasy

Button.

Z poziomu Visual Studio dostęp do domyślnego zdarzenia uzyskujemy po dwukrotnym kliknięciu

wybranej kontrolki w trybie projektowania. Wygenerowana zostanie wówczas pusta metoda do

jego obsługi. Dostęp do wszystkich zdarzeń jest możliwy po wybraniu kontrolki, a następnie

kliknięciu w oknie Properties przycisku Events (oznaczone na Rys. 7 przez czerwone koło). By

wygenerować metodę obsługi dla któregoś z nich, wystarczy dwukrotnie kliknąć jego nazwę.



Strona 4-9

Rys. 7 Okno Properties z listą zdarzeń

Programowe odwoływanie do kontrolek

Możemy programowo zmieniać właściwości kontrolek, odwołując się do nich w kodzie po ich

nazwie, określonej przy pomocy właściwości ID (Rys. 8). Visual Studio podpowiada, jakie

właściwości (np. Text) kontrolki możemy zmienić lub jakie metody możemy na niej wywołać (np.

ToString).

Rys. 8 Właściwości i metody kontrolki Label

Przesyłanie informacji między stronami

Metoda przesyłanie danych w parametrach adresu URL

Przesyłane dane są widoczne w adresie docelowym dokumentu. Adres dokumentu jest oddzielany

od parametrów znakiem zapytania, a parametry oddzielone są od siebie znakiem ampersand („&”).

Główną wadą tej metody jest ograniczenie ilości wysyłanych danych do maksymalnej długości

paska adresu przeglądarki klienta. Dodatkowo problem może sprawiać przesyłanie danych

binarnych.

Wysyłanie informacji tą metodą polega na przygotowaniu odpowiednio sformatowanego ciągu

znaków, który będzie zawierał lokalizację i nazwę pliku, do którego należy wysłać zapytanie oraz

odpowiednio dodane nazwy parametrów wraz z ich wartościami po znaku „=”.

Ogólna postać adresu URL z dołączonymi parametrami żądania przesyłanego metodą GET:

strona.aspx?parametr=wartość[&parametr=wartość[&...n] ]

Na przykład jeśli chcemy wysłać zmienną imie i nazwisko do strony Info.aspx, to dane te można

przesłać w adresie w następujący sposób:

Info.aspx?imie=wartosc&nazwisko=wartosc

Przygotowany ciąg znaków należy wysłać przy pomocy metody Response.Redirect(url), gdzie url

jest ciągiem znaków, np.:



Strona 4-10

Response.Redirect("Info.aspx?imie=" + imieTextBox.Text + "&nazwisko=" +

nazwiskoTextBox.Text);

Po wykonaniu powyższego kodu przeglądarka zostanie przekierowana do strony Info.aspx, a w

pasku adresu może pojawić się przykładowo następujący ciąg znaków:

http://.../Info.asp?imie=Jan&Nazwisko=Kowalski

W celu wykorzystania tych informacji na stronie docelowej należy użyć właściwości QueryString

obiektu Request, np.

Request.QueryString["imie"]

Metoda przesyłania zawartości jednego formularza do drugiego

Metoda przesyłania zawartości jednego formularza do drugiego umożliwia przesyłanie niemal

nieograniczonych ilości danych, dlatego jest stosowana w większości formularzy internetowych.

Dodatkową jej zaletą jest to, że przesyłane informacje nie pokazują się w pasku adresu

przeglądarki. Ta właściwość czyni ją najlepszym rozwiązaniem przy przesyłaniu poufnych danych z

uwzględnieniem takich mechanizmów, jak szyfrowanie połączenia.

Przykład kodu po stronie wysyłającej:

<form id="form1" runat="server">

<asp:TextBox id="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button2" runat="server" Text="Wyślij"

PostBackUrl="~/Default2.aspx" />

</form>

Przykład kodu po stronie odbierającej:

TextBox txt = (TextBox) PreviousPage.FindControl("TextBox1");

dane= txt.Text;

Połączenie obu metod

Po stronie wysyłającej:

protected void Button1_Click(object sender, EventArgs e)

{ Server.Transfer("Default2.aspx?imie=Piotr"); }

Po stronie odbierajacej:

protected void Page_Load(object sender, EventArgs e) {

daneGET= Request.QueryString["imie"];

danePOST1 = Request.Form["TextBox1"].ToString();

TextBox txt = (TextBox) PreviousPage.FindControl("TextBox2");

danePOST2 = txt.Text; }

Podsumowanie

W tym rozdziale przedstawione zostały podstawowe informacje dotyczące aplikacji ASP.NET i pracy

w środowisku Visual Studio. Dowiedziałeś się, jak tworzyć aplikacje ASP.NET oraz jak dodawać

kontrolki do formularzy i nowe strony do aplikacji. Zostały również omówione mechanizmy

przesyłania informacji między stronami.


Utworzenie aplikacji internetowej

Aplikacje internetowe w Visual Studio 2008 nauczymy się tworzyć na przykładzie prostej aplikacji,

której zadaniem będzie wyświetlenie komunikatu „Witaj świecie”.

Aby utworzyć nową aplikację internetową w Visual Studio 2008, wybieramy z menu File -> New Web Site. Otworzy się okno New Web Site. Z listy Visual Studio installed templates wybieramy



Strona 4-11

ASP.NET Web Site. Pliki aplikacji możemy przechowywać w systemie plików, na lokalnym serwerze

WWW lub pod zdalną lokalizacją. Zdecydujemy się na pierwsze rozwiązanie, w tym celu z listy

Location wybieramy File System, a w polu obok określamy położenie plików aplikacji w dowolnym

miejscu na dysku, nazywając ostatni katalog MojaPierwszaStrona. Projekt chcemy przygotować w

języku Visual C#, więc wybieramy go z listy Language. Po kliknięciu OK we wskazanym katalogu

zostaną utworzone pliki aplikacji.

W oknie Solution Explorer możemy zobaczyć nowo utworzony projekt. Składają się na niego:

• plik Default.aspx – pusta strona ASP.NET

• plik Web.config – plik przechowujący ustawienia konfiguracyjne

• katalog App_Data – specjalny katalog, w którym umieszczane są dane aplikacji

Rys. 9 Początkowa zawartość aplikacji

Plik Default.aspx standardowo otwiera się w głównym oknie Visual Studio w widoku Source. By

móc edytować stronę w trybie WYSIWYG, możemy przełączyć się na widok Design. Zróbmy tak,

następnie kliknijmy obszar strony i wpiszmy „Witaj świecie!”.

Aby zobaczyć wynik naszej pracy w przeglądarce internetowej, musimy uruchomić aplikację. W tym

celu wybieramy z menu Debug -> Start Debugging. Przy pierwszym uruchomieniu aplikacji pojawi

się okno z informacją, że możliwość debugowania nie jest włączona (Rys. 10). Jeśli nie zmienimy

niczego i klikniemy OK, Visual Studio samodzielnie zmodyfikuje plik Web.config, umożliwiając nam

posługiwanie się debuggerem. Na czas projektowania aplikacji warto włączyć tę opcję.

Rys. 10 Okno Debugging Not Enabled

Aplikację można również uruchomić w trybie bez możliwości debugowania, wybierając z menu

głównego Debug -> Start Without debugging.

Po uruchomieniu aplikacji powinna otworzyć się przeglądarka internetowa, a w niej strona

Default.aspx. Adres strony może wyglądać następująco:

http://localhost:5110/MojaPierwszaStrona/Default.aspx

Poszczególne elementy oznaczają:

• http://localhost – aplikacja jest uruchamiana na serwerze lokalnym

• 5110 – numer portu, na którym został uruchomiony serwer

• MojaPierwszaStrona – nazwa aplikacji



Strona 4-12

• Default.aspx – strona internetowa

Posługiwanie się kontrolkami

Podstawową umiejętnością, jaką powinniśmy posiadać tworząc aplikacje ASP.NET, jest umiejętność

posługiwania się kontrolkami. Pracy z nimi nauczymy się na przykładzie prostej aplikacji,

pobierającej od użytkownika imię oraz płeć i wyświetlającej te informacje na stronie.

Utwórzmy nową aplikację, a następnie otwórzmy plik Default.aspx w trybie Design i w obszarze

strony wpiszmy „Podaj imię:”. Obok napisu powinniśmy dodać pole tekstowe, w które użytkownik

będzie mógł wpisać swoje imię. Funkcję tę spełnia kontrolka TextBox. Znajdziemy ją w oknie

Toolbox, w kategorii Standard – by dodać ją do strony, możemy przeciągnąć ją na obszar

projektowania lub kliknąć ją dwukrotnie. Warto zauważyć, że nie możemy umieścić kontrolki w

dowolnym miejscu na stronie, a jedynie obok napisu. Jest to związane z układem elementów na

stronie internetowej. Jeśli chcemy swobodnie rozmieszczać kontrolki na stronie, powinniśmy użyć

CSS. Warto pamiętać, aby zawsze nadawać kontrolkom znaczące nazwy. W tym celu w oknie

Properties zmienimy właściwość ID kontrolki TextBox z TextBox1 na imieTextBox.

Kursor w widoku projektowania powinien aktualnie znajdować się za polem tekstowym. Naciskając

Enter przeniesiemy go do nowej linii. Zobaczmy, jak wygląda kod strony, przełączając się na widok

Source (możemy również przejść do widoku Split i obserwować jednocześnie widoki Design

i Source). Warto zauważyć, że naciśnięcie klawisza ENTER spowodowało dodanie znacznika

<br />.

Przełączmy się z powrotem na widok Design i w drugiej linii wpiszmy „Podaj płeć:”. Następnie

dodajmy kontrolkę DropDownList reprezentującą listę rozwijaną i nadajmy jej nazwę

plecDropDownList. Możemy wypełnić ją dopuszczalnymi wartościami na dwa sposoby:

wykorzystując narzędzia Visual Studio lub ręcznie dodając kolejne pozycje w kodzie strony.

Zdecydujemy się na pierwsze rozwiązanie. Jeśli zaznaczymy kontrolkę w widoku Design, po jej

prawej stronie powinniśmy zauważyć ikonę , tzw. Smart Tag. Smart Tag umożliwia szybki dostęp

do najczęściej używanych funkcji związanych z kontrolką. Kliknijmy go i wybierzmy Edit Items.

Otworzy się okno ListItem Collection Editor (Rys. 11), w którym możemy dodać elementy do listy.

By dodać pierwszy element, kliknijmy przycisk Add.

Rys. 11 Okno ListItem Collection Editor

Na liście właściwości po prawej stronie odnajdźmy właściwość Text, która określa tekst

wyświetlany dla elementu i przypiszmy jej wartość Kobieta. Następnie w polu Value,

określającym jego unikatową wartość, wpiszmy K. Dodajmy kolejny element do listy, lecz tym

razem w polach Text i Value wpiszmy odpowiednio: Mężczyzna i M. Warto zwrócić uwagę, że

standardowo pole Value jest wypełniane taką samą wartością, jak pole Text, lecz w naszym



Strona 4-13

przypadku ze względu na problemy, które mogą występować z polskimi znakami diakrytycznymi,

lepiej będzie zastosować skróty.

Po wypełnieniu listy dodajemy na stronie kontrolkę Button o nazwie pokazButton i w następnej

linii kontrolkę Label o nazwie wyswietlLabel. Chcemy, by po kliknięciu przycisku w etykiecie

wyświetlały się informacje o użytkowniku. Aby wygenerować metodę obsługi kliknięcia przycisku,

wystarczy kliknąć go dwukrotnie. W efekcie w pliku Default.aspx.cs powinna pojawić się pusta

metoda pokazButton_Click.

Komunikat dla użytkownika przygotujemy na podstawie wartości wybranych w poszczególnych

kontrolkach, a następnie ustawimy go jako treść etykiety. Wykorzystamy do tego następujący kod,

który umieścimy wewnątrz metody pokazButton_Click:

string wyswietl = "Witaj " + imieTextBox + "!<br />";

if (plecDropDownList.SelectedValue == "K")

wyswietl += "Jesteś kobietą";

else if (plecDropDownList.SelectedValue == "M")

wyswietl += "Jesteś mężczyzną";

wyswietlLabel.Text = wyswietl;


By zaprezentować możliwość przesyłania informacji między stronami, do przygotowanej

poprzednio aplikacji dodamy możliwość przekazywania wartości wpisanej w polu tekstowym przy

pomocy metody GET, zaś wartości wybranej z listy – przy pomocy metody POST.

Zaczniemy od dodania do naszej strony jeszcze jednej kontrolki Button o nazwie wyslijButton

i etykiecie Wyślij. W metodzie obsługi zdarzenia kliknięcia dodajmy następujący kod:

Server.Transfer("Ankieta.aspx?imie=" + imieTextBox.Text);

Spowoduje on przekierowanie po stronie serwera do strony Ankieta.aspx z parametrem imie,

przechowującym zawartość kontrolki imieTextBox.

Dodajmy nową stronę do aplikacji. W tym celu możemy wybrać z menu Website -> Add Add New Item lub kliknąć prawym przyciskiem myszy w oknie Solution Explorer i z menu kontekstowego

wybrać Add New Item. Pojawi się okno Add New Item. Na liście zainstalowanych szablonów

wybieramy Web Form, w polu Name wpisujemy Ankieta.aspx, zaś w polu Language wybieramy

Visual C#. Pozostawiamy zaznaczone tylko jedno pole wyboru, Place code in separate file, a

następnie klikamy Add.

Do nowej strony dodajemy kontrolkę Label o nazwie wyswietlLabel, a następnie w widoku

podglądu strony klikamy dwukrotnie obszar formularza. Visual Studio otworzy edytor kodu strony i

umieści kursor w metodzie Page_Load. Dodamy w niej kod pobierający wartość przekazanego w

adresie parametru imie:

string wyswietl = "Witaj " + Request.QueryString["imie"] + "<br />";

a także kod pobierający dane z poprzedniej strony:

DropDownList ddl =

(DropDownList)PreviousPage.FindControl("plecDropDownList");

Na podstawie wybranego element w liście rozwijanej do treści komunikatu dodamy dodatkowe

informacje:

if (ddl.SelectedValue == "K")

{ wyswietl += "Jesteś kobietą."; }

if (ddl.SelectedValue == "M")

{ wyswietl += "Jesteś mężczyzną."; }

Na końcu przypisz zawartość zmiennej wyswietl do własności Text kontrolki Label:



Strona 4-14

wyswietlLabel.Text = wyswietl;

Porady praktyczne

Praca z Visual Studio

• Jeśli omyłkowo zamknąłeś któreś z okien, możesz otworzyć je ponownie korzystając z menu

View.

• Możesz przeciągać myszą elementy z okna Solution Explorer do okna głównego, uzyskując

różne efekty. Przykładowo po przeciągnięciu obrazka Visual Studio automatycznie wygeneruje

znacznik <img>, zaś przy przenoszeniu arkusza stylów CSS w kodzie strony pojawi się znacznik

<link>.

• By sprawnie pracować w środowisku Visual Studio, powinieneś nauczyć się najważniejszych

skrótów klawiszowych. Niektóre z nich są podane w tym module, zaś pełną listę znajdziesz w

plikach pomocy. Pamiętaj też, że każdy skrót możesz dostosować, wybierając z menu głównego

Tools -> Customize -> Keyboard.

Tworzenie aplikacji

• Jeśli nie wykorzystujesz zaawansowanych funkcji serwera IIS, możesz umieścić pliki aplikacji w

dowolnym miejscu w systemie plików i testować ją wykorzystując zintegrowany serwer WWW

dostarczany razem z Visual Studio. Opcja ta jest szczególnie przydatna, gdy nie posiadasz

uprawnień administracyjnych do serwera IIS.

• Jeśli testowałeś swoją aplikację jedynie pod zintegrowanym serwerem WWW, przed

uruchomieniem jej w środowisku produkcyjnym koniecznie przetestuj ją na serwerze IIS.

Istnieją pewne subtelne różnice w zachowaniu tych dwóch serwerów, m.in. w zakresie obsługi

statycznych plików aplikacji, takich jak dokumenty HTML, arkusze stylów CSS czy pliki graficzne.

• Tworząc nową aplikację Web w Visual Studio 2008 masz możliwość wyboru wersji

.NET Framework. Pamiętaj, że musi ona być zainstalowana nie tylko na komputerze, na którym

tworzysz i testujesz aplikację, lecz również na serwerze, na którym zamierzasz docelowo ją

umieścić. Jeśli zdecydujesz się utworzyć aplikację dla .NET Framework 2.0, musisz liczyć się

z tym, że udogodnienia wprowadzone w wersji 3.5, m.in. zintegrowana obsługa Ajax, nie będą

dostępne.

• Gdy uruchamiasz aplikację bez debugowania, możesz z poziomu Visual Studio wprowadzać

zmiany w kodzie aplikacji, które będą widoczne po odświeżeniu strony w przeglądarce.

• Przed umieszczeniem aplikacji w środowisku produkcyjnym upewnij się, że możliwość

debugowania jest wyłączona w pliku konfiguracyjnym. Zapewnisz w ten sposób lepszą

wydajność aplikacji, zaś w przypadku błędu na stronie fragmenty kodu nie będą prezentowane

użytkownikowi.

Tworzenie stron

• Staraj się umieszczać kod strony w osobnym pliku. Możliwość osadzania kodu wykonywalnego

w kodzie znaczników przydaje się głównie przy różnego rodzaju prezentacjach.

• W oknie Add New Item lista szablonów zależy od dodatków zainstalowanych w systemie.

Dodawanie kontrolek do strony

• Kontrolki są rozmieszczane na stronie tak samo, jak elementy HTML. By móc swobodnie

sterować ich położeniem, możesz wykorzystać CSS.

• Staraj się nie korzystać z wizualnych własności kontrolek wymienionych w oknie Properties,

takich jak kolor tła czy rozmiar tekstu. Do zarządzania wyglądem strony używaj CSS.

• Elementy posiadające atrybut runat="server" najczęściej muszą posiadać również atrybut

ID, dzięki czemu można odwoływać się do nich w kodzie. Pamiętaj, że atrybuty te możesz



Strona 4-15

nadawać nie tylko kontrolkom serwerowym, lecz również zwykłym elementom HTML, takim jak

<div> czy <img>.

• Nigdy nie powinieneś polegać na tym, że właściwość ID elementu z atrybutem

runat="server" będzie mieć taką samą wartość po stronie klienta i serwera. ASP.NET nie

gwarantuje tego w żaden sposób i często dodaje dodatkowe elementy do nazwy. Z tego

względu użycie selektorów ID w CSS, np. #imieTextBox { font-weight: bold } jest

zupełnie niepraktyczne. W celu określenia wyglądu kontrolek ASP.NET stosuj właściwość

CssClass i klasy CSS.


• Przesyłanie informacji między stronami w parametrach adresu URL ma ograniczone

zastosowanie, gdyż nie chroni danych w żaden sposób, jak również nie pozwala przekazywać

większych porcji informacji.

• By móc przekazywać dane binarne w parametrze adresu URL, powinieneś zastosować jakieś

kodowanie transportowe – powszechnie w tym celu wykorzystuje się kodowanie Base64.

Niestety musisz liczyć się z tym, że rozmiar danych po zakodowaniu ulegnie zwiększeniu.

• Może się zdarzyć, że w łańcuchu znaków przesyłanym w parametrze adresu URL znajdzie się

jakiś znak specjalny, np. ampersand („&”). Jeśli dokleimy taki łańcuch jako wartość dla

parametru, może ona później zostać nieprawidłowo zinterpretowana przez serwer. By

zabezpieczyć się przed taką sytuacją, powinieneś kodować wartości parametrów przy pomocy

metody Server.UrlEncode.

Uwagi dla studenta


• umiesz tworzyć aplikacje internetowe ASP.NET w Visual Studio 2008

• umiesz dodawać nowe strony do aplikacji

• umiesz dodawać kontrolki do strony

• wiesz co to jest i jak utworzyć metodę obsługi zdarzenia

• umiesz programowo odwoływać się do kontrolek

• wiesz co to jest Smart Tag i jak z niego korzystać

• wiesz jak przesyłać informację pomiędzy stronami metodą GET i POST





1. Dino Esposito, Programming Microsoft ASP.NET 3.5, Microsoft Press, 2008

Praktyczne podejście do tworzenia aplikacji w ASP.NET 3.5. szczegółowy

przewodnik po najważniejszych elementach projektowania stron internetowych w

ASP.NET 3.5. Zawiera przegląd od podstaw do zaawansowanych elementów

technologii.

2. Tomasz Jahołkowski, Jacek Matulewski, ASP.NET w Visual Web Developer 2008. Ćwiczenia, Helion, 2008

Książka przeznaczona jest dla początkujących programistów, pragnących tworzyć

witryny ASP.NET, którzy zetknęli się już z jakimkolwiek językiem programowania.

Dzięki temu podręcznikowi nauczysz się korzystać z opisanych narzędzi,

działających w nowoczesnym środowisku Visual Web Developer 2008.

3. Jesse Liberty, Dan Hurwitz, ASP.NET. Programowanie, Helion, 2006



Strona 4-16

Podręcznik opisujący zasady tworzenia aplikacji i witryn internetowych przy użyciu

języka C# 2.0, środowiska programistycznego Visual Studio 2005 i bibliotek

.NET 2.0. Przedstawia środowisko Visual Studio 2005 i szczegółowo omawia

koncepcję budowania aplikacji za pomocą kontrolek.

4. Chris Hart, John Kauffman, David Sussman, Chris Ullman, Beginning ASP.NET 2.0 with C#, Wrox,

2006

W książce autorzy prezentują podstawy ASP.NET. Pokazują nie tylko teorię, ale

również przykłady kodu w języku C#.

5. The Official Microsoft ASP.NET Site, http://www.asp.net

Strona zawiera najnowsze informacje dotyczące technologii ASP.NET.

Początkującym programistom ASP.NET warto polecić informacje zawarte w

zakładce Get Started. Z kolei cennym źródłem wiedzy dla wszystkich bez wyjątku

jest zakładka Learn.

Piotr Bubacz

ITA-103 Aplikacje internetowe


Problem 1 (czas realizacji

Twoja firma rozpoczęła ekspansję na rynku dynamicznych aplikacji internetowych. W końcu ile

można zarabiać na tworzeniu prostych

postanowiłeś poznać technologię

padł na technologię ASP.NET.

wyświetlenia na stronie internetowej fragment

od użytkownika imienia.


1. Utwórz nową

stronę w Visual

Studio 2008


• Z menu wybierz

• Z listy

• Z listy

pliku w

• Z listy

• Kliknij

2. Dodaj tekst do

strony. Uruchom

aplikację ASP.NET

• Przełącz

• Na stronie internetowej

świecie!

• Zapisz stronę wybierając z menu

kombinację klawiszy

• Uruchom przygotowaną aplikację

Debugopcji przy pierwszym uruchomieniu aplikacji pojawi się okno

z

W

3. Dodaj

kontrolki Label

• Na stronie w nowej linii dopisz

przeciągnij

• W

dzisiajLabel

4. Dodaj

procedurę obsługi

zdarzenia

• W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio

otworzy edytor kodu strony i umieści kursor

• Do

Strona 4-17




tworzeniu prostych stron WWW? Ponieważ chcesz być

poznać technologię, w której będziecie tworzyli dynamiczne aplikacj

padł na technologię ASP.NET. Swoją przygodę z nią postanowiłeś rozpocząć

wyświetlenia na stronie internetowej fragmentu tekstu, dzisiejszej daty

Tok postępowania

Otwórz Visual Studio 2008.

Z menu wybierz File -> New Web Site.

Z listy Visual Studio installed templates wybierz ASP.NET

Z listy Location wybierz File System, a w polu obok określ lokalizację dla


Z listy Language wybierz Visual C#.

Kliknij OK.

Przełącz się na widok Split.

Na stronie internetowej w obszarze podglądu

świecie!.

Zapisz stronę wybierając z menu File -> Save Default.aspxkombinację klawiszy Ctrl+S.

Uruchom przygotowaną aplikację wybierając

Debug -> Start Debugging lub wykorzystując klawisz

opcji przy pierwszym uruchomieniu aplikacji pojawi się okno

informacją o konieczności zezwolenia na debugowanie

Wciśnij OK.

Rys. 12 Okno z informacją o modyfikacji pliku Web.config

Na stronie w nowej linii dopisz Dzisiaj jest, a następnie z okna

przeciągnij kontrolkę Label, umieszczoną w zakładce

Kontrolkę możesz umieścić w obszarze podglądu strony lub w kodzie

źródłowym.

Wybierz dodaną kontrolkę i w oknie PropertiesdzisiajLabel, natomiast pole Text zostaw puste.

W widoku podglądu strony kliknij dwukrotnie formularz. Visual Studio

otworzy edytor kodu strony i umieści kursor w metodzie

Do metody dodaj następujący kod wyświetlającą aktualną datę w

Moduł 4

Wprowadzenie do ASP.NET


chcesz być dobrym szefem,

w której będziecie tworzyli dynamiczne aplikacje. Wasz wybór

postanowiłeś rozpocząć od prostego zadania –

j daty oraz pobranego

ASP.NET Web Site.

, a w polu obok określ lokalizację dla

u strony wpisz Witaj

Save Default.aspx lub wciskając

wybierając z menu

lub wykorzystując klawisz F5. Po wybraniu tej

opcji przy pierwszym uruchomieniu aplikacji pojawi się okno

informacją o konieczności zezwolenia na debugowanie (Rys. 12).

Okno z informacją o modyfikacji pliku Web.config

następnie z okna Toolbox

zakładce Standard.

obszarze podglądu strony lub w kodzie

Properties w polu (ID) wpisz


metodzie Page_Load.

dodaj następujący kod wyświetlającą aktualną datę w



Strona 4-18

Page_Load kontrolce dzisiajLabel:

dzisiajLabel.Text = DateTime.Today.ToShortDateString();

• Zapisz zmiany i uruchom przygotowaną stronę.

5. Dodaj

kontrolki TextBox,

Button i obsłuż

zdarzenia Click

• Na stronie w nowej linii dopisz: Podaj swoje imię:, a następnie z okna

Toolbox przeciągnij kontrolkę TextBox i w oknie Properities w polu (ID) wpisz imieTextBox.

• Następnie obok poprzedniej kontrolki dodaj do strony kontrolkę Button

w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) –

wyswietlButton

• W nowej linii dodaj kontrolkę Label i w oknie Properities w polu (ID) wpisz imieLabel i usuń zwartość pola Text.

• Dwukrotnie kliknij kontrolkę Button. Visual Studio otworzy edytor kodu

strony i umieści kursor w metodzie wyswietlButton_Click. Do metody

dodaj:

imieLabel.Text = "Witaj " + imieTextBox.Text;

6. Przetestuj

stronę

• Zapisz zmiany i uruchom przygotowaną stronę. W oknie tekstowym

podaj swoje imię, a następnie wciśnij przycisk Wyświetl.


Poprzednie zadanie okazało się być łatwiejsze niż sądziłeś. Zachęcony pierwszymi sukcesami

rzuciłeś sobie nowe wyzwanie – postanowiłeś dowiedzieć się, jak przesyłać informacje między

stronami. Zdecydowałeś, że przygotujesz prostą ankietę dla agencji modelek i modeli, którą

prowadzi Twój dobry przyjaciel. Kto wie, może nawet uda Ci się go namówić do zmiany strony

internetowej?

Wymyśliłeś, że na pierwszej stronie użytkownik będzie mógł wprowadzić imię oraz określić swoją

płeć, na podstawie której będzie następnie przekierowywany na odpowiednią stronę z pytaniami.


1. Dodaj nową

stronę do aplikacji


• Z menu wybierz File -> New Web Site.

• Z listy Visual Studio installed templates wybierz ASP.NET Web Site.




• Kliknij OK.

2. Dodaj

kontrolkę do

wpisania imienia,

określenia płci

oraz

przekierowania na

stronę ankiety

• Na stronie napisz Podaj swoje imię:, a następnie z okna Toolbox

przeciągnij kontrolkę TextBox. Ustaw jej właściwość ID na imieTextBox.

• W nowej linii dodaj tekst Podaj płeć:, a następnie kontrolkę

DropDownList. Ustaw jej właściwość ID na plecDropDownList.

• Zaznacz ostatnio dodaną kontrolkę w widoku projektowania strony,

a następnie kliknij ikonę , która pojawi się po jej prawej stronie

(Smart Tag) i wybierz Edit Items (Rys. 13).



Strona 4-19

Rys. 13 Okno Listitem Collection Editor

• W oknie ListItem Collection Editor wciśnij przycisk Add.

• W obszarze Properties po prawej stronie w polu Text wpisz Kobieta, a w

polu Value – K.

• Kliknij przycisk Add.

• W obszarze Properties po prawej stronie w polu Text wpisz Mężczyzna,

a w polu Vaule – M.

• Dodaj kontrolkę Button i w oknie Properities w polu Text wpisz

Wyświetl, a w polu (ID) – wyswietlButton. Następnie dwukrotnie ją

kliknij. Visual Studio otworzy edytor kodu strony i umieści kursor

w metodzie wyslijButton_Click. W metodzie dodaj następujący kod:

if (plecDropDownList.SelectedValue=="K")

{Response.Redirect("Kobieta.aspx?imie=" + imieTextBox.Text); }

else if (plecDropDownList.SelectedValue == "M")

{Response.Redirect("Mezczyzna.aspx?imie=" + imieTextBox.Text); }

3. Dodaj nową

stronę do

projektu

zawierającą

pytania dla kobiet

• Wybierz menu Website -> Add Add New Item lub wciśnij Ctrl+Shift+A

lub w oknie Solution Explorer kliknij prawym przyciskiem myszy i

wybierz Add New Item (Rys. 14).

Rys. 14 Okno Add New Item



Strona 4-20

• Określ następujące elementy dla nowej strony:

— nazwa: Kobieta.aspx

— język: Visual C#

— opcja Place code in separate file zaznaczona

— opcja Select master page niezaznaczona

4. Pobierz dane

przesłane do

strony przy

pomocy metody

GET

• Do nowej strony dodaj kontrolkę Label. i w oknie Properities w polu (ID) wpisz wyswietlLabel i usuń zwartość pola Text.


otworzy edytor kodu strony i umieści kursor metodzie Page_Load.

• Do metody dodaj kod pobierający dane z poprzedniej strony przesłane

w parametrze imie adresu URL:

wyswietlLabel.Text = "Witaj " + Request.QueryString["imie"];

5. Umieść

pytania do ankiety

• W pliku Kobieta.aspx poniżej kontrolki Label dodaj elementy

umożliwiające pobranie informacji od użytkownika serwisu: wpisz E-mail: i dodaj kontrolkę TextBox. Nadaj jej odpowiednią właściwość ID.

• Kolejno dodaj w osobnych wierszach kontrolki TextBox wraz z

poprzedzającymi je informacjami umożliwiające pobranie następujących

danych:

— wzrost

— numer ubrania

— numer buta

— obwód biustu

— talia

— biodra

• Na dole strony dodaj kontrolkę Button i w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) – wyswietlButton. Następnie dwukrotnie

ją kliknij. W metodzie wyslijButton_Click dodaj następujący kod:

Server.Transfer("Dziekujemy.aspx?imie=" + Request.QueryString["imie"]);

6. Dodaj nową

stronę do

projektu

zawierającą

podziękowania za

wypełnienie

ankiety

• Dodaj nową stronę do projektu. Określ następujące elementy dla nowej

strony:

— nazwa: Dziekujemy.aspx




• Do nowoutworzonej strony dodaj kontrolkę Label. Określ jej właściwość

ID na wyswietlLabel, natomiast właściwość Text zostaw pustą.



• Do metody dodaj kod pobierający dane z poprzedniej strony przesłane


wyswietlLabel.Text = Request.QueryString["imie"] +

", dziękujemy za wypełnienie ankiety";

7. Dodaj nową

stronę do

projektu

zawierającą

• Dodaj nową stronę do projektu. Określ następujące elementy dla nowej

strony:

— nazwa: Mezczyzna.aspx


Piotr Bubacz

ITA-103 Aplikacje internetowe

pytania dla

mężczyzn i

pobierz dane

przesłane przy

pomocy metody

GET

—

—

• Do

wpisz


otworzy edytor kodu strony i umieści kursor metodzie

• Do

w


8. Umieść

pytania do ankiety

• W pliku

umożliwiające pobranie informacji od użytkownika serwisu: wpisz

mail

• Kolejno dodaj w osobnych wierszach kontrolki

z

następujących danych:

—

—

—

—

—

• Na dole strony dodaj kontrolkę

wpisz

kliknij. W meto

Server.Transfer("Dziekujemy.aspx?imie=" +

Request.QueryString["imie"]);

9. Przetestuj

stronę

• Zapisz zmiany i uruchom stronę

swoje imię,

Strona 4-21



Do nowej strony dodaj kontrolkę Label i w oknie

wpisz wyswietlLabel i usuń zwartość pola Text.


otworzy edytor kodu strony i umieści kursor metodzie

Do metody dodaj kod pobierający dane z poprzedniej strony



W pliku Mezczyzna.aspx poniżej kontrolki Labelumożliwiające pobranie informacji od użytkownika serwisu: wpisz

mail: i dodaj kontrolkę TextBox. Nadaj jej odpowiednią właściwość

Kolejno dodaj w osobnych wierszach kontrolki

poprzedzającymi je informacjami umożliwiające pobranie

następujących danych:

— wzrost

— numer ubrania

— numer buta

— obwód klatki

— obwód pasa

Na dole strony dodaj kontrolkę Button i w oknie Properities wpisz Wyślij, a w polu (ID) – wyslijButton. Następnie dwukrotnie

kliknij. W metodzie wyslijButton_Click dodaj następujący kod

Server.Transfer("Dziekujemy.aspx?imie=" +

Request.QueryString["imie"]);

Zapisz zmiany i uruchom stronę Default.aspx. W oknie tekstowym podaj

swoje imię, wybierz płeć, a następnie wciśnij przycisk

Dlaczego zastosowano Server.TransferwyslijButton_Click? Co to umożliwia?

Moduł 4

Wprowadzenie do ASP.NET

i w oknie Properities w polu (ID)



metody dodaj kod pobierający dane z poprzedniej strony przesłane


Label dodaj elementy

umożliwiające pobranie informacji od użytkownika serwisu: wpisz E-. Nadaj jej odpowiednią właściwość ID.

Kolejno dodaj w osobnych wierszach kontrolki TextBox wraz

umożliwiające pobranie

Properities w polu Text astępnie dwukrotnie ją

następujący kod:

. W oknie tekstowym podaj

a następnie wciśnij przycisk Wyświetl.

Server.Transfer w metodzie



Strona 4-22


Po ukończeniu poprzedniego zadania postanowiłeś pokazać ankietę Twojemu koledze,

prowadzącemu agencję modeli i modelek. Bardzo spodobał mu się pomysł na nową stronę dla

agencji. Już dawno myślał o takiej ankiecie na swojej stronie, aby ułatwić sobie prowadzenie

rekrutacji i poszerzyć swoją bazę modeli i modelek.

W związku z tym zgodziłeś się przygotować serwis internetowy dla agencji modelek i modeli

„Modelinki”. Twoim zadaniem jest opracowanie wyglądu strony i przygotowanie strony głównej, na

której powinieneś umieścić m.in. link do ankiety. Strona ankiety musi umożliwić pobranie od

każdego chętnego do pracy w charakterze modela następujących informacji:

• imię

• nazwisko


• telefon

• e-mail

• wiek

• wzrost

• waga

• kolor włosów

• kolor oczu

• rozmiar ubrania

• numer butów

• doświadczenie (wybierane od 1 do 5)

• płeć

Na podstawie płci należy pobrać następujące informacje:

• w przypadku kobiet:

• obwód biustu

• wielkość miseczki

• talia

• biodra

• długość nogi

• w przypadku mężczyzn:

• klatka

• pas

• długość nogi

Na stronie z podziękowaniem za wypełnienie ankiety powinno znaleźć się podsumowanie

podanych w ankiecie informacji. Wszystkie strony aplikacji powinny mieć spójny wygląd.


Piotr Bubacz

Moduł 5

Wersja 1

Kontrolki serwerowe Spis treści

Kontrolki serwerowe ............................................................................................................................ 1















Piotr Bubacz Moduł 5 ITA-103 Aplikacje Internetowe Kontrolki serwerowe

Strona 5-2

Informacje o module

Opis modułu

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ę wykorzystywać nie tylko różne kontrolki serwerowe, ale również walidować 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.



• umiał programowo odwoływać się do złożonych kontrolek serwerowych

• potrafił walidować dane wprowadzane po stronie klienta

• umiał wykorzystywać rozbudowane kontrolki, takie jak MultiView i AdRotator

• wiedział co to jest cykl życia strony i w jaki sposób możesz sprawdzić, czy strona jest przesłana po raz pierwszy do klienta

Wymagania wstępne


• znać podstawy języka XHTML.

• znać zasady pracy w środowisku Visual Studio, w szczególności tworzenia stron internetowych


Zgodnie z mapą zależności przedstawioną na Rys. 1, przed przystąpieniem do realizacji tego modułu należy zapoznać się z materiałem zawartym w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS” i „Wprowadzenie do ASP.NET”.



Strona 5-3



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 realizować po stronie serwera, istnieją jednak sytuacje, w których wstępne sprawdzenie danych warto przeprowadzić już po stronie klienta, np. gdy chcemy upewnić się, czy wymagane pola zostały wypełnione lub czy format wprowadzonych danych jest prawidłowy. Możemy to zrealizować przy pomocy własnych skryptów napisanych w JavaScript, jednak najpierw musimy poznać 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ść kilku kontrolek.

Innym problemem, z jakim możemy się spotkać, jest konieczność 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.


Kontrolki serwerowe ASP.NET możemy podzielić 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ływać 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ądać różnie, gdyż ASP.NET stara się dostosować 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ślić 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 nadać jej atrybut ID. Kontrolki te muszą być umieszczone w znaczniku <form>, który również musi posiadać atrybut runat="Server".

Serwerowe kontrolki HTML umożliwiają m.in.:

• programowe odwoływanie się do kontrolek z poziomu kodu aplikacji

• obsługę zdarzeń 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. Choć 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


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ąć aby przenieść 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ść

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 być w danej chwili widoczny dla użytkownika. Przykładowo kontrolki MultiView możemy użyć 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żać, 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ęć.

Aby skorzystać z kontrolki należy przygotować elementy graficzne oraz odnośniki do zasobów. Następnie należy przygotować plik XML, w którym określimy wcześniej przygotowane informacje, np.:

<Advertisements>

<Ad>

<ImageUrl>~/Adv/Adv1.png</ImageUrl>

<NavigateUrl>http://www.asp.net</NavigateUrl>


Strona 5-5

<AlternateText>Strona główna ASP.NET </AlternateText>

</Ad>

<Ad>


<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ść obrazka w pikselach.

Width Szerokość 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ść określająca, jak często reklama jest wyświetlana w stosunku do innych reklam. Im większa wartość, tym większa częstotliwość wyświetlania reklamy. Suma wszystkich wartości nie może przekroczyć 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ę podać błędne dane, które mogą spowodować 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 być nadzorowana przez kilka walidatorów (kontrolujących np. czy wprowadzono wartość oraz czy dana wartość 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ść komunikatu błędu sprawdzania poprawności umieszczonego w podsumowaniu błędów

• IsValid – ustawia lub zwraca informacje o poprawności weryfikowanych danych


Strona 5-6

• Text – ustawia lub zwraca treść 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ść wprowadzona przez użytkownika

• ControlToCompare – zawiera ID kontrolki, z jaką ma być porównana wartość w sprawdzanej kontrolce

• Typ – definiuje typ porównywanych danych, możliwe typy danych:

• String (domyślny) – typ łańcuchowy

• 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ść jest większa od drugiej

• GreaterThanEqual – sprawdza, czy jedna wartość jest większa lub równa drugiej

• LessThan – sprawdza, czy jedna wartość jest mniejsza od drugiej

• LessThanEqual – sprawdza, czy jedna kontrolka jest mniejsza lub równa drugiej

• DataTypeCheck – sprawdza poprawność typów danych

Przykładowo by sprawdzić, czy podana ilość lat jest większa niż 18, możemy użyć 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>


Strona 5-7

Kontrolka RangeValidator

W celu sprawdzenia, czy podana wartość mieści się w określonym zakresie, wykorzystuje się kontrolkę RangeValidator. Najważniejsze właściwości kontrolki to:

• MinimumValue – wartość minimalna zakresu

• MaximumValue – wartość maksymalna zakresu

• Type – typ danych

Dla przykładu by sprawdzić, czy podana liczba mieści się w zakresie od 1 do 5, możemy skonfigurować 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ść 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 podać w atrybucie ValidationExpression wyrażenie regularne (ang. regular

expression).

Przykładowo walidator zdefiniowany jak poniżej może zostać 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ść wyboru gotowego wyrażenia regularnego spośród najczęściej używanych (Rys. 2).

Rys. 2 Edytor wyrażeń regularnych

Kontrolka CustomValidator

W celu sprawdzenia bardziej złożonych warunków wykorzystuje się kontrolkę CustomValidator. By sprawdzić poprawność danych, wywołuje ona funkcje dostarczone przez programistę.


Strona 5-8

Kontrolka ValidationSummary

Do wyświetlenia podsumowania błędów na 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 przeoczyć ukrytego pola __VIEWSTATE, które może wyglądać tak:

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"

value="/wEPDwUJNzgzNDMwNTMzZGQlb8soeikaTu0we7QLkZItEc5wTQ==" />

ViewState można przetłumaczyć jako stan strony. Przechowuje on informację dotyczące umieszczonych na niej kontrolek, np. zawartość 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 prowadzić do znacznego zwiększenie rozmiaru dokumentu HTML przesyłanego do klienta. Należy również wiedzieć, że pole to nie jest szyfrowane, a jedynie kodowane przy pomocy Base64. Za pomocą odpowiednich aplikacji można podejrzeć jego zawartość.

Na szczęście ViewState można wyłączyć 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 zdarzeń 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 zdarzeń związanych ze stroną. Występują one zawsze w tej samej kolejności, która jest opisywana jako cykl życia strony.

Do najważniejszych zdarzeń 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ąpić 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 ustawić właściwość AutoPostBack. Dla przykładu jeśli chcemy, aby zmiana w liście rozwijanej spowodowała przesłanie strony do serwera, należy użyć następującej definicji:


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 wykonać 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żyć właściwości IsPostBack, zwracającej wartość 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żywać 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 sprawdzić, czy strona jest po raz pierwszy przesyłana do klienta.


Wykorzystywanie osadzonych kontrolek MulitView

Zobaczmy, jak można wykorzystać zaawansowane kontrolki ASP.NET do rozwiązania typowego problemu, z jakim możemy się spotkać 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 zaprojektować ankietę, która posiada część wspólną i część zależną np. od wybranego elementu na stronie. Przykładowo na podstawie wybranej płci chcemy zadać odpowiednie pytania. Dodatkowo chcemy mieć możliwość 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świetlić odpowiednie pytania. Szkic kontrolek prezentuje Rys. 3.


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 zapewnić, aby po zmianie wyświetlanej wartości nastąpiło wysłanie strony do serwera i zmiana wyświetlanego widoku. Aby to umożliwić musimy określić właściwość 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 napisać metodę obsługi zdarzenia SelectedIndexChanged kontrolki plecDropDownList. Aby ją dodać, należy w oknie Properties wybrać ikonę Events, a następnie dwukrotnie kliknąć SelectedIndexChanged. Do metody należy dodać następujący kod:

if (plecDropDownList.SelectedValue=="K") {

MultiView2.SetActiveView(Kobieta);

}

else if (plecDropDownList.SelectedValue == "M") {

MultiView2.SetActiveView(Mezczyzna);

}


Strona 5-11

Teraz musimy zapewnić, ż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ść wybraną w liście rozwijanej). W tym celu do metody Page_Load należy dodać następujący kod:

if (!IsPostBack) {

Multiview1.SetActiveView(Ankieta);

MultiView2.SetActiveView(Kobieta);

}

Na koniec musimy jeszcze dodać przycisk, który wyśle ankietę do serwera. W metodzie obsługi zdarzenia Click zmienimy widok na Posumowanie:

Multiview1.SetActiveView(Podsumowanie);

Możemy teraz uruchomić stronę i sprawdzić, 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 wykorzystać kontrolkę AdRotator. Do poprawnego działania wymaga ona co najmniej podania adresu URL obrazka, który ma zostać wyświetlony w charakterze reklamy. Dodatkowo możemy sprecyzować inne informacje. Wszystkie wymagane dane umieszczamy w pliku XML o dowolnej nazwie, np. adv.xml. Przykład zawartości pliku:

<Advertisements>

<Ad>




</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 być względny lub bezwzględny. W celu zapewnienia zgodności z XHTML 1.0 należy również zdefiniować 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ę nadawać 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 zorientować się, do jakiego rodzaju elementów się odwołują. Możliwość 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żyć 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ść ID m.in. do automatycznego generowania nazw dla metod obsługi


Strona 5-12

zdarzeń. Jeśli zmienisz identyfikator kontrolki, nazwy tych metod nie zostaną zaktualizowane, zaś ich ręczna zmiana może być kłopotliwa, gdyż wymaga przeróbek w kilku miejscach.

• Kontrolek HTML używaj wtedy, gdy chcesz mieć 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ę wybrać, korzystniej będzie zdecydować się na kontrolkę Web.

• By móc odwoływać się do wybranego elementu HTML w kodzie po stronie serwera, musisz nadać mu atrybut runat="Server" oraz unikatowe ID. Jeśli zapomnisz o pierwszym z atrybutów, wartość ID będzie traktowana wyłącznie jako identyfikator elementu w wynikowym dokumencie HTML, w efekcie będziesz mógł odwoływać się do niego jedynie w kodzie JavaScript wykonywanym po stronie klienta.

• W kontrolkach DropDownList oraz CheckBoxList staraj się dla każdego elementu listy określić nie tylko właściwość Text, ale również Value. Dzięki temu w kodzie będziesz mógł odwoływać 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ą być użyte w połączeniu z ASP.NET AJAX do wysyłania żądań 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 wykorzystać nie tylko do wyświetlania losowych banerów reklamowych – równie dobrze mogą to być 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ślić właściwość AlternateText.

Walidacja danych

• Walidację danych po stronie klienta powinieneś stosować jedynie w celu ograniczenia ruchu do serwera, by w ten sposób zmniejszyć koszty utrzymania aplikacji i zwiększyć czas jej odpowiedzi w przypadku wprowadzenia przez użytkownika nieprawidłowych informacji. Po otrzymaniu danych po stronie serwera powinieneś zawsze walidować je ponownie. Użytkownik może stosunkowo łatwo obejść zabezpieczenia po stronie klienta i wymusić lub upozorować komunikację zwrotną. Jeśli nie zabezpieczysz aplikacji po stronie serwera, może ona paść ofiarą groźnych ataków, takich jak SQL Injection czy XSS (ang. Cross Site Scripting).

• Zdecydowana większość walidatorów wymaga, abyś określił ich właściwość ControlToValidate. Wyjątkiem jest CustomValidator, który może służyć 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ętać, że format liczb zmiennoprzecinkowych, daty oraz wartości walutowych zależy od ustawień przeglądarki lub systemu operacyjnego użytkownika. Dane uznane za poprawne po stronie klienta mogą w związku z tym spowodować 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 być zrozumiałe zarówno dla silnika wyrażeń regularnych używanego po stronie serwera, jak i tego, który jest dostępny w przeglądarce użytkownika. Powinieneś zatem ograniczyć się do pewnego podzbioru języka wyrażeń, który jest interpretowany tak samo przez najpopularniejsze przeglądarki oraz klasy do obsługi wyrażeń regularnych dostępne w .NET.

Obsługa zdarzeń związanych ze stroną

• Każde zdarzenie związane ze stroną możesz obsłużyć na przynajmniej dwa sposoby. Pierwszym, bardziej popularnym, jest przygotowanie metody o odpowiedniej sygnaturze.


Strona 5-13

Metoda taka powinny mieć zdefiniowany typ wartości zwracanej jako void, przyjmować dwa parametry – pierwszy typu object, drugi typu EventArgs – oraz posiadać 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 uzyskać 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ętać, by w jej ciele wywołać 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ść wyłączenia go z poziomu dyrektywy @Page. Pamiętaj, że jeśli tak postąpisz, będziesz musiał samodzielnie kojarzyć zdarzenia strony z odpowiednimi funkcjami obsługi lub przysłaniać odpowiadające im metody wirtualne. Zazwyczaj nie ma potrzeby wyłączania mechanizmu AutoEventWireup.

Uwagi dla studenta


• rozumiesz jak działają kontrolki serwerowe w ASP i w jaki sposób możesz się programowo do nich odwołać

• umiesz tworzyć zaawansowane strony internetowe bazujące na kontrolce MultiView i wielu widokach

• wiesz jak sprawdzać poprawność danych wprowadzonych przez użytkownika

• wiesz jak wygląda cykl życia strony oraz w jaki sposób sprawdzić, czy strona jest po raz pierwszy wysyłana do użytkownika



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ęć 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.


Strona 5-14



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 być 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ęcić do wspólnego podróżowania, tworząc społeczność użytkowników jej produktów. W tym celu musi pozyskać informację o preferencjach tej grupy klientów.

W ankiecie dla potencjalnego klienta powinieneś pobrać następujące informacje:

• imię

• płeć

• wiek

• adres e-mail

• telefon


• wzrost

• rama roweru, do wyboru:

• damska

• męska

• nie ma znaczenia

• marka, do wyboru (można zaznaczyć 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łeć

• wiek

• adres e-mail

• telefon



Strona 5-15

• rodzaj posiadanego roweru:

• górski

• miejski

• szosowy

• BMX

• dziecięcy

• nie wiem

• data ostatniej wycieczki

• data następnej wycieczki

• ilość kilometrów średnio na jednej wycieczce

• poziom umiejętności

• preferowany sposób kontaktu


1. Utwórz nową stronę w Visual Web Developer 2008 Express Edition

• Otwórz Visual Web Developer 2008 Express Edition.



• Z listy Location wybierz File System, a w polu obok określ lokalizację dla pliku w dowolnym miejscu na dysku.


• 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.


• Z listy Visual Studio installed templates wybierz Web Form.

• W polu Name wpisz Ankieta.aspx.


• 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ść ID na mainMultiView.

• Dodaj do kontrolki MultiView dwie kontrolki View, nazywając je po kolei: ankietaGlowna i podsumowanie.

Piotr Bubacz ITA-103 Aplikacje Internetowe

5. Przygotuj wspólną początkową część obu ankiet

• W kontrolce Enowej linii

• W dodanej linii nDropDownListplecDropDownListItems

• Wciśnij przycisk

—

—


—

—


—

—

—

• Wciśnij

• Do formularza dodaj kontrolki użytkownika następujących danych:

—

—

—

—

—

—

—

6. Dodaj kontrolkę MultiView

• W kontrolce dodaj kontrolkę

• Dodaj do kontrolki kolei:

Strona 5-16

Zauważ, że można wyłonić część wspólną obydwu ankiet

W kontrolce ankietaGlowna w widoku Design nter, a następnie umieść kontrolkę TextBox i

nowej linii. W oknie Properties określ właściwość

W dodanej linii na formularzu napisz Płeć:DropDownList. W oknie Properties określ właplecDropDownList. Kliknij Smart Tag dodanej kontrolki i wybierz Items.

Wciśnij przycisk Add, a następnie w obszarze ListItem

— 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ść (ID: miejscTextBox)

W kontrolce View o ID=AnkietaGlowna poniżej dodanych kontrolek dodaj kontrolkę MultiView i nazwij ją ankietaMultiView

Dodaj do kontrolki MultiView dwie kontrolki Viewkolei: nowyView i wycieczkiView.

Moduł 5 Kontrolki serwerowe

ą obydwu ankiet.

napisz Imię: i naciśnij i ponownie przejdź do

ość (ID) na imieTextBox.

Płeć: i umieść kontrolkę określ właściwość (ID) na

dodanej kontrolki i wybierz Edit

ListItem properities:



umożliwiające pobranie od

poniżej dodanych kontrolek ankietaMultiView.

View, nazywając je po


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: i 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 — tekst wyświetlany: Męska, wartość: M — tekst wyświetlany: Nie ma znaczenia, wartość: N, zaznaczenie

• Wpisz Marka: i dodaj kontrolkę ListBox o ID="markaListBox". Kliknij Smart Tag i wybierz Edit Items.


— tekst wyświetlany: Cateye, wartość: C — tekst wyświetlany: Giant, wartość: G — tekst wyświetlany: Kenda, wartość: Ke — tekst wyświetlany: Kross, wartość: Kr — tekst wyświetlany: Nie ma znaczenia, wartość: N, zaznaczenie

• Wpisz Rodzaj roweru: i dodaj kontrolkę ListBox o ID="rodzajListBox". Kliknij Smart Tag i wybierz Edit Items.


— tekst wyświetlany: Górski, wartość: G — tekst wyświetlany: Miejski, wartość: M — tekst wyświetlany: Szosowy, wartość: S — tekst wyświetlany: BMX, wartość: B — tekst wyświetlany: Dziecięcy, wartość: D — tekst wyświetlany: Nie wiem, wartość: 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ść: 0, zaznaczenie — tekst wyświetlany: do 500 zł, wartość: 5 — tekst wyświetlany: 500 – 1000 zł, wartość: 10 — tekst wyświetlany: 1000 - 1500, wartość: 15 — tekst wyświetlany: pow. 1500, wartość: 20 — tekst wyświetlany: Zakres:, wartość: 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".


8. Dodaj kontrolki do kontrolki View Stary

• Ustaw kursor

• Wpisz owła

—

—

—

—

—

—

• Wpisz ID="

• Wpisz ID="

• Wpisz TextBox

• Wpisz ID="wła

—

—

—

9. Dodaj wspólną część końcową

• Poniżej kontrolki Preferowanyowła

—

—

—

• Poniżej dodaj kontrolkę Wyślij

10. Dodaj podsumowanie ankiety

• W kontrolce Dziękujemy za wypełnienie ankietygłównej.

Strona 5-18

Ustaw kursor wewnątrz kontrolki View o ID="wycieczkiView

Wpisz Rodzaj posiadanego roweru: i dodaj kontrolkę o ID="posiadaListBox". Dodaj do listy elementy owłaściwościach:

— tekst wyświetlany: Górski, wartość: G — tekst wyświetlany: Miejski, wartość: M — tekst wyświetlany: Szosowy, wartość: S — tekst wyświetlany: BMX, wartość: B — tekst wyświetlany: Dziecięcy, wartość: D — tekst wyświetlany: Nie wiem, wartość: N, zaznaczenie

Wpisz Data ostatniej wycieczki i dodaj poniżej kontrolkę ID="ostatniaCalendar".

Wpisz Data następnej wycieczki: i dodaj poniżej kontrolkę ID="nastepnaCalendar".

Wpisz Ilość kilometrów średnio na jednej wycieczce:TextBox o ID="kmTextBox".

Wpisz Poziom umiejętności: i dodaj kontrolkę ID="poziomDropDownList". Dodaj do listy elementy owłaściwościach:

— tekst wyświetlany: Początkujący, wartość: P — tekst wyświetlany: Średniozaawansowany, wartość— tekst wyświetlany: Zaawansowany, wartość: Z

Poniżej kontrolki ankietaMultiView w nowym wierszu Preferowany rodzaj kontaktu: i dodaj kontrolkę o ID="kontaktCheckBoxList". Dodaj do listy elementy owłaściwościach:

— tekst wyświetlany: E-Mail, wartość: E — tekst wyświetlany: Telefon, wartość: T — tekst wyświetlany: Osobisty, wartość: O

Poniżej dodaj kontrolkę Button i w oknie Properities Wyślij, a w polu (ID) – wyslijButton.

W kontrolce View o ID="Podsumowanie" w widoku Dziękujemy za wypełnienie ankiety i wstaw głównej.

Odnośniki do stron projektu można szybko dodawać przeciągając dany plik z okna Solution Explorer.


wycieczkiView".

i dodaj kontrolkę ListBox elementy o następujących

, zaznaczenie

i dodaj poniżej kontrolkę Calendar o

i dodaj poniżej kontrolkę Calendar o

Ilość kilometrów średnio na jednej wycieczce: i dodaj kontrolkę

i dodaj kontrolkę DropDownList o elementy o następujących

wartość: S Z

w nowym wierszu wpisz i dodaj kontrolkę CheckBoxList

elementy o następujących

Properities w polu Text wpisz

w widoku Design napisz wstaw odnośnik do strony

Odnośniki do stron projektu można szybko dodawać przeciągając dany


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



Ponieważ chciałbyś się maksymalnie wykazać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.wymagane:

• imię

• adres e-mail

Sprawdzenie poprawności wpisanych danych

• adres e-mail (poprawny adres e

• telefon (same cyfry w formacie 1234567890)

• wzrost (liczba od 50 do 250 cm)

• cena od i do (zarówno wartość, jak i porównanie wpisanych wartości od<do)


1. Dodaj kontrolki sprawdzające, czy pole zostało wypełnione

• Do wstaw obok o

• Wybierz dodaną kontrolkę i w oknie

—

—

—

• Wstaw obok kontrolki

• Wybierz dodaną kontrolkę i w oknie

—

—

—

• Zapiwypełnienia informacji w

2. Dodaj kontrolkę wyświetlającą informacje o błędach

• Do formularza mainMultiView(kategoria

• Zapisz zmiany i przetestuj możliwość wysłania formularza bez wypełnienia informacji w

• Wróć do edycji stronykontrolki właściwość

Strona 5-20


Ponieważ chciałbyś się maksymalnie wykazać, postanowiłeś rozszerzyć 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 p

Sprawdzenie poprawności wpisanych danych powinno odbywać się w następujących polach:

(poprawny adres e-mail w formacie użytkownik@serwer

(same cyfry w formacie 1234567890)

(liczba od 50 do 250 cm)

do (zarówno wartość, jak i porównanie wpisanych wartości od<do)

Tok postępowania

Do wcześniej utworzonego formularza Ankieta.aspxwstaw obok kontrolki imieTextBox kontrolkę RequiredFieldValidatorokna Toolbox (kategoria Validation).

Wybierz dodaną kontrolkę i w oknie Properties:

— w polu ControlToValidate z listy rozwijanej wybierz — 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 — w polu ErrorMessage wpisz Pole E-mail jest wymagane— w polu Text wpisz *

Zapisz zmiany i przetestuj możliwość 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?

Do formularza Ankieta.aspx na końcu (za kontrolką mainMultiView) wstaw kontrolkę ValidationSummary(kategoria Validation).

Zapisz zmiany i przetestuj możliwość wysłania formularza bez wypełnienia informacji w polach Imię i E-Mail.

Czy pojawia się komunikat wpisany w polu ErrorMessagegdzie i dlaczego?

Wróć do edycji strony i przetestuj inne możliwości kontrolki ValidationSummary zmieniając w oknie właściwość DisplayMode.


postanowiłeś rozszerzyć stronę o zabezpieczenia formularzy przed błędnym wypełnieniem pól, jak również określając niektóre pola jako wymagane.

Określiłeś następujące pola

powinno odbywać się w następujących polach:

serwer.domena)

do (zarówno wartość, jak i porównanie wpisanych wartości od<do)

aspx w widoku Design RequiredFieldValidator z

z listy rozwijanej wybierz imieTextBox Pole Imię jest wymagane

RequiredFieldValidator

z listy rozwijanej wybierz emailTextBox mail jest wymagane

sz zmiany i przetestuj możliwość wysłania formularza bez

Czy sprawdzenie wpisania danych to odbywa się po stronie serwera Zobacz źródło strony. W jaki sposób jest realizowane to

est wypisywane obok kontrolki? Czy pojawia się

(za kontrolką MultiView - ValidationSummary z okna Toolbox

Zapisz zmiany i przetestuj możliwość wysłania formularza bez

ErrorMessage? Jeśli tak, to

etestuj inne możliwości wyświetlania w oknie Properties jej


Strona 5-21

3. Dodaj kontrolki sprawdzające poprawność wpisanych danych za pomocą wyrażeń 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:


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ść wysłania formularza z błędami w kontrolkach.

4. Dodaj kontrolki sprawdzające poprawność 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ść w polu Do musi być 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 zamień istniejącą linię następującym kodem:

if (IsValid)

{ mainMultiView.SetActiveView(podsumowanie); }

• Zapisz zmiany i przetestuj możliwość wysłania formularza z błędami w kontrolkach.


Strona 5-23


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świetlać losowo określone reklamy umieszczone na serwerze.


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>



</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ść wyświetlania reklam na stronie.


Strona 5-24



Jesteś już specjalistą w zakresie ankiet, więc otrzymujesz coraz więcej zleceń. Twój kolejny klient poprosił Cię o przygotowanie ankiety dla internetowego sklepu z odzieżą. Ma ona być 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ść między 10 a 100)

• płeć

• wykształcenie

• rozmiar (wartość między 20 a 50)

Pytania wspólne dla nowych klientów:

• Ile jesteś w stanie przeznaczyć 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świetlić 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ść 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ść losowego wyświetlania reklam wraz z rejestracją ilości kliknięć banera.


Piotr Bubacz

Moduł 6

Wersja 1

Projektowanie serwisów

internetowych

Spis treści

Projektowanie serwisów internetowych ............................................................................................. 1
















ITA-103 Aplikacje Internetowe Projektowanie serwisów internetowych

Strona 6-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące zarządzania wyglądem

aplikacji i tworzenia elementów nawigacyjnych. Poznasz możliwości

centralnego zarządzania wyglądem witryny przy pomocy stron wzorcowych

i kompozycji. Poznasz metody tworzenia mapy witryny internetowej oraz

nauczysz się, jak wykorzystywać kontrolki nawigacyjne.

Cel modułu

Celem modułu jest przedstawienie możliwości utrzymania wspólnego

wyglądem aplikacji przy użyciu stron wzorcowych i kompozycji oraz

możliwości tworzenia centralnie zarządzanych elementów nawigacyjnych.



• wiedział jak zarządzać wyglądem aplikacji przy użyciu stron

wzorcowych i kompozycji

• potrafił tworzyć centralnie zarządzane mapy witryny

• potrafił wyświetlać mapę witryny przy pomocy kontrolek

nawigacyjnych

Wymagania wstępne



tworzenia stron internetowych,

• potrafić tworzyć nowe aplikacje internetowe i dodawać strony.




w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS”

i „Wprowadzenie do ASP.NET”




Strona 6-3



Przeglądając serwisy internetowe możemy zauważyć, że każda strona wygląda podobnie.

Wspólnymi elementami są menu, baner czy inne wizualne komponenty strony. Aby utrzymać

wspólny wygląd strony tworzonej w XHTML należało zaprojektować wspólne elementy, a później

przekopiować je na każdą nową stronę. Oczywiście nie było to rozwiązanie dobre. Nie mówiąc o

problemach przy kopiowaniu należy pamiętać, że zmiana jakiegokolwiek elementu w części

wspólnej powodowała konieczność zmian we wszystkich plikach serwisu.

Kolejnym problemem jest wygląd strony. Już wiesz, że można go określić w pliku CSS, ale co, jeśli

chcemy okresowo zmieniać wygląd naszej witryny. Co jeśli chcemy, aby strona wyglądała inaczej w

zimie, lecie czy na jesień i wiosnę. Oczywiście możemy podmieniać wskazania pliku CSS na stronie,

jednak nie jest dobre rozwiązanie, szczególnie jeśli mamy kilka stron w serwisie. Chcielibyśmy mieć

centralne zarządzanie plikami CSS wykorzystywanymi przez stronę.

Ostatni problem na jaki napotkasz się tworząc serwisy internetowe to menu. Tworzenie menu jako

zbioru odnośników do stron jest może rozwiązaniem prostym, ale zdecydowanie nieoptymalnym.

Chcielibyśmy mieć centralne miejsce do zarządzania elementami nawigacyjnymi. Dodatkowo

musimy mieć możliwość prostego wyświetlania naszej strony. Do tego celu potrzebujemy zbioru

kontrolek nawigacyjnych.


Budowanie wyglądu serwisu w oparciu o strony wzorcowe

Strony serwisu internetowego posiadają wiele wspólnych elementów, które powinny być

wyświetlane na każdej ze stron (np. logo, elementy nawigacyjne itp.). Tworzenie podobnych stron

można wykonać kopiując wspólne elementy. Gdy tych stron jest dużo lub jeśli w pewnym

momencie zaistnieje potrzeba zmiany wyglądu serwisu, wtedy takie rozwiązanie jest niepraktyczne.

ASP.NET został wyposażony w mechanizm stron wzorcowych, umożliwiających grupowanie

pewnych wspólnych elementów z wielu stron w jednym pliku.

Strona wzorcowa (ang. Master Page) umożliwia tworzenie wspólnego wyglądu dla całej witryny

internetowej. Stanowi ona szkielet dla treści dostarczanej przez poszczególne strony i zawiera tylko

wspólne elementy. Miejsce, w którym ma zostać umieszczona treść właściwej strony, jest

określone przez specjalną kontrolkę ContentPlaceHolder. Ze względu na fakt, że możliwe jest

umieszczenie dowolnej ilości kontrolek ContentPlaceHolder, każda kontrolka musi być

jednoznacznie nazwana za pomocą identyfikatora kontrolki ID.

Strona z zawartością (ang. Content Page) korzysta ze strony wzorcowej, wypełniając miejsca

określone przez ContentPlaceHolder. Treść jest umieszczona w kontrolce Content. Kontrolka

ta musi odwoływać się do odpowiedniej kontrolki ContentPlaceHolder za pomocą parametru

ContentPlaceHolderID (Rys. 2).

Rys. 2 Tworzenie strony internetowej na podstawie stron: wzorcowej i zawartości

Strona wzorcowa i strona zawartości mogą zawierać dowolne kontrolki serwerowe, jak również

własny kod programowy. Zawartości obu stron są łączone w jedną strukturę i wysyłane do klienta,

dzięki temu są widoczne jako jedna całość.



Strona 6-4

Strona zawartości może umieszczać kontrolki tylko w wyznaczonych miejscach. Istnieje możliwość

umieszczenia kontrolki w dowolnym miejscu na stronie przy pomocy pozycjonowania CSS, ale jest

to w najwyższym stopniu niewskazane. Zmiana szablonu nie spowoduje zmiany położenia kontrolki.

Jeśli musimy coś dodać w określonym miejscu, najłatwiej jest zdefiniować w stronie wzorcowej

kolejną kontrolkę ContentPlaceHolder.

Aby ułatwić tworzenie rozbudowanych serwisów internetowych, możliwe jest zagnieżdżanie stron

wzorcowych. Visual Studio 2008 wspiera ich wizualne projektowanie.

Konwersja istniejącej strony Web na stronę zawartości

Przy projektowaniu aplikacji istnieje czasami konieczność dopasowania istniejącej strony Web do

całego portalu. W tym celu należy z konwertowanej strony usunąć następujące znaczniki:

• <!DOCTYPE>

• <html>

• <head>

• <body>

• <form>

Następnie należy do dyrektywy @Page dodać atrybut MasterPageFile, podając właściwą nazwę

pliku strony wzorcowej. W kolejnym kroku przed treścią strony powinno się dodać znacznik

<asp:Content>. Znacznik ten musi posiadać atrybuty ID (dowolna nazwa),

ContentPlaceHolderID (nazwa kontrolki ContentPlaceHolder na stronie wzorcowej, w

której ma znaleźć się treść strony) oraz runat="Server". Na końcu pliku należy zamknąć znacznik

</asp:Content>.

Jeśli na stronie wzorcowej znajduje się klika kontrolek ContentPlaceHolder, to musimy

zapewnić, że każda z nich będzie posiadała na tej stronie kontrolkę Content z odpowiednim

ContentPlaceHolderID.

Sterowanie wyglądem aplikacji przy użyciu kompozycji

Przy użyciu arkusza styli (CSS) możliwe jest definiowanie wyglądu elementów w języku HTML, nie

jest to jednak możliwe w przypadku kontrolek serwerowych ASP.NET. CSS może zmienić

interpretacje kodu HTML generowanego przez kontrolkę serwerową, ale nie ma wpływu na samą

kontrolkę. Aby umożliwić scentralizowany sposób sterowania wyglądem kontrolek, wprowadzono

kompozycje (ang. themes).

Kompozycje są umieszczone na serwerze w specjalnym katalogu App_Themes, w podkatalogach,

których nazwy są nazwami kompozycji. Podkatalogi zawierać mogą pliki .skin (plik motywu) oraz

pliki arkuszy styli .css. Pliki styli zostaną dołączone do nagłówka każdej ze stron.

Wizualne cechy kontrolek Web określa się za pośrednictwem pliku motywu (.skin). Pojedynczy

folder kompozycji może zawierać dowolną liczbę takich plików. Pliki motywów zawierają znacznik

identyfikujący daną kontrolkę serwerową wraz z parametrami.

Definicja motywów ma wpływ tylko na wygląd kontrolek serwerowych Web, nie ma natomiast

wpływu na następujące elementy:

• elementy HTML

• kontrolki serwerowe HTML

• kontrolki serwerowe Web, które nie mają właściwości wizualnych

• niewizualne właściwości kontrolek serwerowych Web (np. AutoPostBack)

Stosowanie kompozycji do wszystkich stron witryny jest możliwe w pliku Web.config w sekcji

<system.web> przy pomocy znacznika <pages>. Przykład:

<pages theme="NiebieskaSkorka" />



Strona 6-5

W celu utworzenia kompozycji należy w oknie Solution Explorer kliknąć prawym przyciskiem i

wybrać Add ASP.NET Folder, a następnie Theme. W tym momencie możliwe jest określenie

dowolnej nazwy folderu, która jednocześnie będzie nazwą kompozycji.

W celu dodania pliku kompozycji należy kliknąć prawym przyciskiem katalog zawierający

kompozycję i wybrać z menu opcje Add New Item, a następnie Skin File i wcisnąć przycisk Add.

Rys. 3 Dodanie pliku motywu

W utworzonym pliku należy następnie umieścić znaczniki i parametry definiujące wygląd strony.

Nawigacja w serwisie internetowym

Większość serwisów internetowych posiada menu – zbiór odnośników do poszczególnych stron.

Możliwe jest określenie tego zbioru ręcznie na każdej stronie lub na stronie wzorcowej, jednak nie

jest to rozwiązanie elastyczne. Dodatkowo problemem jest ukrywanie części odnośników przed

użytkownikami anonimowymi oraz ograniczanie dostępu do odnośników dla różnych grup

użytkowników.

W ASP.NET 2.0 zaproponowano spójny, łatwy do zarządzania, scentralizowany system dostarczania

informacji o mapie serwisu. Możliwości systemu nawigacji:

• Centralne zarządzanie logiczną strukturą witryny – dodawanie lub usuwanie odnośników do

stron domyślnie odbywa się w pliku Web.sitemap. Możliwe jest określenie innego dostawcy.

• Kontrolki nawigacyjne – kontrolki umożliwiające wyświetlenie menu serwisu bazujące na

pliku Web.sitemap.

• Reguły dostępu – możliwość określania reguł wyświetlania lub ukrywania odnośników w

menu nawigacji.

• Możliwość programowego dostępu do kontrolek nawigacji i wyświetlanych w nich informacji.

Tworzenie mapy witryny

Pierwszym krokiem wykorzystania systemu nawigacji w ASP.NET jest określenie struktury serwisu.

Standardowo system nawigacji serwisem wykorzystuje plik XML Web.sitemap zawierający

hierarchię stron.

Plik Web.sitemap musi być umieszczony w katalogu głównym aplikacji. Zawiera on elementy

<siteMapNode> dla każdej strony serwisu. Hierarchię serwisu ustala się poprzez osadzanie

elementów <siteMapNode>. Każdy z nich zawiera następujące atrybuty:

• title – określa tekst wyświetlany w kontrolkach nawigacyjnych



Strona 6-6

• description - określenia tekst pomocy pojawiający się po ustawieniu kursora nad pozycją

menu (ang. tool tip)

• url – określa lokalizację strony

Przykład pliku Web.sitemap:

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

<siteMapNode>

<siteMapNode url="Default.aspx" title="Strona główna"

description="Przenieś do strony głównej" />

<siteMapNode title="Produkty" description="Zapoznaj się z ofertą">

<siteMapNode url="Produkty.aspx" title="Przeglądaj"

description="Przejrzyj dostępne artykuły" />

<siteMapNode url="Szukaj.aspx" title="Szukaj"

description="Wyszukaj po nazwie" />

</siteMapNode>

</siteMapNode>

</siteMap>

Kontrolki nawigacyjne

Kolejnym krokiem po określeniu struktury jest wyświetlenie jej na stronie serwisu. ASP.NET

udostępnia następujące kontrolki nawigacyjne:

• SiteMapPath

• TreeView

• Menu

Kontrolka SiteMapPath

Kontrolka SiteMapPath wyświetla ścieżkę nawigacji. Prezentuje ona użytkownikowi lokalizację i

wyświetla odnośniki umożliwiające nawigację do strony domowej.

Rys. 4 Kontrolka SiteMapPath

Kontrolka TreeView

Kontrolka TreeView wyświetla mapę serwisu w postaci struktury. Węzły zawierające elementy

potomne mogą być rozwijane lub zwijane po kliknięciu ich.

Rys. 5 Przykład kontrolki TreeView a) cała b) zwinięty jeden węzeł



Strona 6-7

Kontrolka Menu

Kontrolka Menu wyświetla menu rozwijane. Węzły zawierające elementy potomne są rozwijane w

momencie, kiedy przesunie się nad nimi kursor.

Rys. 6 Przykład działania kontrolki Menu

Podsumowanie

W tym rozdziale przedstawiliśmy podstawowe informacje dotyczące budowania witryn

internetowych w oparciu o strony wzorcowe. Pokazaliśmy, jak tworzyć i zarządzać wyglądem

witryny przy pomocy kompozycji oraz jak tworzyć mapę witryny i wykorzystywać kontrolki

nawigacyjne do jej prezentowania.


Tworzenie strony wzorcowej i stron zawartości

Naszym zadaniem jest utworzenie szablonu serwisu internetowego dla klienta. Szablon ma

zawierać elementy przedstawione na Rys. 7.

Rys. 7 Szablon strony

Po utworzeniu nowego projektu aplikacji internetowej dodamy stronę wzorcową do projektu. Za

pomocą menu Website -> Add New Item, lub poprzez kombinację klawiszy Ctrl+Shift+A. W oknie

dialogowym Add New Item należy wybrać szablon Master Page oraz w oknie Name nadać mu

nazwę SzablonStrony.master. Dodatkowo zaznaczymy opcję Place Code In Separate File, aby

umieścić kod strony w osobnym pliku. Po kliknięciu przycisku Add tworzony jest plik strony

wzorcowej zawierający już dwie kontrolki ContentPlaceHolder. Pierwsza kontrolka umożliwia

dodanie treści do nagłówka strony. Dzięki temu na stronie zawartości możemy dodać plik CSS lub

skrypt wykonywany po stronie klienta. Druga kontrolka zawiera treść, która zostanie wypełniona na

stronie zawartości.

Teraz należy odpowiednio przygotować naszą stronę wzorcową. Aby to wykonać, usuniemy

kontrolkę ContentPlaceHolder. Ułatwi nam to opisanie kolejnych czynności. Następnie dodamy

do znacznika <div> właściwość ID="Strona". W kolejnym kroku dodamy dwa znaczniki <div>,

pierwszy o ID="Naglowek", drugi o ID="ObszarRoboczy". Następnie do znacznika

zawierającego nagłówek dopiszemy: Logo. Do znacznika <div> o ID="ObszarRoboczy" dodamy

kolejne dwa znaczniki <div> o ID="Menu" i ID="Tresc". Do znacznika <div> o ID="Menu"

wpiszemy Menu, a do znacznika o ID="Tresc" dodamy kontrolkę ContentPlaceHolder.

Tak przygotowana strona wzorcowa będzie stanowiła bazę dla kolejnych podstron. Warto jeszcze

zdefiniować wygląd poszczególnych sekcji w CSS, ze szczególnym uwzględnieniem odpowiedniego

rozmieszczenia obszaru treści i menu.

Zauważmy, że strona wzorcowa różni się od formularza internetowego tylko dwiema kontrolkami

ContentPlaceHolder. Kontrolki te będą wypełniane przez strony zawartości bazujące na tej



Strona 6-8

stronie. Strona zawartości korzystająca z tej strony wzorcowej musi zawierać dwie kontrolki

Content, których atrybut ContentPlaceHolderID jest równy ContentPlaceHolder1 oraz

head. Naszym zadaniem jest umieścić odpowiednią treść w tych kontrolkach, która później

zostanie połączona z szablonem strony i wyświetlona w przeglądarce użytkownika jako jedna

strona XHTML.

Nie możemy zobaczyć szablonu strony bez strony zawartości. Musimy zatem dodać nową stronę

zawartości bazującą na naszym szablonie.

Dodawanie stron zawartości

Kolejnym krokiem jest dodanie strony zawartości, która będzie bazowała na stronie wzorcowej.

Strona zawartości to formularz internetowy, którego treść umieszczona jest w kontrolkach

Content odpowiadających kontrolkom ContentPlaceHolder na stronie wzorcowej.

Stronę zawartości dodajemy do aplikacji podobnie jak formularz internetowy, z tą tylko różnicą, że

w oknie Add New Item (Rys. 8) dodatkowo zaznaczamy opcję Select master page.

Rys. 8 Okno Add New Item dla strony zawartości

Po kliknięciu przycisku Add zostaniemy proszeni o wybranie strony wzorcowej (Rys. 9). W aplikacji

możemy zdefiniować klika szablonów stron. Co więcej, szablony te mogą być zagnieżdżane.

Rys. 9 Okno Select a Master Page



Strona 6-9

Po wybraniu przycisku OK tworzona jest nowa strona zawartości oparta na wybranej stronie

wzorcowej. Zawiera ona dyrektywę @Page, w której oprócz standardowych właściwości znajduje

się właściwość określająca szablon strony. Na stronie znajdują się również dwie kontrolki Content

odwołujące się do odpowiednich kontrolek ContentPlaceHolder.

Po przełączeniu w widok Design (Rys. 10) widoczna jest strona będąca połączeniem strony

wzorcowej i strony zawartości. Dzięki temu programista widzi ją tak, jak zostanie ona wysłana do

użytkownika. Część zdefiniowana w stronie wzorcowej jest oznaczona kolorem szarym, a

dodawanie kontrolek jest możliwe wyłącznie w kontenerze Content oznaczonym kolorem białym.

Umieszczenie kursora na szarym tle powoduje zmianę kursora na znak zakazujący.

Rys. 10 Widok WYSIWYG strony zawartości

Możemy teraz wyświetlić naszą stronę zawartości w przeglądarce. Po uruchomieniu widzimy stronę

składającą się z elementów umieszczonych zarówno na stronie wzorcowej, jak i stronie zawartości.

Konwersja istniejącej strony Web na stronę zawartości

Projektując aplikację internetową czasami potrzebujemy dodać do projektu starą stronę

przygotowaną bez użycia szablonu. W tym celu należy ze strony usunąć następujące znaczniki ze

starej strony:

• <!DOCTYPE>

• <html>

• <head>

• <body>

• <form>

Należy pamiętać, że musimy usunąć znaczniki początkowe i końcowe zostawiając właściwą treść

strony. Następnie należy do dyrektywy @Page dodać atrybut MasterPageFile, określający

lokalizację pliku strony wzorcowej. Następnie pod dyrektywą @Page, a przed treścią strony należy

dodać znacznik:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

Jeśli potrzebujemy dodać coś w nagłówku strony, to możemy to umieścić właśnie w tym znaczniku.

W naszym prostym przypadku nie potrzebujemy nic dodawać, zatem zostawiamy pustą zawartość.

Kolejno do strony należ dodać znacznik <asp:Content>. Znacznik ten musi posiadać atrybuty ID

(dowolna nazwa), ContentPlaceHolderID (nazwa kontrolki ze strony wzorcowej

ContentPlaceHolder, w której ma znaleźć się treść strony) oraz runat="Server". W naszym

przypadku:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"

Runat="Server">

Na końcu pliku musimy zamknąć znacznik </asp:Content>.



Strona 6-10

Jeśli w stronie wzorcowej znajduje się więcej niż dwie kontrolki ContentPlaceHolder, to należy

do strony zawartości dodać odpowiednio tyle kontrolek Content tak, aby każda kontrolka ze

strony wzorcowej miała odniesienie na stronie zawartości.

Sterowanie wyglądem aplikacji przy użyciu kompozycji

Naszym zadaniem będzie stworzenie wyglądu witryny w taki sposób, aby możliwa była szybka

zmiana wyglądu strony. Do tego celu użyjemy kompozycji.

W celu utworzenia kompozycji należy w oknie Solution Explorer kliknąć prawym przyciskiem i

wybrać Add ASP.NET Folder, a następnie Theme. W tym momencie możliwe jest określenie nazwy

folderu, która jednocześnie będzie nazwą kompozycji. W naszym przypadku będzie to

SkorkaZima.

Następnie dodajemy do folderu plik CSS, w którym znajdują się odpowiednie definicje wyglądu

elementów na stronie. Oprócz pliku CSS możemy również wykorzystać plik motywów. W celu

dodania pliku motywów należy kliknąć prawym przyciskiem katalog zawierający kompozycję i

wybrać z menu opcje Add New Item, a następnie Skin File i wcisnąć przycisk Add. W utworzonym

pliku należy następnie umieścić znaczniki i parametry definiujące wygląd strony.

Aktualnie wykorzystywaną kompozycje przez aplikacje definiujemy w pliku Web.config w sekcji

<system.web> przy pomocy znacznika <pages>. Przykład:

<pages theme="SkorkaZima" />

Możliwe jest również umieszczenie bezpośredniego odniesienia do odpowiedniego pliku w sekcji

head każdej strony w aplikacji, jednak ustawienia wykonane w pliku Web.config przykrywają

ustawienia lokalne w sekcji <head>.

Porady praktyczne

Strony wzorcowe

• Praca ze stroną wzorcową jest analogiczna do pracy z formularzem internetowym. Możliwe

jest dodawanie dowolnych kontrolek i wykonywanie dowolnego kodu aplikacji. Należy

jednak pamiętać, że kontrolki i kod tej strony będą wykonywane na wszystkich potomnych

stronach.

• Przy dodawaniu do projektu strony już istniejącej należy:

• w dyrektywie @Page wskazać lokalizację bezwzględną strony wzorcowej rozpoczynając od

głównej strony serwisu "~/"

• dodać tyle kontrolek Content, aby wszystkie kontrolki ContentPlaceHolder miały

swoje odwzorowanie

Kompozycje

• Tworzenie kompozycji należy zacząć od stworzenia kompozycji bazowej, a następnie

zmieniać ją odpowiednio do potrzeb.

• Aby możliwe było projektowanie strony w trybie podglądu, powinieneś określić styl bazowy

w nagłówku strony wzorcowej.

• W katalogu kompozycji możemy umieścić nie tylko pliki CSS i kompozycje, ale również

elementy graficzne niezbędne dla odpowiedniego wyglądu strony.

Nawigacja w serwisie

• W pliku Web.sitemap określaj zawsze element nadrzędny <siteMapNode>, a następnie w

kontrolce Menu określ właściwość ShowStartingNode="False".

• W pliku Web.sitemap staraj się zawsze umieszczać właściwość description. Ułatwi to

odnajdowanie ważnych elementów użytkownikom strony



Strona 6-11

• W pliku Web.sitemap nie musisz zawsze określać właściwości url. Jest to szczególnie

przydatne dla nadrzędnych opcji menu.

Uwagi dla studenta


• rozumiesz jak działają strony wzorcowe

• umiesz dodawać do projektu stronę wzorcową i stronę zawartości

• potrafisz dodawać i zarządzać kompozycjami

• potrafisz tworzyć mapy witryny w pliku Web.sitemap oraz wykorzystywać te informacje do

wyświetlania w kontrolkach nawigacyjnych





1. Strony wzorcowe – wprowadzenie,

http://aspnet.codeguru.pl/GuidedTourPL/webdev/webdev15.htm

Na stronie znajdziesz opis najważniejszych kwestii związanych ze stronami

wzorcowymi.

2. Stephen Walther, ASP.NET 2.0. Księga eksperta, Helion, 2008

W książce autor porusza wiele zagadnień związanych z ASP.NET 2.0. Z książki

nauczysz się tworzyć efektowne witryny internetowe, a także dbać o ich

bezpieczeństwo oraz wysoką skalowalność. Dowiesz się, jak można dodawać nowe,

jednolite strony do aplikacji webowych.

3. Webcast Wykorzystanie stron wzorcowych,

http://www.microsoft.com/poland/developer/net/webcasty/09_wykorzystanie_stron_wzorcow

ych/default.aspx

Webcast w języku polskim umożliwiający zapoznanie się w nieco ponad 11 min z

najważniejszymi kwestiami związanymi ze stronami wzorcowymi w ASP.NET.

Nauczysz się dodawać strony wzorcowe i strony zwartości. Poznasz również

mechanizm tworzenia mapy witryny i dodawania kontrolek nawigacyjnych.

4. Instrukcja: Dodawanie nawigacji do witryny sieci Web,

http://www.microsoft.com/poland/developer/net/podrecznik/customizing-01.mspx

Fragment podręcznika do ASP.NET, który w prosty sposób na przykładzie pokazuje,

jak tworzyć mapę witryny oraz dodawać kontrolki nawigacyjne.



Strona 6-12



Firma Adventure Works chciałaby w Polsce otworzyć sklep internetowy sprzedający rowery.

Ponieważ poprzednia ankieta, którą przygotowałeś bardzo im się spodobała, zaproponowali Tobie

wykonanie tej strony. Ich grafik zaproponował układ przedstawiony na Rys. 11. Twoim zadaniem

jest przygotowanie strony wzorcowej oraz zaprezentowanie jej klientowi.



1. Utwórz nową

stronę w Visual

Web Developer

2008 Express

Edition

• Otwórz Visual Web Developer 2008 Express Edition.






• Kliknij OK.

2. Utwórz

wzorzec strony

• Usuń z projektu stronę Default.aspx.

• Wybierz z menu opcję Websites -> Add New Item lub naciśnij

kombinację Ctrl+Shift+A.

• Z wyświetlonego okna dialogowego wybierz następujące opcje:

— Templates: Master Page

— Language: Visual C#

— Name: SzablonStrony.master

— Place Code In Separate File: zaznaczona

• Naciśnij przycisk Add.

• Program utworzy stronę wzorcową z dwiema kontrolkami

ContentPlaceHolder.

• Usuń kontrolkę ContentPlaceHolder o id="ContentPlaceHolder1".

3. Utworzenie

głównych

elementów strony

• Zmień tytuł strony na Adventure Works.

• Wewnątrz znacznika <body> dodaj:

<div id="Strona">



</div>



Strona 6-13

4. Podział

głównych

elementów

• Wewnątrz znacznika zawierającego nagłówek (id="Naglowek") dodaj:

Logo



• Wewnątrz znacznika zawierającego treść (id="Tresc") dodaj:

<div id="PierwszyObszarBoczny">Pierwszy obszar boczny</div>

<div id="DrugiObszarBoczny">Drugi obszar boczny</div>

<div id="ObszarRoboczy">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

5. Dodanie

nowego arkusza

stylów


• Z listy Visual Studio installed templates wybierz Style Sheet.

• W polu Name wpisz Style.css.

• Kliknij OK.

6. Określenie

pozycji

w obszarach

roboczych

• Przełącz widok strony na Design lub Split.

• Wybierz Format -> New Style.

• W polu Selector wpisz #PierwszyObszarBoczny.

• W górnej części okna z listy Define in wybierz Existing Style Sheet,

a z listy rozwijanej URL wybierz Style.css.

• Z listy Category wybierz Layout, a następnie określ właściwość float:

left.

• Z listy Category wybierz Position, a następnie określ właściwości width:

200 px oraz height: 300 px.

• Kliknij OK.

• Postępuj podobnie z selektorem #DrugiObszarBoczny, tylko zmień


7. Określenie

podstawowego

wyglądu

zawartości strony

• W pliku Style.css standardowo jest już dodany selektor znacznika

<body>. Kliknij go prawym przyciskiem myszy i wybierz Build Style.

• Określ właściwości font-family: Verdana, font-size: 8 pt i color:

#000033.

• Z listy Category wybierz Background, a następnie określ właściwość

backgroud-color: white.

• Z listy Category wybierz Box, a następnie określ właściwość margin: 0.

Upewnij się, że opcja Same for all jest zaznaczona.

• Kliknij OK.

• Otwórz plik SzablonStrony.master. W oknie Solution Explorer chwyć

myszką plik Style.css i upuść go w sekcji nagłówka strony za znacznikiem

</title>. Zobacz jak zmienił się podgląd pliku.

8. Określenie

wyglądu

pozostałych

elementów strony

• Przy pomocy narzędzi Visual Studio lub w kodzie pliku Style.css określ

następujące style:

— #Menu: kolor tła: #55BBFF, wielkość tekstu: 7.5pt

— #ObszarLogowania: wyrównanie tekstu (właściwość text-align): do

prawej, kolor tła #C3DBEA, margines wewnętrzny (ang. padding)

z góry i dołu 5px, z lewej i prawej 10px

— #ObszarRoboczy: kolor tła #EEE, margines wewnętrzny (ang.

padding) z góry i dołu 50px, z lewej i prawej 20px, margines z góry

i dołu 0, z lewej i prawej 200px

Piotr Bubacz


9. Dodaj logo do

strony

• Do aplikacji dodaj kat

następnie nazwij go

• Do katalogu dodaj

wskaż nowo dodany folder, w

następnie wskaż obrazek

• Usuń napis

kontrolkę

~/Ima

10. Dodawaj

stronę z

zawartością

• W oknie

Websites

• Z wyświetlonego okna dialogowego wybierz następujące opcje:

—

—

—

—

—

• Naciśnij przycisk

• W oknie dialogowym

SzablonStrony.master

11. Sprawdzenie

wyglądu strony w

przeglądarce

• W oknie

Default.aspx

Projektowanie serwisów internetowych

Strona 6-14

Do aplikacji dodaj katalog Images. Wybierz Website

następnie nazwij go Images.

Do katalogu dodaj obrazek AWlogo.jpg. W oknie

wskaż nowo dodany folder, wybierz Website ->

następnie wskaż obrazek AWlogo.jpg.

Usuń napis Logo na górze strony, a następnie w to miejsce

kontrolkę Image i w oknie Properties w polu

~/Images/AWlogo.jpg.

W oknie Solution Explorer wskaż nazwę aplikacji.

Websites -> Add New Item lub naciśnij kombinację

Z wyświetlonego okna dialogowego wybierz następujące opcje:

— Templates: Web Form


— Place Code In Separate File: zaznaczona

— Select Master Page: zaznaczona

— Nazwa: Default.aspx

Naciśnij przycisk Add.

W oknie dialogowym Select a Master Page

SzablonStrony.master, a następnie wciśnij OK.

Zawartość strony Default.aspx i wszystkich pozostałych można dodać

w kontrolce Content. Aby zmienić zawartość pozostałych części strony

należy dokonać edycji strony wzorcowej.

W oknie Solution Explorer kliknij prawym przyciskiem

Default.aspx i wybierz View In Browser.

Strona w przeglądarce powinna wyglądać podobnie jak na

Rys. 12 Wygląd strony po zastosowaniu stylów

Moduł 6


Website -> New folder, a

W oknie Solution Explorer

> Add Existing Item, a

a następnie w to miejsce dodaj

w polu ImageUrl wpisz

wskaż nazwę aplikacji. Wybierz z menu opcję

lub naciśnij kombinację Ctrl+Shift+A.

Z wyświetlonego okna dialogowego wybierz następujące opcje:

Select a Master Page wybierz

i wszystkich pozostałych można dodać

. Aby zmienić zawartość pozostałych części strony

kliknij prawym przyciskiem myszy plik

Strona w przeglądarce powinna wyglądać podobnie jak na Rys. 12.

Piotr Bubacz



Aby przetestować szablon strony chciałbyś dodać stronę z ankietami wykonaną w ćwiczeniu w

module 4.


1. Dodaj stronę

do projektu

• Wybierz

• Znajdź na dysku stronę

• Kliknij

• Do projektu d

2. Usuń

niepotrzebne

znaczniki

• Usuń następujące znaczniki ze strony:

—

—

—

—

—

3. Określ

parametry

dyrektywy @Page

• Na stronie w dyrektywie

MasterPageFile="~/SzablonStrony.master"

4. Dodaj

kontrolkę Content

• Po dyrektywie

<asp:Content ID="Content1

• Na końcu strony po całej treści zamknij dodany znacznik

</asp:Content>

5. Dodaj do

strony głównej

odnośniki do

ankiety

• Do strony głównej dodaj odnośniki odpowiednio uruchamiający ankietę

dla nowego klienta oraz dla osoby posiadającej już rower.

• Przetestuj d


Strona 6-15



Tok postępowania

Wybierz Website -> Add Existing Item.

Znajdź na dysku stronę Ankieta.aspx.

Kliknij Add.

Do projektu dodaj również katalog Adv z jego zawartością.

Usuń następujące znaczniki ze strony:

— <!DOCTYPE>

— <html>

— <head>

— <body>

— <form>

Nie zapomnij o znacznikach końcowych.

Na stronie w dyrektywie @Page dodaj atrybuty:

MasterPageFile="~/SzablonStrony.master" Title="

Po dyrektywie @Page dodaj znacznik:

<asp:Content ID="Content1"

ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

Na końcu strony po całej treści zamknij dodany znacznik

</asp:Content>.

Do strony głównej dodaj odnośniki odpowiednio uruchamiający ankietę


Przetestuj działanie ankiety klikając na linki na stronie głównej.

Moduł 6



z jego zawartością.

Title="Ankieta"

ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

Na końcu strony po całej treści zamknij dodany znacznik

Do strony głównej dodaj odnośniki odpowiednio uruchamiający ankietę


na stronie głównej.

Piotr Bubacz



Klient jest bardzo zadowolony z wyniku Twoich prac. Chciałby

nawigacyjne do strony. Zaproponował, aby na stronie w miejscu, gdzie jest napis

się prawdziwe menu z rozsuwanymi elementami.


1. Dodaj nowe

strony do

projektu

• Do aplikacji internetowej utw

cztery

Uwagi.aspx

właściwości:

—

—

—

• W kolejnym oknie wybierz

2. Utwórz mapę

witryny

• Wybierz z menu opcję

kombinację

• W

Map

• W głównym oknie aplikacji zostanie zaprezentowana zawartość pliku.

• Zamień zawartość pliku na

<?xml version="1.0" encoding="utf

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap

1.0" >

<siteMapNode>

o nas">

</siteMap>

• Zapisz zmiany


Strona 6-16


Klient jest bardzo zadowolony z wyniku Twoich prac. Chciałby, abyś dodał jeszcze elementy

nawigacyjne do strony. Zaproponował, aby na stronie w miejscu, gdzie jest napis

się prawdziwe menu z rozsuwanymi elementami.

Tok postępowania

Do aplikacji internetowej utworzonej w poprzednim zadaniu doda

cztery nowe strony aspx. Nazwij je kolejno: Produkty.aspx

Uwagi.aspx oraz Informacje.aspx i dla każdej określ następujące

właściwości:


— Place code in separate file: zaznaczona

— Select master page: zaznaczona

W kolejnym oknie wybierz SzablonStrony.master

Strony dodajemy, aby po kliknięciu na pozycje menu nie pojawiła się

informacja o błędzie.

Wybierz z menu opcję Websites -> Add New Item

kombinację Ctrl+Shift+A.

W wyświetlonym oknie dialogowym w obszarze Templates

Map a w polu Nazwa wpisz Web.sitemap. Naciśnij przycisk

W głównym oknie aplikacji zostanie zaprezentowana zawartość pliku.

Zamień zawartość pliku na następującą:

<?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap

1.0" >

<siteMapNode>



<siteMapNode title="Produkty"

description="Zapoznaj się z ofertą">


description="Przejrzyj dostępne filmy" />


description="Wyszukaj po nazwie" />

</siteMapNode>

<siteMapNode title="Ankiety"

description="Wypełnij ankietę na stronie">

<siteMapNode url="Ankieta.aspx?view=nowy

title="Szukam roweru"

description="Określ preferowane produkty" />

<siteMapNode url="Ankieta.aspx?view=wycie

title="Szukam towarzystwa na wycieczki "

description="Opowiedz nam o sobie" />

</siteMapNode>

<siteMapNode title="Informacje" description="Dowiedz się więcej

o nas">

<siteMapNode url="Informacje.aspx" title="O nas"

description="Dowiedz się więcej o nas" />

<siteMapNode url="Uwagi.aspx" title="Zgłoś uwagę"

description="Zgłoś uwagę odnośnie działania serwisu" />

</siteMapNode>

</siteMapNode>

</siteMap>

Zapisz zmiany.

Moduł 6


abyś dodał jeszcze elementy

nawigacyjne do strony. Zaproponował, aby na stronie w miejscu, gdzie jest napis „Menu” pojawiło

orzonej w poprzednim zadaniu dodaj

Produkty.aspx, Szukaj.aspx,

i dla każdej określ następujące

i naciśnij Add.

Strony dodajemy, aby po kliknięciu na pozycje menu nie pojawiła się

Add New Item lub naciśnij

Templates wybierz Site

Naciśnij przycisk Add.

W głównym oknie aplikacji zostanie zaprezentowana zawartość pliku.

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-




description="Przejrzyj dostępne filmy" />


description="Wypełnij ankietę na stronie">

nowy"

description="Określ preferowane produkty" />

?view=wycieczki "

title="Szukam towarzystwa na wycieczki "

description="Opowiedz nam o sobie" />

<siteMapNode title="Informacje" description="Dowiedz się więcej

<siteMapNode url="Informacje.aspx" title="O nas"

on="Dowiedz się więcej o nas" />

<siteMapNode url="Uwagi.aspx" title="Zgłoś uwagę"

description="Zgłoś uwagę odnośnie działania serwisu" />



Strona 6-17

3. Dodaj

kontrolkę Menu

• Przejdź do strony wzorcowej SzablonStrony.master. Przejdź do widoku

Source.

• W miejsce napisu Menu wstaw kontrolkę SiteMapDataSource (okno

Toolbox, sekcja Data) i w oknie Properties:

— w polu ID wpisz MapaSerwisu

— w polu ShowStartingNode z listy rozwijanej wybierz False

— kontrolkę Menu (okno Toolbox, sekcja Navigation):

• Obok dodanej kontrolki dodaj kontrolkę Dla kontrolki Menu (okno

Toolbox, sekcja Navigation) i w oknie Properties:

— w polu ID wpisz MenuGlowne

— w polu DataSourceID wpisz MapaSerwisu

— w polu Orientation z listy rozwijanej wybierz Horizontal

• Zapisz zmiany i uruchom przygotowaną aplikację. Sprawdź wyświetlanie

menu i możliwość wybierania poszczególnych stron.

4. Określ wygląd

kontrolki menu

• Ponownie wybierz kontrolkę Menu MenuGlowne i w oknie Propoerties:

Określ właściwości CssClass dla następujących elementów:

— w polu DynamicHoverStyle-CssClass wpisz

ZaznaczonyElementMenu

— w polu DynamicMenuItemStyle-CssClass: wpisz

ElementMenuRozwijanego

— w polu StaticHoverStyle-CssClass wpisz ZaznaczonyElementMenu

— w polu StaticMenuItemStyle-CssClass wpisz

ElementMenuNadrzednego

• Do pliku Style.css dodaj następujące definicje stylów:

.ElementMenuNadrzednego

{ color: #000033; font-weight: bold; padding: 3px 10px; }

.ElementMenuRozwijanego

{ background: #F5F5F5; color: #000033; padding: 3px 10px; }

.ZaznaczonyElementMenu

{ background: #000033; color: White; }

• Zapisz zmiany i uruchom przygotowaną aplikację. Sprawdź wyświetlanie

menu.

Piotr Bubacz



Twój klient jest bardzo zadowolony z Twoich postępów w projekcie. Na dzisiejszym spotkaniu

pojawiła się nowa kwestia. Firma chciałby mieć możliwość szybkiej zmiany wyglądu strony bez

konieczności ingerencji w jej kod.


1. Dodaj

kompozycje do

projektu

• W

ASP.NET Folder

• Określ nazwę nowej kompozycji jako

• K

Add

CzerwonaSkorka

2. Skopiuj plik css

z głównego

katalogu aplikacji

do nowych

kompozycji i

odpowiednio

przygotuj

kompozycje

CzerwonaSkorka

• Skopiuj plik

• Przenieś plik

• W nagłówku strony wzorcowej zmień odniesienie do pliku CSS

umieszczonego w katalogu

• Zmień style w kompozycji

była w odcieniach czerwieni.

3. Określ

aktywną

kompozycją

CzerwonaSkorka

• Otwórz plik

do niego właściwość

wyglądać następująco:

<pages theme="

4. Testowanie

zmian

• Zapisz


Strona 6-18

acji 25 min)



konieczności ingerencji w jej kod.

Tok postępowania

W oknie Solution Explorer kliknij prawym przyciskiem i

ASP.NET Folder, a następnie Theme.

Określ nazwę nowej kompozycji jako NiebieskaSkorka

Kliknij prawym przyciskiem myszy na folderze App_T

Add ASP.NET Folder, a następnie Theme. Określ nazwę kompozycji jako

CzerwonaSkorka.

Skopiuj plik Style.css do katalogu CzerwonaSkorka

Przenieś plik Style.css do katalogu NiebieskaSkorka

W nagłówku strony wzorcowej zmień odniesienie do pliku CSS

umieszczonego w katalogu NiebieskaSkorka.

Zmień style w kompozycji CzerwonaSkorka, tak, aby wyświetlana strona

była w odcieniach czerwieni.

Otwórz plik Web.config, a następnie odszukaj znacznika

do niego właściwość theme="CzerwonaSkorka", teraz ten znacznik ma

wyglądać następująco:

<pages theme="CzerwonaSkorka" >

Zapisz zmiany i przetestuj aplikację w przeglądarce.

Dlaczego w Visual Studio widać kompozycję

przeglądarce widać CzerwonaSkorka?

Moduł 6




prawym przyciskiem i wybierz Add

NiebieskaSkorka.

App_Themes i wybierz

. Określ nazwę kompozycji jako

CzerwonaSkorka.

NiebieskaSkorka.

W nagłówku strony wzorcowej zmień odniesienie do pliku CSS

, tak, aby wyświetlana strona

, a następnie odszukaj znacznika <pages>. Dodaj

, teraz ten znacznik ma

zmiany i przetestuj aplikację w przeglądarce.

Dlaczego w Visual Studio widać kompozycję NiebieskaSkorka, a w



Strona 6-19


Przygotuj projekt strony dla firmy Adventure Works sprzedającej rowery. Do tego celu możesz

wykorzystać wybrany przez Ciebie szablon ze strony Open Source Web Design

(http://www.oswd.org).

W ramach projektu zdefiniuj wspólny wygląd przy pomocy strony wzorcowej oraz kompozycji.

Przygotuj i przetestuj co najmniej dwie różne kompozycje. Przygotuj też strukturę nowego serwisu.

Zaplanuj, że w serii będą dostępne następujące strony (lub grupy stron):

• Strona główna – strona zawierająca informacje ogólne o sprzedawanym towarze

• Nowości – strona zawierająca informacje o nowościach

• Strona z informacją o produktach – strony umożliwiające przeglądanie lub wyszukiwanie

produktów

• Ankieta dla klientów – ankieta dla klientów oraz ankieta opinie o stronie

• Informacja o firmie – informacje o działalności firmy

• Zawartość serwisu – strona zawiera mapę serwisu wyświetloną w postaci struktury

Wyświetl strukturę w menu oraz na stronie Zawartosc.aspx umieść kontrolkę wyświetlającą mapę

serwis w postaci struktury.


Piotr Bubacz

Moduł 8

Wersja 1

Kontrolki danych w ASP.NET

Spis treści

Kontrolki danych w ASP.NET ................................................................................................................ 1





Uwagi dla studenta ...................................................................................................................... 8

Dodatkowe źródła informacji....................................................................................................... 8

Laboratorium podstawowe .................................................................................................................. 9

Problem 1 (czas realizacji 20 min) ................................................................................................ 9




ITA-103 Aplikacje Internetowe Kontrolki danych w ASP.NET

Strona 8-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące komunikacji i wyświetlania

informacji z bazy danych w aplikacjach internetowych. Nauczysz się

definiować zapytania przy pomocy kontrolki LinqDataSource

i wyświetlać wyniki w kontrolkach GridView oraz Repeater.

Cel modułu

Celem modułu jest poznanie zasad współpracy aplikacji internetowych

z bazą danych, definiowania źródeł danych oraz wyświetlania informacji na

podstawie tej definicji.



• wiedział jak określać źródło danych w aplikacjach internetowych

• potrafił konfigurować kontrolki źródła danych

• potrafił łączyć kontrolki źródła danych z kontrolkami prezentacji

danych

Wymagania wstępne


• znać podstawy pracy z aplikacjami internetowymi

w Visual Studio 2008

• znać podstawy języka zapytań SQL




w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS” oraz

„Wprowadzenie do ASP.NET”.




Strona 8-3



Każda dynamiczna aplikacja internetowa komunikuje się ze źródłem danych. Takim źródłem

najczęściej jest serwer baz danych. Istnieje potrzeba pobierania tych danych i prezentowania ich na

stronach internetowych.

Firmy tworząc strony internetowe nie chcą już mieć statycznych wizytówek, ale wymagają, aby

aplikacje internetowe mogły dynamicznie tworzyć zawartość na podstawie danych generowanych

przez systemy wewnętrzne. Coraz częściej firmy na swoich stronach oferują produkty lub/i usługi,

które klient strony może kupić. W tym celu niezbędna jest interakcja z użytkownikiem. Musi on

mieć możliwość wyszukania odpowiedniej oferty, dopasowania jej do własnych potrzeb i w końcu

bezpiecznego zakupu wybranego towaru. Aby ułatwić to zadanie musimy na naszych stronach

pobierać, wyświetlać, uaktualniać, dodawać, usuwać i sortować rekordy pobierane z bazy.

Ważne jest, aby praca, którą włożymy w tworzenie aplikacji była jak najmniejsza. Chcemy mieć

proste i łatwe narzędzia do tworzenia rozbudowanych serwisów internetowych. Chcemy móc

odpytywać źródło danych nawet nie znając języka SQL.


Aplikacje internetowe coraz częściej wymagają przechowywania i przetwarzania dużych ilości

danych. Dane te są przechowywane w bazie danych, skąd są pobierane i dokąd są zapisywane

nowe. ASP.NET dostarcza dużą kolekcję kontrolek umożliwiających pobieranie i wyświetlanie

danych w różnych formach prezentacji.

Technologię umożliwiającą dostęp do baz danych dla aplikacji napisanych na platformie .NET jest

ADO.NET. ADO.NET koncentruje się na trzech najważniejszych elementach: połączeniu do bazy,

wysłaniu zapytań do bazy i odebraniu wyników tych zapytań.

Przegląd kontrolek źródła danych w ASP.NET 3.5

ASP.NET posiada zestaw kontrolek umożliwiających pracę z różnego rodzaju źródłem danych tj.

baza danych, plik XML czy warstwa pośrednia obiektów biznesowych. Kontrolki źródła danych łączą

się i pobierają dane ze źródła danych a następnie udostępniają te dane innym kontrolkom bez

konieczności tworzenia kodu. Kontrolki te również umożliwiają zmianę danych. Model źródła

danych w ASP.NET jest rozszerzalny więc możemy tworzyć własne kontrolki źródła danych które

pobierają dane z różnych źródeł danych lub rozszerzają funkcjonalność istniejących źródeł danych.

W celu wsparcia różnych scenariuszy dodawania danych platforma .NET zawiera różne kontrolki

źródła danych. Tab. 1 zawiera opis wbudowanych kontrolek.

Tab. 1 Przegląd kontrolek źródła danych

Nazwa kontrolki Opis

LinqDataSource

Umożliwia użycie języka LINQ na stronach ASP.NET poprzez model

deklaratywny do pobrania i modyfikowania danych z obiektów danych

takich jak tabele w bazie czy kolekcje w pamięci serwera. Wspiera

automatyczne generowanie poleceń wybierania, aktualizacji, dodawania i

usuwania danych. Kontrolka wspiera sortowanie, filtrowanie i dzielenie na

strony.

EntityDataSource Umożliwia połączenie z danymi pochodzącymi z modelu Entity Data

Model (EDM). Wspiera automatyczne generowanie poleceń wybierania,

aktualizacji, dodawania i usuwania danych. Kontrolka wspiera sortowanie,

filtrowanie i dzielenie na strony.



Strona 8-4

ObjectDataSource Umożliwia połączenie z obiektami logiki biznesowej i innych klas i służy do

tworzenia aplikacji webowych które bazują na obiektach warstwy

pośredniej do zarządzania danymi. Wspiera zaawansowane sortowania i

dzielenie na strony niedostępne w innych kontrolkach źródeł danych.

SqlDataSource Umożliwia połączenie do serwerów baz danych takich jak Microsoft SQL

Server czy Oracle. We współpracy z serwerem SQL Server wspiera

zaawansowane możliwości buforowania. Kontrolka wspiera również

sortowanie, filtrowanie i dzielenie na strony, jeśli dane są zwracane jako

obiekt DataSet.

AccessDataSource Umożliwia współpracę z bazami danych zapisanymi w Microsoft Access.

Kontrolka wspiera sortowanie, filtrowanie i dzielenie na strony, jeśli dane

są zwracane jako obiekt DataSet.

XmlDataSource Umożliwia pobieranie danych zapisanych w plikach XML, szczególnie dla

hierarchicznych kontrolek serwerowych ASP.NET takich jak TreeView.

Wspiera filtrowanie przy użyciu wyrażeń XPath i umożliwia stosowanie

transformacji danych przy użyciu XSLT. Umożliwia również aktualizację

danych przez zapisanie całego dokumentu XML ze zmianami.

SiteMapDataSource Używana w ASP.NET do nawigacji na stronie.

Przegląd kontrolek prezentacji danych

Kontrolki prezentacji danymi umożliwiają połączenie z dowolną kontrolką źródła danych.

Automatycznie pobierają dane, a następnie zamieniają je w znaczniki przesyłane do klienta w

przeglądarce. Kontrolki te mogą wykorzystywać możliwości udostępniane przez kontrolki źródła

danych takie jak sortowanie, dzielenie na strony, buforowanie, filtrowanie, aktualizacja, usuwanie i

dodawanie wierszy danych. Kontrolka wyświetlania danych jest podłączona do kontrolki źródła

danych za pomocą właściwości DataSourceID.

Lista kontrolek:

• Kontrolki listy – wyświetlają dane w różnych formatach, kontrolki listy to: BulletedList,

CheckBoxList, DropDownList, ListBox i RadioButtonList.

• AdRotator – wyświetla ogłoszenia na stronie – dane o lokalizacji mogą być umieszczone w

źródle danych.

• DataList – wyświetla dane w tabeli, każdy element jest wyświetlany zgodnie z szablonem

zdefiniowanym przez nas.

• DetailsView – wyświetla jeden rekord w układzie tabelarycznym i umożliwia edycję,

usuwanie i dodawanie rekordów.

• FormView – kontrolka podobna do kontrolki DetailsView, ale umożliwia definiowanie

wyglądu dla każdego rekordu. Kontrolka FormView jest podobna do kontrolki DataList, ale

dla pojedynczego rekordu.

• GridView – wyświetla dane w tabeli i umożliwia edycję, zmianę, usuwanie, sortowanie,

dzielenie na strony bez konieczności pisania kodu.

• ListView – wyświetla dane zgodnie z definicją umieszczoną w szablonie. Umożliwia

automatyczne sortowanie, edycję, dodawanie i usuwanie rekordów. Możliwe jest również

dzielenie na strony przy pomocy połączonej kontrolki DataPager.

• Repeater – wyświetla dane w postaci listy. Każdy rekord jest wyświetlany przy użyciu

szablonu.

• TreeView – wyświetla dane w postaci drzewa hierarchicznego z rozwijanymi węzłami.

• Menu – wyświetla dane w postaci hierarchicznego, dynamicznego menu, który może

zawierać podmenu.



Strona 8-5

Połączenie do bazy danych

Zanim rozpocznie się wysyłanie zapytań do bazy należy się z nią połączyć. W wielu przypadkach

wiąże się to z koniecznością uwierzytelnienia (np. przy pomocy nazwy użytkownika i hasła).

Informacje o połączeniu są wysyłane jako ciąg znaków zawierających różne parametry konfiguracji

połączenia w postaci tzw. łańcucha połączenia (ang. connection string).

W celu uzyskania dostępu do źródła danych potrzebny jest dostawca danych (ang. provider) – jest

to biblioteka, umożliwiająca komunikację ze źródłem danych w trybie binarnym.

W ASP.NET standardowo możliwe jest korzystanie z następujących dostawców:

• ODBC .NET Data Provider (System.Data.ODBC)

• OLE DB .NET Data Provider (System.Data.OleDb)

• Oracle .NET Data Provider (System.Data.OracleClient)

• Microsoft SQL Server .NET Data Provider (System.Data.SqlClient)

Połączenie i tworzenie zapytań przy pomocy kontrolki SqlDataSource

W celu utworzenia połączenia do bazy danych można skorzystać z kontrolki SqlDataSource. Po

dodaniu kontrolki do formularza należy określić następujące atrybuty:

• ConnectionString – łańcuch połączenia.

• ProviderName – nazwa dostawcy danych.

• SelectCommand – polecenie SQL zawierające treść zapytania do bazy danych lub nazwa

procedury składowanej do wykonania.

Przykład:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.\SQLEXPRESS; AttachDbFilename=|DataDirectory|\CDDB.mdf;Integrated Security=True; User Instance=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Kategorie]"> </asp:SqlDataSource>

Łańcuch połączenia najlepiej jest umieścić w pliku konfiguracyjnym aplikacji. W tym celu należy

dodać w bloku <configuration> w pliku konfiguracyjnym Web.config następujący blok:

<connectionStrings> <add name="PolaczenieDoBazy" connectionString="Data Source=.\SQLEXPRESS; AttachDbFilename=|DataDirectory|\CDDB.mdf;Integrated Security=True; User Instance=True" providerName="System.Data.SqlClient" /> </connectionStrings>

Teraz należy w kontrolce SqlDataSource zainicjalizować właściwość ConnectionString jak w

przykładzie:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PolaczenieDoBazy %>" SelectCommand="SELECT * FROM [Kategorie]"> </asp:SqlDataSource>

Treść zapytania do bazy można skonfigurować bezpośrednio w kontrolce SqlDataSource. W

poprzednim rozdziale przedstawiono sposób deklaracji zapytania SELECT za pomocą atrybutu

SelectCommand. Atrybuty kontrolki umożliwiają dodatkowo deklarację treści polecenia INSERT –

za pomocą atrybutu InsertCommand, UPDATE – za pomocą atrybutu UpdateCommand oraz

DELETE – za pomocą atrybutu DeleteCommand. Kontrolka umożliwia wysłanie tych komend przy

pomocy metod Select, Insert, Update oraz Delete. Możliwe jest zdefiniowanie wszystkich

czterech poleceń w jednej kontrolce:



Strona 8-6

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PolaczenieDoBazy %>" SelectCommand="SELECT * FROM [Kategorie]" DeleteCommand="DELETE FROM [Kategorie] WHERE [KatID] = @KatID" InsertCommand="INSERT INTO [Kategorie] ([Nazwa]) VALUES (@Nazwa)" UpdateCommand="UPDATE [Kategorie] SET [Nazwa] = @Nazwa WHERE [KatID] = @KatID"> <DeleteParameters> <asp:Parameter Name="KatID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="Nazwa" Type="String" /> <asp:Parameter Name="KatID" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="Nazwa" Type="String" /> </InsertParameters> </asp:SqlDataSource>

Połączenie do bazy i tworzenie zapytań przy pomocy kontrolki LinqDataSource

Największą zaletą kontrolki LinqDataSource jest możliwość definiowania zapytań poprzez model

deklaratywny. Kontrolka może pobierać dane z bazy danych lub z kolekcji danych umieszczonych w

pamięci serwera, takich jak tablice. W postaci deklaracji można zapisać wszystkie warunki do

pobrania, filtrowania, sortowania i grupowania danych. Dodatkowo w przypadku pobierania

danych z bazy danych kontrolka umożliwia zmianę, dodawanie i usuwanie rekordów. Kontrolka

wykonuje to bez konieczności tworzenia zapytań SQL, aby wykonać te zadania.

W przypadku korzystania z bazy danych należy najpierw przygotować opis struktury danych przy

pomocy DBML (ang. DataBase Markup Language). Visual Studio wspiera tworzenie tego opisu przy

pomocy szablonu LINQ to SQL Classes. Następnie możemy określić następujące właściwości

kontrolki:

• ContextTypeName – umożliwia określenie nazwy klasy zawierającej opis struktury bazy

danych.

• TableName – nazwa tabeli lub widoku, który będzie źródłem danych.

• Where – określenie warunku.

• Select – umożliwia wybranie określonych kolumn.

Przykład kontrolki:

<asp:LinqDataSource ID="KategorieLinqDataSource" runat="server" ContextTypeName="AdventureWorksDataContext" TableName="ProductCategories" Where="ParentProductCategoryID=null" > </asp:LinqDataSource>

Przykłady kontrolek

Kontrolka GridView

Kontrolka GridView umożliwia wyświetlanie, sortowanie, wybór, stronicowanie i edycję danych.

Kontrolka GridView wyświetla dane w układzie tabelarycznym. Każdy rekord jest prezentowany

jako wiersz tabeli. Kontrolka umożliwia określenia atrybutu DataSourceID zawierającego

identyfikator źródła danych zdefiniowanego w projekcie np. kontrolki SqlDataSource.

Sortowanie

Zezwolenie na sortowanie za pomocą przypisania do atrybutu AllowSorting wartości

true,zmienia etykiety nagłówka w odnośniki, po wybraniu których rekordy są sortowane rosnąco

lub malejąco.



Strona 8-7

<asp:GridView ID="GridView1" runat="server" AllowSorting="true" DataSourceID="SqlDataSource1"> </asp:GridView>

Stronicowanie

Jeśli w tabeli znajduje się wiele rekordów, to wyświetlenie ich wszystkich na stronie może

spowodować pewne problemy, np. nieprawidłową prezentację elementów strony, dlatego warto

rozważyć podzielenie wyników na strony. Stronicowanie ustala się z pomocą dwóch atrybutów:

• AllowPaging="true" – włączenie stronicowania.

• PageSize – określenie (za pomocą liczby dziesiętnej) ilości rekordów na stronę.

Przykład:

<asp:GridView ID="GridView1" runat="server" AllowSorting="true" DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="3"> </asp:GridView>

Edycja danych

Kontrolka GridView umożliwia również edycję danych bez konieczności pisania kodu programu.

Przypisanie wartości true do atrybutów AutoGenerateEditButton oraz

AutoGenerateDeleteButton tworzy odnośniki Edit oraz Delete, umożliwiające edycję lub

usunięcie danego rekordu:

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"> </asp:GridView>

Formatowanie kontrolki GridView

Kontrolka GridView zawiera wiele właściwości umożliwiających określenie jej wyglądu oraz

właściwość CssClass, umożliwiającą kontrolowanie jej wyglądu przy pomocy klas CSS.

Kontrolka Repeater

Kontrolka Repeater umożliwia w pełni konfigurowalne wyświetlanie danych. Sposób prezentacji

danych w tej kontrolce jest całkowicie zależny od programisty i umożliwia wyświetlanie danych w

dowolnym układzie i formacie zależnym od zdefiniowanego szablonu.

Kontrolka Repeater udostępnia następujące typy szablonów:

• ItemTemplate – definiuje wygląd każdego rekordu lub jeśli zostanie zdefiniowany szablon

AlternatingItemTemplate – wygląd rekordów nieparzystych.

• AlternatingItemTemplate – definiuje wygląd rekordów parzystych.

• FooterTemplate – definiuje wygląd stopki kontrolki.

• HeaderTemplate – definiuje wygląd nagłówku kontrolki.

• SeparatorTemplate – definiuje wygląd separatora kolejnych rekordów.

W celu wyświetlenia rekordów należy stworzyć szablon wyświetlania. Poniższy przykład wyświetla

odnośniki do strony Szczegoly.aspx wraz z przekazaniem parametrów prodID oraz KatID. Na

ekranie przeglądarki zostanie wyświetlony odnośnik zawierający nazwę produktu oraz informacja o

jego cenie. Najbardziej podstawowym z szablonów jest ItemTemplate. Kolejność deklaracji

szablonów nie ma znaczenia. Przykład:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <a href="Szczegoly.aspx?prodID=<%# Eval("ProdID") %>&KatID= <%# Eval("KatID") %>"><%# Eval("Nazwa") %></a><br /> <span style="padding-left: 20px">w super cenie <span style="color:Red"><%# Eval("Cena","{0:c}") %></span></span><br/>



Strona 8-8

</ItemTemplate> <SeparatorTemplate> ===============<hr /> </SeparatorTemplate> <FooterTemplate> Pamiętaj TA promocja jest TYLKO dzisiaj </FooterTemplate> </asp:Repeater>

Szablony kontrolki Repeater

Podsumowanie

W tym rozdziale przedstawione zostały kontrolki źródła i prezentacji danych. Porównano

połączenie i tworzenie zapytań do bazy danych przy pomocy kontrolki SqlDataSource i

LinqDataSource. Przedstawiono kontrolkę GridView oraz Repeater.

Uwagi dla studenta


• wiesz jakie kontrolki służą do pobierania, a jakie do wyświetlania danych

• potrafisz wybrać odpowiednią kontrolkę prezentacji danych w zależności od potrzeb

• wiesz jak dodać i skonfigurować kontrolkę LinqDataSource, GridView oraz Repeater





1. Piotr Gaszewski, ASP.NET 2.0 – Metody dostępu do danych - wprowadzenie,

http://codeguru.pl/article-454.aspx

W artykule autor przedstawił podstawy metod dostępu do danych. Prezentuje

kontroki SqlDataSource, GridView i DetailsView w akcji. Pokazuje również

wstęp do tworzenia biznesowej warstwy pośredniej.

2. Jacek Matulewski, Sławomir Orłowski, Technologie ASP.NET i ADO.NET w Visual Web Developer,

Helion, 2007

Książka zawiera opis technik i narzędzi do tworzenia witryn internetowych za

pomocą ASP.NET i ADO.NET. Dzięki niej nauczysz się korzystać z tych technologii w

środowisku Visual Web Developer oraz używać podstawowych języków do

programowania stron ASP.NET. Dowiesz się, jak wygodnie zarządzać bazami danych

w aplikacjach sieciowych i jak sprawnie umieścić gotową witrynę na serwerze.

3. Data Access Tutorials, http://www.asp.net/learn/data-access

Na stronie znajdziesz serię tutoriali, które przedstawią techniki implementacji

metod dostępu do danych w ASP.NET. Tutoriale zawierają kod źródłowy w Visual

C#.

Piotr Bubacz




Po przygotowaniu szablonu aplikacji Twój klient z uśmieche

i powiedział „To jest nasza baza, proszę zobacz ją i przygotuj stronę internetową do działania”.

Co to znaczy działania? Okazało się, że baza jest dostępna w języku angielskim. Klient chce wejść na

polski rynek i aktualnie p

przyśpieszenia prac nad stroną masz już teraz wykorzystać tą bazę, bo później nowa baza będzie

miała taką samą strukturę.

Twoim pierwszym zadaniem będzie wyświetlenie produktów z wybranej przez

kategorii. Produkty są umieszczone w tabeli

Diagram z tymi tabelami przedstawia

Najbardziej zwróciła Twoją uwagę

grupa kategorii nadrzędnych

stronie musisz zatem wyświetlić dwie kontrolki z kategoriami

kategorii – podrzędną.


1. Otwórz

aplikacje

internetową z

poprzedniego

modułu

• Otwórz Visual

• Z menu wybierz

• Zlokalizuj folder z aplikacją z poprzedniego modułu.

• Kliknij

2. Dodaj źródło

danych

• Kliknij prawym przyciskiem

existing item

• O

3. Sprawdź

źródło danych

• Dwukrotnie kliknij dodany plik.

• W oknie

• Kli

Strona 8-9



Po przygotowaniu szablonu aplikacji Twój klient z uśmiechem na twarzy wręczył Tobie płytę

powiedział „To jest nasza baza, proszę zobacz ją i przygotuj stronę internetową do działania”.

to znaczy działania? Okazało się, że baza jest dostępna w języku angielskim. Klient chce wejść na

polski rynek i aktualnie przygotowuje lokalizację produktów i informacji o nich. W celu


Twoim pierwszym zadaniem będzie wyświetlenie produktów z wybranej przez

kategorii. Produkty są umieszczone w tabeli Product, a kategorie w tabeli

z tymi tabelami przedstawia Rys. 2.

Rys. 2 Diagram z tabelami Product i ProductCategory

zwróciła Twoją uwagę relacja na tabeli ProductCategory. Oznacza ona, że istnieje

nadrzędnych, których pole ParentProductCategoryIDwyświetlić dwie kontrolki z kategoriami: nadrzędną i

Tok postępowania

Otwórz Visual Studio 2008.

Z menu wybierz File -> Open Web Site.

Zlokalizuj folder z aplikacją z poprzedniego modułu.

Kliknij OK.

Kliknij prawym przyciskiem myszy katalog App_Data

existing item.

Odnajdź plik AdventureWorksLT_Data.mdf i kliknij

Dwukrotnie kliknij dodany plik.

W oknie Server Explorer sprawdź zawartość bazy danych.

Kliknij dwukrotnie tabelę Customer.

Jakie informacje możemy zobaczyć? Jak sprawdzić zawartość tabeli

Moduł 8


m na twarzy wręczył Tobie płytę

powiedział „To jest nasza baza, proszę zobacz ją i przygotuj stronę internetową do działania”.

to znaczy działania? Okazało się, że baza jest dostępna w języku angielskim. Klient chce wejść na

rzygotowuje lokalizację produktów i informacji o nich. W celu


Twoim pierwszym zadaniem będzie wyświetlenie produktów z wybranej przez użytkownika strony

, a kategorie w tabeli ProductCategory.

. Oznacza ona, że istnieje

ParentProductCategoryID ma wartość null. Na

nadrzędną i – po dokonaniu wyboru

Zlokalizuj folder z aplikacją z poprzedniego modułu.

App_Data i wybierz Add

i kliknij Add.

sprawdź zawartość bazy danych.

Jak sprawdzić zawartość tabeli?

Piotr Bubacz


4. Dodaj

konwerter danych

dla języka LINQ

• Wybierz

• Z okna

AdventureWorks.dbml

• W oknie z

(Rys.

• Do nowo otwartego pliku

Relational Designer

——————————

• Zapisz plik.

5. Wyświetl

główne kategorie

produktów

• Do strony

Properities:

—————

• Dodaj kontrolkę

Kliknij

• W oknie

—

——

—

Strona 8-10


Z okna Templates wybierz LINQ to SQL Classes, w oknie

AdventureWorks.dbml.

W oknie z pytaniem o dodanie specjalnego pliku do katalogu

Rys. 3) wciśnij Yes.

Rys. 3 Pytanie o przeniesienie pliku do katalogu

Do nowo otwartego pliku po lewej jego stronie –

Relational Designer z okna Server Explorer przenieś

— Address

— Customer

— CustomerAddress

— Product

— ProductCategory

— ProduktDescription

— ProduktModel

— ProduktModelProduktDescription

— SalesOrderDetail

— SalesOrderHeader

Zauważ, że oprócz tabel pojawiły się również relacje między nimi.

apisz plik.

Do strony Produkty.aspx dodaj kontrolkę LinqDataSource

Properities:

— w polu ID wpisz KategorieLinqDataSource

— w polu ContextTypeName wpisz AdventureWorksDataContext

— w polu TableName wpisz ProductCategories

— w polu Where wpisz ParentProductCategoryID=null

— w polu Select wpisz new (ProductCategoryID, Name)

Dodaj kontrolkę ListBox i zmień jej właściwość ID

Kliknij Smart Tag i wybierz Choose Data Source.

W oknie Data Source Configuration Wizard (Rys.

— z listy rozwijanej Select a data Source

KategorieLinqDataSource

— wciśnij link Refresh Schema

— z listy rozwijanej Select a data field to display In the ListBox

Name

— z listy rozwijanej Select a data field for the value of the ListBox

wybierz ProductCategoryID

Moduł 8


, w oknie Name wpisz

o dodanie specjalnego pliku do katalogu App_Code

Pytanie o przeniesienie pliku do katalogu App_Code

do obszaru The Object

przenieś następujące tabele:

Zauważ, że oprócz tabel pojawiły się również relacje między nimi.

LinqDataSource i w oknie

AdventureWorksDataContext

ParentProductCategoryID=null

new (ProductCategoryID, Name)

ID na KategorieListBox.

Rys. 4):

Select a data Source wybierz

Select a data field to display In the ListBox wybierz

Select a data field for the value of the ListBox



Strona 8-11

Rys. 4 Okno Data Source Configuration Wizard

• Po kliknięciu OK ponownie kliknij Smart Tag, a następnie zaznacz opcję

Enable AutoPostBack.

6. Wyświetl listę

podkategorii

• Do strony dodaj kontrolkę LinqDataSource i zmień jej właściwość ID na

PodkategorieLinqDataSource.

• Kliknij SmartTag i wybierz Configure Data Source.

• W oknie Choose a Content Object wybierz

AdventureWorksDataContext i kliknij Next.

• W oknie Configure Data Selection z listy Tables wybierz

ProductCategories, w obszarze Select zaznacz ProductCategoryID oraz

Name.

• Kliknij przycisk Where.

• W oknie Configure Where Expression (Rys. 5):

— z listy rozwijanej Column wybierz ParentProductCategoryID

— z listy rozwijanej Operator wybierz ==

— z listy rozwijanej Source wybierz Control

— z listy rozwijanej Control ID wybierz KategorieListBox

— w polu Default value wpisz -1

— kliknij przycisk Add

Rys. 5 Konfiguracja w oknie Configure Where Expression



Strona 8-12

• Dodaj kontrolkę ListBox i określ jej właściwość ID na

PodkategorieListBox. Kliknij Smart Tag i wybierz Choose Data Source.

• W oknie Data Source Configuration Wizard wybierz:

— z listy rozwijanej Select a data Source wybierz

PodkategorieLinqDataSource

— z listy rozwijanej Select a data field to display In the ListBox wybierz

Name

— z listy rozwijanej Select a data field for the value of the ListBox

wybierz ProductCategoryID

• Po kliknięciu OK ponownie kliknij Smart Tag, a następnie zaznacz opcję

Enable AutoPostBack.

7. Dodaj

kontrolkę danych

do wyświetlania

produktów

w wybranej

kategorii

• Do strony dodaj kontrolkę LinqDataSource zmień właściwość ID na

ProduktyLinqDataSource.

• Kliknij Smart Tag i wybierz Configure Data Source.

• W oknie Choose a Content Object wybierz

AdventureWorksDataContext i kliknij Next.

• W oknie Configure Data Selection z listy Tables wybierz Products. W

obszarze Select wybierz ProductID, Name, ProductNumber, Color,

ListPrice.

• Kliknij przycisk Where.

• W oknie Configure Where Expression:

— z listy rozwijanej Column wybierz ProductCategoryID

— z listy rozwijanej Operator wybierz ==

— z listy rozwijanej Source wybierz Control

— z listy rozwijanej ControlID wybierz PodkategorieListBox

— w oknie Default value wpisz -1

— kliknij przycisk Add

8. Sformatuj

wyświetlanie

produktów

• Z okna Toolbox, sekcja Data do strony dodaj kontrolkę GridView.

• Kliknij Smart Tag i z listy rozwijanej Choose Data Source wybierz

ProduktyLinqDataSource.Kliknij Smart Tag kontrolki GridView, a

następnie wybierz opcje Edit Columns.

• Za pomocą przycisku usuń wszystkie pola za wyjątkiem

ProductNumber, Color i ListPrice.

• Z list Available fields wybierz HyperLinkField i wciśnij Add.

• W obszarze HyperLinkField properities:

— w polu HeaderText wpisz Nazwa produktu

— w polu DataNavigateUrlFields wpisz ProductID

— w polu DataNavigateUrlFormatString wpisz ~/Szczegoly.aspx?id={0}

— w polu DataTextField wpisz Name

• Przy pomocy przycisku ustal pole na pierwszej pozycji.

• Dla pola ProductNumber określ właściwość HeaderText="Numer

katalogowy".

• Dla pola Color określ właściwość HeaderText="Kolor".

• Dla pola ListPrice określ właściwość HeaderText="Cena" oraz

DataFormatString="{0:c}".

9. Włącz

stronicowanie

• Dla kontrolki GridView określ właściwości:

Piotr Bubacz


wyświetlanych

wyników

——

10. Zapisz i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i przetestuj

produktów na stronie

• Zmień właściwość

najlepiej wyświetlana na stronie.

11. Napraw błąd

wyświetlania

kontrolki

GridView

• W przeglądarce wybierz główną kategorię, następnie wybierz kategorię

podrzędną. Tera wybierz pono

• Wybierz kontrolkę

EnableViewState

• Zapisz zmiany i ponownie przetestuj kontrolkę


Twoim kolejnym zdaniem jest umożliwienie wyszukiwania określonego produktu. Wyniki

wyszukiwania mają zostać wyświetlone wraz z kontrolk

umożliwiające wyszukiwanie.


1. Dodaj

kontrolkę

użytkownika do

wyszukiwania

• Wybierz

• Kliknij prawym przyciskiem myszy dodany katalog i wybierz

Item

———

• Na otwartej stronie

kontrolkę

• Dodaj

————


Text="

• Do metody obsługi przycisku dodaj następujący kod:

string url = String.Format("~/NazwaProduktuTextBox.Text);Response.Redirect(url);

2. Do strony

Szukaj.aspx dodaj

kontrolkę Szukaj

• W widoku

przeciągnij

3. Dodaj stronę

wyświetlającą

wyniki

wyszukiwania

• Do aplikacji dodaj stronę

strony

• Na stronie wpisz

Strona 8-13

— AllowPaging: true

— PageSize: 5

Zapisz zmiany w projekcie i przetestuj możliwość wyświetlania

produktów na stronie Produkty.aspx.

Zmień właściwość PageSize kontrolki GridView

najlepiej wyświetlana na stronie.

W przeglądarce wybierz główną kategorię, następnie wybierz kategorię

podrzędną. Tera wybierz ponownie inną kategorię główną.

Co się stało z kontrolką GridView? Dlaczego nadal jest wyświetlana?

Wybierz kontrolkę GridView i w oknie

EnableViewState z listy rozwijanej wybierz False.

Zapisz zmiany i ponownie przetestuj kontrolkę GridView

Dlaczego tym razem kontrolka działa poprawnie?



wyszukiwania mają zostać wyświetlone wraz z kontrolką do wyszukiwania.

umożliwiające wyszukiwanie.

Tok postępowania

Wybierz Website->New Folder i nazwij go Kontrolki

Kliknij prawym przyciskiem myszy dodany katalog i wybierz

Item. W oknie Add New Item:

— W obszarze Template wybierz Web User Control

— w polu Name wpisz Szukaj.ascx

— z listy Language wybierz Visual C#

Na otwartej stronie wpisz Podaj nazwę produktu:

kontrolkę TextBox i zmień jej właściwość ID na na

Dodaj kolejno kontrolkę RequiredFieldValidator i w oknie

— w polu ID wpisz NazwaRequiredFieldValidator

— w polu ControlToValidate wpisz nazwaTextBox

— w polu ErrorMessage wpisz Podaj fragment nazwy produktu

— w polu Text wpisz *

Dodaj kontrolkę Button o właściwościach ID="

Text="Szukaj". W widoku Design kliknij dwukrotnie kontrolkę

Do metody obsługi przycisku dodaj następujący kod:

string url = String.Format("~/WynikiWyszukiwaniaNazwaProduktuTextBox.Text); Response.Redirect(url);

W widoku Design do strony Szukaj.aspx z okna

przeciągnij kontrolkę Szukaj.ascx.

Do aplikacji dodaj stronę WynikiWyszukiwania.aspx

strony SzablonStrony.master.

Na stronie wpisz Wyniki wyszukiwania:.

Moduł 8


możliwość wyświetlania

GridView tak, aby była jak

W przeglądarce wybierz główną kategorię, następnie wybierz kategorię

wnie inną kategorię główną.

? Dlaczego nadal jest wyświetlana?

i w oknie Properties w polu

.

GridView.

Dlaczego tym razem kontrolka działa poprawnie?


do wyszukiwania. Przygotuj elementy

Kontrolki.

Kliknij prawym przyciskiem myszy dodany katalog i wybierz Add New

Web User Control

Podaj nazwę produktu:, a następnie Dodaj

nazwaTextBox.

i w oknie Properties:

RequiredFieldValidator

nazwaTextBox

fragment nazwy produktu

ID="szukajButton" oraz

kliknij dwukrotnie kontrolkę Button.

Do metody obsługi przycisku dodaj następujący kod:

WynikiWyszukiwania.aspx?Nazwa={0}",

z okna Solution Explorer

WynikiWyszukiwania.aspx opartą na szablonie



Strona 8-14

• W nowej linii dodaj kontrolkę GridView i w oknie Properties:

— w polu ID wpisz WynikiWyszukiwaniaGridView

— w polu AutoGenerateColumns z listy rozwijanej wybierz False

— w polu DataKeyNames wpisz ProductID

• W widoku Source dodaj w ciele kontrolki GridView (pomiędzy znaczniki

<asp:GridView…> a </asp:GridView>):

<Columns> <asp:HyperLinkField DataNavigateUrlFields="ProductID" DataNavigateUrlFormatString="~/Szczegoly.aspx?id={0}" HeaderText="Nazwa produktu" DataTextField="Name" Text="Nazwa produktu" /> <asp:BoundField DataField="ProductNumber" HeaderText="Numer katalogowy" SortExpression="ProductNumber" /> <asp:BoundField DataField="Color" HeaderText="Kolor" SortExpression="Color" /> <asp:BoundField DataField="ListPrice" DataFormatString="{0:c}" HeaderText="Cena" SortExpression="ListPrice" /> </Columns>

• Poniżej kontrolki GridView w widoku Source wpisz <br />Szukaj:<br />.

• W widoku Design do ostatniego wiersza na stronie dodaj kontrolkę

użytkownika Szukaj.ascx.

4. Dodaj kod

umożliwiający

wyszukiwanie

• W pliku WynikiSzukania.aspx.cs do metody Page_Load dodaj

następujący kod:

string nazwa = Request.QueryString["Nazwa"]; if (nazwa!=null) { AdventureWorksDataContext db = new AdventureWorksDataContext(); var produkty = from p in db.Products where p.Name.Contains(nazwa) select p; WynikiWyszukiwaniaGridView.DataSource = produkty; WynikiWyszukiwaniaGridView.DataBind(); }

5. Zapisz i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i przetestuj możliwość wyszukiwania

produktów.

Piotr Bubacz



Twój klient wymyślił, że na stronie głównej ma być wyświetlana lista kategorii nadrzędnych

kliknięciu których użytkownik strony

wybraną nadrzędną kategorią.


1. Dodaj

kontrolkę

użytkownika

wyświetlającą

główne kategorie

• Do katalogu

Kategorie.ascx

• Następnie dodaj kontrolkę

właściwość

————


——

• W

<HeaderTemplate> </HeaderTemplate><ItemTemplate> </ItemTemplate>

• Zapisz zmiany.

2. Dodaj

kontrolkę do

szablonu strony

• Otwórz szablon strony

• W widoku

po lewej stronie o

• Zapisz zmiany.

3. Zapisz i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i sprawdź

wyświetlanie są odpowiednie podkategorie na stronie przeglądania

produktów.

4. Dodaj

możliwość

wyświetlania

podkategorii na

podstawie

parametru

wywołania strony

• Otwórz plik

string katID= Request.QueryString["katID"];if (katID != null)

5. Zapisz i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i sprawdź


produktów.

Strona 8-15


Twój klient wymyślił, że na stronie głównej ma być wyświetlana lista kategorii nadrzędnych

użytkownik strony będzie przekierowywany na stronę wyświetlania produktów z

wybraną nadrzędną kategorią.

Tok postępowania

Do katalogu Kontrolki dodaj nową kontrolkę użytkownika o nazwie

Kategorie.ascx.

Następnie dodaj kontrolkę LinqDataSource.

właściwość ID na KategorieLinqDataSource i w oknie

— w polu ContextTypeName wpisz AdventureWorksDataContext

— w polu Select wpisz new (ProductCategoryID, Name)

— w polu TableName wpisz ProductCategories

— w polu Where wpisz ParentProductCategoryID=null

Dodaj kontrolkę Repeater i w oknie Properties:

— w polu ID wpisz KategorieRepeater

— w polu DataSourceID z listy rozwijanej wybierz

KategorieLinqDataSource".

W widoku Source w kontrolce Repeater dodaj:

<HeaderTemplate> <strong>Wybierz kategorię produktu</strong> </HeaderTemplate> <ItemTemplate> <asp:HyperLink ID="HyperLink1" runat="Server" NavigateUrl='<%# "~/Produkty.aspx?KatID=" + Eval("ProductCategoryID") %>' Text='<%# Eval("Name") %>'> </asp:HyperLink> <br /> </ItemTemplate>

Zapisz zmiany.

Otwórz szablon strony SzablonStrony.master

W widoku Design przenieś kontrolkę do obszaru roboczego położonego

po lewej stronie o ID="PierwszyObszarBoczny".

Zapisz zmiany.

Zapisz zmiany w projekcie i sprawdź, czy po kliknięciu na kategorie


produktów.

Dlaczego nie są?

Otwórz plik Produkty.aspx.cs. Do metody Page_Loa

string katID= Request.QueryString["katID"]; if (katID != null) { KategorieListBox.SelectedValue = katID; }

Zapisz zmiany w projekcie i sprawdź, czy po kliknięciu na kategorie


produktów.

Moduł 8


Twój klient wymyślił, że na stronie głównej ma być wyświetlana lista kategorii nadrzędnych, po

przekierowywany na stronę wyświetlania produktów z

dodaj nową kontrolkę użytkownika o nazwie

W kontrolce zmień

i w oknie Properties:

AdventureWorksDataContext

new (ProductCategoryID, Name)

ParentProductCategoryID=null

z listy rozwijanej wybierz

<br />

<asp:HyperLink ID="HyperLink1" runat="Server" %# "~/Produkty.aspx?KatID=" +

Text='<%# Eval("Name") %>'>

rolkę do obszaru roboczego położonego

czy po kliknięciu na kategorie


Page_Load dodaj:

czy po kliknięciu na kategorie




Strona 8-16


Piotr Bubacz

Moduł 9

Wersja 1

LINQ w ASP.NET

Spis treści

LINQ w ASP.NET ................................................................................................................................... 1













ITA-103 Aplikacje Internetowe LINQ w ASP.NET

Strona 9-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące technologii LINQ. Nauczysz

się, jak formułować proste zapytania z wykorzystaniem zintegrowanego

języka zapytań i w jaki sposób połączyć go z ASP.NET.

Cel modułu

Celem modułu jest przedstawienie technologii LINQ i możliwości jego

wykorzystania w aplikacjach ASP.NET.



• wiedział czym jest i jak działa LINQ

• potrafił tworzyć proste zapytania w LINQ

• potrafił wykorzystywać LINQ w ASP.NET

Wymagania wstępne




tworzenia stron internetowych

• znać podstawy pracy z danymi w ASP.NET




w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS”,

„Wprowadzenie do ASP.NET” oraz „Kontrolki danych w ASP.NET”.




Strona 9-3



Większość projektowanych programów manipuluje danymi w taki czy inny sposób. Dane są

najczęściej przechowywane w relacyjnych bazach danych. Mimo to jest duża różnica między

nowoczesnymi językami programowania a bazami w sposobie, w jaki reprezentują dane.

Największą różnica tkwi w sposobie odwoływania się do danych w bazie. Pogram odwołuje się do

bazy za pomocą API, które wymaga, aby zapytania były przesłane jako ciągi znaków. Niestety nie

mam możliwości weryfikacji poprawności tworzonych zapytań w czasie kompilacji, a jedynie w

czasie wykonania. Co więcej różnica, ta jest jeszcze bardziej widoczna przy odbieraniu wyników.

Nowoczesne języki programowania przechowują dane w postaci obiektów, natomiast bazy danych

organizują je w wiersze.

Dotychczas połączenie tych dwóch światów należało do programisty osobno w każdej tworzonej

aplikacji. Najlepszym rozwiązaniem było użycie pośredniej abstrakcyjnej warstwy dostępu, która

umożliwiała przejście pomiędzy światem wierszy a światem obiektów.


Rozwiązaniem problemu niekompatybilności świata baz danych i nowoczesnych języków

programowania jest LINQ (ang. Language Integrated Query), nowe podejście dostępu do danych,

które integruje język zapytań bazodanowych bezpośrednio w językach programowania .NET. W

wyniku otrzymujemy nie wiersze, ale obiekty.

Korzyści:

• niezależność od typu danych

• operowanie na danych jak na obiektach

• lepsza integracja z językami programowania

• wsparcie dla IntelliSense

Na Rys. 2 została przedstawiona architektura i komponenty LINQ.W warstwie najbliższej klientowi

mamy języki programowania dostępne na platformie .NET, takie jak C# 3.0. Następnie mamy

warstwę pośrednią, wykorzystywaną do translacji zapytań formułowanych w językach

programowania z jednej strony, z drugiej zaś translacji danych z różnych źródeł na obiekty.

<book><title/><author/><year/><price/>

</book>

.NET Language Integrated Query

Rys. 2 Architektura i komponenty LINQ



Strona 9-4

Operatory

W LINQ możemy używać wielu operatorów. Najważniejsze z nich zostały przedstawione w Tab. 1.

Tab. 1 Rodzaje operatorów w LINQ

Rodzaj operacji Nazwa operatora

filtrowanie Where

projekcja Select, SelectMany

kolejność OrderBy, ThenBy

grupowanie GroupBy

kwalifikatory Any, All

partycje Take, Skip, TakeWhile, SkipWhile

zbiory Distinct, Union, Intersect, Except

elementy First, FirstOrDefault, ElementAt

agregacja Count, Sum, Min, Max, Average

konwersja ToArray, ToList, ToDictionary

rzutowanie OfType<T>

LINQ to XML

W przypadku odwoływania się do dokumentów zapisanych w XML, wykorzystujemy warstwę

pośrednią LINQ to XML. Porównajmy kod aplikacji do tworzenia dokumentu XML z wyników

poszukiwania innego dokumentu XML.

W wyniku chcemy otrzymać następującą listę osób mieszkających w USA:

<contacts>

<contact>

<name>Great Lakes Food</name>

<phone>(503) 555-7123</phone>

</contact>

...

</contacts>

W przypadku programowania bez użycia LINQ napiszemy:

XmlDocument doc = new XmlDocument();

XmlElement contacts = doc.CreateElement("contacts");

foreach (Customer c in customers)

if (c.Country == "USA") {

XmlElement e = doc.CreateElement("contact");

XmlElement name = doc.CreateElement("name");

name.InnerText = c.CompanyName;

e.AppendChild(name);

XmlElement phone = doc.CreateElement("phone");

phone.InnerText = c.Phone;

e.AppendChild(phone);

contacts.AppendChild(e);

}

doc.AppendChild(contacts);

Używając LINQ:

XElement contacts = new XElement("contacts",

from c in customers

Piotr Bubacz


where c.Country == "USA"

select new XElement("contact",

new XElement("name",

new XElement("phone", c.Phone)

)

);

Porównanie obu fragmentów

Tab. 2 Porównanie programowania XML z i bez użycia LINQ

Programowanie XML bez LINQ

• model imperatywny

• bazowanie na dokumencie

• brak wbudowanych zapytań

• wymaga dużej pamięci

LINQ to SQL

Na Rys. 3 przedstawiono działanie zapytania do bazy zdefiniowanego w LINQ.

Programista tworzy zapytanie w

na zapytanie SQL. Zapytanie SQL jest przesyłane do bazy, skąd wracają wiersze. Następnie wiersze

są przetwarzane na obiekty i udostępniane aplikacji. Podobnie jest w przypadku dodawania

informacji do bazy.

Podsumowanie

W tym rozdziale przedstawione

Uwagi dla studenta


• rozumiesz jak działa LINQ

• umiesz napisać proste zapytanie

Pamiętaj o zapoznaniu się z

rozumiesz omawiane w nich

w uwagach, przeczytaj ponownie informacje z tego

Strona 9-5

where c.Country == "USA"

select new XElement("contact",

new XElement("name", c.CompanyName),

new XElement("phone", c.Phone)

fragmentów zostało przedstawione w Tab. 2.

ania XML z i bez użycia LINQ

Programowanie XML z użyciem LINQ

azowanie na dokumencie

wbudowanych zapytań

ymaga dużej pamięci

• model deklaratywny

• bazowanie na elemencie

• zintegrowane zapytania

• mniejsze i szybsze

przedstawiono działanie zapytania do bazy zdefiniowanego w LINQ.

Programista tworzy zapytanie w zintegrowanym języku wyrażeń, które warstwa pośrednia zamienia



Rys. 3 LINQ to SQL

przedstawione zostały podstawy języka LINQ.


jak działa LINQ

napisać proste zapytanie wykorzystując zintegrowany język zapytań


w nich zagadnienia. Jeśli masz trudności ze zrozumieniem tematu zawartego

, przeczytaj ponownie informacje z tego rozdziału i zajrzyj do notatek z

Moduł 9

LINQ w ASP.NET

Programowanie XML z użyciem LINQ

odel deklaratywny

azowanie na elemencie

integrowane zapytania

przedstawiono działanie zapytania do bazy zdefiniowanego w LINQ.

warstwa pośrednia zamienia



zintegrowany język zapytań

zawartymi w tym module. Upewnij się, że

. Jeśli masz trudności ze zrozumieniem tematu zawartego

zajrzyj do notatek z wykładów.



Strona 9-6


1. Fabrice Marguerie, Steve Eichert, Jim Wooley, LINQ in Action, Manning Publications, 2008

Autor w prosty sposób przybliża zagadnienia związane z LINQ. Warto też zajrzeć na

stronę książki http://linqinaction.net, gdzie autor umieszcza różne informacje na

temat LINQ.

2. Jacek Matulewski, C# 3.0 i .NET 3.5. Technologia LINQ, Helion, 2008

Dzięki temu podręcznikowi nauczysz się pobierać dane z różnego rodzaju źródeł,

tworzyć pliki XML w nowy, bardziej intuicyjny sposób, stosować składowane

rozszerzenia oraz nowego typu metody (oraz odpowiadające im operatory),

zdefiniowane w najnowszej wersji języka C#. Ponadto dowiesz się, jak tworzyć

własne źródła danych LINQ.

3. Paolo Pialorsi, Marco Russo, Introducing Microsoft LINQ, Microsoft Press, 2008

Książka stanowi wprowadzenie do LINQ dla osób, które nie miały wcześniejszego

doświadczenia ani z tą technologią, ani z nowościami wprowadzonymi w C# 3.0. W

zwięzły sposób omawia podstawy LINQ, w tym składnię, operatory i posługiwanie

się tą technologią w odniesieniu do kolekcji obiektów, relacyjnych baz danych i

dokumentów XML.

Piotr Bubacz




Aplikacja, która tworzysz dla Adventure Works wymaga rozszerzeń. Przede wszystkim Twojemu

klientowi zależy na wyświetlaniu obrazków produktów. Twoim zadaniem jest zaimplementowanie

sposobu pobierania obrazków z bazy danych.

Zadanie Tok postęp

1. Dodaj nową

stronę

• Otwórz stronę przygotowaną w poprzednim ćwiczeniu.

• Do aplikacji dodaj nową stronę


2. Na podstawie

parametru ID

wyślij obrazek

• W metodzie

if (Request.QueryString["id"] != null){

}

3. Zapis i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie. Wyświetl stronę

co jest wyświetlane.

• Dodaj do adresu strony

4. Dodaj

wyświetlanie

obrazka na

stronie

Produkty.aspx

• Otwórz stronę

• W widoku

Tag

• Z listy

• Przesuń pole na pierwszą pozycję korzystając z

• W

—

—

—

—

5. Zapisz i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie. Wyświetl stronę

czy wyświetlane są miniatury produktów.

Strona 9-7


zacji 10 min)



sposobu pobierania obrazków z bazy danych.

Tok postępowania

Otwórz stronę przygotowaną w poprzednim ćwiczeniu.

Do aplikacji dodaj nową stronę Miniatura.aspx opartą o szablon strony


W metodzie Page_Load dodaj następujący kod:

if (Request.QueryString["id"] != null)

AdventureWorksDataContext db = new AdventureWorksDataContext();

var miniaturka = (from p in db.Products

where p.ProductID == int.Parse(Request.QueryString["id"])

select p.ThumbNailPhoto).FirstOrDefault();

if (miniaturka != null) {

Response.ContentType = "image/bmp";

Response.BinaryWrite(miniaturka.ToArray());

}

Zapisz zmiany w projekcie. Wyświetl stronę Miniatura.aspx

co jest wyświetlane.

Dlaczego pojawiła się pusta strona?

Dodaj do adresu strony ?id=771.

Co się zmieniło? Dlaczego?

Otwórz stronę Produkty.aspx.

W widoku Design wybierz kontrolkę GridView, a następnie kilknij

Tag. Wybierz Edit Columns.

Z listy Available Fields wybierz ImageField i kliknij

Przesuń pole na pierwszą pozycję korzystając z przycisku

W obszarze ImageField Properties:

— w polu DataAlternateTextField wpisz Name

— w polu DataAlternateTextFormatString wpisz

— w polu DataImageUrlField wpisz ProductID

— w polu DataImageUrlFormatString wpisz ~/Miniatura.aspx?id={0}

Zapisz zmiany w projekcie. Wyświetl stronę Produkty.aspx

czy wyświetlane są miniatury produktów.

Moduł 9

LINQ w ASP.NET



Otwórz stronę przygotowaną w poprzednim ćwiczeniu.

opartą o szablon strony



select p.ThumbNailPhoto).FirstOrDefault();

Response.BinaryWrite(miniaturka.ToArray());

Miniatura.aspx i sprawdź,

a następnie kilknij Smart

i kliknij Add.

przycisku .

Miniatura {0}

~/Miniatura.aspx?id={0}

Produkty.aspx i sprawdź,



Strona 9-8


Teraz musisz przygotować stronę wyświetlającą szczegóły produktu – Szczegoly.aspx.


1. Przygotuj

stronę

Szczegoly.aspx do

wyświetlenia

informacji o

produkcie

• Do aplikacji dodaj stronę Szczegoly.aspx opartą na stronie wzorcowej, a

następnie dodaj do niej kontrolkę MultiView, a następnie dwie

kontrolki View o ID: prawidlowyView i blednyView.

• W pierwszej kontrolce umieść kontrolkę Label i w oknie Properties w

polu (ID) wpisz nazwaLabel, natomiast pole Text zostaw puste.

• Dodaj znacznik <br /> i dodaj kontrolkę Image i w oknie Properties w

polu (ID) wpisz produktImage.

• Dodaj znacznik <br /> i napisz Kategoria:, a następnie umieść kontrolkę

Label i w oknie Properties w polu (ID) wpisz kategoriaLabel, natomiast

pole Text zostaw puste.

• Dodaj znacznik <br /> i napisz Cena:, a następnie umieść kontrolkę

Label o właściwościach ID="cenaLabel" i Text="".

• Dodaj znacznik <br /> i napisz Kolor:, a następnie umieść kontrolkę

Label i w oknie Properties w polu (ID) wpisz kolorLabel, natomiast pole

Text zostaw puste.

• Dodaj znacznik <br /> i napisz Opis:, a następnie dodaj znacznik <br /> i

umieść kontrolkę Label i w oknie Properties w polu (ID) wpisz opisLabel.

• W kontrolce blednyView w widoku Source dodaj:

Nieprawidłowy produkt<br />

• Na końcu w widoku Source dodaj:

<a href="Produkty.aspx">Powrót do przeglądania produktów</a>

2. Wyświetl

produkt zgodnie z

przesłaną

informacją przez

metodę GET

• Do metody Page_Load dodaj:

MultiView1.SetActiveView(blednyView); if (Request.QueryString["id"] != null)

{


var produkt = (from p in db.Products


select new {

ProductID = p.ProductID,

Name = p.Name,

Category = p.ProductCategory.Name,

ListPrice = p.ListPrice, Color = p.Color,

Description =

p.ProductModel.ProductModelProductDescriptions.

First().ProductDescription.Description

}).FirstOrDefault();

if (produkt != null) {

MultiView1.SetActiveView(prawidlowyView);

Page.Title = "Przeglądasz: " + produkt.Name;

nazwaLabel.Text = produkt.Name;

produktImage.ImageUrl = "Miniatura.aspx?id=" + produkt.ProductID.ToString();

kategoriaLabel.Text = produkt.Category;

cenaLabel.Text = String.Format("{0:C}", produkt.ListPrice);

kolorLabel.Text = produkt.Color;

opisLabel.Text = produkt.Description;

} }



Strona 9-9

3. Zapisz i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i przetestuj możliwość wyświetlania

produktów na stronie Szczegoly.aspx.

• Sprawdź co się stanie, jak w adresie przypiszesz do id inną wartość,

np. 1.

• Sprawdź co się stanie, jak w adresie przypiszesz do id ciąg znaków, np. a.


Teraz musisz przygotować kontrolkę wyświetlającą nowe produkty na szablonie strony .


1. Dodaj

kontrolkę

użytkownika

wyświetlającą

nowe produkty

• Do katalogu Kontrolki dodaj nową kontrolkę użytkownika o nazwie

NoweProdukty.ascx.

• Następnie dodaj kontrolkę ListView i w oknie Properties:

— w polu ID wpisz NoweProduktyListView

— w polu ItemPlaceholderID wpisz ListaPlaceHolder

• W widoku Source w kontrolce ListView umieść:

<LayoutTemplate>

<strong>Nasze nowe produkty:</strong><br />

<asp:PlaceHolder ID="ListaPlaceHolder" runat="server" /> </LayoutTemplate>

<ItemTemplate>

<div class="OknoProduktow" >

<asp:HyperLink ID="HyperLink1" runat="server"

NavigateUrl='<%# "~/Szczegoly.aspx?id="+Eval("ProductID") %>' Text='<%#Eval("Name") %>' /> <br />

<asp:Image ID="ProduktyImage" runat="server"

ImageUrl='<%# "~/Miniatura.aspx?id=" + Eval("ProductID") %>'

AlternateText='<%# Eval("Name") %>' /> <br />

Kategoria: <%#Eval("ProductCategory.Name") %> <br />

Kolor: <%#Eval("Color") %> <br /> Cena: <%#Eval("ListPrice", "{0:C}") %><br />

</div>

</ItemTemplate>

• W metodzie Page_Load umieść:

AdventureWorksDataContext db = new AdventureWorksDataContext(); var noweProdukty = (from p in db.Products

orderby p.SellStartDate descending

select p).Take(4);

NoweProduktyListView.DataSource = noweProdukty;

NoweProduktyListView.DataBind();

• Zapisz zmiany.

2. Dodaj

kontrolkę do

szablonu strony

• Otwórz szablon strony SzablonStrony.master.

• W widoku Design przenieś kontrolkę do obszaru roboczego położonego

po prawej stronie o ID=DrugiObszarBoczny.

• Zapisz zmiany.

3. Dodaj

kontrolkę do

głównej strony

aplikacji

• Otwórz stronę Default.aspx.


w środku strony.

• Zapisz zmiany.



Strona 9-10

4. Zapis i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i sprawdź, czy wyświetlane są nowe produkty

w drugim obszarze roboczym na każdej stronie.

5. Ustal wygląd

wyświetlanych

produktów

• Do pliku Style.css dodaj następujące informacje o stylu:

.OknoProduktow {

background-color: #C3DBEA;

border-style: solid;

border-color: #55BBFF;

margin: 5px auto 0px auto;

width: 120px; }

6. Zapisz i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i sprawdź, jak wyświetlane są nowe produkty

w drugim obszarze roboczym na każdej stronie.


Ostatnim zadaniem jest przygotowanie kontrolki wyświetlającej losowe produkty.


7. Dodaj widok i

funkcję w TSQL

umożliwiającą

losowo

wybieranie

rekordów z bazy

• W oknie Server Explorer rozwiń gałąź zawierającą plik

AdventureWorksLT_Data.mdf i kliknij prawym przyciskiem myszy gałąź

Views i wybierz Add New View.

• W oknie Add Table wciśnij przycisk Close. W oknie zapytania zastąp

SELECT FROM następującym zapytaniem:

SELECT NEWID() AS ID

• Wciśnij CTRL+S i wprowadź nazwę vLosuj.

• Kliknij prawym przyciskiem myszy gałąź Functions i wybierz Add New->

Scalar-valued Function.

• Zamień zapytanie na:

CREATE FUNCTION Losuj ()

RETURNS uniqueidentifier AS

BEGIN RETURN (SELECT ID FROM vLosuj) END

• Wciśnij CTRL+S.

8. Dodanie

funkcji Losuj do

obiektu

AdventureWorksD

ataContext

• W oknie Solution Explorer otwórz App_Code\AdventureWorks.dbml.

• Do prawej strony opisanej Create methods by dragging items dodaj z

okna Server Explorer funkcję Losuj z gałęzi Functions.

9. Dodaj

kontrolkę

użytkownika

wyświetlającą

nowe produkty

• Do katalogu Kontrolki dodaj nową kontrolkę użytkownika o nazwie

WybraneProdukty.ascx.

• Następnie dodaj kontrolkę ListView i w oknie Properties:

— w polu ID wpisz WybraneProduktyListView

— w polu ItemPlaceholderID wpisz ListaPlaceHolder

• W widoku Source w kontrolce umieść:

<LayoutTemplate>

<strong>Wybrane produkty:</strong>

<asp:PlaceHolder ID="ListaPlaceHolder" runat="server" />

</LayoutTemplate>



Strona 9-11

<ItemTemplate>

<div class="OknoProduktow">

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "~/Szczegoly.aspx?id="+Eval("ProductID") %>'

Text='<%#Eval("Name") %>' /> <br />

<asp:Image ID="ProduktyImage" runat="server"

ImageUrl='<%# "~/Miniatura.aspx?id=" + Eval("ProductID") %>'

AlternateText='<%# Eval("Name") %>' /> <br />

Kategoria: <%#Eval("ProductCategory.Name") %><br /> Kolor: <%#Eval("Color") %><br />

Cena: <%#Eval("ListPrice", "{0:C}") %><br />

</div>

</ItemTemplate>

• W metodzie Page_Load umieść:


var noweProdukty = (from p in db.Products

orderby db.Losuj()

select p).Take(3);

WybraneProduktyListView.DataSource = noweProdukty; WybraneProduktyListView.DataBind();

• Zapisz zmiany.

10. Dodaj

kontrolkę do

szablonu strony

• Otwórz szablon strony SzablonStrony.master.


po lewej stronie o ID="PierwszyObszarBoczny".

• Zapisz zmiany.

11. Dodaj

kontrolkę do

głównej strony

aplikacji

• Otwórz stronę Default.aspx

• W widoku Design usuń zawartość strony i umieść kontrolkę

WybraneProdukty.ascx na stronę.

• Zapisz zmiany.

12. Zapis i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i sprawdź czy wyświetlane są losowe

produkty w pierwszym obszarze roboczym na każdej stronie.

13. Zapisz i

przetestuj dodaną

funkcjonalność

• Zapisz zmiany w projekcie i sprawdź jak wyświetlane są losowe produkty

w pierwszym obszarze roboczym na każdej stronie.


Piotr Bubacz

Moduł 10

Wersja 1

Bezpieczeństwo serwisów

internetowych

Spis treści

Bezpieczeństwo serwisów internetowych ........................................................................................... 1












ITA-103 Aplikacje Internetowe Bezpieczeństwo serwisów internetowych

Strona 10-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące sposobów zabezpieczania

dostępu do aplikacji internetowej przy pomocy mechanizmów autoryzacji.

Poznasz kontrolki logowania oraz nauczysz się, jak można ukrywać opcje

menu przed różnymi grupami użytkowników.

Cel modułu

Celem modułu jest przedstawienie wbudowanych w ASP.NET

mechanizmów zabezpieczających dostęp do aplikacji internetowych.



• potrafił wykorzystać uwierzytelnianie oparte na formularzu

• potrafił zabezpieczać dostęp do aplikacji przed nieautoryzowanymi

użytkownikami

• potrafił określać prawa dostępów dla różnych grup użytkowników

Wymagania wstępne


• znać podstawy HTML i CSS

• znać zasady pracy w Visual Studio 2008




w modułach Podstawy HTML, Kaskadowe Arkusze Stylów – CSS

i Wprowadzenie do ASP.NET.




Strona 10-3



Tworząc aplikacje internetowe często napotykamy problem związany z dodaniem możliwości

uwierzytelniania użytkowników naszego serwisu. Dodatkowo musimy zapewnić mechanizm

ograniczenia dostępu do zasobów dla określonych użytkowników lub grup użytkowników.

Uwierzytelnianie użytkowników to nie tylko formularz, w którym wpisuje się nazwę i hasło. Za tym

zagadnieniem kryje się szereg innych kwestii: jak i gdzie przechowywać informacje

o użytkownikach, jak umożliwić rejestracje, jak ułatwić proces odzyskiwania hasła, jak w końcu

ograniczyć dostęp do opcji menu i katalogów aplikacji.

W tym celu wykorzystujemy mechanizmy uwierzytelnienia i autoryzacji. Tworzenie takich

mechanizmów nie jest proste i musi być poprzedzone dogłębną analizą problemu. W aplikacjach

internetowych zależy nam na szybkim tworzeniu rozwiązań. W celu zapewnienia odpowiedniego

poziomu zabezpieczeń możemy skorzystać z mechanizmów dostarczanych przez ASP.NET.

Tworzenie, rejestracja, logowanie, zmiana hasła, przypomnienie hasła to najczęstsze przypadki

użycia zarządzania użytkownikami. Tworząc takie formularze od podstaw musimy nie tylko

zapewnić odpowiedni interfejs użytkownika, ale również zapewnić odpowiednie zapisanie tych

danych do repozytorium. ASP.NET dostarcza nam gotowy zbiór podstawowych kontrolek

ułatwiających te zadania.


Uwierzytelnianie użytkowników

Uwierzytelnianie (ang. authentication) jest to proces, w którym sprawdza się, czy dany użytkownik

jest tym, za kogo się podaje. Proces ten najczęściej wiąże się z podaniem przez użytkownika nazwy i

hasła. W ASP.NET wspierane są różne mechanizmy uwierzytelniania:

• uwierzytelnianie Windows

• uwierzytelnianie za pomocą formularza

• uwierzytelnianie przy użyciu Windows Live ID

Uwierzytelnianie Windows

Uwierzytelnianie Windows można wykorzystywać, jeśli baza użytkowników znajduje się na

kontrolerze domeny Windows. Najważniejszą zaletą takiego uwierzytelnienia jest możliwość

korzystania z istniejących kont systemowych oraz to, że nie potrzeba pisać dodatkowego kodu

zarządzającego uwierzytelnieniem. Serwer IIS identyfikuje użytkownika za pomocą żetonów

przyznanych użytkownikowi przy zalogowaniu do serwera.

W celu konfiguracji uwierzytelniania Windows należy w pliku Web.config w sekcji <system.web>

dopisać:

<authentication mode="Windows"/>

Uwierzytelnianie Windows może być wykorzystywane tylko w przypadku posiadania kont przez

użytkowników na serwerze. Taka sytuacja ma miejsce najczęściej w przypadku aplikacji

intranetowych. Uwierzytelnianie Windows jest domyślną metodą uwierzytelniania w aplikacjach

ASP.NET.

Uwierzytelnianie za pomocą formularza

W przypadku gdy projektowana aplikacja ma działać w sieci Internet, posiadanie konta na serwerze

przez wszystkich potencjalnych użytkowników aplikacji jest niemożliwe. Dodatkowo istnieje

potrzeba przechowywania informacji o użytkownikach w innym miejscu niż system użytkowników



Strona 10-4

Windows. Najczęściej dane takie przechowywane są w bazie danych. Uwierzytelnianie formularzy

umożliwia łatwe i bezpieczne potwierdzanie tożsamości.

Użytkownik w przypadku tej metody uwierzytelniania musi skorzystać ze specjalnej strony do

wprowadzenia nazwy i hasła, które następnie jest sprawdzane z danymi zapisanymi w bazie

danych, specjalnych plikach lub innych źródłach. W przypadku małej ilości użytkowników możliwe

jest przechowywanie tych danych w pliku Web.config, jednak dla większych rozwiązań lepiej jest

wykorzystać bazę danych.

Standardowo uwierzytelnianie to wykorzystuje plik cookie do przechowywania informacji

o uwierzytelnieniu między stronami. Plik taki jest wysyłany do serwera wraz z każdym żądaniem.

Istnieje możliwość wykorzystania adresu URL do przechowywania tej informacji w przypadku, kiedy

przeglądarka użytkownika ma wyłączoną obsługę ciasteczek.

Poniżej została przedstawiona podstawowa konfiguracje tego typu uwierzytelniania z dodatkowym

znacznikiem <forms> określającym stronę logowania Zaloguj.aspx.

<authentication mode="Forms">

<forms loginUrl="Zaloguj.aspx" />

</authentication>

Uwierzytelnianie przy użyciu Windows Live ID

Windows Live ID to ogólnodostępny, jednolity system, umożliwiający dowolnym użytkownikom –

nie tylko klientom Microsoft – korzystanie ze wszystkich stron Microsoft wymagających logowania.

Każdy zarejestrowany użytkownik otrzymuje swój indywidualny identyfikator, który pomaga mu w

poruszaniu się po wszystkich zasobach Microsoft, na całym świecie. Windows Live ID jest np.

konieczny do wzięcia udziału w spotkaniu (konferencji lub seminarium) – dzięki niemu rejestracja

uczestników odbywa się łatwiej i szybciej.

Windows Live ID został udostępniony programistom, aby łatwo mogli dołączyć globalne

uwierzytelnianie do swoich aplikacji. Dzięki temu użytkownik nie musi posiadać na naszej stronie

dodatkowego hasła. Wystarczy, że zaloguje się na dowolnej stronie wspierającej tę technologie i

ma dostęp do wszystkich zasobów.

Przechowywanie informacji o użytkownikach w bazie danych

W przypadku uwierzytelnienie za pomocą formularza ASP.NET wykorzystuje standardowych

dostawców SqlMembershipProvider i SqlRoleProvider. Wykorzystują one bazę danych SQL

Server do przechowywania informacji o użytkownikach i rolach. Informacje te są przechowywane w

szeregu tabel i dostęp do nich następuje przez procedury składowane. Standardowo informacje te

są przechowywane w bazie ASPNETDB.MDF w katalogu App_Data.

Umieszczając aplikacje internetową na serwerze dostawcy mamy dość często ograniczenie ilości

baz. Z tego względu, jeśli w aplikacji wykorzystywane są również inne dane, dość często są one

dodawane do tej właśnie bazy. Nie jest to rozwiązanie bezpieczne, ponieważ znajomość nazwy bazy

danych może ułatwić atak. Dodatkowo jeśli posiadamy już gotowe rozwiązanie bazodanowe i

chcemy rozszerzyć naszą aplikację o możliwość uwierzytelniania, możemy te informacje umieścić w

naszej bazie danych.

Aby umieścić niezbędne tabele i procedury w naszej bazie, musimy wykorzystać ASP.NET SQL

Server Registration Tool (aspnet_regsql.exe). Narzędzie to może być używane z linii poleceń lub z

poziomu graficznego kreatora. W przypadku użycia linii poleceń mamy większe możliwości

konfiguracji narzędzia.

W tym celu musimy uruchomić linię poleceń VS 2008. W systemie Windows XP/2003 musimy

wybrać Start -> Programy -> Microsoft Visual Studio 2008 -> Visual Studio Tools -> Visual

Studio 2008 Command Prompt, a następnie wydać polecenie:



Strona 10-5

aspnet_regsql -A all -C "Data Source=.\SQLEXPRESS;Integrated

Security=True;User Instance=True" -d "X:\Projekt\APP_DATA\moja_baza.mdf"

Gdzie X:\Projekt to ścieżka do naszego projektu strony, a moja_baza.mdf, to plik zawierający

bazę danych aplikacji.

Po utworzeniu niezbędnych tabel i procedur należy poinformować dostawców o konieczności

korzystania z naszej bazy danych. W tym celu do pliku Web.config musimy dodać do sekcji

<system.web> następujące informacje:

<roleManager enabled="true" defaultProvider="CustomizedRoleProvider">

<providers>

<add name="CustomizedRoleProvider"

type="System.Web.Security.SqlRoleProvider"

connectionStringName="ConnectionString" />

</providers>

</roleManager>

<membership defaultProvider="CustomizedMembershipProvider">

<providers>

<add name="CustomizedMembershipProvider"

type="System.Web.Security.SqlMembershipProvider"


</providers>

</membership>

Gdzie ConnectionString to nazwa naszego połączenia do bazy skonfigurowana w sekcji

connectionStrings.

Autoryzacja użytkowników

Autoryzacja (ang. authorization) to proces, w którym sprawdzane jest, czy użytkownik o ustalonej

wcześniej tożsamości ma prawo dostępu do zasobów, o które prosi. Uprawnienia mogą dotyczyć

np. dostępu do katalogu lub pliku.

Dostęp do plików

Autoryzacja dostępu do pliku jest związana z prawami, jakie użytkownik ma w systemie, zatem aby

używać tej metody należy stosować uwierzytelnianie Windows. W celu konfiguracji uprawnień

należy wykorzystać narzędzia sytemu i skonfigurować odpowiednie poziomy dostępu dla

użytkowników.

Dostęp do pliku w obrębie aplikacji

W przypadku plików w obrębie aplikacji możliwe jest określenie dostępu do pojedynczej strony lub

wirtualnego katalogu w aplikacji sieciowej. Możliwe jest użycie tego sposobu autoryzacji ze

wszystkimi sposobami uwierzytelnienia.

Dostęp do katalogu można ograniczyć w pliku Web.config umieszczonym w głównym katalogu

aplikacji lub katalogu, którego dotyczą dane prawa.

W celu ustalenia praw w wybranym katalogu należy utworzyć w nim plik Web.config, a następnie w

sekcji <authorization> zezwolić (element <allow>) lub zabronić (element <deny>) dostępu do

niego określonym użytkownikom lub grupom użytkowników.

Do określania roli dopuszcza się również używanie następujących symboli zastępczych:

• * – określa dowolnego użytkownika

• ? – określa użytkownika anonimowego

Przykład – zezwolenie dostępu dla użytkowników Adam, Karol oraz Michal i zabronienie dostępu

dla użytkowników anonimowych.



Strona 10-6

<authorization>

<allow users="Adam, Karol, Michal" />

<deny users="?" />

</authorization>

W celu ustalenia praw dla całej aplikacji z określeniem katalogów aplikacji należy w głównym pliku

Web.config dodać sekcję <location path="ściezka_do_katalogu">, a następnie sekcję

<system.web>, a w niej sekcję <authorization>. Przykład:

<location path="Admin">

<system.web>

<authorization>

<allow roles="Administrator" />

<deny users="*" />

</authorization>

</system.web>

</location>

Kontrolki logowania

Kontrolki logowania stanowią zbiór kontrolek serwerowych implementujących wszystkie

najważniejsze elementy niezbędne do zarządzania użytkownikami i ich uwierzytelniania.

Kontrolka Login

Kontrolka Login (Rys. 2) umożliwia uwierzytelnienie użytkownika. Uwierzytelnienie odbywa się z

pomocą formularza przy użyciu obiektu MembershipProvider zdefiniowanego w pliku

Web.config.

Rys. 2 Kontrolka Login

Mechanizmy uwierzytelniania umożliwiają zapamiętanie użytkownika w pliku cookie, dzięki temu

nie musi on za każdym razem wpisywać danych logowania.

Kontrolka ChangePassword

Kontrolka ChangePassword (Rys. 3) umożliwia zalogowanemu użytkownikowi zmianę hasła.

Udana zmiana hasła powoduje wysłanie do użytkownika wiadomości e-mail.

Rys. 3 Kontrolka ChangePassword

Wysłanie poczty elektronicznej jest możliwe po wcześniejszym skonfigurowaniu parametrów

serwera SMTP w pliku Web.config. Można to również zrobić przy pomocy ASP.NET Web Site

Administration Tool.



Strona 10-7

Przykład konfiguracji serwera poczty w pliku Web.config:

<system.net>

<mailSettings>

<smtp from="od">

<network host="adresSerwera" password="haslo" userName="uzytkownik" />

</smtp>

</mailSettings>

</system.net>

Kontrolka CreateUserWizard

Kontrolka CreateUserWizard (Rys. 4) umożliwia rejestrację nowego użytkownika. Nowy

użytkownik musi podać nazwę, hasło, adres e-mail oraz sekretne pytanie i odpowiedź . Sekretne

pytanie i odpowiedź służą do odzyskiwania hasła w przypadku, gdy użytkownik je zapomni.

Udane utworzenie użytkownika powoduje wysłanie wiadomości elektronicznej na podany adres.

Rys. 4 Kontrolka CreateUserWizard

Kontrolka PasswordRecovery

Kontrolka PasswordRecovery umożliwia użytkownikowi przypomnienie hasła. Kontrolka po

wpisaniu nazwy użytkownika wymaga podania odpowiedzi na sekretne pytanie. Jeśli odpowiedź

jest prawidłowa, to wysyłana jest wiadomość zawierająca nowe hasło.

Rys. 5 Kontrolka PasswordRecovery

Kontrolka LoginView

Kontrolka LoginView jest kontenerem umożliwiającym wyświetlenie zawartości w zależności od

tego, czy i kto jest zalogowany.

Standardowo kontrolka rozpoznaje użytkownika anonimowego (<AnonymousTemplate>) i

zalogowanego (<LoggedInTemplate>). Dla każdego ze stanów możliwe jest zdefiniowanie

osobnej zawartości. Przykład:



Strona 10-8

<asp:LoginView ID="LoginView1" runat="server">

<LoggedInTemplate>

Zawartość dla użytkownika zalogowanego

</LoggedInTemplate>

<AnonymousTemplate>

Zawartość dla użytkownika anonimowego

</AnonymousTemplate>

</asp:LoginView>

Kontrolka LoginStatus

Kontrolka LoginStatus umożliwia wyświetlenie konfigurowalnych odnośników w zależności od

tego, czy użytkownik jest zalogowany (Logout) czy anonimowy (Login). Jeśli użytkownik nie jest

zalogowany, to po kliknięciu na odnośnik Login zostaje przekierowany na stronę logowania

zdefiniowaną w pliku Web.config w atrybucie loginUrl sekcji <authentication>. Jeśli

użytkownik jest zalogowany, to kliknięcie przycisku Logout zostaje wylogowany i przekierowany

na stronę podaną w atrybucie LogoutPageUrl kontrolki. Przykład:

<asp:LoginStatus ID="LoginStatus1" runat="server"

LogoutAction="Redirect" LogoutPageUrl="Default.aspx" />

Kontrolka LoginName

Kontrolka LoginName wyświetla nazwę użytkownika. Jest wykorzystywana najczęściej do

wyświetlenia komunikatu powitalnego dla użytkownika. Przykład:

Witaj <asp:LoginName ID="LN1" runat="server" />!

Ukrywanie opcji menu

W aplikacjach internetowych zachodzi często potrzeba ukrywania pewnych elementów

nawigacyjnych przed użytkownikami, którzy nie mają odpowiednich uprawnień, np. wybranych

opcji menu.

Aby tego dokonać, należy dodać atrybut roles do pliku Web.sitemap oraz w pliku Web.config

ustawić właściwość securityTrimmingEnabled obiektu XmlSiteMapProvider na wartość

true.

Należy pamiętać o tym, że ukrycie przed użytkownikiem odnośnika do strony nie zabrania mu do

niej dostępu. Aby ograniczyć dostęp do folderu lub pliku, należy skonfigurować sekcję

<authorization> w pliku Web.config.

Koniecznym zatem jest jawne określenie roli jednocześnie na poziomie uprawnień do folderów

(Web.config), jak i węzłów, z którymi nie jest skojarzony adres URL (Web.sitemap).

Konfiguracja atrybutu roles w pliku Web.sitemap

Konfiguracja atrybutu roles odbywa się poprzez dodanie go do sekcji <siteMapNode> i

przypisanie do niego odpowiednich ról. Przykład:

<siteMapNode

title="Administracja"

description="Zarządzaj witryną"

roles="Administrator">

...

</siteMapNode>

Konfiguracja pliku Web.config

W pliku Web.config w sekcji <system.web> należy dodać domyślnego dostawcę mapy serwisu

XmlSiteMapProvider. Przykład:

<siteMap defaultProvider="XmlSiteMapProvider" enabled="true" >

<providers>



Strona 10-9

<add

name="XmlSiteMapProvider"

description="Domyślny dostawca mapy serwisu."

type="System.Web.XmlSiteMapProvider"

siteMapFile="Web.sitemap"

securityTrimmingEnabled="true" />

</providers>

</siteMap>

Podsumowanie

W tym rozdziale przedstawione zostały zagadnienia związane z uwierzytelnianiem użytkowników

przy użyciu formularzy. Pokazano jak zabezpieczać dostęp do katalogów oraz opcji menu.

Zaprezentowano kontrolki ułatwiające najczęstsze zadania przy zarządzaniu użytkownikami.

Uwagi dla studenta


• umiesz skonfigurować uwierzytelnianie za pomocą formularza

• umiesz określić dostęp do wybranego katalogu w aplikacji

• znasz kontrolki logowania i wiesz kiedy możesz je użyć

• potrafisz ukryć opcje menu przed różnymi grupami użytkowników





1. Scott Mitchell, Examining ASP.NET 2.0's Membership, Roles, and Profile,

http://aspnet.4guysfromrolla.com/articles/120705-1.aspx

12-częściowy artykuł poruszający praktyczne zagadnienia związane z zarządzaniem

użytkownikami, rolami i profilami. Nie tylko dobrze przedstawiona teoria, ale

przede wszystkim porady praktyczne i rozwiązania najczęściej spotykanych

problemów.

2. Jakub Zagórski, Portal Internetowy w ASP.NET 2.0 – z czym to się je?,

http://www.codeguru.pl/article-560.aspx

Artykuł dotyczący wielu aspektów związanych z tworzeniem portalu

internetowego, z ciekawym opisem kwestii związanych z uwierzytelnieniem.

3. How To: Use Membership in ASP.NET 2.0, http://msdn.microsoft.com/en-


Obszerny artykuł zespołu patterns & practices przedstawiający kwestie

wykorzystania uwierzytelniania w aplikacjach ASP.NET.

4. Stefan Schackow, Professional ASP.NET 2.0 Security, Membership, and Role Management, Wrox,

2006

Autor w książce poruszył wiele zagadnień związanych z bezpieczeństwem, włącznie

z zabezpieczaniem konfiguracji. Książka zawiera szczegółowe informacje dotyczące

wszystkich najważniejszych obszarów bezpieczeństwa aplikacji ASP.NET.



Strona 10-10



Przygotowujesz aplikację internetową dla firmy Adventure Works, która planuje ekspansje na rynku

internetowym w Polsce. Aktualnie aplikacja umożliwia już przeglądanie produktów oraz zawiera

klika ciekawych elementów ułatwiających sprzedaż produktów. Kolejnym krokiem w rozwoju

aplikacji jest implementacja uwierzytelniania jej użytkowników. W bazie dostarczonej do

rozbudowy istnieją już informacje o użytkownikach, jednak ze względu na krótki czas implementacji

aplikacji Twój zespół zaproponował wykorzystanie wbudowanych mechanizmów uwierzytelniania.

Na szczęście klient się zgodził. Twój zespół sprawdził, że mechanizm ten potrzebuje bazy danych

ASPNETDB. Niestety na serwerze wykupionym przez klienta nie ma możliwości dodania drugiej

bazy danych. Musisz zatem zintegrować bazę uwierzytelniania z istniejącą bazą danych oraz

utworzyć dwóch użytkowników: admin i karol.


1. Dodaj tabele i

procedury z

uwierzytelniające

do istniejącej bazy

danych

• Otwórz aplikację internetową przygotowaną w poprzednim module.

• W oknie Solution Explorer wybierz bazę danych

AdventureWorksLT_Data.mdf znajdującą się w katalogu App_Data.

Skopiuj ścieżkę dostępu znajdująca się w oknie Properties w polu

FullPath.

• W systemie Windows XP/2003 wybierz Start -> Programy -> Microsoft

Visual Studio 2008 -> Visual Studio Tools -> Visual Studio 2008

Command Prompt.

• W linii poleceń wpisz nie kopiuj:

aspnet_regsql -A all -C "Data Source=.\SQLEXPRESS;Integrated

Security=True;User Instance=True" -d

• Dodaj na końcu wpisanego polecenia odstęp, a następnie wklej

skopiowaną ścieżkę (kliknij prawym przyciskiem myszy, a następnie

wybierz Wklej).

2. Dodaj

informację o

korzystaniu z

innej bazy do

pliku Web.config

• Otwórz plik Web.config.

• Do sekcji <system.web> dodaj następujące informacje:

<roleManager enabled="true"

defaultProvider="CustomizedRoleProvider">

<providers>

<add name="CustomizedRoleProvider"

type="System.Web.Security.SqlRoleProvider"

applicationName="AdventureWorks"


</providers>

</roleManager>

<membership defaultProvider="CustomizedMembershipProvider">

<providers>

<add name="CustomizedMembershipProvider"

type="System.Web.Security.SqlMembershipProvider"

applicationName="AdventureWorks"


</providers>

</membership>

• Odnajdź sekcję <connectionStrings>, a następnie znacznik <add>.

Skopiuj zawartość właściwości name i wklej dwukrotnie w miejsce

ConnectionString (wyróżnione miejsca w kodzie powyżej) w dodanej



Strona 10-11

uprzednio fragmencie konfiguracji.

3. Uruchom

narzędzie

administracyjne

• Uruchom ASP.NET Web Site Administration Tool, wybierając z menu

główngo Websites -> ASP.NET Configuration.

• Zostanie uruchomiona przeglądarka i wyświetli się strona przedstawiona

na Rys. 6.

Rys. 6 ASP.NET Web Site Administration Tool

4. Dodaj

użytkowników do

aaplikacji

• Wybierz z menu zakładkę Security, a następnie kliknij odnośnik Use the

security Setup Wizard to configure security step by step. Naciśnij

przycisk Next.

• W kroku drugim (Select Access Method) określ metodę odstępu,

zaznaczając opcję From the Internet. Naciśnij przycisk Next.

• W kroku trzecim (Data Store) naciśnij przycisk Next.

• W kroku czwartym (Define Roles) zaznacz opcję Enable roles for this

Web site. Naciśnij przycisk Next. W polu tekstowym New Role Name

wpisz:

— Administrator i wciśnij Add Role

— User i wciśnij Add Role

• Naciśnij przycisk Next.

• W kroku piątym (Add New Users) dodaj nowego użytkownika, podaj

następujące dane:

— User Name: admin

— Password: Pa$$word

— Confirm Password: Pa$$word

— E-mail: {adres e-mail}

— Security Question: Ulubiony kolor

— Security Answer: zielony

• Naciśnij przycisk Create User. Dodaj kolejnego użytkownika:

— User Name: karol

— Password: Pa$$word

Piotr Bubacz


—

—

—

—

• Naciśnij przycisk

• W kroku szóstym (

do katalogów dla poszczególnych użytkowników lub grup

przycisk

• Krok siódmy informuje o zakończeniu procesu konfigu

zabezpieczeń.

• Na

oraz ilość ról (

5. Przypisz konta

użytkowników do

ról

• W zakładce

• P

użytkownika zaznaczając pola wyboru

• P

użytkownika zaznaczając odpowiednie pole wyboru

6. Skonfiguruj

konto pocztowe

• Wybierz zakładkę

e¬mail settings

w

korzystasz

—

—

—

—

—

—


Po dodaniu i skonfigurowaniu użytkowników czas na dodanie do aplikacji możliwości logowania. Na

stronie Zaloguj.aspx użytkownik ma mieć możliwość podania danych do uwierzytelnienia lub

przekierowania na stronę Odzyskiwanie.aspx

Użytkownik ma mieć również możliwość utworzenia konta w systemie na stronie

Na stronie ZmianaHasla.aspx

dotychczasowego hasła.


1. Dodaj

wymagane strony

do aplikacji

• Wybierz

• Z listy

• W polu

• Z listy

• Upewnij się, że opcja

• Upewnij się, że opcja

• Kliknij

• Podobnie dodaj stronę

Bezpieczeństwo serwisów internetowych

Strona 10-12

— Confirm Password: Pa$$word

— E-mail: {adres e-mail}

— Security Question: Ulubiony kolor

— Security Answer: zielony

Naciśnij przycisk Create User, a następnie przycisk

W kroku szóstym (Add New Access Rules), pozwalającym

do katalogów dla poszczególnych użytkowników lub grup

przycisk Next.

Krok siódmy informuje o zakończeniu procesu konfigu

zabezpieczeń. Naciśnij przycisk Finish.

Na zakładce Security sprawdź, czy ilość użytkowników (

oraz ilość ról (Roles) – 2.

W zakładce Security kliknij łącze Manage users.

Przy użytkowniku admin kliknij łącze Edit Roles

użytkownika zaznaczając pola wyboru.

Przy użytkowniku karol kliknij łącze Edit Roles i przypisz rol

użytkownika zaznaczając odpowiednie pole wyboru

Wybierz zakładkę Application, a następnie kliknij łącze

e¬mail settings. Skonfiguruj ustawienia serwera poczty wysyłającej

wpisując adres dowolnego serwera pocztowego, z jakiego na co dzień

korzystasz:

— Server Name: adres serwera poczty wysyłającej

— Server Port: port serwera poczty wysyłającej

— From: Informacja, która pojawi się w liście jako

serwery blokują podawanie innych nazw, niż nazwa konta)

— Authentication: zaznacz Basic

— Sender's user name: nazwa użytkownika poczty

— Sender's password: hasło użytkownika

Pamiętaj, że wszystkie dane konta, w tym hasło,

w postaci niezakodowanej w pliku Web.config.



użytkownik ma mieć możliwość podania danych do uwierzytelnienia lub

Odzyskiwanie.aspx, na której będzie mógł odzys

Użytkownik ma mieć również możliwość utworzenia konta w systemie na stronie

ZmianaHasla.aspx użytkownik zalogowany ma mieć możliwość zmiany swojego

Tok postępowania


Z listy Visual Studio installed templates wybierz Web

W polu Name wpisz Zarejestruj.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 jest zaznaczona.

Kliknij OK.

Podobnie dodaj stronę Zaloguj.aspx

Moduł 10


przycisk Next.

pozwalającym określić prawa

do katalogów dla poszczególnych użytkowników lub grup, naciśnij

Krok siódmy informuje o zakończeniu procesu konfiguracji

, czy ilość użytkowników (Users) wynosi 2

Edit Roles i przypisz obie role do

i przypisz rolę User do

użytkownika zaznaczając odpowiednie pole wyboru.

kliknij łącze Configure SMTP

. Skonfiguruj ustawienia serwera poczty wysyłającej,

pisując adres dowolnego serwera pocztowego, z jakiego na co dzień

: adres serwera poczty wysyłającej

: Informacja, która pojawi się w liście jako Od: (niektóre

serwery blokują podawanie innych nazw, niż nazwa konta)

użytkownika poczty

, w tym hasło, zostaną umieszczone

.


użytkownik ma mieć możliwość podania danych do uwierzytelnienia lub

na której będzie mógł odzyskać zapomniane hasło.

Użytkownik ma mieć również możliwość utworzenia konta w systemie na stronie Zarejestruj.aspx.

użytkownik zalogowany ma mieć możliwość zmiany swojego

Web Form.

jest zaznaczona.

jest zaznaczona.



Strona 10-13

2. Dodaj

kontrolkę

LoginView

• Na stronie wzorcowej SzablonStrony.master w obszarze div o

ID="ObszarLogowania" umieść kontrolkę LoginView.

• Kliknij Smart Tag i wybierz AnonymousTemplate. W kontrolce wpisz

Zarejestruj, zaznacz wpisany tekst i naciśnij Ctrl+L lub wybierz

Format->Convert to Hyperlink. Kliknij przycisk Browse i wybierz plik

Zarejestruj.aspx. Naciśnij OK. Ponownie naciśnij OK.

• Kliknij Smart Tag i wybierz LoggedInTemplate. W kontrolce wpisz

"Witaj ", a następnie dodaj kontrolkę LoginName.

3. Dodaj

kontrolkę

LoginStatus

• Na stronie wzorcowej SzablonStrony.master w obszarze div o

ID="ObszarLogowania" za kontrolką LoginView wpisz symbol |, a

następnie umieść kontrolkę LoginStatus. W oknie Properties:

— w polu CssClass wpisz LinkObszaruLogowania

— w polu LoginText wpisz Zaloguj

— w polu LogoutAction wpisz Redirect

— w polu LogoutPageUrl wpisz ~/Default.aspx

— w polu LogoutText wpisz Wyloguj

• Do pliku Style.css dodaj definicję klasy LinkObszaruLogowania:

.LinkObszaruLogowania

{ color: #000033; }

4. Określ stronę

logowania

• W pliku Web.config zamień znacznik <authentication mode="Forms" />

na:

<authentication mode="Forms">

<forms loginUrl="~/Zaloguj.aspx" />

</authentication>

5. Dodaj

kontrolkę

logowania

• Na stronie Zaloguj.aspx w widoku Design napisz Zaloguj się w serwisie,

a następnie umieść kontrolkę Login. W oknie Properties:

— w polu FailureText wpisz Logowanie nie powiodło się. Upewnij się,

że poprawnie wpisałeś nazwę użytkownika i hasło.

— w polu LoginButtonText wpisz Zaloguj

— w polu PasswordLabelText wpisz Hasło:

— w polu PasswordRequiredErrorMessage wpisz Wprowadź hasło.

— w polu RememberMeText wpisz Zapamiętaj mnie

— w polu UserNameLabelText wpisz Login:

— w polu UserNameRequiredErrorMessage wpisz Wprowadź nazwę.

• Do strony w widoku Source dodaj:

<a href="Odzyskiwanie.aspx">Zapomniałem hasła</a>

• Zapisz zmiany na stronie.

6. Dodaj

kontrolkę

tworzenia

użytkownika

• Na stronie Zarejestruj.aspx w widoku Design umieść kontrolkę

CreateUserWizard. W oknie Properties zmień właściwości tak, aby w

kontrolce były wyświetlane komunikaty w języku polskim.


7. Dodaj

kontrolkę

odzyskiwania

hasła

• Do aplikacji dodaj stronę Odzyskiwanie.aspx opartą o szablon strony

SzablonStrony.master. W widoku Design umieść kontrolkę

PasswordRecovery. W oknie Properties zmień właściwości tak, aby w

kontrolce były wyświetlane komunikaty w języku polskim.




Strona 10-14

8. Dodaj

kontrolkę zmiany

hasła

• Do projektu dodaj katalog Zarzadzanie.

• Do katalogu dodaj stronę ZmianaHasla.aspx opartą na szablonie strony

SzablonStrony.master.

• Na stronie napisz Zmień hasło i dodaj kontrolkę ChangePassword. W

oknie Properties zmień właściwości tak, aby w kontrolce były

wyświetlane komunikaty w języku polskim.

9. Sprawdź

działanie aplikacji

• Sprawdź poprawność działania aplikacji.

• Zaloguj się korzystając z użytkownika karol.

• Dodaj nowego użytkownika i sprawdź możliwość zalogowania na

podane dane.


Ostatnim elementem związanym z zabezpieczeniami jest ukrycie opcji menu oraz zabezpieczenie

katalogu przed dostępem niepowołanych użytkowników. Menu Zarządzanie powinno być widoczne

tylko dla użytkowników znajdujących się w roli User i Administrator. Pozostali użytkownicy nie

powinni mieć dostępu do katalogu.


1. Uzupełnij

brakujące strony

w pliku Web.

sitemap

• Otwórz plik Web.sitemap. Po sekcji wyświetlającej menu dla produktów

dodaj:

<siteMapNode title="Zarządzanie" description="Zarządzaj">

<siteMapNode url="Zarzadzanie/ZmianaHasla.aspx"

title="Zmiana hasła" description="Zmień hasło" />

</siteMapNode>

2. Dodaj atrybut

roles do pliku

Web.sitemap

• Dodaj do znacznika siteMapNode atrybut roles="*", gdy menu ma być

prezentowane dla wszystkich użytkowników strony (nawet

anonimowych).

• Dodaj do znacznika siteMapNode atrybut roles="X", gdzie X jest nazwą

roli (możliwe podanie wielu ról oddzielonych przecinkiem np.

Administrator, User), gdy menu ma być prezentowane dla konkretnych

użytkowników przypisanych do roli X.

• Ustal odpowiednie prawa do menu. Dla węzła siteMapNode o

właściwości:

— title="Produkty" ustal roles="*"

— title="Zarządzanie" ustal roles="User,Administrator"

— title="Ankiety" ustal roles="*"

— title="Informacje" ustal roles="*"

3. Określ

dostawcę

informacji o

ścieżce

nawigacyjnej

• Do pliku Web.config do znacznika <system.web> dodaj następujący

fragment:

<siteMap defaultProvider="XmlSiteMapProvider" enabled="true" >

<providers>

<add name="XmlSiteMapProvider"

description="Domyślny dostawca mapy serwisu."

type="System.Web.XmlSiteMapProvider"

siteMapFile="Web.sitemap"

securityTrimmingEnabled="true" />

</providers>

</siteMap>

Piotr Bubacz


4. Sprawdź


• Sprawdź pop

• Sprawdź, które opcje menu są prezentowane.

• Zaloguj się korzystając z użytkownika

• Sprawdź, które opcje menu są teraz prezentowane

• Jeśli jesteś zalogowany

wywołać stronę

5. Zabezpiecz

katalog

Zarzadzanie przed

niepowołanym

dostępem

• Otwórz plik

• Do sekcji

<location path="Zarzadzanie">

</location>

6. Sprawdź


• Sprawdź poprawność działania aplikacji.

• Jeśli jesteś zalogowany

wywołać stronę


Strona 10-15

Sprawdź poprawność działania aplikacji.

Sprawdź, które opcje menu są prezentowane.

Zaloguj się korzystając z użytkownika admin.

Sprawdź, które opcje menu są teraz prezentowane

Jeśli jesteś zalogowany, wyloguj się z aplikacji. Sprawdź, czy możesz

wywołać stronę Zarzadzanie/ZmianaHasla.aspx.

Dlaczego strona została wyświetlona?

Otwórz plik Web.config.

Do sekcji configuration dodaj:

<location path="Zarzadzanie">

<system.web>

<authorization>

<allow roles="User,Administrator" />

<deny users="*"/>

</authorization>

</system.web>

</location>


Jeśli jesteś zalogowany, wyloguj się z aplikacji. Sprawdź, czy możesz

wywołać stronę Zarzadzanie/ZmianaHasla.aspx.

Co się teraz stało? Dlaczego?

Moduł 10


Sprawdź, które opcje menu są teraz prezentowane

wyloguj się z aplikacji. Sprawdź, czy możesz

wyloguj się z aplikacji. Sprawdź, czy możesz


Piotr Bubacz

Moduł 11

Wersja 1

Zarządzanie stanem w aplikacjach

ASP.NET

Spis treści

Zarządzanie stanem w aplikacjach ASP.NET ........................................................................................ 1








Problem 1 (czas realizacji 5 min) .................................................................................................. 6




ITA-103 Aplikacje Internetowe Zarządzanie stanem w aplikacjach ASP.NET

Strona 11-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące możliwości zarządzania

stanem w aplikacjach ASP.NET. Nauczysz się przechowywać zmienne i

obiekty w stanie sesji i aplikacji. Zobaczysz, w jaki sposób można dodawać,

zarządzać i usuwać obiekty z tych stanów.

Cel modułu

Celem modułu jest przedstawienie możliwości wykorzystania stanu aplikacji

i sesji do przechowywania zmiennych i obiektów.



• rozumiał potrzebę przechowywania wybranych informacji w stanie

aplikacji i sesji

• potrafił dodawać zmienne i obiekty do stanu sesji i aplikacji

• wiedział jak utworzyć obiekty i zmienne przy starcie aplikacji i sesji

Wymagania wstępne








w modułach „Podstawy HTML” i „Wprowadzenie do ASP.NET”.




Strona 11-3



Tworząc aplikacje internetową większość informacji przechowujemy w bazie danych. Czasami

wykorzystujemy pliki XML. Jednak są sytuacje, kiedy potrzebujemy szybkiego narzędzia do

przechowywania i zarządzania danymi. Jeśli implementujemy koszyk zakupów czy licznik na stronie,

to zapisywanie ich do bazy czy pliku XML jest zbyt długie. Do tego celu musimy wykorzystać inny

mechanizm.


W aplikacjach ASP.NET często zachodzi potrzeba przechowywania stanu, np. pomiędzy żądaniami

pojedynczego użytkownika. Niestety protokół HTTP, z pomocą którego realizowana jest

komunikacja klienta z serwerem, jest bezstanowy. Oznacza to, że HTTP nie pozwala określić, czy

dwa żądania zostały wykonane przez tego samego, czy przez dwóch różnych użytkowników. Każde

nowe żądanie jest traktowane tak, jakby pochodziło od zupełnie nowego użytkownika.

W poprzednich modułach pokazana została możliwość przekazywania informacji pomiędzy

stronami w postaci parametrów wywołania, metoda ta ma jednak wiele wad. Podstawową z nich

jest małe bezpieczeństwo tak przekazywanych informacji, a także ograniczenie ilości danych, jakie

mogą zostać przesłane.

Stan obiektu tworzą: jego konfiguracja, atrybuty, warunki lub informacje o zawartości. W

aplikacjach internetowych stan jest ulotny i ograniczony do wygenerowania dokumentu po stronie

serwera i przesłania go do użytkownika. W ASP.NET istnieje wiele mechanizmów przechowywania i

zarządzania stanem, które można podzielić ze względu na kilka kryteriów: zasięg, czas życia i

dopuszczalny rozmiar przechowywanych danych oraz po jakiej stronie są przechowywane. Wśród

mechanizmów pozwalających zarządzać stanem indywidualnie dla każdego użytkownika wymienić

można: parametry wywołania i pliki cookies po stronie klienta oraz stan strony (ViewState), stan

sesji i stan aplikacji po stronie serwera. Przykładem informacji, która powinna być przechowywana

w stanie sesji, jest zawartość koszyka zakupów użytkownika, w stanie aplikacji możemy z kolei

przechowywać np. informacje o liczbie odwiedzin naszej strony.

Stan aplikacji

Współdzielenie informacji w całej aplikacji jest możliwe przy użyciu klasy

HttpApplicationState. Klasa ta pozwala przechowywać zmienne w słowniku – kolekcji par

klucz-wartość. Zmienne te są widoczne w obszarze całej aplikacji ASP.NET.

Używając stanu aplikacji do przechowywania obiektów musisz wziąć pod uwagę kilka istotnych

kwestii:

• Zasoby – ponieważ stan aplikacji jest przechowywany w pamięci, mamy do niego szybki

dostęp, w odróżnieniu od danych na dysku czy w bazie danych. Niestety przechowywanie

dużych bloków danych w stanie aplikacji może wypełnić pamięć serwera i spowodować

zapisywanie pamięci na dysku.

• Ulotność – ponieważ stan aplikacji jest przechowywany w pamięci, jest usuwany z niej w

momencie zatrzymania lub restartu aplikacji lub w momencie awarii serwera.

• Skalowalność – stan aplikacji nie jest dzielony na serwery w farmie serwerów, więc jeśli

Twoja aplikacja ma działać w środowisku wielu serwerów, to nie powinieneś wykorzystywać

stanu aplikacji.

• Współbieżność – do stanu aplikacji może jednocześnie odwoływać się wiele wątków, dlatego

ważne jest zapewnienie mechanizmów bezpiecznej aktualizacji przechowywanych obiektów.

Tworzenie zmiennych stanu aplikacji jest możliwe poprzez obiekt Application. Przykład

utworzenia zmiennych aplikacji o nazwach info i AppStartTime:



Strona 11-4

Application["info"] = "Witaj świecie";

Application["AppStartTime"] = DateTime.Now;

Pobranie wartości tak utworzonej zmiennej stanu sesji można zrealizować za pomocą następującej

konstrukcji:

string info = (string) Application["info"];

DateTime AppStartTime = (DateTime) Application["AppStartTime"];

Stan sesji

Tworzenie zmiennych stanu sesji jest możliwe poprzez obiekt Session. Przykład utworzenia nowej

zmiennej stanu sesji o nazwie info, przechowującej łańcuch znaków o treści „Witaj świecie!”:

Session["info"] = "Witaj świecie!";

Pobranie wartości tak utworzonej zmiennej stanu sesji można zrealizować za pomocą następującej

konstrukcji:

string info = (string) Session["info"];

Przechowywanie i pobieranie złożonych danych, tj. obiektów, wymaga rzutowania do

odpowiedniego typu. Przykład zapisania obiektu typu Koszyk w zmiennej stanu sesji:

koszyk = new Koszyk();

Session["koszyk"] = koszyk;

Przykład odczytu zmiennej stanu sesji typu Koszyk:

koszyk = (Koszyk) Session["koszyk"];

Global Application Class

Plik Global.asax umożliwia deklarowanie i zarządzanie zdarzeniami na poziomie aplikacji i sesji. Jest

on umieszczony w głównym katalogu aplikacji. Podczas wykonywania plik jest parsowany i

kompilowany w dynamiczną klasę dziedziczoną z klasy bazowej HttpApplication.

Podsumowanie

W tym rozdziale przedstawione zostały podstawy pracy ze stanem sesji i aplikacji.

Uwagi dla studenta


• potrafisz dodawać, odczytywać, zmieniać i usuwać obiekty ze stanu sesji i aplikacji

• wiesz do czego służy i co zawiera plik Global.asax





1. Design and Implementation Guidelines for Web Clients, http://msdn2.microsoft.com/en-


Zespół patterns & practices przygotował wskazówki dotyczące planowania,

implementacji i zarządzania stanem w aplikacjach ASP.NET. Na stronie znajdziesz

dobre praktyki zarządzania stanem.

2. ASP.NET Application State, http://msdn.microsoft.com/en-us/library/bf9xhdz4.aspx

Na stronie przedstawiono szczegółowe informacje dotyczące zarządzania stanem w

aplikacjach ASP.NET.



Strona 11-5

3. Randy Connolly, ASP.NET 2.0. Projektowanie aplikacji internetowych, Helion, 2008

W książce autor szczegółowo porusza kwestie związane ze stanem sesji. Znajdziesz

tu m.in. informacje dotyczące dostawców stanu sesji.

4. Stephen Walther, ASP.NET 2.0. Księga eksperta, Helion, 2007

W książce autor przedstawił informacje związane z wykorzytsaniem stanu sesji i

aplikacji. Znajdziesz tu m.in. informacje dotyczące używania stanu sesji bez

wykorzystywania mechanizmu cookies.



Strona 11-6



Już jesteś na ukończeniu strony. Twój klient jednak ciągle dodaje coś nowego do funkcjonalności.

Teraz postanowił sprawdzać ilość osób odwiedzających jego stronę. Musisz zaimplementować

licznik, który będzie pokazywał ilość osób aktualnie przeglądający stronę oraz ilość wszystkich osób,

które odwiedziły stronę.


1. Dodaj do

aplikacji plik

Global Application

Class

• Otwórz projekt przygotowany na poprzednich zajęciach.

• Następnie wybierz Website -> Add New Item.

• W oknie Templates wybierz Global Application Class, w polu Name

wpisz Global.asax, a w liście rozwijanej Language wybierz C#.

2. Dodaj obsługę

licznika w pliku

Global Application

Class

• W pliku Global.asax w metodzie Application_Start utwórz dwie

zmienne aplikacji: userCount oraz activeUserCount. Zainicjuj je

wartością 0:

Application["userCount"] = 0;

Application["activeUserCount"] = 0;

• W metodzie Session_Start zwiększ o jeden wartości obu utworzonych

zmiennych:

int userCount = (int) Application["userCount"];

userCount++;

Application["userCount"] = userCount;

int activeUserCount = (int) Application["activeUserCount"];

activeUserCount++; Application["activeUserCount"] = activeUserCount;

• W metodzie Session_End zmniejsz o jeden ilość aktywnych

użytkowników:

int activeUserCount = (int) Application["activeUserCount"];

activeUserCount--;

Application["activeUserCount"] = activeUserCount;

3. Utwórz nową

kontrolkę

użytkownika

zawierqającą

licznik

• Utwórz nową kontrolkę użytkownika i nazwij ją Licznik.ascx.

• W widoku Source dodaj następujący fragment:

Naszą stronę odwiedziło:

<asp:Label ID="licznikLabel" runat="server" /><br />

Aktualnie przebywa na stronie:

<asp:Label ID="licznikActiveLabel" runat="server" />

• Do metodzie Page_Load kontrolki dodaj kod programu odpowiedzialny

za pobranie i wyświetlenie w odpowiednich kontrolkach Label wartości

zmiennych aplikacji:

if (!IsPostBack)

{

licznikLabel.Text = Application["userCount"].ToString(); licznikActiveLabel.Text =

Application["activeUserCount"].ToString();

}

• Umieść kontrolkę na stronie wzorcowej. Sprawdź poprawność

wskazywania ilości użytkowników. Aby zwiększyć ilość użytkowników

należy otworzyć dowolną stronę aplikacji w innej przeglądarce.



Strona 11-7


Nadszedł czas na największe wyzwanie. Twoim zdaniem jest obsługa koszyka zakupów dla klientów

strony. Musisz najpierw przygotować stronę, która będzie wyświetlała zawartość koszyka. Twój

klient musi mieć możliwość zmiany ilość poszczególnych produktów, jak i usuwania. Wraz z

zespołem zastanawiałeś się, jak zrealizować dodawanie produktów do koszyka i doszliście do

wniosku, że najlepiej i najprościej będzie dodawać je przez parametr ProdID wywołania strony.

Nie zapomnij o uzupełnieniu stron wyświetlających produkty o możliwość dodawania ich do

koszyka. Wyświetl w menu możliwość przeglądania koszyka, jak i usuwania całej jego zawartości.


1. Dodaj plik i

kontrolkę

wyświetlającą

zawartość koszyka

• Do projektu dodaj plik Zakupy.aspx oparty na szablonie


• Umieść na stronie kontrolkę GridView. W oknie Properties:

— w polu ID wpisz KoszykGridView

— w polu EmptyDataText wpisz Twój koszyk jest pusty

— w polu EnableViewState z listy rozwijanej wybierz False

• Kliknij Smart Tag kontrolki KoszykGridView i wybierz Edit Colmuns.

• W obszarze Aviailable Fields wybierz BoundField i kliknij Add. W

obszarze BoundField Properities:

— w polu HeaderText wpisz Nazwa produktu

— w polu DataField wpisz Nazwa

— w polu ReadOnly z listy rozwijanej wybierz True



— w polu HeaderText wpisz Cena

— w polu DataField wpisz Cena

— w polu DataFormatString wpisz {0:c}

— w polu HtmlEncode z listy rozwijanej wybierz False




— w polu HeaderText wpisz Ilość sztuk

— w polu DataFormatString wpisz {0:d}

— w polu DataField wpisz IloscSztuk



— w polu DataField wpisz Suma

— w polu DataFormatString wpisz {0:c}

— w polu HeaderText wpisz Wartość

— w polu HtmlEncode z listy rozwijanej wybierz False


2. Dodaj do

kontrolki

GridView przyciski

do edycji i

usuwania

• W obszarze Aviailable Fields wybierz CommandField i kliknij Add. W

obszarze CommandField Properities:

— w polu ButtonType z listy rozwijanej wybierz Button

— w polu ShowDeleteButton z listy rozwijanej wybierz True

— w polu ShowEditButton z listy rozwijanej wybierz True



Strona 11-8

rekordów — w polu CancelText wpisz Anuluj

— w polu DeleteText wpisz Usuń towar

— w polu EditText wpisz Zmień ilość

— w polu UpdateText wpisz Aktualizuj

• Dodaj kontrolkę Button i w oknie Properties:

— w polu ID wpisz kasaButton

— w polu PostBackUrl wpisz ~/Zamowienie.aspx

— w polu Text wpisz Do kasy

• Zapisz zmiany.

3. Rozszerz

aplikacje

możliwość

dodawania

produktów do

koszyka

• Otwórz stronę Produkty.aspx. W widoku Design kliknij Smart Tag

kontrolki ProduktyGridView i wybierz Edit Columns. Z list Available

fields wybierz HyperLinkField i wciśnij Add. W oknie HyperLinkField

properities:

— w polu DataNavigateUrlFields wpisz ProductID

— w polu DataNavigateUrlFormatString wpisz ~/Zakupy.aspx?id={0}

— w polu HeaderText wpisz Dodaj do koszyka

• Otwórz stronę Szczegoly.aspx. W widoku Source przed znacznikiem

</asp:View> kontrolki View o ID="prawidlowyView" dodaj:

<asp:HyperLink ID="KoszykHyperLink" runat="server"

Text="Dodaj do koszyka" /> <br />

• Otwórz plik Szczegoly.aspx.cs i wewnątrz bloku if (produkt!=null) dodaj:

KoszykHyperLink.NavigateUrl = "~/Zakupy.aspx?ProdID=" +

produkt.ProductID;

• Otwórz plik Web.sitemap. Do głównego elementu za elementem

wyświetlającym menu produktów dodaj:

<siteMapNode title="Koszyk" description="Zarządzaj koszykiem" roles="*">

<siteMapNode url="Zakupy.aspx" title="Przeglądaj"

description="Przejrzyj zawartość koszyka" />

<siteMapNode url="OproznijKoszyk.aspx"

title="Opróżnij koszyk" description="Opróżnij zawartość koszyka" />

</siteMapNode>



Strona 11-9


Wspólnie z zespołem jesteś zadowolony z wyglądu aplikacji. Teraz należy przygotować logikę

obsługującą koszyk. Wspólnie przygotowaliście dwie klasy (Rys. 2), które będą odpowiedzialne za

obsługę koszyka. Dodatkowo musisz napisać logikę odpowiedzialną za zarządzanie koszykiem na

stronie Zakupy.aspx. Musisz odpowiednio umożliwić dodawanie, edycja i usuwanie produktów z

koszyka

Rys. 2 Diagram klas elementów koszyka


1. Dodaj klasę

ElementKoszyka

• Kliknij prawym przyciskiem myszy folder App_code i wybierz Add New

Item. Następnie z okna Template wybierz Class, w polu Name wpisz

ElementKoszyka.cs, a w liście rozwijanej Language wybierz Visual C#.

• W pliku utwórz cztery właściwości Nazwa, ProdID, Cena i IloscSztuk:

public string Nazwa

{ get; set; }

public int ProdID

{ get; set; } public decimal Cena

{ get; set; }

public int IloscSztuk

{ get; set; }

• Do konstruktora domyślnego klasy ElementyKoszyka dodaj następujący

kod:

ProdID = 0;

Nazwa = "";

Cena = 0;

IloscSztuk = 0;

• Dodaj konstruktor parametryzowany klasy przyjmujący parametry:

prodID, nazwa, cena i iloscSztuk.

public ElementKoszyka(int prodID, string nazwa, decimal cena, int

iloscSztuk)

{ ProdID = prodID;

Nazwa = nazwa; Cena = cena;

IloscSztuk = iloscSztuk; }

• Utwórz właściwość Suma:

public decimal Suma

{ get { return Cena * IloscSztuk; } }

• Zapisz zmiany w pliku.



Strona 11-10

2. Dodaj klasę

Koszyk

• Kliknij prawym przyciskiem myszy folder App_code i wybierz Add New

Item. Następnie z okna Template wybierz Class, w polu Name wpisz

Koszyk.cs, a w liście rozwijanej Language wybierz Visual C#.

• W sekcji using dodaj:

using System.Collections.Generic;

• Do klasy Koszyk dodaj pole prywatne _koszyk zawierające listę

obiektów klasy ElementKoszyka:

private List<ElementKoszyka> _koszyk;

• Do konstruktora klasy Koszyk dodaj następujący kod:

_koszyk = new List<ElementKoszyka>();

• Do metody dodaj właściwość Ilosc zwracającą ilość elementów w

koszyku:

public int Ilosc

{ get { return _koszyk.Count; } }

• Do klasy dodaj metodę Pobierz zwracającą listę elementów koszyka:

public List<ElementKoszyka> Pobierz()

{ return _koszyk; }

• Do klasy dodaj metodę AktualizujIlosc przyjmującą dwa parametry typu

int: indeks i iloscSztuk:

public void AktualizujIlosc(int indeks, int iloscSztuk) { ElementKoszyka element = _koszyk[indeks];

element.IloscSztuk = iloscSztuk; }

• Do klasy dodaj metodę UsunElement przyjmującą jeden parametr –

indeks usuwanego element:

public void UsunElement(int indeks)

{ _koszyk.RemoveAt(indeks); }

• Do klasy dodaj metodę Dodaj przyjmującą parametr prodID –

identyfikator produktu, który należy dodać do koszyka. W metodzie

dodaj odpowiedni produkt:

public void Dodaj(int prodID)

{

bool znaleziono = false; foreach (ElementKoszyka element in _koszyk)

{

if (element.ProdID == prodID)

{ element.IloscSztuk += 1;

znaleziono = true; }

} if (!znaleziono)

{


var produkt = (from p in db.Products

where p.ProductID == prodID select p).FirstOrDefault();

if (produkt != null)

{

ElementKoszyka element = new ElementKoszyka(prodID,

produkt.Name, produkt.ListPrice, 1);

_koszyk.Add(element); }

}

}



Strona 11-11

3. Dodaj obsługę

koszyka w pliku

Zakupy.aspx.cs

• Otwórz plik Zakupy.aspx.cs. Do klasy Zakupy dodaj obiekt koszyka typu

Koszyk:

Koszyk koszyk;

• W metodzie Page_Load utwórz nowy lub pobierz (jeśli istnieje) obiekt

koszyka przechowywany w stanie sesji:

koszyk = (Koszyk)Session["koszyk"];

if (koszyk == null)

{

koszyk = new Koszyk(); Session["koszyk"] = koszyk;

}

• Następnie w tej samej metodzie dodaj do koszyka produkt, którego

ProdID został przekazany przez parametr wywołania strony. Wyświetl

koszyk w kontrolce GridView1:

if (!IsPostBack) {

string req = Request.QueryString["prodID"];

if (req != null)

{

int prodID = int.Parse(Request.QueryString["prodID"]);

koszyk.Dodaj(prodID); //usuwanie z adresu prodID

string url = Request.Url.AbsolutePath;

System.Web.HttpContext.Current.RewritePath(url, "", "");

}

} KoszykGridView.DataSource = koszyk.Pobierz();

KoszykGridView.DataBind();

kasaButton.Enabled = (koszyk.Ilosc > 0);

• W widoku Design wybierz kontrolkę KoszykGridView. W oknie

Properties kliknij Events, a następnie dwukrotnie kliknij RowDeleting.

W metodzie obsługi zdarzenia dodaj:

koszyk.UsunElement(e.RowIndex);



Properties kliknij Events, a następnie dwukrotnie kliknij RowEditing. W

metodzie obsługi zdarzenia dodaj:

KoszykGridView.EditIndex = e.NewEditIndex; KoszykGridView.DataBind();


Properties kliknij Events, a następnie dwukrotnie kliknij RowUpdating.

W metodzie obsługi zdarzenia dodaj:

TextBox tb = (TextBox)

KoszykGridView.Rows[e.RowIndex].Controls[2].Controls[0];

try { int wartosc = int.Parse(tb.Text);

if (wartosc<0) { wartosc =wartosc*(-1); }

koszyk.AktualizujIlosc(e.RowIndex, wartosc);}

catch { e.Cancel = true; }

KoszykGridView.EditIndex = -1; KoszykGridView.DataBind();


Properties kliknij Events, a następnie dwukrotnie kliknij

RowCancelingEdit. W metodzie obsługi zdarzenia dodaj:



Strona 11-12

e.Cancel = true;

KoszykGridView.EditIndex = -1;


• Zapisz zamiany. Sprawdź możliwość dodawania, edycji i usuwania

produktów z koszyka.

4. Dodaj stronę

do usuwania

koszyka

• Dodaj plik OproznijKoszyk.aspx oparty na szablonie


• Do pliku OproznijKoszyk.aspx.cs dodaj:

Session["koszyk"] = null;

Response.Redirect("~/Default.aspx");

5. Przetestuj

dodawanie

produktów do

koszyka

• Dodaj produkty do koszyka. Zmień ilość produktów wpisując wartość

ujemną oraz wpisując tekst zamiast liczby.


Piotr Bubacz

Moduł 12

Wersja 1


Spis treści

Technologia WebParts ......................................................................................................................... 1












ITA-103 Aplikacje Internetowe Technologia WebParts

Strona 12-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące technologii umożliwiającej

personalizację wyglądu strony przez jej użytkowników – WebParts.

Nauczysz się, jak tworzyć i zarządzać kontrolkami WebPart, jak również, jak

zachować układ kontrolek umieszczonych na szablonie strony na wszystkich

stronach serwisu.

Cel modułu

Celem modułu jest przedstawienie możliwości wykorzystania technologii

umożliwiającej personalizację wyglądu strony przez jej użytkowników.



• wiedział jak wykorzystać technologię WebPart tworzenia treści

personalizowanych przez użytkowników strony

• potrafił tworzyć kontrolki WebPart na podstawie kontrolek

użytkownika

• potrafił zachować wygląd kontrolek WebPart na wszystkich stronach

serwisu

Wymagania wstępne


• znać podstawy HTML i CSS

• znać zasady pracy w Visual Studio 2008









Strona 12-3



Coraz częściej jednym z wymagań stawianych przed portalem internetowym jest jego

interaktywność. Użytkownik powinien mieć możliwość nie tylko dodawania treści czy interakcji z

elementami portalu, lecz również układania elementów na stronach zgodnie z potrzebami.

Użytkownicy chcą sami określać, które komponenty i w jakich miejscach mają być umieszczone. Za

tym trendem podążają najwięksi. Na naszym rynku jeden z portali internetowych wprowadził

możliwość zmiany układu elementów na stronie oraz ilości wyświetlanych informacji. W sieci

Internet możemy znaleźć wiele przykładów stron, które umożliwiają nam indywidualną

konfiguracje elementów na stronie.

Napisanie takiej funkcjonalności nie jest proste. Chcielibyśmy mieć gotowe rozwiązanie, które

szybko i skutecznie możemy dodać do naszej strony.


Kontrolki WebPart służą do budowania portali internetowych, w których użytkownik decyduje, co i

gdzie będzie wyświetlane. Użytkownik za pomocą przeglądarki może dodać, usunąć oraz zamienić

zawartość wybranych przez programistę kontrolek.

Możliwości technologii WebParts

Główne możliwości, jakie zapewniają nam kontrolki WebPart, to:

• Personalizacja zawartości strony – użytkownik może dodać, usunąć, ukryć lub

zminimalizować kontrolkę WebPart.

• Personalizacja wyglądu strony – użytkownik może przeciągać kontrolki pomiędzy strefami

na stronie, zmieniać ich wygląd, własności i zachowanie.

• Eksport i import kontrolek – użytkownik może eksportować i importować kontrolki WebPart

wraz z ustawieniami, wyglądem a nawet danymi.

• Tworzenie połączeń pomiędzy kontrolkami – użytkownik może zmieniać wartości w jednej

kontrolce, które mają wpływ na inną kontrolkę (np. zmiana wartości powoduje zmianę

zawartości innej kontrolki).

Kontrolki WebPart

Najważniejsze kontrolki WebPart to:

• WebPartManager – zarządza kontrolkami WebPart, musi zostać umieszczony przed innymi

kontrolkami WebPart, może być tylko jeden na stronie.

• CatalogZone – zawiera katalog kontrolek WebPart, które użytkownik może wybrać z listy

dostępnych elementów i umieścić w strefach Web Part.

• EditorZone – umożliwia edycję i personalizację kontrolek WebPart przez użytkownika.

• WebPartZone – umożliwia umieszczanie kontrolek użytkownika, na stronie może znajdować

się wiele takich kontrolek. Możliwe jest również umieszczanie w niej istniejących kontrolek

serwerowych oraz kontrolek użytkownika, które stają się kontrolkami WebPart.

• WebPart – jest to klasa bazowa dla kontrolek WebPart, kontrolka dziedzicząca po tej klasie

może zostać dodana do WebPartZone.

Kontrolka WebPartManager

Kontrolka WebPartManager umożliwia zarządzanie i kontrolę zachowaniem kontrolek WebPart.

Na stronie internetowej może być umieszczona tylko jedna taka kontrolka, ponadto musi zostać

umieszczona przed innymi kontrolkami WebPart.



Strona 12-4

WebPartManager umożliwia zmianę trybu wyświetlania strony zawierającej kontrolki WebPart.

Możliwe tryby to:

• Browse – w tym trybie możliwe jest tylko przeglądanie kontrolek.

• Design – w tym trybie możliwe jest przeciąganie kontrolek pomiędzy strefami WebPartZone

przy pomocy myszy. Zmiany są zapamiętywane na serwerze.

• Edit – w tym trybie użytkownik może robić to, co w trybie Design, dodatkowo, po

umieszczeniu kontrolki EditorZone możliwa jest zmiana atrybutów kontrolki.

• Catalog – w tym trybie użytkownik może przy pomocy kontrolki CatalogZone dodawać i

usuwać kontrolki WebPart ze stref WebPartZone

Tryb pracy może zostać zmieniony programowo przy pomocy zmiany własności DisplayMode:

WebPartManager1.DisplayMode = WebPartManager.DesignDisplayMode

Kontrolka WebPartZone

Kontrolka WebPartZone jest kontenerem dla innych kontrolek WebPart i można w niej umieścić

dowolną ilość tych kontrolek. Kontrolki WebPart mogą zostać dodane do WebPartZone statycznie

lub dynamicznie. Użytkownik może, wykorzystując kontrolkę CatalogPart, wybrać z listy

rozwijanej obiekt WebPart i dodać go do odpowiedniej strefy WebPartZone.

Kontrolka CatalogZone

W trybie Catalog obiektu WebPartManager jest widoczna kontrolka CatalogZone. Przy jej

pomocy użytkownik może dodać kontrolkę WebPart do wybranej strefy WebPartZone. Kontrolka

ta może zawierać kontrolki PageCatalogPart, DeclarativeCatalogPart oraz

ImportCatalogPart.

Kontrolka PageCatalogPart (Rys. 2) wyświetla wszystkie dostępne kontrolki WebPart, które

jeszcze nie są umieszczone na stronie. Po dodaniu kontrolki do strefy kontrolka jest usuwana z listy

dostępnych kontrolek.

Rys. 2 Kontrolka PageCatalogPart

Kontrolka ImportCatalogPart (Rys. 3) umożliwia zaimportowanie kontrolek WebPart na

serwer.



Strona 12-5

Rys. 3 Kontrolka ImportCatalogPart

Kontrolka DeclarativeCatalogZone umożliwia programowe określenie listy dostępnych

kontrolek.

Kontrolka EditorZone

W trybie Edit po wybraniu opcji Edit na kontrolce WebPart (Rys. 4) jest wyświetlana kontrolka

EditorZone. Umożliwia ona edycję właściwości kontrolek znajdujących się w strefach

WebPartZone.

Rys. 4 Kontrolka i opcje dostępne w trybie Edit

Kontrolka EditorZone może zawierać kontrolki AppearanceEditorPart (Rys. 5),

BehaviorEditorPart, LayoutEditorPart oraz PropertyGridEditorPart.

Rys. 5 Kontrolka AppearanceEditorPart w kontrolce EditorZone



Strona 12-6

AppearanceEditorPart (Rys. 5) umożliwia zmianę wyglądu kontrolki WebPartZone poprzez

konfigurowalne ustawienie kilku atrybutów strefy. Kontrolka umożliwia zmianę tytułu, sposobu

wyświetlania kontrolki WebPart (tytuł i ramka), kierunku tekstu (z prawej do lewej lub odwrotnie),

rozmiarów oraz widoczności kontrolki na stronie.

Kontrolki WebPart

W celu dodania kontrolek WebPart należy umieścić na stronie kontrolkę WebPartManager.

Kontrolki WebPart należy umieszczać w kontrolce WebPartZone. Zarządzanie kontrolkami

umożliwiają kontrolki EditorZone oraz CatalogZone.

Problemy z zachowaniem wyglądu kontrolek WebPart

Informacje o rozłożeniu kontrolek WebPart są przechowywane dla każdej strony osobno. Z tego

względu należy przesłonić metod LoadPersonalizationBlobs,

ResetPersonalizationBlob, and SavePersonalizationBlob klasy

SqlPersonalizationProvider.

Rozwiązaniem tego problemu jest wykorzystanie klasy zmieniającej standardowe zachowanie

kontrolek WebPart.

public class MasterPageOnlySqlPersonalizationProvider :

SqlPersonalizationProvider

{

protected override void LoadPersonalizationBlobs(

WebPartManager webPartManager,

string path,

string userName,

ref byte[] sharedDataBlob,

ref byte[] userDataBlob)

{

base.LoadPersonalizationBlobs(

webPartManager,

"master",userName,

ref sharedDataBlob,

ref userDataBlob);

}

protected override void ResetPersonalizationBlob(


string path,

string userName)

{

base.ResetPersonalizationBlob(

webPartManager,

"master",

userName);

}

protected override void SavePersonalizationBlob(


string path,

string userName,

byte[] dataBlob)

{

base.SavePersonalizationBlob(

webPartManager,

"master",

userName,

dataBlob);

}

}



Strona 12-7

Zmiany w pliku Web.config. Dodanie do sekcji <system.web> informacji o nowym dostawcy:

<webParts>

<personalization

defaultProvider="MasterPageOnlySqlPersonalizationProvider">

<providers>

<add name="MasterPageOnlySqlPersonalizationProvider"

type="MasterPageOnlySqlPersonalizationProvider, __code"

connectionStringName="LocalSqlServer" />

</providers>

</personalization>

</webParts>

Rozwiązanie zaczerpnięto ze strony http://jason.diamond.name/weblog/2005/11/09/web-parts-

and-master-pages.

Podsumowanie

W tym rozdziale przedstawione zostały podstawy pracy z kontrolkami WebPart oraz rozwiązanie

problemu umieszczenia kontrolek na szablonie strony i utrzymanie ich wyglądu w całej aplikacji.

Uwagi dla studenta


• rozumiesz zasadę działania kontrolek WebPart

• umiesz zarządzać trybem pracy kontrolki WebPartManager

• wiesz jak skonfigurować kontrolki WebPart, aby były wyświetlane na wszystkich stronach

serwisu jednakowo





1. Instrukcja: Tworzenie strony Web Parts w programie Visual Web Developer,

http://www.microsoft.com/poland/developer/net/podrecznik/additional-2.mspx

Krok po kroku instrukcja prowadzi Cię przez tworzenie strony z użyciem kontrolek

WebPart.

2. Stephen Walther, ASP.NET 2.0 księga eksperta, Helion, 2008

W książce autor poświęcił wiele miejsca kontrolkom WebPart. Opisał metody

tworzenia aplikacji za pomocą tych kontrolek, zaprezentował wszystkie kontrolki

WebPart. Pokazał ścieżkę od podstawowej kontrolki WebPart aż po rozbudowane

możliwości tej platformy.

3. Darren Neimke, ASP.NET 2.0 Web Parts in Action: Building Dynamic Web Portals, Manning

Publications, 2006

Ta ponad 400-stronicowa książka jest poświęcona w całości technologii WebPart.

Autor przekazuje całą swoją wiedzę, począwszy od postaw, a skończywszy na

współpracy WebPart z AJAX.

4. ASP.NET QuickStart Tutorials, http://quickstarts.asp.net/QuickStartv20/aspnet

Na stronie w sekcji „WebParts Controls” znajdziesz podstawowe informacje i

przykłady użycia kontrolek WebPart.



Strona 12-8



Przygotowujesz aplikację internetową dla firmy Adventure Works, która planuje ekspansje na rynku

internetowym w Polsce. Aktualnie aplikacja praktycznie już działa, teraz nadszedł czas rozszerzania

jej funkcjonalności. Wybór Twojego zespołu padł na technologię WebPart. Jest to ciekawa

technologia, z którą już mieliście wcześniej styczność w intranetowej witrynie SharePoint, ale

dopiero teraz testujecie ją w ASP.NET.


1. Tworzenie

podstawowej

struktury dla

kontrolek

WebPart

• Otwórz aplikację internetową przygotowaną w poprzednim module.

• Otwórz plik SzablonStrony.master i przełącz widok na Design.

• Na górze strony dodaj kontrolkę WebPartManager. Zmień jej ID na

MenadzerWebPartow.

• Do pierwszego obszaru bocznego (ID="PierwszyObszarBoczny") dodaj

kontrolkę WebPartZone i określ jej ID jako PierwszyObszarWebPartow.

• Do drugiego obszaru bocznego (ID="DrugiObszarBoczny") dodaj

kontrolkę WebPartZone i określ jej ID jako DrugiObszarWebPartow.

• Przenieś istniejące kontrolki użytkownika do odpowiednich obszarów

WebPart.

2. Utwórz stronę

do zarządzania

kontrolkami

WebPart

• Do projektu w katalogu Zarzadzanie dodaj plik WP.aspx oparty na

stronie wzorcowej SzablonStrony.master.

• Dodaj plik WP.aspx do pliku Web.sitemap. W węźle siteMapNode o

właściwości title="Zarządzanie" dodaj:

<siteMapNode url="Zarzadzanie/WP.aspx"

title="Zarządzanie układem strony"

description="Zarządzaj kontrolkami WebPart" />

• W pliku WP.aspx w widoku Design napisz Zarządzanie kontrolkami

WebPart, następnie dodaj znak końca linii i napisz Wybierz tryb:.

• Dodaj kontrolkę DropDownList, a następnie w oknie Properties:

— w polu ID wpisz trybDropDownList

— w polu AutoPostBack z listy rozwijanej wybierz True

• Z menu Smart Tag kontrolki trybDropDownList wybierz Edit Items, a

następnie dodaj elementy o następujących właściwościach, po czym

zamknij okno:

— tekst wyświetlany: Przeglądaj, wartość: 0

— tekst wyświetlany: Projektuj, wartość: 1

— tekst wyświetlany: Edytuj, wartość: 2

— tekst wyświetlany: Katalog, wartość: 3

• Dodaj kontrolkę EditorZone, następnie dodaj do niej kontrolkę

AppearanceEditorPart.

• Dodaj kontrolkę CatalogZone, a następnie dodaj do niej kontrolkę

PageCatalogPart

• Dodaj procedurę obsługi zdarzenia SelectedIndexChanged kontrolki

trybDropDownList. W procedurze dodaj następujący kod:

WebPartManager wpm = new WebPartManager();

wpm = (WebPartManager)

Page.Master.FindControl("MenadzerWebPartow"); switch (trybDropDownList.SelectedValue)

Piotr Bubacz


{

}

• W

using System.Web.UI.WebControls.WebParts;

• Zapisz stronę

3. Sprawdź

poprawność

działania aplikacji

• Uruchom aplikację, zaloguj się i w

WebPartManager


Kontrolki użytkownika umieszczone w kontrolce

aby łatwo można je było identyfikować. W tym celu postanowiłeś przekształcić je na kontrolki

WebPart.


1. Zmiana

wyświetlania

tytułu kontrolki

Kategorie

• Otwórz plik

wraz z zawartością

• Otwórz plik

następujący kod:

GenericWebPart gwp = Parent as GenericWebPart;

if (gwp != null)

2. Zmiana

wyświetlania

tytułu kontrolki

Licznik

• Otwórz plik

następujący kod:


if (gwp != null)

3. Zmiana

wyświetlania

tytułu kontrolki

NoweProdukty

• Otwórz plik

<strong>Nasze nowe

• Otwórz plik

umieść następujący kod:

GenericWebPart gwp = Parent as GenericWebPart;if (gwp != null)

4. Zmiana

wyświetlania

tytułu kontrolki

WybraneProdukty

• Otwórz plik


• Otwórz plik

Page_Load

Strona 12-9

case "1":

wpm.DisplayMode = WebPartManager.DesignDisplayMode; break;

case "2":

wpm.DisplayMode = WebPartManager.EditDisplayMode;

break;

case "3":

wpm.DisplayMode = WebPartManager.CatalogDisplayMode; break;

default:

wpm.DisplayMode = WebPartManager.BrowseDisplayMode;

break;

W pliku WP.aspx.cs w sekcji using na samej górze


Zapisz stronę.

Uruchom aplikację, zaloguj się i wybierz różne tryby pracy kontrolki

WebPartManager. Sprawdź zachowanie kontrolek

Jakie nazwy noszą kontrolki?


Kontrolki użytkownika umieszczone w kontrolce WebPartZone wymagają wyświetlenia tytułu tak,


Tok postępowania

Otwórz plik Kontrolki/Kategorie.aspx. Usuń sekcję

wraz z zawartością wpisz tekst Wybierz kategorię produktu

Otwórz plik Kontrolki/Kategorie.aspx.cs. w metodzie

następujący kod:


if (gwp != null)

{ gwp.Title = "Wybierz kategorię produktu";

Otwórz plik Kontrolki/Licznik.aspx.cs. w metodzie

następujący kod:


if (gwp != null) { gwp.Title = "Licznik odwiedzin"; }

Otwórz plik Kontrolki/NoweProdukty.aspx. Usuń

<strong>Nasze nowe produkty:</strong><br />

Otwórz plik Kontrolki/NoweProdukty.aspx.cs. w metodzie

umieść następujący kod:

GenericWebPart gwp = Parent as GenericWebPart;if (gwp != null)

{ gwp.Title = "Nasze nowe produkty:"; }

Otwórz plik Kontrolki/WybraneProdukty.aspx. Usuń następujący kod:


Otwórz plik Kontrolki/WybraneProdukty.aspx.cs

Page_Load umieść następujący kod:

Moduł 12


wpm.DisplayMode = WebPartManager.DesignDisplayMode;

wpm.DisplayMode = WebPartManager.EditDisplayMode;

wpm.DisplayMode = WebPartManager.CatalogDisplayMode;

wpm.DisplayMode = WebPartManager.BrowseDisplayMode;

na samej górze dodaj:

ybierz różne tryby pracy kontrolki

prawdź zachowanie kontrolek.

wymagają wyświetlenia tytułu tak,


sekcję HeaderTemplate

Wybierz kategorię produktu.

. w metodzie Page_Load umieść


}

. w metodzie Page_Load umieść


. Usuń następujący kod:

. w metodzie Page_Load


Usuń następujący kod:

.aspx.cs. W metodzie

Piotr Bubacz


GenericWeb

if (gwp != null)

5. Sprawdź

poprawność


• Sprawdź poprawność działania aplikacji

• Wybierz różne tryby i sprawdź zachowanie kontrolek


Niestety okazało się, że kontrolki zachowują swój układ tylko na stronie WP.aspx. Musicie wraz z

zespołem znaleźć rozwiązanie tego problemu.


1. Dodaj klasę

MasterPageOnlyS

qlPersonalizationP

rovider

• Kliknij folder

Item

• W obszarze

MasterPageOnlySqlPersonalizationProvider.cs

wybierz

• W sekcji using dodaj:


• Określ klasę bazową

class MasterPageOnlySqlPersonalizationProvider

public class


• Usuń konstruktor klasy i


{

}


{

} protected override void SavePersonalizationBlob(

{

Strona 12-10


if (gwp != null)

{ gwp.Title = " Wybrane produkty:"; }


Wybierz różne tryby i sprawdź zachowanie kontrolek

Czy układ kontrolek po zmianie na stronie WP.aspx

na wszystkich stronach aplikacji?



zespołem znaleźć rozwiązanie tego problemu.

Tok postępowania

Kliknij folder App_Code prawym przyciskiem myszy i wybierz

Item.

W obszarze Templates wybierz Class, w polu

MasterPageOnlySqlPersonalizationProvider.cs, a

wybierz Visual C#.

W sekcji using dodaj:


Określ klasę bazową SqlPersonalizationProvider

class MasterPageOnlySqlPersonalizationProvider

public class MasterPageOnlySqlPersonalizationProvider :


Usuń konstruktor klasy i dodaj następujący kod:

protected override void LoadPersonalizationBlobs( WebPartManager webPartManager,

string path,

string userName,

ref byte[] sharedDataBlob,

ref byte[] userDataBlob) {

base.LoadPersonalizationBlobs(

webPartManager,

"master",userName,

ref sharedDataBlob,

ref userDataBlob);



string path,

string userName)

base.ResetPersonalizationBlob(

webPartManager,

"master",

userName);



string path,

string userName,

byte[] dataBlob)

base.SavePersonalizationBlob(

webPartManager,

Moduł 12


Part gwp = Parent as GenericWebPart;

Wybierz różne tryby i sprawdź zachowanie kontrolek.

WP.aspx jest utrzymywany


prawym przyciskiem myszy i wybierz Add New

, w polu Name wpisz

, a z listy rozwijanej

SqlPersonalizationProvider. Zmień public

class MasterPageOnlySqlPersonalizationProvider na:

MasterPageOnlySqlPersonalizationProvider :




Piotr Bubacz


}

• Zapisz zmiany w pliku

2. Dodaj nowego

dostawcę w pliku

Web.config

• Otwórz plik

<webParts>

</webParts>

• Zapisz zmiany w pliku

3. Sprawdź

poprawność


• Sprawdź poprawność działania aplikacji

• Wybierz różne tryby i sprawdź zachowanie kontrolek

Strona 12-11

"master",

userName,

dataBlob);

Zapisz zmiany w pliku.

Otwórz plik Web.config i do sekcji <system.web>

<webParts>

<personalization

defaultProvider="MasterPageOnlySqlPersonalizationProvider"> <providers>




</providers>

</personalization> </webParts>



Wybierz różne tryby i sprawdź zachowanie kontrolek

Czy układ kontrolek po zmianie na stronie WP.aspx

na wszystkich stronach aplikacji?

Moduł 12


dodaj:

defaultProvider="MasterPageOnlySqlPersonalizationProvider">




Wybierz różne tryby i sprawdź zachowanie kontrolek.

WP.aspx jest utrzymywany


Piotr Bubacz

Moduł 13

Wersja 1

ASP.NET AJAX

Spis treści

ASP.NET AJAX ....................................................................................................................................... 1












ITA-103 Aplikacje Internetowe ASP.NET AJAX

Strona 13-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące tworzenia aplikacji

internetowych z wykorzystaniem AJAX. Zobaczysz, jak prosto i skutecznie

można wykorzystywać podstawowe kontrolki dostępne w ASP.NET AJAX.

Nauczysz się, jak kilkoma kliknięciami myszy rozszerzyć funkcjonalność

aplikacji o możliwość asynchronicznej komunikacji z serwerem.

Cel modułu

Celem modułu jest przedstawienie AJAX oraz możliwości wykorzystania go

w aplikacjach ASP.NET przy użyciu biblioteki ASP.NET AJAX.



• potrafił tworzyć strony częściowo aktualizowane

• potrafił rozbudowywać istniejącą aplikację o AJAX

• rozumiał zalety stosowania technologii AJAX

Wymagania wstępne













Strona 13-3



Rozbudowane aplikacje internetowe wymagają długiego czasu na przesłanie informacji od klienta

do serwera. W czasie przesyłania klient może jedynie cierpliwie oczekiwać na dane z serwera.

Niestety większość osób chciała by dane od razu lub też mieć chociaż możliwość przeglądania

strony w czasie pobierania danych. Dodatkowo dobrze by było, gdybyśmy mogli pobierać dane nie

całej strony na raz, ale tylko wybranych elementów.


Klasyczny model aplikacji internetowej

W poprzednich modułach wykorzystywano klasyczny model aplikacji internetowej. W modelu

takim niewielkie zmiany wykonane przez użytkownika na stronie mogą spowodować wysłanie

danych do serwera i wygenerowanie dla klienta nowego dokumentu HTML, nawet jeśli nie różni się

on znacząco od poprzedniego (Rys. 2).

Rys. 2 Klasyczny model aplikacji internetowej

Przykładem takiej akcji w aplikacji tworzonej na zajęciach może być wybranie kategorii z listy

rozwijanej. W takim przypadku zmienia się tylko niewielka część strony odpowiedzialna za

wyświetlenie tytułów, ale serwer i tam musi wygenerować nowy dokument i wysłać go do

użytkownika.

Problemy występujące w klasycznym model aplikacji internetowej:

• Komunikacja zwrotna – po wykonaniu każdej akcji wymagającej przetwarzania po stronie

serwera, cała strona jest przeładowywana, nawet jeśli nowy dokument nie różni się znacząco

od poprzedniego.

• Transfer danych poprzez sieć – dokument wygenerowany po stronie serwera w wyniku

komunikacji zwrotnej musi być za każdym razem w całości wysłany do klienta.

• Przetwarzanie na serwerze – generowanie całego dokumentu od nowa w przypadku

komunikacji zwrotnej powoduje niepotrzebne obciążenie zasobów serwera.

Co to jest AJAX?

AJAX jest to technika pozwalająca aplikacjom Web komunikować się asynchronicznie z serwerem

(Rys. 3). AJAX nie jest technologią – jest podejściem łączącym wiele technologii. AJAX to akronim

powstały od słów Asynchronous JavaScript And XML.



Strona 13-4

Rys. 3 Model aplikacji internetowej z użyciem AJAX

AJAX:

• Asynchronous – komunikacja odbywa się asynchronicznie.

• JavaScript – JavaScript jest odpowiedzialny za wysyłanie informacji do serwera,

asynchroniczny odbiór odpowiedzi i przetworzenie jej.

• XML – jest formatem odpowiedzi serwera, dodatkowo komunikacja odbywa się poprzez

obiekt XmlHttpRequest. Aktualnie XML wykorzystuje się rzadziej na rzecz mniej kosztownych

w przesyłaniu i przetwarzaniu formatów takich jak JSON (ang. JavaScript Object Notation).

Zalety i wady AJAX

AJAX posiada wiele zalet, w tym m.in.:

• Strony nie są odświeżane po wykonaniu każdej akcji wymagającej przetwarzania po stronie

serwera.

• Tylko potrzebne dane są wymieniane z serwerem.

• Zwiększona szybkość odpowiedzi serwera.

Należy jednocześnie zdawać sobie sprawę z pewnych wad tego rozwiązania, m.in.:

• Wymaga JavaScript, który może być wyłączony w przeglądarce użytkownika.

• Aplikacjom AJAX trudno zapewnić zgodność z WCAG (ang. Web Content Availability

Guidelines, wytyczne dotyczące dostępności materiałów publikowanych w sieci Internet).

• Jest trudny w oprogramowaniu:

• należy odpowiedniego zainicjalizować obiekt XmlHttpRequest

• duże problemy może sprawiać obsługi przycisków nawigacyjnych w przeglądarce

• mogą pojawić się problemy z zapamiętywaniem i odtwarzaniem konkretnego stanu

aplikacji

ASP.NET AJAX

ASP.NET AJAX jest zbiorem rozszerzeń, które umożliwiają wykorzystanie AJAX w aplikacjach

ASP.NET. Zalety ASP.NET AJAX to:

• Odciążenie serwera na rzecz przetwarzania po stronie klienta.

• Możliwość wykorzystania elementów interfejsu użytkownika znanych z aplikacji Windows,

np. wskaźniki postępu.

• Aktualizacja tylko tych części strony, które tego wymagają.



Strona 13-5

• Dostęp po stronie klienta do usług aplikacji ASP.NET: autoryzacji formularzy i profili

użytkownika.

• Integracja danych z różnych źródeł za pomocą odwołań do usług Web (niniejszy kurs nie

obejmuje zagadnień związanych z usługami Web – więcej informacji na ten temat można

znaleźć m.in. pod adresem http://msdn.microsoft.com/webservices).

• Wsparcie dla większości popularnych i używanych przeglądarek, m.in. Microsoft Internet

Explorer, Mozilla Firefox i Apple Safari.

Architektura ASP.NET AJAX

Technologia ASP.NET AJAX zawiera biblioteki skryptów klienckich oraz komponenty serwerowe

(Rys. 4). Dodatkowo można rozszerzyć jej możliwości o darmowy zestaw kontrolek ASP.NET AJAX

Control Toolkit.

ASP.NET AJAX-enabled

ASP.NET Pages

Web Services(ASMX or WCF)

HTML, Script,ASP.NET AJAX

Markup

ASP.NET AJAXServiceProxies

ASP.NET 2.0

Application Services

Page Framework,Server Controls

ASP.NET AJAX Server Extensions

ASP.NET AJAXServer

Controls

App Services Bridge

Web Services Bridge

Microsoft AJAX Library(Client Script Library)

Controls, Components

Script Core

Base Class Library

Component Model and UI Framework

Browser Compatibility

ASP.NET AJAX Client App Services

Local Store

BrowserIntegration

Rys. 4 Architektura ASP.NET AJAX

Bibliotek skryptów po stronie klienta

Biblioteka skryptów po stronie klienta zawiera rozszerzenia JavaScript, które pozwalają na

programowanie zorientowane obiektowo. Taka możliwość nie była wcześniej bezpośrednio

dostępna dla programistów JavaScript. Możliwości programowania zorientowanego obiektowo

dodane do biblioteki skryptów ASP.NET AJAX pozwalają na tworzenie bardziej spójnego i

modularnego kodu po stronie klienta.

Następujące warstwy zostały włączone do biblioteki:

• Biblioteka klas podstawowych – udostępnia podstawowe komponenty i rozszerzoną obsługę

błędów.

• Możliwości przeglądarki – zapewnia kompatybilność skryptów klienckich z większością

używanych przeglądarek.

• Sieci – odpowiada za komunikację z aplikacjami i usługami Web i zarządza asynchronicznymi

wywoływaniami metod.

• Usługi jądra – zawiera rozszerzenia JavaScript, takie jak klasy, przestrzenie nazw, obsługa

błędów, dziedziczenie, typy danych i serializacja obiektów.



Strona 13-6

Technologie po stronie serwera

Kontrolki serwerowe ASP.NET AJAX to:

• ScriptManager

• UpdatePanel

• UpdateProgress

• Timer

Usługi Web, z jakich możemy korzystać z poziomu ASP.NET AJAX:

• uwierzytelnianie formularzy

• profile

Kontrolki serwerowe ASP.NET AJAX

Kontrolki serwerowe ASP.NET AJAX łączą w sobie kod wykonywany zarówno po stronie serwera, jak

i klienta.

ScriptManager

Kontrolka ScriptManager zarządza zasobami skryptowymi dla komponentów klienta, częściową

aktualizacją strony, lokalizacją, globalizacją i skryptami własnymi użytkownika. Kontrolka ta musi

zostać umieszczona przed innymi kontrolkami ASP.NET AJAX na stronie. Koordynuje ona i rejestruje

skrypty odpowiedzialne za częściowe odświeżanie strony, odpowiada za konfigurowanie, czy też

zwolnienie bądź debugowanie skryptów wysyłanych do przeglądarki oraz interakcję skryptów z

metodami usług sieciowych.

UpdatePanel

Kontrolka UpdatePanel umożliwia aktualizację wybranej części strony przy użyciu

asynchronicznych żądań. Jest kluczowym elementem AJAX w ASP.NET. Umożliwia wykorzystanie

mechanizmu częściowego odświeżania strony, dzięki czemu możliwe jest ograniczenie czasu

potrzebnego na ponowne ładowanie strony.

Kontrolka UpdatePanel jest kontenerem elementów podlegających pod system dynamicznego

odświeżania strony. Najważniejsze właściwości kontrolki to:

• ContentTemplate – jest kontenerem dla kontrolek, które mają być dynamicznie

aktualizowane. Dodawanie kontrolek jest możliwe tylko do tej części.

• Triggers – zawiera listę wyzwalaczy – zdarzeń, które mogą wywołać aktualizację kontrolek

znajdujących się w ContentTemplate. Dzielą się na dwie grupy:

• AsyncPostBackTrigger – możemy zdefiniować zewnętrzną względem UpdatePanel

kontrolkę i jej zdarzenie, które spowodują jej aktualizację

• PostBackTrigger – możemy zdefiniować wewnętrzną względem UpdatePanel

kontrolkę i jej zdarzenie, które spowoduje aktualizację nie tylko panelu, ale i całej strony

Kontener kontrolek wskazujący aktualizowany region na stronie:

Kontrolki i zawartość nie aktualizowane ...

<asp:UpdatePanel id="u1" runat="server">

<ContentTemplate>

ta zawartość jest dynamicznie aktualizowana!

<asp:label id="Lablel1" runat="server"/>

<asp:button id="button1" text="Wciśnij mnie!" runat="server"/>

<ContentTemplate>

</asp:UpdatePanel>

Pozostała zawartość nie jest aktualizowana...



Strona 13-7

Kontrolka UpdatePanel automatycznie generuje wszystkie wymagane skrypty i wysyła je do

przeglądarki. Na stronie możemy umieścić wiele kontrolek UpdatePanel i każda z nich będzie

niezależnie aktualizowana.

UpdateProgress

Kontrolka UpdateProgress udostępnia informacje o statusie aktualizacja kontrolki

UpdatePanel. Kontrolka wyświetla zawartość określoną przez właściwość ProgressTemplate.

W momencie aktualizacji kontrolki UpdatePanel pojawia się zawartość zdefiniowana w kontrolce

UpdateProgress.

Możemy sterować czasem, po jakim pojawi się wyświetlana zawartość kontrolki

UpdateProgress za pomocą właściwości DisplayAfter. Właściwość ta określa czas w

milisekundach, po jakim zostanie wyświetlona zawartość kontrolki UpdatePanel.

W przypadku kilku kontrolek UpdatePanel na stronie standardowo kontrolka UpdateProgress

wyświetla się podczas aktualizacji każdej z nich. Jeśli potrzebujemy ograniczyć wyświetlanie do

jednej kontrolki UpdatePanel, możemy to zrobić przy pomocy właściwości

AssociatedUpdatePanelID.

Timer

Kontrolka Timer odpowiada za komunikację zwrotną do serwera w określonych odstępach czasu.

Możliwe jest wysyłanie całej strony lub jej części ujętej w kontrolce UpdatePanel. Właściwość

Interval określa ilość milisekund, po której nastąpi komunikacja zwrotna do serwera.

Podsumowanie

W tym rozdziale przedstawiona została technologia AJAX ASP.NET.

Uwagi dla studenta


• rozumiesz jak działa UpdatePanel

• znasz kontrolki dostępne w AJAX Extensions

• wiesz co to jest i jakie ma zalety częściowa aktualizacja strony





1. The Official Microsoft ASP.NET Site, http://www.asp.net/ajax

Na stronie znajdziesz wiele materiałów dotyczących technologii AJAX. Szczególnie

ciekawe są webcasty prezentujące wiele elementów technologii. Ważnym

miejscem wartym przejrzenia jest zakładka Showcase, prezentująca listę stron

wykorzystujących tę technologię.

2. Maciej Dadela, AJAX w ASP.NET, http://www.codeguru.pl/article-718.aspx

W artykule autor prezentuje przegląd najważniejszych informacji dotyczących

technologii ASP.NET AJAX. Zawarł opis kontrolek i ich właściwości, pozwalając

zapoznać się bliżej z tą technologią.

3. Matt Gibbs, Dan Wahlin, ASP.NET 2.0 AJAX. Zaawansowane programowanie, Helion, 2008

W książce autorzy pokazują, jak korzystać z różnych bibliotek, jak używać

zaawansowanych kontrolek z pakietu AJAX Toolkit, a także jak budować własne



Strona 13-8

kontrolki. Nauczysz się asynchronicznie uaktualniać fragmenty stron i zarządzać

skryptami używanymi w przeglądarce, dowiesz się, jak testować takie aplikacje i

usuwać z nich błędy. Z tą książką zdobędziesz wiedzę potrzebną do kreowania

nowoczesnych, interaktywnych aplikacji.

Piotr Bubacz




Przed wykorzystaniem technologii ASP.NET AJAX Twój zespół postanowił wysłać Cię na

Twoim zadaniem jest zapoznanie się z możliwościami wykorzystania tej technologii w Waszych

projektach internetowych.

w ASP.NET AJAX.


1. Utwórz nową

aplikację

internetową w

systemie plików

• Otwórz Visual Studio wybierz

• W oknie dialogowym

—

—

—

2. Dodaj

kontrolkę

UpdatePanel

• Do strony dodaj kontrolkę

myszą

• W kontrolce

—

—

• Do kontrolki

• Poza kontrolką

oknie

—

—

3. Dodaj

procedurę obsługi

zdarzenia

Page_Load

• Otwórz plik

kod

t1Label.Text = DateTime.Now.ToLongTimeString();


4. Zapisz i

sprawdź działanie

strony

• Zapisz zmiany i uruchom formularz.


5. Zapoznaj się z

zaletami

częściowej

aktualizacji

strony.

• Do aplikacji dodaj kolejną stronę


• W kontrolce

kategoria

• Poza kontrolką

• Zapisz i uruchom formularz. Za pomocą przycisków

miesiące w jednej i drugiej kontrolce.

6. Zapoznanie z

możliwością

odświeżania

zawartości

kontrolki

UpdatePanel przy



• W kontrolce

—

—

Strona 13-9



Przed wykorzystaniem technologii ASP.NET AJAX Twój zespół postanowił wysłać Cię na


Wynikiem Twoich prac mają być testy wszystkich kontrolek dostepnych

Tok postępowania

Otwórz Visual Studio wybierz File -> New -> Web Site

W oknie dialogowym New Web Site określ następujące właściwości

— szablon: ASP.NET Web Site

— lokalizacja: z listy rozwijanej wybierz File System

położenie strony


Do strony dodaj kontrolkę ScriptManager i UpdatePanel

myszą z okna Toolbox (kategoria AJAX Extensions

W kontrolce UpdatePanel umieść kontrolkę Label

— w polu ID wpisz t1Label

— w polu Text usuń zawartość

Do kontrolki UpdatePanel dodaj kontrolkę Button

Poza kontrolką UpdatePanel umieść dodatkową kontrolkę

oknie Properties:



Otwórz plik Default.aspx.cs i do metody Page_Load

kod, wyświetlający aktualną datę w kontrolkach Label



Zapisz zmiany i uruchom formularz.

Wciśnij przycisk Button.

Która kontrolka jest aktualizowana? Dlaczego?

Do aplikacji dodaj kolejną stronę ASPX.

Do strony dodaj kontrolkę ScriptManager oraz UpdatePanel

W kontrolce UpdatePanel umieść kontrolkę Calendar

kategoria Standard.

Poza kontrolką UpdatePanel umieść kolejną kontrolkę

Zapisz i uruchom formularz. Za pomocą przycisków

miesiące w jednej i drugiej kontrolce.

Czy można zaobserwować różnicę?






Moduł 13

ASP.NET AJAX

Przed wykorzystaniem technologii ASP.NET AJAX Twój zespół postanowił wysłać Cię na zwiady.


Wynikiem Twoich prac mają być testy wszystkich kontrolek dostepnych

Web Site.

określ następujące właściwości:

File System, a następnie określ

UpdatePanel, przeciągając je

s).

Label i w oknie Properties:

Button.

umieść dodatkową kontrolkę Label i w

Page_Load dodaj następujący

Label:



UpdatePanel.

Calendar z okna Toolbox

umieść kolejną kontrolkę Calendar.

Zapisz i uruchom formularz. Za pomocą przycisków > kontrolki zmień

UpdatePanel.


Piotr Bubacz


użyciu

zewnętrznego

przycisku

• Poza kontrolką

• Dwukrotnie

Click


• Zapisz zmiany i uruchom formularz. Kliknij przycisk.

• Przejdź do widoku

a następnie w oknie

• W oknie

listy zostanie dodany wyzwalacz i w

AsyncPostB

—

—

• Kliknij przycisk

• Zapisz zmiany i uruchom formularz. Kliknij przycisk.

7. Zapoznanie z

możliwościami

wykorzystania

kontrolki

UpdateProgress.



• W kontrolce

—

—

• Do kontrolki

• Kliknij dwukrotnie

Click

System.Threading.Thread.Sleep(3000);

//powyższa linijka służy jednie celom TESTOWYM!!t1Label.Text = DateTime.Now.ToLongTimeString();

• Poza kontrolką

Strona 13-10

Poza kontrolką UpdatePanel dodaj do formularza kontrolkę

Dwukrotnie kliknij dodaną kontrolkę. W metodzie obsługi zdarzenia

Click przycisku dodaj:


Zapisz zmiany i uruchom formularz. Kliknij przycisk.

Czy dokonała się pełna czy częściowa aktualizacja strony? Dlaczego?

Przejdź do widoku Design formularza. Wybierz kontrolkę

a następnie w oknie Properities w polu Triggers wybierz

W oknie UpdatePanelTrigger Collection Editor naciśnij przycisk

listy zostanie dodany wyzwalacz i w

AsyncPostBack:Button1.Click properities:

— w polu ControlID wpisz Button1

— w polu EventName wybierz z listy rozwijanej Click

Rys. 5 Okno UpdatePanelTrigger Collection Editor

Kliknij przycisk OK.








Do kontrolki UpdatePanel dodaj kontrolkę Button

Kliknij dwukrotnie dodaną kontrolkę. W metodzie obsługi zdarzenia

Click przycisku dodaj:


//powyższa linijka służy jednie celom TESTOWYM!!t1Label.Text = DateTime.Now.ToLongTimeString();

Poza kontrolką UpdatePanel dodaj kontrolkę

Moduł 13

ASP.NET AJAX

dodaj do formularza kontrolkę Button.

metodzie obsługi zdarzenia




formularza. Wybierz kontrolkę UpdatePanel,

wybierz (…).

naciśnij przycisk Add. Do

listy zostanie dodany wyzwalacz i w obszarze

Click

UpdatePanelTrigger Collection Editor



UpdatePanel.


Button.

metodzie obsługi zdarzenia

//powyższa linijka służy jednie celom TESTOWYM!! t1Label.Text = DateTime.Now.ToLongTimeString();

dodaj kontrolkę UpdateProgress. W

Piotr Bubacz


kontrolce

• Zapisz zmiany i uruchom formularz

8. Zapoznanie z

możliwościami

kontrolki Timer.



• W kontrolce

—

—

• Do kontrolki

—

—

• Poza kontrolką

Properties

—

—

• Do

uruchomienia formularza w kontrolce


• Kliknij dwukrotnie kontrol

dodaj:


• Zapisz zmiany i uruchom formu


Po zapoznaniu się z technologią

stworzonej dla firmy Adventure Works


9. Wykorzystaj

częściową

aktualizacje

strony do

wyświetlenia

produktów

• Otwórz aplikację przygotowaną w poprzednim module

• Otwórz stronę

• Przed wszystkimi kontrolkami na górze strony umieść kontrolkę

ScriptManager


niej wszystkie kontrolki

• Zapisz zamiany w aplikacji i uruchom stronę

10. Dodaj

wyświetlania

informacji o

aktualizacji

• W widoku

kontrolkę


a

obsługi zdarzenia

Strona 13-11

kontrolce UpdateProgress dodaj tekst Przetwarzanie…

Zapisz zmiany i uruchom formularz, a następnie kliknij przycisk.

Czy dokonała się pełna czy częściowa aktualizacja strony? Co się działo

w czasie aktualizacji?






Do kontrolki UpdatePanel dodaj kontrolkę Timer.

— w polu ID wpisz t1Timer

— w polu Interval wpisz 5000

Poza kontrolką UpdatePanel umieść kontrolkę

Properties:



Do metody Page_Load dodaj następujący kod wyświetlający

uruchomienia formularza w kontrolce t2Label:


Kliknij dwukrotnie kontrolkę Timer. W metodzie

dodaj:


Zapisz zmiany i uruchom formularz, a następnie p

Co się stało? Dlaczego?


Po zapoznaniu się z technologią Twoim zadaniem jest dodanie funkcjonalności AJAX do aplikacji

stworzonej dla firmy Adventure Works.

Tok postępowania

Otwórz aplikację przygotowaną w poprzednim module


Przed wszystkimi kontrolkami na górze strony umieść kontrolkę

ScriptManager z okna Toolbox (kategoria AJAX Extension

Do strony dodaj kontrolkę UpdatePanel i w widoku

niej wszystkie kontrolki

Zapisz zamiany w aplikacji i uruchom stronę Produkty.aspx

Czy następuje aktualizacja całej strony?

W widoku Design na stronie poniżej kontrolki

kontrolkę UpdateProgress. Umieść w niej napis: Pobieranie danych

Wybierz kontrolkę KategorieListBox i w oknie Properties

a następnie kliknij dwukrotnie pole SelectedIndexChang

obsługi zdarzenia dodaj następujący kod:

Moduł 13

ASP.NET AJAX

Przetwarzanie….

liknij przycisk.

Czy dokonała się pełna czy częściowa aktualizacja strony? Co się działo

UpdatePanel.


.

umieść kontrolkę Label i w oknie

pujący kod wyświetlający czas


metodzie obsługi zdarzenia Tick


poczekaj 5 sekund.

odanie funkcjonalności AJAX do aplikacji

Otwórz aplikację przygotowaną w poprzednim module.

Przed wszystkimi kontrolkami na górze strony umieść kontrolkę

xtensions).

i w widoku Design przenieś do

Produkty.aspx.

a stronie poniżej kontrolki UpdatePanel umieść

Pobieranie danych.

Properties kliknij Events,

SelectedIndexChanged. W metodzie

Piotr Bubacz



• Zapisz wszystkie pliki i u

11. Zmiana

wyświetlania

tekstu na obrazek

• Znajdź animowanego gifa (np. na stronie

• Za

obrazek.

• Zapisz wszystkie pliki i uruchom ponownie aplikacj

12. Dodanie

możliwości

anulowania

aktualizacji

• Do kontrolki

<br /><input type="button"

value="Anuluj aktualizację" />

• Do kontrolki

języku J

<script type="text/javascript" >function abortPB() {

</script>

• Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji

naciśnij przycisk


Twojemu klientowi zawsze marzyła się reklama

przeglądarce. Twoim ostatnim zadaniem

być odświeżana cyklicznie co


13. Przygotuj

aplikację do

korzystania z

kontrolki

ScriptMagerProxy

• Otwórz stronę

• Usuń kontrolkę

ScriptMagerProxy


kontrolki

14. Dodaj

kontrolkę

użytkownika

wyświetlającej

reklamy

• Kliknij prawym przyciskiem myszy katalog

Item

wpisz


UpdatePanel

• W widoku

Określ jej właściwość



15. Umieść

kontrolkę

Reklama.ascx na

szablonie strony


do kontrolki


16. Zapisz i

przetestuj

• Zapisz zmiany i uruchom aplikację.

• Otwórz stronę

Strona 13-12


Zapisz wszystkie pliki i uruchom ponownie aplikacj

Znajdź animowanego gifa (np. na stronie http://www.ajaxload.info

Zamień wyświetlany tekst w kontrolce UpdateProgress

obrazek.

Zapisz wszystkie pliki i uruchom ponownie aplikacj

Do kontrolki UpdateProgress w trybie Source dodaj:

<br /><input type="button" id="abortButton" onclick="abortPB()"

value="Anuluj aktualizację" />

Do kontrolki Content o ID="Content1" dodaj

języku JavaScript:


var obj = Sys.WebForms.PageRequestManager.getInstan

if (obj.get_isInAsyncPostBack())

{ obj.abortPostBack(); }

} </script>

Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji

naciśnij przycisk Anuluj aktualizację.

Czy aktualizacja została anulowana?


Twojemu klientowi zawsze marzyła się reklama, której zawartość jest cyklicznie odświeżana w

Twoim ostatnim zadaniem jest dodanie wyświetlania reklamy na stronie. Reklama ma

być odświeżana cyklicznie co 6 sekund.

Tok postępowania


Usuń kontrolkę ScriptManager i w jej miejsce wstaw kontrolkę

ScriptMagerProxy z okna Toolbox (kategoria AJAX Extension

Otwórz szablon strony SzablonStrony.master i na górze strony obok

kontrolki WebPartManager dodaj kontrolkę ScriptManager

Kliknij prawym przyciskiem myszy katalog Kontrolki

Item. W obszarze Templates wybierz Web User Control

wpisz Reklama.ascx. W liście rozwijanej Language

Dodaj kontrolkę ScriptManagerProxy, a następnie kontrolkę

UpdatePanel.

W widoku Design dodaj do kontrolki UpdatePanel

Określ jej właściwość AdvertisementFile="~/Adv/adv.xml".

Dodaj kontrolkę Timer i określ jej właściwość Interval


Otwórz szablon strony SzablonStrony.master i w wido

do kontrolki div o ID="DrugiObszarBoczny" kontrolkę


Zapisz zmiany i uruchom aplikację.

Otwórz stronę Default.aspx i sprawdź, czy następuje zmiana reklamy.

Moduł 13

ASP.NET AJAX

ruchom ponownie aplikację.

http://www.ajaxload.info).

UpdateProgress na odnaleziony

Zapisz wszystkie pliki i uruchom ponownie aplikację.

dodaj:

id="abortButton" onclick="abortPB()"

dodaj następujący skrypt w


var obj = Sys.WebForms.PageRequestManager.getInstance();

Zapisz wszystkie pliki i uruchom ponownie aplikacje. Podczas aktualizacji

której zawartość jest cyklicznie odświeżana w

dodanie wyświetlania reklamy na stronie. Reklama ma

i w jej miejsce wstaw kontrolkę

AJAX Extension).

i na górze strony obok

ScriptManager.

Kontrolki i wybierz Add New

Web User Control, w polu Name

Language wybierz Visual C#.

, a następnie kontrolkę

UpdatePanel kontrolkę AdRotator.

AdvertisementFile="~/Adv/adv.xml".

Interval="6000".

i w widoku Design dodaj

kontrolkę Reklama.ascx.

i sprawdź, czy następuje zmiana reklamy.


Piotr Bubacz

Moduł 14

Wersja 1

ASP.NET AJAX Control Toolkit

Spis treści

ASP.NET AJAX Control Toolkit .............................................................................................................. 1












ITA-103 Aplikacje Internetowe ASP.NET AJAX Control Toolkit

Strona 14-2

Informacje o module

Opis modułu

W tym module znajdziesz informacje dotyczące biblioteki ASP.NET AJAX

Control Toolkit. Nauczysz się rozszerzać możliwości standardowych

kontrolek ASP.NET o funkcjonalności zawarte w bibliotece.

Cel modułu

Celem modułu jest przedstawienie możliwości wykorzystania biblioteki

ASP.NET AJAX Control Toolkit w projektach stron internetowych do

szybkiego tworzenia zaawansowanych efektów.



• wiedział jakie kontrolki wchodzą w skład ASP.NET AJAX Control

Toolkit

• potrafił rozszerzać możliwości standardowych kontrolek ASP.NET

o funkcjonalności zawarte w bibliotece

Wymagania wstępne



• znać zasady pracy w środowisku Visual Studio 2008, w szczególności


• znać podstawy ASP.NET AJAX




w modułach „Podstawy HTML”, „Kaskadowe Arkusze Stylów – CSS”,

„Wprowadzenie do ASP.NET” oraz „ASP.NET AJAX”.




Strona 14-3



Tworzenie rozbudowanych stron z efektownie wyglądającym interfejsem użytkownika wymaga

dużo pracy. Niestety w codziennej pracy programistów jest mało czasu na implementacje tego, co

dla użytkownika jest najważniejsze – interfejsu. Aby na stronie pojawiały się zwijane, wysuwany,

wyskakujące czy animowane elementy niezbędna jest znajomość języka JavaScript oraz szczegółów

jego implementacji we wszystkich popularnych przeglądarkach. Niestety na to nie ma czasu i

musimy sięgnąć po gotowe komponenty, które najczęściej nie są tanie. Zatem mamy wybór: albo

sami implementujemy rozwiązania, albo kupujemy drogie kontrolki od innych dostawców.


ASP.NET AJAX Control Toolkit udostępnia zbiór komponentów umożliwiających szybkie tworzenie

stron o rozbudowanej funkcjonalności. Zawiera kod źródłowy, szablony, dokumentacje i przykłady.

Po dodaniu do Visual Studio 2008 każda kontrolka posiada Smart Tag z opcją Add Extender,

umożliwiającą rozszerzenie funkcjonalności kontrolki o możliwości oferowane przez ASP.NET AJAX

Control Toolkit. Po dodaniu do kontrolki rozszerzenia dodana funkcjonalność jest wyświetlana w

oknie Properties. W widoku źródła możemy skonfigurować funkcjonalność w kontrolce

rozszerzenia. Możliwe jest dodanie kilku rozszerzeń do jednej kontrolki.

ASP.NET AJAX Control Toolkit zawiera następujące kontrolki i rozszerzenia:

• Accordion – umożliwia przesłanie kilku paneli i wyświetlenie jednego z nich

• AlwaysVisibleControl – jest prostym rozszerzeniem umożliwiającym przypięcie

kontrolki do strony tak, że pojawia się jako ruchome okno ponad treścią strony

• Animation – umożliwia tworzenie animacji dla elementów i kontrolek

• AutoComplete – rozszerza możliwości kontrolki TextBox o mechanizm podpowiedzi

• Calendar – rozszerza możliwości kontrolki TextBox wyświetlając kalendarz i przekazując

wybraną datę do kontrolki

• CascadingDropDown – umożliwia łączenie kontrolek DropDown i wypełnianie ich

zawartości asynchronicznie

• CollapsiblePanel – rozszerza kontrolkę Panel o możliwość zwijania i rozwijania jej

zawartości

• ConfirmButton – rozszerza możliwości kontrolki Button o potwierdzenie po stronie

klienta

• DragPanel – rozszerza kontrolkę Panel o możliwość przesuwania i umieszczania jej w

dowolnym miejscu na stronie

• DropDown – rozszerza możliwości niemal każdej kontrolki, udostępniając funkcjonalność

menu, które może być innym panelem lub kontrolką

• DropShadow – rozszerza dowolne kontrolki wizualne o możliwość rzucania cienia

• DynamicPopulate – wypełnia zawartość elementu strony wynikiem pobranym z zapytania

do usługi Web

• FilteredTextBox – rozszerza możliwości kontrolki TextBox o zezwolenie na

wprowadzania informacji jednego typu

• HoverMenu – rozszerza dowolną kontrolkę o możliwość wyświetlenia podręcznego menu w

momencie, kiedy kursor myszy znajdzie się nad kontrolką

• MaskedEdit – rozszerza kontrolkę TextBox o możliwość wyświetlenia formatu

wprowadzanych danych oraz ich walidację po stronie klienta

• ModalPopup – umożliwia wyświetlenie okna dialogowego na stronie i zablokowanie strony

przed jej edycją



Strona 14-4

• MutuallyExclusiveCheckBox – rozszerza kontrolki CheckBox o możliwość wzajemnego

wykluczania się

• NoBot – stosuje proste metody zapobiegające wysyłaniu strony przez automatycznych

klientów

• NumericUpDown – rozszerza kontrolkę TextBox o możliwość zwiększenia lub zmniejszenia

wartości w kontrolce przy pomocy powiązanych przycisków

• PagingBulletedList – rozszerza możliwości kontrolki BulletedList o sortowanie i

stronicowanie po stronie klienta

• PasswordStrength – rozszerza kontrolkę TextBox o możliwość sprawdzenia i

wyświetlenia siły wprowadzanego hasła

• PopupControl – umożliwia dodanie do dowolniej kontrolki okna wyskakującego (pop-up)

• Rating – umożliwia łatwą ocenę dowolnej zawartości za pomocą gwiazdek

• ReorderList – umożliwia przestawianie elementów listy poprzez przeciąganie ich myszą

• ResizableControl – umożliwia zmianę wielkości dowolnego element w przeglądarce

• RoundedCorners – rozszerza wizualne kontrolki o zaokrąglone rogi

• Slider – pełni funkcję paska przewijania

• TabContainer – umożliwia wyświetlenie części interfejsu użytkownika w zakładkach

• TextBoxWatermark – rozszerza kontrolkę TextBox o możliwość wyświetlania znaku

wodnego, gdy użytkownik nie wprowadził żadnej wartości

• ToggleButton – rozszerza kontrolkę CheckBox o możliwość wyświetlania obrazków w

miejscu elementów zaznaczonych i niezaznaczonych

• UpdatePanelAnimation – animuje elementy na stronie umożliwiając graficzne

reprezentowanie stanu pobierania danych

• ValidatorCallout – rozszerza możliwości standardowych kontrolek do sprawdzania

poprawności danych wprowadzanych przez użytkownika

Podsumowanie

W tym rozdziale przedstawiony został ASP.NET AJAX Control Toolkit.


Wyobraźmy sobie, że mamy rozszerzyć funkcjonalność naszej aplikacji o możliwości oferowane

przez bibliotekę ASP.NET AJAX Control Toolkit.

Dodanie ASP.NET AJAX Control Toolkit do Visual Studio

Zanim będziemy mogli wykorzystać funkcjonalność ASP.NET AJAX Control Toolkit w naszych

aplikacjach, musimy pobrać ze strony http://www.codeplex.com/AjaxControlToolkit archiwum

zawierające kontrolki przeznaczone dla .NET Framework 3.5. Archiwum możemy rozpakować w

dowolnym miejscu, jednak ze względu na lepsze zarządzanie proponujemy zapisać zawartość do

katalogu C:\Program Files\Microsoft ASP.NET. Dzięki temu będziemy mieli jedno miejsce na

poszukiwanie elementów związanych z ASP.NET. Najważniejszą bibliotekę – AjaxControlToolkit.dll,

znajdziemy w katalogu C:\Program Files\Microsoft ASP.NET\SampleWebSite\Bin. Najbezpieczniej

jest ją skopiować od razu do katalogu C:\Program Files\Microsoft ASP.NET\Binaries. W przyszłości

będziemy ingerować w kod kontrolek i sami kompilować tę bibliotekę, więc bezpiecznie mieć kopię

zapasową.

Kolejnym krokiem jest dodanie kontrolki do Visual Studio 2008. W tym celu dodamy nową zakładkę

w oknie Toolbox, klikajać w jego obszarze prawym przyciskiem myszy, a następnie wybierając Add

Tab. Możemy nazwać ją dowolnie, np. AJAX Control Toolkit. Następnie musimy wskazać lokalizację

biblioteki. W tym celu klikamy dodaną przed chwilą zakładkę prawym przyciskiem myszy i

wybieramy Choose Items.



Strona 14-5

Po wskazaniu pliku za pomocą przycisku Browse możemy dodać bibliotekę AjaxControlToolkit.dll.

W tym momencie w zakładce pojawi się lista kontrolek i rozszerzeń zawartych w bibliotece.

Jeśli znajdziesz chwilę czasu warto przetestować wszystkie kontrolki dostępne w bibliotece. W tym

celu w Visual Studio otwieramy projekt C:\Program Files\Microsoft ASP.NET\

AjaxControlToolkit.sln.

Rozszerzanie funkcjonalności kontrolek przy pomocy ASP.NET AJAX Control Toolkit

Teraz nauczymy się rozszerzać funkcjonalność kontrolek przy użyciu ASP.NET AJAX Control Toolkit.

Aby dodać którąś z funkcjonalności oferowanych przez ASP.NET AJAX Control Toolkit do kontrolki,

wybieramy kontrolkę, do której chcemy dodać rozszerzenie, a następnie w menu Smart Tag klikamy

Add Extender.

Rys. 2 Rozszerzanie funkcjonalności kontrolki TextBox przy pomocy ASP.NET AJAX Control Toolkit

W kolejnym oknie Extender Wizard (Rys. 3) musimy wybrać rozszerzenie, które chcemy dodać do

kontrolki. W naszym przypadku dodamy kontrolkę TextBoxWatermarkExtender rozszerzającą

kontrolkę TextBox o możliwość wyświetlania znaku wodnego, gdy użytkownik nie wprowadził

żadnej wartości.

Rys. 3 Okno Extender Wizard

Po dodaniu rozszerzenie w oknie Properties kontrolki znajdziemy nową grupę – Extenders.

Rys. 4 Okno Properties kontrolki TextBox po dodaniu rozszerzenia TextBoxWatermarkExtender



Strona 14-6

Możemy rozwinąć i sprawdzić dodatkowe właściwości kontrolki. Ustalimy, że kontrolka będzie

posiadała znak wodny o treści „Podaj nazwę produktu” (właściwość WatermarkText) oraz

wykorzystamy zdefiniowaną w szablonie strony klasę CSS o nazwie watermarked (właściwość

WatermarkCssClass).

Po uruchomieniu strony w przeglądarce możemy sprawdzić działanie rozszerzenia. W naszym

przypadku na stronie zostanie wyświetlona kontrolka TextBox ze znakiem wodnym „Podaj nazwę

produktu”. Po kliknięciu znak wodny znika (Rys. 5).

a) b) Rys. 5 Kontrolka TextBox po dodaniu TextBoxWatermarkExtender wyświetlona w przeglądarce

a) przed b) po kliknięciu kontrolki

Uwagi dla studenta


• potrafisz dodać ASP.NET AJAX Control Toolkit do projektu

• umiesz dodawać rozszerzenia do kontrolek





1. ASP.NET AJAX Extender Controls, http://msdn.microsoft.com/en-us/library/bb532368.aspx

Na stronie znajdziesz szczegółowe informacje odnośnie możliwości rozszerzania

funkcjonalności kontrolek przy użyciu kontrolek bazujących na ExtenderControl.

2. Adam Calderon, Joel Rumerman, Advanced ASP.NET AJAX Server Controls For .NET

Framework 3.5, Addison-Wesley, 2008

W książce autor przedstawia wszystkie najważniejsze zagadnienia związane z

kontrolkami serwerowymi w ASP.NET AJAX z uwzględnieniem AJAX Control

Toolkit.

3. ASP.NET AJAX Control Toolkit: The Official Microsoft ASP.NET Site,

http://www.asp.net/ajax/ajaxcontroltoolkit

Oficjalna strona AJAX Control Toolkit, znajdziesz tu zawsze najnowsze wersje

kontrolek, dokumentację oraz wideotutoriale ułatwiający szybkie rozpoczęcie

pracy z tą biblioteką.



Strona 14-7



Twój zespół chciałby dodać kilka nowych rozwiązań, które można zobaczyć na innych stronach.

Niestety okazało się, że wymagają one znajomości języka JavaScript. Już prawie zrezygnowaliście i

chcieliście oddać projekt w takim stanie w jakim jest, ale na szczęście jeden z Twoich kolegów

znalazł informacje o bibliotece ASP.NET AJAX Control Toolkit. Na stronie głównej był link do wersji

live, po przejrzeniu możliwości biblioteki stwierdziliście jednogłośnie, że to jest to, czego chcecie.

Jeden z członków zespołu miał wątpliwości, czy dacie radę szybko nauczyć się tej biblioteki i za jej

pomocą uatrakcyjnić waszą aplikację. Na szczęście pobraliście kod biblioteki i okazało się, że Visual

Studio 2008 na tyle ułatwia współpracę z nią, że mogliście od razu zacząć pracę.

Waszym pierwszym zadaniem jest dodanie funkcjonalności bibliotece ASP.NET AJAX Control Toolkit

do Visual Studio.


1. Dodanie

ASP.NET AJAX

Control Toolkit do

Visual Studio

• Pobierz ze strony http://www.codeplex.com/AjaxControlToolkit

archiwum zawierające kontrolki przeznaczone dla .NET Framework 3.5.

• Rozpakuj archiwum na dysku w katalogu C:\Program Files\Microsoft

ASP.NET.

• Z katalogu C:\Program Files\Microsoft ASP.NET\SampleWebSite\Bin

skopiuj pliki AjaxControlToolkit.dll i AjaxControlToolkit.pdb do

katalogu C:\Program Files\Microsoft ASP.NET\Binaries.

• Otwórz stronę przygotowaną w poprzednim ćwiczeniu. Otwórz dowolny

plik z rozszerzeniem aspx.

• W oknie Toolbox kliknij prawy przyciskiem myszy i wybierz Add Tab.

Nazwij ją AJAX Control Toolkit.

• Kliknij prawym przyciskiem myszy nowo dodaną zakładkę i wybierz

Choose Items.

Rys. 6 Okno Choose Toolbox Items

• Kliknij Browse.

• Wskaż plik C:\Program Files\Microsoft

ASP.NET\Binaries\AjaxControlToolkit.dll i kliknij Open. Następnie

kliknij OK.

Piotr Bubacz


• W zakładce

kontrolek i rozszerzeń.

2. Przetestuj

możliwości

rozszerzeń

dostępnych w

ASP.NET AJAX

Control Toolkit

• W Visual Studio otwórz projekt

AjaxControlToolkit.sln

• Naciśnij

• Zapoznaj się z możliwościami kontrolek i rozszerzeń kontrolek

dostępnymi w zbiorze

• Szczególnie zapoznaj się z rozszerzeniami:

AlwaysVisibleControlExtender

FilteredTextBoxExtender


Teraz Twój zespół wyznaczył sobie następujące zadnia: dodać efekt znaku wodnego do wszystkich

kontrolek TextBox w aplikacji,

strony, dodać filtrowanie wprowadzania

kalendarza na wyświetlanie kalendarza po kliknięciu na kontrolkę


3. Rozszerz

możliwości

kontrolki Szukaj

• Otwórz kontrolkę użytkownika


następnie kliknij

• W oknie

OK

• W oknie

NazwaProduktuTextBox_TextBoxWatermarkExt

WatermarkText

WatermarkCssClass

• Do pliku

.watermarked {

}

• Zapisz zmiany i przetestuj działanie aplikacji. Otwórz stronę

i s

4. Rozszerz

możliwości

kontrolki Reklama

• Otwórz kontrolkę użytkownika

• Wybierz

• W oknie Extender

OK

• W oknie

AdRotator1_AlwaysVisibleControlExtender

listy rozwijanej wybierz

• Zapisz zmiany i otwórz dowolną stronę. Zmniejsz okno przeglądarki tak,

aby konieczne było przewijanie treści.

Strona 14-8

W zakładce AJAX Control Toolkit powinna pojawić się lista nowych

kontrolek i rozszerzeń.

W Visual Studio otwórz projekt C:\Program Files

AjaxControlToolkit.sln.

Naciśnij Ctrl+F5 lub wybierz Debug -> Start without debugging.

Zapoznaj się z możliwościami kontrolek i rozszerzeń kontrolek

dostępnymi w zbiorze ASP.NET AJAX Control Toolkit

Szczególnie zapoznaj się z rozszerzeniami:

AlwaysVisibleControlExtender, CalendarExtender

FilteredTextBoxExtender i TextBoxWatermarkExtender



w aplikacji, ustawić pozycję kontrolki AdRotator w prawym górnym rogu

strony, dodać filtrowanie wprowadzania numerów i kodu pocztowego

kalendarza na wyświetlanie kalendarza po kliknięciu na kontrolkę TextBox.

Tok postępowania

Otwórz kontrolkę użytkownika Kontrolki\Szukaj.aspx

Wybierz kontrolkę TextBox o ID="NazwaProduktuTextBox

następnie kliknij Smart Tag. Wybierz Add Extender

W oknie Extender Wizard wybierz TextBoxWatermarkExtender

OK.

W oknie Properties kontrolki TextBox znajdź grupę

NazwaProduktuTextBox_TextBoxWatermarkExtender

WatermarkText wpisz Podaj nazwę produktu

WatermarkCssClass wpisz watermarked.

Do pliku Style.css dodaj styl:

.watermarked {

height:20px;

width:150px;

padding:2px 0 0 2px;

border:1px solid #BEBEBE;

background-color:#F0F8FF;

color:gray;

Zapisz zmiany i przetestuj działanie aplikacji. Otwórz stronę

sprawdź, jak wygląda kontrolka TextBox.

Otwórz kontrolkę użytkownika Kontrolki\Reklama.asp

Wybierz kontrolkę AdRotator i kliknij Smart Tag. Wybierz

W oknie Extender Wizard wybierz AlwaysVisibleControlExtenderi

OK.

W oknie Properties znajdź grupę Extenders

AdRotator1_AlwaysVisibleControlExtender. W polu

listy rozwijanej wybierz Right.

Zapisz zmiany i otwórz dowolną stronę. Zmniejsz okno przeglądarki tak,

aby konieczne było przewijanie treści.

Gdzie znajduje się kontrolka AdRotator

zawartości strony?

Moduł 14


powinna pojawić się lista nowych

Program Files\Microsoft ASP.NET\

Start without debugging.

Zapoznaj się z możliwościami kontrolek i rozszerzeń kontrolek

ol Toolkit.

Szczególnie zapoznaj się z rozszerzeniami:

CalendarExtender i

TextBoxWatermarkExtender.


w prawym górnym rogu

oraz zmienić kontrolki

.

Szukaj.aspx.

NazwaProduktuTextBox", a

Extender.

TextBoxWatermarkExtender i kliknij

znajdź grupę Extenders i rozwiń

ender. W polu

Podaj nazwę produktu, a w polu

Zapisz zmiany i przetestuj działanie aplikacji. Otwórz stronę Szukaj.aspx

Reklama.aspx.

. Wybierz Add Extender.

AlwaysVisibleControlExtenderi kliknij

Extenders i rozwiń

W polu HorizontalSide z

Zapisz zmiany i otwórz dowolną stronę. Zmniejsz okno przeglądarki tak,

podczas przewijania

Piotr Bubacz


5. Dodaj

rozszerzenia do

strony

Ankieta.aspx

• Otwórz stronę


Smart

• W oknie

OK

• W oknie

NazwaProduktuTextBox_

WatermarkText

watermarked

• Podobnie postępuj ze wszystkimi kontrolkami


SmartTag

• W oknie

• W oknie

telTextBox_FilteredTextBoxExtender

rozwijanej wybierz

• Podobnie postępuj ze

mieszTextBox

liczbaKmTextBox


Smart

• W oknie

• W oknie

kodTextBox_FilteredTextBoxExtender

—

—

• Zapisz stronę. Uruchom

Ankiety

Ankiety

• Usuń kontrolki

dodaj kontrolkę

rozszerzenie

wpisz

WatermarkCssClass

• Dodaj do kontrolki rozszerzenie

FirstDayOfWeek="Monday"

• Poniżej napisu

ID="nastepnaTextBox"

TextBoxWatermarkExtender

podać datę następnej wycieczki

watermarked

• Dodaj do kontrolki rozszerzenie

FirstDayOfWeek

• Zapisz

Ankiety

Strona 14-9

Otwórz stronę Ankieta.aspx.

Wybierz kontrolkę TextBox o ID="imieTextBox

Smart Tag. Wybierz Add Extender.

W oknie Extender Wizard wybierz TextBoxWatermarkExtender

OK.


NazwaProduktuTextBox_TextBoxWatermarkExtender

WatermarkText wpisz Podaj imię, a w polu WatermarkCssClass

watermarked.

Podobnie postępuj ze wszystkimi kontrolkami TextBox

Wybierz kontrolkę TextBox o ID="telTextBox"

SmartTag. Wybierz Add Extender.

W oknie Extender Wizard wybierz FilteredTextBoxExtender


telTextBox_FilteredTextBoxExtender. W polu

rozwijanej wybierz Numbers.

Podobnie postępuj ze kontrolkami TextBox

mieszTextBox, wzrostTextBox, odTextBox

liczbaKmTextBox.

Wybierz kontrolkę TextBox o ID="kodTextBox

Smart Tag. Wybierz Add Extender.

W oknie Extender Wizard wybierz FilteredTextBoxExtender


kodTextBox_FilteredTextBoxExtender:

— w polu FilterType do listy rozwijanej wpisz Custom, Numbers

— w polu ValidChars wpisz - (myślnik).

Zapisz stronę. Uruchom ją w przeglądarce i z menu strony wybierz

Ankiety -> Szukam towarzystwa na wycieczki

Ankiety -> Szukam roweru i przetestuj działanie dodanych rozszerzeń.

Usuń kontrolki Calendar ze strony. Poniżej napisu

dodaj kontrolkę TextBox. Określ jej ID="ostatniaTextBox

rozszerzenie TextBoxWatermarkExtender i w polu

wpisz Kliknij, aby podać datę ostatniej wycieczki

WatermarkCssClass wpisz watermarked.

Dodaj do kontrolki rozszerzenie CalendarExtender

FirstDayOfWeek="Monday".

Poniżej napisu Następna wycieczka dodaj kontrolkę

ID="nastepnaTextBox". Dodaj rozszerzenie

TextBoxWatermarkExtender i w polu WatermarkText

podać datę następnej wycieczki, a w polu WatermarkCssClass

watermarked.

Dodaj do kontrolki rozszerzenie CalendarExtender

FirstDayOfWeek="Monday".

Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz

Ankiety -> Szukam towarzystwa na wycieczki.

W jakim języku wyświetlana jest kontrolka kalendarza prezentowana

po kliknięciu kontrolek ostatniaTextBox lub nastepnaTextBox

Moduł 14


imieTextBox", a następnie kliknij

TextBoxWatermarkExtender i kliknij

Extenders i rozwiń

TextBoxWatermarkExtender. W polu

WatermarkCssClass wpisz

TextBox na stronie.

", a następnie kliknij

FilteredTextBoxExtender i kliknij OK.

Extenders i rozwiń

. W polu FilterType z listy

o ID: domTextBox,

odTextBox, doTextBox,

kodTextBox", a następnie kliknij

FilteredTextBoxExtender i kliknij OK.

Extenders i rozwiń

Custom, Numbers

ądarce i z menu strony wybierz

Szukam towarzystwa na wycieczki, a następnie

i przetestuj działanie dodanych rozszerzeń.

ze strony. Poniżej napisu Ostatnia wycieczka

ostatniaTextBox". Dodaj

i w polu WatermarkText

Kliknij, aby podać datę ostatniej wycieczki, a w polu

CalendarExtender. Określ właściwość

dodaj kontrolkę TextBox. Określ jej

. Dodaj rozszerzenie

WatermarkText wpisz Kliknij, aby

WatermarkCssClass wpisz

CalendarExtender. Określ właściwość

stronę. Uruchom w przeglądarce i z menu strony wybierz


nastepnaTextBox?

Piotr Bubacz


6. Zmiana

wyświetlania

języka w

rozszerzeniu

CalendarExtender

• W pliku

do niej następujące

EnableScriptGlobalization="true"

• Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz

Ankiety

• Jeśli ko

przeglądarce

Kliknij przycisk

przycisk

przycisku

górze listy. Wciśnij

• Zapisz stronę. Uruchom w przeglądarce i z menu strony wybierz

Ankiety

Strona 14-10

W pliku SzablonStrony.master znajdź kontrolkę

do niej następujące atrybuty:

nableScriptGlobalization="true"




po kliknięciu kontrolek ostatniaTextBox lub nastepnaTextBox

Jeśli kontrolka jest nadal wyświetlana w języku angielskim, to w

przeglądarce Internet Explorer wybierz Tools

Kliknij przycisk Languages. Jeśli na liście nie ma języka polskiego

przycisk Add i wybierz Polish (Poland) [pl-PL]. Wciśnij

przycisku Move up przesuń wpis Polish (Poland) [pl

górze listy. Wciśnij OK. Wciśnij OK.



Moduł 14


r znajdź kontrolkę ScriptManager. Dodaj



nastepnaTextBox?

ntrolka jest nadal wyświetlana w języku angielskim, to w

Tools -> Internet Options.

. Jeśli na liście nie ma języka polskiego, kliknij

. Wciśnij OK. Za pomocą

Polish (Poland) [pl-PL] tak, aby był na


Aplikacje Internetowe -...

Documents

Transcript of Aplikacje Internetowe -...