Mellékelt példa megnyitása előtt szükséges egy ASPNET02 nevű virtuális könyvtár létrehozása, mely a példa könyvtárára mutat. Ehhez futtassa le a mellékelt CreateVD.js parancsállományt.
A Webes űrlapok talán az egyik legszembetűnőbb alkotóelemei egy-egy Web-alkalmazásnak, a legtöbb szolgáltatás egy ilyen felülettel indul. Mielőtt egy űrlapot megvalósítunk, nem az a fontos kérdés, hogy milyen adatokat fogunk bekérni ezen keresztül a felhasználótól. Sokkal fontosabb információ az alkalmazás szemszögéből az, hogy ezeket az információkat kliens- vagy szerver-oldalon kezeljük.
Napjaink Webes fejlesztései ma már kivétel nélkül az utóbbira helyezik a hangsúlyt, vagyis az adatokat egy interfészen keresztül bekérik, és az egész adatfolyamot eljuttatják a szerverhez, pontosabban a szerveren futó alkalmazáshoz – .NET rendszerben természetesen egy ASP.NET alkalmazáshoz – és ott feldolgozva generálnak valamilyen tartalmat dinamikusan. A lényeg pedig a dinamizmus, hiszen elképzelhetetlen lenne például egy több ezres felhasználói tábort kiszolgáló banki rendszer esetében, hogy az egyes felhasználók adatait tartalmazó statikus oldaltömeg ott heverjen a szerver egy mappájában. Sokkal egyszerűbb a beérkezett adathalmazt kiértékelni, és a felhasználó-specifikus adatokat egy jól kitalált megjelenítő szerkezetben publikálni.
Ennek módja, hogy a lényegi műveletekhez az ASP.NET Webes, szerver-oldali vizuális kontroljait használjuk fel, melyek a szerver oldali, tetszőleges .NET nyelven megírt forráskódból elérhetőek, és amelyekből a futtatórendszer képes a kimenetbe HTML kódot generálni. Így a kliens-oldalon egyszerűen nem is határozható meg, hogy a kimenetet milyen típusú alkalmazás generálta.
Az űrlapok esetében a következő dolog történik. Az ASP.NET alkalmazás – ahogy láttuk a sorozat múlt heti részében – címezhető .ASPX lapokat tartalmaz, melyekre vizuális kontrolokat helyezhetünk el. A szöveget megjelenítéséhez általában Label típusú kontrolokat, a szövegek bevitelére pedig TextBox kontrolokat. Ezekkel már megoldható, hogy a szükséges információkat bekérjük.
Annak érdekében, hogy a kitöltött mezők el is jussanak a szerver-oldalra, szükségünk van egy úgynevezett PostBack eseményre, vagyis arra a műveletre, mely a megcímzett kiszolgálóhoz eljuttatja az adathalmazt. A vizuális kontrolok többsége, de a Button kontrol kifejezetten alkalmas arra, hogy egy ilyen eseményt kiváltson. Erre úgy képes, hogy – hasonlóan a Windows-os alkalmazások Form-jának Button objektumához – eseménykezelő rendelhető a kontrol egyes felhasználói beavatkozásaihoz, vagy property-változásaihoz.
Az űrlapok elküldése esetében a Button kontrol OnClick eseményéhez rendelhetünk egy kezelőmetódust. Amennyiben a keretrendszerben egyet kattintunk szerkesztési időben a kontrolon, a keretrendszer legenerálja a kezelőmetódus kódjának vázát, akár csak egy Windows-os projekt esetében.
A kezelőmetódusok a szerver-oldalon futnak, és mint ilyenek alkalmasak arra, hogy a rendszer tetszőleges objektumait elérhessük belőlük. Ezekben a metódusokban van arra módunk, hogy az egyes vizuális kontrolokban a felhasználó által megadott információkat kiolvashassuk. Ezt a TextBox kontrolok Text property-jének lekérdezésével tehetjük meg. A kapott adatokkal így tetszőleges dolgot tehetünk, adatbázisba írhatjuk őket, vagy – mint jelen esetben tesszük – generálhatunk velük egy másik HTML oldalt.
A fent említett művelet PostBack eseményének bekövetkezése után a lap újra betöltődik, így annak érdekében, hogy hibás adatok bekérése után a lapot az addig megadott adatokkal újra megjeleníthessük, el kell tárolnunk az egyes kontrolok értékeit.
A mellékelt példába három mező kitöltése után meg kell nyomni a Küldés gombot, melynek eredményeképpen az adatok eljuthatnak a szerver-oldalra. A Button kontrol eseménykezelője a következőképpen deklarálható:
this.Button1.Click += new System.EventHandler(this.Button1_Click);
A metódusban nem teszünk mást, mint ellenőrizzük, hogy a mezők ki vannak-e töltve. Amennyiben igen, akkor a kapott adatokat átadjuk a WebForm2.aspx lapnak, vagyis átnavigáljuk a felhasználót egy másik lapra, ahol adatait megjelenítjük.
if (TextBox1.Text != "" && TextBox2.Text != "" && TextBox3.Text != "")
{
Response.Redirect("WebForm2.aspx?name=" + TextBox1.Text + "&address=" + TextBox2.Text + "&hobby=" + TextBox3.Text);
...
}
Az átirányítás a HttpResponse objektum segítségével történik, melyet a Page objektum Response property-jén keresztül érhetünk el. A WebForm-ok alapobjektumai ugyanis a Page objektumok.
Amennyiben nem töltöttük ki a beviteli mezőket, akkor a gomb lenyomása nem okoz PostBack-et, vagyis az adatok nem jutnak el a szerver-oldalra.
A WebForm-ok betöltésekor egy HTTP kérés érkezik az alkalmazáshoz, melynek adatai a HttpRequest objektumon keresztül elérhetőek el. Az erre adott válasz, vagyis a generált kimenet adatfolyam a HttpResponse objektum segítségével juttatható el a kliens-oldalra, a felhasználó böngészőjéhez. Az űrlap elküldése egy webes kérés, melyre a Response objektum Redirect metódusával küldhetjük el a választ, vagyis a WebForm2.aspx lap HTML kódját, a speciális adatokkal.
A lap kódját úgy küldjük el, mintha arra egy Webes kérés érkezett volna. A HTTP kérés pedig tartalmazza a felhasználó specifikus adatokat, méghozzá az URL-ben. A lap URL-je ugyanis itt kiegészül néhány karakterlánccal, melyek az űrlapon megadott adatokat tartalmazzák. A lap nevétől ezeket a konstansokat a „?” jel választja el, míg a konstansokat egymástól a „&” jel.
A három konstans tehát a NAME, az ADDRESS, és a HOBBY. A WebForm2.aspx lap betöltődésekor ezek a konstansok a Response objektum QuerySring kollekciójából vehetők ki.
Label2.Text = Request.QueryString["name"];
Label3.Text = Request.QueryString["address"];
Label4.Text = Request.QueryString["hobby"];
A konstansok értékeit most egyszerűen megjelenítjük három címkén.
Az ASP.NET alkalmazásokban – ahogy tesszük most példánkban is – nem kell szakítanunk a HTML nyelvvel. A szerver-oldali kontrolokat ugyanis a HTML elemek segítségével jelenítjük meg a megfelelő pozícióban, és a megfelelő stílusban. A HTML nyelv segítségével egészíthetjük ki a kontrolok funkcionalitását. A példánkban egy <TABLE> HTML elem celláiba ágyaztuk a beviteli kontrolokat, mert így könnyebb volt igazítanunk őket.
<table style="FONT-SIZE: 10pt; Z-INDEX: 101; LEFT: 13px; FONT-FAMILY: Verdana; POSITION: absolute; TOP: 84px">
<tr>
<td>
<asp:Label id="Label2" runat="server">Név</asp:Label>
</td>
<td>
<asp:TextBox id="TextBox1" runat="server" Width="276px"></asp:TextBox>
</td>
</tr>
...
</table>
Az ASP.NET rendszer felhasználásával tehát nem kell elfelejtenünk eddigi ismereteinket, sokkal inkább ötvöznünk kell ezeket a technológiákat, egy jobb alkalmazás elkészítése érdekében.