[ASP.NET] Wstęp do tworzenia formularzy internetowych

[Panczo]

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:

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 ;)

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:

Kod: Zaznacz cały

<form runat="server></form>

Formularz działa po stronie serwera i taki zapis da nam w kodzie wygenerowanej strony coś takiego

Kod: Zaznacz cały

<form name="_ctl0" method="post" action="przyklad.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwxMTA4NzQyODAyOzs+RGN6qC1qJxQ+V8FlLW1baRYB+zQ=" />

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.:

Kod: Zaznacz cały

<input type="tekst" id="pole1" runat="server" />

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.:

Kod: Zaznacz cały

pole1.Value="Przykład nadania wartości atrybutowi value w pole1"

ad.2
są to obiekty które tworzymy za pomocą składni:

Kod: Zaznacz cały

<asp:nazwakontrolki id="identyfikatorkontrolki" runat="server" />

na przykład jeżeli chcemy wyświetlić napis użyjemy kontroli label:

Kod: Zaznacz cały

<asp:Label id="napis" runat="server" Font-Names="Arial">Przykładowy tekst</asp:Label>

to wynik tej linijki da nam w wygenrowanej stronie coś takiego:

Kod: Zaznacz cały

<span id="napis" style="font-family:Arial;">Przykładowy tekst</span>

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:

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>

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:

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>

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

[Seth]

Ja bym proponowal od poczatku przejscie na stosowanie techniki code behind - skrypty w oddzielnych plikach. Wtedy wyrobia sobie odbiorcy dobry nawyk.
Poza tym trzeba zaznaczyc, ze to co znajduje sie w <% %> nie zostanie zkompilowane do kodu MSIL.

To tyle

[Panczo]

Dopisałem o tym kodzie pośrednim, zrezygnowałem z opisania codebehind bo uważam to jako zbytnią nadgorliwość przy tak krótkim przykładzie.
A i tak zależy to tylko od preferencji tworzącego czy się zdecyduje na "chowanie kodu" czy nie.

[iniside]

Ja jako początkujący chcący sie czegoś nauczć mam pełne prawa do krytyki .
Musze poprzeć Seth'a. Najlepiej pisać w oddzielnych plikach. Bo w tedy nie robi sie za przeproszeniem Syf w pliku. I łatwiej przeczytać. W jedym pliku kontrolki a w drugim kod do ich obsługi. A tak mamy ładnie odzdzielną warstwe prezentacji od warstwy biznesowej. A przydałało by sie napisać jak sie dzieli tak kod. (mniej więcej wiem jak ale wolałbym sie upewnić).