background image

ITA- 103 Aplikacje internetowe  

Piotr Bubacz 

Moduł 4 

Wersja 1 

Wprowadzenie do ASP.NET 

Spis treści 

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

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

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

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

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

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

Porady praktyczne .................................................................................................................... 14 

Uwagi dla studenta ................................................................................................................... 15 

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

Laboratorium podstawowe ............................................................................................................... 17 

Problem 1 (czas realizacji 15 min) ............................................................................................. 17 

Problem 2 (czas realizacji 30 min) ............................................................................................. 18 

Laboratorium rozszerzone ................................................................................................................ 22 

 

 

background image

Piotr Bubacz 

 

Moduł 4 

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ę  dodawad  strony 
internetowe  do  aplikacji  oraz  umieszczad  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. 

Uzyskane kompetencje 

Po zrealizowaniu modułu będziesz: 

 

potrafił  tworzyd  aplikacje  internetowe  w  ASP.NET  w  Visual  Studio 
2008 

 

potrafił dodawad kontrolki do strony internetowej  

 

potrafił odwoływad się programowo do kontrolek na stronie  

 

rozumiał zasadę przesyłania informacji między stronami 

Wymagania wstępne 

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

 

znad podstawy języka XHTML  

 

znad podstawy CSS 

Mapa zależności modułu 

Zgodnie  z  mapą  zależności  przedstawioną  na  Rys.  1,  przed  przystąpieniem 
do  realizacji  tego  modułu  należy  zapoznad  się  z  materiałem  zawartym 
w modułach „Podstawy HTML” i „Kaskadowe Arkusze Stylów – CSS”. 

MODUŁ 4

MODUŁ 14

MODUŁ 3

MODUŁ 8

MODUŁ 1

MODUŁ 6

MODUŁ 2

MODUŁ 5

MODUŁ 9

MODUŁ 10

MODUŁ 11

MODUŁ 12

MODUŁ 13

 

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

 

 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-3 

Przygotowanie teoretyczne 

Przykładowy problem 

Podstawowym ograniczeniem języka HTML jest jego statycznośd. 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  wyobrazid stronę  internetową bez 
elementów dynamicznych.  

Firmowe  strony  internetowe  muszą  przynajmniej  umożliwiad  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śd 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śd  rozszerzania  swojej 
podstawowej  wiedzy  o  produktach.  Te  wszystkie  nowe  elementy  pojawiające  się  na  stronach 
wymagają dynamicznych technologii tworzenia zawartości stron.  

Podstawy teoretyczne 

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ładad 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ą  byd  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. 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

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ślid, które z nich mają byd widoczne dla użytkownika. 

1

2

3

4

5

6

 

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ścid  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 przenosid i modyfikowad 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 utworzyd nową aplikację w Visual Studio musimy wybrad z menu  File -> New -> Web Site. Na 
ekranie pojawi się okno New Web Site (Rys. 3), w którym możemy określid podstawowe parametry 
tworzonej witryny. 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-5 

1

2

3

5

4

6

 

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ślid,  jakiego  typu  aplikację 

chcemy utworzyd. Najczęściej wybieramy szablon ASP.NET Web Site

2.  Docelowa  wersja  .NET  Framework  –  docelowa  wersja  środowiska,  pod  którą  ma  byd 

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  uruchomid  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ąd  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  zatrzymad  wykonywanie  programu,  podejrzed 
zmienne, sprawdzid krok po kroku wykonywanie poszczególnych wierszy kodu itp. 

Aplikację  można  również  uruchomid  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śd  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 ustawieo. 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.  

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-6 

Dyrektywa  @Page  określa  atrybuty  używane  przez  parser  i  kompilator.  Pozwala  m.in.  określid 
parametry protokołu HTTP, przestrzenie nazw, wykorzystywany język programowania. 

Sekcja kodu aplikacji  

Sekcja  kodu  aplikacji  zawiera  procedury  obsługi  zdarzeo  wraz  dodatkowymi  procedurami 
pomocniczymi. Kod aplikacji może zostad 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śd tego znacznika będzie przetwarzana na serwerze przed wygenerowaniem kodu HTML dla 
klienta.  Strona  może  posiadad  znacznik  <script>  bez  atrybutu  runat,  zawierający  skrypt 
wykonywany po stronie klienta.  

Jeśli kod aplikacji ma zostad 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  byd  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  byd  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 dodad 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). 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-7 

1

2

3

4

5

 

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  zostad 

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 dodad do strony w dowolnym widoku: DesignSplit lub Source. W oknie Toolbox 
należy  wybrad  interesujący  nas  komponent,  a  następnie,  przeciągnąd  go  na  formularz  lub 
dwukrotnie  kliknąd.  Kontrolka  jest  umieszczana  zgodnie  z  przepływem  elementów  na  stronie 
internetowej. Aby umieścid ją w dowolnym miejscu, musimy wykorzystad pozycjonowanie CSS.  

Określanie właściwości kontrolki  

Każda kontrolka posiada zbiór właściwości, które możemy określid w oknie Properites (Rys. 6). 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-8 

 

Rys. 6 Przykład okna Properties dla kontrolki Label 

Najczęściej  wykorzystuje  się  właściwośd  ID,  określającą  nazwę  kontrolki  oraz  Text,  pozwalającą 
określid 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ąpid,  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ą byd również generowane 
przez  aplikację,  gdy  rozpoczyna  lub  kooczy  jakieś  zadanie  (np.  generowanie  wynikowego 
dokumentu HTML).  

Możemy programowo kontrolowad 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ślid, co 
ma się stad 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  zdarzeo  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 
wygenerowad metodę obsługi dla któregoś z nich, wystarczy dwukrotnie kliknąd jego nazwę. 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-9 

 

Rys. 7 Okno Properties z listą zdarzeo 

Programowe odwoływanie do kontrolek 

Możemy  programowo  zmieniad  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 zmienid lub jakie metody możemy na niej wywoład (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  sprawiad  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ład  zapytanie  oraz 
odpowiednio dodane nazwy parametrów wraz z ich wartościami po znaku „=”.  

Ogólna postad 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ład zmienną imie i nazwisko do strony Info.aspx, to dane te można 
przesład w adresie w następujący sposób:  

Info.aspx?imie=wartosc&nazwisko=wartosc 

Przygotowany  ciąg  znaków  należy  wysład  przy  pomocy  metody  Response.Redirect(url),  gdzie  url 
jest ciągiem znaków, np.:  

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

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 pojawid 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żyd 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śd 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  tworzyd  aplikacje  ASP.NET  oraz  jak  dodawad 
kontrolki  do  formularzy  i  nowe  strony  do  aplikacji.  Zostały  również  omówione  mechanizmy 
przesyłania informacji między stronami. 

Przykładowe rozwiązanie 

Utworzenie aplikacji internetowej  
Aplikacje internetowe w Visual Studio 2008 nauczymy się tworzyd na przykładzie prostej aplikacji, 
której zadaniem będzie wyświetlenie komunikatu „Witaj świecie”. 

Aby  utworzyd  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 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-11 

ASP.NET Web Site. Pliki aplikacji możemy przechowywad 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 przygotowad 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 zobaczyd 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śd aplikacji 

Plik  Default.aspx  standardowo  otwiera  się  w  głównym  oknie  Visual  Studio  w  widoku  Source.  By 
móc  edytowad  stronę  w  trybie  WYSIWYG,  możemy  przełączyd  się  na  widok  Design.  Zróbmy  tak, 
następnie kliknijmy obszar strony i wpiszmy „Witaj świecie!”.  

Aby zobaczyd wynik naszej pracy w przeglądarce internetowej, musimy uruchomid aplikację. W tym 
celu  wybieramy  z menu  Debug -> Start Debugging.  Przy  pierwszym  uruchomieniu aplikacji pojawi 
się  okno  z informacją,  że  możliwośd  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łączyd tę opcję. 

 

Rys. 10 Okno Debugging Not Enabled 

Aplikację  można  również  uruchomid  w  trybie  bez  możliwości  debugowania,  wybierając  z  menu 
głównego Debug -> Start Without debugging

Po  uruchomieniu  aplikacji  powinna  otworzyd  się  przeglądarka  internetowa,  a  w  niej  strona 
Default.aspx. Adres strony może wyglądad 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 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-12 

 

Default.aspx – strona internetowa  

Posługiwanie się kontrolkami 
Podstawową umiejętnością, jaką powinniśmy posiadad tworząc aplikacje ASP.NET, jest umiejętnośd 
posługiwania  się  kontrolkami.  Pracy  z  nimi  nauczymy  się  na  przykładzie  prostej  aplikacji, 
pobierającej od użytkownika imię oraz płed 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 dodad pole tekstowe, w które użytkownik 
będzie  mógł  wpisad  swoje  imię.  Funkcję  tę  spełnia  kontrolka  TextBox.  Znajdziemy  ją  w  oknie 
Toolbox,  w  kategorii  Standard  –  by  dodad  ją  do  strony,  możemy  przeciągnąd  ją  na  obszar 
projektowania  lub  kliknąd  ją  dwukrotnie.  Warto  zauważyd,  że  nie  możemy  umieścid  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 rozmieszczad kontrolki na stronie, powinniśmy użyd 
CSS.  Warto  pamiętad,  aby  zawsze  nadawad  kontrolkom  znaczące  nazwy.  W  tym  celu  w  oknie 
Properties zmienimy właściwośd ID kontrolki TextBox z TextBox1 na imieTextBox. 

Kursor w widoku projektowania powinien aktualnie znajdowad 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śd  do  widoku  Split  i  obserwowad  jednocześnie  widoki  Design 
Source).  Warto  zauważyd,  ż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łed:”. Następnie 
dodajmy  kontrolkę  DropDownList  reprezentującą  listę  rozwijaną  i  nadajmy  jej  nazwę 
plecDropDownList.  Możemy  wypełnid  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żyd 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 dodad elementy do listy. 
By dodad 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śd  Text,  która  określa  tekst 
wyświetlany  dla  elementu  i  przypiszmy  jej  wartośd  Kobieta.  Następnie  w  polu  Value, 
określającym  jego  unikatową  wartośd,  wpiszmy  K.  Dodajmy  kolejny  element  do  listy,  lecz  tym 
razem  w  polach  Text  i  Value  wpiszmy  odpowiednio:  Mężczyzna  i  M.  Warto  zwrócid  uwagę,  że 
standardowo  pole  Value  jest  wypełniane  taką  samą  wartością,  jak  pole  Text,  lecz  w  naszym 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-13 

przypadku  ze  względu  na  problemy,  które  mogą  występowad  z  polskimi  znakami  diakrytycznymi, 
lepiej będzie zastosowad 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  wygenerowad metodę obsługi kliknięcia przycisku, 
wystarczy kliknąd go dwukrotnie. W efekcie w pliku Default.aspx.cs powinna pojawid 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śd 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;  

Przesyłanie informacji między stronami 
By  zaprezentowad  możliwośd  przesyłania  informacji  między  stronami,  do  przygotowanej 
poprzednio aplikacji dodamy możliwośd 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śd kontrolki imieTextBox.  

Dodajmy nową stronę do aplikacji. W tym celu możemy wybrad z menu Website -> Add Add New 
Item
  lub  kliknąd  prawym  przyciskiem  myszy  w  oknie  Solution  Explorer  i  z  menu  kontekstowego 
wybrad  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śd 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 koocu przypisz zawartośd zmiennej wyswietl do własności Text kontrolki Label: 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-14 

wyswietlLabel.Text = wyswietl; 

Porady praktyczne 

Praca z Visual Studio  

 

Jeśli  omyłkowo  zamknąłeś  któreś  z  okien,  możesz  otworzyd  je  ponownie  korzystając  z  menu 
View

 

Możesz  przeciągad  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  pracowad  w  środowisku  Visual  Studio,  powinieneś  nauczyd  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 dostosowad, wybierając z menu głównego 
Tools -> Customize -> Keyboard

Tworzenie aplikacji 

 

Jeśli nie wykorzystujesz zaawansowanych funkcji serwera IIS, możesz umieścid pliki aplikacji w 
dowolnym miejscu w systemie plików i testowad ją wykorzystując zintegrowany serwer WWW 
dostarczany  razem  z  Visual  Studio.  Opcja  ta  jest  szczególnie  przydatna,  gdy  nie  posiadasz 
uprawnieo 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śd  wyboru  wersji 
.NET Framework. Pamiętaj, że musi ona byd zainstalowana nie tylko na komputerze, na którym 
tworzysz  i  testujesz  aplikację,  lecz  również  na  serwerze,  na  którym  zamierzasz  docelowo  ją 
umieścid.  Jeśli  zdecydujesz  się  utworzyd  aplikację  dla  .NET  Framework  2.0,  musisz  liczyd  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  wprowadzad 
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śd 
debugowania  jest  wyłączona  w  pliku  konfiguracyjnym.  Zapewnisz  w  ten  sposób  lepszą 
wydajnośd aplikacji, zaś w przypadku błędu na stronie fragmenty kodu nie będą prezentowane 
użytkownikowi. 

Tworzenie stron 

 

Staraj się umieszczad kod strony w osobnym pliku. Możliwośd 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 
sterowad ich położeniem, możesz wykorzystad CSS. 

 

Staraj  się  nie  korzystad  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ą  posiadad  również  atrybut 
ID,  dzięki  czemu  można  odwoływad  się  do  nich  w  kodzie.  Pamiętaj,  że  atrybuty  te  możesz 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-15 

nadawad nie tylko kontrolkom serwerowym, lecz również zwykłym elementom HTML, takim jak 
<div> czy <img>. 

 

Nigdy  nie  powinieneś  polegad  na  tym,  że  właściwośd  ID  elementu  z  atrybutem 
runat="server"  będzie  mied  taką  samą  wartośd  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śd 
CssClass i klasy CSS. 

Przesyłanie informacji między stronami 

 

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  przekazywad 
większych porcji informacji. 

 

By  móc  przekazywad  dane  binarne  w  parametrze  adresu  URL,  powinieneś  zastosowad  jakieś 
kodowanie  transportowe  –  powszechnie  w  tym  celu  wykorzystuje  się  kodowanie  Base64. 
Niestety musisz liczyd się z tym, że rozmiar danych po zakodowaniu ulegnie zwiększeniu. 

 

Może  się  zdarzyd,  że  w  łaocuchu  znaków  przesyłanym  w  parametrze  adresu  URL  znajdzie  się 
jakiś  znak  specjalny,  np.  ampersand  („&”).  Jeśli  dokleimy  taki  łaocuch  jako  wartośd  dla 
parametru,  może  ona  później  zostad  nieprawidłowo  zinterpretowana  przez  serwer.  By 
zabezpieczyd się przed taką sytuacją, powinieneś kodowad wartości parametrów przy pomocy 
metody Server.UrlEncode. 

Uwagi dla studenta 

Jesteś przygotowany do realizacji laboratorium jeśli: 

 

umiesz tworzyd aplikacje internetowe ASP.NET w Visual Studio 2008 

 

umiesz dodawad nowe strony do aplikacji 

 

umiesz dodawad kontrolki do strony 

 

wiesz co to jest i jak utworzyd metodę obsługi zdarzenia  

 

umiesz programowo odwoływad się do kontrolek 

 

wiesz co to jest Smart Tag i jak z niego korzystad 

 

wiesz jak przesyład informację pomiędzy stronami metodą GET i POST 

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.  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  tworzyd 
witryny  ASP.NET,  którzy  zetknęli  się  już  z  jakimkolwiek  językiem  programowania. 
Dzięki  temu  podręcznikowi  nauczysz  się  korzystad  z  opisanych  narzędzi, 
działających w nowoczesnym środowisku Visual Web Developer 2008. 

3.  Jesse Liberty, Dan Hurwitz, ASP.NET. Programowanie, Helion, 2006 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

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 Sitehttp://www.asp.net 

Strona  zawiera  najnowsze  informacje  dotyczące  technologii  ASP.NET. 
Początkującym  programistom  ASP.NET  warto  polecid  informacje  zawarte  w  
zakładce  Get  Started.  Z  kolei  cennym  źródłem  wiedzy  dla  wszystkich  bez  wyjątku 
jest zakładka Learn

 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-17 

Laboratorium podstawowe 

Problem 1 (czas realizacji 15 min) 

Twoja  firma  rozpoczęła  ekspansję  na  rynku  dynamicznych  aplikacji  internetowych.  W  koocu  ile 
można  zarabiad  na  tworzeniu  prostych  stron  WWW?  Ponieważ  chcesz  byd  dobrym  szefem, 
postanowiłeś  poznad  technologię,  w  której  będziecie  tworzyli  dynamiczne  aplikacje.  Wasz  wybór 
padł na technologię ASP.NET. Swoją przygodę z nią postanowiłeś rozpocząd od prostego zadania – 
 wyświetlenia  na  stronie  internetowej  fragmentu  tekstu, dzisiejszej  daty  oraz  pobranego 
od użytkownika  imienia. 

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 ASP.NET 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.  Dodaj tekst do 
strony. Uruchom 
aplikację ASP.NET 

 

Przełącz się na widok Split

 

Na  stronie  internetowej  w  obszarze  podglądu  strony  wpisz  Witaj 
świecie!

 

Zapisz stronę wybierając z menu File -> Save Default.aspx lub wciskając 
kombinację klawiszy Ctrl+S

 

Uruchom 

przygotowaną 

aplikację 

wybierając 

menu 

Debug -> Start Debugging lub wykorzystując klawisz F5. Po wybraniu tej 
opcji  przy  pierwszym  uruchomieniu  aplikacji  pojawi  się  okno 
z informacją  o  konieczności  zezwolenia  na  debugowanie  (Rys.  12)
Wciśnij OK.  

 

Rys. 12 Okno z informacją o modyfikacji pliku Web.config 

3.  Dodaj 
kontrolki Label  

 

Na stronie w nowej linii dopisz Dzisiaj jest, a następnie z okna Toolbox 
przeciągnij kontrolkę Label, umieszczoną w zakładce Standard

Kontrolkę możesz umieścid w  obszarze podglądu strony lub w kodzie 
źródłowym. 

 

Wybierz  dodaną  kontrolkę  i  w  oknie  Properties  w  polu  (ID)  wpisz 
dzisiajLabel, natomiast pole Text zostaw puste. 

4.  Dodaj 
procedurę obsługi 
zdarzenia 

 

W  widoku  podglądu  strony  kliknij  dwukrotnie  formularz.  Visual  Studio 
otworzy edytor kodu strony i umieści kursor w metodzie Page_Load

 

Do  metody  dodaj  następujący  kod  wyświetlającą  aktualną  datę  w 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

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 usuo zwartośd 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

Problem 2 (czas realizacji 30 min) 

Poprzednie  zadanie  okazało  się  byd  łatwiejsze  niż  sądziłeś.  Zachęcony  pierwszymi  sukcesami 
rzuciłeś  sobie  nowe  wyzwanie  –  postanowiłeś  dowiedzied  się,  jak  przesyład  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ówid  do  zmiany  strony 
internetowej?  

Wymyśliłeś, że na pierwszej stronie użytkownik  będzie mógł wprowadzid  imię oraz określid swoją 
płed, na podstawie której będzie następnie przekierowywany na odpowiednią stronę z pytaniami. 

Zadanie 

Tok postępowania 

1.  Dodaj nową 
stronę do aplikacji 

 

Otwórz Visual Studio 2008. 

 

Z menu wybierz File -> New Web Site

 

Z listy Visual Studio installed templates wybierz ASP.NET 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.  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śd ID na imieTextBox

 

W  nowej  linii  dodaj  tekst  Podaj  płed:,  a  następnie  kontrolkę 
DropDownList. Ustaw jej właściwośd 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)

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

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 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

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 usuo zwartośd pola Text

 

W  widoku  podglądu  strony  kliknij  dwukrotnie  formularz.  Visual  Studio 
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śd 
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śd 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 
—  język: Visual C# 
—  opcja Place code in separate file zaznaczona 
—  opcja Select master page niezaznaczona 

 

Do nowoutworzonej strony dodaj kontrolkę Label. Określ jej właściwośd 
ID na wyswietlLabel, natomiast właściwośd Text zostaw pustą. 

 

W  widoku  podglądu  strony  kliknij  dwukrotnie  formularz.  Visual  Studio 
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 = 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 
—  język: Visual C# 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-21 

pytania dla 
mężczyzn i 
pobierz dane 
przesłane przy 
pomocy metody 
GET 

—  opcja Place code in separate file zaznaczona 
—  opcja Select master page niezaznaczona 

 

Do nowej strony dodaj kontrolkę Label i w oknie Properities w polu (ID) 
wpisz wyswietlLabel i usuo zwartośd pola Text

 

W  widoku  podglądu  strony  kliknij  dwukrotnie  formularz.  Visual  Studio 
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"]; 

8.  Umieśd 
pytania do ankiety 

 

W  pliku  Mezczyzna.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śd 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 klatki 
—  obwód pasa 

 

Na dole strony dodaj kontrolkę Button i w oknie Properities w polu Text 
wpisz Wyświetl, a w polu (ID) – wyswietlButton. Zmieo jej właściwośd 
Text na Wyślij, a ID na wyslijButton. Następnie dwukrotnie ją kliknij. W 
metodzie wyslijButton_Click dodaj następujący kod: 

Server.Transfer("Dziekujemy.aspx?imie=" + 
Request.QueryString["imie"]); 

9.  Przetestuj 
stronę 

 

Zapisz zmiany i uruchom stronę Default.aspx. W oknie tekstowym podaj 
swoje imię, wybierz płed, a następnie wciśnij przycisk Wyświetl

Dlaczego 

zastosowano 

Server.Transfer 

w metodzie 

wyslijButton_Click? Co to umożliwia? 

 

 

 

background image

Piotr Bubacz 

 

Moduł 4 

ITA-103 Aplikacje internetowe 

 

Wprowadzenie do ASP.NET 

Strona 4-22 

Laboratorium rozszerzone 

Po  ukooczeniu  poprzedniego  zadania  postanowiłeś  pokazad  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łatwid  sobie  prowadzenie 
rekrutacji i poszerzyd swoją bazę modeli i modelek.  

W  związku  z tym  zgodziłeś  się  przygotowad  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ścid  m.in.  link  do  ankiety.  Strona  ankiety  musi  umożliwid  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łed 

Na podstawie płci należy pobrad następujące informacje: 

 

w przypadku kobiet: 

 

obwód biustu 

 

wielkośd miseczki 

 

talia 

 

biodra  

 

długośd nogi  

 

w przypadku mężczyzn: 

 

klatka 

 

pas 

 

długośd nogi 

Na  stronie  z  podziękowaniem  za  wypełnienie  ankiety  powinno  znaleźd  się  podsumowanie 
podanych w ankiecie informacji. Wszystkie strony aplikacji powinny mied spójny wygląd.