Kurs WWW
Kurs WWW
ASP.NET
ASP.NET
Paweł Rajba
Paweł Rajba
pawel@ii.uni.wroc.pl
http://pawel.ii.uni.wroc.pl/
Wprowadzenie
Wprowadzenie
Z czego składa się aplikacja w ASP.NET?
ASP.NET Web Forms (.aspx)
ASP.NET Web services (.asmx)
Klas, stron ,,code-behind'' (.vb lub .cs)
Klas globalnych aplikacji (.asax)
Pliku Web.config
Wszystko inne typu strony HTML, arkusze CSS, itp.
Kurs WWW
Copyright © Paweł Rajba
- 1 -
Wprowadzenie
Wprowadzenie
Po kompilacji dochodzą pliki
Project Assembly files (.dll)
skompilowane pliki typu ,,code-behind''
pliki są umieszczane w katalogu /bin serwisu
dla aplikacji tworzony jest jeden taki plik o nazwie
NazwaProjektu.dll
AssemblyInfo.vb lub AssemblyInfo.cs
zawierają informacje o skompilowanym kodzie, typu
wersja, atrybuty, itp.
Kurs WWW
Copyright © Paweł Rajba
- 2 -
Wprowadzenie
Wprowadzenie
Gdzie to wszystko jest?
Kody aplikacji: tam gdzie utworzyliśmy solution i
projekty
Gotowa aplikacja:
C:\Inetpub\wwwroot\Aplikacja\
dostępna pod adresem
http://localhost/Aplikacja/
Kurs WWW
Copyright © Paweł Rajba
- 3 -
Pierwszy przykład
Pierwszy przykład
Tworzymy aplikację ASP.NET Web Application
Tworzymy aplikację ASP.NET Web Application
Dokładamy tabelkę (Table), dodajemy po dwa
Dokładamy tabelkę (Table), dodajemy po dwa
wiersze i kolumny, formatujemy
wiersze i kolumny, formatujemy
Dodajemy ListBox, wstawiamy cztery pozycje i
Dodajemy ListBox, wstawiamy cztery pozycje i
formatujemy
formatujemy
Dodajemy Button i formatujemy
Dodajemy Button i formatujemy
Kompilujemy projekt, odpalamy IE i oglądamy
Kompilujemy projekt, odpalamy IE i oglądamy
źródło HTML
źródło HTML
Zmieniamy pageLayout na Flow i jeszcze raz
Zmieniamy pageLayout na Flow i jeszcze raz
Kurs WWW
Copyright © Paweł Rajba
- 4 -
Pierwszy przykład
Pierwszy przykład
Tworzymy nowy projekt, wybieramy Class
Library (dajemy Add to Solution)
Przeklejamy kod z pliku p1\ClassLibrary.cs
Wracamy do WebForm, dodajemy referencje
do ClassLibrary
Do strony HTML dodajemy kod z pliku
p1\KodHTML.aspx
Kompilujemy i odpalamy IE
Kurs WWW
Copyright © Paweł Rajba
- 5 -
Pierwszy przykład
Pierwszy przykład
Przechodzimy do pliku WebForm.aspx.cs, do
Przechodzimy do pliku WebForm.aspx.cs, do
metody Page_Load i wstawiamy kod
metody Page_Load i wstawiamy kod
Response.Write("<!-- Tu jest początek strony -->");
Response.Write("<!-- Tu jest początek strony -->");
Kurs WWW
Copyright © Paweł Rajba
- 6 -
WebForm
WebForm
Co to jest?
Jest to kombinacja HTMLa, kodu w C# (albo innym
języku) i kontrolek
Jest przetwarzany po stronie serwera i generuje
kod HTML, który jest wysyłany do klienta
WebForms mają rozszerzenie .aspx
WebForms może się składać z dwóch plików:
aspx – właściwy form
aspx.cs – tzw. plik code-behind, zawiera logikę
wpierającą form właściwy (będzie o tym później)
Kurs WWW
Copyright © Paweł Rajba
- 7 -
WebForm
WebForm
Atrybuty strony
Atrybuty strony
Składnia
Składnia
<%@ Page atrybuty >
<%@ Page atrybuty >
Atrybuty na początek
Atrybuty na początek
Language="cs"|"vb" (języków jest oczywiście więcej)
Language="cs"|"vb" (języków jest oczywiście więcej)
Codebehind="cos.aspx.cs"
Codebehind="cos.aspx.cs"
ClientTarget="downlevel" – dla starszych przeglądarek
ClientTarget="downlevel" – dla starszych przeglądarek
do poprzedniego przykładu dodać i zobaczyć różnice w
do poprzedniego przykładu dodać i zobaczyć różnice w
wynikowym HTMLu
wynikowym HTMLu
ErrorPage="adres strony w razie błędu"
ErrorPage="adres strony w razie błędu"
Kurs WWW
Copyright © Paweł Rajba
- 8 -
WebForm
WebForm
Atrybuty treści <body>
Atrybuty treści <body>
pageLayout – layout strony
pageLayout – layout strony
Wartości
Wartości
FlowLayout
FlowLayout
GridLayout
GridLayout
Objawia się jako ms_positioning
Objawia się jako ms_positioning
pozostałe atrybuty, np. bodyColor, ...
pozostałe atrybuty, np. bodyColor, ...
Kurs WWW
Copyright © Paweł Rajba
- 9 -
WebForm
WebForm
Atrybuty formularza
id – identyfikator
method – to co poprzednio
runat=”server” – sedno webforma
można w takim formularzu osadzać kontrolki
przetwarzane po stronie serwera
inna wartość niż “server” sprawi, że formularz będzie
traktowany jako zwykły formularz HTML
dane z takiego formularza są wysyłane z powrotem do
strony, która go utworzyła
Kurs WWW
Copyright © Paweł Rajba
- 10 -
WebForm
WebForm
Kontrolki po stronie serwera
są to obiekty osadzane w kodzie strony
reprezentują pewną funkcjonalność, po
przetworzeniu zostaną zamienione na odpowiedni
kod HTML i wysłane do klienta
kolejną cechą WebForma jest automatyczne
dodawanie kontrolki reprezentującej stan
formularza
funkcjonalność kontrolek jest oprogramowywana w
tzw. codebehind, np. to co się stanie po kliknięciu w
przycisk lub listę jest obsługiwane przez
mechanizm zdarzeń
Kurs WWW
Copyright © Paweł Rajba
- 11 -
WebForm
WebForm
Rodzaje kontrolek
Zwykłe kontrolki HTML
Kontrolki po stronie serwera
Zwykłe kontrolki HTML z atrybutem runat=”server”
Intrinsic controls – są to kontrolki odpowiadające zwykłym
kontrolkom HTML, np. button, listBox,
Validation controls – kontrolki pozwalające weryfikować
dane wprowadzone przez użytkownika
Rich controls – bardziej wypasione kontrolki, generujące
czasami nawet baaardzo dużo kodu, np. Calendar
Kurs WWW
Copyright © Paweł Rajba
- 12 -
WebForm
WebForm
Rodzaje kontrolek
Kontrolki po stronie serwera
List-bound controls – kontrolki do prezentacji, sortowania,
itd. danych z np. bazy danych
Internet Explorer Web controls – złożone kontrolki
obsługiwane przez IE (i chyba tylko IE) jak np. MultiPage,
Toolbar, czy TreeView
Kurs WWW
Copyright © Paweł Rajba
- 13 -
WebForm
WebForm
Stan formularza
stan kontrolek (pary nazwa-wartość) są
przekazywane przez automatycznie generowane
pole ukryte __VIEWSTATE
ponieważ przy dużych formularzach może to
spowolnić działanie, możliwe jest nastepujące rozw.
wyłączyć tworzenie stanu dla całego formularza:
<%@ Page EnableViewState=”false” %>
natomiast włączyć dla wybranych kontrolek, których stan
chcemy przekazywać pomiędzy kolejnymi żądaniami
<asp:ListBox id=”ListName” EnableViewState=”true”
runat=”server”></asp:ListBox>
Kurs WWW
Copyright © Paweł Rajba
- 14 -
WebForm
WebForm
Przykładowe kontrolki
Intrinsic controls
<asp:button>
<input type=”submit”>
<asp:checkbox>
<input type=”checkbox”>
<asp:hyperlink>
<a href=”...”></a>
<asp:image>
<img src=”...”>
<asp:imagebutton>
<input type=”image”>
<asp:label>
<span></span>
<asp:listbox>
<select></select>
<asp:panel>
<div></div>
<asp:table>
<table</table>
<asp:textbox>
<input type=”text”>
Kurs WWW
Copyright © Paweł Rajba
- 15 -
WebForm
WebForm
Przykładowe kontrolki
Validation controls
CompareValidator – dwa wskazane pola muszą mieć takie
same wartości
CustomValidator – wartość musi spełniać zadany warunek
np. musi być parzysta
RangeValidator – wartość musi być w podanym zakresie
RegularExpressionValidator – wartość musi się
dopasowywać do podanego wyrażenia regularnego
RequiredFieldValidator – wartość pola wymagana
ValidationSummary – podsumowanie o błędach
wypełnienia formularza
Kurs WWW
Copyright © Paweł Rajba
- 16 -
WebForm
WebForm
Przykładowe kontrolki
Rich controls
Calendar – tworzy ładny kalendarz
List-bound controls
CheckBoxList – tworzy listę checkboxów
Repeater – tworzy zadany element dla każdego wiersza
zbioru danych
DataList – podobny do repeatera, ale z bardziej
rozbudowanym formatowanie (można dane prezentować
w postaci tabelki)
DataGrid – tworzy tabelkę z danymi
Kurs WWW
Copyright © Paweł Rajba
- 17 -
WebForm
WebForm
Używanie kontrolek do weryfikacji ,,inputu''
Składnia ogólna
<asp:TypWeryfikatora
id=”idWeryfikatora”
runat=”server”
ControlToValidate=”kontrolkaDoWeryfikacji”
ErrorMessage=”tekstPrzyPodsumowaniu”
Display=”static | dynamic | none”
Text=”tekstWyswietlanyPrzezKontrolke”
EnableClientScript=”true | false”>
</asp:TypWeryfikatora>
Kurs WWW
Copyright © Paweł Rajba
- 18 -
WebForm
WebForm
Używanie kontrolek do weryfikacji ,,inputu''
RequiredFieldValidator
używamy, jeśli chcemy, żeby użytkownik wypełnił jakieś
pola
można użyć dodatkowej opcji InitialValue, która sprawi,
że niedopuszczalną wartością będzie nie ciąg pusty, ale
ta właśnie wartość
można też użyć dwóch takich kontrolek
jedna blokuje wartość pustą
druga blokuje jakąś InitialValue
Kurs WWW
Copyright © Paweł Rajba
- 19 -
WebForm
WebForm
Używanie kontrolek do weryfikacji ,,inputu''
CompareValidator
pozwala porównać kontrolkę z wartością, lub dwie
kontrolki
dodatkowe atrybuty
ValueToCompare – porównanie będzie do tej wartości
ControlToCompare – porównanie będzie ze wskazaną kontrolką
(w przypadku ustawieniu obu wartości, ta będzie ważniejsza)
Type – określamy jakiego typu powinny być wprowadzone dane
(wybranie typu ma znaczenie, jeśli operator jest DataTypeCheck)
Operator – określamy rodzaj porównania
Kurs WWW
Copyright © Paweł Rajba
- 20 -
WebForm
WebForm
Używanie kontrolek do weryfikacji ,,inputu''
RangeValidator
pozwala wymusić, żeby wartości były z podanego
zakresu
dodatkowe atrybuty
MinimumValue – określa minimalną wartość dla liczb i minimalną
długość napisu dla napisów
MaximumValue – analogicznie do MinimumValue
Type – określamy typ
Kurs WWW
Copyright © Paweł Rajba
- 21 -
WebForm
WebForm
Używanie kontrolek do weryfikacji ,,inputu''
RegularExpressionValidator
sprawdza, czy wartość dopasowuje się do zadanego
wyrażenia regularnego
wyrażenie regularne można konstruować za pomocą
litery, cyfry
? – powtórzenie 0 lub 1 raz
* – powtórzenie 0 lub więcej razy
+ – powtórzenie 1 lub więc raz
[0-20] – zakresy
{n} – powtórzenie dokładnie n razy
| – alternatywa
\w – litera, \d – cyfra, \. – kropka
Kurs WWW
Copyright © Paweł Rajba
- 22 -
Przykład
Przykład
Tworzymy kontrolki
Imię
TextBox
Nazwisko
TextBox
Data Urodzenia TextBox
Województwo
DropDownList
Login
TextBox
Hasło
TextBox (tutaj TextMode=Password)
Powtórz hasło
TextBox
Tworzymy odpowiednie weryfikatory
Kurs WWW
Copyright © Paweł Rajba
- 23 -
Kod aplikacji
Kod aplikacji
Kod do WebForma można dodawać
jako mieszankę HTML i kodu
jako kod w znacznikach SCRIPT, ale również w
dokumencie HTML
osobnym pliku zwanych codebehind page
Przykładowy kod w pliku HTML
<asp:Button id=”btn” runat=”server” />
<SCRIPT Language=”c#” runat=”server”>
private void btn_Click(object sender, System.EventaArgs e) {
...
}
Kurs WWW
Copyright © Paweł Rajba
- 24 -
Kod aplikacji
Kod aplikacji
Po co jest codebehind page?
każdy WebForm może mieć taką stronę
pozwala oddzielić kod od designu
strona taka może być tylko w jednym wybranym
języku
Powiązanie WebForm z codebehind poprzez
Codebehind="WebForm2.aspx.cs"
Inherits="PierwszyPrzyklad.WebForm2"
pozwala na dostęp do wszystkich klas i obiektów z
codebehind page
Kurs WWW
Copyright © Paweł Rajba
- 25 -
Kod aplikacji
Kod aplikacji
...
Kurs WWW
Copyright © Paweł Rajba
- 26 -