[ASP.NET] Wstęp do tworzenia formularzy internetowych
: śr wrz 03, 2003 1:14 am
Wstęp do tworzenia formularzy internetowych w ASP.NET
Właściwie to taki wstęp do napisania prostych skryptów (Aplikacji?) działających po stronie serwera, więc zacznę od przedstawienia z jakich części składa się źródło dokumentu:
1. Dyrektywy strony (są to m.in. informacje w jakim języku piszemy, albo jakie chcemy importować przestrzenie nazw)
Linia: 1
2. Blok deklarowania kodu (w którym umieszczamy kod wykonywany po stronie serwera, jest też możliwość umieszczania kodu w osobnym pliku "codebehind")
Linia: 2-4
3. Blok kodu wykonywalnego (czyli znana z PHP zmiana trybu pomiędzy HTML a kodem [znaczniki "<?", "?>"]) - jednak tak zadeklarowany kod nie będzie skompilowany do MSIL (kodu pośredniego).
Linia: 5
4. Elementy strony
Linia: 6 - 8
Należy zwrócić uwagę na zapis runat="server", "informuje" on, że skrypty mają być wykonane po stronie serwera inaczej środowisko wyświetli je jako nieprzetworzony tekst.
Skoro już mamy przygotowany plik aspx zacznijmy od stworzenia wyglądu strony. Możemy do tego używać czystego HTML jak i formularzy internetowych które tworzymy znacznikami:
Formularz działa po stronie serwera i taki zapis da nam w kodzie wygenerowanej strony coś takiego
Warto zwrócić uwagę na dodane pole ukryte ___VIEWSTATE w którym środowisko ASP.NET zapisuje zmiany dla każdej kontrolki w formularzu. Dzięki czmemu dane wpisane do formularza i po wysłaniu nie giną tylko są pamiętane po powrocie klienta z powrotem na strone z formularzem.
W skład fomularza internetowego wchodzą serwerowe obiekty sterujące. których rozróżniamy 4 rodzaje (ja zajmę się pierwszymi dwoma...):
1. serwerowe obiekty sterujące HTML
2. internetowe serwerowe obiekty sterujące
3. obiekty sterujące do sprawdzenia poprawności danych
4. elementy sterujące użytkownika
ad1.
Jest to zwykły element HTML z dopisanym atrybutem runat="server". np.:
Aby nie zagłębiać się w szczegóły umożliwia to odwołanie się do tego obiektu w skrypcie i przypisanie mu jakiejś wartości np.:
ad.2
są to obiekty które tworzymy za pomocą składni:
na przykład jeżeli chcemy wyświetlić napis użyjemy kontroli label:
to wynik tej linijki da nam w wygenrowanej stronie coś takiego:
Jaka jest róznica pomiędzy tymi dwoma obiektami:
Po pierwsze internetowy obiekt sterujący generuje HTML zgodny z przeglądarką klienta (jeżeli nie rozpozna przeglądarki wygeneruje zawartość w HTML 3.2), jeżeli przeglądarka klienta nie będzie obsługiwała DHTML wtedy wynikiem jej działania będzie HTML. Srodowisko ma w sobie zaimplementowane niższe wersje HTML więc odciąża to programistę od pisania skryptów dopasowujących kod strony do przeglądarki.
Oczywiście przykład kontrolki Label nie jest najlepszy do opisywania różnic w kodzie generowanym przez skrypt, ale warto się nad tym zastanowić, jak bedziemy korzystać z kontrolki Calendar...
Pytanie jakie może się nasunąc to takie których używać, więc odpowiedź jest następująca:
- Pierwszych używajmy wtedy kiedy nie mamy czasu przerabiać zrobionych już formularzy, a potrzebujemy mieć do nich dostęp programowy.
- Całą reszte robić powinno się już na obiektach z drugiej grupy
Warto dodać żeby nie przesadzać z kontrolkami po stronie serwera, jeżeli nie musimy mieć do czegoś dostępu programowego to używajmy tradycyjnych znaczników HTML.
Jeszcze należy zwrócić uwagę to to że obiekty sterujące obsługują tylko aktywne zdarzenia - czyli takie na które odwiedzający świadomie wpływa np. kliknięcie przycisku, wypełnienie pola. (więc odpada zdarzenie przy najechaniu myszką itd.)
To tyle teori teraz praktyka
Czyli nieśmiertekny przykład programu "Witaj świecie"!!
Do napisania programu użyłem ASPWebMatrix i prztestowałem go na serwerze IIS 5.0
Kod:
Zacznijmy od linijki 11 w której to zadeklarowałem formularz działający po stronie serwera, a wnim 3 kontrolki:
Label, TextBox, Button w linijkach analogicznie:13, 16, 19.
Kontrolka Label ma wpisany tekst Witaj świecie, textbox jest pusta, a do Button przypisane jest zdarzenie przy kliknięciu.
Uruchomienie skryptu wygeneruje strone o źródle:
Po podaniu imienia i naciśnięciu przycisku wyślij zostanie wykonana procedura przy kliknięciu i napis będzie nastepujący:
Witaj, imie
bo takie działanie da nam kod rozpoczynajcy się w linijce 3, zadeklarowany jako procedura wykonywana przy kliknięciu.
Michał Dziubek - Panczo
P.S. Proszę o konstruktywną krytykę...
P.S. Generalnie chciałbym usłyszeć co powinienem dodać, poprawić rozwinąć, chyba że miażdżąca krytyka sprawi, że oddam pole komuś innemu
Właściwie to taki wstęp do napisania prostych skryptów (Aplikacji?) działających po stronie serwera, więc zacznę od przedstawienia z jakich części składa się źródło dokumentu:
Kod: Zaznacz cały
1:<%@ Page Language="VB" %>
2:<script runat="server">
3: 'kod wykonywany po stronie serwera
4:</script>
5:<% response.write("Blok kodu wykonywalnego") %>
6: o tej cześci w
7: dalszej
8: części ;)
Linia: 1
2. Blok deklarowania kodu (w którym umieszczamy kod wykonywany po stronie serwera, jest też możliwość umieszczania kodu w osobnym pliku "codebehind")
Linia: 2-4
3. Blok kodu wykonywalnego (czyli znana z PHP zmiana trybu pomiędzy HTML a kodem [znaczniki "<?", "?>"]) - jednak tak zadeklarowany kod nie będzie skompilowany do MSIL (kodu pośredniego).
Linia: 5
4. Elementy strony
Linia: 6 - 8
Należy zwrócić uwagę na zapis runat="server", "informuje" on, że skrypty mają być wykonane po stronie serwera inaczej środowisko wyświetli je jako nieprzetworzony tekst.
Skoro już mamy przygotowany plik aspx zacznijmy od stworzenia wyglądu strony. Możemy do tego używać czystego HTML jak i formularzy internetowych które tworzymy znacznikami:
Kod: Zaznacz cały
<form runat="server></form>Kod: Zaznacz cały
<form name="_ctl0" method="post" action="przyklad.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwxMTA4NzQyODAyOzs+RGN6qC1qJxQ+V8FlLW1baRYB+zQ=" />W skład fomularza internetowego wchodzą serwerowe obiekty sterujące. których rozróżniamy 4 rodzaje (ja zajmę się pierwszymi dwoma...):
1. serwerowe obiekty sterujące HTML
2. internetowe serwerowe obiekty sterujące
3. obiekty sterujące do sprawdzenia poprawności danych
4. elementy sterujące użytkownika
ad1.
Jest to zwykły element HTML z dopisanym atrybutem runat="server". np.:
Kod: Zaznacz cały
<input type="tekst" id="pole1" runat="server" />Kod: Zaznacz cały
pole1.Value="Przykład nadania wartości atrybutowi value w pole1"są to obiekty które tworzymy za pomocą składni:
Kod: Zaznacz cały
<asp:nazwakontrolki id="identyfikatorkontrolki" runat="server" />Kod: Zaznacz cały
<asp:Label id="napis" runat="server" Font-Names="Arial">Przykładowy tekst</asp:Label>
Kod: Zaznacz cały
<span id="napis" style="font-family:Arial;">Przykładowy tekst</span>Po pierwsze internetowy obiekt sterujący generuje HTML zgodny z przeglądarką klienta (jeżeli nie rozpozna przeglądarki wygeneruje zawartość w HTML 3.2), jeżeli przeglądarka klienta nie będzie obsługiwała DHTML wtedy wynikiem jej działania będzie HTML. Srodowisko ma w sobie zaimplementowane niższe wersje HTML więc odciąża to programistę od pisania skryptów dopasowujących kod strony do przeglądarki.
Oczywiście przykład kontrolki Label nie jest najlepszy do opisywania różnic w kodzie generowanym przez skrypt, ale warto się nad tym zastanowić, jak bedziemy korzystać z kontrolki Calendar...
Pytanie jakie może się nasunąc to takie których używać, więc odpowiedź jest następująca:
- Pierwszych używajmy wtedy kiedy nie mamy czasu przerabiać zrobionych już formularzy, a potrzebujemy mieć do nich dostęp programowy.
- Całą reszte robić powinno się już na obiektach z drugiej grupy
Warto dodać żeby nie przesadzać z kontrolkami po stronie serwera, jeżeli nie musimy mieć do czegoś dostępu programowego to używajmy tradycyjnych znaczników HTML.
Jeszcze należy zwrócić uwagę to to że obiekty sterujące obsługują tylko aktywne zdarzenia - czyli takie na które odwiedzający świadomie wpływa np. kliknięcie przycisku, wypełnienie pola. (więc odpada zdarzenie przy najechaniu myszką itd.)
To tyle teori teraz praktyka
Czyli nieśmiertekny przykład programu "Witaj świecie"!!Do napisania programu użyłem ASPWebMatrix i prztestowałem go na serwerze IIS 5.0
Kod:
Kod: Zaznacz cały
01: <%@ Page Language="VB" %>
02: <script runat="server">
03: Sub przycisk_Click(sender As Object, e As EventArgs)
04: napis.text = "Witaj,<B>" & imie.text & "!</b>"
05: End Sub
06: </script>
07: <html>
08: <head>
09: </head>
10: <body>
11: <form runat="server">
12: <div align="center">
13: <asp:Label id="napis" runat="server">Witaj świecie</asp:Label>
14: </div>
15: <div align="center">Podaj swoje imię:
16: <asp:TextBox id="imie" runat="server"></asp:TextBox>
17: </div>
18: <div align="center">
19: <asp:Button id="przycisk" onclick="przycisk_Click" runat="server" Text="Wyślij"></asp:Button>
20: </div>
21: </form>
22: </body>
23: </html>
Label, TextBox, Button w linijkach analogicznie:13, 16, 19.
Kontrolka Label ma wpisany tekst Witaj świecie, textbox jest pusta, a do Button przypisane jest zdarzenie przy kliknięciu.
Uruchomienie skryptu wygeneruje strone o źródle:
Kod: Zaznacz cały
<html><head></head><body>
<form name="_ctl0" method="post" action="newfile.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwxNTg0NTEzNzMyOzs+4A3OPIcKFAamI0lGsHxcDh0WD9o=" />
<div align="center">
<span id="napis">Witaj Świecie</span>
</div>
<div align="center">Podaj swoje imię™:
<input name="imie" type="text" id="imie" />
</div>
<div align="center">
<input type="submit" name="przycisk" value="Wyślij" id="przycisk" />
</div>
</form></body></html>Witaj, imie
bo takie działanie da nam kod rozpoczynajcy się w linijce 3, zadeklarowany jako procedura wykonywana przy kliknięciu.
Michał Dziubek - Panczo
P.S. Proszę o konstruktywną krytykę...
P.S. Generalnie chciałbym usłyszeć co powinienem dodać, poprawić rozwinąć, chyba że miażdżąca krytyka sprawi, że oddam pole komuś innemu
.