Az első ASP.NET lapunk

Térjünk vissza az mi HelloWebMatix.asp lapunkhoz és egészítsük ki úgy, ahogy az alábbi ábrán láthatjuk

3. ábra - Az első weblapunk3. ábra - Az első weblapunk

A hatodik sorban egy String típusú változót deklaráltunk és láttuk el egy értékkel. A 16. sorba egy egyszerű szöveget írtunk be. A 11. sorban egy soron belüli kódtömböt (in-line code block) látunk. A soron belüli kódtömbök csak a lap HTML részében fordulhatnak elő és a <% és %> elválasztó jelek között kell legyenek. A soron belüli kódtömbök VB.NET kódrészletet tartalmaznak. Példánk esetében ez a kódrészlet egyszerű: a = jel azt eredményezi, hogy az utána következő kifejezés vagy változó értéke megjelenik azon a helyen, ahol a kódtömb elhelyezkedik a lapon belül. Erről kicsit később többet árulok el.

Lapunk nagyon egyszerű, de azért mégis nézzük meg! Ehhez egy kevés előkészületre lesz szükség.

Annak ellenére, hogy a WebMatrix telepítésével egy webszervert is a gépünkre telepítettünk, használjuk inkább a rendszerünk lokális webszerverét, az MS IIS-t. Kezdetleges webalkalmazásunkat definiálnunk kell a szerveren, ezért szükségünk van egy eszközre, amivel a szerveren levő vagy definiálandó alkalmazásokat kezelhetjük. A rendszerünk tartalmaz egy ilyen eszközt: a Microsoft Management Console-ról van szó (MMC).

Az MMC-t az mmc utasítással indíthatjuk el egy DOS konzolból vagy a Run ablakból. Indítsuk el az MMC-t és a File menüből válasszuk ki az Add/Remove Sanp-in... menüpontot! A megjelenő Add/Remove Snap-in ablakon kattintsunk a Standalone fülre és ezután az Add... gombra. Most megjelenik az Add Standalone Snap-in ablak a rendelkezésünkre álló kezelőkkel vagy intézőkkel (snap = something easily managed). Válasszuk ki a listából az Internet Information Services (IIS) szolgáltatást, majd kattintsunk az Add, utána pedig a Close gombra!

4. ábra - Kiválasztjuk az IIS szolgáltatást4. ábra - Kiválasztjuk az IIS szolgáltatást

Az IIS megjelent az Add/Remove Snap-in ablak listájában. Az OK gombra kattintva ezt az ablakot is zárjuk és ezzel létre is jött a testreszabott eszköz, amire szükségünk van: a lokális webszerverünk konzolja vagy intézője, röviden az IIS konzol.

5. ábra - Az IIS konzol5. ábra - Az IIS konzol

Természetesen, a most létrehozott eszközt meg szeretnénk őrizni, hogy ne keljen minden alkalomkor újból előállítani. Ezért kattintsunk a File menün belül a Save as... menüpontra és mentsük el a konzolt WebMatrix konzol.msc névvel, például a képernyőnkre. Innen bármikor előhívhatjuk.

Most minden készen áll arra, hogy a webalkalmazásunkat az IIS szerverünkön definiáljuk. Az IIS konzol struktúrája nagyon hasonlít az Windows Explorer-re: a konzol baloldalán egy fa struktúra szemlélteti a rendelkezésünkre álló elemeket és ezek hierarchiáját. A hierarchia legfelső szintjén áll a Console Root csomópont, alatta az IIS-nek megfelelő csomópont, majd a gépünket, azaz a lokális szerverünket jelképező csomópont és ez alatt a Web Sites csomópont, mely a szerveren definiált webhelyeket tartalmazza. Ha nem egy Windows szerveren dolgozunk, akkor csak egy webhely lehet a webszerverünkön, melynek az alapértelmezett neve Default Web Site. A Default Web Site alatt helyezkednek el a webalkalmazások, melyeknek virtuális mappák felelnek meg. Ilyen például az IISHelp virtuális mappa. A mi alkalmazásunk részére is egy ilyen virtuális mappát kell létrehoznunk.

Kattintsunk az egér jobb gombjával a Default Web Site csomópontra és válasszuk ki a megjelenő menüből a New, majd a Virtual Directory menüpontot. Ezzel elindítjuk a Virtual Directory Creation varázslót (wizard). Kattintsunk a Next gombra, majd a következő ablakon adjuk be a létrehozandó virtuális mappa nevét: webmatrix. A következő ablakon adjuk meg a virtuális mappának megfelelő törzsmappa elérési útját. Ez az általunk létrehozott webmatrix mappa a merevlemezünkről. A következő ablakon, a már kijelölt jelölőnégyzetek mellett (Read és Run scripts (such as ASP)), jelöljük ki a Browse feliratú jelölőnégyzetet is. Végül a varázsló utolsó ablakán nyomjuk meg a Finish gombot. Ezzel a IIS konzolban megjelent a webmatrix virtuális mappa. Egy utolsó lépés, hogy leegyszerűsítsük a konzol által megjelenített hierarchiát: kattintsunk az egér jobb gombjával a webmatrix virtuális mappára és válasszuk ki a New Windows from Here menüpontot. Az IIS konzol, amit most joggal nevezhetünk webmatrix konzolnak, csak a mi webalkalmazásunkat mutatja. Láthatjuk az alkalmazáshoz tartozó 02 és utils mappákat és a 02 mappába elhelyezett HelloWebMatrix.aspx ASP.NET lapot.

6. ábra - Az alkalmazásunkra leredukált IIS konzol6. ábra - Az alkalmazásunkra leredukált IIS konzol

Ha egy kicsit körülnézünk a konzol adta lehetőségek között, akkor rájövünk, hogy innen is lehívhatjuk az ASP.NET lapunkat. Mi viszont ezt sokszor fogjuk csinálni, azért kényelmesebb a webalkalmazást a WebMatrix-ból indítani. Ezért térjünk vissza a fejlesztési eszközünkhöz!

Ha a WebMatrix szerkesztőjében a HalloWebMatrix.aspx állomány nincs kinyitva, akkor nyissuk ki. Kattintsunk a WebMatrix-ban Start gombra (jobbra mutató kis háromszög a menü első sorában) vagy nyomjuk meg a billentyűzetünkön a F5 billentyűt. Mivelhogy ezt legelőször tesszük, a WebMatrix még nem tudja, melyik webalkalmazást kívánjuk elindítani. Ezért megjeleníti a Start Web Application ablakot, ahol megadhatjuk a szükséges információt.

7. ábra - Elindítjuk az ASP.NET alkalmazásunkat7. ábra - Elindítjuk az ASP.NET alkalmazásunkat

Az Application Directory szövegmezőben megjelenik az aktív állomány mappájának az elérési útja. Ezt kívánja a WebMatrix a webalkalmazásunk törzsmappájának venni. Esetünkben ennek az elérési útnak a két utolsó eleme webmatrix\02. Emlékezzünk vissza, hogy mi a webmatix mappát definiáltuk alkalmazásunk törzsmappájának. Ezért töröljük az Application Directory szövegmezőből az ott megjelent elérési út utolsó elemét, a 02-t.

Az ablak alsó felében két választógomb van. Az elsővel kiválaszthatjuk, hogy a WebMatrixszal integrált webszerveren hajtsuk végre az alkalmazást, a másikkal az IIS webszervert választhatjuk ki. Mi mindig az utóbbi esetet választjuk. Az Application Name szövegmezőbe írjuk be a webalkalmazásunk nevét, azaz a webszerveren definiált virtuális mappa nevét: webmatrix. Végül jelöljük ki az Enable Directory Browsing jelölőnégyzetet és nyomjuk meg a Start gombot. A WebMatrix elindítja a böngészőnket és letölti a HelloWebMatrix.aspx lapot a szerverről.

Az ASP.NET lapok működéséről

Amit látunk, nem egy világmegrendítő valami, de hát ez az első ASP.NET lapunk. Ezen az egyszerű lapon is észrevehetünk egy-két érdekes dolgot. Nézzük meg a böngészőnkben megjelent lap forráskódját! Kattintsunk a böngésző View|Source menüpontjára, hogy a lap forráskódját a Notepad-be megtekinthessük. Az eredményt a következő ábrán láthatjuk.

8. ábra - A letöltött ASP.NET lap forráskódja8. ábra - A letöltött ASP.NET lap forráskódja

Egyszerűsége ellenére ez a pár kódsor sok mindenről tanúskodik. Legelőször vegyük észre, hogy egy "vegytiszta" HTML kódról van szó. Eltűnt a <script> elem és a soron belüli kódtömb, helyettük viszont a <title> elem megkapta a neki szánt tartalmat. A <form> elem attribútumai közül eltűnt a HTML-idegen runat attribútum és megjelentek a name, method, action és id HTML (pontosabban XHTML) attribútumok.

Itt álljunk meg egy pillanatra! A HelloWebMatrix.aspx állományban szereplő <form runat="server"> elemről már tudjuk, hogy nem egy HTML elem. Egy HTML lapban a runat attribútumnak nincs semmi szerepe. Ki is próbálhatjuk: másoljuk a HelloWebMatrix.aspx állomány teljes tartalmát egy HelloWebMatrix.html állományba és hívjuk le a böngészőbe. Ha összehasonlítjuk az ASP.NET és a HTML lapok megjelenését a böngészőben, nem sok különbséget észlelünk, de annál fontosabbat: a HTML lap címsávjában ezt láthatjuk: <%= strTitle%>. Nézzük meg a megjelenített HTML lap forráskódját! Pontosan ugyanazt látjuk, amit a HelloWebMatrix.html állományba írtunk. A HTML-idegen elemekkel a böngésző nem tud semmit elkezdeni. A böngésző csak HTML-ül tud és amikor általa ismeretlen nyelven írt "szövegre" bukkan, amit nem tud "elolvasni", egyszerűen kiugorja ezeket, vagy HTML-ül "olvassa" el.

Térjünk vissza a letöltött HelloWebMatrix.aspx lap kódjára és hasonlítsuk össze a lap eredeti kódjával. Vegyük még egyszer szemügyre a <form runat="server"> elemet, mely nagyon hasonlít egy HTML elemre, de mégse az, hanem egy ASP.NET HTML vezérlő. Ezt most közelebbről fogjuk megvizsgálni.

Kétféle ASP.NET vezérlőt ismerünk: a HTML vezérlőket és a web vezérlőket. Az ASP.NET web vezérlőiről később lesz szó. ASP.NET HTML vezérlőket úgy hozhatunk létre, hogy egy HTML elemet ellátjuk a runat="server" attribútummal. Máris kínálkozik a kérdés: mire jók ezek a HTML vezérlők?

A szerver nem "foglalkozik" a HTML elemekkel. Ezeket nem kell HTML-re "lefordítania" és változatlanul elküldi a böngészőnek "elolvasásra" (értelmezésre). Azért, hogy a szerver egy HTML elemmel "foglalkozzon", fel kell hívjuk a figyelmét az szóban forgó HTML elemre. Ezt úgy érjük el, hogy megtoldjuk a HTML elem attribútumait a runat="server" attribútummal. A szerver ilyenkor "felfigyel" a különleges HTML elemre és létrehoz a memóriájában egy megfelelő objektumot: a szóban forgó HTML elemnek megfelelő HTML vezérlőt. Ebben az folyamatban a szerver esetleg más attribútumokkal is ellátja a HTML vezérlőt, melyek lehetővé teszik, hogy programkódból is hozzáférhessünk a HTML vezérlőhöz, ami egy sima HTML elem esetében, teljesen lehetetlen. Ez a HTML vezérlők légyege: szerveroldali elérhetőség. Példányuk a szerveren egy tökéletes objektum, az objektumorientált (OO) programozás szabályai szerint.

Legelőször is, ha mi ezt nem tettük meg a kódunkban, a szerver ellátja a HTML vezérlőt egy azonosítóval, melynek HTML lecsapódása az id attribútum. A példánkban szereplő <form runat="server"> HTML vezérlő az id= "_ctl0" azonosítót kapta. Ha mi adjuk meg az azonosítót, a szerver készségesen elfogadja (próbáljuk ki!). Ezen kívül a szerver még egy sor XHTML attribútummal látta el a <form runat="server"> HTML vezérlőnek megfelelő HTML <form> átiratát, amit a böngészőnek küldött. Ezek közül a legfontosabb számunkra a method="post" és az action="HelloWebMatrix.aspx" attribútumok. Ezek az attribútumok ismerősek kell legyenek: ha a lapot egy bizonyos esemény (event) kapcsán visszaküldjük a szerverre, akkor a <form> elemben foglalt információt POST metódussal küldjük vissza a szerverre és ugyanazt a lapot töltjük le. Ez idáig semmi újat nem jelent. Sőt, úgy tűnik mintha inkább egy korlátozásról lenne szó: egy hagyományos <form> elem esetében ugyanis a method és action attribútumok más értékeket is kaphatnak, itt viszont az ASP.NET mindig a POST metódust használja és az action attribútum értéke mindig az eredeti lap, amelyik a <form> elemet tartalmazza. A látszat azonban csal! A HTML és az ASP.NET lapok közötti különbséggel a következő cikkben foglalkozunk.

Egy utolsó megjegyzés a letöltött HelloWebMatrix.aspx lap forráskódjával kapcsolatban. A szerver egy egészen új HTML elemmel bővítette a lapunkat. Az <input type="hidden" /> rejtett elemről van szó. Mos csak annyit jegyezzünk meg, hogy a name attribútumúnak az értéke "__VIEWSTATE" és hogy nincs azonosítója, azaz id attribútuma. Ezzel a rejtett <input> HTML elemmel is a következő cikkkben foglalkozunk.

Előkészületek a példaalkalmazások kódjának megjelenítésére

Befejezésként készítsünk elő egy segítőeszközt! A következő példák elmagyarázásánál sokat segítene, ha online kéznél lenne a példák forráskódja is. Mint láttuk, ASP.NET állományok esetében a böngésző ebben inkább gátol, mint segít. Beszúrhatnám a kódot a cikk szövegébe is, de az egy hosszadalmas és unalmas dolog lenne. Ezért arra gondoltam, hogy stílusszerűen egy ASP.NET állományra bízom a dolgot: a viewsource.aspx állományra. Ennek az állománynak a felhasználását fogom most elmagyarázni. Forráskódja megtekinthető, bőven elláttam megjegyzésékkel és egyébként is, úgy mint a példák, letölthető. Éppen ezért csak a használatát fogom leírni, nem a működését.

Hozzunk létre a webmatrix\utils mappába három állományt: foot.inc, style.inc és viewsource.aspx. Ha az előző mondatban az első két állomány nevére kattintunk, akkor megnézhetjük a böngészővel. A foot.inc állomány (kiterjesztése ellenére) egy egyszerű HTML állomány. Ha rákattintunk a lapon levő [Forráskód] kapcsolatra, megnézhetjük a forráskódját (amit természetesen a böngészőből indított Notepad-del is elérhetünk). A style.inc egy stíluslap, ami a böngésző részére egy sima szöveges állomány, ezért megmutatja a tartalmát. Végül a viewsource.aspx állomány egy ASP.NET állomány, mely úgy van megírva, hogy vagy megmutatja saját tartalmát (ha közvetlenül töltjük le) vagy megmutatja annak az állománynak a tartalmát, ahonnak lehívjuk. Azért, hogy tartalmát megnézhessük, nem kapcsolhatom ide erre a lapra, hanem be kell adjuk a bongészőbe az URL-jét: www.hatvany-online.net/webmatrix/utils/viewsource.aspx

Azért, hogy a viewsource.aspx állomány működését lássuk, módosítsuk a HelloWebMatrix.aspx állományt úgy, ahogy itt látjuk és mentsük el HelloWebMatrix1.aspx névvel:

9. ábra - A HelloWebMatrix1.aspx állomány9. ábra - A HelloWebMatrix1.aspx állomány

Itt megnézhetjük a módosított lapot. Ha rákattintunk a lapon levő [Forráskód] kapcsolatra, megnézhetjük a forráskódját (ami ezúttal a böngészőből indított Notepad-del nem fog sikerülni). A forrásdódot megjelenítő lapon két kapcsolatot találunk: a [Megjelenítés] link az eredeti laphoz visszavisz, a [Nyomtatni] link segítségével kinyontathatjuk a megjelenített forráskódot.

A cikkhez tartozó állományokat innen lehet letölteni.