Honlapépítés A XXI. Században v1.1

Honlappts a XXI.
szazadban
A Microsoft ASP.NET Web Pages egy ingyenes webfejleszt technolgia, melyet gy terveztek meg, hogy a vilg legjobb fejleszti lmnyt nyjtsa webfejlesztk szmra. Ezen knyv segtsgvel megtanulhatjuk az internet s a Web mkdst, tovbb kpesek lesznk XXI. szzadi, korszer dinamikus webes tartalmak ksztsre az ASP.NET s a Razor szintaxis segtsgvel.
Megjegyzs: Ez a dokumentum a Microsoft WebMatrix and ASP.NET Web Pages Beta 3 kiadshoz kszlt. A termk a fejleszts sorn nmileg vltozhat. A legjabb informcikrt ltogassunk el a http://www.asp.net/webmatrix oldalra. A Microsoftos fejleszti kzssg http://webmatrix.devportal.hu WebMatrix-os oldalt az albbi linken talljuk:
Weblapfejlesztssel, WebMatrix-szal, Razor nyelvvel kapcsolatos szakami krdseinket az albbi frumon tehetjk fel: http://devportal.hu/forums/348.aspx A Facebookon a WebMatrix magyarorszgi rajong tborhoz val csatlakozssal rteslhetnk a legjabb hrekrl! WebMatrix Magyarorszg
Ez a knyv elektronikusan, kizrlag vltozatlan formban szabadon terjeszthet. A knyv rszeinek brmilyen cl felhasznlshoz a kiad elzetes rsbeli engedlye szksges. A knyv fordtsa s lektorlsa sorn a kiad a legnagyobb gondossggal jrt el. Az esetleges hibkat s szrevteleket a jos@jos.hu cmen szvesen fogadjuk. Az 1. fejezet Balssy Gyrgy munkja Internet: http://www.msdnkk.hu/Users/balassy Szerkesztette s szakmailag lektorlta: Szab Vince Anyanyelvi lektor: Dr. Bonhardtn Hoffman Ildik Kiad: Jedlik Oktatsi Stdi Kft. 1212 Budapest, Tncsics Mihly u. 92. Internet: http://www.jos.hu E-mail: jos@jos.hu Felels kiad: a Jedlik Oktatsi Stdi Kft. gyvezetje
Tartalomjegyzk
1. fejezet Balssy Gyrgy: Bevezets a web programozsba ................................................6 Az internet mkdse ..................................................................................................................... 6
Gptl gpig ............................................................................................................................................... 6 Szmok a gpeknek .................................................................................................................................... 8 Nevek az embereknek ................................................................................................................................ 9 Programok egyms kztt ........................................................................................................................ 12
A HyperText Transfer Protocol ...................................................................................................... 13

Fbb jellemzk ......................................................................................................................................... 13 A krs s a vlasz .................................................................................................................................... 14 Biztonsgos kommunikci ...................................................................................................................... 20 llapotkezels .......................................................................................................................................... 22
A HyperText Markup Language ..................................................................................................... 24

A HTML nyelv elemei ................................................................................................................................ 24 Fontosabb HTML elemek.......................................................................................................................... 25 Validls ................................................................................................................................................... 37
Cascading Style Sheets stluslapok ................................................................................................ 38

Attribtumok ............................................................................................................................................ 39 Elhelyezs ................................................................................................................................................. 40 A CSS szelektorok ..................................................................................................................................... 41 Span s div ................................................................................................................................................ 44 rkls ..................................................................................................................................................... 44 Doboz modell ........................................................................................................................................... 45 Oldalelrendezsek .................................................................................................................................... 46 Tbb stluslap ........................................................................................................................................... 48 Ellenrzs ................................................................................................................................................. 50
2.
fejezet Bevezets a WebMatrixba s az ASP.NET weboldalakba ...................................... 52 Mi az a WebMatrix? ...................................................................................................................... 52 Webmatrix teleptse .................................................................................................................... 52 Els lpsek a WebMatrixszal ....................................................................................................... 53 Weboldal ltrehozsa.................................................................................................................... 55 Helperek teleptse a Package Manager segtsgvel .................................................................. 57 ASP.NET weboldal kdok hasznlata ............................................................................................ 59 ASP.NET Razor oldalak programozsa Visual Studiban ............................................................... 62
ASP.NET oldalak ltrehozsa s tesztelse sajt szvegszerkesztvel ..................................................... 63
3.
fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal ................................. 65 8 f programozsi tipp .................................................................................................................. 65
HTML kdols ........................................................................................................................................... 66
HTTP GET s POST metdusok s az IsPost tulajdonsg .......................................................................... 70
Egyszer pldakdok ..................................................................................................................... 70 Programozsi alapfogalmak .......................................................................................................... 72

Osztlyok s pldnyok ............................................................................................................................ 73
Nyelv s szintaxis ........................................................................................................................... 74 Tovbbi forrsok............................................................................................................................ 91 4. fejezet Egysges megjelens kialaktsa ......................................................................... 92 Tbbszr hasznlhat tartalomblokkok ltrehozsa .................................................................... 92 Egysges ltvny kialaktsa layout oldalakkal.............................................................................. 95 Tbbfle tartalommal rendelkez layout oldalak tervezse......................................................... 98 Opcionlis tartalomszakaszok ltrehozsa.................................................................................. 101 Adat kldse layout oldalakra ..................................................................................................... 102 Egyszer helper ltrehozsa s hasznlata ................................................................................. 106 5. fejezet Munka az rlapokkal ........................................................................................ 109 Egy egyszer HTML rlap ltrehozsa ......................................................................................... 109 Felhasznl ltal bevitt rtk olvassa az rlapbl ..................................................................... 110
HTML kdols a megjelensrt s biztonsgrt ..................................................................................... 112
Adatbevitel ellenrzse ............................................................................................................... 112 Az rlap rtkeinek visszalltsa az elklds utn ..................................................................... 114 Tovbbi forrsok angolul ............................................................................................................. 115 6. fejezet Mveletek adatokkal ........................................................................................ 116 Bevezets az adatbzisokba ........................................................................................................ 116
Relcis adatbzisok .............................................................................................................................. 116
Adatbzis ltrehozsa.................................................................................................................. 117 Adatok hozzadsa az adatbzishoz ........................................................................................... 118 Adatok megjelenttse az Adatbzisbl ...................................................................................... 119
Strukturlt lekrdez nyelv (SQL) ........................................................................................................... 120
Adatok beillesztse egy adatbzisba ........................................................................................... 121 Adatok frisstse egy Adatbzisban ............................................................................................. 124 Adatok trlse egy Adatbzisbl ................................................................................................. 129
Csatlakozs egy adatbzishoz ................................................................................................................. 131
Tovbbi forrs angolul ................................................................................................................. 132 7. fejezet Adatok megjelentse gridekben....................................................................... 133 A WebGrid Helper ....................................................................................................................... 133 Adatok megjelentse a WebGrid Helper hasznlatval ............................................................. 133
Oszlopok kivlasztsa s formzsa megjelentshez................................................................. 134 A teljes grid formzsa ................................................................................................................ 137 Adatok lapozsa .......................................................................................................................... 138 Tovbbi forrsok.......................................................................................................................... 139 8. fejezet Adatok megjelentse diagramokon .................................................................. 140 A Chart helper ............................................................................................................................. 140 A diagram elemei......................................................................................................................... 141 Diagram ksztse az adatokbl .................................................................................................. 141
lltsok s teljesen kvalifiklt nevek hasznlata ................................................................................... 146
Diagramok megjelentse weboldalakon .................................................................................... 147 Diagram formzsa...................................................................................................................... 148 Diagram mentse ........................................................................................................................ 150 Tovbbi forrs angolul ................................................................................................................. 155 9. fejezet Munka fjlokkal ............................................................................................... 156 Szvegfjl ltrehozsa s adatok belersa ................................................................................. 156 Adat hozzadsa meglv fjlhoz ............................................................................................... 159 Adatok olvassa s megjelentse fjlbl.................................................................................... 160
Adatok megjelentse Microsoft Excel vesszvel elvlasztott fjlbl .................................................... 162
Fjlok trlse ............................................................................................................................... 162 Fjlok feltltse a felhasznlk ltal ........................................................................................... 163 Tbb fjl feltltse a felhasznlk ltal ....................................................................................... 166 Tovbbi forrs angolul ................................................................................................................. 168 10. fejezet Munka kpekkel ............................................................................................... 169 Kp dinamikus hozzadsa egy weboldalhoz.............................................................................. 169 Kp feltltse .............................................................................................................................. 171
A GUID-okrl .......................................................................................................................................... 174
Kp tmretezse........................................................................................................................ 174 Kp forgatsa s tkrzse ......................................................................................................... 175 Vzjel hozzadsa kphez ............................................................................................................ 177 Kp hasznlata vzjelknt ............................................................................................................ 178 11. fejezet Mveletek videkkal ........................................................................................ 180 Videolejtsz kivlasztsa ........................................................................................................... 180
MIME tpusok ......................................................................................................................................... 181
Flash videk (.swf) lejtszsa ...................................................................................................... 181
Media Player (.wmv) videk lejtszsa ....................................................................................... 183 Silverlight videk lejtszsa ......................................................................................................... 184 Tovbbi forrsok angolul ............................................................................................................. 185 12. fejezet E-mail hozzadsa a webhelynkhz................................................................. 186 E-mail zenet kldse a webhelyrl............................................................................................ 186 Fjl kldse e-mail hasznlatval ................................................................................................ 189 Tovbbi forrs angolul ................................................................................................................. 191 13. fejezet Keres hozzadsa a webhelynkhz................................................................ 192 Keress a webhelynkn ............................................................................................................. 192 Tovbbi forrsok angolul ............................................................................................................. 195 14. fejezet Kzssgi hlzatok hozzadsa a weboldalunkhoz .......................................... 196 Weboldalunk linkelse kzssgi oldalakon ............................................................................... 196 Twitter hrfolyam hozzadsa ..................................................................................................... 197 Gravatar kp megjelentse ........................................................................................................ 199 Xbox Gamer krtya megjelentse .............................................................................................. 200 Facebook Like gomb megjelentse ......................................................................................... 201 15. fejezet Forgalomanalzis .............................................................................................. 204 Ltogatsok informciinak kvetse (Analzis) ......................................................................... 204 16. fejezet Gyorsttrazs a webhely teljestmnynek nvelshez ................................. 207 Cache-els a weboldal sebessgnek nvelshez .................................................................... 207 17. fejezet Biztonsgi elemek s felhasznli fikok hozzadsa......................................... 210 Bevezets a felhasznli fikokba ............................................................................................... 210 Weboldal ltrehozsa regisztrcis s bejelentkez oldalakkal ................................................. 210 Csak felhasznlk szmra elrhet oldal ltrehozsa ............................................................... 214 Csoportok biztonsgi belltsai (szerepek) ................................................................................ 215 Jelszt megvltoztat oldal ltrehozsa ..................................................................................... 217 j jelsz ltrehozsnak lehetsge ........................................................................................... 219 Automatizlt programok csatlakozsnak megakadlyozsa ..................................................... 222 18. fejezet Bevezets a hibakeressbe ............................................................................... 225 A ServerInfo helper hasznlata a szerverinformcik megjelentshez ................................... 225 Oldal rtkek kijelzse kifejezsek begyazsval ...................................................................... 226 Objektumrtkek kijelzse az ObjectInfo helper hasznlatval ................................................. 229
Hibakeres eszkzk hasznlata ................................................................................................. 231 Internet Explorer Developer Tools .............................................................................................. 231 Firebug ......................................................................................................................................... 232 Tovbbi forrsok angolul ............................................................................................................. 233 19. fejezet A Site-Wide viselkeds testreszabsa ................................................................ 234 Weboldal indulsakor lefut kd hozzadsa............................................................................. 234 Kd futtatsa egy mappa fjljainak elindulsa eltt s lefutsa utn......................................... 237 Knnyebben olvashat s kereshet URL-ek ksztse .............................................................. 242 Fggelk ASP.NET API referencia ......................................................................................... 245 Osztlyok ..................................................................................................................................... 245 Adatok ......................................................................................................................................... 250 Helperek ...................................................................................................................................... 251 Fggelk ASP.NET Weboldalak Visual Basickel ..................................................................... 256 A 8 legjobb programozsi tipp s trkk ....................................................................................... 256
HTML kdols ......................................................................................................................................... 256
Egyszer pldakdok ................................................................................................................... 261 A Visual Basic programozsi nyelv s szintaxisa.......................................................................... 263 Tovbbi forrsok angolul ............................................................................................................. 279 Fggelk ASP.NET weboldalak programozsa Visual Studiban ............................................ 280 Mirt vlasszuk a Visual Studit? ................................................................................................ 280 Az ASP.NETRazorTools teleptse ................................................................................................ 280 Az ASP.NET Razor Tools hasznlata Visual Studioval .................................................................. 281 Az IntelliSense hasznlata ........................................................................................................... 282 A Debugger hasznlata ................................................................................................................ 283 Nyilatkozat............................................................................................................................ 286
1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Az internet mkdse
Avagy honnan jn a vezetk s mi trtnik benne? Az ASP.NET WebPages technolgia s a Microsoft WebMatrix segtsgvel nagyon egyszeren s hatkonyan kszthetnk j weboldalakat, interaktv webhelyeket. A hatkonysg s az egyszersg egyik kulcsa, hogy a rendszer szmos terhet levesz a vllunkrl, azaz bizonyos problmkat nem neknk kell megoldanunk, hanem kszen kapjuk a mkd megoldst. Nha azonban elfordul, hogy a legjobb igyekezetnk ellenre valami mgsem mkdik, biztos mindannyian tallkoztunk mr a nincs internet, a nem jn be az oldal vagy pp a nem tltdik le a fjl jelensgekkel. Ezek mindennapos problmk egy webfejleszt letben, melyek megoldshoz nlklzhetetlen, hogy rtsk, hogyan is mkdik az internet. Ennek a fejezetnek a clja, hogy megismerjk, mi trtnik a httrben, mikzben egy weboldalt nznk a bngszben. A fejezet vgre egyrtelm lesz, hogy a gpnkbl kilg kbel hova fut a vilgban, s hogyan tallja meg a bngsz a webszervert a bert webcm alapjn. Gptl gpig Ahhoz, hogy az nll szmtgpeket vilghlba tudjuk szervezni, termszetesen valahogy fizikailag is ssze kell tudnunk kapcsolni ket. Az internet nlklzhetetlensgnek ksznheten a mai szmtgpeknek ma mr szinte ktelez tartozkuk az erre a clra szolgl hlzati krtya (ms nven hlzati csatol, angolul network interface card, vagy egyszeren csak NIC). Ha megnzzk a gpnk csatlakozit, valami ehhez hasonlt biztosan tallunk rajta, rla van sz:
1. bra - A hlzati csatlakoz a szmtgp htoldaln
A hlzati krtya rgebben a nevhez hen valban nll, krtya formj, opcionlis rsze volt a szmtgpnek, ma mr a szmtgp nlklzhetetlen rszv vlt. St, ha hordozhat szmtgpnk van, akkor valsznleg egy vezetk nlkli hlzati krtya (wireless network card) is tallhat a gpben. Mivel ehhez nem csatlakozik kbel, legfeljebb annyit fogunk szrevenni belle, hogy sok gpen egy kln kapcsolval szablyozhatjuk, hogy mikor legyen be- vagy kikapcsolva a vezetk nlkli hlzati krtynk, ezzel is cskkentve a laptopunk fogyasztst. A hlzati krtyba kell bedugnunk a hlzati kbelt. A csatlakozja (hivatalosan RJ45-knt szoktk feltntetni) nagyon hasonl a telefonkbel csatlakozjhoz (amit pontosan RJ11-nek hvnak), csak egy kicsit szlesebb, ezrt ha nem erltetjk, nem tudjuk rossz helyre dugni. Ha ilyen kbelre van szksgnk, a boltban UTP patch kbel nven vsrolhatjuk meg, klnbz hosszsgokban.
2. bra - Hlzati kbel
Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
MEGJEGYZS: Ebben a knyvben a hlzat sz alatt mindenhol a szmtgp-hlzatokat rtjk, ezt mg vletlenl se keverjk ssze a 230V-os elektromos hlzattal! A hlzati kbeleket (network cable s nem power cable) s eszkzket gyengeram jelek tovbbtsra terveztk, s rossz nven veszik, ha a fali konnektorba erszakoljuk ket.
A nagy krds persze az, hogy a gpnkbl indul kbel hova megy tovbb. Az internet olyan risi hlzat, hogy nem lehet minden egyes szmtgpet egyetlen kzponti csomponthoz csatlakoztatni, ezrt inkbb hlzatok hlzataknt valstottk meg. Egy-egy kisebb alhlzatban (local area network *LAN+, vagy egyszeren csak subnet) a gpeket legtbbszr csillag alakzatban rendezik el, azaz van egy helyi kzponti eszkz, amelyhez az sszes krnyken lv szmtgp csatlakozik, s amely kpes a gpek kztt zajl forgalomban rendet tartani. Erre a feladatra egy aktv hlzati eszkz, a hlzati kapcsol (amit magyarul is inkbb switchnek szoktunk hvni) szolgl.
3. bra - Egy 48 portos switch
Egy-egy switchre 8, 16, 24, 48 szmtgpet lehet csatlakoztatni attl fggen, hogy hny csatlakozja (azaz portja) van, a switch pedig a csillag kzepn gondoskodik arrl, hogy a gpek megtalljk egymst.
4. bra - Ngy szmtgp sszektse egy switch segtsgvel
De mi van akkor, ha egy szmtgp egy olyan szmtgppel kvn kommuniklni, amelyik nem erre a switchre csatlakozik? Itt egy jabb hlzati eszkzre van szksg, ami okosabb, mint a switch s kpes egy switchre csatlakoztatott sszes gpet a vilghl tbbi rszhez kapcsolni. Ez az eszkz az tvonalvlaszt (router vagy default gateway).
5. bra - Kt alhlzat sszekapcsolsa routerrel
Ha csak egyetlen szmtgppel szeretnnk az internetre csatlakozni, akkor elfordulhat, hogy otthon sem switchcsel, sem routerrel nem fogunk tallkozni. Ha azonban tbb gpet szeretnnk egymssal s a vilghlval sszektni, akkor vsrolhatunk olyan eszkzt, amely egyben kpes elltni a router s a switch funkciit is. Szmok a gpeknek Miutn megrtettk, hogy az interneten lv gpek fizikailag hogyan kapcsoldnak egymshoz, ejtsnk pr szt arrl, hogy ezeken a kbeleken hogyan vndorolnak az adatok! Fizikai cm A gpek egymst szmokkal azonostjk, azaz minden egyes gpnek van egy nll cme. A hlzati krtyk gyrti minden egyes krtynak adnak egy egyedi cmet, n. Media Access Control addresst, rviden MAC-addresst, vagy ms nven fizikai cmet. Ez egy 6 bjtos cm, egyedi a vilgon, az n gpemben lv hlzati krty pldul ez: 00-1C-7E-1D-B8-B5.
Mivel ezt a cmet a rendszergazdk s az internet szolgltatk belltsnl s hibakeressnl gyakran szoktk krni, ezrt a laptopok gyrti gyakran rrjk egy matricra a laptop aljn. Ha laptopod van, fordtsd meg a gpet, htha a tidre is rrtk! Akr rrtk, akr nem, a gp meg is tudja mondani magrl, hogy mi az fizikai cme. Indtsd el a Start menbl a Parancssort (Command Prompt), s rd be, hogy ipconfig /all! Az elszalad hossz listban a Fizikai cm (Physical Address) sorban tallod a gped egyedi cmt.
IP cm A fizikai cmmel tbb problma is van, melyek kzl a legfontosabb, hogy semmilyen jelentst nem hordoz. Br kiderl belle, hogy pontosan melyik cg gyrtotta az adott hlzati krtyt, de azt pldul mr nem tudja, hogy fldrajzilag hol tallhat a gp, vagy hogy melyek a szomszdos gpek. Ugorjunk teht egy magasabb absztrakcis szintre, s a fizikai cm helyett hasznljunk egy msik cmet, ami tbb informcit hordoz, ez pedig az IP cm (Internet Protocol address). Az IP cm egy 4 bjtbl ll cm, aminek a 4 elemt (angolul octetjt) ponttal elvlasztva szoktuk lerni. Ez pldul egy nagyon bartsgos IP cm: 152.66.188.13.
Kvncsi vagy a sajtodra? Indtsd el a Start menbl a Parancssort (Command Prompt), s rd be, hogy ipconfig, majd ss Entert! Az IPv4 cm (IPv4 Address) sorban tallod a gped ltal hasznlt IP cmet. Ha pedig ki szeretnd prblni, hogy a gped lt-e egy msik gpet a cme alapjn, akkor szintn Parancssorban rd be a ping parancsot, majd utna a msik gp IP cmt!
Az IP cmek szintn egyediek a vilgon, az internet szolgltatk gondoskodnak rla, hogy a krlbell 4 millird cm kzl mindenkinek olyan jusson, amit ppen ms nem hasznl. Mivel az internet szolgltatk fldrajzilag helyhez ktttek (pldul egy adott orszgban lv gyfeleknek nyjtanak szolgltatst), ezrt az IP cmekbl az is kiderl, hogy az IP cmet hasznl szmtgp hol tallhat. Az IP cm mellett mg szksg van az n. alhlzati maszk (subnet mask) belltsra is. Az alhlzati maszk segtsgvel egy szmtgp, amely adatot akar kldeni egy msik szmtgp szmra a hlzaton, meg tudja llaptani, hogy a cmzettel azonos alhlzaton tartzkodik-e. Ez azrt fontos, mert ha egy alhlzaton vannak, akkor kzvetlenl kommuniklhatnak egymssal, ha viszont nem, akkor a felad a router fel kldi a csomagot, a router pedig gondoskodik a csomag tovbbtsrl
ms alhlzatok fel. Innen a router msik neve, hvjk ugyanis alaprtelmezett tjrnak (default gateway) is. Teht legalbb hrom cmet kell belltanunk minden szmtgpen, ha azt szeretnnk, hogy a szmtgp adatokat tudjon kldeni s fogadni az interneten: Az IP cmet, ami minden szmtgp esetn egyedi cm. Az alhlzati maszkot, amivel a felad eldntheti, hogy a cmzett vele azonos alhlzaton van-e. Az alaprtelmezett tjr cmt, ami a routernek az adott alhlzatra kapcsold hlzati krtyjnak cme.
TIPP: Parancssorban kiadva az ipconfig parancsot, az IPv4 cm (IPv4 Address), az Alhlzati Maszk (Subnet Mask) s az Alaprtelmezett tjr (Default Gateway) sorokban lthat a hrom cm. Windows 7 alatt a Hlzati Kapcsolat Rszletek ablakban tekinthetjk t knyelmesen az sszes belltst.
A krds mr csak az, hogy honnan tudjuk, pontosan milyen rtkeket kell belltanunk? A knyelem rdekben a legtbb esetben nem szksges ennek a hrom rtknek a kzi belltsa, a szmtgp tudja ket magtl. Ez valjban azt jelenti, hogy a hlzaton zemel egy n. DHCP kiszolgl (Dynamic Host Configuration Protocol), amelytl a szmtgp kpes lekrdezni a szksges belltsokat. Ezrt fordulhat el, hogy a legtbb nyilvnos hlzaton elg rcsatlakoznunk a hlzatra, nem kell a belltsokkal bajldnunk.
J TUDNI: Webfejlesztknt rdemes tudnunk, hogy van egy specilis IP cm, ami mindig a sajt gpnket jelli, ez pedig a 127.0.0.1. Teht ha egy bngsz cmsorba berjuk, hogy http://127.0.0.1, akkor mindig az ugyanazon a gpen lv webkiszolglhoz fogunk csatlakozni, gy akr hlzati kapcsolat nlkl is kszthetnk weboldalakat.
sszefoglalva eddigi tudsunkat, ha a mi gpnknek helyesen belltjuk a hrom cm paramtert s ismerjk a cmzett gp IP cmt, akkor a kt gp tud egymssal kommuniklni. Ez a gyakorlatban valban gy mkdik, m ha hs-vr felhasznl is l a gp eltt, akkor a cmek hasznlata nem tl praktikus. A gpek jl mkdnek szmokkal, de az emberek inkbb neveket tudnak megjegyezni. A kvetkez fejezetben annak jrunk utna, hogyan lesznek a nevekbl szmok. Nevek az embereknek Mikor kedvenc bngsznk cmsorba berunk egy webcmet, pldul azt, hogy http://devportal.hu, akkor azt a bngsznek le kell fordtania egy IP cmre, hiszen az elz fejezetben lttuk, hogy a gpeknek cmekre van szksgk a sikeres kommunikcihoz. Ezt a folyamatot nvfeloldsnak hvjuk, s a Domain Name System (DNS) szolgltats a felels rte. DNS A DNS szolgltats ktflekppen tud mkdni. Dinamikus nvfelolds esetn az elz fejezetben bemutatott hrom cmen kvl a gpnk automatikusan megkapja a DHCP kiszolgltl a DNS kiszolgl cmt is. A DNS kiszolgl egy olyan szolgltats a hlzaton, amelynek a hlzat gpei krseket kldenek, s visszaadja a bekldtt nvhez tartoz IP cmet (vagy akr fordtva, az IP cmhez tartoz nevet). Egyetlen DNS kiszolgl nem tudja a vilghlra kapcsolt sszes szmtgp nevt s IP cmt, ezrt ha nem tud vlaszolni a krdsre, akkor tovbbtja azt ms DNS kiszolglknak. Ha egy rendszergazda j gpet kt a hlzatra, s azt szeretn, hogy azt ms gpek nv szerint is megtalljk, akkor be kell jegyeznie az j gpet a helyi DNS kiszolgl adatbzisba. Mivel a DNS kiszolglk kapcsoldnak egymshoz, egy tvoli gprl rkez nvfeloldsi krs elbbHonlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
utbb el fog jutni az adott alhlzatrt felels DNS kiszolglhoz, aki gy kpes lesz megadni a nvhez tartoz IP cmet. Ennek a mdszernek az az elnye, hogy semmit nem kell konfigurlni az egyes szmtgpeken, a kzponti szolgltats belltsval az sszes kliens szmtgp el fogja tudni rni az adatokat.
TIPP: Parancssorban kiadva az ipconfig /all parancsot, a DNS kiszolglk sorokban lthatak a szmtgp szmra belltott nvszerverek. Ezeket is be lehet lltani kzzel, de tbbnyire a DHCP szervertl kapja meg a gpnk a DNS szerverek IP cmeit is. Tbb nvszervert is bellthatunk, de rdemes tudni, hogy elszr mindig az elsdleges DNS szerverhez fordul a gpnk, a msodlagoshoz csak akkor, ha az elsdleges nem vlaszol.
Hosts fjl Egy msik lehetsges megolds a statikus nvfelolds. Statikus nvfelolds esetn nincs kzponti szolgltats, hanem minden egyes gpen nyilvntartjuk az elrni kvnt gpek nv-IP cm prosait. Ez az adatbzis alaprtelmezs szerint a C:\Windows\System32\drivers\etc\hosts fjlban tallhat, ami egy egyszer szveges llomny, brmilyen szvegszerkesztvel, pldul Jegyzettmbbel is szerkeszthet. Ennek a megoldsnak az elnye, hogy egy IP cmhez tetszleges nevet vehetnk fel, s azzal a nvvel hivatkozhatunk az adott gpre mg akkor is, ha az nincs bejegyezve a kzponti DNS szolgltatsba. A gyakorlatban a statikus nvfelolds nem nllan, hanem a dinamikus nvfeloldssal egytt szokott mkdni, teht a kt mdszer kiegszti egymst. Webfejleszts kzben nagyon j szolglatot tehet a hosts fjl. Elfordulhat, hogy a gpnkn fut webszerveren tbb webhelyet is szeretnnk futtatni, ekkor a rendszer pldul a nv alapjn klnbztetheti meg ket. A hosts fjlban felvehetnk tbb nevet, s mindegyik mutathat a 127.0.0.1 IP cmre. Egy msik gyakori eset, amikor praktikus a hosts fjl hasznlata: ha mg nincs bejegyezve a hivatalos tartomny (domain) nv egy internet szolgltatnl, de az alkalmazsnak mindenkpp szksge van r. Ebben az esetben ideiglenesen felvehetjk a nevet a sajt hosts fjlunkba, ksbb pedig amikor megtrtnik a hivatalos nvbejegyzs, akkor knnyen trlhetjk onnan.
TIPP: A nvfelolds mkdsnek tesztelsre kivlan hasznlhat az nslookup parancs. Nyissunk egy Parancssort, s rjuk be, hogy nslookup devportal.hu, majd ssnk Entert. A vlaszban ltni fogjuk a nvfeloldst vgz kiszolgl nevt s a devportal.hu IP cmt is. Az nslookup fordtva is tud mkdni, azaz ha egy nv helyett IP cmet runk be utna, akkor megmondja a cmhez tartoz nevet (feltve, hogy az adott tartomny rendszergazdja nem csak a nvhez tartoz IP cmet regisztrlta, hanem az IP cmhez tartoz nevet is).
Dinamikus DNS A fenti megoldsok mind azt felttelezik, hogy az IP cm, amire a nvbejegyzs hivatkozik, lland. Csakhogy a mai vilgban az internet szolgltatk tbbsge az otthoni felhasznlk szmra dinamikus IP cmet ad, azaz bizonyos idkznknt az IP cm megvltozik. Mivel a DNS szerverek errl a cmvltozsrl automatikusan nem rteslnek, ezrt az ilyen dinamikus IP cmre mutat nvbejegyzsek nagyon hamar elavulnnak. Erre a problmra jelent megoldst a dinamikus DNS szolgltats (nem sszekeverend a dinamikus nvfeloldssal). A dinamikus DNS mkdse megegyezik a hagyomnyos DNS szerverek mkdsvel, azzal az egyetlen klnbsggel, hogy ha egy szmtgp IP cme vltozik, akkor a szmtgp rtesti a DNS szervert, s automatikusan frissti a sajt nvbejegyzshez tartoz IP cmet. Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba 10
A vilgon szmos ingyenes dinamikus DNS szolgltat van, a legismertebbek a DynDns.com s a no-ip.com, de ltezik tbb magyar szolgltat is, pldul a myip.hu s a dynpro.hu. Ezekrl a weboldalakrl a regisztrci utn egy kliens programot kell letltennk, amely a gpnkn folyamatosan figyeli a hlzati kapcsolatot, s ha IP cm vltozst tapasztal, automatikusan frissti a DNS szerveren a nvbejegyzst. gy megoldhat, hogy pldul az otthoni gpnket, amely akr naponta tbbszr j IP cmet kap, nv szerint el tudjuk rni tvolrl.
DNS gyorsttr Gyakori eset, hogy egy fut programnak egyms utn tbbszr van szksge egy adott nvhez tartoz IP cmre. Mivel a nvfelolds idignyes folyamat (el kell mennie a krsnek a hlzaton keresztl a nvszerverig s vissza), ezrt a vlaszok egy n. gyorsttrba (cache) kerlnek. Ez azt jelenti, hogy a szmtgp egy ideig megjegyzi a DNS szervertl kapott vlaszt, s ez alatt az id alatt ha egy program ismt erre kvncsi, akkor nem fordul a nvkiszolglhoz, hanem fejbl azonnal nyomja a vlaszt.
A vlaszt annyi idre gyorsttrazhatja a kliens, amennyi idre a DNS kiszolgl engedi. A vlaszban teht nemcsak a krdezett nvhez tartoz IP cmet kldi vissza a nvszerver, hanem egy n. time-to-live (TTL) rtket is, ami azt jelzi, hogy mennyi ideig rizheti a kliens a gyorsttrban a vlaszt.
A DNS gyorsttr hasznos szolgltats, a webfejlesztknl azonban nha okoz egy kis galibt. Kpzeljk el az albbi esetet: 1. Fejlesztknt ksztnk egy weboldalt, s kitesszk egy szerverre. 2. Berjuk a kedvenc Internet Explorer bngsznk cmsorba a szerver nevt, de keseren tapasztaljuk, hogy nem jn be semmi . 3. Kiprbljuk gy, hogy a szerverre nv helyett IP cmmel hivatkozunk, s gy minden mkdik. Hmm. 4. Nmi gondolkods utn a homlokunkra csapunk, hogy hopp, elfelejtettk regisztrlni a nevet, ezrt irny a hosts fjl vagy a DNS kiszolgl, ahova felvesszk a szerver nevhez tartoz IP cmet. 5. Visszatrnk a bngsznkhz, frisstjk az oldalt, de az eredmny ugyanaz. Fehr oldal szp nagy hibazenettel: A kiszolgl nem tallhat. Hol a hiba? Ebbe a szituciba elbb-utbb minden webfejleszt belekeveredik, ezrt rdemes ismernnk a megoldst: a problmt a DNS gyorsttr okozza. Mikor a 2. lpsben a bngszben megprbljuk megnyitni az oldalt, a gpnk a DNS kiszolglhoz fordul, s megksrli elvgezni a nvfeloldst. Mivel azonban a DNS kiszolgln nincs bejegyezve a webkiszolgl neve, ezrt a DNS kiszolgl azt fogja mondani, hogy ilyen nev szerver nincs. Ez a vlasz legyen brmennyire hasznlhatatlan ugyangy bekerl a DNS gyorsttrba, mint a sikeres vlaszok.
JEGYEZZK MEG: a negatv vlasz is vlasz.
Ezek utn hiba frisstjk a nvszerver adatbzist, attl mg nem fog kikerlni a bejegyzs a szmtgp DNS gyorsttrbl. Ha nem akarjuk kivrni, amg a gyorsttrbl magtl kikerl ez a
11
bejegyzs ez akr tbb nap mlva is lehet , akkor parancssorbl kiadhatjuk az ipconfig /flushdns parancsot, ami elvgzi az opercis rendszer DNS gyorsttrnak trlst. m ettl mg valsznleg nem fog megjavulni minden, ugyanis a mai bngszk ltalban maguk is tartalmaznak egy DNS gyorsttrat. A bngszk gyorsttrt legegyszerbben a bngsz jraindtsval trlhetjk. Ha ezt a fenti 5. lps eltt megtesszk, akkor valsznleg mr sikeresen meg fog jelenni az j oldalunk. Programok egyms kztt Az elz fejezetben lttuk, hogy kt gp hogyan tallja meg egymst IP cm s nv alapjn. De mi van akkor, ha egy gpen tbb program is tallhat? Tegyk fel, hogy van egy szerver gpnk, amin fut egy webkiszolgl s egy FTP kiszolgl, illetve van egy ide kapcsold kliens szmtgpnk, amin fut egy webbngsz s egy FTP kliens program is. A kt gpen kt-kt program zenget egymsnak, hogy lehet, hogy mgsem keverednek ssze az zenetek, hogyan tall be egy zenet egy gpen bell a megfelel alkalmazshoz? Ezt a problmt oldjk meg az n. portok. A port nem ms, mint egy egsz szm 0 s 65535 kztt, ami a gpen bell azonost egy alkalmazst. Amikor egy program egy msik gpen fut alkalmazsnak kvn zenetet kldeni, akkor nemcsak a clgp IP cmt kell megadnia, hanem a clgpen fut alkalmazs port szmt is, gy lesz egyrtelm, hogy pontosan melyik programnak kell feldolgoznia az zenetet. Vannak nagyon gyakran hasznlt alkalmazsok mint pldul a webkiszolgl , melyeknek a port szmt az egyszersg rdekben szabvnyostottk. Pldul a webkiszolgl mindig a 80-as porton figyelve vrja a bejv HTTP krseket, a titkostott HTTPS krseket pedig a 443-as porton. Ezrt aztn nem is szksges ezeket a port szmokat kirnunk, a bngsz automatikusan tudni fogja, hogy ha a webcm http://-vel kezddik, akkor a kiszolgl 80-as portjra, ha https://-sel, akkor pedig a kiszolgl 443-as portjra kell kldenie a krst.
A portoknak nagy szerepk van a tzfalak belltsban, melyekkel korltozhatjuk egy szmtgp kimen s bejv forgalmt. Pldul ha a webszervernk el betesznk egy tzfalat, de azon nem nyitjuk ki a 80-as portot, akkor a webszerver nem lesz elrhet.
Elfordulhat, hogy egy alkalmazsbl tbb pldnyt is szeretnnk futtatni, vagy pldul egy webszervert zemeltetnk a gpnkn, amely tbb webhelynek ad otthont. Brmennyire is igaz, hogy a http:// protokollhoz a szabvny szerint a 80-as port tartozik, kt program vagy kt webhely nem osztozhat ugyanazon a porton, hiszen ha egy bngsz cmsorba bernnk, hogy http://localhost/default.cshtml, akkor a webkiszolgl nem tudn eldnteni, hogy melyik webhelyre gondolunk. Ilyenkor knytelenek vagyunk a kt webhelyet ms-ms porton zemeltetni, s a nem alaprtelmezett portszmokat a krsben kirni. Az egyik webhely kezdlapja lehet a http://localhost/index.php, a msik pedig pldul a http://localhost:8080/default.cshtml.
Mikor egy WebMatrixban kszl webhelyet futtatunk, akkor a WebMatrix elindtja az IIS Expresst, ami egy kifejezetten fejleszti clra hasznlhat webkiszolgl. Az IIS Express kpes egyszerre tbb webhelyet is futtatni, mgpedig gy, hogy mindegyiket nll port szmon teszi elrhetv. Figyeljk meg a bngsz cmsort, s ltni fogjuk a port szmot. A Windows beptett Internet Information Services webkiszolgljval (ami az elbb emltett IIS Express nagy testvre) gy is zemeltethetnk tbb webhelyet, hogy mindegyik a HTTP protokollhoz tartoz 80-as porton figyel. Ez akkor lehetsges, ha a webhelyek nll nven rhetek el, az egyik pldul a http://forum.example.com, a msik pedig a
12
http://aruhaz.example.net cmen. Ilyenkor a webkiszolgl a nv alapjn kpes eldnteni, hogy a bejv krs pontosan melyik webhelyre vonatkozik.
A HyperText Transfer Protocol

Avagy mi trtnik a bngsz sznfalai mgtt? A HyperText Transfer Protocol, azaz a HTTP a webbngszk ltal a weboldalak megjelentsre hasznlt informcitviteli protokoll a vilghln, ezrt amikor egy webalkalmazst ksztnk, akkor a legfontosabb elvrs a kdunkkal szemben, hogy HTTP protokollon keresztl lehessen vele kommuniklni. Br a legtbb szerver oldali programozsi krnyezet (pl. ASP.NET) jrszt elfedi a HTTP protokoll rszleteit, mindenkpp rdemes megismerkednnk a protokoll mkdsvel, mert ez a tuds sokat segthet a programjaink megtervezsben s a fejleszts sorn a hibakeressben is. A HTTP aktulis verzija az 1.1 verzi, melyet pontosan az 1999 jniusban kiadott (nem egy mai darab, de mkdik ), 176 oldalas RFC 2616 specifikl. Ebben a fejezetben csak a legfontosabb rszeket rintjk, akit tovbbi rszletek rdekelnek, az eredeti dokumentumbl tjkozdhat. A fejezet vgre pontosan ismerni fogjuk a HTTP protokoll mkdst, ami nagy segtsg lesz a weboldalak hibinak feltrsban. Fbb jellemzk A HTTP protokollal kt szoftver beszlget egymssal, egy webes kliens s egy webszerver. A webes kliens (angolul client, amit nha gyflnek is fordtanak) legtbbszr a felhasznl ltal elindtott webbngsz program (webbrowser), de lehet brmilyen ms szoftver is, ami rti a HTTP protokollt (pldul egy RSS olvas program), ppen ezrt ltalnossgban a klienseket sszefoglal nven user agentnek szoktk nevezni. A prbeszd msik rsztvevje a webszerver (ms nven webkiszolgl), amely a felhasznl ltal elrni kvnt tartalmat vagy szolgltatst biztostja. A HTTP legfontosabb jellemzje, hogy egy n. krs-vlasz protokoll a kliens s a szerver kztt. Ez azt jelenti, hogy a kommunikcit mindig (rtsd MINDIG!) a kliens kezdemnyezi azzal, hogy elkld egy HTTP krst (request) a szervernek, aki erre egy HTTP vlasszal (response) vlaszol. Fontos, hogy a webszerver nagyon jlnevelt, ha nem krdezik, nem beszl. A kommunikci sorn teht mindig krs-vlasz prok kvetik egymst, valahogy gy:
6. bra - A HTTP krsek s vlaszok
Ebbl az kvetkezik, hogy a HTTP protokoll nem biztost lehetsget arra, hogy a szerveren megjelen j informci azonnal megjelenjen a felhasznl bngszjben. A szerver nem kpes arra, hogy elkldjn egy olyan j informcit a kliensnek, amit a kliens nem krt. Ilyen teht nincs:
13
rdekes mdon felhasznlknt mgis nagyon hasonlval tallkozunk, amikor a Facebookot alkalmazva azt ltjuk, hogy a msok ltal rt bejegyzsek maguktl megjelennek az zenfalunkon, vagy amikor a GMail arra figyelmeztet, hogy j levelnk rkezett. Ez csak gy mkdhet, hogy mikzben mi a weboldalt nzegetjk, a bngsz a httrben (a felhasznl szmra nem lthat mdon) bizonyos idnknt (pldul percenknt) krseket kld a szervernek. Ezekre a krsekre a legtbb esetben a szerver azt fogja vlaszolni, hogy nincs semmi jdonsg, amikor azonban a szerveren j informci keletkezik (pldul rkezik egy levelnk), akkor a kvetkez krs alkalmval errl a kliens is rteslni is fog. Ezt hvjk a szerver pollozsnak, a httrben trtn kommunikcit pedig Ajaxnak.
A HTTP msik jellemzje, hogy n. llapotmentes protokoll. llapotnak tekinthet az, hogy egy webruhzban hny termk van ppen a kosarunkban, vagy hogy egy kzssgi oldalra ppen be vagyunk-e jelentkezve. Ezek mind pillanatnyi llapotok, s mikzben hasznljuk a weboldalt, ezek az llapotok megvltozhatnak (pldul az elbb mg res volt a kosarunk, most mr van benne egy karalb). Mivel a HTTP llapotmentes, ezrt ezek az llapotok s azoknak a vltozsa protokoll szinten nem jelenik meg sehol, kr is keresni. Ahogy ksbb ltni fogjuk, ezt a problmt mshogy kell megoldanunk. A krs s a vlasz Miutn gy megbeszltk a HTTP legfontosabb jellemzit, ssunk egy kicsit mlyebbre, s nzzk meg, hogy pontosan mi trtnik, mikzben a kliens s a szerver beszlget egymssal! A webfejlesztk szerszmosldjnak egyik legfontosabb eleme a sajt (de tnyleg!) HTTP forgalmunk elemzsre szolgl eszkz. Ezeket a szoftvereket sszefoglal nven HTTP debugging proxynak hvjk, s gy mkdnek, hogy bellnak a bngsz s a hlzat kz, s a rajtuk tmen forgalmat megmutatjk. Az egyik legknnyebben hasznlhat ilyen eszkz a Fiddler, de nagyon elterjedt a Firefox bngszbe bepl Firebug kiegszts is. Btran teleptsk fel ket, majd nzzk meg pldul a www.example.com oldalt kedvenc bngsznkben, s figyeljk meg, mit mutatnak! Mg egyszerbb s knyelmesebb a helyzet, ha Internet Explorer 9-et hasznlunk, ott ugyanis a beptett Fejleszti Eszkztr (Developer Toolbar, F12) Hlzat (Network) fln azonnal ltszik a HTTP krs s a vlasz minden rszlete, nincs szksg kls eszkz teleptsre: Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
14
7. bra Az Internet Explorer 9 Developer Toolbar Network fln a forgalom minden rszlete lthat
Mikzben elltogatunk egy oldalra, a bngsz az albbihoz hasonl HTTP krst kldi el a szervernek:
GET http://www.example.com/ HTTP/1.1 Accept: */* Accept-Language: en-US,hu-HU;q=0.5 User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; MS-RTC LM 8) Accept-Encoding: gzip, deflate Connection: Keep-Alive Host: www.example.com Pragma: no-cache
Ahogy lthat, a HTTP egy szveges protokoll, gy a kommunikci nagyon knnyen rtelmezhet. A krs els rsze az n. metdus (method), amivel azt mondjuk meg, hogy milyen mveletet szeretnnk elvgezni. Ez leggyakrabban a letltshez hasznlt GET, vagy a feltltshez hasznlt POST. A metdust kveti a krt erforrs webcme (itt: http://www.example.com/), majd a protokoll verziszma, ami szinte mindig HTTP/1.1. A kvetkez sorok n. fejlc sorok, amellyel a bngsz tovbbi informcikat juttathat el a szerverhez. A fenti rszletben pldul egy Accept-Language fejlcben tudatja a bngsz a szerverrel, hogy elssorban angol (en-US), msodsorban magyar (hu-HU) nyelv tartalmat szeretne kapni. A fejlc sorokat egy res sor kveti, majd utna kvetkezhet a krs trzse (body). Ilyet fknt HTTP POST krsekben lehet ltni (a fenti pldban teht nem), pldul egy rlapba bert szvegek a krsnek ebben a rszben jutnak el a szerverhez. A szerver erre a krsre egy HTTP vlaszt kld vissza:
HTTP/1.1 200 OK
15
Date: Fri, 01 Oct 2010 10:42:07 GMT Server: Apache Last-Modified: Fri, 30 Jul 2010 15:30:18 GMT ETag: "573c1-254-48c9c87349680" Accept-Ranges: bytes Content-Length: 596 Connection: close Content-Type: text/html; charset=UTF-8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> (mg folytatdik)
A vlasz els sora a sttusz sor, amiben a szerver ltal tmogatott verziszm ( HTTP/1.1) utn egy sttusz kd (200) s egy angol nyelv indokls (OK) tallhat. A krshez hasonlan ezutn a fejlc, majd egy res sor utn a vlasz trzse kvetkezik. A vlasz trzsben kapjuk vissza a krt weboldalt, kpet vagy videt, amit le akartunk tlteni. Ezek teht a krs s a vlasz ltalnos formi, a kvetkez fejezetekben egy kicsit rszletesebben is megnzzk, hogy az egyes rszek mire jk, milyen rtkekkel tallkozhatunk ott. GET s POST Az elz fejezetben lttuk, hogy a HTTP krs legels eleme a metdus, amivel meghatrozzuk, hogy milyen mveletet akarunk elvgezni a szerveren. A leggyakoribb metdus a GET, amivel egy oldalt, kpet, fjlt, vagy ltalnos nven erforrst tudunk lekrni a szerverrl. Egy msik nagyon gyakori metdus a POST, amivel feltlteni tudunk; pldul egy rlap kitltse utn megadott rtkek legtbbszr HTTP POST krssel utaznak fel a szerverre a krs trzsben.
Egy webalkalmazs ksztse sorn nha dnts el kerlnk, hogy egy adott funkcit egy GET vagy egy POST mvelettel valstsunk meg. Pldul egy webes levelez oldalon a nem kvnt levelek trlse elviekben brmelyik mdon megoldhat, melyiket vlasszuk? Hasonl problma jn akkor is el, amikor a felhasznli felletet tervezzk. A Trls funkcit egy hiperlink vagy egy gomb (button) valstsa meg? A hiperlink ugyanis alaprtelmezs szerint egy HTTP GET, mg a gomb egy HTTP POST krst kld a szervernek. Ha technikailag brmelyiket vlaszthatjuk, akkor clszer aszerint dnteni, hogy a GET krsek ltalban biztonsgosak, azaz nem vltoztatjk meg a szerver llapott, s tbbszri vgrehajtsuk ugyanazt az eredmnyt vltja ki, mint az egyszeri. Pldul egy kerti trpe katalgust tbbszr is letlthetek a szerverrl, vagy a Bingben is lefuttathatom ugyanazt a keresst tbbszr, nem fj senkinek. Adatok lehvsra teht kivl a GET. Ha azonban adatok felkldsrl vagy llapotvltozsrl van sz, amik radsul tbbszr vgrehajtva mst eredmnyeznek, akkor inkbb hasznljunk POST-ot. Egy levl letrlse a Hotmailen megvltoztatja az llapotot, egy banki tutals pedig tbbszr megismtelve a kvnt mrtknl jobban apasztja a bankszmlnkat, ezrt ezekben az esetekben inkbb POST javasolt.
Egy webes rlap (pldul krdv) kitltse sorn tbb HTTP krsre van szksg, amik kztt elfordulnak GET s POST krsek is:
16
8. bra - Egy webes rlap kitltsnek folyamata
A krt erforrs cme A krs msodik rsze a krt erforrs (oldal, kp, dokumentum stb.) pontos cme. A szabvny szerint itt egy egysges erforrs azonostt, n. URI-t (Uniform Resource Identifier) kell megadnunk, ami formailag gy nz ki:
[sma]:[sma fgg rsz]
Elszr teht meg kell adnunk egy smt, majd a kettspont utn azt a szveget, amit a sma ismeretben tudunk rtelmezni. Lssunk r pldt! Ez itt vajon micsoda?
4633714
Csak egy szp nagy szm, de akrhogy nzem, nem derl ki belle, hogy mit kell kezdeni vele, s taln mr az sem emlkszik r, aki iderta. Lehet egy hangya cipmrete, de akr hrom fej kelkposzta ra is (persze ms mrtkegysgben). De ha gy rom le, mindjrt rtelmet nyer:
tel:4633714
A tel sma egyrtelmen megmondja, hogy ez egy telefonszm, errl pedig tudjuk, hogy mit kell csinlnunk vele: be kell nyomkodnunk a telefonunkba. A kettspont eltti rsz teht megmondja, hogy mire j a kettspont utni rsz. Ezenkvl az URI mg egy dolgot r el, mgpedig azt, hogy ez egyrtelmen azonostson valamit. A fenti telefonszm egyrtelmen azonost egy kszlket, ami csrgni fog, ha felhvjuk. Itt egy msik URI plda, ahol a smbl az derl ki, hogy ez egy e-mail cm, azaz egyrtelmen azonost egy postaldt:
mailto:gipszjakab@example.com
Ez alapjn mr rtjk az albbi URI-t is, ami azt mondja, hogy ez egy a HTTP protokoll szmra rtelmezhet cm:
http://balassygyorgy.wordpress.com/2010/05/21/facebook-like-button-xss
Csakhogy ennek a cmnek van mg egy rdekessge is: nemcsak hogy egyedileg azonost egy weboldalt, de azt is meghatrozza, hogy hol tallhat ez az oldal az interneten. Konkrtan a balassygyorgy.wordpress.com szerveren a 2010/05/21 mappban, s gy hvjk, hogy facebook-likebutton-xss. Ezrt tudja megtallni a bngsz, mert tudja, hogy a gigantikus mret interneten hol kell keresnie. Mivel itt nemcsak azonostsrl, hanem a dokumentum lelhelynek meghatrozsrl is sz van, ezrt az URI elnevezs helyett gyakran hasznljuk az URL, azaz Uniform Resource Locator elnevezst. Az URL ltalnos formja a kvetkez:
protocol://username:password@FQDN:port/path/file? variable1=value1&variable2=value2#name
17
Ell van teht a protokoll, amit opcionlisan egy felhasznlnv s egy jelsz kvethet, amit egy kukac (@) karakter vlaszt el az FQDN-tl. Az FQDN a Fully Qualified Domain Name, azaz a tartomny teljes neve, pldul balassygyorgy.wordpress.com. Az FQDN utn jhet a port szma a szerveren, amit tbbnyire elhagyunk, mert a bngsz tudja, hogy a HTTP protokoll a 80-as portra, a HTTPS protokoll a 443-as portra kapcsoldik. A portszm utn jhetnek mappk s almappk (path), majd vgl a lekrni kvnt fjl neve. A krdjel (?) utn kvetkez n. query stringben tovbbi informcikat adhatunk t a szervernek, amit a szerver tetszleges mdon dolgozhat fel. Ezek a paramterek nv=rtk formban, egymstl & jellel elvlasztva adhatk meg. Az URL legvgn a # karakter utn egy nv kvetkezhet, ami az oldalon belli hivatkozsra utalhat.
Egy webalkalmazs ksztse sorn gyakran elfordul feladat, hogy egy URL-t kell darabjaira szednnk vagy ppen kt URL egyezsgt kell vizsglnunk. Fontos tudni, hogy br a fenti az URL-ek szp ltalnos formja van, sajnos egy URL lehet teljesen lczott is, mert a szabvny megengedi a karakterek kdolst. Pldul ez is egy rvnyes webcm, a bngsz megrti, ha berjuk neki: %77%77%77%2E%67%6F%6F%67%6C%65%2E%63%6F%6D ppen ezrt egy URL feldolgozst manulisan, hagyomnyos string mveletekkel megoldani nagyon kockzatos, mert knnyen hibzhatunk. A legtbb webalkalmazs programozi keretrendszer erre biztost beptett lehetsget, pldul ASP.NET platformon a System.Uri osztly segtsgvel egy csapsra megkaphatjuk az URL brmely rszt.
Az URL-ek kt nagyobb csoportba sorolhatak. Az abszolt URL-ek nem fggnek semmitl, nmagukban egyrtelmen meghatrozzk a krt erforrst. Pldul ez a cm mindig az MSDN Kompetencia Kzpont honlapjn tallhat ASP.NET Indul Kszlet oldalra mutat:
http://www.msdnkk.hu/Pages/InduloKeszlet/ASPNET/Default.aspx
Ez a kezdlap (a Default.aspx oldal) tartalmaz egy kpet, amire a hivatkozs gy trtnik:

ASPNET_Indulo_Keszlet.jpg
Ez a webcm nmagban nem teljes, csak a kezdlap cmhez viszonytva rtelmezhet, ezrt ezt relatv URL-nek hvjuk. Az ebbl kpzett abszolt URL ez lesz:
http://www.msdnkk.hu/Pages/InduloKeszlet/ASPNET/ASPNET_Indulo_Keszlet.jpg
Ha ppen egy msik oldalon lennnk, s ott hivatkoznnk ugyanezzel a relatv URL-lel erre a kpre, akkor mr valsznleg rossz lenne a hivatkozs, s a szerver nem talln meg a fjlt. Rszben ezrt szoktak n. gykr relatv cmeket (root-relative URL) hasznlni. Pldul az albbi egy ilyen URL:
/Storage/balassy/Avatar/avatar.jpg
A sima relatv URL-ekhez kpest az a nagy klnbsg, hogy egy / jellel kezddik, ez jelzi a bngsznek, hogy ne az aktulis oldal mappjhoz csapja hozz ezt a cmet, hanem a szerver neve utn illessze oda. Ez lesz az abszolt cm:
http://www.msdnkk.hu/Storage/balassy/Avatar/avatar.jpg
ltalban jobban szeretnk relatv cmeket hasznlni, mert rvidebbek, olvashatbbak, s ha a weboldalunkat msik szerverre kltztetjk, akkor nem kell a szerver nevt mindenhol trnunk. Fejlc mezk Ahogy a HTTP krs s vlasz ltalnos formjnak bemutatsnl lttuk, a bngsz s a szerver is kld fejlc sorokat, melyekben a krt tartalmon kvl tovbbi informcik utaznak. A fejlc sorok Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba 18
formailag azonosak, elszr az adott fejlc mez neve ll, amit egy kettspont utn a hozz tartoz rtk kvet. A kvetkezkben a teljessg ignye nlkl lljon itt nhny rdekesebb fejlc mez jelentse! Az Accept fejlccel a kliens hatrozhatja meg, hogy milyen tpus fjlt szeretne letlteni, amire mintegy vlaszul a szerver a Content-Type fejlcben adja meg, hogy milyen tpus a fjl, amit visszakld. Szintn megadja hozz a szerver, hogy a letlteni kvnt fjl mekkora (Content-Length fejlc) s hogy ez a szm miben rtend (Accept-Ranges). A bngsz a kommunikci sorn elg sokat elrul magrl, pldul a User-Agent mezben elkldi a sajt tpust, verziszmt s mg az opercis rendszer verziszmt is, ami alapjn gynyr statisztikk kszthetek szerver oldalon. Szintn elkldi az Accept-Language mezben, hogy a felhasznl hogyan lltotta be a nyelvi opcikat a bngszjben, gy ez alapjn a szerver eldntheti, hogy milyen nyelv tartalmat adjon vissza. St, ha egy oldalra gy jutottunk el, hogy egy msik oldalon kattintottunk egy linkre, akkor a bngsz a hivatkoz oldal cmt egy Referer (igen, a szabvny szerint gy kell rni) nev fejlc mezben elrulja a hivatkozott oldalnak. A szerver is tud bbeszd lenni, pldul a Server sorban megmondja az tpust, a Date sorban pedig a szerver pillanatnyi dtumt. Biztos tapasztaltuk mr, hogy egy weboldal els alkalommal kicsit lassabban tltdik be, mint a ksbbi alkalmakkor. Ez gyakran azrt van, mert az oldal egyes rszeit (pldul a kpeket) a bngsz a sajt gyorsttrban eltrolja, gy azokat legkzelebb nem kell letltenie. Hogy mit s mennyi ideig trolhat, azt a szerver hatrozza meg a Cache-Control s az Expires fejlc mezkkel, st ilyen esetekben azt is elkldi, hogy az egyes fjlokat mikor mdostottk utoljra a szerveren ( LastModified fejlc). Ezt felhasznlva a kvetkez alkalommal a bngsz egy If-Modified-Since fejlc mezvel tudja jelezni a szerver fel, hogy csak akkor kri az adott fjlt, ha az a megadott id utn vltozott. Ha azt tapasztaljuk, hogy br a webszerveren mdostottunk valamit, de az nem jelenik meg a bngszben, akkor vizsgljuk meg a HTTP forgalmat, s figyeljnk ezekre a fejlc mezkre!
J TUDNI: A bngszk prbljk minimalizlni a hlzati forgalmat ezzel is gyorstva az oldal megjelentst , ezrt a sajt gyorsttrukban igyekeznek eltrolni a szervertl kapott vlaszokat (vagy legalbb egyes rszeit, pldul a kpeket). Ha teljesen frissteni szeretnnk az oldalt a bngszben, akkor ne egyszeren az F5 gombot nyomjuk meg, hanem a CTRL+F5 billentyket, vagy a CTRL lenyomsa kzben kattintsunk a Frissts (Refresh) gombra!
Sttusz kdok A HTTP vlasz legfontosabb rszei ktsgkvl a sttusz kd s a hozz tartoz szveges indokls. A hibakdok hromjegy szmok, melyek az els szmjegy alapjn csoportokba sorolhatak. me a leggyakoribb hibakdok: o A HTTP kapcsolattal kapcsolatos tjkoztat zenetek, a gyakorlatban nagyon ritkn tallkozhatunk velk.
1xx: Information 2xx: Successful Sikeres krs.
o o
200 OK Ez a legjobb s szerencsre leggyakoribb eset.
tirnyts, a krt tartalom mshol tallhat, amit a Location fejlc mezben ad meg a szerver.
3xx: Redirect
301 Moved permanently A krt tartalom vgrvnyesen tkltztt egy msik cmre,
a bngsz akr meg is jegyezheti az j cmet. Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
19
o o
302 Found (temporary move) A krt tartalom ideiglenesen mshol tallhat.
A krt tartalom az utols letlts ta nem vltozott. Ezt vlaszolhatja a szerver, ha a kliens az If-Modified-Since fejlc mezvel jelzi, hogy mi a nla trolt utols vltozat. Ekkor a krt fjl tartalma nem fog ismt letltdni a szerverrl.
304 Not modified
4xx: Client Error Hiba trtnt, ami valsznleg a kliens hibja.
A kliens olyan oldalt prbl elrni, amihez nincs joga. Ennek az zenetnek a hatsra a bngsz fel fogja dobni a felhasznlnv s a jelsz bekrsre szolgl ablakot.
401 Unauthorized 403 Forbidden 404 Not found
o o
A kliensnek nincs jogosultsga a krt tartalom elrsre.
Hibs a cm, a megadott cmen nem tallhat tartalom. Clszer ellenrizni, hogy a krt cmen valban tallhat fjl a szerveren, vagy elgpeltk az URL-t.
5xx: Server Error Hiba trtnt a szerveren.
o o
A szerveren fut webalkalmazsban bels hiba trtnt. Ezt ltalban a programoz vagy az zemeltet tudja kijavtani.
500 Internal server error
A szerveren lellt a szolgltats, ami vagy a tl sok hiba (ld. 500-as hiba), vagy a tl nagy forgalom (tlterhels) eredmnye.
503 Service unavailable
Ha egy weboldal ksztsekor azt tapasztaljuk, hogy valami nem egszen gy trtnik, ahogy terveztk, akkor clszer megnzni a HTTP forgalmat s megkeresni a hibakdot. Ha pldul egy oldalon nem jelenik meg egy kp, akkor az valsznleg annak ksznhet, hogy elrtuk a kp URL-jt, amire a szerver 404-es hibval fog vlaszolni. Ettl mg az oldal meg fog jelenni, a bngsz nem fog hibt jelezni, de ez a kp hinyozni fog. A HTTP vlaszban lv hibakdbl egyrtelmen kiderl, hogy mirt. Biztonsgos kommunikci Ahogy az elz fejezetben lttuk, a HTTP protokoll egy nylt szveges protokoll, ennek ksznhet, hogy knnyen tudtuk rtelmezni a kommunikcit, ami a gyakorlatban nagyban segti a fejleszt munkjt. Sajnos ugyanez a nylt kommunikci a rosszindulat tmadk munkjt is ugyangy segti, ugyanis lehetv teszi a kommunikci egyszer lehallgatst. Ha illetktelenek ell vdeni szeretnnk a HTTP forgalmat, akkor a HTTP protokoll mellett egy msik protokollt is be kell vetnnk. Ha a HTTP-vel egytt hasznljuk a Secure Sockets Layer (SSL) protokollt is, akkor az eredmny a HTTPS protokoll, ami az albbi kt elnnyel br: Titkostja a forgalmat, gy az tkldtt informcit nem lehet lehallgatni. Azonostja a szervert, gy a felhasznl szmra egyrtelm, hogy kinek kldi el pldul a bankkrtyja adatait.
A nagy krds persze az, hogy amikor felhasznlknt megnyitunk egy weboldalt, ami pldul X banknak mondja magt, akkor honnan tudhatjuk, hogy az valban annak a banknak az oldala? Csak azrt, mert az oldal annak mondja magt, nyilvn nem. (Ennyi ervel brki mondhatn magrl, hogy szemlyesen a Batman.) Az URL alapjn? Az sem j, hiszen az adott bank tetszleges webcmet vlaszthat magnak. Akkor mi a megolds? Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
20
A megolds az, hogy vlasztunk egy megbzhat harmadik felet, akiben a kommunikci mindkt szereplje megbzik, a szerver is s a kliens is. Ha ez a harmadik fl azt lltja, hogy az adott weboldal tnyleg annak a banknak a honlapja, akkor a felhasznl ezt elhiheti. Ez a gyakorlatban gy trtnik, hogy az adott cg vsrol egy tartomny nevet (pl. xbank.example.com), majd a cget s a tartomnyt igazol dokumentumokkal elmegy egy ilyen megbzhat harmadik flhez, a tanstvny kiadhoz (certification authority). A tanstvny kiad a lehet legalaposabban ellenrzi a dokumentumokat, majd killt egy tanstvnyt (certificate), amely igazolja, hogy a tanstvny tulajdonosa valban az, akinek mondja magt. A cgnek ezek utn fel kell teleptenie ezt a tanstvnyt a webszerverre, s innen kezdve megy minden magtl. A bngsz, amikor https:// kezdet URL-t lt, akkor automatikusan HTTP helyett HTTPS protokollt fog hasznlni, s a szerver 80-as portja helyett a HTTPS protokollnak megfelel 443-as portjra fog csatlakozni. Lekri a szerver tanstvnyt, s ellenrzi a benne szerepl adatokat: 1. Ellenrzi, hogy tnyleg azt a webcmet nzzk-e ppen, amire a tanstvnyt killtottk. Nem mindegy, hogy az example.com vagy a www.example.com oldalrl van-e sz. 2. Ellenrzi, hogy a tanstvny nem jrt-e le (ltalban 1 vre szl). 3. Ellenrzi, hogy a tanstvnyt nem vontk-e vissza. Ha egy tanstvny rossz kezekbe kerl, akkor a tanstvny kiadja visszavonhatja azt. 4. Ellenrzi, hogy a tanstvnyt olyan tanstvny kiad lltotta ki, akiben a bngsz megbzik.
A megbzhat tanstvnykiadk listja az Internet Explorer Internet Options ablaknak Content fln, a Certificates gombra kattintva, a felugr ablak Trusted Root Certification Authorities oldaln tekinthet meg:
21
Az Import gombra kattintva lehet olyan tanstvnykiadkat hozzadni a rendszerhez, melyeket a bngsz beptetten nem ismer.
Ha ezek kzl brmelyik nem teljesl, akkor a tanstvnyt rvnytelennek tekinti a bngsz, s figyelmeztetst fog megjelenteni:
9. bra - Figyelmeztets az Internet Explorerben rvnytelen tanstvny esetn
Az rvnytelen tanstvny azt jelenti, hogy a felhasznl nem tudhatja biztosan, hogy a webszerver valban az-e, akinek mondja magt. A tanstvny msik felhasznlsa, hogy a benne szerepl informcik felhasznlsval a kommunikci kt szereplje titkostani tudja a forgalmat. Ha egy tanstvny nem rvnyes, attl mg a forgalom titkostsra lehet alkalmas.
A tanstvnyt egy hiteles tanstvny kiadtl kell vsrolni, ha azt szeretnnk, hogy a bngsz megbzhatnak tekintse. Ha ennek a kltsgeit nem szeretnnk kifizetni, akkor van lehetsg a tanstvny hzi elksztsre is, az ilyet hvjk nalrt tanstvnynak (selfsigned certificate). Ebben az esetben a fenti ellenrz lista 4. pontja nem fog teljeslni, gy a bngsz a tanstvnyt rvnytelennek fogja tekinteni, s a felhasznl sem tudhatja biztosan, hogy kinek a szervervel kommunikl, kivel osztja meg a bizalmas adatait. Br a kommunikci ebben az esetben is lehet titkostott, nalrt tanstvny esetn a rosszindulat tmad nagyon knnyen kijtszhatja a felhasznlk figyelmetlensgt, s belehallgathat a hlzati forgalomba, ezrt nalrt tanstvny helyett mindig clszer hiteles kiadtl szrmaz tanstvnyt vsrolni.
llapotkezels Ahogy arrl korbban mr sz volt, a HTTP llapotmentes protokoll, ami azt jelenti, hogy az egyes krs-vlasz prok kztt nincs kapcsolat. Ez valsznleg nem is okozott klnsebb gondot a web megjelensekor, de mra mr elengedhetetlenn vlt, hogy a webruhzakban meg tudjuk tmni a kosarunkat, vagy hogy be tudjunk jelentkezni a kedvenc kzssgi oldalunkra. Azaz a webalkalmazsokban szksgess vlt a felhasznli munkamenet (angolul session) kvetse. A megoldst Lou Montulli tallta ki a stik, azaz angolul a HTTP cookie-k formjban.
Montullitl azta sokszor megkrdeztk, hogy mirt pont a cookie nevet adta ennek a technolginak, amire azt szokta vlaszolni, hogy nincs ebben semmi klns, a program
22
ltal kapott s vltozatlanul visszakldtt informcidarabkra akkoriban elterjedt elnevezs volt a magic cookie.
A cookie-k olyan informcidarabkk, amiket az els krsre vlaszolva a szerver elkld a bngsznek, a bngsz pedig minden egyes tovbbi HTTP krsben visszakldi a szervernek. Az tkldtt informci brmi lehet, de mivel a stik mrete korltozott, ezrt az a bevett megolds, hogy a webalkalmazs szerver oldalon trolja az sszes felhasznl munkamenethez tartoz adatait, s a stiben csak egy munkamenet azonost (session ID) utazik.
10. bra - A munkamenet azonost a HTTP krsekben s vlaszokban
A gyakorlatban a cookie HTTP fejlc sorokban utazik, elszr a szerver egy Set-Cookie nev fejlc mezben lltja be a cookie rtkt:
HTTP/1.1 200 OK Set-Cookie: lsd=2EDQr; path=/; domain=.facebook.com
A kvetkez krseknl pedig a bngsz egy Cookie nev fejlc mezben visszakldi azt a szervernek:
GET http://www.facebook.com/home.php? HTTP/1.1 Cookie: lsd=2EDQr;
Fontos, hogy a bngszknek a szabvny szerint gy kell kezelnik a stiket, hogy csak azoknak a weboldalaknak kldjk vissza ket, ahonnan kaptk, gy nem lehetsges az, hogy az egyik webhelyrl kapott stink eljut egy msik webhelyhez. Ktfle sti ltezik: A session cookie csak a munkamenet idejre ltezik, s a bngsz memrijban troldik. Ha a munkamenetnk vget r vagy a bngszt bezrjuk, a sti elveszik. Az lland stit (angolul permanent vagy persistent cookie) viszont a bngsz a diszkre menti, gy meglesz akkor is, amikor jraindtjuk a bngszt vagy akr az egsz gpnket. Amikor egy weboldalra bejelentkezve bejelljk az Emlkezz Rm (jegyezd meg a jelszavam) opcit, akkor tipikusan ilyen lland sti keletkezik. Az opercis rendszerben szerencsre minden bngsznek s minden felhasznlnak nll sti tra van, gy nem fordulhat el, hogy a mi gpnkre bejelentkezve egy msik felhasznl a mi munkamenetnket folytatja.
11. bra - A bejelentkezs s az Emlkezz Rm opci a Facebookon
23
A sti egy egyszer szveges llomny, ahogy az a fenti pldbl is ltszik. nmagban nincs benne semmi veszlyes, ezrt rgtn el is oszlathatjuk azokat a tvhiteket, miszerint a stik vrusokat, felugr ablakokat, kretlen leveleket vagy reklmokat terjesztennek a cookie-k erre nem kpesek. Az viszont igaz, hogy egy sti tartalmazhat szemlyes adatot vagy egy stinek pusztn a ltezse a gpnkn utalhat arra, hogy megltogattunk egy weboldalt. Ha nem szeretnnk, hogy a sti a hlzaton tutazva illetktelen kezekbe kerljn, akkor mindenkppen hasznljunk biztonsgos HTTPS protokollt!
A stikkel kapcsolatos sszes krdsnkre vlaszt kaphatunk az Unofficial Cookie FAQ oldaln.
A HyperText Markup Language

Avagy milyen nyelven rtenek a bngszk? Miutn megfejtettk, hogyan kommuniklnak egymssal a szmtgpeink az interneten keresztl, s megrtettk a kommunikci sorn hasznlt HTTP protokoll minden rszlett, a kvetkez krds az lehet, hogy mit kell visszakldeni a webszervernek a bngsz szmra ahhoz, hogy a felhasznl szmra az eredmny egy weboldal legyen? A HTTP vlasz trzsben a webszervernek egy HyperText Markup Language (az elnevezs magyarul hiperszveges jellnyelvet jelent), azaz HTML formtum dokumentumot kell visszakldenie, ez ugyanis a bngszk nyelve. A HTML gykerei a nyolcvanas vek vgre nylnak vissza, amikor a svjci CERN1-ben dolgoz fizikus, Tim Berners-Lee azzal a problmval szembeslt, hogy a korabeli dokumentum formtumok nem megfelelek a fizikusok ltal ellltott kutatsi eredmnyek megjelentsre. Az egyik fj pont a kpek, brk, illusztrcik s ltalnossgban a gazdag formzsi lehetsgek hinya volt, a msik pedig az, hogy a kutatsi eredmnyek ltalban egymsra plnek, kapcsoldnak egymshoz, amit az akkori fjlformtumok nem tudtak kezelni. Ezen problmk megoldsra Tim Berners-Lee kt tlettel llt el, melyek a mai napig meghatrozzk a HTML nyelvet: 1. A dokumentum ne csak egyszer szveg legyen, hanem a tartalmat hordoz rszt lssuk el cmkkkel, melyek kiegszt informcikat (metaadatokat) adnak a szveghez. Hasonl cl egyszerbb jellseket a nyomdatechnikban mr korbban is hasznltak (pl. egyszeres alhzs: dlt, ketts alhzs: flkvr bet), itt a nagy jdonsg a formalizmus s cmkekszlet megalkotsa volt, gy jtt ltre a HTML mint jellnyelv (markup language). 2. A dokumentumok mutassanak tl nmagukon, azaz olyan hiperszvegeket (hypertext) tartalmazzanak, amelyek brmely rszlete egy msik dokumentumra hivatkozhat. Ez az, amit ma gy ismernk, hogy egy weboldalon rkattinthatunk hivatkozsokra (linkekre), aminek hatsra betltdik egy msik weboldal. E kt f irnyvonal mentn szletett meg a HTML nyelv els lersa 1991-ben, melynek ma a tovbbfejlesztett s szabvnyostott 4.01-es, hamarosan pedig 5-s verzijt hasznljuk. A HTML nyelv elemei A HTML nyelv jellrendszere elemekbl s attribtumokbl pl fel. Az elemekkel tudjuk felcmkzni a szveg egyes rszeit, az attribtumokkal pedig ezeknek a cmkknek a tulajdonsgait tudjuk meghatrozni.
1
A CERN, a Conseil Europenne pour la Recherche Nuclaire (magyarul Nukleris Kutatsok Eurpai Tancsa) a rszecskefizikai kutatsok eurpai szervezete, a vilg legnagyobb rszecskefizikai laboratriuma, mely a franciasvjci hatron helyezkedik el, Genftl kiss szakra. Forrs: Wikipedia.
24
Az elemek (angolul element) a szveget formailag egy kezd cmke (start tag) s egy zr cmke (end tag) kz zrjk:
<cmke>szveg</cmke>
Az elem elejn a kezd cmkt kacsacsrk kz kell tennnk; a zr cmkt szintn, de ott mg egy per-jelre is szksg van, hogy egyrtelmv tegyk, az az elem vge. A cmkk termszetesen nem fognak megjelenni a weboldalon, hanem csak kiegszt informcikat hordoznak, amiket a bngsz rtelmez. A cmke viselkedst attribtumokkal tudjuk meghatrozni, melyekbl tbb is kapcsoldhat egy elemhez:
<cmke attribtum1="rtk1" attribtum2="rtk2">szveg</cmke>
Az attribtumokat s rtkeiket a kezd cmknl adhatjuk meg, mghozz gy, hogy az rtket idzjelek ("rtk") vagy aposztrfok ('rtk') kz tesszk. A legtbb elem a fenti formban egy szveg formjt vagy szerept (pl. cmsor) hatrozza meg, de vannak ms jelleg elemek is (pl. sortrs, kp hivatkozs). Ezrt formailag lteznek n. nbezr cmkk (self-closing tag), amelyeknek ilyen egyszer a formjuk:
<cmke />
Termszetesen ehhez is kapcsoldhatnak attribtumok:

<cmke attribtum1="rtk1" attribtum2="rtk2" />
Van lehetsg arra, hogy a HTML kdba megjegyzseket (comment) tegynk annak rdekben, hogy ksbb emlkezznk arra, mit mirt csinltunk, vagy hogy ppen a weboldal melyik rsznek a kdjt ltjuk:

Termszetesen ezek a megjegyzsek sem jelennek meg a bngszben, de brki szmra lthatak, aki a bngszben kivlasztja a View Source menpontot, ezrt bizalmas informcikat mg vletlenl se rjunk ide.
J TUDNI: A HTML nyelv eredeti szabvnya a fentieknl lazbb szintaktikt is megenged. Pldul bizonyos esetekben a zr cmke elhagyhat (pl. j bekezds kezdete egyben az elz vgt is jelenti), az attribtumok rtkeit nem ktelez idzjelek kz tenni s az nbezr elemeket sem ktelez jellni. Ezek a lazn formzott HTML dokumentumok azonban sok bosszsgot okoznak a HTML szerkeszt programoknak s a HTML kdot rtelmez bngszknek is, ezrt ma mr inkbb XHTML kdot szoks rni, amely az XML (eXtensible Markup Language) nyelv szigor formai szablyait kveti. A fent ismertetett szintaktika megfelel ezeknek az elrsoknak.
Fontosabb HTML elemek Miutn ttekintettk az elemek, cmkk s attribtumok formjt, ismerkedjnk meg a legfontosabb HTML elemek jelentsvel s hasznlatval! Fontos ltni, hogy a HTML nyelvben az elemek nevei rgztettek, nem tallhatunk ki tallomra jabb elemeket, azokat kell hasznlnunk, amik a szabvnyban megtallhatak. A HTML dokumentum struktrja A HTML dokumentum els sora az n. Document Type Definition, vagyis a DTD. A DTD hatrozza meg a bngsz szmra, hogy a dokumentum pontosan milyen szabvnyt kvet, gy a bngsz Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
25
pontosan tudni fogja, hogy a szabvnynak abban a verzijban milyen HTML elemek megengedettek, s melyiknek mi a jelentse. A HTML 4.01 hromfle DTD-t ismer: 1. HTML 4.01 Strict: nem engedlyezi formz elemek hasznlatt, azok helyett mindenkpp Cascading Style Sheets stluslapok segtsgvel kell a formzst elvgezni. Ez a legelterjedtebb DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. HTML 4.01 Transitional: engedlyezi nhny korbbi, a szabvnybl ksbb kikerlt elem hasznlatt is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. HTML 4.01 Frameset: a fentieken kvl keretek (frame-ek) hasznlatt is tmogatja:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Hasonlan ltezik hromfle (strict, transitional, frameset) DOCTYPE deklarci az XHTML 1.0 szabvnyhoz is, az XHTML 1.1 verzihoz azonban csak ez az egy:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
A kzelg HTML5 verziban (ami gyakorlatilag egyben az XHTML5 verzi is) szerencsre lnyegesen egyszersdik ez a sor:
<!DOCTYPE html>
Fontos, hogy a HTML fjlunk elejn szerepeljen ez a sor, klnben elfordulhat, hogy a bngsz nem gy jelenti meg az oldalt, ahogy szeretnnk. A !DOCTYPE utn kvetkezik az oldal n. gykr eleme (root element), a html elem, ami tartalmazza a dokumentum fejlct (head) s trzst (body):
<!DOCTYPE html> <html> <head>  </head> <body>  </body> </html>
A fejlcben kap helyet a dokumentum cme, amit a bngsz az ablak cmsorban megjelent (title elem) s tovbbi ler informcik (meta elem), amik viszont nem jelennek meg az oldalon, pldul:
<head> <title>Bevezets az internet programozsba</title> <meta name="author" content="Balssy Gyrgy" /> <meta http-equiv="Content-Language" content="hu" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
Ennyi tudssal akr el is kszthetjk az els HTML oldalunkat! Ksztsnk egy j szvegfjlt, nyissuk meg a Jegyzettmbbel (Notepad), s rjuk ezt bele: Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
26
<!DOCTYPE html> <html> <head> <title>Els oldalam</title> </head> <body> Szia Vilg! </body> </html>
Mentsk el a fjlt .htm kiterjesztssel, majd kattintsunk r dupln! Meg fog nylni az elsdleges bngsznk, s gy fog megjelenni az oldalunk:
12. bra - Az els HTML oldalunk
Lthat, hogy a dokumentum trzse (body elem) tartalmazza azokat a HTML elemeket, amelyek alapjn a bngsz megjelenti az oldal tartalmt. A kvetkez fejezetekben ezekkel az elemekkel foglalkozunk. A szveg struktrja Ha egy HTML dokumentumban rendezni, formzni szeretnnk a szveget, akkor ezt kizrlag HTML elemekkel tehetjk meg. Azaz hiba tesznk sortrseket a HTML kdba, vagy hiba tesznk egyms utn sok szkzt, a bngszben csak egyetlen szkz fog megjelenni helyette. Pldul trhatjuk az elz pldnk body elemnek kdjt gy:
<body> els msodik harmadik tdik </body> hatodik
negyedik
De hiba is erlkdnk a sok szkzzel, sortrssel s tabultorral, a bngszben gy fog megjelenni, mintha csak egyetlen szkzt rtunk volna:
27
13. bra - A HTML forrskd trdelse nem jelenik meg az oldalon
Ha msknt szeretnnk, erre szolgl cmkket kell hasznlnunk. Egy hosszabb szveget a p (paragraph) elem segtsgvel tagolhatunk bekezdsekre:
<p>Els bekezds</p> <p>Msodik bekezds</p>
Ha egy bekezdsen bell j sort szeretnnk kezdeni, akkor azt a br (break) elemmel tehetjk meg. A br elem nllan ll, nincs sem zr cmkje, sem pedig attribtumai, mindssze ennyi:
<br />
A bekezdsek kz cmsorokat tehetnk, mghozz hat mretben, melyeket a h1..h6 (heading) elemekkel jellhetnk:
<h1>Fcm</h1> <h2>Alcm</h2>
Rakjuk ssze ezeket egyetlen pldba:

<!DOCTYPE html> <html> <head> <title>Bekezdsek, cmsorok</title> </head> <body> <h1>Ma 2010. oktber 27. van</h1> Az v 300. napja a Gergely-naptr szerint. <h2>vfordulk</h2> <p> 518 ve Kolumbusz Kristf felfedezte Kubt.<br /> (Hivatalosan Kubai Kztrsasg, egykori spanyol gyarmat, ma a legnpesebb karibi orszg.) </p> <p>85 ve Fred Waller feltallta a vzist.</p> </body> </html>
Mindez gy jelenik meg a bngszben:
28
14. bra - Cmsorok s bekezdsek az oldalon
rdemes megfigyelni, hogy a bngsz nagyobb betkkel jelenti meg a cmsorokat, a bekezdsek kztt automatikusan hagy tvolsgot, st a hossz sorok trdelsrl is gondoskodik. Minden HTML elemre igaz, hogy van egy alaprtelmezett megjelensi mdja, amit termszetesen megvltoztathatunk, ha mi msknt szeretnnk. Errl rszletesebben a Cascading Style Sheets c. fejezetben lesz sz. Ha listkra van szksgnk, akkor ktfle elemet hasznlhatunk attl fggen, hogy szmozott vagy csak egyszer felsorolsos listt szeretnnk megjelenteni az oldalon. A szmozott listk kerett ol (ordered list) elemek jelentik, amin bell az egyes lista tteleket li (list item) cmkk jelzik:
<ol> <li>Els</li> <li>Msodik</li> <li>Harmadik</li> </ol>
Ha nincs szksgnk a sorszmokra, akkor az ul (unordered list) elemmel egyszer felsorolsos listt kszthetnk:
<ul> <li>Piros</li> <li>Fehr</li> <li>Zld</li> </ul>
Igny szerint a felsorolsokat s szmozott listkat tbb szint mlyen akr egymsba is gyazhatjuk, a bngsz automatikusan gondoskodni fog a megfelel sorszm vagy lista ikon megjelentsrl. Ez pldul egy tbbszint lista:
<ol> <li>Magyarul <ul>
29
<li>Piros <ul> <li>rzsaszn</li> <li>piros</li> <li>vrs</li> <li>bord</li> </ul> </li> <li>Fehr</li> <li>Zld</li> </ul> </li> <li>Angolul <ul> <li>Red</li> <li>White</li> <li>Green</li> </ul> </li> </ol>
Amit a bngsz gy mutat meg:
15. bra - Tbbszint lista, automatikus szmozssal, ikonokkal, behzssal
A szveg tagolsra hasznlhat mg a hr (horizontal rule) elem is, amely egy vzszintes vonallal vlasztja el a felette s alatta lv tartalmat. A br elemhez hasonlan a hr is nbezr:
<hr />
A hasznlata nagyon egyszer:

Fels tartalom <hr />
30
Als tartalom
A bngsz tudja a dolgt:
16. bra - gy jelenik meg a <hr /> elem az oldalon
Hivatkozsok Az egyes weboldalaink kztt a kapcsolatot hiperhivatkozsokkal (hyperlink) teremthetjk meg, amit az a (anchor=horgony) elem valst meg:
<a href="http://www.bme.hu" title="Ugrs a BME oldalra" target="_blank">BME honlap</a>
A nyit s a zr cmke kztt szerepel az a szveg, ami meg fog jelenni a weboldalon, a href attribtumban pedig azt a webcmet kell megadnunk, amire ezzel a hivatkozssal ugrani lehet. A title attribtumba olyan segtsg rhat, amely megjelenik a bngszben, amikor a felhasznl a hivatkozs fl viszi az egeret (n. tooltip). A target attribtumban azt adhatjuk meg, hogy hova tltdjn be a hivatkozott weboldal. Ha az rtke _blank, akkor a bngsz j ablakban fogja megnyitni az oldalt.
17. bra - A fenti hivatkozs kd gy jelenik meg az oldalon
Szintn az a elem hasznlhat oldalon belli ugrsok, pldul tartalomjegyzk vagy az oldal tetejre mutat hivatkozs ltrehozsra. Ehhez meg kell jellnnk a hivatkozni kvnt rszt a name attribtummal:
<a name="LapTeteje" />
31
Majd az erre mutat linket be kell szrnunk a kvnt helyre:

<a href="#LapTeteje">Ugrs az oldal tetejre</a>
Az a elemen bell tetszleges elem llhat, pldul ha egy kpet szeretnnk kattinthatv tenni, akkor a kp megjelentsre szolgl img elemet tehetjk a link belsejbe:
<a href="http://www.bme.hu"> <img src="logo.gif" /> </a>
Szemantikai elemek Az eddig bemutatott elemek tbbnyire a szveg megjelensn vltoztattak. A tovbbiakban lssunk pr olyan HTML elemet, amelyek jelentst (szemantikt) is trstanak a szveghez! Lttunk mr erre pldt a cmsorok esetn, hiszen a <h1> elem azonkvl, hogy megnagyobbtja a szveget mg azt is jelenti, hogy az a pr sz az oldal cme. Hasonlan az <em> s a <strong> elem nemcsak dlten s flkvren jelenti meg a tartalmazott szveget, hanem egyben azt is jelenti, hogy ez hangslyozott illetve kiemelt tartalom:
A <em>fogalmakhoz</em> pldul hasznlhatjuk az em elemet, a <strong>feltn</strong> szvegekhez pedig a strong elemet.
18. bra - Kiemelsek a szvegben
A <cite> elem nemcsak hogy alaprtelmezs szerint sok bngszben dlten jelenti meg a tartalmazott szveget, de azt is jelenti, hogy egy hivatkozott forrsrl van sz:
Douglas Adams <cite>Galaxis tikalauz stopposoknak</cite> c. mvben vlaszt kaphatunk Az let, A Vilgmindensg Meg Minden nagy krdsre.
19. bra - Forrs megjellse
32
A kls forrsbl tvett rvidebb idzeteket a <q> elemmel, a hosszabbakat pedig a <blockquote> elemmel jelezhetjk (ez utbbiban tbb bekezds is lehet, <p> elemekkel jellve), mindkt esetben az opcionlis cite attribtummal hivatkozhatunk a forrs URL-jre:
<q cite="http://hu.wikiquote.org/wiki/Woody_Allen"> Nem vagyok nagy iv. Szilveszterkor kt martini utn megprbltam elrabolni s Kubba trteni egy liftet. </q>
20. bra - A szveg kr automatikusan odakerltek az idzjelek
A rvidtsekhez s mozaikszavakhoz az <abbr> s <acronym> elemeket hasznlhatjuk. Ezeknek az elemeknek a trzse mindkt esetben a rvid verzi, a kifejtst a title attribtumban adhatjuk meg. A title attribtumra ltalban az jellemz, hogy a bngszk egy felugr tipp ablakban jelentik meg a tartalmt, gy ha a rvidts fl viszi a felhasznl az egeret, akkor rgtn ltja a rvidts feloldst is:
<acronym title="National Aeronautics and Space Administration">NASA</acronym>
Ezek a szemantikai HTML elemek (s a tbbi, amit itt nem tudtunk felsorolni) nagyban hozzjrulnak ahhoz, hogy a weboldalaink ne csak az emberi szem szmra szpen megjelen szvegek legyenek, hanem a szveg egyes rszeinek szerepe a feldolgoz programok szmra is egyrtelm legyen. Pldul a vakok s gyengnltk ltal hasznlt kpernyolvas programok szban jelzik, ha cmet, idzetet vagy rvidtst tallnak. Tblzatok A HTML nyelvben egy egsz sor elem szolgl arra, hogy tblzatokat tudjunk megjelenteni az oldalainkon. Egy hrom soros s kt oszlopos tblzatot gy kszthetnk el:
<table border="1" cellpadding="1" cellspacing="2" summary="Kiadsok"> <thead> <tr> <th>Hnap</th> <th>sszeg</th> </tr> </thead> <tfoot> <tr> <td>sszesen:</td> <td>600</td> </tr> </tfoot> <tbody> <tr>
33
<td>Janur</td> <td>100</td> </tr> <tr> <td>Februr</td> <td>200</td> </tr> <tr> <td>Mrcius</td> <td>300</td> </tr> </tbody> </table>
A tblzatot a <table> elem jelzi, melyben az egyes sorokat <tr> (table row), azon bell az egyes cellkat pedig <td> (table data) elemek definiljk. A bngsz itt is ad egy alaprtelmezett stlust az egyes elemeknek:
21. bra - Egyszer tblzat
Ha tbb cellt szeretnnk sszevonni vzszintesen vagy fgglegesen, akkor azt a <td> elem colspan s rowspan attribtumaival tehetjk meg, ahol rtkknt azt kell megadnunk, hogy hny cellt kvnunk sszevonni:
<table>  <tr> <td>els</td> <td>msodik</td> </tr>  <tr> <td colspan="2">sszevonva</td> </tr> </table>
A cellk kztt a <th> (table header) elemekkel klnbztethetjk meg a fejlc cellkat. Ha preczen jellni szeretnnk, hogy sor vagy oszlop fejlcrl van sz, akkor a scope="col" vagy scope="column" attribtumot kell hasznlnunk.
34
Ha nagyobb tblzatrl van sz, akkor azon bell clszer jeleznnk a fejlcet, a lblcet s a tblzat trzst, ami pldul az oldal kinyomtatsakor lehet hasznos informci a bngsznek. A tblzatnak ezeket a rszeit a <thead>, a <tbody> s a <tfoot> elemek jellik. Elsre kicsit szokatlan lehet, hogy a <tfoot> elemnek a <tbody> eltt kell llnia, hogy a bngsz a feldolgozs sorn idben hozzfrjen az abban szerepl informcikhoz. rlapok A weboldalak nemcsak informcik megjelentsre hasznlhatak, hanem adatok bekrsre is szolglhatnak. Ilyenkor rlapokat kell ksztennk, amiket a felhasznl kitlt, majd az adatokat a bngsz egy HTTP POST krssel eljuttatja a szerverre. Hogy a szerver oldalon mi trtnik az elkldtt adatokkal, az a webszerveren fut alkalmazs feladata. me, egy egyszer rlap:
<form action="urlap.aspx" method="post"> <label for="veznev">Vezetknv:</label> <input id="veznev" type="text" /> <br /> <label for="kernev">Keresztnv:</label> <input id="kernev" type="text" /> <br /> <input type="submit" value="Mehet" /> </form>
Ami gy jelenik meg a felhasznl szmra:
22. bra - Egyszer rlap kt szvegdobozzal s egy gombbal
A <form> elem jelzi a bngsz szmra, hogy itt egy rlaprl van sz. A <form> elem action attribtumban azt az URL-t kell megadnunk, ahova a bngsz a megadott adatokat el fogja kldeni, a method attribtumban pedig azt, hogy HTTP GET vagy POST formban vrja a szerver az adatokat. Ezek nlkl az rlap nem sokat r. Az rlapon bell a mezket s a mezkhz tartoz cmkket clszer sszekapcsolni egymssal, hogy logikailag is legyen kapcsolat, ne csak a megjelentskor kerljenek egyms mell. A cmkket a <label> elem hordozza, a mezkhz tartoz beviteli vezrlk tbbsgt pedig az <input> elem jelenti meg. E kett kztt gy lehet kapcsolatot teremteni, hogy az <input> elem id attribtumban megadunk egy tetszleges, az oldalon belli egyedi azonostt s erre hivatkozunk a <label> elem for attribtumban.
35
Azonostknt brmit hasznlhatunk, de a bevlt gyakorlat szerint olyan azonostt vlasztunk, ami rvid, egyrtelm, illetve nem tartalmaz kezeteket s szkzket.
Az <input> elem type attribtumban kell megadnunk, hogy pontosan milyen beviteli mezre van szksgnk. Ezek a lehetsges rtkek:
text: szvegdoboz checkbox: jellngyzet radio: rdigomb password: jelsz mez (szvegdoboz, de nem ltszanak a bert karakterek) file: fjl feltlts hidden: rejtett
Az input vezrlvel gombokat is tehetnk az rlapunkra, szintn a type attribtum belltsval:

submit: elkldi az rlap tartalmt a <form> elemben megadott cmre reset: kitrli az sszes rlap mezbe bert rtket button:
egyszer nyomgomb, JavaScript kdot kell rnunk, amivel tetszleges feladatot bzhatunk a gombra
Az input vezrlnek van mg kt hasznos attribtuma. A title attribtumba olyan sg szveget rhatunk, ami akkor jelenik meg, ha a felhasznl a vezrl fl viszi az egeret. Az accesskey attribtumban pedig egy billentyt hatrozhatunk meg, amivel a felhasznl (ha az ALT gombbal egytt, vagy ms bngszkben a SHIFT+ALT gombbal egytt nyom le) gyorsan beleugorhat a szveg kurzorral a mezbe. gy az rlap nemcsak egrrel lesz kezelhet, hanem a billentyzet hasznlatval is mozoghatnak a felhasznlk az egyes mezk kztt. Az input vezrln kvl gyakran hasznlunk mg legrdl listkat, hogy a felhasznlnak ne kelljen gpelnie, hanem elre meghatrozott rtkek kzl vlaszthasson ki egyet. A lehetsges rtkeket a <select> elemen bell elhelyezett <option> elemekkel kell felsorolni:
<select id="szinek"> <option value="P">Piros</option> <option value="F">Fehr</option> <option value="Z">Zld</option> </select>
Mikor a felhasznl vlaszt egy elemet s elkldi az rlapon megadott adatokat a szerverre, az <option> elem value attribtumban megadott rtket fogja megkapni a szerver, ezrt fontos ennek az attribtumnak az egyrtelm, program ltal knnyen feldolgozhat rtkekkel trtn kitltse. Ha egy rlap hossz, akkor clszer azt rszekre bontani, erre szolgl a <fieldset> elem, amin bell az egyes rszeknek a <legend> elemmel adhatunk cmet:
<form action="urlap.aspx" method="post"> <fieldset> <legend>Szemlyes adatok</legend>  </fieldset> <fieldset> <legend>Szakmai adatok</legend>  </fieldset> </form>
36
23. bra - Hossz rlap tbb rszre bontva
Validls Az elz fejezetekben szmos elem szerept s lehetsgeit tekintettk t, m ezek mellett a HTML nyelv mg sok, ritkbban hasznlt elemet definil. Azon kvl, hogy a HTML nyelvben csak ezeket az elre definilt elemeket hasznlhatjuk, van mg egy fontos megkts, mgpedig az elemek egymshoz viszonytott helyzetre vonatkozan: a HTML szabvny szigoran meghatrozza, hogy az egyes elemeknek mely elemek lehetnek a gyermekei. Pldul nem lehet <p> elemeket egymsba gyazni szerencsre nem is lenne rtelme bekezdsen bell bekezdst rni. Sajnos nem mindenhol ennyire egyszer s logikus a helyzet, ezrt clszer valamilyen programmal ellenrizni, hogy az ltalunk elksztett HTML kd helyes-e. Erre kivlan hasznlhat a W3C ltal biztostott Markup Validation Service (http://validator.w3.org). Ez egy ingyenes s nyilvnos szolgltats, amelyre feltlthetjk az elksztett HTML oldalunkat, s vlaszul egy rszletes jelentst tallunk a benne tallhat hibkrl. Ha a kdunk helyes, akkor pedig instrukcikat kapunk arra vonatkozan, hogyan jelezhetjk oldalunk kivlsgt egy erre szolgl log segtsgvel. Ha az oldalunkat mr feltltttk egy nyilvnos webszerverre, akkor a HTML kd validlshoz hasznlhatjuk az Internet Explorer Fejleszti Eszkztrn (Developer Toolbar, F12) tallhat Validate menpontot:
37
24. bra - Validls kzvetlenl Internet Explorerbl
Ha az oldalunk mg nem nyilvnos, akkor el kell ltogatnunk a Markup Validation Service weboldalra, ahol kzvetlenl feltlthetjk az ellenrizend HTML kdot. Sajnos a gyakorlatban nem mindig elg, hogy az oldalunk megfelel a szabvnyoknak, hiszen az oldalunk megjelense leginkbb a bngszktl fgg s gy attl, hogy a bngszk hogyan implementljk a szabvnyokat. Ezrt a szintaktikai tesztels utn mindig clszer ellenriznnk, hogy az oldalunk az elkpzelsnk szerint jelenik-e meg az sszes bngszben. Ennl a tesztelsnl az albbi eszkzk segthetnek: A Microsoft Expression SuperPreview kpes egyszerre egyms mellett tbb bngszben is megjelenteni a tesztelni kvnt oldalt s az oldal egyes rszeinek sszehasonltsban segteni. (http://www.microsoft.com/expression/products/SuperPreview_Overview.aspx) Az IE Tester egy ingyenesen letlthet alkalmazs, amely a klnbz ablakaiban az Internet Explorer klnbz verziit kpes betlteni, gy ennek a bngsznek az jabb s rgebbi vltozatai alatt tesztelhetjk az oldalunkat (http://www.mydebugbar.com/wiki/IETester/HomePage). A BrowserShots ingyenes online szolgltatsnak egy webcmet kell megadnunk, s kzel 70, klnbz platformon fut bngsz s bngsz verzi kzl vlaszthatjuk ki, hogy melyikkel akarjuk a tesztelst elvgeztetni. A szolgltats ezek utn a httrben megnyitja az oldalt a kivlasztott bngszkben s kszt rluk egy-egy kpernyfott. (http://browsershots.org/)
Cascading Style Sheets stluslapok

Avagy mitl lesz szp az oldal?
38
Egy weboldal ksztsekor termszetesen alapvet elvrs, hogy az oldalnak olyan arculatot adhassunk, amilyet csak szeretnnk. Nemcsak strukturlni szeretnnk a tartalmat, hanem formzni is, azaz szeretnnk megadni, hogy az egyes rszletek, cmek, bekezdsek, kpek hol s hogyan jelenjenek meg. A HTML nyelvben erre termszetesen mr a kezdetektl fogva van lehetsg. Egyes elemek tartalmazhatnak megjelentsre vonatkoz attribtumokat (pl. align: igazts), vagy pldul a font elemmel megadhatjuk a bettpust, betmretet s a sznt. me egy plda:
<p align="center"> <img src="logo.jpg" border="1" /> <font size="10" color="red"> Ez itt egy nagy piros szveg kzpre igaztva. </font> </p>
Ez a megkzelts mkdkpes, de nem tl szp, ugyanis a tartalom s a megjelens nagyon keveredik egymssal, amibl szmos kellemetlensg kvetkezik: Egy teljes oldal forrskdjt nagyon nehz tltni, hiszen a tiszta tartalmat felszabdaljk a megjelentsrt felels cmkk s attribtumok. Nehz kvetkezetes dizjnt kszteni, hiszen pldul a cmsorokat minden esetben helyben kell megformznunk, gyelve arra, hogy mindenhol kvetkezetesen ugyangy nzzenek ki. Mivel minden oldalon jra s jra definiljuk ugyanazokat az arculati belltsokat, ezrt a hlzati forgalom jelentsen megnvekedhet. Nem lehet a webhely arculatt egyszeren megvltoztatni, hiszen a dizjn rszletei a tartalom kztt bjnak meg.
A nyilvnval megolds az lenne, ha a HTML kdbl ki tudnnk emelni a megjelentsrt felels elemeket s attribtumokat, helyettk a szvegszerkesztkben megszokott mdon stlusokat definilnnk, s a szvegben csak az gy kialaktott stlusokra hivatkoznnk. Szerencsre erre van megolds, pont erre szolgl a Cascading Style Sheets (CSS) technolgia, st ma mr ez a javasolt s elvrt megkzelts a dizjn s az egysges arculat kialaktsra. Attribtumok Cascading Style Sheets stluslapokkal dolgozva a belltsokat attribtum nv-attribtum rtk prosokkal adhatjuk meg. Az attribtumok neve s rtktartomnya rgztett, s gyakorlatilag az sszes megjelenssel kapcsolatos terletet (mretek, tvolsgok, sznek, pozcik stb.) lefedik, gy az ide vonatkoz HTML attribtumokra mr nincs is szksg. A HTML s CSS attribtumok elnevezse nhol teljesen egyez, mshol csak hasonl. Pldul a fenti kdrszletben hasznlt color attribtum ltezik CSS-ben is, az align="center" HTML attribtum helyett viszont a text-align CSS attribtumot kell hasznlnunk:
text-align: center; color: red;
Formailag annyi megkts van, hogy itt nincs szksg idzjelekre, az egyenlsgjel helyett pedig kettspontot kell hasznlnunk. Egyszerre tbb CSS attribtumnak is adhatunk rtket, ebben az esetben pontosvesszvel kell elvlasztanunk a nv-rtk prosokat egymstl. Ha megjegyzst szeretnnk rni a CSS kdunkba, akkor azt /* s */ jelek kztt tehetjk meg:
/* Kiemels */ color: red; font-weight: bold;
39
Elhelyezs A kvetkez krds nyilvnvalan az, hogy ezeket a CSS belltsokat hogyan kapcsoljuk a HTML kdunkhoz. Erre hromfle lehetsgnk van: Hasznlhatunk n. inline stlust, ekkor a formzand HTML elem style attribtumba kell rnunk a CSS attribtumokat s azok rtkeit:
<p style="font-style: italic; border: 1px solid blue; margin-left: 30px; width: 300px; padding: 10px; text-align: center;"> Ha megnyesik szrnyaimat - lbaimon jrok, ha levgjk lbaimat - kezeimen jrok, s ha azt is kiszaktjk, akkor hason fogok csszni, csakhogy hasznlhassak. (Szchenyi Istvn) </p>
Az inline stlusnak megvan az az elnye, hogy brhol hasznlhatjuk, minden komolyabb elkszts nlkl. A htrnya pedig termszetesen az, hogy gy a stlusbelltsaink tovbbra is tbb helyen lesznek az oldalon, tbbszrsen nvelik az oldal mrett, neknk kell szinkronban tartani ket stb. A fenti stlusbelltsoknak ksznheten az egyszer bekezds gy jelenik meg a bngszben:
25. bra - Egy bekezds kerettel, margval, rgztett szlessggel, kzpre igaztva
Egy msik lehetsg a CSS kd elhelyezsre a stlus blokk hasznlata. Ebben az esetben tipikusan a HTML oldal head elemben hozunk ltre egy style elemet, s oda rjuk a CSS kdunkat. Ekkor persze felmerl az a krds, hogy honnan fogjk tudni az oldal egyes rszei, hogy mely belltsok vonatkoznak rjuk, de erre mg ksbb visszatrnk. Egyelre csak a style blokk szintaktikjt akarjuk megismerni:
<style type="text/css"> /* A body elem s a gyermek elemeinek stlusa */ body { font-family: Verdana, Arial, Sans-Serif; font-size: 75%; background-color: #f4e7bb; } </style>
A stlus blokk lehetsget ad arra, hogy a HTML oldalban egy helyre koncentrljuk a megjelentsre vonatkoz rszeket, gy ha esetleg t kell szabnunk az oldal arculatt, egy kzponti helyen tehetjk Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
40
meg azt a CSS kd trsval. Az a htrny azonban gy is megmarad, hogy a webhely ltal hasznlt sszes oldal kztt neknk kell szinkronban tartani a CSS blokkokat. Ezen segt a harmadik megolds, amikor nem a HTML fjlban helyezzk el a CSS kdot, hanem egy kls fjlban, aminek tipikusan a .css kiterjesztst szoktuk adni. Ekkor a HTML oldal head elemben egy link elemmel hivatkozhatunk az oldalhoz tartoz stluslapra:
<link href="style.css" rel="stylesheet" type="text/css" />
Ez a legpraktikusabb megolds, hiszen ilyenkor a teljes webhelynkhz tartoz sszes stlusbellts egyetlen (vagy nhny) fjlban van, erre hivatkozik az sszes oldal, gy ha mdostani kell valamit, akkor azt elg egyetlen helyen megtenni. Jogosan teheti fel brki a krdst, hogy mi van akkor, ha mind a hrom megoldst egyszerre hasznlom? Ebben az esetben a bngsz alkalmazni fogja az sszes stlusbelltst, mgpedig a kvetkez sorrendben, az ltalnostl a specifikusabb irnyba haladva: 1. Kls CSS fjl 2. Oldalon belli stlus blokk 3. Az elemhez tartoz stlusbelltsok Ez azt jelenti, hogy ha egy elemre a kls CSS fjlban megadunk egy belltst, majd ugyanarra az elemre s ugyanarra a tulajdonsgra (pldul httrszn) az oldalon bell megadunk egy msik belltst, akkor az oldalon bell definilt fellrja a kls fjlban megadott rtket. gy is mondhatnnk, hogy a kzelebbi nyer. Viszont ha egy tulajdonsgot csak a kls CSS fjlban adunk meg s az oldalon bell nem adunk meg erre a tulajdonsgra msik rtket, akkor termszetesen a korbbi bellts rvnyre fog jutni.
Teht lehet egy webhelyen bell egyszerre tbb helyen is stlusokat megadni, m a javasolt megkzelts az, hogy lehetleg csak kls CSS fjlt hasznljunk, mert ez a legrugalmasabb s legjobban karbantarthat megolds.
A CSS szelektorok Az elz fejezetben a stlus blokknl mr rintettk azt a problmt, hogy meg kell adnunk, hogy egy definilt stlus pontosan melyik HTML elemre vagy elemekre vonatkozzon. Erre szolglnak a CSS szelektorok (CSS selectors). Ha azt akarjuk, hogy egy bellts az sszes HTML elemre rvnyes legyen, akkor a * (csillag) szelektort kell hasznlnunk. Pldul a keretet (border), a kls- (margin) s a bels margt (padding) gy szntethetjk meg (a vastagsguk ill. a szlessgk mrett kell szmmal megadni):
* { border: 0; margin: 0; padding: 0; }
Lthat, hogy formailag annyi kvetelmny van, hogy miutn egy szelektorral meghatroztuk a kivlasztand elemek krt, a r vonatkoz stlusbelltsokat kapcsos zrjelek kztt kell megadnunk. Hivatkozhatunk a HTML elem nevre is, ebben az esetben az sszes helyen, ahol az adott elemet hasznljuk, automatikusan a megadott stlussal fog megjelenni. Pldul a msodik szint cmsor (h2) el (fl) tehetnk 25 pixel tvolsgot (padding-top) s alhzhatjuk (text-decoration) a szveget:
h2 { text-decoration: underline; padding-top: 25px; }
A harmadik szelektor lehetsg, hogy egy konkrt elemre hivatkozunk az id attribtumn keresztl. Ehhez a HTML kdban egyedi rtket kell adnunk az id attribtumnak, s ezt kell megadnunk a CSSben is egy # jel utn. Az albbi pldban egy adott cmsort kis kapitlis stlussal jelentnk meg: Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
41
<style type="text/css"> #idezetek { font-variant: small-caps; } </style> <h2 id="idezetek">Idzetek</h2>
Knnyen lehet, hogy nem az elem sszes elfordulst, s nem is egy konkrt elemet akarunk formzni, hanem csak nhny kitntetett helyen akarunk alkalmazni egy stlust. Ebben az esetben clszer ltrehoznunk egy sajt stlus osztlyt, aminek tetszleges nevet adhatunk, a lnyeg az, hogy pontot rjunk el. Pldul definilhatunk egy szerzo osztlyt, ami meghatrozza, hogy a szveg legyen dlt (font-style) s kisebb (font-size):
<style type="text/css"> .szerzo { font-style: italic; font-size: 80%; } </style> Ebben a pldban a betmretet %-ban, azaz a norml mrethez viszonytott arnyban adjuk meg. Hasonl relatv megadsi md az em egysg hasznlata: 1em az aktulis bettpus mretvel egyezik meg. Van lehetsg abszolt mret megadsra is, ha kppontban, azaz pixelben (px) vagy pointban (pt) adjuk meg az rtket.
Ezutn azon a helyen, ahol hasznlni akarjuk, a HTML elem class attribtumban tudunk r hivatkozni:
<p class="szerzo">(Dek Ferenc)</p>
gy az oldalon tbb helyen is hivatkozhatunk erre a CSS osztlyra, akr klnbz HTML elemekben is.
JTANCS: Clszer olyan elnevezseket vlasztani a CSS osztlyainkhoz, amik arra utalnak, hogy mire szolgl az adott osztly, nem pedig arra, hogy hogyan nz ki. Pldul a fontos dolgok hangslyozsra szolgl osztlynl a kiemeles j elnevezs, a nagypiros viszont nem, mg ha a lnyeges rszeket az oldalon nagyobb, piros betvel jelentjk is meg. Ha kvetjk ezt a bevlt gyakorlatot, akkor nagyon knny lesz a dizjnon mdostani, pldul a kiemeles osztlyt btran tsznezhetjk kkre, a neve tovbbra is arra utal, hogy a fontos rszek megjelentsnl hasznljuk. A nagypiros osztlyban is trhatjuk a sznezst ms sznre, mkdni fog, csak ppen nem fogjuk ksbb rteni, hogy mirt hvjuk nagypirosnak, ha kken jelenik meg, azaz nehz lesz a kdunkat karbantartani.
Ez a ngy (*, elem, id, class) a leggyakrabban hasznlt szelektor tpus. Ezen kvl vannak mg tovbbi specilis szelektorok, amelyek szintn hasznosak lehetnek munknk sorn. Az n. pszeudo-osztlyok (pseudo-class) lehetv teszik specilis tulajdonsgokkal br elemek kivlasztst s ahhoz stlus definilst. A leggyakoribb plda erre a hiperhivatkozs: HTML szinten mindegyik egy-egy a elemnek ltszik, de az oldalon megjelenve lesz klnbsg kztk aszerint, hogy fl visszk-e az egeret (hover), vagy hogy megltogattuk-e mr (visited) a hivatkozott oldalt. Ezekre az esetekre megadhatunk ms formtumot CSS-ben:
a:hover { color: #be2d00; } a:visited { color: Black; } Ebben a pldban az is ltszik, hogy a sznekre CSS-ben ktflekppen hivatkozhatunk: a nevkkel vagy a kdjukkal. Nv szerint meglehetsen sok sznre tudunk hivatkozni
42
AliceBlue-tl YellowGreenig, de termszetesen csak a gyakoribbakra. A precz megolds a sznkdok hasznlata, ami a # jel utn 6 karakter megadst jelenti. Ez a 6 karakter valjban 32 karakter, mindhrom helyen az RGB sznsklnak megfelel 0-255 rtkek hexadecimlis vltozatai szerepelnek. Teht pldul a piros sznre hivatkozhatunk a nevvel (Red) vagy a kdjval (#ff0000) is. Ha nem akarjuk magunk elvgezni az tvltst, akkor hasznlhatjuk az rgb makrt, aminl zrjelben az RGB sznkomponensek rtkeit tzes szmrendszerben kell megadnunk, pldul: rgb(255,0,0)
Tipp: ha tetszik valahol egy szn s szeretnnk megtudni a kdjt, akkor hasznlhatjuk az Internet Explorer Developer Toolbar (F12) Tools menjnek Show Color
Picker (CTRL+K) eszkzt. A megjelen pipettval egyszeren mutassunk r a

weboldalon a szimpatikus sznre, s a kis ablakban mris ltjuk a sznhez tartoz HTML kdot:
Arra is van md, hogy n. pszeudo-elemekkel (pseudo-element) meghatrozzuk egy elem specilis tulajdonsgokkal br rsznek a formjt. Pldul az sszes bekezds els betjt (p:first-letter) felnagytva inicil hatst rhetnk el:
p:first-letter { font-size: 130%; }
Ezekkel a szelektorokkal a HTML dokumentum brmely elemt el tudjuk rni s meg tudjuk formzni. St, a HTML elemek egymsba gyazst kihasznlva egszen specifikus szelektorokat is hasznlhatunk. Az sszes olyan kpre (img), amely egy bekezdsen (p) bell tallhat, gy hivatkozhatunk:
p img { margin-right: 10px; }
Ezt persze fokozhatjuk akr tbb szint mlysgben, st osztlyokat s id-kat is bevonhatunk, azonban a gyakorlatban clszer kerlni a szelektorok tlbonyoltst, mert a bngsznek is tovbb tart megjelenteni, s mi sem fogjuk megrteni ksbb, hogy mirt gy csinltuk, valamint hogy ezek pontosan hogyan is jutnak rvnyre. Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba
43
Span s div Mi van akkor, ha nincs is a kvnt helyen semmilyen HTML elem? Ebben a kdrszletben pldul szerepel a nemkvnatos (elavult, nem javasolt a hasznlata, de a bngszk megrtik) font elem a lnyeg pirossal trtn kiemelsre:
Ez itt a <font color="red">lnyeges</font> rsz.
Ha az ajnlsoknak megfelelen mellzzk a font elemet, akkor marad a csupasz szveg, de vajon milyen szelektorral tudunk egyetlen szra hivatkozni? Sajnos semmilyennel, mindenkpp szksgnk van egy HTML elemre. Ha ilyen problmval tallkozunk, hogy az oldalon bell egy kisebb rszt szeretnnk megformzni, akkor beszrhatunk egy span elemet, s arra alkalmazhatjuk a stlust a korbban mr megismert mdokon:
<style type="text/css"> .fontos { color: red; } </style> Ez itt egy <span class="fontos">lnyeges</span> rsz.
Ha az oldalnak egy nagyobb rszt (pldul fejlc, jobb hasb, friss hrek blokk stb.) szeretnnk formzni, akkor hasonlan hasznlhatjuk a div (division) elemet. Mindkt elemnek van style, class s id attribtuma, a formzs teht hasonlan megy mindkt esetben. A nagy klnbsg, hogy a span n. inline elem, a div pedig blokk elem. Ez els megkzeltsben annyit jelent, hogy a span nem vltoztat az oldal elrendezsn, a div utn viszont alaprtelmezs szerint bekerl egy sortrs, ezzel is jelezve, hogy ott egy jabb nagyobb blokk kvetkezik. Ennl azonban fontosabb, hogy a span csak tovbbi inline elemeket tartalmazhat (pl. strong, em, abbr, de div vagy p nem), mg a div szinte brmilyen HTML elemnek lehet a szl eleme, gy akr bekezdseket vagy tovbbi div s span elemeket is tartalmazhat. Spant majdnem brmilyen msik elembe tehetnk, a div azonban szigorbb, pldul spanbe vagy p elembe nem gyazhatjuk. rkls A CSS egyik legrdekesebb s leghasznosabb tulajdonsga, hogy a belltsok rkldnek. Ennek ksznhet, hogy nem szksges minden belltst minden elemre definilnunk, hanem elg a legkls elemre megadnunk, onnan rkldni fog a gyermek elemekre. Lehet pldul egy bekezdsnk egy kiemelt rsszel:
<p> Jrtl-e mr <em>Makkoshotykn</em>? </p>
Ha a bekezdst kkkel rjuk, automatikusan a kiemels is kk lesz, nem szksges arra kln megadnunk ugyanezt a stlust:
p { color: blue; }
Szerencsre nem minden bellts rkldik, hanem csak azok, amelyeknek tipikusan kvnatos az rkldse. A keretezs (border) pldul nem rkldik. Ha rkldne, akkor a bekezdsre alkalmazott kereten bell megjelenne egy kln keret Makkoshotyka krl is. Ha szeretnnk kiknyszerteni az rklst, akkor az inherit rtket adhatjuk meg az attribtumnak:
border: inherit;
44
A CSS-ben ltalban igaz az, hogy a specifikusabb belltsok fontosabbak, mint az ltalnosabb belltsok, ezrt elfordulhat, hogy a szltl rkld rtket egy gyermek elemre megadott stlus fellrja. Ha ezt nem szeretnnk, hasznlhatjuk az !important kiegsztst:
em { color: red; } p { color: blue !important; }
Doboz modell Az elemek mretnek meghatrozshoz s helyes pozicionlshoz rdemes megismerkednnk a CSS doboz modellel (CSS box model). Az albbi bra szemllteti, hogy egy adott HTML elem (leggyakrabban div) esetn pontosan hol is lltjuk a bels marg (padding), keret (border) s kls marg (margin) rtkeket:
26. bra: A CSS doboz modell
Br a doboz modell logikusnak s egyrtelmnek ltszik, trtneti okokbl sajnos a bngsz gyrtk nem egyformn valstottk meg, emiatt knnyen elfordulhat, hogy ugyanazt az oldalt klnbz bngszkben megtekintve pr pixel klnbsget tapasztalunk. Ez tbbnyire nem okoz gondot, azonban ha nagyon kicentizzk az oldalt s mindent pixelre kikalkullunk, akkor lehet, hogy kellemetlen lmnyben lesz rsznk, pldul az egyik bngszben egyms mell kerl kt elem, mg egy msik bngszben egyms al trdeldnek, mert ott ppen nem frnek ki egy sorba. Az albbi bra pldul a W3C szabvnynak megfelel s az Internet Explorer rgebbi vltozatai ltal alkalmazott doboz modell kztti klnbsget szemllteti:
45
27. bra: IE s W3C doboz modell (Forrs: Wikipedia)
JTANCS: Br a szabvnyok s a bngszk egyre jobban kzelednek egymshoz, egyelre sajnos nem a doboz modell a CSS egyetlen bngszfgg rsze (lsd QuirksMode.org). A vratlan problmk elkerlse rdekben ezrt clszer az oldalunkat minden bngszben ellenrizni, amit a webhelyen tmogatni szeretnnk. Az oldal megjelensnek tesztelshez jl hasznlhat a Microsoft Expression SuperPreview, az ingyenesen letlthet IE Tester s az online szolgltatsknt elrhet BrowserShots.
Oldalelrendezsek A webhely arculatnak kialaktsakor az egyik els feladatunk az oldalak elrendezsnek kialaktsa lesz. Ki kell tallnunk, hogy milyen szles s milyen magas lesz az oldal, lesz-e fejlc, lblc, esetleg men s persze azt is, hogy mindez hol s mekkora mretben fog megjelenni. Hagyomnyosan erre ltezik egy nagyon egyszer megolds, a tblzat alap oldalelrendezs (tablebased layout). Ennek a lnyege, hogy a HTML nyelv ltal biztostott tblzat elemekkel (table, td, tr) valjban az egsz oldalt egy nagy, lthatatlan keretekkel megrajzolt tblzatknt kpzeljk el. Pldul a bal hasb a tblzat els oszlopa, a jobb hasb a tblzat utols oszlopa, a fels men pedig egy nagy cella, sszevonva a tblzat sszes oszlopt. Ha a nagy kls tblzat valamelyik celljt tovbb kell osztanunk, akkor abban jabb tblzatot helyeznk el, ahol a sorokat s oszlopokat az ignyeknek megfelelen vonjuk ssze. A vgeredmny egy gigantikus tblzat rengeteg, amibl szerencsre a vgfelhasznl semmit nem vesz szre.
46
A tblzatos elrendezsnek a slyosbtott fajtja az n. spacer GIF-ek alkalmazsa. Ennl a megoldsnl az oldal egyes elemeinek pozicionlst tltsz (azaz rejtett) kpfjlok tetszleges tmretezsvel oldjk meg, amelyek gy pp a kvnatos mrtkben toljk szt az oldalon lv rejtett tblzatot. Ennek a megkzeltsnek azonban szmos htrnya van: A HTML nyelv tblzattal kapcsolatos elemeit tblzatos adatok megjelentsre talltk ki. Egy tblzatnak lehet fejlc sora, lblc sora s benne az egyes cellkban adatok szoktak megjelenni, s ezeket az adatokat lehet soronknt vagy oszloponknt olvasni. Egy sz mint szz, a table elem arra val, hogy a felhasznlnak egy a hagyomnyos rtelemben vett tblzatot jelentsnk meg. A table elem szemantikai jelentst bizonyos programok kihasznljk, pldul a ltssrltek ltal hasznlt kpernyolvask vagy a keresmotorok. Ezek az alkalmazsok specilisan rtelmezik a tblzatot, ezzel segtve a felhasznlt. A tblzat alap oldalelrendezs nagyon sok HTML kdot eredmnyez, mely nemcsak az oldal letltst s betltst lasstja, hanem radsul nagyon nehezen tlthat, azaz nehezen tudunk ksbb belejavtani.
A pokolba vezet t tltsz kpekkel s egymsba gyazott, rejtett tblzatokkal van kirakva. - Bill Merikallio, Adam Pratt
Ezek a megoldsok a maguk idejben sem voltak idelisak, ma mr kifejezetten idejtmltak, st nem tlzs azt lltani, hogy napjainkban igen ciki ezeket hasznlni pozicionlsra. A korrekt megolds a tblzatmentes oldalelrendezs (tableless layout) alkalmazsa. A tblzatmentes elrendezsnl az alapelv, hogy mindent stlusbelltsokkal prblunk a megfelel helyen s a megfelel formban megjelenteni. Ez a legtbbszr azt jelenti, hogy az oldalon ltrehozunk szmos div elemet (pl. fejlc, men, keres doboz, lblc stb.) s ezeket CSS-sel mretezzk s pozicionljuk. A kvetkez pldban az egyik leggyakoribb oldalelrendezst ksztjk el tblzatok nlkl. A cl egy olyan oldal, aminek van egy 50 pixel magas fejlce, egy 20 pixel magas lblce, a kett kztti rsz pedig fgglegesen 30%-70% arnyban osztott, s mindez sszesen 950 pixel szlessgben kzpre rendezve jelenik meg az oldalon, valahogy gy:
Fejlc
Men
Tartalom
Lblc Mivel az oldal egyes rszei nmagukban is sszetettek lehetnek (kpek, bekezdsek, felsorolsok stb.), ezrt minden egyes rszt nll div elembe zrunk, amiket pedig az id attribtumon keresztl egyedi nvvel ltunk el:
47
<div id="keret"> <div id="fejlec">Fejlc helye</div> <div id="balmenu">Bal men helye</div> <div id="tartalom">Tartalom helye</div> <div id="lablec">Lblc helye</div> </div>
A CSS fjlban ezekre az egyedi azonostkra hivatkozva lltjuk be az oldal egyes rszeinek megjelenst. Az egsz oldal legyen 950 pixel szles s kzpre rendezett:
#keret{ width: 950px; margin-left: auto; margin-right: auto; }
Majd jjjn az 50 pixel magas fejlc:

#fejlec{ height: 50px; }
A kvetkez kt div a balmenu s a tartalom egyms mellett:

#balmenu{ width: 30%; float: left; } #tartalom{ width: 70%; float: right; }
Vgl pedig a lblc, ami a teljes szlessget kitlti s 20 pixel magas:

#lablec{ height: 20px; clear: both; }
Ezzel kszen is vagyunk. Lthat, hogy a HTML kd nagyon egyszer maradt, s az azonostknak ksznheten jl olvashat, hogy az egyes blokkok az oldal melyik rszt jelentik. A CSS kd sem bonyolult, radsul nagyon rugalmas, hiszen knnyen vehetjk magasabbra a fejlcet vagy ppen szlesebbre a ment. Tbb stluslap Van lehetsgnk arra, hogy egy HTML oldalhoz tbb CSS stluslapot rendeljnk. Ehhez mindssze annyit kell tennnk, hogy a HTML oldal head rszbe tbb link elemet tesznk s tbb kls .css fjlra hivatkozunk. Ez tbb esetben is hasznos lehet. Az egyik gyakori eset tbb stluslap alkalmazsra az n. reset CSS. A bngszk az egyes HTML elemekhez rendelnek egy alaprtelmezett megjelentst, pldul a cmsorokat nagyobb betvel jelentik meg, a bekezdsek kztt hagynak egy kis helyet stb. Sajnos ez nem egszen egyezik az egyes bngszkben, ppen ezrt bevlt gyakorlat egy nll CSS fjl alkalmazsa, amely eltrli ezeket a klnbsgeket. Eric Meyer pldul ezt javasolja (rszlet):
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike,
48
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; }
Egy msik rdekes lehetsg az n. alternatv stluslapok (alternate style sheet) alkalmazsa. Itt is arrl van sz, hogy egy weboldalhoz tbb CSS fjlt rendelnk hozz, csakhogy ezek nem egyszerre alkalmazdnak, hanem mindig csak az, amit a felhasznl kivlaszt. gy az oldal szoksos megjelentsn kvl kszthetnk pldul gyengnltknak sznt ersen kontrasztos vltozatot. Ennek a megvalstsa is a head elembe tett link elemekkel lehetsges, csak ppen mg nevet is kell adnunk a stluslapunknak a title attribtumon keresztl:
 <link rel="stylesheet" type="text/css" href="reset.css" />  <link rel="stylesheet" type="text/css" href="normal.css" title="Norml vltozat" />  <link rel="alternate stylesheet" type="text/css" href="large.css" title="Gyengnlt vltozat" />
Az alaprtelmezett s az alternatv vltozatok kztt az oldal ltogati a bngsz beptett menpontjai segtsgvel vlthatnak (Firefoxban pldul View men Page style menpontjval). A tbb stluslap lehetsgnek legpraktikusabb kihasznlsa ktsgkvl a nyomtatbart vltozat megvalstsa. Amikor kinyomtatunk egy weboldalt, akkor a bngsz megprblja pontosan azt megjelenteni a nyomtatn, amit a kpernyn is ltunk, ezzel azonban szmos problma lehet: elfordulhat, hogy az oldal szlesebb, mint a papr, a szveg stt alapon fehr betkkel szedett, az oldal bal hasbja (ami biztosan rfr a paprra) csak ment s reklmot tartalmaz stb. Ezeknek a problmknak az elkerlsre clszer az oldalhoz egy nyomtatbart stluslapot is kszteni. A link elem media attribtumban adhatjuk meg, hogy az adott stluslapot a bngsz a kpernyn hasznlja (screen) vagy nyomtatskor (print):
<link rel="stylesheet" href="main.css" type="text/css" media="screen" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" />
A nyomtatbart vltozat szmos ponton eltrhet az oldal szoksos megjelentstl: Fehr alapon fekete betkkel jelenik meg. Felesleges kperny elemek (pldul men, reklm) eltnnek. Extra informcik jelenhetnek meg (pldul szerzi jogok, linkek URL-jei). Serif (talpas) bett hasznl (nyomtatsban jobban olvashat). Abszolt helyett relatv mretezst alkalmaz (pldul 950px szlessg helyett 100%). 49
A leggyakoribb feladat a nemkvnatos blokkok elrejtse, pldul az oldalelrendezseknl ltott bal oldali ment gy rejthetjk el:
#balmenu{ display: none; } #tartalom{ width: 100%; }
A nyomtatshoz hasznlt CSS belltsok kialaktsa idignyes feladat, de megri, mert a felhasznl sokkal elgedettebb lesz, amikor a jl bevlt mdon, a bngsz Nyomtats ikonjra kattintva kinyomtatja az oldalt, ezrt ltalban megri ezzel fradnunk. Ellenrzs Miutn elkszltnk az oldalunkkal s a hozz tartoz CSS fjllal, clszer lefuttatnunk egy ellenrzst, hogy elkszlt kdunk megfelel-e a szabvnynak. Erre legegyszerbben a W3C CSS Validation szolgltatst hasznlhatjuk, amely a http://jigsaw.w3.org/css-validator/ cmen ingyenesen rhet el. Itt megadhatjuk egy nyilvnosan elrhet webhelynek a cmt, feltlthetnk a gpnkrl egy CSS fjlt, vagy akr egy nagy szvegdobozba is bemsolhatjuk a CSS kdunkat, majd a Check gombra kattintva azonnal megkapjuk az elemzs eredmnyt.
28. bra: A W3C CSS Validation szolgltatsa
A W3C-nek ezt a hivatalos szolgltatst szmos webfejleszt program s bngsz kiegszts beptetten tartalmazza, pldul megtallhat az Internet Explorer Developer Toolbaron is a Validate menpont alatt:
50
29. bra: CSS validator az IE Developer Toolbaron
Ennek a fejezetnek a segtsgvel megrtettk az internet mkdst, valamint tisztban vagyunk az alapvet technolgikkal s protokollokkal. Itt az ideje, hogy elmlyedjnk a dinamikus weboldalak ksztsnek rejtelmeiben.
51
2. fejezet Bevezets a WebMatrixba s az ASP.NET weboldalakba

Ebben a fejezetben megismerhetjk a Microsoft WebMatrixot, egy ingyenes webfejleszt technolgit, mely a legjobb krnyezetet nyjtja webfejlesztk szmra. A fejezetbl megtudhatjuk: Mi az a WebMatrix? Hogyan telepthetjk fel? Hogyan kezdjnk el egyszer weboldalakat ltrehozni a WebMatrix segtsgvel? Hogyan kszthetnk dinamikus weboldalakat a WebMatrixszal? Hogyan programozhatunk weboldalakat a Visual Studio segtsgvel, hogy mg tbbet kihozhassunk az oldalunkbl?
Mi az a WebMatrix?
A WebMatrix egy ingyenes, knnyen tlthat fejlesztkrnyezet, mely tbbfle webes eszkzt magba foglalva teszi gyerekjtkk weboldalak elksztst. A csomag az IIS Expresst (egy fejleszti webszervert), az ASP.NET-et (egy webes futtatkrnyezetet) s az SQL Server Compactot (egy beptett adatbzist) tartalmazza. Ezen fell tallunk egy egyszer eszkzt, mellyel hatkonyabban fejleszthetjk s hamarabb elindthatjuk weboldalunkat klnfle nylt forrskd modulok felhasznlsval. A most elsajttott tudsunkat s WebMatrixban fejlesztett kdunkat knnyedn felhasznlhatjuk a Visual Studio vagy SQL Server hasznlata sorn is. A WebMatrix segtsgvel kszlt weboldalak dinamikusak is lehetnek felhasznli interakci vagy ms esemnyek, pldul az adatbzis vltozsa esetn megvltozhat a lapok tartalma vagy megjelense. ASP.NET alap dinamikus weboldalak ksztseskor Razor szintaxist, C# vagy Visual Basic programozsi nyelvet is hasznlhatunk. Ha mr hasznlunk valamilyen programozi eszkzt, kiprblhatjuk a WebMatrix eszkzket, vagy kszthetnk sajt eszkzeinkkel olyan weboldalakat, melyek az ASP.NET-et hasznljk. Ebben a fejezetben megtudhatjuk, hogyan segt a WebMatrix abban, hogy webhelyeket hozzunk ltre, s dinamikus weboldalakat ksztsnk.
Webmatrix teleptse
A WebMatrix teleptshez hasznlhatjuk a Microsoft ingyenes Web Platform Installert, mellyel egyszeren telepthetjk s konfigurlhatjuk a webbel kapcsolatos technolgikat. 1. Ha mg nem rendelkeznk a Web Platform Installerrel, letlthetjk a kvetkez cmrl: http://go.microsoft.com/fwlink/?LinkID=205867 2. Indtsuk el a Web Platform Installert, vlasszuk a Products flet, s kattintsunk a WebMatrix felirat melletti Add gombra a teleptshez!
Honlappts a XXI. szzadban 2. fejezet Bevezets a WebMatrix Betba s az ASP.NET weboldalakba
52
Megjegyzs: Ha mr korbban felteleptettk a WebMatrix Beta verzijt, a Web Platform Installer frissti azt a vgleges verzira. Ebben az esetben elfordulhat, hogy a korbban ksztett webhelyek nem jelennek meg a My Sites listban, amikor elszr megnyitjuk a WebMatrixot. Egy korbban ksztett webhely megnyitshoz kattintsunk a Site From Folder ikonra, vlasszuk ki a kvnt webhelyet, s kattintsunk az Open gombra! A WebMatrix kvetkez megnyitsakor a webhely mr ltszani fog a My Sites listban.
Els lpsek a WebMatrixszal

Elsknt hozzunk ltre egy j webhelyet s egy egyszer weboldalt! 1. Indtsuk el a WebMatrixot!
53
2. Vlasszuk a Site From Template lehetsget! A sablonok (Templates) elre megrt fjlokat s oldalakat tartalmaznak klnbz tpus webhelyekhez.
3. Vlasszuk az Empty Site lehetsget, s nevezzk Hello-World-nek! 4. Kattintsunk az OK gombra. A WebMatrix ltrehozza s megnyitja az j webhelynket.
54
Az ablak tetejn talljuk a Gyorselrsi eszkztrat s a szalagot, ahogyan a Microsoft Office 2010 programjaiban megszokhattuk. A bal als sarokban lthatjuk a munkafellet-vlasztt (workspace selector), ahol a klnbz gombokra kattintva vltoztathatjuk, hogy mi jelenjen meg felettnk a bal oldali panelon. Jobb oldalon talljuk a tartalom panelt, ahol pldul jelentseket tekinthetnk meg, vagy fjlokat mdosthatunk. Vgl az als sorban az rtestsi svot talljuk, ahol az pp aktulis tudnivalkrl rteslhetnk.
Weboldal ltrehozsa
Vlasszuk a WebMatrixban a Files munkafelletet! Ezzel a fellettel kezelhetjk fjljainkat s mappinkat. A baloldali panelban lthatjuk a webhely fjljainak struktrjt.
1. Kattintsunk a szalagon a New gombra, azon bell a New File lehetsgre! Honlappts a XXI. szzadban 2. fejezet Bevezets a WebMatrix Betba s az ASP.NET weboldalakba
55
A WebMatrix klnfle fjltpusokat ajnl fel. Legtbbjk, pldul a HTML, CSS vagy a TXT mr ismers lehet.
2. Vlasszuk a CSHTML-t, s a Name felirat mell rjuk be a fjl nevt: default.cshtml. A CSHTML oldalak olyan specilis oldalak a WebMatrixban, melyek tartalmazhatnak hagyomnyos kdokat, mint HTML vagy JavaScript, de ezenfell programkdokat is rhatunk weboldalunkhoz. (A CSHTML fjlokkal ksbb rszletesebben megismerkednk.) 3. Kattintsunk az OK gombra! A WebMatrix ltrehozza a fjlt, s megnyitja a szerkesztben.
Lthatjuk, hogy ez egy hagyomnyos HTML kd. 4. Adjuk hozz a kvetkez cmet, fejlcet s bekezdst az oldalhoz:
56
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Hello World Page</title> </head> <body> <h1>Hello World Page</h1> <p>Hello World!</p> </body> </html>
5.
Gyorselrsi eszkztron mentsk munknkat a Save gombra kattintva!
Kattintsunk a szalagon a Run gombra.
Megjegyzs: Mieltt a Run gombra kattintva futtatjuk a weboldalt, gyzdjnk meg rla, hogy a futtatni kvnt weboldalunk van kivlasztva a Files felleten! A WebMatrix mindig azt az oldalt indtja el, amelyik ki van jellve bal oldalon, akkor is, ha pp valamelyik msik oldalt szerkesztjk. Ha egy oldalt sem jelltnk ki, a WebMatrix megprblja az oldal kezdlapjt (default.cshtml) futtatni, de ha nem tall ilyet, a bngsz hibt fog jelezni. A WebMatrix elindt egy webszervert (IIS Express), melynek segtsgvel weboldalaink futst tesztelhetjk. Az oldal az alaprtelmezett bngsznkben nylik meg.
Helperek teleptse a Package Manager segtsgvel

Miutn felteleptettk a WebMatrixot, s ltrehoztuk els webhelynket, rdemes felteleptennk az ASP.NET Web Helpers Libraryt. Ez a gyjtemny olyan helpereket (komponenseket) tartalmaz, melyek egyszerbb teszik a gyakori programozsi feladatokat, s gyakran lesznek segtsgnkre az tmutat sorn. (Nhny helper mr automatikusan feltelepl az ASP.NET Web Pages teleptsvel, de nhny tovbbit kell teleptennk ms gyjtemnyekbl). Az elrhet helperek listjt a fggelkben talljuk. A kvetkez lpsekbl megtudhatjuk, hogyan hasznljuk a Package Manager eszkzt a Helper csomagok teleptshez. 1. Futtassuk a korbban elksztett default.cshtml oldalunkat! 2. A bngsz cmsorban trljk ki a cm vgrl a default.cshtml feliratot, s rjuk t _Adminra! Az eredmny legyen ehhez hasonl (nem baj, ha a port szma nem 8080): Honlappts a XXI. szzadban 2. fejezet Bevezets a WebMatrix Betba s az ASP.NET weboldalakba
57
http://localhost:8080/_Admin 3. Nyomjuk meg az Entert a cm megnyitshoz! Mivel ez az els alkalom, hogy belpnk az _Admin oldalra, ltre kell hoznunk egy jelszt. 4. Hozzuk ltre a jelszt! Ha ezzel ksz vagyunk, az _Admin oldal bejelentkezik, s lthatjuk a Package Manager oldalt. Alaprtelmezsknt a Package Manager minden teleptett csomagot (package) mutat.
5. Kattintsunk a Show felirat melletti legrdl menre, s vlasszuk az Online lehetsget! Erre a lehetsgre kattintva egy listt kapunk a telepthet csomagokrl. (Ha szeretnnk tovbbi forrsokat megtekinteni, kattintsunk a Manage Feeds linkre, ahol hozzadhatunk, mdosthatunk vagy trlhetnk forrsokat.)
Megjegyzs: Vlasszuk a legrdl menben az Updates lehetsget a mr teleptett csomagok elrhet frisstseinek megjelentshez!
58
6. Kattintsunk a microsoft-web-helpers felirat melletti Install gombra az ASP.NET Web Helpers Library teleptshez. A megnyl oldalon rszletesebb informcikat kapunk a csomagrl, illetve lthatjuk a csomag licencszerzdst. 7. A rszleteket ler oldalon kattintsunk ismt az Install gombra a teleptshez! Amikor a csomag felteleplt, a Package Manager jelzi a vltozst. Ha valami oknl fogva el szeretnnk tvoltani az ASP.NET Helpers Libraryt, ezen az oldalon tehetjk meg.
8. Ismteljk meg a 6. s 7. lpseket a Facebook.Helper teleptshez! A Facebook helperrel ksbb rszletesebben megismerkednk. A kvetkez fejezetben megtudhatjuk, milyen egyszeren alakthatjuk default.cshtml fjlunkat egy dinamikus weboldall.
ASP.NET weboldal kdok hasznlata

Most olyan oldalt fogunk kszteni, melyben egyszer kdok segtsgvel jelenthetjk meg a szerveren aktulis dtumot s idt az oldalon. Ez a plda bemutatja a Razor szintaxis hasznlatt, mellyel kdokat illeszhetnk az ASP.NET weboldalak HTML kdjba. (Ezzel rszletesebben a kvetkez fejezetben foglalkozunk.) A most kvetkez kd bemutatja az egyik helpert, melyrl korbban olvashattunk. 1. Nyissuk meg a default.cshtml fjlt! 2. Ksztsk el az oldalunkat a pldnak megfelelen:
<!DOCTYPE html> <html lang="en"> <head>
59
<meta charset="utf-8" /> <title>Hello World Page</title> </head> <body> <h1>Hello World Page</h1> <p>Hello World!</p> <p>The time is @DateTime.Now</p> </body> </html>
Az oldal megegyezik a hagyomnyos HTML jellsrendszerrel, egy kivtellel: a @ karakter jelli az ASP.NET programkdokat. 3. Mentsk el az oldalt, s indtsuk el a bngszben! Lthatjuk a pontos dtumot s idt.
Ez az egyszer kdsor elvgezte az sszes munkt: kidertette a pontos idt, kivlasztotta a megjelens formtumt, s elkldte azt a bngszbe. (A formtum egyszeren mdosthat, ez csak az alaprtelmezett.) Tegyk fel, hogy bonyolultabb kdot szeretnnk beszrni, pldul, hogy grgessk folyamatosan egy kivlasztott Twitter felhasznl bejegyzseit. Ehhez hasznlhatunk helpert, ami, mint korbban olvashattuk, egyszerbb teszi a gyakori feladatokat ebben az esetben a Twitter bejegyzsek begyjtst s helyes megjelentst. 1. Hozzunk ltre egy j CSHTML fjlt TwitterFeed.cshtml nven! 2. Az j oldal tartalma legyen a kvetkez:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Twitter Feed</title> </head> <body> <h1>Twitter Feed</h1> <form action="" method="POST"> <div> Enter the name of another Twitter feed to display: <input type="text" name="TwitterUser" value=""/> <input type="submit" value="Submit" /> </div> <div> @if (Request["TwitterUser"].IsEmpty()) { @Twitter.Search("microsoft")
60
} else { @Twitter.Profile(Request["TwitterUser"]) } </div> </form> </body> </html>
Ez a HTML kd olyan oldalt r le, ahol egy beviteli mezt tallunk a felhasznl nevnek bershoz, s egy Submit gombot a kldshez. Ez az els <div> cmkepros kztt tallhat. A kvetkez <div> pros kztt tallunk nhny sor kdot. (Az ASP.NET weboldalaknl a @ karakterrel jelljk a programkdokat). Amikor elszr jelenik meg a weboldal, vagy a felhasznl resen hagyja a szvegdobozt, a Request["TwitterUser"].IsEmpty felttel rvnyeslni fog. Ebben az esetben az oldal a microsoft keressre adott bejegyzseket fogja listzni. A tbbi esetben a megadott felhasznlnvhez tartoz bejegyzsek lthatk. 3. Futtassuk az oldalt a bngsznkben! A Twitterolvas a microsoft kifejezst tartalmaz bejegyzseket listzza.
4. rjunk be egy Twitter felhasznlnevet, s kattintsunk a Submit gombra! Megjelennek a felhasznl bejegyzsei. (Ha nem ltez felhasznlnevet runk be, a Twitterolvas megjelenik, de res lesz.) Ez a plda egy kis betekintst adott abba, hogy hogyan hasznlhatjuk a WebMatrixot, s hogyan kszthetnk ASP.NET alap dinamikus weboldalakat a Razor szintaxis hasznlatval. Honlappts a XXI. szzadban 2. fejezet Bevezets a WebMatrix Betba s az ASP.NET weboldalakba
61
A kvetkez fejezet rszletesebben foglalkozik a programkddal. Az azt kvetkez fejezetekben pedig megtudhatjuk, hogyan hasznlhatunk programkdot klnfle weboldalakkal kapcsolatos feladatok elvgzshez.
ASP.NET Razor oldalak programozsa Visual Studiban

Az ASP.NET Razor oldalakat programozhatjuk a WebMatrix segtsgvel, de hasznlhatjuk a Visual Studio 2010-et is, annak teljes verzijt, vagy az ingyenes Visual Web Developer Express editiont. Ha a Visual Studiot vagy a Visual Web Developert hasznljuk, kt programozi eszkz teheti hatkonyabb munknkat az IntelliSense s a debugger. Az IntelliSense a szerkesztben mkdve jelent meg a tartalomhoz kapcsold lehetsgeket. Ha pldul egy HTML elementet runk be, az IntelliSense felajnlja az elementhez kapcsold attribtumokat, s azt is megmutatja, milyen rtkekek adhatk meg az egyes elementekhez. Az Intellisense segtsgnkre van HTML, JavaScript, C# s Visual Basic kd rsakor (Ezeken a nyelveken rjuk az ASP.NET weboldalakat.) A debugger segtsgvel megllthatunk egy programot futs kzben. Ellenrizhetjk, hogy az egyes vltozk milyen rtkeket vettek fel, s soronknt futtathatjuk a programot, hogy lssuk annak mkdst. Ha a szmtgpre fel van teleptve a Visual Studio, a WebMatrixban szerkesztett webhelyeket megnyithatjuk a Visual Studiban, hogy kihasznlhassuk az Intellisense s a debugger nyjtotta lehetsgeket. 1. Nyissuk meg az ebben a fejezetben ksztett webhelynket, s vlasszuk a Files felletet! 2. Kattintsunk a szalagon a Visual Studio Launch gombra!
Miutn a webhely megnylik a Visual Studiban, lthatjuk annak felptst a Visual Studio ablak Solution Explorer paneljban. A kvetkez illusztrciban a Visual Web Developer 2010 Expresst lthatjuk, benne a ltrehozott webhelynkkel.
62
A Visual Studiban szerkesztett ASP.NET Razor oldalakhoz hasznlhat IntelliSenserl s debuggerrl rszletesebben olvashatunk a fggelkben (ASP.NET Weboldalak programozsa Visual Studioban). ASP.NET oldalak ltrehozsa s tesztelse sajt szvegszerkesztvel Nem muszj a WebMatrix Editort hasznlnunk ASP.NET weboldalak ltrehozshoz s tesztelshez. Egy oldal ltrehozshoz brmilyen szvegszerkesztt hasznlhatunk, belertve a Notepadet. Az egyetlen, amire oda kell figyelnnk, hogy .cshtml kiterjesztssel mentsk az oldalakat (Visual Basic esetn .vbhtml kiterjesztssel). A .cshtml oldalak tesztelsnek legegyszerbb mdja az, hogyha elindtunk egy webszervert (IIS Express) a WebMatrixban tallhat Run gomb segtsgvel. Ha nem szeretnnk hasznlni a WebMatrixot, elindthatjuk a webszervert a parancssorbl is, s hozzrendelhetnk egy adott portszmot. Ezutn be kell rnunk a portszmot a cmsorba, amikor .cshtml fjlokat szeretnnk megtekinteni a bngszben. A Windowsban nyissuk meg a parancssort rendszergazdai jogosultsgokkal, s lpjnk a kvetkez mappba: C:\Program Files\IIS Express 64-bites rendszer esetn a kvetkez mappt nyissuk meg: C:\Program Files (x86)\IIS Express rjuk be a kvetkez parancsot, a webhelynk elrsi tjnak megfelelen! iisexpress.exe /port:35896 /path:C:\BasicWebSite Tetszleges portot vlaszthatunk, csupn arra kell figyelnnk, hogy ne olyan legyen, melyet ms program mr hasznl. (Az 1024 fltti portszmok ltalban szabadok.) A path rtkt gy adjuk meg, hogy a tesztelni kvnt .cshtml fjlokat tartalmaz mappra mutasson! Honlappts a XXI. szzadban 2. fejezet Bevezets a WebMatrix Betba s az ASP.NET weboldalakba
63
A parancs lefuttatsa utn megnyithatjuk s bngszhetjk .cshtml fjljainkat, ha a bngsz cmsorba berjuk: http://localhost:35896/default.cshtml Az IIS Express parancssori funkciinak megismershez rjuk be a parancssorba: iisexpress.exe /?
64
3. fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal

Ebben a fejezetben megismerkedhetnk az ASP.NET weboldalak programozsval s a Razor szintaxissal. Az ASP.NET a Microsoft ltal kifejlesztett technolgia webszervereken fut dinamikus weboldalakhoz. A fejezet tartalma: 8 tipp az indulshoz. Az alapvet programozsi fogalmak, amelyekre szksgnk lesz a tovbbiakban. Mi az ASP.NET szerverkd s a Razor szintaxis lnyege?
8 f programozsi tipp
Ebben a rszben sszefoglaltuk a legfontosabb tudnivalkat ahhoz, ahogy elkezdhessnk ASP.NET szerver kdot rni Razor szintaxissal. Megjegyzs: A Razor syntax a C# programozsi nyelvre pl, amelyet ebben a knyvben vgig hasznlunk. Azonban a Razor syntax a Visual Basic nyelvet is tmogatja, gy a knyvben lertakat Visual Basicben is hasznlhatunk. Rszletesebb informcit a fggelk Visual Basic progamozsi nyelv s szintaxisa rsze tartalmaz. Ezen programozsi technikk tbbsgrl tovbbi rszleteket tallhatunk a fejezetben tovbb haladva.
1. A @ karakter jelli a kdrszleteket

A @ jel segtsgvel begyazott kifejezseket s egy- vagy tbbsoros parancsblokkok kezdett jelezzk.
 @{ var total = 7; } @{ var myMessage = "Hello World"; }  <p>The value of your account is: @total </p> <p>The value of myMessage is: @myMessage</p>  @{ var greeting = "Welcome to our site!"; var weekDay = DateTime.Now.DayOfWeek; var greetingMessage = greeting + " Today is: " + weekDay; } <p>The greeting is: @greetingMessage</p>
Az eredmny gy jelenik meg a bngszben:
Honlappts a XXI. szzadban 3. fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal
65
HTML kdols Ahogy az elz pldkban lthattuk, a @ jel hasznlatakor az ASP.NET .n. HTML kdolja a kimenetet: A HTML-ben specilis jelentst hordoz karaktereket (mint pldul a <,> s az &) lecserli a HTML szabvnyban rgztett helyettest karaktersorozatokra, gy azokat a bngsz kirajzolja a kpernyre, s nem kdnak rtelmezi. HTML kdols nlkl a kdunk kimenete bizonyos esetekben nem jelenne meg jl, st, akr biztonsgi rs is keletkezhetne a weboldalunkon. Ha HTML kdot szeretnnk megjelenteni (pl <p></p> a bekezdsekhez vagy <em></em>, hogy kiemeljnk egy szveget), lsd: Szveg, Markup s Kd egyestse a Kdblokkban. Rszletesebb informcit a HTML kdolsrl a 5. fejezetben (Munka az rlapokkal) olvashatunk.
2. A kdblokkokat kapcsos zrjelek kz zrjuk

Egy kdblokk egy vagy tbb utastst tartalmaz, s ezeket kapcsos zrjelek kz rjuk
 @{ var theMonth = DateTime.Now.Month; } <p>The numeric value of the current month: @theMonth</p>  @{ var outsideTemp = 79; var weatherMessage = "Hello, it is " + outsideTemp + " degrees."; } <p>Today's weather: @weatherMessage</p>
3. Az utastsokat pontosvesszvel zrjuk le

66
Blokkon bell minden utasts pontosvesszre kell, hogy vgzdjn. A begyazott kifejezsek nem vgzdnek pontosvesszvel.
 @{ var theMonth = DateTime.Now.Month; }  @{ var outsideTemp = 79; var weatherMessage = "Hello, it is " + outsideTemp + " degrees."; }  <p>Today's weather: @weatherMessage</p>
4. rtkek trolsra vltozkat hasznlunk

rtkeket a vltozkban trolhatunk. Ezek lehetnek stringek (szvegek), szmok, dtumok stb. j vltozt a var kulcsszval hozhatunk ltre a parancsblokkokban. A @ jel segtsgvel a vltoz rtkt egyszeren begyazhatjuk a HTML kdba.
 @{ var welcomeMessage = "Welcome, new members!"; } <p>@welcomeMessage</p>  @{ var year = DateTime.Now.Year; }  <p>Welcome to our new members who joined in @year!</p>
5. A szveget tartalmaz stringeket ketts idzjelek kz rjuk

A string egy karaktersorozat, amit szvegknt kezelnk. Ahhoz, hogy megklnbztessk a szveget a programkdtl, idzjelek kz kell tegyk:
@{ var myString = "This is a string literal"; }
A C# kdban gy elhelyezett szveg (string literal) esetn a visszaperjelnek (\) s dupla idzjelnek specilis jelentse van. Ezrt ha visszapert tartalmaz szveget szeretnnk elhelyezni a C# kdban, akkor a verbatim string literal jellst kell hasznlunk: az els idzjel el egy @ karaktert kell elhelyezni.
67
 @{ var myFilePath = @"C:\MyFolder\"; } <p>The path is: @myFilePath</p>
Ha a szveg maga idzjelet tartalmaz, azt meg kell klnbzetnnk a string literalt lezr idzjeltl. Verbatim string literal jells esetn kt egymst kvet idzjel felel meg egy sz szerinti idzjelnek.
 @{ var myQuote = @"The person said: ""Hello, today is Monday."""; } <p>@myQuote</p>
Megjegyzs: A @ karakternek tbb jelentse van: az ASP.NET oldalakban a programkd kezdett jelljk vele, mg a C# programkdon bell a verbatim string literal kezdett jelli. Errl bvebben az albbi oldalon tjkozdhatunk: http://msdn.microsoft.com/en-us/library/aa691090(VS.71).aspx
6. A kd rzkeny a kisbetkre s nagybetkre.

A C#-ben a kulcsszavak (var, true, if) s a vltoz nevek rzkenyek a kis- s nagybetkre. A kvetkez kdsorok kt klnbz vltozt hoznak ltre: lastName s LastName.
@{ var lastName = "Smith"; var LastName = "Jones"; }
Ha egy vltozt var lastName = "Smith" utastssal deklarljuk ksbb a @LastName kifejezssel prblunk hivatkozni r, akkor hibt kapunk, a LastName nem felismerhet. Megjegyzs: Visual Basic nyelv nem rzkeny a kis-nagybetkre. Tovbbi informcikat a fggelkben (A Visual Basic programozsi nyelv s szintaxisa) olvashatunk.
7. A kd nagy rsze objektumokkal foglalkozik

Objektumokkal reprezentljuk azokat a dolgokat, amiket a programunkkal manipullni szeretnnk (pl. oldal, szvegdoboz, fjl, kp, webes lekrs, e-mail, az datbzis egy sora stb.) Egy objektum jellemzit a tulajdonsgain keresztl tudhatjuk meg. Pldul egy szvegdoboznak van tbbek kzt egy Text (szveg) tulajdonsga; egy lekrsnek van egy Url tulajdonsga; egy e-mailnek van From (felad) tulajdonsga; egy gyfl objektumnak pedig FirstName (keresztnv) tulajdonsga. Az objektumok tovbb rendelkeznek metdusokkal is, ezek a mveletek, melyekre az objektum kpes. Erre j plda a fjl objektum Save (ments) metdusa, egy kp objektum Rotate (elforgats) metdusa, vagy egy e-mail objektum Send (klds) metdusa. Sokszor fogjuk hasznlni a Request (lkrs) objektumot, ami egy elkldtt rlap meziben tallhat rtkeket adja vissza; esetleg azt, hogy milyen tpus bngsz indtotta a lekrst; a lekrt oldal Honlappts a XXI. szzadban 3. fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal
68
URL-jt, vagy ppen azonostja a felhasznlt, s mg sok minden msra is kpes. A kvetkez plda bemutatja, hogyan rjk el a Request objektum tulajdonsgait, s hogyan hvjuk meg a MapPath nev metdust. Ezzel megtudhatjuk egy lap szerveroldali teljes elrsi tjt.
<table border="1"> <tr> <td>Requested URL</td> <td>Relative Path</td> <td>Full Path</td> <td>HTTP Request Type</td> </tr> <tr> <td>@Request.Url</td> <td>@Request.FilePath</td> <td>@Request.MapPath(Request.FilePath)</td> <td>@Request.RequestType</td> </tr> </table>
8. A kdban elgazsokat helyezheznk el

A dinamikus weboldalak egyik kulcs tulajdonsga, hogy kpesek vagyunk eldnteni, mi trtnjen klnbz helyzetekben. Ennek a legltalnosabb mdja az if parancs (s az opcionlis else parancs)
@{ var result = ""; if(IsPost) { result = "This page was posted using the Submit button."; } else { result = "This was the first request for this page."; } } <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form method="POST" action="" > <input type="Submit" name="Submit" value="Submit"/> <p>@result</p> </form> </body> </html>
69
</body> </html>
Az if(IsPost) utasts az if(IsPost == true) rvidtse. Az if utastssal sokfle mdon tesztelhetnk klnfle eseteket, ismtelhetnk kd blokkokat. Ezekrl a ksbbiekben tbbet megtudhatunk. Az eredmny egy bngszben megjelentve (a Submit gomb megnyomsa utn):
HTTP GET s POST metdusok s az IsPost tulajdonsg A weblapok lekrshez hasznlt HTTP protokoll szerint a bngsz alapveten ktflekppen fordulhat a szerverhez. GET esetn elssorban tartalmat kr le (pl. egy weboldalt, egy kp fjlt), mg POST esetn tartalmat kld a szervernek (pl. egy kitlttt rlap tartalmt). ltalban, amikor a felhasznl elszr lekr egy oldalt, a lekrdezs a GET metdust hasznlja. Ha a felhasznl kitlt egy rlapot s rklikkel a Klds gombra, akkor a bngsz ltalban egy POST krst kld a szervernek. A web programozsban nem rt tudnunk, hogy egy oldalt ppen GET vagy POST metdussal krnek le, hogy eldnthessk, hogyan dolgozzuk fel az oldalt. Az ASP.NET weboldalaknl az IsPost tulajdonsgbl tudjuk kiolvasni, hogy a lekrs GET vagy POST tpus. Ha a lekrs POST tpus, akkor az IsPost tulajdonsg visszatrsi rtke true (igaz) lesz. Ebben az esetben fogjuk kiolvasni az rlapmezk tartalmt a lekrsbl. Ebben a knyvben sok olyan pldt tallunk, ami bemutatja, hogyan dolgozzunk fel egy weboldalt az IsPost tulajdonsgtl fggen.
Egyszer pldakdok
A kvetkez pldkbl megismerhetjk az alapszint programozsi technikkat. Ebben a pldban egy olyan weboldalt ksztnk, amiben a felhasznl megad kt szmot, majd az oldal sszeadja azokat, s megjelenti az eredmnyt. 1. Hozzunk ltre egy AddNumbers.cshtml fjlt! 2. Msoljuk bele a kvetkez kdot s jellseket, fellrva brmit, amit az oldal tartalmazott!
@{ var total = 0; var totalMessage = ""; if(IsPost) { // Retrieve the numbers that the user entered. var num1 = Request["text1"]; var num2 = Request["text2"]; // Convert the entered strings into integers numbers and add. total = num1.AsInt() + num2.AsInt();
70
totalMessage = "Total = " + total; } } <!DOCTYPE html> <html lang="en"> <head> <title>Add Numbers</title> <meta charset="utf-8" /> <style type="text/css"> body {background-color: beige; font-family: Verdana, Arial; margin: 50px; } form {padding: 10px; border-style: solid; width: 250px;} </style> </head> <body> <p>Enter two whole numbers and then click <strong>Add</strong>.</p> <form action="" method="post"> <p><label for="text1">First Number:</label> <input type="text" name="text1" /> </p> <p><label for="text2">Second Number:</label> <input type="text" name="text2" /> </p> <p><input type="submit" value="Add" /></p> </form> <p>@totalMessage</p> </body> </html>
Figyeljnk oda a kvetkezkre: A @ karakter kezdi az els kdblokkot az oldalon, s megtallhat az oldal aljn lv totalMessage vltoz eltt is. Az oldal tetejn lv blokkot kapcsos zrjelek veszik krl. A fenti blokkban az sszes sor pontosvesszre vgzdik. A total, num1, num2, s totalMessage vltozk szmokat, illetve egy stringet trolnak. A totalMessage vltozban eltroladn szveget idzjelek kz tesszk Mivel a kd rzkeny a kis- s nagybetkre, az oldal aljn tallhat totalMessage vltoz nevt pontosan ugyangy rjuk, mint a lap tetejn! A num1.AsInt() + num2.AsInt() kifejezs megmutatja, hogyan dolgozzunk objektumokkal s metdusokkal. Az AsInt metdus egsz szmm (integer) alaktja a felhasznl ltal bevitt karaktersorozatot (string), gy vgezhetnk vele matematikai mveleteket. A <form> cmke tartalmazza a method="post" attrbtumot. Ez utastja a bngszt, hogy amikor a felhasznl az Add gombra kattint, az oldalt HTTP POST mdszerrel kldje el a szervernek. A szerver oldalon ezrt az if(IsPost) teszt igaz rtket ad, s a megadott kd lefut, amely megjelenti a szmok sszeadsbl add eredmnyt.
71
3. Mentsk el az oldalt s futtassuk bngszben! (Gyzdjnk meg rla, ez a kijellt oldal a Files munkaterleten, mieltt futtatnnk.) Vigynk be kt egsz szmot, majd kattintsunk az Add gombra!
Programozsi alapfogalmak
Amint azt az 2. fejezetben is lttuk, nem kell ktsgbe esni, ha ezeltt mg sosem programoztunk. A WebMatrixszal, ASP.NET weboldalakkal s a Razor szintaxissal gyorsan tudunk kifinomult dinamikus weboldalakat kszteni, s nem kell tl sok kdot rnunk a kvnt eredmnyhez. Ez a fejezet ttekintst ad az ASP.NET webprogramozsrl. Ez nem egy rszletes elemzs, csak egy gyors ttekints a leginkbb hasznlt programozsi fogalmakrl. A most megszerzett tuds lefedi azokat a terleteket, amire szksgnk lesz a knyv olvassa sorn. Elszr ismerjk meg a technikai htteret!
A Razor Syntax, Server Code s ASP.NET

A Razor szintaxis egy egyszer programozsi szintaxis, mellyel szerver oldali kdot gyazhatunk be egy weboldalba. Egy, a Razor szintaxisban megrt weboldal ktfle tartalombl ll: a kliens oldalnak sznt tartalombl s a szerver oldalon futtatand kdbl. A kliensoldali tartalom azokat a dolgokat tartalmazza, amiket mr megszokhattunk a weboldalaknl: HTML tagek, stlus informcik (pl. CCS), szkriptek (pl. JavaScript), s egyszer szvegek. A Razor szintaxis lehetv teszi, hogy szerverkdot szrjunk a kliensoldali tartalom kz. Ha van szerverkd az oldalon. akkor a szerver elszr vgigfuttatja a kdot, s csak azutn kldi el az oldalt a bngszbe. Azltal hogy szerveren is fut, a kd sokkal sszetettebb feladatokat tud vgrehajtani, mint a kliensoldali tartalom nmagban, pldul a szerveren lv adatbzishoz hozzfr. Fontos, hogy a szerverkd dinamikusan tud kliens tartalmat kszteni HTML kdot vagy ms tartalmat tud generlni, amit ksbb kld el a bngsznek a statikus HTML tartalmakkal egytt. A bngsz szemszgbl nzve a szerverkd ltal generlt kliens tartalom nem fog klnbzni ms kliens tartalmaktl. Mint lthatjuk, a szksges szerverkd elg egyszer. A Razor szintaxissal mkd ASP.NET weboldalaknak specilis kiterjesztsk van (.cshtml vagy .vbhtml). A szerver ezeket a kiterjesztseket felismeri, futtatja a Razor szintaxissal megjellt kdot, s csak ez utn kldi el az oldalt a bngsznek.
72
Mihez hasonlthatjuk az ASP.NET-et?

A Razor szintaxis egy, a Microsoft ltal kidolgozott technikn, az ASP.NET-en alapul, aminek alapja a Microsoft.NET Framework. A .NET Framework egy nagy, tfog programoz keretrendszer, amit a Microsoft fejlesztett ki, hogy szinte brmilyen szmtgpes alkalmazst fejleszthessnk vele. Az ASP.NET a .NET Framework rsze, amelyet web alkalmazsok fejlesztshez terveztek. A vilg szmos fejlesztje hasznlja risi, nagy forgalm webhelyek ksztshez az ASP.NET-et. (Ha egy webhelyen az .aspx kiterjesztst ltjuk, tudjuk, hogy az oldal ASP.NET segtsgvel kszlt) A Razor szintaxissal olyan hatkonyan dolgozhatunk, mint az ASP.NET-tel, de az egyszerbb szintaxisnak ksznheten kezdk szmra knnyebben elsajtthat a hasznlata, a gyakorlottabb felhasznlk munkja pedig felgyorsul. Ez az egyszer szintaxis egy csaldba tartozik az ASP.NET-tel s a .NET Frameworkkel, gy amikor a webhelynk sszetettebb vlik, rendelkezsre llnak a nagy keretrendszerek megoldsai s szolgltatsai.
Razor szintaxis
ASP.NET
.NET Framework
Osztlyok s pldnyok Az ASP.NET kd objektumokkal dolgozik. Az objektumokkal kapcsolatos alapfogalom az osztlyok (class). Az osztly az objektum defincija vagy sablonja. Pldul egy alkalmazsban lehet olyan Customer (gyfl) osztly, amely meghatrozza az gyfelekkel kapcsolatos tulajdonsgokat s metdusokat. Egy-egy gyfl adatait ler objektum az gyfl osztly egy-egy pldnya. Minden pldny ugyanazokat a tulajdonsgokat s metdusokat tartalmazza, de a tulajdonsgok rtkei pldnyrl pldnyra klnbznek, hiszen minden gyflobjektum egyedi. Az egyik felhasznl objektumnak a LastName (vezetknv) tulajdonsga lehet Smith, egy msikban pedig Jones. Ehhez hasonlan, brmely klnll weblap a webhelyen egy Page (Oldal) objektum, ami a Page osztly egyik pldnya. A lapon tallhat gomb egy Button (Gomb) objektum ami a Button osztly egyik pldnya, s gy tovbb. Minden pldnynak megvan a maga jelleme, de mindegyik az osztlyban meghatrozott kaptafra kszlt.
73
Nyelv s szintaxis
Az elz fejezetben egy egyszer pldn keresztl lthattuk, hogyan kell ASP.NET weboldalt kszteni, s hogyan adhatunk hozz szerver oldali kdot a HTML kdhoz. A knyv ezen rszben megtanuljuk, hogyan rjunk Razor szintaxist hasznl ASP.NET szerver kdot s hogy mik a programnyelv szablyai. Ha mr van nmi tapasztalatunk a programozs tern (fknt, ha mr programoztunk C-ben, C++ban, C#-ban, Visual Basicben, vagy esetleg JavaScript-ben.) akkor az itt olvashat anyag nagyrszt ismers lehet. Ha gy van, akkor valsznleg csak azt kell megszoknunk, hogy a .cshtml fjlokhoz hogyan adhatunk WebMatrix kdot.
Alap szintaxis Szveg, HTML s programkd keverke a kdblokkban

A szerver oldali kdblokkokban gyakran szveget vagy HTML kdot szeretnnk generlni a bngsz szmra. Ha a kdblokkunk tartalmaz szveget, melyet nem kdknt szeretnnk felhasznlni, akkor az ASP.NET-nek meg kell tudnia klnbztetni a szveget a kdtl. Ezt klnbz mdokon tehetjk lehetv. Tegyk a szveget HTML elemek kz, mint pldul <p></p> vagy <em></em>:
@if(IsPost) { // Ebben a sorban az egsz szveg pros <p> cmkk kztt van. <p>Hello, the time is @DateTime.Now and this page is a postback!</p> } else { // A szveg cmkeprok kztt van, ezeket kveti a szerverkd. <p>Hello <em>stranger</em>, today is: <br /> </p> @DateTime.Now }
Egy HTML elem tartalmazhat szveget, tovbbi HTML elemeket, s szerverkd kifejezseket. Ha az ASP.NET rzkeli a nyit HTML cmkt, akkor lekdol mindent, amit az elem tartalmaz, s elkldi a bngsznek (s persze vgrehajtja a szerverkd utastsokat). Hasznljuk a @: opertort vagy a <text> elemet. A @: segtsgvel egy sor szveget vagy prostatlan HTML cmkket rathatunk ki. A <text> elem segtsgvel tbb sort is kirathatunk. Ezek a mdszerek akkor hasznosak, ha egy HTML elemet nem vgrehajtani, hanem megjelenteni szeretnnk.
@if(IsPost) { // Sima szveget prostatlan HTML cmke s szerverkd kvet. @: The time is: <br /> @DateTime.Now // Szerverkd, egyszer szveg, pros cmkk, majd ismt szveg. @DateTime.Now @:is the <em>current</em> time. }
Ha tbb sort, vagy prostatlan HTML cmkket szeretnnk kirni, minden sort a @: segtsgvel folytathatunk vagy a <text> elem segtsgvel csatolhatunk. Az ASP.NET a @: opertort, s a <text> cmkt egyarnt szvegek felismershez hasznlja, ezek sosem jelennek meg a bngszben.
@if(IsPost) { // Ismtelje meg az elz pldt, de most hasznlja a <text> cmkt. <text> The time is: <br /> @DateTime.Now @DateTime.Now is the <em>current</em> time.
74
</text> } @{ var minTemp = 75; <text>It is the month of @DateTime.Now.ToString("MMMM"), and it's a <em>great</em> day! <br /><p>You can go swimming if it's at least @minTemp degrees. </p></text> }
A fenti els plda megegyezik az elzvel, csak itt <text> cmkt hasznlunk. A msodik pldban hasznlunk szveget, prostatlan HTML cmkket (<br />), programkdot s prostott HTML cmkket, amiket <text> s </text> kz zrunk. Termszetesen a sorokat kln-kln rva is mkdne a kd, csak hasznlni kellene a @: opertort minden sor eltt. Megjegyzs: Ha a szveget az itt lertak szerint ratunk ki (kd blokkba helyezett HTML taggel, @: opertorral vagy <text> taggel), akkor az ASP.NET nem vgez HTML kdolst (ahogyan korbban lthattuk).
Szkzk
Az extra szkzk a programkdban (az idzjelek kztti string literalokon kvl) nem vltoztatjk annak lefutst.
@{ var lastName = "Smith"; }
Az utastsban a sorkznek nincs hatsa a utastsra, a j olvashatsg rdekben trdelhetjk a sorokat A kvetkez utastsok mind egyenrtkek a fentivel:
@{ var theName = "Smith"; } @{ var personName = "Smith" ; }
Arra vigyzzunk, hogy a string szvegeket nem trdelhetjk tbb sorba. A kvetkez plda ezt a hibt mutatja be.
@{ var test = "This is a long string"; } // Nem mkdik!
Ha esetleg mgis szksg lenne arra, hogy egy hossz szveget tbb sorba trdeljnk, ktflekppen tehetjk meg. Hasznlhatjuk a plusz (+) jelet, errl a fejezet egy ksbbi rszben olvashatunk. Hasznlhatjuk a @ karaktert, hogy verbatim string literalt hozzunk ltre, ahogy azt mr korbban lttuk a fejezetben. Ezek tartalmazhatnak sortrst.
@{ var longString = @"This is a long string"; }
Megjegyzsek a HTML s programkdban

A kdjainkban elhelyezhetnk megjegyzseket magunknak vagy ms fejlesztknek. Ha egy kdrszletet tmenetileg ki akarnk trlni, talakthatjuk megjegyzss. gy a hatsa nem rvnyesl, de ksbb brmikor jra felhasznlhatjuk.
75
A HTML s a Razor kdban klnbzkppen jelljk a megjegyzst. A Razor kd a szerveroldalon fut, ezrt a megjegyzsek mg szerver oldalon eltvoltsra kerlnek, gy a felhasznlk nem lthatjk azokat a bngszjkben. ASP.NET Razor megjegyzst @* s *@ kz runk, ezek lehetnek egysorosak vagy tbbsorosak:
@* @* Tbbsoros megjegyzs. Brmennyi sor hosszsg lehet. *@ Egysoros megjegyzs. *@
Itt egy megjegyzs egy kdblokkban:

@{ @* Ez egy megjegyzs. *@ var theVar = 17; }
Itt van ugyanaz a kdblokk gy, hogy a kd sort megjegyzsknt jelltk meg, ezrt ez nem fog futni:
@{ @* Ez egy megjegyzs. *@ @* var theVar = 17; *@ }
Egy kdblokk belsejben, a Razor megjegyzs szintaxisa mellett hasznlhatjuk ms programoz nyelv megjegyzs szintaxist, pldul a C#-t:
@{ // Ez egy var myVar /* Ez egy mely a C# } megjegyzs. = 17; tbbsoros megjegyzs megjegyzs szintaxist hasznlja. */
A C#-ban // karakter kezdi az egysoros megjegyzseket, a tbbsoros megjegyzseket pedig /* s */ kz rjuk. (Ahogy a Razor megjegyzseket, gy a C# megjegyzsek sem jutnak el a bngszig.) HTML kdhoz kszthetnk HTML megjegyzst is:

A HTML megjegyzseket  kz rjuk. A HTML megjegyzseket nem csak szveghez hasznlhatjuk, de HTML kdhoz is. Ez a HTML megjegyzs az sszes tartalmat s cmkt eltnteti, amit tartalmaz:

A Razor megjegyzsekkel ellenttben a HTML megjegyzseket megkapja a bngsz (de nem jelenti meg), gy a felhasznlk el tudjk olvasni ket az oldal forrst megtekintve.
Vltozk
A vltoz egy adatok/rtkek trolsra alkalmas objektum. Egy vltoz neve akrmi lehet, csak arra kell figyelni, hogy betvel kezddjn, nem tartalmazhat szkzt s specilis jelents karaktereket.
Vltozk s adattpusok
A vltozknak lehet egy megadott adattpusuk, ami megadja, hogy milyen adatokat trolhatunk bennk. A string vltozkba szveget trolhatunk (pl. Hell vilg), az integer vltozkban egsz szmokat trolhatunk (pl. 3 vagy 79), s a date vltozkba dtum rtkeket trolhatunk klnbz Honlappts a XXI. szzadban 3. fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal 76
formtumokban (pl. 4/12/2010 vagy Mrcius 2009). Termszetesen mg sokfle adattpust hasznlhatunk. Azonban egy vltoznak nem ktelez tpust megadni. A legtbb esetben az ASP.NET kitallja a vltozrl, hogy milyen adatot trolunk benne. (Esetenknt meg kell adnunk egy tpust, a knyvben tallhat pldkbl kiderl, hogy mikor.) Ahhoz, hogy vltozt hozzunk ltre, hasznljuk a var kulcsszt (ha nem akarjuk meghatrozni a tpust) vagy hasznljuk a tpus nevt:
@{ // Szveget adunk meg vltoznak. var greeting = "Welcome!"; // Szmot adunk meg vltoznak. var theCount = 3; // Kifejezst adunk meg vltoznak. var monthlyTotal = theCount + 5; // Dtumot adunk meg vltoznak. var today = DateTime.Today; // A jelenlegi oldal Url-jt adjuk meg vltoznak. var myPath = this.Request.Url; // A vltozkat explicit vltozkkal deklarljuk. string name = "Joe"; int count = 5; DateTime tomorrow = DateTime.Now.AddDays(1); }
A kvetkez pldban olyan begyazott kifejezseket lthatunk, amik felhasznljk a weboldal vltozit.
@{ // Vltozk rtkeinek begyazsa HTML markupba. <p>@greeting, friends!</p> // Vltozk hasznlata begyazott kifejezsben. <p>The predicted annual total is: @( monthlyTotal * 12)</p> // Az oldal URL-jnek megjelentse vltozval. <p>The URL to this page is: @myPath</p> }
Adattpusok konvertlsa s tesztelse

77
Annak ellenre, hogy az ASP.NET ltalban automatikusan meg tudja hatrozni az adattpusokat, nha mgsem sikerl. Ilyenkor besegtnk egy explicit tkonvertlssal. Mg akkor is, ha nincs szksg tkonvertlsra, nha hasznos lehet, ha tudjuk, hogy milyen tpus adatokkal dolgozunk. A legltalnosabb eset, hogy string-et konvertlunk t ms tpuss, pldul integerre, vagy date-re. A kvetkez plda egy tipikus esetet mutat be, amiben string-bl szmot csinlunk.
@{ var total = 0; if(IsPost) { // A bert szmok beolvassa. var num1 = Request["text1"]; var num2 = Request["text2"]; // A stringek talaktsa szmm, majd azok sszeadsa. total = num1.AsInt() + num2.AsInt(); } }
A felhasznl minden adatot string-knt ad meg. Mg akkor is, ha a felhasznltl szmot krnk, s k azt is rtak be, az elkldtt adat string lesz. Ebbl addik, hogy a szmm kell konvertlnunk. Mivel az ASP.NET nem tud kt string-et sszeadni, ha a pldnkban ssze akarnnk adni az rtkeinket anlkl, hogy, tkonvertlnnk ket, a kvetkez hibazenetet kapnnk. Cannot implicitly convert type string to int. Az rtkek integerr konvertlshoz az AsInt metdust hasznljuk. Ha a konvertls sikeres, ssze tudjuk adni a kt szmot. A kvetkez tblzat tartalmazza a vltozk gyakori konvertlsait a tesztelsi metdusait. Metdus
AsInt(), IsInt()
Lers Egy string-et ami egy egsz szmnak felel meg tkonvertl integerr.
Plda
var myIntNumber = 0; var myStringNum = "539"; if(myStringNum.IsInt()==true){ myIntNumber = myStringNum.AsInt(); } var myStringBool = "True"; var myVar = myStringBool.AsBool(); var myStringFloat = "41.432895"; var myFloatNum = myStringFloat.AsFloat();
AsBool(), IsBool()
tkonvertl egy igaz vagy hamis string-et boolean tpuss. Egy string-bl ami egy tizedes trtet tartalmaz (pl. "1.3") float-ot (lebeg pontos) konvertl. tkonvertl egy tizedes trt string-et (1.3) egy decimlis szmm. (Az ASP.NET-ben a decimlis szm pontosabb, mint a float. tkonvertl egy string-et ami dtum s id rtk
AsFloat(), IsFloat()
AsDecimal(), IsDecimal()
var myStringDec = "10317.425"; var myDecNum = myStringDec.AsDecimal();
AsDateTime(), IsDateTime()
var myDateString = "12/27/2010"; var newDate = myDateString.AsDateTime();
78
az ASP.NET tpuss.
ToString()
DateTime
int num1 = 17; int num2 = 76; // myString is set to 1776 string myString = num1.ToString() + num2.ToString();
Brmilyen adatot stringg konvertl.
Opertorok
Az opertor egy olyan kulcssz vagy karakter, ami megmondja az ASP.NET-nek hogy milyen parancsot hajtson vgre egy-egy kifejezsben. A C# nyelv (s az erre pl Razor szintaxis is) sokfle opertort tmogat, de csak prat kell ismernnk ahhoz, hogy, elkezdhessnk ASP.NET weboldalakat kszteni. A kvetkez tblzatban megismerhetjk a leggyakoribb opertorokat. Opertor
.
Lers Pont. Az objektum neve s az elrni kvnt tulajdonsg vagy metdus neve kz rjuk. Zrjelek. Kifejezseket csoportosthatunk velk s paramtereket adhatunk t metdusoknak. Szgletes zrjelek. Tmbk, listk, gyjtemnyek elemeit cmezhetjk meg. rtkads. A kifejezs jobb oldaln tallhat rtket a kifejezs bal oldaln tallhat vltoznak rtkl adjuk. (Vigyzat! Az = s az == opertor mst jelent!) Tagads. Az igaz (true) rtket megfordtja hamis-ra (false) s fordtva. ltalban gyors mdszerknt hasznljuk hamissg vizsglatra.(vagyis tagadva igaz). Egyenlsg Visszatrsi (true), ha egyenlk. Egynltlensg vizsglata. rtke igaz az rtkek
Pldk
var myUrl = Request.Url; var count = Request["Count"].AsInt();
()
@(3 + 7) @Request.MapPath(Request.FilePa th);
[]
var income = Request["AnnualIncome"];
var age = 17;
bool taskCompleted = false; // Processing. if(!taskCompleted) { // Continue processing }
==
var myNum = 15; if (myNum == 15) { // Do something. } var theNum = 13; if (theNum != 15) {
!=
vizsglata.
79
Visszatrsi rtke (true), ha az rtkek egynlk.

< > <= >=
// Do something. } if (2 < 3) { // Do something. } var currentCount = 12; if(currentCount >= 12) { // Do something. } @(5 + 13) @{ var netWorth = 150000; } @{ var newTotal = netWorth * 2; } @(newTotal / 2) // The displayed result is "abcdef". @("abc" + "def")
Kevesebb, mint, Nagyobb, mint, Kevesebb vagy egyenl s Nagyobb vagy egyenl.
Matematikai szmolsoknl ket.
opertorok, hasznljuk
sszelncols. String-eket fznk ssze vele. Az ASP.NET az adat tpusa szerint felismeri a klnbsget ekztt s a matematikai opertor kztt. Logikai S s VAGY mvelet, amikkel feltteleket ktnk ssze.
&& ||
bool myTaskCompleted = false; int totalCount = 0; // Processing. if(!myTaskCompleted && totalCount < 12) { // Continue processing. } int theCount = 0; theCount += 1; // Adds 1 to count
+= -=
A nvels s cskkents opertorok. A jobb oldalon szerepl kifejezs rtkt hozzadjuk (kivonjuk) a bal oldalon szerepl vltoz rtkhez.
Fjlok s mappk hasznlata a kdban

A kdjainkban srn fogunk hasznlni fjl s mappa elrsi utakat. Ebben a pldban egy weboldal fizikai mappastruktrjt lthatjuk, ahogy megjelenhet a weblapot fejleszt szmtgpen.
C:\WebSites\MyWebSite default.cshtml datafile.txt \images Logo.jpg \styles Styles.css
Egy webszerveren minden weboldalnak van egy virtulis mappa struktrja, ami megfelel az oldalunk fizikai mappastruktrjnak. Alaprtelmezetten a virtulis s a fizikai mappanevek megegyeznek. A virtulis gykrknyvtrat egy perjel (/) jelli, pont gy, mint ahogy a szmtgpnkn C: meghajt gykrknyvtrt fordtott perjel (\) jelli. (A virtulis mappa elrsi utakat mindig sima perjellel jelljk.) A kvetkez pldban bemutatjuk a virtulis s fizikai elrsi tjt az elz pldban lthat Styles.css fjlnak. Honlappts a XXI. szzadban 3. fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal
80
Fizikai elrsi t: C:\WebSites\MyWebSiteFolder\styles\Styles.css Virtulis elrsi t (a virtulis gykrknyvtrtl /): /styles/Styles.css
Amikor fjlokkal s mappkkal dolgozunk a kdunkban, attl fggen, hogy milyen objektumokat hasznlunk, nha virtulis, nha fizikai elrsi utakat hasznlunk. Az ASP.NET-ben sokfle mdszer ll lehetsgnkre hogy fjlokat s mappkat hasznljunk a kdunkban. Ezek lehetnek: a ~ opertor, a Server.MapPath metdus s a Href metdus.
A ~ opertor: a virtulis gykrknyvtr beolvassa

Hogy a kdunkban megadjuk a fjljaink s mappink virtulis gykrt, hasznljuk a ~ opertort. Ez azrt hasznos, mert gy szabadon mozgathatjuk a weboldalunkat, anlkl hogy a kdban szerepl elrsi utakat megzavarnnk.
@{ var myImagesFolder = "/images"; var myStyleSheet = "/styles/StyleSheet.css"; }
A Server.MapPath metdus: A virtulis elrsi t fizikaiv konvertl sa

A Server.MapPath metdus egy virtulis elrsi tbl(pl /default.cshtm) teljes elrsi utat (pl C:\WebSites\MyWebSiteFolder\default.cshtml) konvertl. Ezt a metdust olyan feladatok elvgzsre hasznlhatjuk, amik teljestshez fizikai elrsi tra van szksg, mint pldul egy, a webszervernkn tallhat szvegfjl olvassa vagy rsa.(Egy kiszolgl szerveren ltalban nem ismerjk weboldalunk teljes elrsi tjt.). A metdus gy mkdik, hogy egy fjl vagy mappa virtulis elrsi tjt tadjuk neki s visszatrsi rtkknt megadja a teljes utat.
@{ var dataFilePath = "/dataFile.txt"; }  <p>@Server.MapPath(dataFilePath)</p>
A Href metdus: Elrsi utak ltrehozsa az oldal forrsaihoz

A WebPage objektum Href metdusa tkonvertlja azokat az elrsi utakat, amiket a szerverkdunkban hozunk ltre (tartalmazhat ~ opertort), olyan elrsi utakk amiket a bngsznk rtelmezni tud. (A bngsz nem tudja rtelmezni a ~ opertort mivel az szigoran ASP.NET opertor. Arra is hasznlhatjuk mg a Href metdust, hogy elrsi utakat ksztsnk olyan forrsokhoz, mint pldul kpfjlok, ms weboldal, s CSS fjlok. Pldul hasznlhatjuk ezt a metdust arra, hogy egy HTML parancsban attribtumokat adjuk egy <img>,<link>, s egy <a> elemnek.
@{ var myImagesFolder = "/images"; var myStyleSheet = "/styles/StyleSheet.css"; }  <img src="@Href(myImagesFolder)/Logo.jpg" />  <img src="@Href("/images")/Logo.jpg" /> <!Ez egy hivatkozst kszt a CSS fjlra. --> <link rel="stylesheet" type="text/css" href="@Href(myStyleSheet)" />
Logikai felttelek s ciklusok

Honlappts a XXI. szzadban 3. fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal 81
ASP.NET kdban rhatunk olyan parancsokat, amik bizonyos felttelektl fggenek, vagy akr olyan kdot, ami egy meghatrozott alkalommal megismtli nmagt.
Felttelek tesztelse
Hogy egyszer feltteleket teszteljnk, hasznljuk az If parancsot. Ennek visszatrsi rteke lehet igaz vagy hamis a felttelnktl fggen.
@{ var showToday = true; if(showToday) { @DateTime.Today; } }
A teszt blokk az if kulcsszval kezddik. A valdi tesztels (felttel) zrjelben van, ennek lehet a visszatrsi rtke igaz vagy hamis. Az if parancs egy else gat is tartalmazhat, arra az esetre, ha felttelnk visszatrsi rtke hamis lenne.
@{ var showToday = false; if(showToday) { @DateTime.Today; } else { <text>Sorry!</text> } }
Egy else if blokk hasznlatval akr tbb felttelt is megadhatunk.

@{ var theBalance = 4.99; if(theBalance == 0) { <p>You have a zero balance.</p> } else if (theBalance > 0 && theBalance <= 5) { <p>Your balance of $@theBalance is very low.</p> } else { <p>Your balance is: $@theBalance</p> } }
A kvetkez pldban lthatjuk, hogy ha az If gunk felttele nem teljesl, akkor az else if gunk felttelt vizsgljuk meg. Ha ez a felttel teljesl az else if g fog lefutni, ha azonban egyik felttel sem teljesl, akkor az else g fog lefutni. Egy If g mell vgtelenszm else if gat hasznlhatunk, az a lnyeg, hogy egy else ggal zrjuk le, ugyanis ez felel meg a brmi ms felttelnek. Sok felttel esetn hasznljuk a switch blokkot:
@{ var weekday = "Wednesday"; var greeting = ""; switch(weekday) { case "Monday":
82
greeting = "Ok, it's a marvelous Monday"; break; case "Tuesday": greeting = "It's a tremendous Tuesday"; break; case "Wednesday": greeting = "Wild Wednesday is here!"; break; default: greeting = "It's some other day, oh well."; break; } <p>Since it is @weekday, the message for today is: @greeting</p> }
Az ellenrizend vltozt zrjelezni kell (a pldnkban a weekday vltoz). Minden esetben egy case kulcsszt hasznlunk, amit egy kettspont (:) kvet. Ha valamelyik rtk megegyezik a letesztelt rtkkel, akkor abban a case gban lev kd fut le. Minden case kulcsszt egy break kulcsszval zrunk le. (Ha elfelejtjk berni a break kulcsszt valamelyik case blokknl, akkor a kvetkez case g is le fog futni.) Egy switch blokknak rendszerint van default ga, hiszen a brmi ms utols felttel teljesl ha ms eset nem lesz igaz. Az utols kt plda gy jelenik meg a bngszben:
Kd ismtlse (Ciklusok)
Srn van arra szksg, hogy egy-egy parancsot tbbszr is lefuttatassunk. Ezt ciklusok hasznlatval rjk el. Pldul gyakran kell egy parancsot egy adattmb minden elemre lefuttassunk. Ha tudjuk, hnyszor szeretnnk ismtelni, akkor hasznljuk a for ciklust, mivel ez a ciklus nagyon hasznos ha elre vagy htrafele szeretnnk szmolni.
@for(var i = 10; i < 21; i++) { <p>Line #: @i</p> }
A ciklus a for kulcsszval kezddik, majd hrom zrjelben lv, pontosvesszre vgzd parancs kveti. A zrjelben az els parancsot (var i=10;) egy szmllt hoz ltre s a 10-es rtkre lltja be kezdsnek. A szmllt nem kell i-nek hvnunk brmilyen leglis vltoz nevet adhatunk neki. Amikor a for ciklus fut, a szmll automatikusan nvekszik. A msodik paranccsal (i < 21;) azt lltjuk be, hogy meddig szeretnnk szmolni. Ebben az esetben azt szeretnnk, hogy maximum 20-ig szmoljon (azaz, hogy addig mkdjn, amg a szmll kisebb, mint 21)
83
A harmadik parancs (i++) egy inkremens opertort hasznl, ami egyszeren eggyel nveli a szmllt minden lefutskor.
A zrjeleken bell az a kd van, amely a ciklus minden itercijt lefutja. A kd minden alkalommal ltrehoz egy j paragrafust (<p> elem) s kijelzi az i (szmll) jelenlegi rtkt. Ha megnyitjuk ezt a pldt, akkor 11 sornyi szveget fogunk ltni, amiben minden sor a vltoz egyesvel nvelt rtkt mutatja.
Ha tmbkkel vagy listkkal dolgozunk, akkor srn fogunk foreach ciklust hasznlni. A lista hasonl objektumok gyjtemnye, s a foreach segtsgvel feladatokat hajthatunk vgre minden elemn. Ez a tpus ciklus azrt hasznos a listknl, mert nincs szksg szmllra, vagy belltott hatrra. Ehelyett a foreach vgigmegy a listn elejtl a vgig. A kvetkezplda visszaadja a Request.ServerVariables gyjtemny elemeit (melyek informcik a webszerverrl). Arra hasznljuk a foreach ciklust, hogy a gyjtemny minden elemnek a nevt megjelentsk egy HTML listban egy j <li> elemknt.
<ul> @foreach (var myItem in Request.ServerVariables) { <li>@myItem</li> } </ul>
A foreach kulcsszt zrjelek kvetik, melyekben meghatrozhatjuk a gyjtemny egy elemt (a pldban var myItem), melyet az in kulcssz kvet, majd a gyjtemny, melyet vgig akarunk vizsglni. A foreach ciklus trzsben felhasznlhatjuk a korbban deklarlt vltozt annak kijelzsre.
84
Az ltalnos felhasznls ciklusokhoz hasznljuk a while kifejezst:

@{ var countNum = 0; while (countNum < 50) { countNum += 1; <p>Line #@countNum: </p> } }
A while ciklus a while kulcsszval kezddik, majd a zrjelekben megadjuk, hogy a ciklus meddig folytatdjon (itt addig, amg a countNum kevesebb, mint 50). A ciklusok egy szmolsra hasznlt vltozt vagy objektumot tipikusan vagy nvelnek, vagy cskkentnek. A pldnkban akrhnyszor lefut a ciklus a += opertor mindig hozzad 1-et a countNum vltozhoz.(Ha cskkenteni szeretnnk a vltozt akkor a -= opertort kne hasznlni.)
Objektumok s gyjtemnyek
Az ASP.NET weboldalak szinte minden rsze objektum, mg maga a weboldal is. Ebbl a rszbl megismerhetjk a fontosabb objektumokat.
Oldal objektumok
Az ASP.NET ben a legalapvetbb objektum az oldal. Egy oldal tulajdonsgait kzvetlenl elrhetjk, anlkl, hogy brmilyen ms objektumot kne hasznlnunk, a kvetkez kd a Request objektum segtsgvel beolvassa az oldal elrsi tjt:
@{ var path = Request.FilePath; }
85
Hogy tisztzzuk, hogy a jelenlegi oldalon lv objektumra utalunk, opcionlisan hasznlhatjuk a this kulcsszt. Itt az elz kd plda, a this kulcsszval:
@{ var path = this.Request.FilePath; }
A Page objektum tulajdonsgaival sok informcihoz juthatunk hozz, mint pldul: (Krelem): Ahogy mr lthattuk ,ez a gyjtemny informcikat trol az ppen aktulis lekrdezsrl, azt is belertve, hogy milyen bngsz indtotta a lekrdezst, mi a megtekinteni kvnt oldal URL-je, ki a felhasznl stb. Response (Vlasz:.Ez azoknak az informciknak a gyjtemnye, amiket visszakld az oldal a bngsznek, amikor lefutott a szerveroldali kd. Hasznlhatjuk ezt a tulajdonsgot pldul arra, hogy informcikat helyeznk el a vlaszba.
Request
@{ // Access the page's Request object to retrieve the Url. var pageUrl = this.Request.Url; } <a href="@pageUrl">My page</a>
Gyjtemny objektumok(Listk,tmbk)
Az ugyanolyan tpus objektumok csoportjt nevezzk gyjtemnynek. Erre tkletes plda a Customer (gyfelek) objektumok gyjtemnye egy adatbzisbl. Az ASP.NET-ben sok beptett gyjtemnyt tallhatunk, mint pldul a Request.Files gyjtemny. Kt megszokott gyjtemny tpus a tmb s a sztrrtk. A tmb akkor hasznos ha hasonl dolgokat akarunk egytt trolni, de nem akarunk minden elemhez kln vltozt ltrehozni.
@* Tmbblokk 1: j tmb deklarlsa kapcsoszrjelekkel. *@ @{ <h3>Team Members</h3> string[] teamMembers = {"Matt", "Joanne", "Robert", "Nancy"}; foreach (var person in teamMembers) { <p>@person</p> } }
Minden tmbnek van egy megadott adattpusa, mint pldul string, integer, vagy DateTime. Hogy utaljunk arra, hogy tmbbel dolgozunk, szgletes zrjeleket adunk a deklarlshoz (mint pldul string[] vagy int[]). A tmbben trolt elemeket az indexket hasznlva rhetjk el, vagy egy foreach ciklussal. A tmbk indexei 0-val kezddnek, vagyis a tmb els elemnek az indexe 0 a msodiknak 1, s gy tovbb.
@{ string[] teamMembers = {"Matt", "Joanne", "Robert", "Nancy"}; <p>The number of names in the teamMembers array: @teamMembers.Length </p> <p>Robert is now in position: @Array.IndexOf(teamMembers, "Robert")</p> <p>The array item at position 2 (zero-based) is @teamMembers[2]</p> <h3>Current order of team members in the list</h3> foreach (var name in teamMembers) { <p>@name</p> } <h3>Reversed order of team members in the list</h3>
86
Array.Reverse(teamMembers); foreach (var reversedItem in teamMembers) { <p>@reversedItem</p> } }
Egy tmb hosszt, vagyis hogy hny elem a Length tulajdonsgbl tudhatjuk meg. Ha szeretnnk egy megadott rtk helyt meghatrozni a tmbben akkor az Array.IndexOf metdust hasznljuk. De ha gy akarjuk meg is fordthatjuk a tmb tartalmt (Array.Reverse metdus) vagy akr rendezhetjk is (Array.Sort metdus). A string tmbnk gy jelenik meg a bngszben:
A tr(sztrrtk) nem ms, mint kulcs/rtk prok gyjtemnye, ezekben elg megadni a kulcsot (vagy nevet), hogy belltsuk vagy beolvassuk a hozztartoz rtket:
@{ var myScores = new Dictionary<string, int>(); myScores.Add("test1", 71); myScores.Add("test2", 82); myScores.Add("test3", 100); myScores.Add("test4", 59); } <p>My score on test 3 is: @myScores["test3"]%</p> @(myScores["test4"] = 79) <p>My corrected score on test 4 is: @myScores["test4"]%</p>
A new kulcsszval jelezzk, hogy j tr (sztrrtk) objektumot akarunk ltrehozni.A var kulcsszval egy vltozhoz fzhetjk a trunkat. A trban hasznlt adattpusokat trtzrjelek ( < > ) kz kell
87
tennnk, s a deklarls vgre mg egy zrjel prt kell tenni, mivel ez az, ami tulajdonkppen ltrehoz egy j trat. Ahhoz hogy j elemeket adjunk hozz a trunkhoz, meghvhatjuk a tr Add metdust ez vltoznl (esetnkben myScores), majd megadhatjuk hozz a kulcs-rtk prt. A kvetkez pldban lthatjuk az rtkads egy alternatvjt, amikor a kulcsot szgletes zrjelbe rjuk:
myScores["test4"] = 79;
Hogy rtket olvassunk ki a trunkbl, szgletes zrjelezzk az elrni kvnt kulcsot:

var testScoreThree = myScores["test3"];
Paramterekkel rendelkez metdusok hvsa

Ahogy a fejezet korbbi rszeiben olvashattuk, az objektumok metdusokkal rendelkezhetnek. Pldul a Database objektum tartalmazhat egy Database.Connect metdust. Lteznek olyan metdusok, amiknek egy vagy tbb paramtere is van. A paramter egy olyan rtk, amit azrt adunk t egy metdusnak hogy az sikeresen letudjon futni. Erre j plda a Request.MapPath metdus, ami hrom paramterrel is rendelkezik.
public string MapPath(string virtualPath, string baseVirtualDir, bool allowCrossAppMapping);
Ez a metdus visszaadja a megadott virtulis elrsi tnak megfelel fizikai elrsi utat. A metdus hrom paramtere a virtualPath, baseVirtualDir, s az allowCrossAppMapping. (Megjegyzs: a deklarlsnl a paramterek azokkal az adattpusokkal jelennek meg, amiket elfogadnak.) Amikor meghvjuk ezt a metdust, mind hrom paramtert meg kell adnunk. A Razor szinakszissal ktfle mdon adhatunk t paramtereket: helyzeti s nvszerinti paramterekknt. Hogy helyzeti paramterek hasznlatval hvjunk meg egy metdust, a metdus deklarlsnak megfelel sorrendben kell megadni a paramtereket (a metdus dokumentcijbl ezt megtudhatjuk). Ehhez a sorrendhez mindenkpp tartanunk kell magunkat, nem cserlhetjk fel a paramtereket, s nem hagyhatunk ki paramtereket (ha mgis szksges, akkor null rtket vagy res stringet ("")adjunk neki). A kvetkez plda felttelezi, hogy rendelkeznk a webhelynkn egy script mappval. A kd meghvja a Request.MapPath metdust, tadja a hrom paramtert a megfelel sorrendben,majd megjelenti a vgeredmnyt.
// Helyzeti paramterek tadsa. var myPathPositional = Request.MapPath("/scripts", "/", true); <p>@myPathPositional</p>
Amikor egy metdus sok paramterrel rendelkezik, nvszerinti paramterek hasznlatval letisztultabb, s jobban megfejthet lesz a kdunk. Hogy nvszerinti paramterekkel hvjunk meg egy metdust, adjuk meg a paramter nevt, majd egy kettspontot (:), ez utn adjuk meg az rtkt. A nvszerinti paramterek elnye, hogy akrmilyen sorrendben megadhatjuk ket. (Htrnya, hogy a metdushvs sokkal tbb helyet foglal) Az elz pldban lthat metdust most nvszerinti paramterekkel hvjuk meg: // Nvszerinti paramterek tadsa. var myPathNamed = Request.MapPath(baseVirtualDir: "/", allowCrossAppMapping: true, virtualPath: "/scripts"); <p>@myPathNamed</p> Mint lthatjuk, a paramtereket ms sorrendben adtuk t, de ennek ellenre, ha lefuttatjuk az elz kt pldt, ugyanazt az rtket fogjk visszaadni.
Hibk kezelse
88
Try-Catch utastsok
Lehetsges, hogy a kdunk tartalmaz olyan utastsokat, amik valamifle hibt generlnak. Pldul: Sokfle hiba lphet fel, amikor egy fjlon valamifle mveletet szeretnnk vgrehajtani. Lehet, hogy a fjl nem is ltezik, vagy csak olvashat, esetleg a kdunk nem tartalmazza a megfelel jogosultsgokat, s gy tovbb. Hasonlkppen, lehetnek jogosultsgi problmk, ha egy adatbzis rekordjait szeretnnk vltoztatni, de az is lehet, hogy elvesztjk a kapcsolatot az adatbzissal, vagy egyszeren csak nem megfelel adatokat akarunk elmenteni, s gy tovbb.
Ezeket a szitucikat programozsi krkben kivteleknek (exception) hvjuk. A kdunk automatikusan generl (dob) egy hibazenetet, ha kivtelbe tkzik.
Hasznljuk try/catch utastsokat, amikor kivtelekbe tkznk, vagy csak el akarjuk kerlni az ilyen tpus hibazeneteket. A try blokkba azt a kdot rjuk, amit ellenrizni szeretnnk, majd ehhez prosthatunk egy vagy tbb catch parancsot, ahol klnbz kivteleket kezelhetnk. Valjban annyi catch blokkot hasznlhatunk, ahny hibra szmtunk. Megjegyzs: Nem ajnlatos a Response.Redirect metdust hasznlni egy try/catch utastsban, mert kivtelt okozhat az oldalunkban. A kvetkez pldban ltrehozunk egy oldalt, ami az els lekrdezskor ltrehoz egy szvegfjlt s megjelent egy gombot, amivel a felhasznl megnyithatja azt. A pldban szndkosan hasznlunk rossz fjlnevet, hogy ltrehozzunk egy kivtelt. A kd kt kivtelt kezel le: Az egyik a FileNotFoundException vagyis a nem ltez fjl kivtel, ami akkor trtnik ha a megadott fjlnv hibs, vagy nem ltezik. A msodik a DirectoryNotFoundException, vagyis a nem ltez mappa kivtel, ami akkor kvetkezik be, amikor az ASP.NET mg a mappt sem tudja megtallni. (Megszntethetjk a megjegyzseket az egyik utastsban, hogy lssuk, milyen, amikor minden jl mkdik.)
89
Ha a kdunk esetlegesen nem kezelne le egy kivtelt, akkor egy olyan hiba oldalt jelentene, meg amit az elz kpen lthatunk. Azonban a try/catch rszek segtenek megakadlyozni az ilyen tpus hibazeneteket.
@{ var var var var var var dataFilePath = "/dataFile.txt"; fileContents = ""; physicalPath = Server.MapPath(dataFilePath); userMessage = "Hello world, the time is " + DateTime.Now; userErrMsg = ""; errMsg = "";
if(IsPost) { // Amikor a felhasznl az Open File gombra kattint, s elkldi // az oldalt, az megprblja megnyitni az adott fjlt olvassra. try { // Ez a kd hibt fog jelezni, mert a megadott fjl nem ltezik. fileContents = File.ReadAllText(@"c:\batafile.txt"); // Ez a kd mkdik. Hogy elhrtsuk a hibt, // Helyezznk dupla perjelt a fenti parancs el, az albbi ell pedig trljk. //fileContents = File.ReadAllText(physicalPath); } catch (FileNotFoundException ex) { // A kivtel objektum hasznlhat hibajavtsra, naplzsra errMsg = ex.Message; // Ksztsnk felhasznlbart hibazenetet. userErrMsg = "A file could not be opened, please contact " + "your system administrator."; } catch (DirectoryNotFoundException ex) { // Similar to previous exception. errMsg = ex.Message; userErrMsg = "A directory was not found, please contact " + "your system administrator."; } } else { // Amikor elszr lekrik az oldalt, hozzuk ltre a text fjlt. File.WriteAllText(physicalPath, userMessage); } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Try-Catch Statements</title> </head> <body> <form method="POST" action="" > <input type="Submit" name="Submit" value="Open File"/>
90
</form> <p>@fileContents</p> <p>@userErrMsg</p> </body> </html>
Tovbbi forrsok
Magyar nyelven: C# jegyzet: http://devportal.hu/content/CSharpjegyzet.aspx ASP.NET indulkszlet: http://devportal.hu/groups/tanulk/pages/mvc.aspx Fggelk: A Visual Basic programozsi nyelv s szintaxisa Angol nyelven: Referencia dokumentumok ASP.NET C# nyelv
91
4. fejezet Egysges megjelens kialaktsa

Egy hatkonyabb weboldal kialaktshoz ltrehozhatunk a webhelynknek tbbszr felhasznlhat tartalomblokkokat (pldul fejlcet s lblcet), gy egysges megjelenst biztostva szmra. A fejezetbl megtudhatjuk: Hogyan hozhatunk ltre tbbszr felhasznlhat tartalomblokkokat, mint pldul fejlcet s lblcet? Hogyan alakthatunk ki egy layout oldal segtsgvel egysges kinzetet az sszes oldalnak? Hogyan kldhetnk t adatot futs kzben a layout oldalra? Hogyan hozzunk ltre s hasznljunk egy sajt helpert?
A fejezetben a kvetkez ASP.NET funkcikrl olvashatunk: Tartalomblokkok, amelyek HTML kdot tartalmaz fjlok, s tbb oldalra is beszrhatk. Layout oldalak, amelyek HTML tartalommal rendelkeznek, s tbb oldalon is felhasznlhatjuk webhelynkn. A RenderPage, RenderBody s RenderSection metdusok, amelyek jelzik az ASP.NET-nek, hogy hova kell az oldal elemeit beilleszteni. A PageData sztr, amely lehetv teszi, hogy adatot osszunk meg tartalomblokkok s layout oldalak kztt.
Tbbszr hasznlhat tartalomblokkok ltrehozsa

Tbb weboldalon is tallunk olyan tartalmat, amely minden oldalon megjelenik, mint pldul a fejlc s lblc, vagy egy doboz, amely mutatja, hogy a felhasznl be van-e jelentkezve. Az ASP.NET-tel egy klnll fjlt hozhatunk ltre egy olyan tartalomblokkal, amelyben van szveg s kd, mint egy tlagos weboldalon. Ezutn beilleszthetjk ezt a tartalomblokkot olyan oldalakra a weblapon, ahol szeretnnk, hogy megjelenjen a rajta lv informci. Ezltal nem kell kln bemsolni ugyanazt a szveget minden oldalra. Egy ilyen egyszer tartalom ltrehozsa a frisstst is egyszerbb teszi. Ha meg szeretnnk vltoztatni a tartalmat, csak egy fjlt kell frisstennk ahhoz, hogy ez mindenhol frissljn, ahova ezt a tartalmat beszrtuk. A kvetkez diagram bemutatja, hogyan mkdnek a tartalomblokkok. Amikor egy bngsz kr egy oldalt a webszervertl, az ASP.NET beszr egy tartalomblokkot, ott, ahol a RenderPage metdust a foldalra hvjk. A ksz (sszefslt) oldalt ezutn kldi el a bngsznek.
Honlappts a XXI. szzadban 4. fejezet Egysges megjelens kialaktsa
92
Ebben az eljrsban olyan oldalt hozunk ltre, amely kt tartalomblokkra utal (egy fejlcre s egy lblcre), melyek kln fjlokban tallhatk. Ezeket a tartalomblokkokat hasznlhatjuk brmely oldalnl a weblapunkon. Ha kszen vagyunk, egy hasonl oldalt kapunk:
1. A weblap gykrmappjban hozzunk ltre egy fjlt: Index.cshtml! 2. Cserljk ki a mr ltez kdot a kvetkezre:
<html> <head> <title>Main Page</title> </head> <body> <h1>Index Page Content</h1> <p>This is the content of the main page.</p> </body> </html>
3. A gykrmappban hozzunk ltre egy mappt: Shared! Megjegyzs: ltalban az olyan fjlokat, amelyeket megosztunk weboldalak kztt, Shared nev mappba helyezzk. 4. Hozzunk ltre a Shared mappban egy fjlt: _Header.cshtml! Honlappts a XXI. szzadban 4. fejezet Egysges megjelens kialaktsa
93
5. Cserljnk ki brmilyen mr ltez tartalmat a kvetkezre:

<div class="header"> This is header text. </div>
Figyeljnk arra, hogy a fjl neve _Header.cshtml, egy alulvonssal (_) az elejn. Az ASP.NET nem kld el egy oldalt a bngsznek, ha annak a neve alulvonssal kezddik. Ezzel megelzhetjk, hogy ezeket az oldalakat (figyelmetlensgbl vagy mskpp) lekrdezzk. Hasznos, ha alulvonssal jelljk azokat az oldalakat, amelyekben van tartalomblokk, mert nem szeretnnk, hogy ezekhez a felhasznlk hozzfrhessenek ezek kifejezetten arra kszltek, hogy ms oldalakra is beszrjuk ket. 6. Hozzunk ltre a Shared mappban egy fjlt: _Footer.cshtml, majd cserljk ki a tartalmat a kvetkezre:
<div class="footer"> 2010 Contoso Pharmaceuticals. All rights reserved. </div>
7. Az Index.cshtml oldalon adjuk hozz a kvetkez, kiemelt kdot, amely kt hvst intz a RenderPage metdushoz:
<html> <head> <title>Main Page</title> </head> <body> @RenderPage("/Shared/_Header.cshtml") <h1>Index Page Content</h1> <p>This is the content of the main page.</p> @RenderPage("/Shared/_Footer.cshtml") </body> </html>
Ez megmutatja, hogyan szrjunk be egy tartalomblokkot a weboldalra. Elhvjuk a RenderPage metdust, s tadjuk neki a fjl nevt, amelyet ennl a pontnl be akarunk illeszteni. Itt a _Heather.cshtml s a _Footer.cshtml fjlok tartalmait illesztjk be az Index.cshtml fjlba. 8. Futtassuk le a bngszben az Index.cshtml oldalt! (Futtats eltt gyzdjnk meg rla, hogy az oldalt a Files nvhelyrl vlasztottuk!) 9. Jelentsk meg a forrst a bngszben. (Pldul az Internet Explorerben jobb egrgomb lenyomsa utn kattintsunk a View Source-ra!) Ez elrhetv teszi a weboldal ltal a bngsznek kldtt kdot, amely egyesti az index oldal kdjt a tartalomblokkokkal. A kvetkez plda megmutatja az oldal forrst, amelyet az Index.cshtml-nek ad t. A RenderPage-hez indtott hvsok, amelyeket az Index.cshtml-be illesztettnk be felcserldtek a fejlc s lblc fjlok aktulis tartalmval.
<html> <head> <title>Main Page</title> </head> <body>
94
<div class="header"> This is header text. </div> <h1>Index Page Content</h1> <p>This is the content of the main page.</p> <div class="footer"> 2010 Contoso Pharmaceuticals. All rights reserved. </div> </body> </html>
Egysges ltvny kialaktsa layout oldalakkal

Mr lthattuk, mennyire egyszer tartalmat ltrehozni egyszerre tbb oldalon. Egy ennl is strukturltabb mdja az ttekinthet megjelentsnek a layout oldalak hasznlata. A layout oldal meghatrozza az oldal struktrjt, de nem tartalmaz semmilyen tartalmat. Egy ilyen oldal elksztse utn ltrehozhatunk tartalommal is rendelkez oldalakat s hozzkapcsolhatjuk ket a layout oldalakhoz. Amikor megjelentjk ezeket a tartalmakat, a layout oldal szerint lesznek formzva. (Ebben az rtelemben a layout oldal gy viselkedik, mint egy sablon a tartalommal rendelkez oldalak szmra.) Egy megjelens oldal annyiban tr el egy msik HTML oldaltl, hogy elhvhatja a RenderBody metdust. A RenderBody metdus pozcija a megjelens oldalon meghatrozza, hogy hova kerljn a megjelentend tartalom. A kvetkez diagram megmutatja, hogyan kapcsoldnak ssze a tartalommal rendelkez oldalak a megjelens oldalakkal, hogy egy ksz weboldalt kapjunk. A bngsz lekri a tartalommal rendelkez oldalt. Ez az oldal tartalmaz egy kdot, amely meghatrozza, milyen megjelenst kell hasznlni az oldal megjelentshez. A megjelents oldalban a tartalom oda lesz beillesztve, ahol a RenderBody metdust elhvjk. Tartalomblokkokat is beilleszthetnk a megjelens oldalba a RenderPage metdus meghvsval, ahogyan azt az elz rszben csinltuk. A ksz weboldal ezutn jelenik meg a bngszben.
A kvetkez eljrs megmutatja, hogyan kszthetnk layout oldalt, majd hogyan csatolhatunk ahhoz tartalmat. 1. A weboldalunk Shared mappjba hozzunk ltre egy fjlt: _Layout1.cshtml! Honlappts a XXI. szzadban 4. fejezet Egysges megjelens kialaktsa
95
2. Cserljnk ki minden, mr ltez tartalmat a kvetkezre:

<head> <title> Structured Content </title> <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" /> </head> <body> @RenderPage("/Shared/_Header2.cshtml") <div id="main"> @RenderBody() </div> <div id="footer"> 2010 Contoso Pharmaceuticals. All rights reserved. </div> </body> </html>
A RenderPage metdust hasznljuk tartalomblokkok beillesztshez a layout oldalakon. A layout oldal csak egy hvst krhet le a RenderBody metdustl. Megjegyzs: A webszerverek nem mind ugyangy kezelik a hiperhivatkozsokat (a linkek href attribtumt). Ezrt az ASP.NET rendelkezik egy @href helperrel, amely rtelmezi az elrsi utat, s olyan formra alaktja, hogy azt a webszerver is elfogadja. 3. A Shared mappban hozzunk ltre egy fjlt: _Header2.cshtml, majd cserljnk ki minden, mr ltez tartalmat a kvetkezre:
<div id="header"> Chapter 3: Creating a Consistent Look </div>
4. A gykrknyvtrban hozzunk ltre egy mappt: Styles! 5. A Styles mappban hozzunk ltre egy fjlt: Styles.css majd adjuk meg a kvetkez stlus defincikat:
h1 { border-bottom: 3px solid #cc9900; font: 2.75em/1.75em Georgia, serif; color: #996600; }
ul { list-style-type: none; }
body { margin: 0; padding: 1em; background-color: #ffffff; font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
96
color: #006600; }
#list { margin: 1em 0 7em -3em; padding: 1em 0 0 0; background-color: #ffffff; color: #996600; width: 25%; float: left; }
#header, #footer { margin: 0; padding: 0; color: #996600; }
Ezek a stlus defincik csak bemutatjk, hogyan hasznlhatjuk a stlus lapokat a layout oldalaknl. Ha szeretnnk, akr sajt stlust is sszellthatunk ezekre az elemekre. 6. A gykrmappban hozzunk ltre egy fjlt: Content1.cshtml, majd cserljnk ki minden, mr ltez tartalmat a kvetkezre:
@{ Layout = "/Shared/_Layout1.cshtml"; } <h1> Structured Content </h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Ez az oldal hasznlni fogja a layout oldalt. A tetejn tallhat kdblokk hatrozza meg, hogy mely layout oldalt fogja hasznlni a tartalom formzshoz. 7. Futtassuk le a bngszben a Content1.cshtml-t! A lekrt oldal a _Layout1.cshtml-ben lv formzst s stlust fogja hasznlni a Content1.cshtml-ben sszefoglalt szvegnek.
97
A 6. lpst megismtelhetjk, ha tovbbi tartalommal rendelkez oldalt szeretnnk hozzadni a weblaphoz ugyanezzel a megjelenssel. Megjegyzs: Bellthatjuk az oldalunkat gy, hogy automatikusan ugyanazt a layout oldalt hasznlja a mappban lv sszes tartalomra. Tovbbi informcit tallunk a 19.fejezetben - A Site-Wide viselkeds testreszabsa.
Tbbfle tartalommal rendelkez layout oldalak tervezse

Egy tartalommal rendelkez oldal tbbfle szakaszbl llhat. A tartalmi oldalon minden szakasznak kln nevet adunk. (Az alaprtelmezett szakasz nvtelen marad.) A layout oldalon a RenderBody metdussal meghatrozzuk, hogy hol jelenjen meg a nvtelen (alaprtelmezett) szakasz. Ezutn kln RenderSection metdusokat adunk hozz, hogy kln elnevezzk a hozzadott szakaszokat. A kvetkez diagramban lthatjuk, hogy az ASP.NET hogyan kezeli az olyan tartalmakat, amelyek tbb rszre vannak osztva. Minden elnevezett szakasz megtallhat a tartalom oldal szakasz blokkjban. (A pldban Header s Listnek nevezzk ket.) A keretrendszer azon a ponton illeszti be a tartalom szakaszt a layout oldalba, ahol a RenderSection metdust lehvjk. Mint mr korbban lttuk, a nvtelen (alaprtelmezett) szakaszt arra a pontra illeszti be, ahol a RenderBody metdust lehvtk.
98
Ebbl a folyamatbl lthatjuk, hogyan tudunk olyan tartalommal rendelkez oldalt szerkeszteni, amelyben tbb tartalomszakasz is van, s hogyan lehet ezeket hozzadni a layout oldalhoz, amely tmogatja a tbb tartalommal br szakaszokat. 1. A weboldalunk Shared mappjban hozzunk ltre egy fjlt: _Layout2.cshtml. 2. Cserljnk ki minden, mr ltez tartalmat a kvetkezre:
<html> <head> <title>Multisection Content</title> <link href="@Href("/Styles/Site.css")" type="text/css" /> </head> <body> <div id="header"> @RenderSection("header") </div> <div id="list"> @RenderSection("list") </div> <div id="main"> @RenderBody() </div> <div id="footer"> 2010 Contoso Pharmaceuticals. All rights reserved. </div> </body> </html> rel="stylesheet"
Mind a fejlc, mind a lista szakaszok hozzadshoz a RenderSection metdust hasznljuk. Honlappts a XXI. szzadban 4. fejezet Egysges megjelens kialaktsa
99
3. A gykrmappban hozzunk ltre egy fjlt: Content1.cshtml, majd cserljnk ki minden, mr ltez tartalmat a kvetkezre:
@{ Layout = "/Shared/_Layout2.cshtml"; } @section header { <div id="header"> Chapter 3: Creating a Consistent Look </div> } @section list { <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Consecte</li> <li>Eiusmod</li> <li>Tempor</li> <li>Incididu</li> </ul> } <h1>Multisection Content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Ez a tartalommal rendelkez oldal tartalmaz egy kdblokkot a lap tetejn. Mindegyik elnevezett szakasz egy szakaszblokkban tallhat. Az oldal tbbi rsze az alaprtelmezett (nvtelen) tartalom szakaszt tartalmazza. 4. Futtassuk az oldalt a bngszben!
100
Opcionlis tartalomszakaszok ltrehozsa

ltalban a tartalommal rendelkez oldalon ltrehozott szakaszok ugyanolyanok, mint a layout oldalakon lvk. Klnfle hibazeneteket kaphatunk, ha a kvetkezk merlnek fel: A tartalmi rszben van olyan szakasz, amely nem tartozik egy szakaszhoz sem a layout oldalon. A layout oldal tartalmaz olyan szakaszt, amihez nincs tartalom. A layout oldal tbb olyan metdust is tartalmaz, amely ugyanazt a szakaszt kri le.
Azonban ezt a fajta hibalehetsget kikszblhetjk, ha egy megnevezett szakaszt opcionlisnak vlasztunk ki a layout oldalon. Ezzel definilhatunk tbbszrs tartalommal br oldalakat, amelyek egyszerre hasznlhatjk a layout oldalt, gy akr az is elfordulhat, hogy nem lesz tartalom egy kifejezett szakaszhoz. 1. Nyissuk meg a Content2.cshtml-t s trljk ki a kvetkez rszt:
@section header { <div id="header"> Chapter 3: Creating a Consistent Look </div> }
2. Mentsk el az oldalt, majd futtassuk le egy bngszben! Egy hibazenet jelenik meg, mert a tartalommal rendelkez oldal nem tud szolgltatni tartalmat a layout oldal egyik szakaszhoz, nevezetesen a fejlc szakaszhoz.
101
3. Shared mappban nyissuk meg a _Layout2.cshtml oldalt, s helyettestsk ezt a sort:

@RenderSection("header")
a kvetkez kddal:
@RenderSection("header", required: false)
Alternatvaknt az elz kdsort kicserlhetjk a kvetkez kdblokkra, ami ugyanazt eredmnyezi:

@if (IsSectionDefined("header")) { @RenderSection("header") }
4. Futtassuk jra a Content2.cshtml oldalt a bngszben! (Ha mg mindig ez az oldal fut a bngszben, egyszeren frissthetjk azt.) Ez alkalommal nem hoz fel hibazenetet, br hinyzik a fejlc is.
Adat kldse layout oldalakra

A tartalmi rszben elfordulhat olyan adat, amelyre a layout oldalon utalni kell. Ha tallkozunk ilyennel, az informcit t kell kldennk a tartalmi oldalrl a layout oldalra. Pldul ha fel akarjuk tntetni a felhasznl llapott, vagy megjelenteni, illetve elrejteni rszeket a felhasznlk tpusa szerint. Ahhoz, hogy adatot kldjnk t a tartalmi oldalrl a layout oldalra, rtkeket adhatunk hozz a tartalmi oldal PageData tulajdonsghoz. A PageData tulajdonsg egy nv/rtk pr, amely az ltalunk tkldeni kvnt adatokat tartalmazza. A layout oldalon ksbb ezeket az rtkeket olvashatjuk a PageData tulajdonsgainl. Itt egy jabb diagram. Ez bemutatja, hogy az ASP.NET hogyan hasznlja a PageData tulajdonsgot ahhoz, hogy a tartalmi oldalrl rtkeket kldjn t a layout oldalra. Amikor az ASP.NET elkezdi pteni a weboldalt, elkszti a PageData kollekcit. A tartalmi oldalon kdot kell rnunk ahhoz, hogy adatot rjunk be a PageData kollekcihoz. A PageData kollekciban lev rtkeket a tartalmi oldal ms szakaszaibl vagy kln tartalmi blokkbl is elrhetjk.
102
A kvetkez folyamat bemutatja, hogyan kldhetnk t adatot a tartalmi oldalrl a layout oldalra. Amikor az oldal fut, egy gombbal lehet eltntetni illetve megjelenteni egy listt a layout oldalrl. Ha a felhasznl a gombra kattint, igaz/hamis (Boole-i) rtket llt be a PageData tulajdonsgban. A layout oldal kiolvassa az rtket, s ha hamis, eltnteti a listt. Az rtk a tartalmi oldalon is szerepel, hogy megjelentse-e a Hide List (Lista eltntetse) vagy a Show List (Lista megjelentse) gombokat.
1. A gykrmappban hozzunk ltre egy fjlt: Content3.cshtml, majd cserljnk ki minden, mr ltez tartalmat a kvetkezre:
@{ Layout = "/Shared/_Layout3.cshtml"; PageData["Title"] = "Passing Data";
103
PageData["ShowList"] = true; if (IsPost) { if (Request["list"] == "off") { PageData["ShowList"] = false; } } } @section header { <div id="header"> Chapter 3: Creating a Consistent Look </div> } <h1>@PageData["Title"]</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> @if (PageData["ShowList"] == true) { <form method="post" action=""> <input type="hidden" name="list" <input type="submit" value="Hide </form> } else { <form method="post" action=""> <input type="hidden" name="list" <input type="submit" value="Show </form> }
value="off" /> List" />
value="on" /> List" />
A kd kt adatot trol a PageData tulajdonsgon - a weboldal cmt s a lista megjelentshez szksges igaz vagy hamis rtket. Jegyezzk meg, hogy az ASP.NET felttelesen engedi a HTML kdot hasznlni az oldalon egy kdblokkal! Pldul az if/else blokk a szvegtrzsben meghatrozza, melyik formt hasznlja, attl fggen, hogy a PageData["Show List"] igaz rtkre van-e lltva. 2. A Shared mappban hozzunk ltre egy fjlt: _Layout3.cshtml, majd cserljnk ki minden, mr ltez tartalmat a kvetkezre:
<!DOCTYPE html> <html> <head> <title>@PageData["Title"]</title> <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" /> </head> <body>
104
<div id="header"> @RenderSection("header") </div> @if (PageData["ShowList"] == true) { <div id="list"> @RenderPage("/Shared/_List.cshtml") </div> } <div id="main"> @RenderBody() </div> <div id="footer"> 2010 Contoso Pharmaceuticals. All rights reserved. </div> </body> </html>
A layout oldal tartalmaz <title> elemet, ami lekri a cmrtket a PageData tulajdonsgtl. Ez szintn hasznlja a PageData tulajdonsg ShowList rtkt, hogy megjelentse-e a lista tartalmt. 3. A Shared mappban hozzunk ltre egy fjlt: _List.cshtml, majd cserljnk ki minden, mr ltez tartalmat a kvetkezre:
<ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Consecte</li> <li>Eiusmod</li> <li>Tempor</li> <li>Incididu</li> </ul>
4. Futtassuk a Content3.cshtml oldalt egy bngszben! Az oldalon lthat a lista a bal oldalon s egy Hide List gomb az oldal aljn.
105
5. Kattintsunk a Hide Listre! A lista eltnik s a gomb tvlt Show Listre.
6. Kattintsunk a Show List gombra, s a lista ismt megjelenik!
Egyszer helper ltrehozsa s hasznlata

Tovbbi lehetsg egy egysges nzet kialaktshoz, ha ltrehozunk egy egyni helpert. Mint azt mr lthattuk a 2. fejezetben, a helper olyan elem, amellyel egy sszetett feladatot vihetnk vghez egyetlen kdsor segtsgvel. Az ASP.NET tbb helperrel is rendelkezik, melyekkel a ksbbi fejezetekben jobban megismerkednk. A helperek teljes listjt a Fggelk ASP.NET API referencia rszben talljuk. Honlappts a XXI. szzadban 4. fejezet Egysges megjelens kialaktsa
106
Az egysges megjelents kialaktsban egy helper gy tud segteni, hogy lehetv teszi a gyakran hasznlt kdblokkok egyszer elrst a webhely sszes oldaln. Tegyk fel, hogy oldalunkon olyan megjegyzseket szeretnnk gyakran hasznlni, amelyek klnllnak a norml paragrafusoktl. Ezeket a <div> elemmel tehetjk meg, amely egy krlhatrolt dobozt forml. Ahelyett, hogy minden oldalra ugyanazt a jellst vinnnk fel, kszthetnk belle egy kisegtt, amelyet megjegyzseinkhez mindenhova beilleszthetnk egyetlen kdsorral. Ezzel az oldalon lv kdok knnyen felismerhetek, s egyszerbben tlthatbbak. Az oldal fejlesztst is knnyebb teszi, hiszen ha csak jegyzetek kinzett szeretnnk megvltoztatni, elg csak egy helyen trni a kdot. Ez a folyamat bemutatja, hogyan ksztsnk helpert, amely a fent emltett pldnkban a megjegyzseket formzza. Ez egy egyszer plda, az egyni helper brmely, szmunkra hasznos jellst vagy ASP.NET kdot tartalmazhatja. 1. A weboldal gykrmappjban hozzunk ltre egy j mappt: App_Code! 2. Az App_Code mappban hozzunk ltre egy j .cshtml fjlt: MyHelpers.cshtml! 3. Cserljnk ki minden mr meglv tartalmat a kvetkezre:
@helper MakeNote(string content) { <div class="note" style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;"> <p> <strong>Note</strong> @content </p> </div> }
A kd a @helper szintaxist hasznlja, hogy ltrehozza az j MakeNote kisegtt. Ez a kisegt segt a content paramter tkldsben, amely tartalmazhat szveget s formzst is egyarnt. A kisegt a @content vltoz segtsgvel illeszt be egy stringet a jegyzet trzsbe. Jegyezzk meg, hogy a fjl neve MyHelpers.cshtml , de a kisegt MakeNote! Tbb kisegtt is elhelyezhetnk egy fjlban. 4. Mentsk el s zrjuk be a fjlt! A kvetkez folyamat azt mutatja be, hogyan illessznk be a weboldalba megjegyzst az ltalunk elksztett kisegtvel. 1. A gykrmappban hozzunk ltre egy j fjlt: TestHelper.cshtml! 2. Adjuk a fjlhoz a kvetkez kdot:
<head> <title>Test Helpers Page</title> </head> <body> <p>This is some opening paragraph text.</p>  @MyHelpers.MakeNote("My test note content.") <p>This is some following text.</p> </body> </html>
107
Ahhoz, hogy elhvjuk az ltalunk elksztett kisegtt, hasznljuk a @-ot a kisegt fjlnv eltt, egy pontot, majd a kisegt nevt! (Ha tbb mappnk is volt az App_Code mappban, akkor hasznlhatjuk a @FolderName.FileName.HelperName szintaxist is, hogy elhvjuk a kisegtt brmelyik begyazott mappaszintrl.) A zrjelesen, idzjelek kztt megadott szveget fogja a helper gy megjelenteni az oldalon, mint egy megjegyzst. 3. Mentsk el az oldalt, majd futtassuk egy bngszben! A kisegt oda fogja helyezni a jegyzetet, ahol azt elhvtuk: a kt paragrafus kz.
108
5. fejezet Munka az rlapokkal

Egy rlap a HTML dokumentum azon rsze, ahol elhelyezhetnk felhasznli beviteli vezrlket, pldul szvegdobozokat, jellngyzeteket, vlasztkapcsolkat vagy legrdl listkat. Akkor hasznlunk rlapokat, amikor a felhasznl ltal bevitt adatokat szeretnnk sszegyjteni s feldolgozni. A fejezetbl megtudhatjuk: Hogyan hozzunk ltre egy HTML rlapot? Hogy olvassunk ki felhasznl ltal bevitt adatokat az rlapbl? Hogyan ellenrizhetjk a bevitt adatokat? Hogyan lltsuk vissza az rlap rtkeit az oldal elkldse utn?
A kvetkez ASP.NET programozsi fogalmakat mutatjuk be a fejezetben: A Request objektum Bevitel ellenrzse HTML kdols
Egy egyszer HTML rlap ltrehozsa

1. Hozzunk ltre egy j webhelyet. 2. A gykrmappjba hozzuk ltre a Form.cshtml nev weboldalt, s rjuk be a kvetkez kdot:
<!DOCTYPE html> <html> <head> <title>Customer Form</title> </head> <body> <form method="post" action=""> <fieldset> <legend>Add Customer</legend> <div> <label for="CompanyName">Company Name:</label> <input type="text" name="CompanyName" value="" /> </div> <div> <label for="ContactName">Contact Name:</label> <input type="text" name="ContactName" value="" /> </div> <div> <label for="Employees">Employee Count:</label> <input type="text" name="Employees" value="" /> </div> <div> <label> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form>
Honlappts a XXI. szzadban 5. fejezet Munka az rlapokkal
109
</body> </html>
3. Futtassuk az oldalt a bngszben.(Bizonyosodjunk meg, hogy az oldal ki van vlasztva a Files nvtrben, mieltt futtatjuk.) Egy egyszer rlap jelenik meg hrom beviteli mezvel s egy Submit gombbal.
Ezen a ponton, ha a Submit gombra kattintunk, semmi sem trtnik. Hogy az rlapot hasznlhatv tegyk, hozz kell adnunk nhny sor kdot, ami a szerveren fog lefutni.
Felhasznl ltal bevitt rtk olvassa az rlapbl

Hogy feldolgozzuk az rlapot, hozzadunk egy kdot, ami kiolvassa a benyjtott mezrtkeket s valamilyen feladatot vgrehajt. A most kvetkez feladat bemutatja, hogyan lehet kiolvasni a mezket s megjelenteni a bevitt rtkeket az oldalon. (A val letben rengeteg izgalmas mdon hasznlhatjuk fel a felhasznli bevitelt. Ezekkel ksbb az adatbzisokkal kapcsolatos fejezetben tallkozhatunk.) 1. A Form.cshtml file tetejre szrja be a kvetkez kdot:
@{ if (IsPost) { string companyname = Request["companyname"]; string contactname = Request["contactname"]; int employeecount = Request["employees"].AsInt(); <text> You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname <br /> Employee Count: @employeecount <br /> </text> } }
Amikor a felhasznl elszr kri az oldalt, csak az res rlap fog megjelenni. A felhasznl (jelen esetben n) kitlti az rlapot s rkattint a Submit gombra. Ezek a bejegyzsek a felhasznl ltal bevitt adatok a szerverre. A krelem eljut ugyanerre a weboldalra (nvszerint a Form.cshtml-re), mert amikor elksztettk az rlapot az elz feladatrszben, a form elem action attribtumt resen hagytuk:
<form method="post" action="">
110
Amikor elkldjk az oldalt, a megadott adatok megjelennek az rlap fltt:
Nzzk meg a lap kdjt! Legelszr hasznljuk az IsPost metdust, hogy meghatrozzuk, a lap el lett-e kldve, vagyis rkattintott-e a felhasznl a Submit gombra. Ha elkldte, az ISPost igazat fog mutatni. Ez az ltalnos eljrs az ASP.NET-ben annak kidertsre, hogy bels lekrssel (GET request) vagy felhasznli bevitellel (POST request) dolgozunk. (A GET-rl s a POST-rl rszletesebben a 3. fejezetben, a HTTP GET s POST metdusok s az IsPost tulajdonsg rszben olvashatunk. Ezutn megkapjuk a felhasznl ltal megadott rtkeket a Request objektumbl, s betesszk ket a vltozkba, ksbbi felhasznlsra. A Request objektum tartalmazza az oldal ltal benyjtott rtkeket, mindegyiket egy kulccsal azonostva. A kulcsok megegyeznek az rlapmezk name attribtumaival. A companyname mez (szvegdoboz) kiolvasshoz pldul hasznljuk a Request["companyname"] parancsot! Az rlaprtkek a Request objektumban stringknt vannak trolva. Ezrt ha szm, dtum vagy egyb tpus rtkkel szeretnnk dolgozni, t kell konvertlni azt stringbl a neknk megfelel tpusra. A pldban, a Request parancs AsInt metdusa tkonvertlja az employees mez rtkeit (ami a foglalkoztatottak szmt mutatja) egy integerre (egsz szmra). 2. Futtassuk az oldalt a bngszben, tltsk ki az rlap mezit, s kattintsunk a Submit gombra! Az oldal megjelenti a megadott rtkeket.
111
HTML kdols a megjelensrt s biztonsgrt A HTML-nek vannak specilis felhasznls karakterei, mint a <,> s &. Ha ezek a specilis karakterek megjelennek ott, ahol nem vrhat, ronthatjk a weboldal megjelenst s funkcionalitst. Pldul a bngsz egy HTML elem kezdeteknt rtelmezi a <karaktert (hacsaknem szkz kveti), mint a <b> vagy <input> elemeket. Ha a bngsz nem ismeri fel az elemet, egyszeren eldobja a < karakterrel kezdd karakterlncot, amg el nem r valamihez, amit jra felismer. Nyilvnvalan ez nhny furcsa jelensget okozhat a weboldalon. A HTML kdols kicserli ezeket a lefoglalt karaktereket egy kddal, amit a bngsz a helyes szimblummal helyettest. Pldul a <karaktert kicserli a < kddal, s a > karaktert a > kddal. A bngsz ezeket a karakterlncokat helyettesti azokkal a karakterekkel, amiket ltni szeretnnk. rdemes mindig HTML kdolst hasznlni a felhasznl ltal bevitt stringek (adatok) megjelentsre. Ha nem tesszk, a felhasznl megprblhat rosszindulat scripteket vagy valami mst futtatni, ami veszlyeztetheti webhelynk biztonsgt vagy olyat tehet, amit mi nem szeretnnk. (Ez klnsen fontos lehet, ha a felhasznltl krnk be adatokat, troljuk valahol, s csak ksbb jelentjk meg azokat ahogyan azt pldul blogos hozzszlsokkal, felhasznli rtkelsekkel tesszk.
Adatbevitel ellenrzse
A felhasznlk hibzhatnak. Elfelejtenek kitlteni mezket, vagy alkalmazottjaik szma helyett egy nevet rnak be. Hogy megbizonyosodjunk arrl, hogy az rlap helyesen lett kitltve, feldolgozs eltt rvnyestjk az adatbevitelt. Ez a mvelet mutatja, hogyan ellenrizzk mindhrom rlapmezt, hogy biztosak legynk, a felhasznl nem hagyta resen. Azt is ellenrizzk, hogy az alkalmazottak szma rtk egy szm-e. Ha ezek kztt valamelyik hibs, kirunk egy hibazenetet, ami jelzi, hogy a felhasznl melyik rtkeket adta meg rosszul. 1. A Form.cshtml fjlban cserljk ki a kd els blokkjt a kvetkezvel:
@{ if (IsPost) { var errors = false; var companyname = Request["companyname"]; if (companyname.IsEmpty()) { errors = true;
112
@:Company name is required.<br /> } var contactname = Request["contactname"]; if (contactname.IsEmpty()) { errors = true; @:Contact name is required.<br /> } var employeecount = 0; if (Request["employees"].IsInt()) { employeecount = Request["employees"].AsInt(); } else { errors = true; @:Employee count must be a number.<br /> } if (errors == false) { <text> You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname <br /> Employee Count: @employeecount <br /> </text> } } }
Ez a kd hasonlt a lecserltre, nhny dologban azonban klnbzik. Az els klnbsg az, hogy megadja az errors nev vltoz kezdrtkt hamisra. Akkor fogjuk megvltoztatni igazra, ha brmelyik rvnyestsi teszt hibt jelez. Minden alkalommal, amikor a kd kiolvassa az rlapmezk rtkeit, lefuttat egy hitelestsi tesztet. A companyname s contactname mezket ellenrizzk az IsEmpty funkci meghvsval. Ha a teszt nem sikerl ( teht az IsEmpty igaz rtket ad), a kd az errors vltozt igazra lltja s megjelenti a megfelel hibazenetet. A kvetkez lps, hogy megbizonyosodunk arrl, hogy a felhasznl szmrtket (egy integert) adott-e meg a beosztottak szmnak. Ehhez hvjuk meg az IsInt funkcit. Ez a funkci igaz rtket ad vissza, ha az ltalunk tesztelt rtk talakthat stringbl integerbe (s termszetesen hamisat, hogyha nem). Ne feledjk, hogy a request objektumban az sszes rtk string! Br ebben a pldban ez nem igazn szmt, gyakran vgznk matematikai mveleteket a megadott szmokkal, ehhez pedig szmm kell alaktanunk a szvegeket. Ha az IsInt szerint az rtk egy integer, lltsuk az employeecount vltozt arra az rtkre. Mindazonltal, mieltt ezt megtesszk, tnylegesen t kell alaktanunk egy integerr, mert amikor employeecount-nak rtket adtunk, szvegknt gpeltk be. Nzzk meg a mintt: az IsInt funkci megllaptja, hogy a szveg egy egsz szmot tartalmaz-e. Az AsInt funkci a kvetkez sorban tnylegesen vgrehajtja az talaktst. Ha az IsInt nem ad igaz rtket, az else blokkban lv parancsok belltjk az errors vltozt igazra. Vgl, miutn minden teszt lefutott, a kd megllaptja, hogy az errors vltoz mg mindig hamis-e. Ha hamis, a kd megjelenti a szvegdobozt, ami tartalmazza a felhasznl ltal megadott rtkeket. Futtassuk az oldalt a bngszben, hagyjuk az rlapmezket resen, s kattintsunk a Submit gombra. A weblap hibt fog jelezni.
113
2. Adjuk meg az rtkeket az rlap mezkben, s kattintsunk a Submit gombra! Az oldal ugyangy mutatja a megadott rtkeket, mint ahogy korbban lttuk.
Az rlap rtkeinek visszalltsa az elklds utn

Amikor az elz rszben az oldalt teszteltk, szrevettk, hogy ha az rvnyests nem sikerlt, minden, amit megadtunk (nemcsak a hibs adatok) eltntek, s az sszes mezt jra ki kellett tlteni. Ez egy fontos dolgot mutat: amikor bekldjk az oldalt, feldolgozzuk, s aztn az oldalt jra megjelentjk, a semmibl. s mint ltjuk, ez azt jelenti, hogy minden rtk, ami az oldalon volt, amikor elkldtk, elveszett. Ezt knnyen orvosolhatjuk. Hozzfrsnk van a bekldtt rtkekhez (a Request objektumban), teht azokat az rtkeket vissza tudjuk rni az rlapmezkbe, amikor az oldalt jra megjelentjk. 1. A Form.cshtml fjlban cserljk ki az alaprtelmezett oldalt a kvetkez kddal:
<!DOCTYPE html> <html> <head> <title>Customer Form</title> </head> <body> <form method="post" action=""> <fieldset> <legend>Add Customer</legend> <div> <label for="CompanyName">Company Name:</label> <input type="text" name="CompanyName" value="@Request["companyname"]" /> </div> <div> <label for="ContactName">Contact Name:</label> <input type="text" name="ContactName" value="@Request["contactname"]" /> </div> <div> <label for="Employees">Employee Count:</label> <input type="text" name="Employees" value="@Request["employees"]" /> </div>
114
<div> <label> </label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body> </html>
Az <input> elem value attribtumt gy lltottuk be, hogy a Request objektum rtkmezit dinamikusan olvassa. Amikor az els alkalommal hvjuk le az oldalt, a Requset objektum rtkei mind resek. Ez rendben van, hiszen az rlap res. 2. Futtassuk az oldalt a bngszben, tltsk ki a mezket vagy hagyjuk ket resen, s kattintsunk a Submit-re! A megjelen oldal tartalmazni fogja a megadott rtkeket.
Tovbbi forrsok angolul

1,001 Ways to Get Input from Web Users Using Forms and Processing User Input Using AutoComplete in HTML Forms Gathering Information With HTML Forms Go Beyond HTML Forms With AJAX
115
6. fejezet Mveletek adatokkal

Ez a fejezet ismerteti, hogyan rhetk el az adatok egy adatbzisban, s hogy hogyan jelentsk meg ezeket az ASP.NET weboldalakkal. Az tmutatbl megtudhatjuk: Hogyan ksztsnk adatbzist? Hogyan csatlakozzunk egy adatbzishoz? Hogyan jelenthetnk meg adatokat egy weboldalon? Hogyan szrjunk be, frisstsnk s trljnk adatbzis rekordokat?
A fejezetben bemutatott szolgltatsok: Mveletek egy Microsoft SQL Server Compact Edition adatbzissal. Mveletek SQL lekrdezsekkel. A Database csoport.
Bevezets az adatbzisokba
Kpzeljnk el egy tipikus cmjegyzket! Minden egyes bejegyzshez a cmjegyzkben (azaz minden szemlyhez) tartoznak informcik (adatok), mint a vezetknv, keresztnv, cm, e-mail cm s telefonszm. Egyik jellegzetes mdja a szemlltetsnek egy oszlopokra s sorokra tagolt tblzat. Adatbzis rtelmben gyakran minden sort egy-egy rekordknt emltnk. Minden oszlop (nha mezknt emltjk) tartalmaz egy rtket az sszes adattpushoz: vezetknv, keresztnv, stb . ID Keresztnv 1 2 Jim Terry Vezetknv Abrus Adams Cm 210 100th St SE Orcas WA 98031 1234 Main St. Seattle WA 99011 E-mail jim@contoso.com terry@cohowinery.com Telefon 555 0100 555 0101
A legtbb adatbzistblhoz kell, hogy tartozzon oszlop, ami egy egyedi azonostt tartalmaz, mint pldul egy gyflszm, szmlaszm, stb... . Ez a tbla elsdleges kulcsaknt ismert, s az egyes oszlopok azonostshoz hasznljuk. Pldnkban az ID nev oszlop az elsdleges kulcs a cmjegyzknkhz. Az adatbzisokrl val alapvet ismereteinkkel kszen llunk megtanulni, hogyan csinljunk egy egyszer adatbzist, s hajtsunk vgre mveleteket, mint adatok hozzadsa, mdostsa s trlse. Relcis adatbzisok Sokflekppen tudunk adatokat trolni, belertve a szveges fjlokat s tblzatokat. Az zleti letben leggyakrabban relcis adatbzisokkal tallkozhatunk. Ez a fejezet nem foglalkozik tl rszletesen az adatbzisokkal, azonban rdemes nhny alapfogalmat megismerni. Egy relcis adatbzisban az informci logikusan szt van osztva tblzatokba. Pldul egy iskolai adatbzis tartalmazhat kln tblkat a dikokrl s tanrokrl. Az adatbzis-kezel szoftverek (mint pldul az SQL Server) tmogatjk azokat a hasznos parancsokat, amelyek segtsgvel a tblk kztt dinamikus kapcsolatokat hozhatunk ltre. Pldul sszekapcsolhatjuk a dikok s osztlyok tblit, hogy elksztsk az rarendeket. A klnbz adatok klnbz tblkon Honlappts a XXI. szzadban 6. fejezet Mveletek adatokkal
116
val elhelyezse egyszerbb, tlthatbb teszi az adatbzis struktrjt, s cskkenti a redundns adatok szksgessgt.
Adatbzis ltrehozsa
Ez az eljrs megmutatja, hogyan hozzuk ltre a SmallBakery nev adatbzist az SQL Server Compact Database tervez eszkzvel, melyet a WebMatrixban tallhatunk meg. Habr tudunk adatbzist kszteni kdok hasznlatval is, sokkal tipikusabb, hogy adatbzist s adatbzistblkat tervez eszkzkkel ksztjk el, pldul a WebMatrixszal. 1. Indtsuk el a WebMatrixot, s a gyorsindts lapon kattintsunk a Site From Tempalate-re! 2. Vlasszuk az Empty Site-ot, aztn a Site Name mezbe rjuk be, hogy SmallBakery, s kattintsunk az OK-r!. A lap elkszlt s megjelent a WebMatrixban. 3. A bal oldali panelon kattintsunk a Databases munkafelletre! 4. A szalagon kattintsunk a New Database-re. gy egy res adatbzist ksztettnk, ugyanazzal a nvvel, mint az oldalunk. 5. A bal oldali panelon bontsuk ki a SmallBaker.sdf csompontot, aztn kattintsuk a Tables-re. 6. A szalagon kattintsunk a NewTable-re. A WebMatrix megnyitja a tblatervezt.
7. A Column Properties-ben a (Name) mezbe rjuk be, hogy Id! 8. Az j Id oszlop miatt lltsuk az Is Identityt s az Is Primary Keyt True-ra (igazra)! Ahogy a neve is mutatja, az Is Primary Key utastja az adatbzist, hogy ez legyen a tbla elsdleges kulcsa. Az Is Identity utastja az adatbzist, hogy rendeljen automatikusan hozz egy azonost szmot minden j rekordhoz, s hogy ez a kvetkez sorszm legyen (kezdve az 1-gyel). 9. A szalagon kattintsunk a New Columra! 10. A Column Properties-ben a (Name) mezbe rjuk be, hogy Name! 11. lltsuk az Allow Nulls-t hamisra! Ez biztostja, hogy a Name oszlop nem maradhat resen. 12. lltsuk a Data Type-t nvarchar-ra! A var rsze a nvarchar-nak azt jelzi, hogy az oszlop adatai egy karakterlncot fognak alkotni, amelynek a mrete vltozhat rekordrl rekordra. (Az n prefixum fejezi ki a national-t, jelezve azt, hogy a mez karakteres adatokat tartalmazhat, amely brmely bct vagy rsrendszert kpviselivagyis azt, hogy a mez Unicode adatokat tartalmaz.) Honlappts a XXI. szzadban 6. fejezet Mveletek adatokkal 117
13. Ugynezzel a lerssal ksztsnk egy Description nev oszlopot! lltsuk az Allow Nulls-t hamisra s a Data Type-ot nvarchar-ra! 14. Ksztsnk egy oszlopot Price nvvel! lltsuk az Allow Nulls-t hamisra s a Data Type-t money-ra! 15. Nyomjuk meg a Ctrl+S-t a tbla mentshez, s nevezzk el Product-nak! Ha elkszltnk, a tbla meghatrozsa gy fog kinzni:
Adatok hozzadsa az adatbzishoz

Most tltsk fel nhny mintaadattal az adatbzisunkat, amikkel a ksbbiekben dolgozni fogunk a fejezetben. 1. A bal oldali panelon bontsuk ki a SmallBaker.sdf csompontot, aztn kattintsuk a Tables-re! 2. Jobb gombbal kattintsunk a Product tblra, utna kattintsunk a Data-ra! 3. A szerkeszts ablakba vigyk be a kvetkez adatsorokat: Name Bread Starwberry Shortcake Apple Pie Pecan Pia Lemon Pia Cupcakes Description Baked frash every day. Made with organic strawberries from our garden. Second only to your moms pie. If you like pecans, this is for you. Made with the best lemons in the world. Your kids and the kid in you will love these. Price 2.99 9.99 12.99 10.99 11.99 7.99
Ne feledjk, hogy semmit sem kell rnunk az ID oszlopba! Mikor elksztettk az Id oszlopot, az Is Identity tulajdonsgt igazra lltottuk, melynek kvetkeztben a rekord automatikusan kap egy azonostt. Ha befejeztk az adatok bevitelt, a tblaterveznk gy fog kinzni:
Honlappts a XXI. szzadban 6. fejezet Mveletek adatokkal
118
4. Zrjuk be az adatbzis adatokat tartalmaz lapot!
Adatok megjelenttse az Adatbzisbl

Ha az adatbzisunk mr tartalmaz adatokat, akkor meg tudjuk azokat jelenteni egy ASP.NET weboldalon. 1. A bal oldali panelon kattintsunk a Files munkaterletre! 2. A weboldal gykerben ksztsnk egy j CSHTML oldalt ListProducts.html nvvel! 3. Cserljk ki a meglv parancsokat a kvetkezre:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <!DOCTYPE html> <html> <head> <title>Small Bakery Products</title> <style> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Small Bakery Products</h1> <table> <thead> <tr> <th>Id</th> <th>Product</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach(var row in db.Query(selectQueryString)){ <tr> <td>@row.Id</td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table>
119
</body> </html>
Az els kdtmbben megnyitjuk a SmallBakery.sdf fjlt (adatbzis), amit korbban ksztettnk el. A Database.Open eljrs felttelezi, hogy a .sdf fjl a weboldalunk App_Data mappjban van. (Megfigyelhetjk, hogy nem kell megadni az .sdf kiterjesztst st, ha megadjuk, az Open eljrs nem is fog mkdni. Megjegyzs: Az App_Data egy specilis mappa az ASP.NET-ben, amit az adat fjlok trolsra hasznl. Tovbbi informcikrt tekintsk meg a fejezet vgn a Csatlakozs egy adatbzishoz rszt Ezek utn ksztnk egy krelmet, amely lekrdezi a kvetkez SQL Select utastst:
SELECT * FROM Product ORDER BY Name
Az utastsban a Product azonostja a tblt a lekrdezshez. A * karakter hatrozza meg, hogy a lekrdezsnek minden oszlopot vissza kell adnia.(Az oszlopokat egyenknt, vesszkkel elvlasztva is ki tudtuk volna vlasztani, ha csak nhny oszlopot akarunk ltni.) Az Order By kikts azt jelzi, hogyan lesznek az adatok vlogatva ebben az esetben a Name oszlop szerint. Ez azt jelenti, hogy az adatok betrend szerint lesznek rendezve minden sorban a Name oszlop rtkei alapjn. Az oldal trzsn a jells egy HTML tblt hoz ltre, amelyet az adatok megjelentsre fog hasznlni. A <tbody> elem belsejben hasznljuk a foreach ciklust annak rdekben, hogy egyenknt megkapjunk minden adatsort, amit a lekrdezs visszaadott. Minden egyes adatsorhoz ksztnk egy HTML tbla sort (<tr> elem). Ezutn ltrehozunk HTML tbla cellkat (<td> elem) minden oszlop szmra. Minden alkalommal, mikor tmegynk a cikluson, a kvetkez rendelkezsnkre ll sor az adatbzisbl a row vltozban van (ezt lltottuk be a foreach segtsgvel). Ahhoz, hogy egy egyni oszlopot kapjunk egy sorbl, hasznlhatjuk a row.Name-et, vagy row.Description-t, vagy brmilyen nevet, amit a sornak szeretnnk adni. 4. Futtassuk az oldalt a bngszben! (Futtats eltt gyzdjnk meg rla, hogy az oldalt kivlasztottuk a Files nvmezben.) Az oldalon megjelenik egy lista, ami a kvetkezkppen fog kinzni:
Strukturlt lekrdez nyelv (SQL) A legtbb kapcsolatos adatbzis az SQL nyelvet hasznlja az adatok kezelsre egy adatbzisban. Ez magban foglalja a parancsokat, melyek segtsgvel lehet az adatokat lekrdezni s frissteni, ezen fell adatbzistblkat lehet ltrehozni, mdostani s kezelni. Az SQL klnbzik a tbbi Honlappts a XXI. szzadban 6. fejezet Mveletek adatokkal
120
programozsi nyelvtl (pldul attl is, amit a WebMatrixban hasznlunk), mivel az SQL alapelve az, hogy megmondhatjuk az adatbzisnak, amit szeretnnk, s az adatbzis feladata kitallni azt, hogy hogyan teljeststse a feladatot. me nhny plda az SQL parancsok kzl, s hogy mit csinlnak:
SELECT Id, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name
Ha a Price rtke tbb, mint 10, akkkor kivlasztja az Id, Name s Price oszlopokat a rekordok kzl a Product tblban, ezek utn betrendben visszaadja az eredmnyeket, ami a Name oszlop rtkein alapul. Eme parancs vissza fog adni egy eredmnyhalmazt, amely tartalmazza a kritriumnak megfelel rekordokat, vagy egy res halmazt, ha nincs megfelel rekord.
INSERT INTO Product (Name, Description, Price) VALUES ("Croissant", "A flaky delight", 1.99)
Ezeket az j rekordokat illeszti be a Product tblba, a Name oszlop rtkt Croissant-ra, a Description oszlopt A flaky delight-ra s a Price oszlopt pedig 1.99-re lltja.
DELETE FROM Product WHERE ExpirationDate < "01/01/2008"
Ez a parancs rekordokat trl a Product tblbl,melyek lejrati dtum oszlopa korbbi, mint 2008. janur 01.. (Termszetesen ez azt felttelezteti, hogy a Product tblnak ltezik ilyen oszlopa. A dtum HH/NN/ formtumban kerl ide, de berhatjuk a helyileg hasznlt formtumban is. Az Insert Into s a Delete parancsok nem dobnak ki eredmnyhalmazokat. Ehelyett egy szmot ad vissza, ami kifejezi, hogy hny rekordot rintett ez a parancs. Nhny ilyen mvelethez (mint rekordok beillesztse s trlse) a folyamatnak szksge van a megfelel engedlyekre a mvelet vgrehajtshoz. Ezrt kell gyakran felhasznlnvvel s jelszval hitelestennk magunkat, amikor fontos adatbzisokhoz csatlakozunk. Tbb tucat SQL utasts ltezik, de mindegyik ugyanazt a mintt kveti, mint ez. Hasznlhatunk SQL parancsokat adatbzistblk ksztsre, rekordok megszmllsra, rak kiszmtsra, valamint szmos tovbbi mvelet vgrehajtshoz.
Adatok beillesztse egy adatbzisba

Ez a rsz bemutatja, hogyan lehet ltrehozni egy oldalt, amely lehetv teszi, hogy a felhasznlk j termkeket adhassanak hozz a Product adatbzis tblhoz. Miutn beillesztettnk egy j termket, az elz rszben ltrehozott ListProducts.html oldal hasznlatval az oldal megjelenti a frisstett tblt. Az oldal tartalmaz egy hitelestt, ami ellenrzi, hogy a felhasznl ltal beillesztett adatok rvnyesek-e az adatbzisban. Pldul az oldalban lev kd biztostja, hogy minden szksges helyre kerljn valamilyen rtk. Megjegyzs: Nhny ilyen mvelethez (mint rekordok beillesztse s trlse) a folyamatnak szksge van a megfelel engedlyekre a mvelet vgrehajtshoz. Ezrt kell gyakran felhasznlnvvel s jelszval hitelestennk magunkat, amikor fontos adatbzisokhoz csatlakozunk (a WebMatrixban ltrehozott tesztadatbzisunk nem ilyen). 1. A weboldalon ksztsnk egy j CSHTML fjlt InsertProducts.html nvvel! 2. Cserljk ki a meglv kdot a kvetkezre:
@{ var var var var db = Database.Open("SmallBakery"); Name = Request["Name"]; Description = Request["Description"]; Price = Request["Price"];
if (IsPost) {
121
// Read product name. Name = Request["Name"]; if (Name.IsEmpty()) { ModelState.AddError("Name", "Product name is required."); } // Read product description. Description = Request["Description"]; if (Description.IsEmpty()) { ModelState.AddError("Description", "Product description is required."); } // Read product price Price = Request["Price"]; if (Price.IsEmpty()) { ModelState.AddError("Price", "Product price is required."); } // Define the insert query. The values to assign to the // columns in the Product table are defined as parameters // with the VALUES keyword. if(ModelState.IsValid) { var insertQuery = "INSERT INTO Product (Name, Description, Price) " + "VALUES (@0, @1, @2)"; db.Execute(insertQuery, Name, Description, Price); // Display the page that lists products. Response.Redirect(@Href("/ListProducts")); } } } <!DOCTYPE html> <html> <head> <title>Add Products</title> <style type="text/css"> label {float:left; width: 8em; text-align: right; margin-right: 0.5em;} fieldset {padding: 1em; border: 1px solid; width: 35em;} legend {padding: 2px 4px; border: 1px solid; font-weight:bold;} .validation-summary-errors {font-weight:bold; color:red; fontsize: 11pt;} </style> </head> <body> <h1>Add New Product</h1> @Html.ValidationSummary("Errors with your submission:") <form method="post" action=""> <fieldset> <legend>Add Product</legend> <div> <label>Name:</label> <input name="Name" type="text" size="50" value="@Name" /> </div> <div> <label>Description:</label>
122
<input name="Description" type="text" size="50" value="@Description" /> </div> <div> <label>Price:</label> <input name="Price" type="text" size="50" value="@Price" /> </div> <div> <label> </label> <input type="submit" value="Insert" class="submit" /> </div> </fieldset> </form> </body> </html>
Az oldal trzse tartalmaz egy HTML rlapot hrom szvegmezvel, melyek segtsgvel a felhasznlk neveket, lersokat s rakat vihetnek be. Mikor a felhasznl az Insert gombra kattint, az oldal tetejn lv kd egy kapcsolatot fog nyitni a SmallBakery.sdf adatbzissal. Ezek utn megkapjuk azokat az rtkeket, amelyeket a felhasznl hagyott jv a Request objektummal, s hozzrendelte azok rtkt a helyi vltozkhoz. Annak ellenrzsre, hogy a felhasznl minden szksges oszlopba bevitt adatokat, tegyk ezt:
Name = Request["Name"]; if (Name.IsEmpty()) { ModelState.AddError("Name", "Product name is required."); }
Ha a Name oszlop rtke res, akkor hasznljuk a ModelState.AddError eljrst, ami kir egy hibazenetet! Megismteljk ezt minden oszloppal, ha ellenrizni szeretnnk ket. Miutn minden oszlopot ellenriztnk, vgezzk el ezt a vizsglatot:
if(ModelState.IsValid) { // ... }
Mikor minden oszlop rvnyestve lett (nem volt res), menjnk tovbb, s hozzunk ltre egy SQL utastst az adatok beillesztshez, majd hajtsuk ezt vgre a kvetkez mdon:
var insertQuery = "INSERT INTO Product (Name, Description, Price) VALUES (@0, @1, @2)";
rtkek beillesztshez hozzunk ltre paramteres helyrzket (@0, @1, @2). Megjegyzs: Mint biztonsgi vintzkeds, mindig fogadtassunk el rtkeket egy paramtereket tartalmaz SQL utastssal, mint ahogy azt lthatjuk az elz pldban. gy a bejv adatok ellenrzsen esnek t, s megelzhetjk az gynevezett SQL injekcis tmadst, amikor a rosszindulat felhasznl krtkony kdot kld a lekrdezsben. A lekrdezs vgrehajtshoz hasznljuk ezt az lltst, ezzel tadva neki a vltozkat, amelyek tartalmazzk a helyrzket helyettest rtkeket:
db.Execute(insertQuery, Name, Description, Price);
Miutn az Insert Into utasts vgrehajtdott, a felhasznlt a termkeket felsorol oldalra kldjk ezzel a sorral: Honlappts a XXI. szzadban 6. fejezet Mveletek adatokkal
123
Response.Redirect("~/ListProducts");
Ha a hitelests nem sikerlt, akkor hagyjuk ki a beillesztst. Ehelyett van egy helpernk az oldalban, amely kpes megjelenteni a felgylemlett hibazeneteket (ha van ilyen).
@Html.ValidationSummary("Errors with your submission:")
Figyeljk meg, hogy a stlusblokk tartalmaz egy .validation-summary-errors nev CSS osztlydefincit! Ez annak a CSS osztlynak a neve, amelyet alaprtelmezettknt hasznlunk a <div> elemhez, ami tartalmazza az ellenrzsi hibkat. Ebben az esetben a CSS osztly meghatrozza, hogy a hitelestsi sszefoglal hibk piros sznnel s flkvr bettpussal jelenjenek meg, de meg tudjuk hatrozni, hogy olyan formtumban mutassa a .validationsummary-errors osztlyt, amilyenben szeretnnk. 3. Nzzk meg az oldalt a bngszben! Az oldalon megjelenik egy rlap, ami hasonlt a kvetkez illusztrcin lvhz:
4. rjuk be az rtkeket minden oszlopba, de a Price oszlopot hagyjuk resen! 5. Kattintsunk az Insert gombra! Az oldal egy hibazenetet fog megjelenteni, mint ahogy a kvetkez kp mutatja. (Nem kszlt j rekord.)
6. Tltsk ki teljesen az rlapot, majd kattintsunk az Insert-re! Most a ListProducts.cshtml oldal fog megjelenni, ami meg is mutatja az j rekordot.
Adatok frisstse egy Adatbzisban

Miutn egy adat bekerlt a tblba, szksg lehet r, hogy frisstsk. A most kvetkez eljrs megmutatja, hogyan ksztsnk kt oldalt, melyek hasonltanak az elz pldban az adatok feltltshez hasznlt oldalhoz. Az els oldal a termkeket mutatja s lehetsget ad arra, hogy a felhasznl kivlasszon egyet a vltoztatshoz. A msodik oldal lehetv teszi, hogy a felhasznl valban szerkeszteni tudja azt, s el is menthesse. Fontos: Egy lesben fut weboldalon ltalban korltozzk, hogy kik szerkeszthetnek adatokat. A tagok hozzadsrl s az egyes tagok jogainak belltsairl rszletesebben a 17. fejezetben (Biztonsgi elemek s felhasznli fikok hozzadsa) olvashatunk. 1. Ksztsnk egy EditProduct.cshtml nev CSHTML fjlt a webhelyen! 2. Cserljk ki a meglv kdot a kvetkezre:
124
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <!DOCTYPE html> <html> <head> <title>Edit Products</title> <style type="text/css"> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Edit Small Bakery Products</h1> <table> <thead> <tr> <th> </th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var row in db.Query(selectQueryString)) { <tr> <td><a href="@Href("/UpdateProducts", row.Id)">Edit</a></td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </body> </html>
Az egyetlen klnbsg a mostani s a korbbi ListProducts.cshtml oldal kztt, hogy a HTML oldal tblja tartalmaz egy extra oszlopot egy Edit linkkel. Mikor erre a hivatkozsra kattintunk, tirnyt minket az UpdateProducts.cshtml oldalra (amit ezt kveten fogunk elkszteni), ahol mdosthatjuk a kivlasztott rekordot. Nzzk meg a kdot, ami elkszti az Edit linket:
<a href="@Href("/UpdateProducts", row.Id)">Edit</a></td>
A kd elkszt egy HTML rgztst (egy <a> elemet), aminek a href tulajdonsga dinamikusra van lltva. A href attribtum kti ki, hogy az oldal megjelenjen, mikor a felhasznl rkattint a hivatkozsra. Ugyancsak ez adja t az aktulis sor Id rtkt a linknek. Mikor fut az oldal, az oldal forrsa ezekhez hasonl linkeket tartalmazhat:
<a href="UpdateProducts/1">Edit</a></td> <a href="UpdateProducts/2">Edit</a></td> <a href="UpdateProducts/3">Edit</a></td>
125
Figyeljk meg, hogy a href tulajdonsg UpdateProducts/n-re lett lltva, ahol n a termkszm. Mikor a felhasznl valamelyik hivatkozsra kattint ezek kzl, a megjelen URL ehhez hasonlan fog kinzni: http://localhost:18816/UpdateProducts/6 Ms szavakkal, a szerkeszts alatt ll termkszm tadsra kerl az URL-be. 3. Nzzk meg az oldalt egy bngszben! Az adatok a kvetkez kphez hasonlan fognak megjelenni:
Ezek utn ltrehozzuk az oldalt, amin a felhasznl tnylegesen frissteni tudja az adatokat. A frisstsi oldal tartalmaz egy rvnyestst, amely ellenrzi a felhasznl ltal bevitt adatokat. Pldul a kd az oldalon gondoskodik arrl, hogy minden szksges oszlopba kerljn rtk. 4. Ksztsnk egy UpdateProducts.cshtml nev CSHTML fjlt a weboldalon! 5. Cserljk ki a meglv kdokat a kvetkezre:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product WHERE Id=@0"; var ProductId = UrlData[0];
if (ProductId.IsEmpty()) { Response.Redirect(@Href("/EditProducts")); } var row = db.QuerySingle(selectQueryString, ProductId); var Name = row.Name; var Description = row.Description; var Price = row.Price; if (IsPost) { Name = Request["Name"]; if (String.IsNullOrEmpty(Name)) { ModelState.AddError("Name", "Product name is required."); } Description = Request["Description"]; if (String.IsNullOrEmpty(Description)) { ModelState.AddError("Description", "Product description is required."); } Price = Request["Price"]; if (String.IsNullOrEmpty(Price)) {
126
ModelState.AddError("Price", "Product price is required."); } if(ModelState.IsValid) { var updateQueryString = "UPDATE Product SET Name=@0, Description=@1, Price=@2 WHERE Id=@3" ; db.Execute(updateQueryString, Name, Description, Price, ProductId); Response.Redirect(@Href("/EditProducts")); } } } <!DOCTYPE html> <html> <head> <title>Add Products</title> <style type="text/css"> label { float: left; width: 8em; text-align: right; margin-right: 0.5em;} fieldset { padding: 1em; border: 1px solid; width: 35em;} legend { padding: 2px 4px; border: 1px solid; font-weight: bold;} .validation-summary-errors {font-weight:bold; color:red; fontsize:11pt;} </style> </head> <body> <h1>Update Product</h1> @Html.ValidationSummary("Errors with your submission:") <form method="post" action=""> <fieldset> <legend>Update Product</legend> <div> <label>Name:</label> <input name="Name" type="text" size="50" value="@Name" /> </div> <div> <label>Description:</label> <input name="Description" type="text" size="50" value="@Description" /> </div> <div> <label>Price:</label> <input name="Price" type="text" size="50" value="@Price" /> </div> <div> <label> </label> <input type="submit" value="Update" class="submit" /> </div> </fieldset> </form> </body> </html>
127
Az oldal trzse tartalmaz egy HTML rlapot, ahol egy termk van kijelezve, s ahol a felhasznl szerkeszteni tudja azt. Ahhoz, hogy megjelenjen a termk, hasznljuk ezt az SQL utastst:
SELECT * FROM Product WHERE Id=@0
Ez ki fogja vlasztani azt a termket, amelyiknek az Id-je megegyezik azzal az rtkkel, amelyik a @0 paramter helyre kerlt. (Mivel az Id az elsdleges kulcs, s ezen fell egyni is, egyszerre csak egy termk rekordot lehet kivlasztani ezzel az eljrssal.) Ahhoz, hogy megkapjuk azt az Id rtket, amelyet ennek a Select utastsnak adtunk meg, ki tudjuk olvasni az rtket, ami t lett adva az oldalnak, mint az URL rsze, hasznljuk a kvetkez szintaxist:
var ProductId = UrlData[0];
Hogy megrkezzen a termk rekordja, hasznljuk a QuerySingle metdust, amely csak egy rekordot fog adni:
var row = db.QuerySingle(selectQueryString, ProductId);
Az egyetlen sor visszakerl a row vltozba. Kivehetnk adatokat minden egyes oszlopbl, s azt tadja a helyi vltozknak, mint ez:
var Name = row.Name; var Description = row.Description; var Price = row.Price;
Az rlap utastsban ezek az rtkek jelennek meg automatikusan az egyes szvegmezkben, a kvetkez begyazott kdot hasznlva:
<input name="Name" type="text" size="50" value="@Name" />
A kd ezen rsze jelzi ki azt a rekordot, amelyik frisstsre kerl. Miutn a rekord megjelent, a felhasznl szerkeszteni tudja az egyes oszlopokat. Mikor a felhasznl elkldi az rlapot az Update gombra kattintva, az if(IsPost) tmbben lv kd lefut. Ez megkapja az rtkeket a Request objektumtl, majd elraktrozza azokat a vltozkban s ellenrzi, hogy minden oszlop ki van-e tltve. Ha a hitelests sikerrel jrt, a kd a kvetkez SQL Update utastst hozza ltre:
UPDATE Product SET Name=@0, Description=@1, Price=@2, WHERE ID=@3
Egy SQL Update utastsban meghatrozzuk minden oszlopnak, hogyan frisstsen, s lltsa be annak rtkt. Ebben a kdban az rtkek meg vannak hatrozva a paramteres helyrzkkel: @0, @1,@2 s gy tovbb. (Mint korbban emltettk, a biztonsg kedvrt mindig fogadtassuk el az rtkeket egy paramtereket tartalmaz SQL utastssal!) Amikor a db.Execute mdszert hasznljuk, tadjuk a vltozkat, amelyek tartalmazzk az rtkeket abban a sorrendben, mely megfelel az SQL utastsban lv paramterek sorrendjnek:
db.Execute(updateQueryString, Name, Description, Price, ProductId);
Miutn az Update utasts vgrehajtsra kerlt, a kvetkez mdszert hasznljuk annak rdekben, hogy a felhasznlt visszairnytsuk a szerkesztsi oldalra.
Response.Redirect(@Href("~/EditProducts"));
128
Amit a felhasznl ltni fog, az a frisstett adatok listja az adatbzisban, s egy msik termk szerkesztsre is lehetsge nylik. 6. Mentsk el az oldalt! 7. Futtassuk az EditProducts.cshtml oldalt (ne az update oldalt), majd kattintsunk az Edit-re, hogy egy termket szerkeszthessnk! Megjelenik az UpdateProducts.cshtml s a kivlasztott termket fogja mutatni.
8. Vgezzk el a vltoztatst, majd kattintsunk az Update-re! A termkek listjt fogja mutatni, de most mr a frisstett adatokkal.
Adatok trlse egy Adatbzisbl

Ez a rsz bemutatja, hogyan tud a felhasznl egy termket trlni a Product adatbzistblbl. A plda kt oldalbl ll. Az els oldal az, ahol a felhasznl kivlasztja a trlni kvnt rekordot. A trlend rekord ezutn egy msodik oldalon fog megjelenni, ami a trls megerstsre kri fel a felhasznlt. Fontos: Egy lesben fut weboldalon ltalban korltozzk, hogy kik szerkeszthetnek adatokat. A tagok hozzadsrl s az egyes tagok jogainak belltsairl rszletesebben a 17. fejezetben (Biztonsgi elemek s felhasznli fikok hozzadsa) olvashatunk. 1. Ksztsnk egy ListProductsForDelete.cshtml nev CSHTML fjlt a weboldalon! 2. Cserljk ki a meglv kdot a kvetkezre:
@{ var db = Database.Open("SmallBakery"); var selectQueryString = "SELECT * FROM Product ORDER BY Name"; } <!DOCTYPE html> <html> <head> <title>Delete a Product</title> <style> table, th, td { border: solid 1px #bbbbbb; border-collapse: collapse; padding: 2px; } </style> </head> <body> <h1>Delete a Product</h1> <form method="post" action="" name="form"> <table border="1"> <thead> <tr> <th> </th> <th>Name</th> <th>Description</th> <th>Price</th>
129
</tr> </thead> <tbody> @foreach (var row in db.Query(selectQueryString)) { <tr> <td><a href="@Href("/DeleteProduct", row.Id)">Delete</a></td> <td>@row.Name</td> <td>@row.Description</td> <td>@row.Price</td> </tr> } </tbody> </table> </form> </body> </html>
Az oldalunk hasonl az EditProducts.cshtml oldalhoz, amit korbban ksztettnk. Azonban ahelyett, hogy egy Edit gomb jelenne meg minden termknl, most egy Delete linket tallunk. A Delete link a kvetkez begyazott kd az utastsban:
<a href="@Href("~/DeleteProduct", row.Id)">Delete</a>
Ez kiad egy URL-t, ami hasonlan nz ki, ha egy felhasznl a hivatkozsra kattint:
http://<server>/DeleteProduct/4
Az URL elhvja a DeleteProducts.cshtml oldalt (amit a kvetkezkben fogunk elkszteni) s tovbbadja a termk Id-jt a trlshez (itt a ngyest). 3. Mentsk el a fjlt, de hagyjuk nyitva! 4. Ksztsnk egy msik CSHTML fjlt DeleteProducts.cshtml nvvel, s cserljk ki a meglv tartalmat a kvetkezre:
@{ var db = Database.Open("SmallBakery"); var ProductId = UrlData[0]; if (ProductId.IsEmpty()) { Response.Redirect(@Href("/ListProductsForDelete")); } var prod = db.QuerySingle("SELECT * FROM PRODUCT WHERE ID = @0", ProductId); if( IsPost && !ProductId.IsEmpty()) { var deleteQueryString = "DELETE FROM Product WHERE Id=@0"; db.Execute(deleteQueryString, ProductId); Response.Redirect("/ListProductsForDelete"); } } <!DOCTYPE html> <html <head> <title>Delete Product</title> </head> <body> <h1>Delete Product - Confirmation</h1> <form method="post" action="" name="form"> <p>Are you sure you want to delete the following product?</p> <p>Name: @prod.Name <br /> Description: @prod.Description <br />
130
Price: @prod.Price</p> <p><input type="submit" value="Delete" /></p> </form> </body> </html>
Az oldal ez utn megkri a felhasznlt, hogy kattintson egy gombra a trls megerstshez. Ez egy fontos biztonsgi lps. Amikor kritikus mveleteket vgznk, pldul rekordok mdostsa vagy trlse, mindig a POST mvelethez kssk, ne a GET mvelethez. Ha a webhelynkben a GET mvelettel elvgezhet ilyen mvelet, brki egy http://<server>/DeleteProduct/4 Url bersval trlhetne adatokat az adatbzisbl. A jvhagy oldallal beptett plusz lpcs a POST mdszerrel hagyja jv ezeket a kritikus mveleteket, gy megelzve a vletlen adatvesztst. A tnyleges trlst a kvetkez kd hajtja vgre. A kd ellenrzi azt is, hogy ez egy POST mvelet, s hogy az adott ID nem res-e:
if( IsPost && !ProductId.IsEmpty()) { var deleteQueryString = DELETE FROM Product WHERE Id=@0; db.Execute(deleteQueryString, ProductId); Response.Redirect(/ListProductsForDelete); }
A kd egy SQL utastst futtat, ami trli a megadott rekordot, majd visszairnytja a felhasznlt a lista oldalra. 5. Futtassuk a ListProductsForDelete.cshtml oldalt a bngszben!
6. Kattintsunk a Delete linkre valamelyik termk mellett! Ekkor megjelenik a DeleteProducts.cshtml oldal, hogy megerstsk a rekord trlst. 7. Kattintsunk a Delete gombra! A termk rekordja trldik, majd az oldal frissl az j termklistval. Csatlakozs egy adatbzishoz Ktfle mdon csatlakozhatunk egy adatbzishoz. Az els, hogy hasznljuk a Database.Open eljrst s meghatrozzuk az adatbzis nevt (lehagyva a .sdf kiterjesztst):
var db = Database.Open("SmallBakery");
Az Open eljrs azt felttelezi, hogy a .sdf fjl a weboldal App_Data mappjban van. Ennek a mappnak szmos jellemzje van, kimondottan az adatok trolsra tervezve. Pldul rendelkezik a megfelel jogosultsgokkal, hogy engedje a weboldalnak az adatok olvasst s rst, s mint biztonsgi intzkeds, a WebMatrix nem teszi lehetv a hozzfrst a fjloknak ehhez a mapphoz. A msodik t, hogy hasznljunk egy gynevezett connection stringet. A connection string informcikat tartalmaz az adatbzishoz val csatlakozshoz. Ez magban foglalhatja a fjl elrsi tjt, vagy tartalmazhatja az SQL Server adatbzis nevt egy helyi vagy tvoli szerveren, s a Honlappts a XXI. szzadban 6. fejezet Mveletek adatokkal 131
szerverhez val csatlakozshoz szksges felhasznlnevet s jelszt. (Hogyha az adatokat egy kzpontilag kezelt SQL Serveren troljuk, pldul egy trhelyet szolgltat oldalon, akkor mindig a connection stringet hasznljuk, hogy megadjuk az adatbzis-kapcsolat informciit. Gyakran a WebMatrixban a connection string egy Web.config nev XML fjlba van elraktrozva. Ahogy a neve is mutatja, hasznlhatjuk a Web-config fjlt a weboldal gykerben konfigurcis informcik trolsra, belertve brmilyen connection stringet, amire az webhelynknek szksge lehet. Egy plda a Web.config fjlban lv connection stringre:
<?xml version="1.0" encoding="utf-8" ?> <configuration> <connectionStrings> <add name="SQLServerConnectionString" connectionString= "server=myServer;database=myDatabase;uid=username;pwd=password" providerName="System.Data.SqlClient" /> </connectionStrings> </configuration>
A pldban a connection string rmutat az SQL Server egyik pldnyban lv adatbzisra, amelyik valahol a szerveren fut (nem pedig egy helyi .sdf fjl). Szksgnk lehet arra, hogy behelyettestsk a megfelel neveket a myServer s myDatabase helyre, s megadjuk az SQL Server belpsi rtkeit a felhasznlnvnek s jelsznak. (A felhasznlnv s jelsz rtkeinek nem felttlenl kell megegyeznie a sajt Windows-os hitelest adatainkkal vagy azzal az rtkkel, amelyet a trhely szolgltat adott neknk, hogy csatlakozhassunk a szervereikre. Ellenriztessk a rendszergazdval a szksges rtkeket!) A Database.Open ejrs rugalmas, mivel lehetv teszi, hogy elfogadjon mind .sdf adatbzis fjl nevet, vagy a Web.config fjlban trolt connection string nevet. A kvetkez plda bemutatja, hogyan csatlakozhatunk az adatbzishoz az elz pldban szemlltetett connection stringet hasznlva.
@{ var db = Database.Open("SQLServerConnectionString"); }
Ahogy megfigyelhettk, a Database.Open eljrs lehetv teszi, hogy elfogadjon egy adatbzis nevet vagy egy connection stringet, s majd kitallja, melyiket hasznlja. Ez igen hasznos, mikor felvonultatjuk (kzztesszk) a weboldalunkat. Hasznlhatunk egy App_Data mappban lv .sdf fjlt, mikor kzztesszk, s teszteljk az oldalunkat. Ezutn, mikor az oldalunkat egy gyrtsi szerverre visszk fel, hasznlhatjuk a connection stringet a Web.config fjlbl, aminek ugyanaz a neve, mint a .sdf fjlunknak, de az a trhely szolgltat adatbzisra mutat mind anlkl, hogy megvltoztattuk volna a kdot. Vgezetl, connection stringgel szeretnnk dolgozni, hasznlhatjuk a eljrst s megadhatjuk az aktulis connection stringet a Web.config fjlban trolt neve helyett. Ez hasznosnak bizonyulhat olyan szitucikban, mikor nincsen hozzfrsnk a connection stringhez (vagy a benne lev rtkekhez, mint a .sdf fjl neve), amg az oldal fut. A legtbb esetben azonban hasznlhatjuk a Database.Open-t, mint ahogy ebben a fejezetben le volt rva.
Database.OpenConnectionString
ha
kzvetlen
Tovbbi forrs angolul

SQL Server Compact
132
7. fejezet Adatok megjelentse gridekben

Az elz fejezetben megtanultuk, hogyan troljunk adatokat egy adatbzisban, s hogyan dolgozzunk velk. Ebben a fejezetben megtudhatjuk, hogyan jelentsnk meg adatokat egy HTML tblzatban, gynevezett griden. Az tmutatbl megtudhatjuk: Hogyan jelentsnk meg adatokat egy weboldalon a WebGrid helper hasznlatval? A griden megjelentett adatok formzsa. Lapozs hozzadsa a gridhez.
A fejezetben bemutatott az ASP.NET weboldal funkci: A WebGrid helper
A WebGrid Helper
Az elz fejezetben sajt kezleg jelentettnk meg adatokat az oldalon. Azonban van egy knnyebb md is az adatok megjelentsnek hasznljuk a WebGrid helpert! A helper le tud renderelni egy HTML tblt az adatok kijelzsre. A helper tmogatja a formzsi belltsokat, s lehetv teszi a felhasznlnak, hogy lapozzon a hossz adatsorok kztt, s hogy rendezze az adatokat az oszlopok fejlceire kattintva.
Adatok megjelentse a WebGrid Helper hasznlatval

Ez az feladat megmutatja neknk, hogyan jelentsnk meg adatokat a WebGrid helperben annak legegyszerbb belltsait hasznlva. 1. Nyissuk meg az 6. fejezet Mveletek adatokkal cm fejezetben ksztett weboldalt. Ha nem csinltuk vgig az elz fejezetben lertakat, nem kell mindet ptolnunk, csupn arra van szksg, hogy ltrehozzuk a SmallBakery.sdf adatbzis fjlt, amit az 5. fejezet elejn ksztettnk el. Ennek a fjlnak a weboldal App_Data mappban kell lennie. 2. Ksztsnk egy j, WebGridBasic.cshtml nev CSHTML fjlt a weboldalon! 3. Helyettestsk a meglv kdokat a kvetkezvel:
@{ var var var var db = Database.Open("SmallBakery") ; selectQueryString = "SELECT * FROM Product ORDER BY Id"; data = db.Query(selectQueryString); grid = new WebGrid(data);
} <!DOCTYPE html> <html> <head> <title>Displaying Data Using the WebGrid Helper</title> </head> <body> <h1>Small Bakery Products</h1> <div id="grid"> @grid.GetHtml() </div> </body> </html>
Honlappts a XXI. szzadban 7. fejezet Adatok megjelentse gridekben
133
A kd elszr megnyitja a SmallBakery.sdf adatbzist, majd egy SQL Select utastst hoz ltre:
SELECT * FROM Product ORDER BY Id
A data nev vltozt az SQL Select utasts ltal szerzett rtkek tltik fel. A WebGrid helpert ezek utn j gridek ksztsre hasznljuk:
var data = db.Query(selectQueryString); var grid = new WebGrid(data);
A kd egy j WebGrid objektumot hoz ltre s hozzrendeli a grid vltozhoz. Az oldal trzsben a WebGrid-et hasznlva rendereljk az adatokat, ezt a kdot alkalmazva:
@grid.GetHtml()
A grid vltoz az az rtk, ami a WebGrid objektum ltrehozsakor kszlt. 4. Futtassuk az oldalt! (Futtats eltt gyzdjnk meg arrl, hogy az oldal ki van vlasztva a Files nvmezben!) A WebGrid helper elkszt egy HTML tblt, ami az SQL Select utasts ltal kivlasztott adatokat tartalmazza:
Figyeljk meg, lehetsgnk van az oszlopnevekre kattintani, hogy rendezzk a tbla adatait a megfelel oszlop szerint. Mint lthatjuk, ha a lehet legegyszerbb kdot is hasznljuk, a WebGrid helper rengeteg mveletet vgrehajt, mikor kijelzi (s sztvlogatja) az adatokat. A helper emellett mg szmos dologra kpes. A fejezet htralv rszbl megtudhatjuk, hogyan lltsuk be a WebGrid helpert, hogy vgrehajtsa a kvetkezket: Meghatrozza, hogy melyik adatoszlopok jelenjenek meg s milyen formzs mellett. Egysges stlust ad az egsz gridnek. Lapozzon adatokon keresztl.
Oszlopok kivlasztsa s formzsa megjelentshez

Alaprtelmezetten a WebGrid helper minden oszlopot megjelent, amit az SQL lekrdezse kiadott. Az adatok kijelzst a kvetkez ton szabhatjuk testre: Honlappts a XXI. szzadban 7. fejezet Adatok megjelentse gridekben
134
Meghatrozhatjuk, melyik oszlopokat jelentse meg a helper s milyen sorrendben. Ezt akkor hasznlhatjuk, ha a lekrdezett adatok csak egy rszt szeretnnk megjelenteni. Meghatrozhatjuk a formzsi utastsokat, hogy hogyan jelenhetnek meg az adatok rjuk ki pldul a pnznem jelt (pldul a $ jelet) a pnzmennyisgeket jelz oszlopokban!
Ebben az eljrsban az oszlopok klnll formzsra fogjuk hasznlni a WebGrid helpert. 1. Hozzunk ltre egy j, WebGridColumnFormat.cshtml nev oldalt a webhelyen! 2. Helyettestsk a meglv kdokat a kvetkezvel:
@{ var var var var db = Database.Open("SmallBakery") ; selectQueryString = "SELECT * FROM Product ORDER BY Id"; data = db.Query(selectQueryString); grid = new WebGrid(data);
} <!DOCTYPE html> <html> <head> <title>Displaying Data Using the WebGrid Helper (Custom Formatting)</title> <style type="text/css"> .product { width: 200px; font-weight:bold;} </style> </head> <body> <h1>Small Bakery Products</h1> <div id="grid"> @grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>), grid.Column("Price", format:@<text>$@item.Price</text>) ) ) </div> </body> </html>
Ez a plda hasonlt az elzhz, annyi klnbsggel, hogy amikor a grid-et lerendereljk a oldal trzsben a grid.GetHtml segtsgvel, akkor meghatrozzuk, hogy melyik oszlop jelenjen meg s hogyan. A kvetkez kd mutatja meg, hogyan hatrozzuk meg, melyik oszlopok jelenjenek meg s milyen sorrendben:
@grid.GetHtml( columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>), grid.Column("Price", format:@<text>$@item.Price</text>) )
Hogy megmondjuk a helpernek, melyik oszlopok jelenjenek meg, be kell foglalnunk a columns paramtert a WebGrid helper GetHtml metdusban. Ebben a gyjtemnyben meghatrozhatjuk, melyik oszlopot foglalja magban. Itt meghatrozhatunk minden egyes megjelenteni kvnt oszlopot a grid.Column objektummal, az oszlop nevnek bersval. Ebben a pldban a WebGrid objektum hrom oszlopot jelent meg: Name, Description s Honlappts a XXI. szzadban 7. fejezet Adatok megjelentse gridekben
135
Price. (Ezeknek az oszlopoknak jelen kell lennik az SQL lekrdezs eredmnyei kztt a helper nem tud megjelenteni olyan oszlopokat, amelyek nem szerepeltek a lekrdezsben.) Vegyk szre, hogy amellett, hogy megjelentnk egy oszlopot, tovbbthatunk tovbbi formzsi utastsokat is. A pldban a kd a Name oszlopot jelenti meg a kvetkez kdot hasznlva:
grid.Column("Name", "Product", style: "product")
Ez a kvetkezket hatrozza meg a WebGrid szmra: Mutassa a Name adatoszlop rtkeit! rja ki a Product stringet az oszlop fejlceknt az eredeti helyett (ami ebben az esetben Name lenne)! Alkalmazza a product nev CSS stlusosztlyt! A pldaknt vett oldal utastsaiban a CSS osztly az oszlopok szlessgt (200 pixel) s a bettpust (flkvr) lltja be. A Description oszlophoz a plda a kvetkez kdot hasznlja:
grid.Column("Description", format:@<i>@item.Description</i>)
Ez hatrozza meg a helpernek, hogy a Description oszlopot jelentse meg. Itt olyan formtumot llt be, ami sortrssel tbb sorba rendezi a szveget, ha az tl hossz lenne:
@<i>@item.Description</i>
A Price oszlop pldja tovbbi vltozatait mutatja meg annak, hogyan hatrozhatjuk meg a format tulajdonsgait:
grid.Column("Price", format:@<text>$@item.Price</text>)
Ez ismt meghatroz nhny HTML utastst, hogy rendereljen s hozzadjon egy dollrjelet ($) az oszlop rtke el. 3. Futtassuk az oldalt egy bngszben!
Ebben az esetben csak hrom oszlopot lthatunk. A Name oszlop testreszabja az oszlop fejlct, mrett, valamint bettpust. A Description oszlop dlt s a Price oszlop most mr tartalmaz egy dollr jelet. Honlappts a XXI. szzadban 7. fejezet Adatok megjelentse gridekben
136
A teljes grid formzsa

Amellett, hogy meg tudjuk hatrozni a klnll oszlopoknak, hogyan jelenjenek meg, formzhatjuk az egsz gridet is. Ehhez meg kell hatroznunk CSS osztlyokat, amik kiktik, hogyan nzzen ki a lerenderelt HTML tbla. 1. Ksztsnk egy WebGridTableFormat.cshtml nev lapot a webhelyen! 2. Helyettestsk a meglv kdokat a kvetkezvel:
@{ var var var var db = Database.Open("SmallBakery"); selectQueryString = "SELECT * FROM Product ORDER BY Id"; data = db.Query(selectQueryString); grid = new WebGrid(source: data, defaultSort: "Name");
} <!DOCTYPE html> <html> <head> <title>Displaying Data Using the WebGrid Helper (Custom Table Formatting)</title> <style type="text/css"> .grid { margin: 4px; border-collapse: collapse; width: 600px; } .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; } .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } .alt { background-color: #E8E8E8; color: #000; } .product { width: 200px; font-weight:bold;} </style> </head> <body> <h1>Small Bakery Products</h1> <div id="grid"> @grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>), grid.Column("Price", format:@<text>$@item.Price</text>) ) ) </div> </body> </html>
Ez a kd az elz pldra pl, megmutatva, hogyan ksztsnk j stlus osztlyokat ( grid, head, grid th, grid td, alt). Ezek utn a grid.GetHtml hozzrendeli a stlusokat a grid klnbz elemeihez a tableStyle, headerStyle,valamint alternatingRowStyle paramtereket hasznlva. 3. Tekintsk meg az oldalt egy bngszben! Ebben az esetben a grid klnbz stlusok hasznlatval jelenik meg, melyek az egsz tblra rvnyesek, pldul a pratlan sorok sznezse:
137
Adatok lapozsa
Ahelyett, hogy egyszerre kijeleztetnnk minden adatot a grid-en, lehetv tesszk a felhasznl szmra, hogy lapozhasson az adatok kztt. Kevs adat mellett a lapozs nem olyan fontos, tbb szz vagy ezer adatsoros gridek esetn azonban jl jhet. Hogy hozzadjuk a lapozs lehetsgt a lerenderelt grid-hez, meg kell hatroznunk tovbbi paramtereket a WebGrid helpernek. 1. Ksztsnk egy WebGridPaging.cshtml nev oldalt! 2. Helyettestsk a meglv kdokat a kvetkezvel:
@{ var var var var db = Database.Open("SmallBakery"); selectQueryString = "SELECT * FROM Product ORDER BY Id"; data = db.Query(selectQueryString); grid = new WebGrid(source: data, defaultSort: "Name", rowsPerPage: 3);
} <!DOCTYPE html> <html> <head> <title>Displaying Data Using the WebGrid Helper (with Paging)</title> <style type="text/css"> .grid { margin: 4px; border-collapse: collapse; width: 600px; } .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; } .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; } .alt { background-color: #E8E8E8; color: #000; } .product { width: 200px; font-weight:bold;} </style> </head> <body> <h1>Small Bakery Products</h1>
138
<div id="grid"> @grid.GetHtml( tableStyle: "grid", headerStyle: "head", alternatingRowStyle: "alt", columns: grid.Columns( grid.Column("Name", "Product", style: "product"), grid.Column("Description", format:@<i>@item.Description</i>), grid.Column("Price", format:@<text>$@item.Price</text>) ) ) </div> </body> </html>
A kd kibvti az elz pldt egy rowsPerPage paramter hozzadsval, amikor a WebGrid objektum kszl. Ez a paramter lehetv teszi szmunkra, hogy belltsuk a megjelentend sorok szmt. Automatikusan engedlyezve lesz a lapozs onnantl, hogy beillesztettk ezt a paramtert. 3. Nzzk meg az oldalt egy bngszben! Figyeljk meg, hogy csak hrom sor jelenik meg. A grid aljn lthatjuk a kezelfelletet, aminek segtsgvel tlapozhatunk a tbbi adatsorhoz.
Tovbbi forrsok
5. fejezet Mveletek adatokkal 8. fejezet Adatok megjelentse diagramokon Angolul: ASP.NET Web Pages with Razor Syntax Reference
139
8. fejezet Adatok megjelentse diagramokon

Az elz fejezetekben megtanulhattuk, hogy kell adatokat megjelenteni manulisan s tblzatknt. Ebben a fejezetben megtanuljuk, hogyan jelenthetjk meg az adatokat diagramokon. Az tmutatbl megtudhatjuk: Hogyan brzoljunk adatokat diagramokon? Hogyan formzzuk a diagramokat a beptett tmk segtsgvel? Hogyan mentsk el a diagramokat ,s hogyan rakjuk ket a gyorsttrba a jobb teljestmny elrse rdekben?
Az albbi ASP.NET programozsi funkcikat ismerhetjk meg a fejezetben: A Chart helper.
A Chart helper
Ha grafikus formban akarunk adatokat megjelenteni, akkor erre hasznlhatjuk a Chart helpert. A Chart helper ltrehoz egy kpet, ami klnfle grafikonokon jelenti meg az adatokat. Szmos klnfle lehetsget knl a formzsra s feliratozsra. A Chart helper tbb mint 30 fle grafikont tud kszteni, tbbek kztt azokat a tpusokat is, melyeket mr a Microsoft Excelbl vagy egyb alkalmazsokbl ismerhetnk, pldul a terletdiagram, svdiagram, oszlopdiagram, grafikon, krdiagram s tbb specilis diagram, mint pldul az rfolyamdiagram.
Terletdiagram
Svdiagram
Oszlopdiagram
Grafikon
Honlappts a XXI. szzadban 8. fejezet Adatok megjelentse diagramokon
140
Krdiagram
rfolyamdiagram
A diagram elemei
A diagramok adatokat s szmos egyb elemet tartalmaznak, pldul jelmagyarzatokat, tengelyeket, adatsorokat, stb. A kvetkez kpen lthatjuk ezeket az elemeket, melyek a Chart helper segtsgvel testreszabhatak. Ez a fejezet bemutatja, hogyan llthatjuk be ezeket az elemeket.
Diagram ksztse az adatokbl

Az adatok, melyekbl a diagramot ksztjk, szrmazhatnak egy tmbbl, egy lekrdezs eredmnyeibl, vagy egy XML fjl adataibl is.
Tmb hasznlata
Ahogyan a 2.fejezetben (Bevezets a WebMatrixba s az ASP.NET weboldalakba) olvashattuk, egy tmbel tbb hasonl elemet trolhatunk egy egyszer vltozban. Ezeket a tmbket hasznlhatjuk arra, hogy a diagramhoz szksges adatokat troljk. Ez az eljrs megmutatja, hogyan csinlhatunk diagramot a tmbkben trolt adatokbl az alap diagramtpus hasznlatval. Azt is megmutatja, hogyan jelenthetjk meg a diagramot az oldalon. 1. Hozzunk ltre egy j fjlt ChartArrayBasic.cshtml nvvel! Honlappts a XXI. szzadban 8. fejezet Adatok megjelentse diagramokon 141
2. Cserljk ki a meglv kdot a kvetkezre:

@{ var myChart = new Chart(width: 600, height: 400) .AddTitle("Chart Title") .AddSeries( name: "Employee", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); }
A kd elszr ltrehoz egy j diagramot, s belltja annak szlessgt s magassgt. Az AddTitle metdussal megadhatjuk a diagram cmt. Adatok hozzadshoz az AddSeries metdust alkalmazzuk. Ebben a pldban az AddSeries metdus name, xValue, s yValues paramtereit hasznljuk. A name paramter a diagram jelmagyarzatban jelenik meg. Az xValue paramter egy olyan sor adatot tartalmaz, amelyek a diagram vzszintes tengelyn lthatk. Az yValues pedig egy olyan sor adatot tartalmaz, melyek a diagram fggleges irny pontjait adjk meg. A Write metdus hozza ltre a diagramot. Ebben a pldban, mivel nem adtuk meg a diagram tpust, ezrt a Chart helper oszlopdiagramot kszt alapbelltsknt. 3. Futtassuk az oldalt a bngszben! (Mieltt futtatjuk, ellenrizzk, hogy az oldal a Files munkaterleten ki van-e vlasztva!) Ekkor a bngsz megjelenti a diagramot.
Adatbzislekrdezs hasznlata a diagram adataihoz

Ha a diagramhoz szksges adatok egy adatbzisban vannak, futtathatunk egy adatbzis lekrdezst, s a lekrdezs eredmnybl szrmaz kivlasztott adatokat felhasznlhatjuk. Ez az eljrs megmutatja, hogyan olvassuk le s hogyan jelentsk meg az elz pldban ltrehozott adatokat. 1. Hozzunk ltre egy App_Data mappt a weboldal gykrknyvtrban, ha mg nincs ilyen mappa! 2. A mappba msoljuk be az 4. fejezetben ltrehozott SmallBakery.sdf nev adatbzisfjlt! 3. Hozzunk ltre egy j fjlt ChartDataQuery.cshtml nvvel! 4. Cserljk ki a meglv kdot a kvetkezre: Honlappts a XXI. szzadban 8. fejezet Adatok megjelentse diagramokon
142
@{ var db = Database.Open("SmallBakery"); var data = db.Query("SELECT Name, Price FROM Product"); var myChart = new Chart(width: 600, height: 400) .AddTitle("Product Sales") .DataBindTable(dataSource: data, xField: "Name") .Write(); }
A kd elszr megnyitja a SmallBakery adatbzist, s hozzrendeli egy db vltozhoz. Ez a vltz egy olyan Database objektumot kpvisel, ami az adatbzis rsra s olvassra hasznlhat. Ez utn a kd egy SQL lekrdezst futtat, hogy megtallja a termkek nevt s rt. A kd ltrehoz egy j diagramot, s a DataBindTable metdus hasznlatval betlti a lekrdezs adatait a diagramba. Ehhez a metdushoz kt paramter szksges. A DataSource paramter a lekrdezsbl szrmaz adatokhoz van, az xField paramterrel pedig bellthatjuk, hogy melyik adatoszlop legyen a diagram x tengelyn. A DataBindTable metdus alternatvjaknt hasznlhatjuk a Chart helper AddSeries metdust is. Az AddSeries metdussal megadhatjuk az xValue s az yValues paramtereket. Pldul a DataBindTable metdus ilyen kdja helyett:
.DataBindTable(data,"Name)
Hasznlhatjuk az Addseries metdust gy:

.AddSeries("Default", xValue: data, xField: "Name", yValues: data, yFields: "Price")
Mindkt mdszerrel ugyanazt az eredmnyt kapjuk. Az Addseries metdus rugalmasabb, mivel pontosabban megadhatjuk az adatokat s a diagramtpust, de a DataBindTable metdus egyszerbb, amennyiben nincs szksgnk nagyobb rugalmassgra. 5. Futtassuk az oldalt a bngszben!
143
XML adatok hasznlata

A harmadik lehetsg diagramok ltrehozsra egy XML fjl hasznlata a diagram adataihoz. Ehhez az szksges, hogy az XML fjlnak legyen egy sma fjlja (.xsd) is, ami lerja az XML fjl struktrjt. Ez az eljrs megmutatja, hogyan nyerjnk ki adatokat egy XML fjlbl. 1. Az App_Data mappban hozzunk ltre egy j XML fjlt data.xml nvvel! 2. Cserljk ki a meglv XML-t a kvetkezvel, ami egy elkpzelt cg munkavllalinak adatait tartalmaz XML adat:
<?xml version="1.0" standalone="yes" ?> <NewDataSet xmlns="http://tempuri.org/data.xsd"> <Employee> <Name>Erin</Name> <Sales>10440</Sales> </Employee> <Employee> <Name>Kim</Name> <Sales>17772</Sales> </Employee> <Employee> <Name>Dean</Name> <Sales>23880</Sales> </Employee> <Employee> <Name>David</Name> <Sales>7663</Sales> </Employee> <Employee> <Name>Sanjay</Name>
144
<Sales>21773</Sales> </Employee> <Employee> <Name>Michelle</Name> <Sales>32294</Sales> </Employee> </NewDataSet>
3. Az App_Data mappban hozzunk ltre egy j XML fjlt data.xsd nvvel! (Figyeljnk, hogy most a kiterjeszts .xsd!) 4. Cserljk ki a meglv XML-t a kvetkezre:
<?xml version="1.0" ?> <xs:schema id="NewDataSet" targetNamespace="http://tempuri.org/data.xsd" xmlns:mstns="http://tempuri.org/data.xsd" xmlns="http://tempuri.org/data.xsd" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata" attributeFormDefault="qualified" elementFormDefault="qualified"> <xs:element name="NewDataSet" msdata:IsDataSet="true" msdata:EnforceConstraints="False"> <xs:complexType> <xs:choice maxOccurs="unbounded"> <xs:element name="Employee"> <xs:complexType> <xs:sequence> <xs:element name="Name" type="xs:string" minOccurs="0" /> <xs:element name="Sales" type="xs:double" minOccurs="0" /> </xs:sequence> </xs:complexType> </xs:element> </xs:choice> </xs:complexType> </xs:element> </xs:schema>
5. A weboldal gykrknyvtrban hozzunk ltre egy j fjlt ChartDataXML.cshtml nvvel! 6. Cserljk ki a meglv kdot a kvetkezre:
@using System.Data; @{ var dataSet = new DataSet(); dataSet.ReadXmlSchema(Server.MapPath("/App_Data/data.xsd")); dataSet.ReadXml(Server.MapPath("/App_Data/data.xml")); var dataView = new DataView(dataSet.Tables[0]); var myChart = new Chart(width: 600, height: 400) .AddTitle("Sales Per Employee") .AddSeries("Default", chartType: "Pie", xValue: dataView, xField: "Name", yValues: dataView, yFields: "Sales")
145
.Write(); }
A kd elszr ltrehoz egy DataSet objektumot. Ez az objektum kezeli az XML-bl kiolvasott adatokat, s rendszerezi ket a sma fjlban tallhat informcik szerint. (Vegyk szre, hogy a kd tetejn lthat a using SystemData llts! Ez azrt szksges, hogy egytt tudjon mkdni a DataSet objektummal. Tovbbi informcik az lltsok s teljesen kvalifiklt nevek hasznlata cm szvegdobozban tallhatk.) Ezutn a kd ltrehoz egy DataView objektumot az adatsor alapjn. Az adat nzet ad egy objektumot, amihez a diagram kapcsoldni tud, kiolvassa s megjelentse az adatokat. A diagram az AddSeries metdus hasznlatval kapcsoldik az adatokhoz, ahogy korbban lttuk a soradatokbl ksztett diagramoknl, kivve, hogy itt az xValue s az yValues paramtereket lltjuk a DataView objektumhoz. Ez a plda azt is megmutatja, hogy hogyan hatrozhatunk meg egy bizonyos diagramtpust. Amikor az adatokat az AddSeries metdussal adjuk meg, a chartType paramter krdiagramm vltozik. 7. Futtassuk az oldalt a bngszben!
lltsok s teljesen kvalifiklt nevek hasznlata Nha olyan komponenssel (osztllyal) kell dolgoznunk, mely a .NET Framework knyvtrban tallhat, de ez nem rhet el automatikusan az ASP.NET Razor oldalakra. Ilyenkor kt lehetsg van. Az egyik az gynevezett fully qualified names hasznlata a hasznlni kvnt komponensre. A teljesen kvalifiklt nv egy komplett, flrerthetetlen nv, ami nemcsak az osztly nevt tartalmazza, hanem azt az gynevezett namespace-t is, amiben az osztly tallhat. (A namespace egy gyjtemny egy knyvtrhoz hasonlt kpzeljnk el , ami a kapcsold osztlyok gyjtemnye, s ez teszi praktikuss, hogy rendezze a tbb ezer osztlyt a .NET Frameworkben.) A teljesen kvalifiklt nv megadsval bizonyosak lehetnk abban, hogy az ASP.NET megtallja az osztlyt, amivel dolgozunk, amikor az oldal pp fut. Pldul a DataSet osztly a System.Data namespace-ben tallhat. A System.Data namespace nem rhet el automatikusan az ASP.NET Razor oldalakrl. Ezrt a Dataset osztllyal val munkhoz a teljesen kvalifiklt nv hasznlatval alkalmazzuk a kvetkez kdot:
var dataSet = new System.Data.DataSet();
146
Ha a DataSet osztlyt ismtelten hasznljuk (vagy egyb osztlyt a System.Data namespace-bl), nehzkess vlhat mindig a teljesen kvalifiklt nevet hasznlni. Ezrt alternatvaknt importlhatunk is namespace-t. Ehhez az using lltst hasznljuk (import a Visual Basicben), ahogy a fejezet egy korbbi pldjban lthattuk. Ha importltuk a namespace-t, nem kell tbb teljesen kvalifiklt neveket hasznlnunk az ebben a namespace-ben lv osztlyokhoz. A fejezet korbbi rszben lthattunk egy pldt:
@using System.Data; @{ var dataSet = new DataSet(); // etc. }
Vegyk szre, hogy mivel a System.Data namespace-t a using lltssal importltuk, a kd nem hasznl teljesen kvalifiklt nevet a DataSet-hez az ASP.NET tudja, melyik namespace-t kell keresni, hogy megtallja a DataSet osztlyt. Hozzadhatjuk a using lltst brmely egyb .NET Framework namespace-hez amiket referenciaknt szeretnnk. Azonban ezt nem kell tl gyakran megcsinlnunk, mivel a legtbb osztly, amivel dolgozunk, olyan namespace-ekben van, amiket az ASP.NET automatikusan importl a .cshtml s a .vbhtml oldalak hasznlathoz.
Diagramok megjelentse weboldalakon

Az eddigi pldkban ksztettnk egy diagramot, s utna ezt kpknt illesztettk a bngszbe. Sok esetben azonban szeretnnk, ha a diagram az oldal rsze lenne, nemcsak ott lenne a bngszben. Ehhez egy ktlpcss folyamatot kell elvgezni. Az els lps egy oldal ltrehozsa, ami generl egy diagramot, ahogy azt mr lttuk korbban. A msodik lps, hogy megjelentsk a ltrejv kpet egy msik oldalon. A kp megjelentshez egy HTML <img> elemet hasznlunk, ugyangy, mintha brmilyen egyb kpet akarnnk megjelenteni. Azonban egy .jpg vagy .png fjlra val hivatkozs helyett az <img> elem arra a .cshtml fjlra hivatkozik, amit az a Chart helper tartalmaz, ami ltrehozza a diagramot. Amikor a megjelent lap fut, az <img> elem a Chart helper ltal ksztett diagramot jelenti meg.
147
1. Ksztsnk egy ShowChart.cshtml nev fjlt! 2. Cserljk ki a meglv kdot a kvetkezre:

<!DOCTYPE html> <html> <head> <title>Chart Example</title> </head> <body> <h1>Chart Example</h1> <p>The following chart is generated by the <em>ChartArrayBasic.cshtml</em> file, but is shown in this page.</p> <p><img src="ChartArrayBasic.cshtml" /> </p> </body> </html>
A kd az <img> elem hasznlatval megjelenti azt a diagramot, amit korbban a ChartArrayBasic.cshtml fjlban hoztunk ltre. 3. Futtassuk a weboldalt a bngszben! A ShowChart.cshtml fjl megjelenti azt a diagramot, ami a korbbi ChartArrayBasic.cshtml fjl kdjn alapul.
Diagram formzsa
A Chart helper szmos olyan opcival rendelkezik, melyekkel testreszabhatjuk a diagramok kinzett. Bellthatjuk a szneket, bettpusokat, szeglyeket, stb. Egy egyszer mdszer a testreszabshoz egy theme hasznlata. A tmk informcik gyjtemnyei, melyek meghatrozzk, hogyan kszljn el a diagram, milyen bettpussal, sznekkel, feliratokkal, palettkkal, szeglyekkel s effektekkel. (Megjegyzend azonban, hogy a diagram stlusa nem hatrozza meg a diagram tpust.) A kvetkez tblzatban lthatak a beptett tmk: Tma
Vanilla
Lers Fehr httren piros oszlopokat jelent meg.
148
Blue Green Yellow
Kk szntmenetes httren kk oszlopokat jelent meg. Zld szntmenetes httren kk oszlopokat jelent meg. Srga szntmenetes httren narancssrga oszlopokat jelent meg. Fehr httren piros 3D-s oszlopokat jelent meg.
Vanilla3D
j diagram ksztsekor vlaszthatunk a tmk kzl. 1. Hozzunk ltre egy j fjlt ChartStyleGreen.cshtml nven! 2. Cserljk ki a meglv kdot a kvetkezre:
@{ var db = Database.Open("SmallBakery"); var data = db.Query("SELECT Name, Price FROM Product"); var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green) .AddTitle("Product Sales") .DataBindTable(data, "Name") .Write(); }
Ez a kd megegyezik azzal a korbbi kddal, ami az adatbzist hasznlja adatknt, de hozzteszi a theme paramtert, amikor ltrehozza a Chart objektumot. A kvetkez plda mutatja a megvltoztatott kdot:
var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)
Futtassuk az oldalt a bngszben! Ugyanazokat az adatokat lthatjuk, de a diagram jobban mutat.
149
Diagram mentse
Ahogy a korbbiakban lttuk a fejezetben, amikor a Chart helpert hasznljuk, a helper minden alkalommal jra kszti a diagramot a vzlataibl. Ha szksges, az adatok megszerzshez a diagram kdja jra lekrdezi az adatbzist, vagy jra kiolvassa az XML fjlt. Nmely esetben ez elg bonyolult mvelet, pldul ha a lekrdezett adatbzis tl nagy vagy az XML fjlban tl sok adat van. Mg ha a diagram nem is tartalmaz sok adatot, a kp dinamikus elksztse sok szerver erforrst hasznl fel, s ha sokan krdezik le a tblzatot tartalmaz oldalt vagy oldalakat, az befolysolhatja a weboldalunk sebessgt. Ezrt, hogy cskkentsk a diagram elksztsnek potencilis negatv hatsait az erforrsainkra, elszr elkszthetjk a diagramot, majd elmenthetjk azt. Ezutn ha szksgnk van a diagramra, az jragenerls helyett csak elvesszk az elmentett vltozatot, s azt jelentjk meg. A kvetkez mdon tudjuk elmenteni a diagramokat: Diagram elmentse a gyorsttr bejegyzseknt. Ez a szmtgp memrijba (a szerveren) menti a diagramot, gy gyorsan elrhet. Diagram elmentse kpfjlknt. Diagram elmentse XML fjlknt. Ezzel az opcival mdosthatjuk a diagramot ments eltt.
Diagram mentse a gyorsttrba

Miutn ksztettnk egy diagramot, berakhatjuk a gyorsttrba. Ez azt jelenti, hogy a diagramot nem kell jra ltrehozni, ha ismt meg szeretnnk jelenteni. Amikor elmentjk a gyorsttrba, a diagram kap egy egyedi kulcsot.
150
A gyorsttrba mentett diagramok trldhetnek, ha a szerver szmra csak kevs memria rhet el. Tovbb a gyorsttr trldik, ha valamilyen okbl jraindul az alkalmazs. Ezrt a szoksos mdszer a diagramok gyorsttrban trolshoz az, hogy elszr mindig ellenrizzk, megtallhate a gyorsttrban, s ha nem, akkor ltrehozzuk, vagy jra ltrehozzuk. 1. A weboldalunk gykrknyvtrban hozzunk ltre egy j fjlt ShowCachedChart.cshtml nven! 2. Cserljk ki a meglv kdot a kvetkezre:
<!DOCTYPE html> <html> <head> <title>Chart Example</title> </head> <body> <h1>Chart Example</h1> <img src="ChartSaveToCache.cshtml?key=myChartKey" /> </body> </html>
Az <img> jelz egy olyan src attribtumot tartalmaz, ami a ChartSaveToCache.cshtml fjlra mutat s egy kulcsot ad az oldalnak egy lekrdezs szlknt. A kulcs rtke myChartKey. A ChartSaveToCache.cshtml fjl tartalmazza a Chart helpert, ami elkszti a diagramot. Ezt az oldalt fogjuk a kvetkezkben elkszteni. 3. A weboldalunk gykrknyvtrban hozzunk ltre egy j fjlt ChartSaveToCache.cshtml nvvel! 4. Cserljk ki a meglv kdot a kvetkezre:
@{ var chartKey = Request["key"]; if (chartKey != null) { var cachedChart = Chart.GetFromCache(key: chartKey); if (cachedChart == null) { cachedChart = new Chart(600, 400); cachedChart.AddTitle("Cached Chart -- Cached at " + DateTime.Now); cachedChart.AddSeries( name: "Employee", axisLabel: "Name", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }); cachedChart.SaveToCache(key: chartKey, minutesToCache: 2, slidingExpiration: false); } Chart.WriteFromCache(chartKey); } }
A kd elszr ellenrzi, hogy a lekrdezs szlban valami megfelelt-e a kulcsrtknek. Ha igen, a kd megprblja kiolvasni a diagramot a gyorsttrbl a GetFromCache metdussal s a kulcs biztostsval. Ha nincs semmi a gyorsttrban ilyen kulccsal (ami az els lekrdezs alkalmval mindig gy lesz), akkor a kd elkszti a diagramot a szoksos mdon. Ha a diagram elkszlt, a kd a SaveToCache hvsval elmenti a gyorsttrba. Ehhez a metdushoz egy kulcs kell (hogy a diagramot ksbb le lehessen krdezni), s meg kell Honlappts a XXI. szzadban 8. fejezet Adatok megjelentse diagramokon
151
hatrozni, hogy mennyi ideig maradjon a gyorsttrban. (A pontos idtartam attl fgg, milyen gyakran vltozhatnak azok az adatok, melyeket brzol.) A SaveToCache metdus egy SlidingExpiration paramtert is tartalmaz ha ez igaz, akkor a visszaszmll minden hozzfrs alkalmval jraindul. Ebben az esetben ez azt jelenti, hogy a diagram gyorsttr bejegyzse egy megnyits utn 2 perccel lejr. (Erre egy alternatva az abszolt lejrat, amikor a diagram gyorsttr bejegyzse a bekerlse utn pontosan 2 perccel jr le, attl fggetlenl, hogy kzben hnyszor lett megnyitva.) Vgl a kd a WriteFromCache metdust hasznlja a diagram gyorsttrbl val elrsre s megjelentsre. Fontos megjegyezni, hogy ez a metdus az if blokkon kvl van, ami a gyorsttrat ellenrzi, mert ez attl fggetlenl lehvja a diagramot, hogy az benne van-e mr a gyorsttrban, vagy generlni kell s a gyorsttrba menteni azt. Vegyk szre, hogy a pldban az AddTitle metdus egy idblyegzt tartalmaz. (Az aktulis dtumot s idt DateTime.Now - adja a cmhez.) 5. Futtassuk a ShowCachedChart.cshtml weboldalt a bngszben! Az oldal megjelenti a ChartSaveToCache.cshtml fjl kdjn alapul diagramot. Figyeljk meg, mit mutat az idblyegz a diagram cmben.
6. Zrjuk be a bngszt! 7. Futtassuk jra a ShowCachedChart.cshtml fjlt! Vegyk szre, hogy az idblyegz ugyanaz, mint elz alkalommal, ami azt jelzi, hogy a diagram nem lett jra generlva, hanem a gyorsttrbl kerlt kiolvassra! 8. A WebMatrixban a Home fl Site csoportjban kattintsunk a Restart gombra! Ez lelltja s jraindtja az ISS Expresst, ami jraindtja a weboldal alkalmazsunkat.
Msik megolds, hogy vrunk 2 percet a gyorsttr kirlsre. Honlappts a XXI. szzadban 8. fejezet Adatok megjelentse diagramokon
152
9. Futtassuk a ShowCachedChart.cshtml fjlt ismt! Vegyk szre, hogy az idblyegz megvltozott, mivel az alkalmazs jraindtsa kirti a gyorsttrat! Ezrt a kd jragenerlta a diagramot s ismt berakta a gyorsttrba.
Diagram mentse kpfjlknt

A diagramokat kpfjlknt is elmenthetjk (pldul .jpg fjlknt) a szerverre. Ilyenkor gy hasznlhatjuk a diagramot, mint brmely egyb kpfjt. Az elnye az, hogy a fjl trolva van az ideiglenes gyorsttrba ments helyett. Klnbz idkznknt (pldul rnknt) elmenthetjk az j diagramkpet, s gy a vltozsokat folyamatosan nyomon kvethetjk. Fontos, hogy a webalkalmazsnak legyen engedlyezve a fjlok mentse abban a szerveren lv mappban, ahova a kpeket szeretnnk menteni. 1. A weboldalunk gykrknyvtrban hozzunk ltre egy j mappt _ChartFiles nvvel, ha mg nincsen ilyen mappa! 2. A weboldalunk gykrknyvtrban hozzunk ltre egy j fjlt ChartSave.cshtml nvvel! 3. Cserljk ki a meglv kdot a kvetkezre:
@{ var filePathName = "_ChartFiles/chart01.jpg"; if (!File.Exists(Server.MapPath(filePathName))) { var chartImage = new Chart(600, 400); chartImage.AddTitle("Chart Title"); chartImage.AddSeries( name: "Employee", axisLabel: "Name", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }); chartImage.Save(path: filePathName); } } <!DOCTYPE html> <html> <head> <title>Chart Example</title> </head> <body> <img src="@filePathName" /> </body> </html>
A kd elszr a File.Exists metdussal ellenrzi, hogy a .jpg fjl ltezik-e. Ha a fjl nem ltezik, a kd elkszti az adatsorbl az j diagramot. Ekkor a kd elhvja a Save metdust, s hozzadja a path paramtert, hogy meghatrozza a fjl elrsi tjt s a fjl nevt, illetve hogy hova mentse a fjlt. Az oldal testben az <img> elem felhasznlja az elrsi utat a .jpg fjl megjelentshez. 4. Futtassuk a ChartSave.cshtml fjlt!
Diagram mentse XML fjlknt

Vgl XML fjlknt is elmenthetjk a diagramot a szerveren. Ennek az elnye a gyorsttrba mentssel s a fjlknt elmentssel szemben az, hogy ha akarjuk, a megjelents eltt mdosthatjuk az XML-t. Az alkalmazsunknak engedlyezve kell legyen az rs/olvass a szerver azon knyvtrra, ahov a kpet menteni szeretnnk.
153
1. A weboldalunk gykrknyvtrban hozzunk ltre egy j fjlt ChartSaveXML.cshtml nvvel! 2. Cserljk ki a meglv kdot a kvetkezre:
@{ Chart chartXml; var filePathName = "_ChartFiles/XmlChart.xml"; if (File.Exists(Server.MapPath(filePathName))) { chartXml = new Chart(width: 600, height: 400, themePath: filePathName); } else { chartXml = new Chart(width: 600, height: 400); chartXml.AddTitle("Chart Title -- Saved at " + DateTime.Now); chartXml.AddSeries( name: "Employee", axisLabel: "Name", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }); chartXml.SaveXml(path: filePathName); } chartXml.Write(); }
Ez a kd hasonl ahhoz, amit korbban a diagram gyorsttrba mentsnl lttunk, kivve azt, hogy ez egy XML fjlt hasznl. A kd elszr a File.Exists metdussal leellenrzi, hogy ltezik-e az XML fjl. Ha a fjl ltezik, a kd ltrehoz egy j diagram objektumot, s a themePath paramterknt megadja a fjlnevet. Ez az XML fjl tartalma alapjn ltrehozza a diagramot. Ha az XML fjl mg nem ltezik, akkor a kd egyszeren ltrehoz egy diagramot, s a SaveXml-lel elmenti azt. A diagramot a Write metdussal hozza ltre, mint ahogy azt korbban lthattuk Ahogy a gyorsttras oldalnl, ez a kd is tartalmaz egy idblyegzt. 3. Hozzunk ltre egy j oldalt ChartDisplayXMLChart.cshtml nvvel, s adjuk hozz a kvetkezt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Display chart from XML</title> </head> <body> <img src="ChartSaveXML.cshtml" /> </body> </html>
4. Futtassuk a ChartDisplayXMLChart.cshtml oldalt! A diagram megjelenik. Figyeljk meg a diagram cmben az idblyegzt! 5. Zrjuk be a bngszt! 6. A WebMatrixban kattintsunk a _ChartFiles mappra jobb gombbal, majd kattintsunk a Refresh gombra, s nyissuk meg a mappt! A mappban lv XMLChart.xml fjlt a Chart helper hozta ltre.
154
7. Futtassuk a ChartDisplayXMLChart.cshtml fjlt ismt! A diagram ugyanazt az idblyegzt jelenti meg, amit az elz megnyitsnl is. Ez azrt van, mert a diagramot a korbban elmentett XML-bl generlja. 8. A WebMatrixban nyissuk meg a _ChartFiles mappt, s trljk a XMLChart.xml fjlt! 9. Futtassuk megint a ChartDisplayXMLChart.cshtml fjlt! Ezttal az idblyegzt frisstette, mert a Chart helpernek jra ltre kellett hoznia az XML fjlt. Ha akarjuk, megnzhetjk a _ChartFiles mappt, amiben ismt ott lesz az XML fjl.

Diagramkezels
155
9. fejezet Munka fjlokkal

Az elz fejezetekben megtanultuk, hogyan troljunk adatokat adatbzisban. Azonban akr szvegfjlokkal is dolgozhatunk a weboldalunkban. Pldul a weboldal adatainak egyszer trolshoz hasznlhatunk szvegfjlokat is. (Az adatok trolsra hasznlt szvegfjlt nha flat filenak hvjuk.) A szvegfjlok tbbfle kiterjesztsek lehetnek, mint pldul .txt, .xml, vagy .csv (vesszvel elvlasztott rtkek). Az tmutatbl megtudhatjuk: Hogyan ksztsnk szvegfjlt, s hogyan rjunk bele adatokat? Hogyan adjunk adatokat egy meglv fjlhoz? Hogyan olvassunk egy fjlt, s hogyan jelentsk meg? Hogyan trljnk fjlokat egy weboldalrl? Hogyan tlthetnek fel a felhasznlk egy vagy tbb fjlt?
Az albbi ASP.NET programozsi funkcikat ismerhetjk meg a fejezetben: A File objektumot, amivel fjlokat kezelhetnk. A FileUpload helpert. A Path objektumot, amivel elrsi utakat s fjlneveket mdosthatunk.
Megjegyzs: ha kpeket akarunk feltlteni s szerkeszteni (pldul forgatni s tmretezni), akkor nzzk meg a 10. fejezet Munka kpekkel cm rszt!
Szvegfjl ltrehozsa s adatok belersa

Amikor adatot szeretnnk trolni szvegfjlban, hasznlhatjuk a File.WriteAllText metdust a ltrehozand fjl meghatrozshoz, s az adatok bershoz. Ezzel az eljrssal ltrehozunk egy oldalt, ami egy egyszer rlapot tartalmaz 3 input mezvel (vezetknv, keresztnv, e-mail cm) s egy Submit gombbal. Amikor a felhasznl elkldi az rlapot, eltroljuk az ltala bevitt adatokat egy szvegfjlban. 1. Ha mg nincs, hozzunk ltre egy j mappt App_Data nven. 2. A weboldalunk gykrknyvtrban hozzunk ltre egy j fjlt UserData.cshtml nven. 3. Cserljk ki a meglv kdot a kvetkezre:
@{ var result = ""; if (IsPost) { var firstName = Request["FirstName"]; var lastName = Request["LastName"]; var email = Request["Email"]; var userData = firstName + "," + lastName + "," + email + Environment.NewLine; var dataFile = Server.MapPath("/App_Data/data.txt"); File.WriteAllText(@dataFile, userData); result = "Information saved."; } }
Honlappts a XXI. szzadban 9. fejezet Munka fjlokkal
156
<!DOCTYPE html> <html> <head> <title>Write Data to a File</title> </head> <body> <form id="form1" method="post"> <div> <table> <tr> <td>First Name:</td> <td><input id="FirstName" name="FirstName" type="text" /></td> </tr> <tr> <td>Last Name:</td> <td><input id="LastName" name="LastName" type="text" /></td> </tr> <tr> <td>Email:</td> <td><input id="Email" name="Email" type="text" /></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit"/></td> </tr> </table> </div> <div> @if(result != ""){ <p>Result: @result</p> } </div> </form> </body> </html>
A HTML markup elkszti az rlapot 3 szvegdobozzal. A kdban az IsPost tulajdonsgot hasznljuk annak meghatrozshoz, hogy az oldalt - mieltt elkezdjk feldolgozni - mr elkldtk-e. Az els feladat az, hogy megszerezzk a felhasznl bevitt adatait, s hozzrendeljk vltozkhoz. A kd ekkor a klnbz vltozk rtkeit egy vesszkkel elvlasztott szlba sszefzi, amit egy msik vltoz alatt eltrol. Vegyk szre, hogy a vessz elvlaszt egy idzjelek kztti szl, mert a vesszt sz szerint beillesztjk egy nagyobb szlba, amit ksztnk. Az sszekapcsolt adatok vgn hozzadjuk az Environment.NewLine-t. Ez egy sortrst ad hozz. gy nz ki, amit ezzel az sszekapcsolssal ltrehozunk:
David,Jones,davidj@contoso.com
(A vgn egy lthatatlan sortrssel) Ezutn ltrehozunk egy vltozt (dataFile), ami az adat trolshoz szksges fjl nevt s helyt tartalmazza. A hely belltsa specilis mdszert ignyel. A webhelyek esetn rossz gyakorlat a kdban abszolt elrsi tra hivatkozni, mint pldul C:\Folder\File.txt. Ha a weboldal elkltzik, az abszolt elrsi t rossz lesz. Radsul egy hostolt oldalnl (a sajt szmtgpnkkel szemben) ltalban nem is tudjuk az elrsi utat, amikor rjuk a kdot. Honlappts a XXI. szzadban 9. fejezet Munka fjlokkal
157
De nha (mint most, fjl rsnl) komplett elrsi tra van szksg. A megolds a Server objektum MapPath metdusnak hasznlata. Ez megmutatja a weboldal komplett elrsi tjt. Hogy megtalljuk az utat a weboldal gykrknyvtrba, a ~ jelet adjuk a MapPathhoz. (Alknyvtr nevet is hozzadhatunk, pldul ~/App_Data/, hogy megkapjuk az alknyvtr elrsi tjt.) Ekkor sszekapcsolhatunk egyb informcit azzal, amit a metdus ltrehoz, hogy egy komplett elrsi utat ksztsen. Ebben a pldban egy fjlnevet adunk hozz. ( A 3. fejezetben tbbet is olvashatunk a fjlok s mappk elrsi tjairl.) A fjl az App_Data mappban kerl mentsre. Ez egy specilis mappa az ASP.NET-ben, amit adatfjlok trolshoz hasznlunk, ahogy a 6. fejezetben lthattuk. A File objektum WriteAllText metdusa rja az adatot a fjlba. Ehhez kt paramtert hasznl, a fjl nevt (s elrsi tjt), amibe r, s az aktulis adatokat, amiket beler. Vegyk szre, hogy az els paramter neve eltt egy @ karakter eltag tallhat. Ez jelzi az ASP.NET szmra, hogy sz szerinti szlat adunk meg, s pldul a / karaktereket ne rtelmezze specilisan. (Tovbbi informcirt nzzk meg a 3. fejezetet!) Megjegyzs: Ahhoz, hogy a kd az App_Data mappba mentse a fjlokat, az alkalmazsnak rsolvassi felhatalmazsra van szksge erre a mappra. A fejleszt szmtgpen ltalban ez nem okoz problmt. Azonban amikor egy hostolt webszerveren publikljuk a weboldalunkat, kifejezetten szksg lehet az engedlyek belltsra. Ha ezt a kdot futtatjuk a webhosting szolgltat szervern, s hibazenetet kapunk, vegyk fel a kapcsolatot a szolgltatval, hogy hogyan llthatk be ezek az engedlyek! 4. Futtassuk az oldalt a bngszben! (Mieltt futtatjuk, gyzdjnk meg rla, hogy a Files munkaterlet alatt ki van vlasztva az oldal!)
5. 6. 7. 8.
rjunk be a mezkbe rtkeket, majd kattintsunk a Submit gombra! Zrjuk be a bngszt! Trjnk vissza a projekthez, s frisstsk a nzetet! Nyissuk meg a Data.txt fjlt! Az adatok, amiket az rlapon bertunk, a fjlban vannak.
158
9. Zrjuk be a Data.txt fjlt!
Adat hozzadsa meglv fjlhoz

Az elz pldban a WriteAllText-et hasznltuk olyan szvegfjlok ltrehozsra, amik egyetlen adatot tartalmaznak. Ha jra lehvjuk a metdust, s ugyanazt a nevet rendeljk hozz, akkor a meglv fjlt fellrja. Azonban egy fjl ltrehozsa utn gyakran szeretnnk hozzadni tovbbi adatokat is. Ezt megtehetjk a File objektum AppendAllText metdusnak hasznlatval. 1. A weboldalban ksztsnk egy msolatot a UserData.cshtml fjlrl, s a msolatot nevezzk t UserDataMultiple.cshtml-re! 2. A nyit <!DOCTYPE html> tag eltti kdblokkot cserljk ki a kvetkezre:
@{ var result = ""; if (IsPost) { var firstName = Request["FirstName"]; var lastName = Request["LastName"]; var email = Request["Email"]; var userData = firstName + "," + lastName + "," + email + Environment.NewLine; var dataFile = Server.MapPath("/App_Data/data.txt"); File.AppendAllText (@dataFile, userData); result = "Information saved."; } }
Ez a kd egy dologban klnbzik az elz kdtl. A WriteAllText metdus helyett az AppendAllText metdust hasznlja. A kt metdus hasonl, annyi klnbsggel, hogy az AppendAllText metdus a fjl vghez adja hozz az adatokat. Csakgy mint a WriteAllText, az AppendAllText is ltrehozza a fjlt, ha az mg nem ltezik. 3. 4. 5. 6. Futtassuk az oldalt a bngszben! rjunk be rtkeket a mezkbe, s kattintsunk a Submit gombra! rjunk be tovbbi adatokat, s ismt kldjk el! Trjnk vissza a projekthez, kattintsunk jobb gombbal a projektmappra, majd a Refresh gombra! 7. Nyissuk meg a Data.txt fjlt! Az imnt bert adatokat is tartalmazza.
159
Adatok olvassa s megjelentse fjlbl

Mg ha nem is akarunk adatokat szvegfjlba rni, valsznleg nha ki kell olvasnunk adatokat belle. Ehhez jra a File objektumot hasznljuk. A File objektum hasznlatval a sorokat egyenknt is kiolvashatjuk (sortrsekkel elvlasztva), vagy egy kln elemet is kiolvashatunk fggetlenl az elvlaszts mdjtl. Ez az eljrs megmutatja, hogyan olvassuk ki s jelentsk meg az adatokat, amiket az elz pldban hoztunk ltre. 1. A weboldalunk gykrknyvtrban hozzunk ltre egy j fjlt DisplayData.cshtml nvvel! 2. Cserljk ki a meglv kdot a kvetkezre:
@{ var result = ""; Array userData = null; char[] delimiterChar = {','}; var dataFile = Server.MapPath("/App_Data/data.txt"); if (File.Exists(dataFile)) { userData = File.ReadAllLines(dataFile); if (userData == null) { // Empty file. result = "The file is empty."; } } else { // File does not exist. result = "The file does not exist."; } } <!DOCTYPE html> <html> <head> <title>Reading Data from a File</title> </head> <body> <div> <h1>Reading Data from a File</h1> @result @if (result == "") { <ol> @foreach (string dataLine in userData) { <li> User
160
<ul> @foreach (string dataItem in dataLine.Split(delimiterChar)) { <li>@dataItem</li > } </ul> </li> } </ol> } </div> </body> </html>
A kd az elz pldban ksztett fjl olvassval kezd egy UserData vltozra, a kvetkez metdus hvsval:
File.ReadAllLines(dataFile)
A kd ehhez egy if lltsban van. Ha egy fjlt szeretnnk olvasni, clszer elszr a File.Exists metdust hasznlni, hogy meghatrozzuk, elrhet-e a fjl. A kd ellenrzi azt is, hogy res-e a fjl. A kd szvegtrzse kt foreach hurkot tartalmaz, az egyiket begyazva a msikba. A kls foreach hurok egyszerre egy sort vesz ki az adatfjlbl. Ebben az esetben a sorokat sortrsek definiljk, azaz minden adat egy kln sor a fjlban. A kls hurok egy j elemet hoz ltre (<li> elem) egy rendezett listban (<ol> elem). A bels hurok az adatsorokat elemekre (mezkre) osztja a vesszt hasznlva elvlasztknt. (Az elz plda alapjn ez azt jelenti, hogy minden sor 3 mezt tartalmaz vezetknv, keresztnv, e-mail cm, mindegyik vesszkkel elvlasztva.) A bels hurok ltrehoz egy <ul> listt is, s az adatsorban minden mezre egy listaelemet jelent meg. A kd a kt adattpus hasznlatt illusztrlja, a sor s a char adattpust. A sor azrt szksges, mert a File.ReadAllLines metdus sorknt adja az adatokat. A char adattpus pedig azrt kell, mert a Split metdus egy array-t ad, amiben minden elem char tpus. (A sorokrl val tovbbi informcikrt nzzk meg a 3. fejezetet!) 3. Futtassuk az oldalt a bngszben! Az adatok, amiket az elz pldban bevittnk, megjelennek.
161
Adatok megjelentse Microsoft Excel vesszvel elvlasztott fjlbl A tblzatban trolt adatok vesszvel elvlaszott fjlknt trtn mentshez hasznlhatjuk a Microsoft Excelt (.csv fjl). Ha ezt tesszk, az adatokat sima szvegknt menti el, nem Excel formtumban. A tblzat minden sora sortrssel lesz elvlasztva a szvegfjlban, s minden adat elemet vessz vlaszt el egymstl. Az elz pldban bemutatott kdot hasznlhatjuk Excel vesszvel elvlasztott fjl olvasshoz, csak az adatfjl nevt kell megvltoztatni a kdban.
Fjlok trlse
A weboldalrl fjlok trlshez a File.Delete metdust hasznljuk. Ez az eljrs megmutatja, hogyan trlhetnek a felhasznlk egy kpet (.jpg fjlt) egy images mappbl, ha tudjk a fjl nevt. 1. A weboldalon hozzunk ltre egy almappt images nvvel!
2. Msoljunk egy vagy tbb .jpg fjlt az images mappba! 3. A weboldal gykrknyvtrban hozzunk ltre egy fjlt FileDelete.cshtml nvvel! 4. Cserljk ki a meglv kdot a kvetkezre:
@{ bool deleteSuccess = false; var photoName = ""; if (IsPost) { photoName = Request["photoFileName"] + ".jpg"; var fullPath = Server.MapPath("/images/" + photoName); if (File.Exists(fullPath)) { File.Delete(fullPath); deleteSuccess = true; } } }
162
<!DOCTYPE html> <html> <head> <title>Delete a Photo</title> </head> <body> <h1>Delete a Photo from the Site</h1> <form name="deletePhoto" action="" method="post"> <p>File name of image to delete (without .jpg extension): <input name="photoFileName" type="text" value="" /> </p> <p><input type="submit" value="Submit" </p> </form> @if(deleteSuccess) { <p> @photoName deleted! </p> } </body> </html>
Ez az oldal egy rlapot tartalmaz, ahol a felhasznlk megadhatjk egy kpfjl nevt. Ha nem rjk be a .jpg fjlnv kiterjesztst, a fjlnv ezen korltozsval megakadlyozhatjuk, hogy a felhasznlk tetszleges fjlokat trlhessenek az oldalrl. A kd elolvassa a bert fjlnevet, majd egy komplett elrsi utat hoz ltre. Ehhez a kd a weboldal aktulis tjt (ahogy a Server.MapPath metdus megadja), az images mappt, a felhasznl ltal megadott nevet s a .jpg sz szerinti szlat hasznlja. A fjl trlshez a kd a File.Delete metdust hvja, s tadja a teljes elrsi utat, amit az elbb ksztett. A kulcs vgn a kd egy visszaigazol zenetet jelent meg a fjl trlsrl. 5. Futtassuk az oldalt a bngszben!
6. rjuk be a trlni kvnt fjl nevt, majd kattintsunk a Submit gombra! Ha a fjlt trlte, a fjlnv megjelenik az oldal aljn.
Fjlok feltltse a felhasznlk ltal

A FileUpload helper segtsgvel a felhasznlk fjlokat tlthetnek fel a weboldalra. A kvetkez folyamat megmutatja, hogyan tlthetnek fel egy fjlt a felhasznlk. 1. Adjuk hozz az ASP.NET Web Helpers Libraryt a webhelynkhz a 2. fejezetben lertak szerint, ha mg nem tettk meg korbban! 2. Az App_Data mappban hozzunk ltre egy j mappt UploadedFiles nvvel! 3. A gykrknyvtrban hozzunk ltre egy j fjlt FileUpload.cshtml nvvel! 4. Cserljk ki a meglv kdot a kvetkezre:
163
@{ var fileName = ""; if (IsPost) { var fileSavePath = ""; var uploadedFile = Request.Files[0]; fileName = Path.GetFileName(uploadedFile.FileName); fileSavePath = Server.MapPath("/App_Data/UploadedFiles/" + fileName); uploadedFile.SaveAs(fileSavePath); } } <!DOCTYPE html> <html> <head> <title>FileUpload - Single-File Example</title> </head> <body> <h1>FileUpload - Single-File Example</h1> @FileUpload.GetHtml( initialNumberOfFiles:1, allowMoreFilesToBeAdded:false, includeFormTag:true, uploadText:"Upload") @if (IsPost) { <span>File uploaded!</span><br/> } </body> </html>
Az oldal szvegtrzse a FileUpload helpert hasznlja a feltlt doboz s a mr valsznleg ismers gombok ltrehozshoz.
A FileUpload helpernek megadott belltsok meghatrozzk, hogy egy egyszer dobozt akarunk a feltltshez, s a klds gomb Upload felirat legyen. (A ksbbiekben tbb dobozt is hozzadunk.) Amikor a felhasznl az Upload gombra kattint, az oldal tetejn lv kd megszerzi a fjlt s elmenti. A Request objektum, amit ltalban arra hasznlunk, hogy rlapokbl szerezzen rtkeket, tartalmaz egy Files sort is, ami a feltlttt fjlt (vagy fjlokat) tartalmazza. Klnbz fjlokat szedhetnk ki a sor meghatrozott pozciibl, pldul az els feltlttt fjl megszerzshez a Request.Files[0] szksges, a msodikhoz a Request.Files[1] s gy tovbb. (Emlkezznk, hogy a programozsban a szmozs ltalban 0-val kezddik!) Amikor megszereztnk egy feltlttt fjlt, egy vltozba rakjuk (itt uploadedFile), hogy gy mdosthassuk. A feltlttt fjl nevnek meghatrozshoz csak a FileName tulajdonsga szksges. Azonban amikor a felhasznl feltlt egy fjlt, a FileName az eredeti nevt tartalmazza, amiben az egsz elrsi t megtallhat. Pldul gy nzhet ki: C:\Users\Public\Sample.txt
164
Nincs szksgnk erre az sszes informcira, mivel ez az elrsi t a felhasznl szmtgpn van, nem a szerveren. Csak az aktulis fjlnvre van szksgnk (Sample.txt). Kivehetjk csak a fjlt a Path.GetFileName metdus hasznlatval, gy:
Path.GetFileName(uploadedFile.FileName)
A Path elem egy szmos ilyen metdussal rendelkez eszkz, amikkel elrsi utakat vehetnk ki, kombinlhatunk, stb. Ha megszereztk a feltlttt fjl nevt, kszthetnk egy j elrsi utat, ahol trolni kvnjuk a fjlt a weboldalon. Ebben az esetben kombinljuk a Server.MapPath-t, a mappaneveket (App_Data/UploadedFiles) s az jonnan szerzett fjlnevet az j elrsi t elksztshez. Ezutn a SaveAs metdust hvjuk a fjl mentshez. 5. Futtassuk az oldalt a bngszben!
6. Kattintsunk a Browse gombra, s vlasszunk ki egy feltlteni kvnt fjlt!
A Browse gomb melletti szvegdoboz tartalmazza a fjl elrsi tjt s helyt.
7. Kattintsunk az Upload gombra! Honlappts a XXI. szzadban 9. fejezet Munka fjlokkal
165
8. A weboldalon jobb gombbal kattintsunk a project mappra, s kattintsunk a Refresh gombra! 9. Nyissuk meg az UploadedFiles mappt! A fjl, amit feltltttnk, a mappban van.
Tbb fjl feltltse a felhasznlk ltal

Az elz pldban a felhasznlknak egy fjl feltltst engedtk. De a FileUpload helpert egyszerre tbb fjl feltltsre is hasznlhatjuk. Ez jl jn pldul fnykpek feltltsnl, ahol a fjlok egyenknti feltltse hosszadalmas. (Fnykpek feltltsrl bvebben a 10. fejezetben olvshatunk.) Ez a plda azt mutatja be, hogyan tlthetnek fel a felhasznlk egyszerre kt fjlt, azonban ugyanezzel a mdszerrel tbb fjl is feltlthet. 1. Adjuk hozz az ASP.NET Web Helpers Libraryt a weboldalunkhoz a 2. fejezetben lertak szerint, ha mg nem tettk meg korbban! 2. Hozzunk ltre egy j fjlt FileUploadMultiple.cshtml nvvel! 3. Cserljk ki a meglv kdot a kvetkezre:
@{ var message = ""; if (IsPost) { var fileName = ""; var fileSavePath = ""; int numFiles = Request.Files.Count; int uploadedCount = 0; for(int i =0; i < numFiles; i++) { var uploadedFile = Request.Files[i]; if (uploadedFile.ContentLength > 0) { fileName = Path.GetFileName(uploadedFile.FileName); fileSavePath = Server.MapPath("/App_Data/UploadedFiles/" + fileName); uploadedFile.SaveAs(fileSavePath); uploadedCount++; } } message = "File upload complete. Total files uploaded: " + uploadedCount.ToString(); } } <!DOCTYPE html> <html> <head><title>FileUpload - Multiple File Example</title></head> <body> <form id="myForm" method="post" enctype="multipart/form-data"
166
action=""> <div> <h1>File Upload - Multiple-File Example</h1> @if (!IsPost) { @FileUpload.GetHtml( initialNumberOfFiles:2, allowMoreFilesToBeAdded:true, includeFormTag:true, addText:"Add another file", uploadText:"Upload") } <span>@message</span> </div> </form> </body> </html>
Ebben a pldban a FileUpload helpert az oldal szvegtrzsben arra konfigurltuk, hogy a felhasznlk kt fjlt tlthessenek fel egyszerre alaprtelmezsknt. Mivel az AllowMoreFilesToBeAdded true-ra van lltva, a helper kszt egy linket, amivel a felhasznlk tbb feltltsi dobozt adhatnak hozz.
A felhasznlk ltal feltlttt fjlok feldolgozshoz a kd ugyanazt az alapmdszert hasznlja, mint a korbbi pldban a fjlok megszerzse a Request.Files-bl, majd mentse. (A klnbz dolgokkal, pldul a fjlnv megszerzsvel s az elrsi ttal egytt.) Az jts ebben az esetben az, hogy a felhasznl tbb fjlt is feltlthet, de nem tudjuk, hnyat. Ezt megtudhatjuk a Request.Files.Count segtsgvel. A kapott szmmal mr a Request.Files-on keresztli hurkot ltrehozhatjuk, minden fjlt megszerezhetnk s elmenthetnk. Amikor egy ismert szm gyjtemnyen akarunk hurkot ltrehozni, hasznlhatjuk a for hurkot, gy:
for(int i =0; i < numFiles; i++) { var uploadedFile = Request.Files[i]; if (uploadedFile.ContentLength > 0) { fileName = Path.GetFileName(uploadedFile.FileName); // etc. }
Az i vltoz csak egy ideiglenes szmll, ami nulltl az ltalunk belltott fels hatrig megy. Ebben az esetben a fels hatr a fjlok szma. De mivel a szmll 0-val kezd, a fels hatr igazbl eggyel kevesebb, mint a fjlok szma. (Ha hrom fjlt tltenek fel, a szmll nulltl kettig megy.)
167
Az uploadedCount vltoz sszesti a sikeresen feltlttt s elmentett fjlokat. Ez a kd szmba veszi azt a lehetsget, hogy a kvnt fjl nem mindig feltlthet. 4. Futtassuk az oldalt a bngszben. A bngsz megjelenti az oldalt s a kt feltlt dobozt! 5. Vlasszunk ki kt feltltend fjlt! 6. Kattintsunk az Add another file-ra! Az oldalon megjelenik egy j feltlt doboz.
7. Kattintsunk az Upload gombra! 8. A weboldalon kattintsunk jobb gombbal a projektmappra, majd a Refresh gombra! 9. Nyissuk meg az UploadedFiles mappt, hogy lssuk a sikeresen feltlttt fjlokat!

Exportls CSV fjlba
168
10. fejezet Munka kpekkel

Ez a fejezet bemutatja, hogyan adjunk kpeket a weboldalunkhoz, hogyan jelenthetjk meg, s hogyan szerkeszthetjk tkrzzk, mretezzk t s adjunk vzjelet hozzjuk , mieltt elmentennk a kpeket. A fejezetbl megtudhatjuk: Hogyan adjunk dinamikusan egy oldalhoz kpet? Hogyan engedlyezhetjk a felhasznlknak kpek feltltst? Hogyan mretezznk t egy kpet? Hogyan forgassunk vagy tkrzznk egy kpet? Hogyan adjunk vzjelet egy kphez? Hogyan hasznljunk egy kpet vzjelknt?
Az albbi ASP.NET programozsi funkcikat ismerhetjk meg a fejezetben: A WebImage helpert A Path objektumot, amivel fjlneveket s elrsi utakat mdosthatunk.
Kp dinamikus hozzadsa egy weboldalhoz

Webhelynkhz s klnbz oldalakhoz hozzadhatunk kpeket, mikzben szerkesztjk a weboldalt. A felhasznlk szmra is lehetv tehetjk kpek feltltst, ami hasznos lehet pldul olyan feladatok esetben, mint egy profilkp feltltse. Ha egy kp mr elrhet az oldalunkon s csak meg szeretnnk jelenteni, akkor egy HTML <img> elemet hasznlunk gy:
<img src="images/Photo1.jpg" alt="Sample Photo" />
Nha azonban a kpeket dinamikusan kell megjelenteni azaz az oldal futtatsig nem is tudjuk, milyen kpet kell megjelenteni. Ebben a rszben az eljrs megmutatja, hogyan jelentsnk meg egy kpet menet kzben, ahol a felhasznlk hatrozzk meg a kpfjl nevt egy kpfjl listbl. Kivlasztjk egy kp nevt a legrdl listbl, s amikor elkldik az oldalt, a kivlasztott kp megjelenik.
Honlappts a XXI. szzadban 10. fejezet Munka kpekkel
169
1. 2. 3. 4.
A WebMatrix-ban hozzunk ltre egy j weboldalt! Az j oldalt nevezzk el DynamicImage.cshtml-nek! A weboldal gykrknyvtrban hozzunk ltre egy j mappt s nevezzk el images-nek! Rakjunk a most ltrehozott images mappba ngy kpet! (Brmilyen kznl lv kp megteszi, de az oldalba bele kell, hogy frjenek.) Nevezzk t a kpeket Photo1.jpg, Photo2.jpg, Photo3.jpg, Photo4.jpg-re! (Ebben a folyamatban nem hasznljuk a Photo4.jpg-t, de majd a ksbbiekben igen.) 5. Gyzdjnk meg rla, hogy a kpek nem rsvdettek! 6. Cserljk ki a meglv kdot a kvetkezre:
@{ var imagePath= ""; if( Request["photoChoice"] != null){ imagePath = @"images\" + Request["photoChoice"];
} } <!DOCTYPE html> <html> <head> <title>Display Image on the Fly</title> </head> <body> <h1>Displaying an Image On the Fly</h1> <form method="post" action=""> <div> I want to see: <select name="photoChoice"> <option value="Photo1.jpg">Photo 1</option> <option value="Photo2.jpg">Photo 2</option> <option value="Photo3.jpg">Photo 3</option> </select> <input type="submit" value="Submit" /> </div> <div style="padding:10px;"> @if(imagePath != ""){ <img src="@imagePath" alt="Sample Image" width="300px" />
170
} </div> </form> </body> </html>
A weboldal szvegtrzse egy legrdl listt tartalmaz (egy <select> elemet), ezt photoChoice-nak nevezzk. A lista 3 opcit tartalmaz, s minden opci value attribtuma az images mappban tallhat kpek neveit viseli. Lnyegben a lista a felhasznl szmra egy bartsgos vlaszthat nevet biztost, mint Photo1, majd hozzadja a .jpg fjlnevet, amikor az oldalt elkldik. A kdban megkaphatjuk a felhasznl vlasztst (ms szval a kpfjl nevt) a listbl a Request["photoChoice"] olvassval. Elszr lthatjuk, hogy egyltaln volt-e kivlasztva valami. Ha volt, ltrehozunk egy elrsi utat a kpnek, ami a kpeket tartalmaz mappnak a nevbl s a felhasznl kpnek fjlnevbl ll. (Ha megprblnnk elrsi utat kszteni, de semmi nincs a Request["photoChoice"]-ban, akkor hibazenetet kapnnk.) Ez egy relatv elrsi utat ad, gy: images/Photo1.jpg Az elrsi t az imagePath vltoz alatt van trolva, amire ksbb szksgnk lesz. A szvegtrzsben tallhat egy <img> elem is, amit a felhasznl ltal kivlasztott kp megjelentsre hasznlunk. Az src attribtum nincs fjlnvre vagy URL-re lltva, mintha egy statikus elemet szeretnnk megjelenteni. Ehelyett a @imagePath-ra van lltva, azaz az rtkt a kdban belltott elrsi tbl kapja meg. Azonban amikor az oldal elszr fut, nincs megjelentend kp, mert a felhasznl nem vlasztott ki semmit. Ez azt jelenti, hogy az src attribtum res lesz, s a kp helyn egy piros X jelenik meg (vagy brmi ms, amit a bngsz akkor jelent meg, ha nem tallja meg a kpet). Ennek megakadlyozsra az <img> elemet egy if blokkba rakjuk, ami megnzi, hogy az imagePath vltoz tartalmaz-e valamit. Ha a felhasznl kivlaszt valamit, az imagePath tartalmazza az elrsi utat. Ha a felhasznl nem vlasztott ki kpet, vagy az oldal elszr fut, akkor az <img> elem nem lesz megjelentve. 7. Mentsk el a fjlt, s futtassuk az oldalt a bngszben! (Mieltt futtatjuk, gyzdjnk meg rla, hogy az oldal ki van vlasztva a Files munkaterleten.)
Kp feltltse
Az elz pldban lthattuk, hogyan jelentsnk meg egy kpet dinamikusan, de csak olyan kpekkel mkdtt, melyek mr a weboldalunkon voltak. Ez az eljrs megmutatja, hogyan engedlyezhetjk a felhasznlk szmra egy kp feltltst, ami utna megjelenik a weboldalon. Az ASP.NET-ben menet kzben szerkeszthetnk kpeket a WebImage helperrel, ami olyan metdusokat tartalmaz, amivel kpeket kszthetnk, mdosthatunk s menthetnk. A WebImage helper az sszes gyakori webes kpfjl tpust tmogatja, tbbek kztt a .jpg, .png s .bmp fjlokat. Ebben a fejezetben .jpg fjlokat fogunk hasznlni, de brmilyen kpfjl tpust hasznlhatunk.
171
1. Hozzunk ltre egy j oldalt, s nevezzk el UploadImage.cshtml-nek! 2. Cserljk ki a meglv kdot a kvetkezre:
@{ WebImage photo = null; var newFileName = ""; var imagePath = ""; if(IsPost){ photo = WebImage.GetImageFromRequest(); if(photo != null){ newFileName = Guid.NewGuid().ToString() + "_" + Path.GetFileName(photo.FileName); imagePath = @"images\" + newFileName; photo.Save(@"~\" + imagePath); } } } <!DOCTYPE html> <html> <head> <title>Image Upload</title> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <fieldset> <legend> Upload Image </legend> <label for="Image">Image</label> <input type="file" name="Image" /> <br/> <input type="submit" value="Upload" /> </fieldset> </form> <h1>Uploaded Image</h1> @if(imagePath != ""){ <div class="result"> <img src="@imagePath" alt="image" />
172
</div> } </body> </html>
A szveg trzse tartalmaz egy <input type="file"> elemet, amivel a felhasznlk kivlaszthatnak egy feltltend fjlt. Amikor a Submit-ra kattintanak, az rlappal egytt a fjl, amit kivlasztottak is elkldsre kerl. A feltlttt kp megszerzshez a WebImage helpert hasznljuk, ami sok hasznos metdust tartalmaz a kpekkel val munkhoz. Most a WebImage.GetImageFromRequest-et hasznljuk a feltlttt kp megszerzshez s a photo vltoz alatti trolshoz. Ebben a fejezetben sok munknk lesz az elrsi utak s fjlnevek megszerzsvel s belltsval. A problma az, hogy szeretnnk a felhasznl ltal feltlttt kp nevt (s csak a nevt) megszerezni, majd ezutn egy j elrsi utat kszteni neki oda, ahol trolni fogjuk a kpet. Mivel a felhasznlk feltlthetnek esetleg tbb kpet is ugyanolyan nvvel, ezrt egy kis extra kdot hasznlunk az egyedi nevek ltrehozshoz, gy biztostva, hogy a felhasznlk nem rnak fell meglv kpeket. Ha egy kpet feltltttek (a teszt if (photo != null), akkor a kp nevt a FileName tulajdonsgbl megkapjuk. Amikor a felhasznl feltlti a kpet, a FileName a felhasznl eredeti nevt tartalmazza, ami magban foglalja a felhasznl gpn lv elrsi utat. gy nzhet ki: C:\Users\Joe\Pictures\SamplePhoto1.jpg Azonban nincs szksgnk erre az elrsi tra csak az aktulis fjlnv (SamplePhoto1.jpg) kell neknk. A fjlnevet kiszedhetjk ez elrsi tbl a Path.GetFileName metdussal, gy:
Path.GetFileName(photo.FileName)
Ekkor ltrehozunk egy egyedi fjlnevet az eredeti fjlnvbl egy GUID hozzadsval. (A GUID-okrl tbb informcit a fejezet ksbbi rszben olvashatunk.) Ezutn ksztnk egy komplett elrsi utat, amit a kp mentshez hasznlunk. A mentshez szksges elrsi t az j fjlnvbl, a mappbl (images) s az aktulis weboldal helybl ll. Megjegyzs: Ahhoz, hogy a kd az images mappba mentse a fjlokat, az alkalmazsnak rs-olvassi jogosultsgra van szksge erre a mappra. A fejleszt szmtgpen ltalban ez nem problma. Azonban amikor egy hostolt webszerveren publikljuk a weboldalunkat, kifejezetten szksg lehet az engedlyek belltsra. Ha ezt a kdot futtatjuk a webhosting szolgltat szervern, s hibazenetet kapunk, vegyk fel a kapcsolatot a szolgltatval, hogy hogyan llthatk be ezek az engedlyek! Vgl a mentshez szksges elrsi utat a WebImage helper Save metdushoz adjuk. Ez elmenti a feltlttt kpet az j neve alatt. A Save metdus gy nz ki: photo.Save(@~\ + imagePath). A komplett elrsi utat hozzfzi a @~\-hoz, ami az aktulis weboldal helye. (A ~ opertorrl bvebbi informci a 3. fejezetben tallhat.) Ahogy az elz pldban, az oldal szvegtrzse egy <img> elemet tartalmaz a kp megjelentshez. Ha az imagePath be lett lltva, az <img> elem megjelenik s az src attribtuma az imagePath rtkre lltdik. 3. Futtassuk az oldalt a bngszben!
173
A GUID-okrl A GUID (globally-unique ID) egy azonost, ami hasonlan nz ki: 936DA01F-9ABD-4d9d-80C702AF85C822A8. (Technikailag egy 16 byte/128-bites szm.) Amikor egy GUID-ra van szksgnk, egy specilis kdot hvhatunk meg, ami generl egy GUID-ot neknk. A GUID lnyege, hogy a szm hatalmas mrete (3,4 1038) s a generl algoritmusa egy gyakorlatilag garantltan egyedi szmot hoz ltre. Ezrt a GUID-ok hasznosak olyan dolgok nevnek generlsra, ahol garantlni kell, hogy nem hasznljuk ktszer ugyanazt a nevet. A msik oldalrl persze a GUID-ok nem ppen felhasznlbartok, ezrt csak akkor hasznljuk ket, amikor a neveket csak a kdban hasznljuk.
Kp tmretezse
Ha a weboldalunk kpeket fogad egy felhasznltl, a mentse vagy a megjelentse eltt szksgnk lehet a kp tmretezsre. Ehhez jra a WebImage helpert hasznlhatjuk. Ez az eljrs megmutatja, hogyan mretezzk t a feltlttt kpet miniatr ltrehozshoz, majd hogyan mentsk a miniatrt s az eredeti kpet a weboldalon. A miniatrt megjelentjk a weboldalon, s hiperhivatkozssal tirnytjuk a felhasznlkat a teljes mret kphez.
1. Hozzunk ltre egy j oldalt Thumbnail.cshtml nvvel! 2. Az images mappban ksztsnk egy almappt thumbs nvvel! 3. Cserljk ki a meglv kdot a kvetkezre:
@{ WebImage photo = null; var newFileName = ""; var imagePath = ""; var imageThumbPath = ""; if(IsPost){ photo = WebImage.GetImageFromRequest(); if(photo != null){ newFileName = Guid.NewGuid().ToString() + "_" + Path.GetFileName(photo.FileName); imagePath = @"images\" + newFileName; photo.Save(@"~\" + imagePath); imageThumbPath = @"images\thumbs\" + newFileName; photo.Resize(width: 60, height: 60, preserveAspectRatio: true,
174
preventEnlarge: true); photo.Save(@"~\" + imageThumbPath); }
} <!DOCTYPE html> <html> <head> <title>Resizing Image</title> </head> <body> <h1>Thumbnail Image</h1> <form action="" method="post" enctype="multipart/form-data"> <fieldset> <legend> Creating Thumbnail Image </legend> <label for="Image">Image</label> <input type="file" name="Image" /> <br/> <input type="submit" value="Submit" /> </fieldset> </form> @if(imagePath != ""){ <div class="result"> <img src="@imageThumbPath" alt="Thumbnail image" /> <a href="@Html.AttributeEncode(imagePath)" target="_Self"> View full size </a> </div> } </body> </html>
Ez a kd hasonl az elz pldhoz. A klnbsg az, hogy ez a kd ktszer menti el a kpet, egyszer normlisan s egyszer, miutn egy blyegkpet ksztettnk a kpbl. Elszr megkapjuk a feltlttt kpet, s elmentjk az images mappba. Ezutn ltrehozunk egy j elrsi utat a blyegkp szmra. A blyegkp ltrehozshoz a WebImage helper Resize metdust hasznljuk, hogy egy 60x60 pixeles kpet ksztsen. A plda megmutatja, hogyan tartsuk meg az oldalarnyt, s hogyan akadlyozzuk meg, hogy a kpet kinagytsa (abban az esetben, ha az j mret nagyobb tenn a kpet). Az tmretezett kp ezutn a thumbs almappban kerl mentsre. A kd vgn az <img> elemet hasznljuk a dinamikus src attribtummal, amit a korbbi pldkban a kpek feltteles megjelentsnl lthattunk. Ebben az esetben a blyegkpet jelentjk meg. Egy <a> elemet is hasznlunk egy hiperhivatkozs ltrehozshoz, ami a kp nagy vltozathoz kapcsoldik. Ahogy az src attribtumot az <img> elemhez, a href attribtumot az <a> elemhez lltjuk dinamikusan, ami az imagePath-ban van. Hogy megbizonyosodjuk arrl, hogy az elrsi t URL-knt mkdik, az imagePath-t a Html.AttributeEncode metdushoz adjuk, ami az elrsi t korltozott karaktereit talaktja az URL-hez hasznlhat karakterekk. 4. Futtassuk az oldalt a bngszben!
Kp forgatsa s tkrzse
A WebImage helper segtsgvel tkrzhetjk s elforgathatjuk a kpeket. Ez az eljrs bemutatja, hogyan kapjuk meg a kpet a szerverrl, hogyan tkrzzk fgglegesen, hogyan mentsk el, majd Honlappts a XXI. szzadban 10. fejezet Munka kpekkel
175
hogyan jelentsk meg a tkrztt kpet az oldalon. Ebben a pldban csak egy olyan kpet hasznlunk, ami mr megtallhat a szerveren (Photo2.jpg). Vals felhasznlsban valsznleg egy olyan kpet tkrznnk, aminek a nevt dinamikusan kapjuk meg, mint ahogy az elz pldkban lthattuk.
1. Hozzunk ltre egy j oldalt Flip.cshtml nvvel! 2. Cserljk ki a meglv kdot a kvetkezre:
@{ var imagePath= ""; WebImage photo = new WebImage(@"~\Images\Photo2.jpg"); if(photo != null){ imagePath = @"images\Photo2.jpg"; photo.FlipVertical(); photo.Save(@"~\" + imagePath); }
} <!DOCTYPE html> <html> <head> <title>Get Image From File</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <h1>Flip Image Vertically</h1> @if(imagePath != ""){ <div class="result"> <img src="@imagePath" alt="Image" /> </div> } </body> </html>
A kd a WebImage helpert hasznlja, hogy megkapjuk a kpet a szerverrl. Mi ksztjk el az elrsi utat a kphez, ugyanazt a technikt alkalmazva, amit a korbbi pldkban kpek mentshez hasznltunk, s ezt az elrsi utat a kp ltrehozsnl a WebImage hasznlatval tadjuk:
WebImage photo = Snew WebImage(@"~\Images\Photo2.jpg");
176
Ha tall egy kpet, ltrehozunk egy j elrsi utat s fjlnevet, mint ahogy a korbbi pldkban tettk. A kp tkrzshez a FlipVertical metdust hvjuk, majd jra elmentjk a kpet. A kp jra az <img> metdus hasznlatval, az src attribtum imagePath-ra lltsval jelenik meg az oldalon. 3. Futtassuk az oldalt a bngszben! A Photo2.jpg kpe fejjel lefele elenik meg. Ha jra lekrdezzk az oldalt, a kp jra felfel tkrzve jelenik meg. Kp elforgatshoz ugyanezt a kdot hasznljuk, kivve, hogy a FlipVertical vagy FlipHorizontal hvsa helyett a RotateLeft-et vagy a RotateRight-ot hvjuk.
Vzjel hozzadsa kphez

Ha a weboldalunkhoz kpeket tltnk fel, szksgnk lehet vzjel hozzadsra a kpek mentse s megjelentse eltt. Gyakran azrt hasznlnak vzjelet, hogy szerzi jogokrl szl informcikat rakjanak a kpre, vagy hogy reklmozzk a mrkanevket.
1. Hozzunk ltre egy j oldalt Watermark.cshtml nvvel! 2. Cserljk ki a meglv kdot a kvetkezre:
@{ var imagePath= ""; WebImage photo = new WebImage(@"~\Images\Photo3.jpg"); if(photo != null){ imagePath = @"images\Photo3.jpg"; photo.AddTextWatermark("My Watermark", fontColor:"Yellow", fontFamily: "Arial"); photo.Save(@"~\" + imagePath); } } <!DOCTYPE html> <html> <head> <title>Water Mark</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <h1>Adding a Watermark to an Image</h1> @if(imagePath != ""){ <div class="result"> <img src="@imagePath" alt="Image" />
177
</div> } </body> </html>
Ez a kd olyan, mint a Flip.cshtml oldal kdja korbbrl (br most a Photo3.jpg fjlt hasznlja). Vzjel hozzadshoz a WebImage helper AddTextWatermark metdust hasznlja ments eltt. Az AddTextWatermark hvshoz a My Watermark szveget adjuk, a betsznt srgra lltjuk, s a bettpust Arialra lltjuk.(Br itt nem mutatjuk be, de a WebImage segtsgvel az tltszsgot, bettpust, betmretet s a vzjel elhelyezkedst is bellthatjuk.) Amikor mentjk a kpet, nem lehet rsvdett. Ahogy korbban lttuk, a kp az <img> elem src attribtumnak @imagePath-ra lltsval jelenik meg az oldalon. 3. Futtassuk az oldalt a bngszben!
Kp hasznlata vzjelknt
Vzjelknt hasznlhatunk szveg helyett msik kpet is. Nha egy cglogt hasznlnak vzjelknt, vagy a szerzi jogokrl szl informciknl is szveg helyett kpet hasznlnak.
1. Hozzunk ltre egy j oldalt ImageWatermark.cshtml nvvel! 2. Rakjunk egy olyan kpet az images mappba, amit logknt szeretnnk hasznlni, s nevezzk t a kpet MyCompanyLogo.jpg-re! Ez egy olyan kp kell, hogy legyen, ami tisztn lthat akkor is, ha 80 pixel szles s 20 pixel magasra van lltva. 3. Cserljk ki a meglv kdot a kvetkezre:
@{ var imagePath = ""; WebImage WatermarkPhoto = new WebImage(@"~\" + @"\Images\MyCompanyLogo.jpg"); WebImage photo = new WebImage(@"~\Images\Photo4.jpg"); if(photo != null){ imagePath = @"images\Photo4.jpg"; photo.AddImageWatermark(WatermarkPhoto, width: 80, height: horizontalAlign:"Center", verticalAlign:"Bottom", opacity:100, padding:10); photo.Save(@"~\" + imagePath); } } <!DOCTYPE html>
20,
178
<html> <head> <title>Image Watermark</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <h1>Using an Image as a Watermark</h1> @if(imagePath != ""){ <div class="result"> <img src="@imagePath" alt="Image" /> </div> } </body> </html>
Ez egy varicija a korbbi pldkban ltott kdoknak. Ebben az esetben az AddImageWatermark-ot hvjuk a vzjel clkphez (Photo3.jpg) val hozzadshoz, mieltt elmentennk a kpet. Amikor az AddImageWatermark-ot hvjuk, szlessgt 80 pixelre, magassgt 20 pixelre lltjuk. A MyCompanyLogo.jpg a clkp aljra kzpre kerl elhelyezsre. Az tltszsg 100%-ra van lltva, a padding pedig 10 pixelre. Ha a vzjel kp nagyobb, mint a clkp, semmi sem trtnik. Ha a vzjel kp nagyobb, mint a clkp, s a vzjel padding-ot nullra lltjuk, a vzjelet figyelmen kvl hagyja. Mint korbban, a kpet az <img> elemmel s egy dinamikus src attribtummal jelentjk meg. 4. Futtassuk az oldalt a bngszben!
179
11. fejezet Mveletek videkkal

Van egy videnk? Ha igen, akkor knnyen megjelenthetjk egy weboldalon. Az ASP.NET segtsgvel kpesek vagyunk lejtszani Flash (.swf), Media Player (.wmv), valamint Silverlight (.xap) videkat. Az tmutatbl megtudhatjuk: Hogyan vlasszunk videlejtszt? Hogyan adjunk egy weblaphoz videt? Hogyan lltsuk be a lejtsz tulajdonsgait?
Ezek a fejezetben bemutatott jdonsgai az ASP.NET weboldalaknak: A video helper.
Videolejtsz kivlasztsa
Rengeteg video fjlformtum ltezik, s ltalban mindegyikhez klnbz lejtsz szksgeltetik, klnbz ton kell konfigurlni a lejtszt. Az ASP.NET weboldalakban le tudunk jtszani egy videt a video helper hasznlatval. A video helper leegyszersti a begyazott videk folyamatait a weboldalon, mivel automatikusan legenerlja az object s az embed HTML elemeket, amelyeket ltalban a videk hozzadshoz hasznlunk. A video helper a kvetkez lejtszkat tmogatja: Adobe Flash Windows Media Player Microsoft Silverlight
A Flash lejtsz
A video helper flash lejtszja lehetv teszi neknk a Flash videk (.swf fjlok) lejtszst a weboldalon. Legalbb a fjl elrsi tjt biztostanunk kell. Hogyha nem adunk meg semmit sem, csak az elrsi utat, a lejtsz az alaprtelmezett rtkeket hasznlja, melyet a Flash aktulis verzija alapjn fog belltani. Tipikus belltsok: A video az alaprtelmezett szlessggel s magassggal fog megjelenni, httrszn nlkl. A video automatikusan elindul, mikor az oldal betlt. A video folyamatosan ismtldik, mg azt le nem lltjuk. A video gy van mretezve, hogy a teljes videt megjelentse, nem pedig gy, hogy a szlek levgsval kitltse a keretet. A video egy ablakban fog lejtszdni.
A MediaPlayer lejtsz
A video helper MediaPlayer lejtszja lehetv teszi neknk a Windows Media Video (.wmv fjlok), Windows Media Audio (.wma fjlok), valamint MP3 (.mp3 fjlok) lejtszst. Lejtszshoz szksgnk van a mdia fjl elrsi tvonalra; a tbbi paramtert nem ktelez megadnunk. Hogyha nem adunk meg semmit sem, csak az elrsi utat, a lejtsz az alaprtelmezett rtkeket hasznlja, melyet a Media Player aktulis verzija alapjn fog belltani, mint ezek: A video az alaprtelmezett szlessggel s magassggal fog megjelenni. A viedo automatikusan elindul, mikor az oldal betlt. A video csak egyszer fog lejtszdni (nem ismtldik). 180
Honlappts a XXI. szzadban 11. fejezet Mveletek videkkal
A lejtsz kijelzi a teljes kezelfelletet a felhasznli felleten. A video egy ablakban fog lejtszdni.
A Silverlight lejtsz
A video helper Silverlight lejtszja lehetv teszi neknk a Windows Media Video (.wmv fjlok), Windows Media Audio (.wma fjlok), valamint MP3 (.mp3 fjlok) lejtszst. Be kell lltanunk az elrsi t paramtereit, hogy a Silverlight alap alkalmazscsomagra mutasson. A szlessg s magassg paramtereit is be kell lltanunk. A tbbi paramtert nem ktelez megadnunk. Mikor a Silverlight lejtszt gy hasznljuk, hogy csak a szksges paramtereket adtuk meg, a Silverlight lejtsz httrszn nlkl fogja megjelenteni a videt. Megjegyzs: Ha mg nem ismernnk a Silverlightot: a .xap fjl egy tmrtett llomny, amely az .xaml fjlban szerkezeti utastsokat, a rszegysgekben kezelt kdokat s tetszleges erforrsokat tartalmaz. Mint Silverlight application project, kszthetnk .xap fjlokat a Visual Studiban. A Sliverlight lejtsz hasznlja az ltalunk megadott belltsokat s a .xap fjlban trolt belltsokat is. MIME tpusok Amikor a bngsz letlti a fjlt, a bngsz gondoskodik arrl, hogy a fjl tpusa megegyezzen a megjelenteni kvnt weboldal MIME tpusval. A MIME-tpus egy fjl tartalmi vagy mdia tpusa. A video helper a kvetkez MIME-tpusokat hasznlja:
application/x-shockwave-flash application/x-mplayer2 application/x-silverlight-2
Flash videk (.swf) lejtszsa

Az eljrs megmutatja neknk, hogyan jtsszunk le egy sample.swf nev Flash videt. A feladathoz szksgnk van arra, hogy legyen egy Media nev mappnk a webhelyen, ami tartalmazza a .swf fjlt. 1. Ha mg nem tettk volna meg, akkor adjuk hozz az ASP.NET Web Helpers Libraryt a webhelynkhz, ahogyan az a 2. fejezetben le van rva! 2. A hozzunk ltre egy j lapot, s nevezzk el FlashVideo.cshtml-nek! 3. Adjuk hozz a kvetkez kdot a laphoz:
<!DOCTYPE html> <html> <head> <title>Flash Video</title> </head> <body> @Video.Flash(path: "Media/sample.swf", width: "400", height: "600", play: true, loop: true, menu: false, bgColor: "red", quality: "medium", scale: "exactfit", windowMode: "transparent") </body> </html>
181
4. Futtassuk az oldalt egy bngszben! ( Gyzdjnk meg arrl, hogy az oldal ki van vlasztva a Files munkaterleten, mieltt futtatjuk.) Az oldal s a video automatikusan meg fog jelenni.
Bellthatjuk a Flash video quality paramtert low-ra, autolow-ra, medium-ra, high-ra s best-re.
// Set the Flash video quality @Video.Flash(path: "Media/sample.swf", quality: "autohigh")
A kvetkez mdon bellthatjuk, hogy a Flash video a meghatrozott mretekkel jtszdjon le:
showall:
Ez a teljes videt lthatv teszi, mikzben megrzi az eredeti kparnyt. Elfordulhat azonban, hogy a szleken fekete svok lesznek lthatk. noorder: Ez tmretezi a videt, megtartva az eredeti kparnyt, de lehet, hogy levgja egy rszt. exactfit: Ez a teljes videt lthatv teszi az eredeti kparny megtartsa nlkl, ekkor fennll a torzuls veszlye.
Hogyha nem adjuk meg a mretezsi paramtereket, a teljes vide megjelenik az eredeti kparnnyal brmilyen vgs nlkl. A kvetkez plda mutatja, hogyan hasznljuk a scale paramtereit:
// Set the Flash video to an exact size @Video.Flash(path: "Media/sample.swf", width: "1000", height: "100",scale: "exactfit")
A Flash lejtsz tmogatja a windowMode nev video mdot. window-ra, opaque-ra, valamint transparent-re llthatjuk. Alaprtelmezs szerint a windowMode window-ra van lltva, ami a videt egy Honlappts a XXI. szzadban 11. fejezet Mveletek videkkal
182
kln ablakban jelenti meg a weboldalon. Az opaque bellts mindent a video mg rejt a weboldalon. A transparent bellts hagyja, hogy a weboldal httere megjelenjen a viden keresztl, felttelezve azt, hogy van a viden tltsz rsz.
Media Player (.wmv) videk lejtszsa

A kvetkez feladat megmutatja neknk, hogyan jtsszunk le egy sample.wmv nev Windows Media videt, amit a Media mappban tallunk. 1. Ha mg nem tettk volna meg, akkor adjuk hozz az ASP.NET Web Helpers Libraryt az oldalunkhoz, ahogy az a 2. fejezetben le van rva! 2. Ksztsnk egy j, MediaPlayerVideo.cshtml nev lapot! 3. Adjuk hozz a kvetkez utastst a laphoz:
<!DOCTYPE html> <html> <head> <title>MediaPlayer Video</title> </head> <body> @Video.MediaPlayer( path: "Media/sample.wmv", width: "400", height: "600", autoStart: true, playCount: 2, uiMode: "full", stretchToFit: true, enableContextMenu: true, mute: false, volume: 75) </body> </html>
4. Futtassuk az oldalt egy bngszben! A video automatikusan be fog tlteni s le fog jtszdni.
183
Megadhatunk a playCountnak valamilyen egsz szmot, amely azt jelzi, hogy hnyszor kell automatikusan lejtszania a videt:
// Set the MediaPlayer video playCount @Video.Flash(path: "Media/sample.swf", playCount: 2)
Az uiMode paramter lehetsget ad arra, hogy megszabjuk, melyik irnyteszkzk jelenjenek meg a felhasznli felleten. Bellthatjuk invisible-re, none-ra, mini-re, valamint full-ra. Amikor nem hatrozzuk meg az uiMode paramtert, a video az llapotablakkal, keressvval, vezrlgombokkal s hagerszablyzval fog megjelenni a video ablaka mellett. Ezek a kezelszervek akkor is meg fognak jelenni, ha a lejtszt hangfjlok lejtszsra hasznljuk. me egy plda, hogyan hasznljuk az uiMode paramtert:
// Set the MediaPlayer control UI @Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")
Alaprtelmezetten a hang be van kapcsolva, mikor a video lejtszs alatt van. Lenmthatjuk a hangot, ha a mute paramtert igazra lltjuk:
// Play the MediaPlayer video without audio @Video.MediaPlayer(path: "Media/sample.wmv", mute: true)
A Media Player video hangerejt irnythatjuk, ha a volume paramter rtkt 0 s 100 kztt lltjuk. Alaprtelmezetten ez az rtk 50. me egy plda:
// Play the MediaPlayer video without audio @Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)
Silverlight videk lejtszsa

A kvetkez feladat megmutatja neknk, hogyan jtsszunk le videt, amelyet egy Media nev mappban lv Silverlight .xap oldal tartalmaz. Honlappts a XXI. szzadban 11. fejezet Mveletek videkkal 184
1. Ha mg nem tettk volna meg, akkor adjuk hozz az ASP.NET Web Helpers Libraryt az oldalunkhoz, ahogyan azt a 2. fejezetben olvashattuk! 2. Ksztsnk egy j, SilverlightVideo.cshtml nev oldalt! 3. Adjuk hozz a kvetkez utastst a laphoz:
<!DOCTYPE html> <html> <head> <title>Silverlight Video</title> </head> <body> @Video.Silverlight( path: "Media/sample.xap", width: "400", height: "600", bgColor: "red", autoUpgrade: true) </body> </html>
4. Futtassuk az oldalt egy bngszben!

Silverlight Overview Flash OBJECT and EMBED tag attributes Windows Media Player 11 SDK PARAM Tags
185
12. fejezet E-mail hozzadsa a webhelynkhz

Ebben a fejezetben megtanuljuk, hogyan kldhetnk automatikus e-mail zenetet webhelynkrl. Amit megtanulunk: Hogyan kldjnk egy e-mail zenetet a weboldalrl? Hogyan csatoljunk fjlt az e-mail zenethez?
Ezt az ASP.Net szolgltatst vezetjk be a fejezetben: A WebMail helper.
E-mail zenet kldse a webhelyrl

Sokfle okbl kellhet a webhelynkrl e-mailt kldeni. Megerst zenetet kldhetnk a felhasznlnak vagy rtestseket magunknak (pldul, hogy egy j felhasznl regisztrlt.) A WebMail helper egyszerv teszi neknk ezeket a mveleteket. A WebMail helper hasznlathoz hozzfrsre van szksgnk egy SMTP szerverhez.(SMTP= Simple Mail Transfer Protocol) Az SMTP szerver egy e-mail szerver, ami tovbbtja az zeneteket a cmzett szerverre. Ez a kimen oldala az e-mailnek. Ha webhelynk egy trhely szolgltatnl zemel, akkor lehetsges, hogy rendelkeznk nluk e-mail fikkal. Ez esetben krjk a szolgltat segtsgt a belltsok elvgzshez. Ha sajt vllalati rendszernkn fut a webhely, a rendszergazda, vagy az IT rszleg tud segteni az SMTP szerver belltsaiban. Otthoni futtats sorn akr sajt e-mail fikunkkal is tesztelhetjk a rendszert. Amire ltalban szksgnk van: Az SMTP szerver neve. A port szma. (Ez majdnem mindig 25. Azonban lehetsges, hogy a szolgltatnk megkveteli az 587-es port hasznlatt.) Azonostk (felhasznlnv, jelsz).
Ebben a feladatban kt weboldalt ksztnk. Az els oldal egy rlap, amin a felhasznl egy lerst adhat, mintha egy technikai tmogatst kr rlapot tltene ki. Az els oldal elkldi az informciit a msodik lapnak. A msodik lapon a kd rtelmezi a felhasznl informciit, s kld egy e-mail zenetet. Ez egy megerst zenet a problma bejelentsnek fogadsrl.
Megjegyzs: Annak rdekben, hogy ez a plda egyszer maradjon, a kd inicializlja a WebMail helpert kzvetlenl azo az oldalon, ahol hasznlni fogjuk. Ugyanakkor a vals webhelyen jobb tlet az ehhez hasonl initializl kdot beletenni egy globlis fjlba ,hogy az inicializlja a WebMail helpert az Honlappts a XXI. szzadban 12. fejezet E-mail hozzadsa a webhelynkhz
186
sszes fjlnak a weboldalon. Tovbbi informcikrt nzzk meg a 19. fejezetet (A Site-Wide viselkeds testreszabsa)! 1. Ksztsnk egy j weboldalt! 2. Adjuk hozz a weboldalhoz az ASP.NET Web Helpers Library-t a 2. fejezetben lertak szerint (ha mg nem tettk volna meg)! 3. Adjunk hozz egy j weboldalt EmailRequest.cshtml nven s rjuk be a kvetkez kdot:
<!DOCTYPE html> <html> <head> <title>Request for Assistance</title> </head> <body> <h2>Submit Email Request for Assistance</h2> <form method="post" action="ProcessRequest.cshtml"> <div> Your name: <input type="text" name="customerName" /> </div> <div> Details about your problem: <br /> <textarea name="customerRequest" cols="45" rows="4"></textarea> </div> <div> <input type="submit" value="Submit" /> </div> </form> </body> </html>
Figyeljk meg, hogy az rlap elem action attribtumnak a ProcessRequest.cshtml van megadva. Ez azt jelenti, hogy az rlapot a megadott helyre kldi az oldal, nem pedig az ppen megnyitottra. 4. Adjunk hozz egy j lapot a website-hoz ProcessRequest.cshtml nven, s rjuk bele a kvetkez kdot:
@{ var customerName = Request["customerName"]; var customerRequest = Request["customerRequest"]; try { // Initialize WebMail helper WebMail.SmtpServer = "your-SMTP-host"; WebMail.SmtpPort = 25; WebMail.EnableSsl = true; WebMail.UserName = "your-user-name-here"; WebMail.From = "your-email-address-here"; WebMail.Password = "your-account-password"; // Send email WebMail.Send(to: "target-email-address-here", subject: "Help request from - " + customerName, body: customerRequest ); } catch (Exception ex ) {
Honlappts a XXI. szzadban 12. fejezet E-mail hozzadsa a webhelynkhz
187
<text> <b>The email was <em>not</em> sent.</b> The code in the ProcessRequest page must provide an SMTP server name, a user name, a password, and a "from" address. </text> } } <!DOCTYPE html> <html> <head> <title>Request for Assistance</title> </head> <body> <p>Sorry to hear that you are having trouble, <b>@customerName</b>.</p> <p>An email message has been sent to our customer service department regarding the following problem:</p> <p><b>@customerRequest</b></p> </body> </html>
A kdban az rlapmezk elkldtt rtkeivel dolgozunk. Ezutn meghvjuk a Webmail helper Send metdust az e-mail zenet ltrehozshoz s elkldshez. Ebben az esetben a szveget alkot rtkeket sszekapcsoljuk az rlapbl nyert rtkekkel. Ennek az oldalnak a belsejben van egy try/catch block. Ha az e-mail elkldsre tett ksrlet sikertelen (pldul helytelenek a belltsok), az oldal feldob egy zenetet. <text> cmkvel jellhetnk tbb sornyi szveget a kdon bell. (Tovbbi informcikrt a try/catch blokkokkal vagy a <text> cmkvel kapcsolatban nzzk meg a 3. fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal fejezetet. 5. Mdostsuk a kvetkez e-mailhez kapcsold belltsokat a kdban: lltsuk be a your-SMTP-host-ot annak az SMTP szervernek a nevre, amihez hozzfrsnk van! lltsuk be a your-user-name-here-t az SMTP szervernk felhasznlnevre! lltsuk be a your-email-address-here-t a sajt e-mail cmnkre. Ez lesz az az e-mail cm, amirl az zenetet elkldjk. lltsuk be a your-account-password-t az SMTP szerver felhasznli fikjnak jelszavra. lltsuk be a target-email-address-here-t annak a szemlynek az e-mail cmre, akinek el szeretnnk kldeni az zenetet. Normlisan ez a cmzett e-mail cme, de a tesztels rdekben a sajt e-mail cmnket adjuk meg. Amikor futtatjuk az oldalt, meg fogjuk kapni az zenetet. 6. Futtassuk az EmailRequest.cshtml oldalt a bngsznkben! (Futtats eltt bizonyosodjunk meg arrl, hogy az oldal ki van vlasztva a Files munaterleten!) 7. Adjuk meg a nevnket s a problma lerst, s kattintsunk a Submit gombra! tirnyt minket a ProcessRequest.cshtml oldalra, ami megersti az zenetet s elkldi az e-mail zenetet.
188
Fjl kldse e-mail hasznlatval

Kldhetnk fjlokat is az e-mail zenethez csatolva. Ebben a feladatrszben ksztnk egy szvegfjlt s kt HTML oldalt. A szvegfjlt fogjuk hasznlni e-mail csatolmnynak. 1. Hozzunk ltre egy MyFile.txt nev szveges dokumentumot! 2. Msoljuk ki a lenti szveget s illesszk be a fjlba:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3. Ksztsnk egy SendFile.cshtml nev oldalt s rjuk be a kvetkez kdot:

<!DOCTYPE html> <html> <head> <title>Attach File</title> </head> <body> <h2>Submit Email with Attachment</h2> <form method="post" action="ProcessFile.cshtml"> <div> Your name: <input type="text" name="customerName" /> </div> <div> Subject line: <br /> <input type="text" size= 30 name="subjectLine" /> </div> <div> File to attach: <br /> <input type="text" size=60 name="fileAttachment" /> </div> <div> <input type="submit" value="Submit" /> </div> </form> </body> </html>
4. Ksztsnk egy ProcessFile.cshtml nev oldalt, s lssuk el a kvetkez kddal:
189
@{ var customerName = Request["customerName"]; var subjectLine = Request["subjectLine"]; var fileAttachment = Request["fileAttachment"]; try { // Initialize WebMail helper WebMail.SmtpServer = "your-SMTP-host"; WebMail.SmtpPort = 25; WebMail.EnableSsl = true; WebMail.UserName = "your-user-name-here"; WebMail.From = "your-email-address-here"; WebMail.Password = "your-account-password"; // Create array containing file name var filesList = new string [] { fileAttachment }; // Attach file and send email WebMail.Send(to: "target-email-address-here", subject: subjectLine, body: "File attached. <br />From: " + customerName, filesToAttach: filesList); } catch (Exception ex) { <text> <b>The email was <em>not</em> sent.</b> The code in the ProcessFile page must provide an SMTP server name, a user name, a password, and a "from" address. </text> } } <!DOCTYPE html> <html> <head> <title>Request for Assistance </title> </head> <body> <p><b>@customerName</b>, thank you for your interest.</p> <p>An email message has been sent to our customer service department with the <b>@fileAttachment</b> file attached.</p> </body> </html>
5. Mdostsuk a kvetkez e-mailhez kapcsold belltsokat a pldakdban: lltsuk be a your-SMTP-host-ot annak az SMTP szervernek a nevre, amihez hozzfrsnk van! lltsuk be a your-user-name-here-t az SMTP szervernk felhasznlnevre! lltsuk be a your-email-address-here-t a sajt e-mail cmnkre! Ez lesz az az e-mail cm, amirl az zenetet elkldjk. lltsuk be a your-account-password-t az SMTP szerver felhasznli fikjnak jelszavra! lltsuk be a target-email-address-here-t a sajt cmnkre! (Mint az elbb, most is el tudnnk kldeni a levelet valaki msnak, de tesztelsre sajt magunknak kldjk el!) 6. Futtassuk a SendFile.cshtml oldalt a bngszben!
190
7. Adjuk meg a nevnket, a trgyat s a szveges dokumentum nevt (MyFile.txt), hogy csatoljuk az e-mailhez! 8. Kattintsunk a Submit gombra! Mint korbban, most is t lesznk irnytva a ProcessFile.cshtml oldalra, ami megersti az zenetet, s elkldi az levelet a csatolt fjllal.

Simple Mail Tranfer Protocol
191
13. fejezet Keres hozzadsa a webhelynkhz

Ebben a fejezetben megtudhatjuk, hogyan keressnk egy weboldalt a Bing keresmotor hasznlatval. Mit fogunk tanulni: Hogyan tegyk lehetv, hogy webhelynkn kereshessenek a felhasznlk?
Ezt az ASP.NET funkcit ismertetjk a fejezetben: A Bing helper
Keress a webhelynkn
Ha kerest adunk a webhelynkhz, a tallatokat megjelenthetjk a webhely elhagysa nlkl is. A keres hozzadsa a kvetkez elnykkel jr: Adjunk hozz egy Search this site gombot, amivel a felhasznlk az oldalon kereshetnek. gy biztosan megtalljk a webhelynkn azt, amit szeretnnek megnzni. Adjunk hozz egy gombot, amivel a felhasznlk egyszeren kereshetnek kapcsold weboldalakon! Pldul ha a webhelynk egy iskolai focicsapat oldala, akkor hozzadhatunk egy, az iskola webhelyn keres mezt. Adjunk egy mezt, amivel a felhasznl a weben kereshet az oldal elhagysa vagy j lap nyitsa nlkl!
Hogy keresvel lssuk el wehelynket, hasznljuk a Bing helpert s (opcionlisan) adjuk meg a keresshez webhely URL-jt! A Bing helper elkszt egy szvegdobozt, amiben a felhasznl megadhatja a keresett kifejezst. Kt mdja van a keress belltsnak: az egyszer s a halad lehetsg. Az egyszer lehetsgben a helper kszt egy szvegdobozt, ami tartalmazza a Bing keres ikont, amire rkattintva kereshetnk:
Ha mr megadtuk webhelynk cmt a keresshez, a helper kszt egy vlasztgombot, amivel a felhasznl megmondhatja, hogy csak azon a lapon szeretne keresni, vagy az egsz weben. Ha a felhasznl rkattint a keressre, az egyszer belltsnl a keres csak tirnytja a keresst a Bing oldalra (http://www.bing.com/). A tallatok egy j ablakban fognak megjelenni, mintha a felhasznl a Bing foldaln keresett volna:
Honlappts a XXI. szzadban 13. fejezet Keres hozzadsa a webhelynkhz
192
A halad belltsoknl a keresdoboz rdigombok nlkl kerl a lapra. Azonban ahelyett, hogy csak tovbbirnytana a Bing oldalra, a helper a keressi tallatokat egybl az oldalon jelenti meg:
Rszletesen bellthatjuk a keressi tallatok megjelenst. Ahogyan a plda is mutatja, ha mr meghatroztunk egy oldalt a keresshez, a tallatok kt fln jelennek meg (tallatok az oldalon, illetve a weben), gy a felhasznl knnyedn tud vltani az oldalspecifikus s a webes keress kztt. Ebben a feladatban ksztnk egy oldalt, ami bemutatja mindkt keressi opci hasznlatt. 1. Ksztsnk egy j weboldalt! 2. Adjunk hozz egy Search.cshtml nev oldalt, s rjuk meg a kvetkez kdot:
@{ Bing.SiteUrl = "www.asp.net"; Bing.SiteTitle = "ASP.NET Custom Search"; } <!DOCTYPE html> <html> <head> <title>Custom Bing Search Box</title>
193
</head> <body> <div> <h1>Simple Search</h1> <p>The simple option displays results by opening a new browser window that shows the Bing home page.</p> Search the ASP.NET site: <br/> @Bing.SearchBox() </div> <div> <h1>Advanced Search Option</h1> <p>The advanced option shows search results directly in this page. You can specify options to format the results.</p> Search the ASP.NET site: <br/> @Bing.AdvancedSearchBox( boxWidth: "300px", resultWidth: 600, resultHeight: 900, themeColor: "Green", locale: "en-US") </div> </body> </html>
A kdban ktszer hvjuk meg a Bing helpert. Elszr a SearchBox metdust (az egyszer bellts), msodszorra az AdvencedSearchBox metdust (a kiterjesztett belltst). Mindkett metdusnl a siteUrl paramtert mdostsuk arra az oldalra, amin keresni szeretnnk! (Ha nem tesszk meg, a Bing a weben keres.) Ebben az esetben a www.asp.net weboldalon keresnk. Ha a sajt oldalunkon szeretnnk keresni, helyettestsk annak az URLjvel! Az AdvancedSearchBox metdusban a siteName paramtert hasznljuk arra, hogy megmutassa a tallatok panelen annak az oldalnak a nevt, amin keresnk. A keresdoboz tmretezshez a boxWidth paramtert hasznlhatjuk. A tallati panel mreteit a resultWidth s a resultHeight paramterek tartalmazzk, a sznnek megadshoz pedig lltsuk be a themeColor paramtert! A locale paramter belltsval meg tudjuk hatrozni a nyelvet is, amit a helper a keressi tallatokhoz s a grafikus fellethez hasznl. Megjegyzs: A hely utal az orszg/rgi s nyelvi belltsokra, amit a keressi felleten s a tallatoknl hasznl. Ez nem jelenti azt, hogy csak a megadott nyelv tallatokat listzza a helper. A helyek (locale) kt rszbl llnak, mint pldul en-US (angol, amerikai), en-GB (angol, NagyBritannia), es-MX (spanyol, Mexik), fr-Ca(francia,Kanada), s gy tovbb. A local codes kulcsszra rkeresve tallhatunk mg tbb orszgkdot. A magyar terleti belltsok paramtere hu. 3. Futtassuk a Search.cshtml oldalt a bngszben! (Futtats eltt bizonyosodjunk meg arrl, hogy az oldal ki van vlasztva a Files munkaterleten!) 4. rjunk be egy keresend kifejezst az egyszer keresmezbe, s kattintsunk a gombra! A tallatok egy j bngszablakban jelennek meg. 5. Most keressnk a halad dobozzal! Egy panel fog megjelenni a keress tallataival. Honlappts a XXI. szzadban 13. fejezet Keres hozzadsa a webhelynkhz
194
Megjegyzs: Annak rdekben, hogy a Bing helper kereshessen, a keresett webhelyeknek nyilvnosan elrhetnek kell lennik, s annak tartalmt meg kell vizsglnia (feltrkpeznie) a Bingnek. Ha Keress ezen a lapon gombot ksztettnk, s belltottuk a Bing helpert az oldalunkon val keressre, addig nem tudjuk tesztelni, amg az oldalunk elg ids nem lesz ahhoz, hogy a keresmotorok megtalljk. Ms szval, nem tudjuk tesztelni a keressi kpessget kzvetlenl a WebMatrixbl.

Make your Website SEO Friendly Locale ID (LCID) Chart
195
14. fejezet Kzssgi hlzatok hozzadsa a weboldalunkhoz

Az egyik legjobb mdja, hogy weboldalunkat mg npszerbb s kzvetlenebb tegyk, a kzssgi hlzatok szolgltatsainak integrlsa az oldalunkra. Ebben a fejezetben megtanuljuk, hogyan tudnak a webhelynk ltogati hivatkozni oldalainkra a Facebook vagy a Digg hlzatban, hogyan adjunk Twitter hrfolyamokat az oldalhoz, s hogyan sznestsk webhelynket Gravatar kpekkel s Xbox Gamer krtykkal. A fejezetbl megtudhatjuk: Hogyan hivatkozhatnak a ltogatk a webhelynkre? Hogyan adjunk hozz Twitter hrfolyamot? Hogyan jelentsnk meg Gravatar.com kpeket? Hogyan rakjunk Xbox Gamer krtykat az oldalakra? Hogyan adjunk az oldalhoz Facebook-os Like gombot?
A kvetkez ASP.NET programozsi koncepcikat ismertetjk a fejezetben: A LinkShare helper. A Twitter helper. A Gravatar helper. A GamerCard helper. A Facebook helper.
Weboldalunk linkelse kzssgi oldalakon

Ha egy ember kedvel valamit az oldalunkon, gyakran meg szeretn osztani a bartaival. Ezt a mveletet egyszerv tehetjk azzal, hogy olyan ikonokat jelentnk meg, amire rkattintva megoszthatja az oldalt a Diggen, Facebookon, Twitteren vagy hasonl oldalakon. Ezen ikonok megjelentshez adjuk hozz a LinkShare helpert az oldalunkhoz! A ltogatk egyni ikonokra kattinthatnak. Ha van regisztrlt felhasznljuk a kzssgi oldalhoz, akkor akkor kzztehetik oldalunk linkjt az adott hlzatban.
1. Ksztsnk egy ListLinkShare.cshtml nev lapot, s adjuk hozz a kvetkez kdot:

<!DOCTYPE html> <html> <head> <title>LinkShare Example</title> </head> <body> <h1>LinkShare Example</h1>
Honlappts a XXI. szzadban 14. fejezet Kzssgi hlzatok hozzadsa a weboldalunkhoz
196
Share: @LinkShare.GetHtml("LinkShare Example") </body> </html>
Ebben a pldban, ha a LinkShare helper fut, az oldal cmt beilleszti paramterknt, amit a kzssgi oldalra ki fog tenni. Ezenkvl brmilyen szveget beilleszthetnk mell. 2. Futtassuk a ListLinkShare.cshtml oldalt a bngszben! (Futtats eltt bizonyosodjunk meg arrl, hogy az oldal ki van jellve a Files munkaterleten!) 3. Kattintsunk az ikonok valamelyikre, ahol van regisztrcink! A link tirnyt minket arra az oldalra, ahol megoszthatjuk a linket a kivlasztott kzssgi oldalon. Pldul ha rkattintunk a del.icio.us linkre, akkor eljutunk a Save Bookmark oldalra a Delicious webhelyen.
Twitter hrfolyam hozzadsa

ASP.NET elre megrt helperje segt Twitter hrfolyam hozzadsban. Ha a Twitter.Profile metdust hasznljuk a kdban, akkor megjelenthetjk a weboldalunkon a konkrt Twitter felhasznl bejegyzseit. Ha a Twitter.Search metdust hasznljuk, megadhatunk Twitter keresst ( szavakra, kifejezsekre vagy brmilyen kereshet szvegre), s megjelenthetjk a tallatokat az oldalunkon. Mindkt helpernek magassga, szlessga, stlusa llthat.
197
A Twitter informcik nyilvnosak, teht nincs szksg Twitter felhasznlra a Twitter helperek oldalunkon trtn hasznlathoz. A kvetkez feladat bemutatja, hogyan ksztsnk olyan weboldalt, ami mindkt helpert bemutatja. 1. Adjuk hozz az ASP.NET Web Helpers Libraryt a weboldalunkhoz a 2. fejezetben lertak szerint, ha mg nem tettk volna meg! 2. Hozzunk ltre egy j Twitter.cshtml nev lapot a webhelynkn! 3. rjuk be a kvetkez kdot:
<!DOCTYPE html> <html> <head> <title>Twitter Example</title> </head> <body> <table> <tr> <td>Twitter profile helper</td> <td>Twitter search helper</td> </tr> <tr> <td>@Twitter.Profile("<Insert User Name>")</td> <td>@Twitter.Search("<Insert search criteria here>")</td> </tr> </table> </body> </html>
4. A Twitter.Profile kdrszben cserljk ki a <Insert User Name> elemet a megjelentend Twitter felhasznlnevnkkel! 5. A Twitter.Search kdrszlet <Insert search criteria here> rszt cserljk ki a keresend szvegre! 6. Futtassuk a weboldalt a bngszben! Honlappts a XXI. szzadban 14. fejezet Kzssgi hlzatok hozzadsa a weboldalunkhoz
198
Gravatar kp megjelentse
A Gravatar ( globlisan elismert profilkp) egy kp, amit tbb weboldalon is hasznlhatunk avatarknt vagyis a teljesen publikus profilkpnk. Gravatar segtsgvel knnyen felismerhetk a felhasznlk frum hozzszlsaikban, blog kommentjeikben s gy tovbb. (Regisztrlhatjuk a sajt Gravatarunkat a gravatar weboldaln http://www.gravatar.com/.) Ha meg szeretnnk jelenteni az emberek neve vagy e-mail cme mellett a kpket is, akkor hasznljuk a Gravatar helpert! Ebben a pldban egy egyszer gravatart hasznlunk, ami minket brzol. Egy msik mdja a gravatar hasznlatnak az, hogy az emberek megadjk gravatar cmket, amikor regisztrlnak webhelynkn. (A 17. fejezetben megtudhatjuk, hogyan tudunk felhasznlkat regisztrlni.) Amikor informcikat jelentnk meg a felhasznlrl, egyszeren megjelenthetjk gravatarjt a felhasznl neve mellett. 1. Ksztsnk egy Gravatar.cshtml nev weblapot! 2. Adjuk hozz a kvetkez kdot:
<!DOCTYPE html> <html> <head> <title>Gravatar Example</title> </head> <body> <h1>Gravatar Example</h1> @Gravatar.GetHtml("<Your Gravatar account here>") @Gravatar.GetHtml("<Your Gravatar account here>", 40) </body> </html>
A Gravatar.GetHtml metdus megjelenti a Gravatar kpet a lapon. A kp mretnek megvltoztatshoz meg tudunk adni egy szmot msodik paramterknt. Az alapmret 80. A kisebb szmok a kisebbre, nagyobb szmok nagyobbra vltoztatjk a kpet. 3. A Gravatar.GetHtml metdusban cserljk ki a <Your Gravatar account here> rszt a Gravatar felhasznlnk e-mail cmre. (Ha neknk nincs Gravatar accountunk, akkor hasznljuk valaki ms e-mail cmt, akinek van.) 4. Futtassuk a lapot a bngszben! Kt, az e-mail cmnkhz belltott Gravatar kpet ltunk az oldalon. A msodik kp az els egy kicsinytett vltozata.
199
Xbox Gamer krtya megjelentse

Minden online Microsoft Xbox jtkos sajt azonostval jtszik. Az egyes jtkosok statisztiki, ezen kvl a jtkeredmnyeik s a legutbb jtszott jtkok is megjelennek szemlyes krtyjukon, az gynevezett Gamer Cardokon. Ha Xbox jtkosok vagyunk, meg tudjuk mutatni Gamer krtynkat a weboldalunkon a GamerCard helper hasznlatval. 1. Ksztsnk egy j, XboxGamer.cshtml nev oldalt s rjuk be a kvetkez kdot!
<!DOCTYPE html> <html> <head> <title>Xbox Gamer Card</title> </head> <body> <h1>Xbox Gamer Card</h1> @GamerCard.GetHtml("major nelson") </body> </html>
Hasznljuk a GamerCard.GetHtml tulajdonsgot a jtkos krtya tulajdonsgainak belltshoz! 2. Futtassuk az oldalt a bngszben! Az oldalon megjelenik a belltott Gamer krtya.
200
Facebook Like gomb megjelentse

Egyszeren megoszthatunk tartalmakat a Facebook ismerseinkkel a Facebook helper LikeButton metdusval. Megjegyzs: A The Facebook helper a Facebook.Helper csomagban rhet el, amit kln kell teleptennk a Package Manager eszkz hasznlatval. A Facebook helper kszt egy Like gombot, ami szmolja (a Facebookrl olvassa), hogy mennyi ember kattintott mr r a Like (vagy Tetszik) gombra:
Amikor a felhasznl rkattint a Like gombra, egy link jelenik meg a Facebookos zenfaln, hogy tetszik neki az oldalunk.
Alapbelltsknt a Facebook helper LikeButton metdusa ltrehoz egy Like gombot, ami rmutat a jelenlegi oldalra. Ez a tipikus eset a Like gomb megnyomsval arra az oldalra hivatkozunk, ahol ppen jrunk. Lehetsgnk van azonban arra is, hogy a Facebook helper LikeButton metdusa egy ltalunk megadott linkre hivatkozzon. Ez akkor hasznos, ha tbb hivatkozs listjt szeretnnk megjelenteni oldalunkon, s szeretnnk, hogy azokra kzvetlenl hivatkozhassanak a Like gombbal A LikeButton metdussal szemlyre szabhat a Like gomb megjelense, pldul: A link a Like, vagy Recommend linkre mutat. A Like-ol emberek szmnak megjelentse az oldalon:
201
A Like gombra kattintk profilkpei:
A Like gomb szlessge s sznsmja (light vagy dark)
A kvetkez pldban ksztnk kt Like gombot! Egy a jelenlegi oldalra mutat, a msik pedig egy megadott URL-re (esetnkben az ASP.NET WebMatrix webhelyre). A plda tesztelshez szksgnk van egy Facebook profilra. 1. Adjuk hozz a Facebook.Helper knyvtrat a weboldalunkhoz a 2. fejezetben rtak szerint, ha mg nem tettk meg! 2. Ksztsnk egy j weblapot FacebookLikeBtn.cshtml nven, s adjuk meg a kvetkez kdot:
<!DOCTYPE html> <html> <head> <title>Facebook 'Like' Button</title> <style>body {font-family:verdana;font-size:9pt;}</style> </head> <body> <p>Points to the current page, uses default settings:</p> @Facebook.LikeButton() <p>Points to the ASP.NET Web site:</p> @Facebook.LikeButton( href: "http://www.asp.net/webmatrix", action: "recommend", width: 250, buttonLayout: "button_count", showFaces: true, colorScheme: "dark") </body> </html>
Az els Facebook.LikeButton metdus az alaprtelmezett belltsokkal kszlt, teht a jelenlegi oldalunkra mutat. A msodik plda tartalmaz nhny mdostst. Hasznljuk az URL paramtert a Like URL-jnek mdostshoz! A Like Recommend-re mdostshoz lltsuk be az action paramtert recommend-re (az alaprtelmezett like helyett). A gomb stlusnak mdostshoz lltsuk a layout paramtert button_count-ra ( a standard vagy box_count helyett)! A Facebook profilkpek Like gomb alatti megjelentshez lltsuk a showFaces paramtert igazra! Vgl a sznsma belltshoz lltsuk a colorScheme paramtert dark-ra (alaprtelmezetten light)! Honlappts a XXI. szzadban 14. fejezet Kzssgi hlzatok hozzadsa a weboldalunkhoz
202
3. Futtassuk a weblapot a bngsznkben! Az oldalon lthatjuk a mdostott Facebook Like gombot.
4. Kattintsunk a Recommend gombra, ami az ASP.NET weboldalra mutat! Ha nem vagyunk bejelentkezve, a Facebookra, kri, hogy ezt ptoljuk. Ha belptnk, lthatjuk a Recommend linket az zenfalunkon. Ha az oldal tesztelshez a WebMatrixot hasznljuk, nem fogjuk tudni tesztelni az els linket (amelyik a jelenlegi oldalra mutat), mert a helyi szmtgpen trolt weboldalt a Facebook nem tudja elrni. Amint az oldalunk nyilvnos lesz, a link mkdsbe lp.
203
15. fejezet Forgalomanalzis

Miutn zembe helyeztk webhelynket, rdemes lehet kvetni annak forgalmt. A fejezetbl megtudhatju: Hogyan kldjnk informcikat a weboldalunkrl egy analizl szolgltathoz?
A kvetkez ASP.NET programozsi funkcit ismerhetjk meg a fejezetben: Az Analyitics helper.
Ltogatsok informciinak kvetse (Analzis)

Analzisnek nevezzk azt a folyamatot, melyben a weboldal forgalmt vizsgljuk, gy megllaptva, hogyan bngsznek a felhasznlk webhelynkn. Tbb szolgltat knl analziseszkzket, ilyen a Google, a Yahoo, a StatCounter, s mg sok ms. Oldalunk forgalmnak vizsglathoz elszr regisztrlnunk kell valamelyik szolgltatnl. A szolgltat kld neknk egy rvid JavaScript kdot, ami tartalmazza a felhasznli fikunk azonostjt. A kvetzni kvnt weboldalhoz hozzadjuk ezt a kdtredket. (rdemes ezt a kdot a lblcbe, vagy a layout oldalba beilleszteni, vagy egy olyan HTML kdhoz adni, ami minden lapon megtallhat.) Amikor a felhasznl lekri az oldalt, a szkript informcikat kld a laprl az analizl szolgltatnak, ami klnfle adatokat rgzt a laprl. Amikor ltni szeretnnk az oldalunk statisztikit, bejelentkeznk az analizl szolgltat weboldalra. Tbbfle jelentst lthatunk az oldalrl, pldul: Az egyes lapok nzettsgt. Ez elrulja, (nagyjbl) hny ember ltogatta az oldalt, s melyik lapok a legnpszerbbek az oldalon. Mennyi ideig maradtak az emberek az egyes lapokon? Ebbl kiderl, mennyire ktttk le a ltogat figyelmt. Milyen oldalon voltak az emberek, mieltt a minkre ltogattak? Ez segt kiderteni, a forgalom melyik linkekrl, kereskrl jtt. Mikor ltogattk meg a honlapot, s meddig maradtak rajta? Melyik orszgokbl ltogattak a lapra? Milyen bngszket s opercis rendszert hasznltak a ltogatk?
Honlappts a XXI. szzadban 15. fejezet Forgalomanalzis
204
Az ASP.NET tbb analizl helpert tartalmaz (Analytics.GetGoogleHtml, Analytics.GetYahooHtml s Analytics.GetStstCounterHtml), amik egyszerv teszik az analizlshoz hasznlt JavaScript kdrszletek kezelst. Ahelyett, hogy kitalljuk, hova s hogyan illesszk be a JavaScript kdot, mindssze annyit kell tennnk, hogy hozzadjuk a helpert az oldalhoz. Az egyetlen szksges informci a felhasznlnevnk. ( StatCounter-hez szksgnk lehet tovbbi rtkek megadsra is.) Ebben az eljrsban kszteni fogunk egy layout oldalt, ami a GetGoogleHtml helpert hasznlja. Ha mr regisztrltunk egy msik szolgltatnl, hasznlhatjuk azt is. Megjegyzs: Amikor elksztjk az analzishez a felhasznlnevet, regisztrljuk a webhelynk Url-jt. Ha mindent a sajt gpnkn tesztelnk, nem a vals forgalmat fogjuk analizlni, teht nem tudunk adatokat rgzteni s statisztikkat nzni. Ez az eljrs azonban megmutatja, hogyan adjunk analizl helpert az oldalunkhoz. Amikor publikljuk az oldalt, az lesben fut webhely mr fog informcikat kldeni az analizl szolgltatnak. 1. Ksztsnk fikot a Google Analyticsnl, s rgztsk a felhasznlnevet! 2. Ksztsnk egy Analytics.cshtml layout lapot s rjuk be a kvetkez kdot:
<!DOCTYPE html> <html> <head> <title>Analytics Test</title> </head> <body> <h1>Analytics Test Page</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <div id="footer"> © 2010 MySite </div> @Analytics.GetGoogleHtml("myaccount") </body> </html>
Megjegyzs: Az Analytics helper meghvst muszj a weblap body rszben megtenni (a </body> jel eltt), klnben a bngsz nem fogja futtatni a scriptet. Ha ms szolgltatt hasznlunk, a kvetkez helpereket hasznljuk az elz helyett:
205
(Yahoo) @Analytics.GetYahooHtml("myaccount") (StatCounter) @Analytics.GetStatCounterHtml("project",

"security")
"partition",
3. Cserljk ki a myaccount szveget az els lpsben elksztett fiknvvel. 4. Futtassuk a lapot a bngszben! (A futtats eltt bizonyosodjunk meg arrl, hogy az oldal ki van vlasztva a Files munkaterleten!) 5. A bngszben nzzk meg az oldal forrskdjt! gy lthatjuk az elksztett analizl kdot:
<!DOCTYPE html> <html> <head> <title>Analytics Test</title> </head> <body> <h1>Analytics Test Page</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <div id="footer"> © 2010 MySite </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "googleanalytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try{ var pageTracker = _gat._getTracker("myaccount"); pageTracker._trackPageview(); } catch(err) {} </script> </body> </html>
6. Lpjnk be a Google Analytics weboldalra, s vizsgljuk meg az oldalunk statisztikit! Ha a webhely mr lesben fut, lthatjuk a bejegyzseket a ltogatsokrl.
206
16. fejezet Gyorsttrazs a webhely teljestmnynek nvelshez

Fel tudjuk gyorstani webhelynket azzal, hogy eltroljuk azon adatok rtkeit a gyorsttrban (cacheben), melyek ritkn vltoznak, ellltsuk pedig hossz folyamat. A fejezetbl megtudhatjuk: Hogyan hasznljuk a cache-t az oldal sebessgnek nvelshez?
Ezt az ASP.NET funkcikat ismerhetjk meg a fejezetben: A WebCache helper.
Cache-els a weboldal sebessgnek nvelshez

Minden alkalommal, amikor valaki lekr egy oldalt a webhelynkrl, a webszervernek van nmi dolga a krs teljestshez. Nhny oldalhoz a szervernek (viszonylag) idignyes feladatokat kell elvgeznie, pldul adatbzisokbl kell lekrdezseket vgrehajtania. Mg ha egy-egy ilyen feladat nem is tart sokig, nagy forgalm webhely esetn a rengeteg egyedi krs kihathat az egsz webhely teljestmnyre. A webhely teljestmnye javthat a gyorsttr hasznlatval. Ha ugyanazt az adatot tbben lekrik, s azt nem kell vltoztatni a felhasznlk s az id fggvnyben, elg csak egyszer legenerlni, majd eltrolni a cache-ben. Ha valaki jra lekri az adott informcit, elg csak a gyorsttrbl jrakldeni azt. A ritkn vltoz informcikat ltalban cache-eljk. A gyorsttrazott informcit eltroljuk a webszerver memrijban. A trols ideje msodpercektl napokig llthat. Amikor az adott id letelt, az informci automatikusan trldik a cachebl. Megjegyzs: A gyorst trazott bejegyzsek nem csak az id lejrta miatt trldhetnek, hanem akkor is, ha pldul a szervernek kevs szabad memrija marad, melyet a cache trlsvel tud orvosolni. Kpzeljk el, hogy a weboldalunkon megjelentjk a jelenlegi hmrskletet s idjrst. Ezen tpus informcikrt valsznleg egy kls szolgltat fel kldnk krst. Mivel ezek az informcik nem vltoznak gyakran (pldul kt rs idtartamon bell) s a kls hvsok svszlessget s idt ignyelnek, rdemes ezt az informcit gyorsttrazni. ASP.Net tartalmazza a WebCache helpert, ami egyszerv teszi a gyorst tr hozzadst az oldalhoz, s az adatok cache-elst. Ebben az eljrsban ksztnk egy oldalt, ami gyorst trazza a jelenlegi idt. Ez nem egy val vilgban mkd plda, hiszen gyakran vltozik s nem bonyolult a kiszmtsa. Azonban egy j mdja, hogy bemutassuk a gyorst trazst mkds kzben. 1. Hozzunk ltre egy WebCache.cshtml nev lapot a webhelynkn. 2. rjuk meg a kvetkez kdot:
@{ var cacheItemKey = "Time"; var cacheHit = true; var time = WebCache.Get(cacheItemKey); if (time == null) { cacheHit = false; } if (cacheHit == false) {
Honlappts a XXI. szzadban 16. fejezet Gyorsttrazs a webhely teljestmnynek nvelshez
207
time = @DateTime.Now; WebCache.Set(cacheItemKey, time, 1, false); } } <!DOCTYPE html> <html> <head> <title>WebCache Helper Sample</title> </head> <body> <div> @if (cacheHit) { @:Found the time data in the cache. } else { @:Did not find the time data in the cache. } </div> <div> This page was cached at @time. </div> </body> </html>
Amikor adatokat cache-elnk, egy, a webhelyen egyedlll nv hasznlatval tesszk be a gyorst trba. Ebben az esetben mi a Time nev cache bejegyzst hasznljuk. Ezt a cacheItemKey mutatja a pldban. A kd elszr a Time cache bejegyzst olvassa. Ha egy rtket ad vissza (teht a cache rtke nem nulla), a kd csak belltja a time vltozt a cache-bl kiolvasott rtkre. Azonban, ha a cache bejegyzs nem ad vissza rtket (teht nulla), a kd belltja az id rtket, hozzadja a gyorsttrhoz s belltja a lejrati idt egy percre. Ha az oldalt nem krik egy percen bell, a cache bejegyzs trldik. (A gyorsttrazott elemek alaprtelmezett lejrati ideje 20 perc.) Ez a kd a mindig kvetend pldt mutatja, ha adatokat gyorsttrazunk. Mieltt valamit betesznk a cache-be, mindig ellenrizzk, hogy a WebCache.Get metdus nulla rtket ade. Tartsuk szem eltt, hogy a gyorsttr bejegyzs lejrhat, vagy brmilyen ms okbl eltvoltsra kerlhet, teht nem garantlhat, hogy minden bejegyzs a cacheben van. 3. Futtassuk a WebCache.cshtml oldalt a bngszben. ( A futtats eltt bizonyosodjunk meg arrl, hogy az oldal ki van jellve a Files munkaterleten.) Az oldal els lekrsnl nincsenek adatok a gyorsttrban, ezrt a kd hozzadja a time rtket a cache-hez.
4. Frisstsk a WebCache.cshtml oldalt a bngszben. Ezttal az id rtke mr gyorsttrazva van. Vegyk szre, hogy az id nem vltozott az elz ltogatsunk ta.
208
5. Vrjunk egy percet a cache kirlsig, s utna frisstsk az oldalt. Az oldal megint jelzi, hogy a time rtkt nem tallja a gyorsttrban, s a frisstett idt adja a cache-hez.
209
17. fejezet Biztonsgi elemek s felhasznli fikok hozzadsa

Ebben a fejezetben megtanulhatjuk, hogyan korltozhatjuk a hozzfrst webhelynkhz gy, hogy egyes oldalak csak bejelentkezett felhasznlk szmra legyenek elrhetek. (Azt is megtudhatjuk, hogyan ksztsnk olyan oldalt, amihez akrki hozzfrhet.) Az tmutatbl megtudhatjuk: Hogyan hozzunk ltre olyan weboldalt, amelyen regisztrcis s bejelentkez oldal van, gy korltozhatjuk az egyes oldalakhoz val hozzfrst? Hogyan hozzunk ltre nyilvnos vagy privt oldalakat? Hogyan hasznljuk a CAPTCHA-t, hogy megakadlyozzuk az automatizlt programokat (botokat) a felhasznli fikok ltrehozsban?
Ebben a fejezetben bemutatott ASP.NET funkcik: A WebSecurityk helper. A SimpleMembership helper. A ReCaptcha helper.
Bevezets a felhasznli fikokba

A weboldalunkat bellthatjuk gy, hogy a felhasznlk be tudnak jelentkezni teht az oldal tmogatja a felhasznli fikokat. Ez tbb okbl is hasznos lehet, pldul az oldalunkon lehetnek olyan funkcik, amiket csak a regisztrlt felhasznlk rhetnek el . Egyes esetekben szksg van a felhasznlk azonostsrea, hogy visszajelzst kldjenek vagy hozzszlhassanak valamihez. Annak ellenre, hogy a weboldal tmogatja a felhasznlkat, nem felttlenl szksges, hogy belpjenek, mieltt hasznlni tudjk az oldal egyes rszeit. A nem bejelentkezett felhasznlk anonymus (ismeretlen) felhasznlknt jelennek meg. A felhasznlk regisztrlhatnak, majd bejelentkezhetnek a weboldalra. A weboldalaknak szksgk van egy felhasznlnvre (ltalban egy e-mail cm) s egy jelszra, hogy megerstst kapjunk arrl, hogy a felhasznl az, akinek lltja magt. A bejelentkezs s a megersts folyamatt azonostsnak nevezzk. A WebMatrixban hasznlhatjuk a Starter Site sablont, hogy ltrehozzunk egy weboldalt, ami a kvetkezket tartalmazza: Egy adatbzist, ami a felhasznli fikok felhasznlnevt s jelszavait trolja. Egy regisztrcis oldalt, ahol az j felhasznlk regisztrlhatnak. Bejelentkez s kijelentkez oldalt. Egy jelsz visszanyer s visszallt oldalt.
Megjegyzs: Annak ellenre, hogy a Start Site minta automatikusan ltrehozza nnek ezeket az oldalakat, ebben a fejezetben mi egy egyszerstett vltozatot fogunk ltrehozni annak rdekben, hogy az ASP.NET biztonsgi s felhasznli belltsainak alapjait megismerhessk.
Weboldal ltrehozsa regisztrcis s bejelentkez oldalakkal

1. Indtsuk el a WebMatrixot! 2. A Quick Start oldalon vlasszuk a Site From Tamplate-et! 3. Vlasszuk a Starter Site-ot, majd kattintsunk a OK gombra! Honlappts a XXI. szzadban 17. fejezet Biztonsgi elemek s felhasznli fikok hozzadsa
210
4. A baloldali panelon kattintsunk a Files workspace vlasztgombra! 5. A weboldal gykrmappjban nyissuk meg az _AppStart.cshtml fjlt - ez egy klnleges fjl, ami ltalban a teljes weboldalra vonatkoz belltsokat tartalmazza. Tartalmaz nhny parancsot, amik a // karakterekkel megjegyzsknt viselkednek (gy nem futnak le):
@{ WebSecurity.InitializeDatabaseConnection("StarterSite", "UserProfile", "UserId", "Email", true); // WebMail.SmtpServer = "mailserver.example.com"; // WebMail.EnableSsl = true; // WebMail.UserName = "username@example.com"; // WebMail.Password = "your-password"; // WebMail.From = "your-name-here@example.com"; }
Hogy e-mailt tudjunk kldeni, hasznlhatjuk a WebMail helpert. Ehhez viszont szksg lesz egy SMTP szerverhez val hozzfrsre, ahogyan azt a 12. fejezetben megtanulhattuk. Abban a fejezetben megtudhattuk, hogyan lltsunk be szmos SMTP belltst egy oldalon. Ebben a fejezetben ugyanezeket fogjuk hasznlni, de most egy kzponti fjlban fogjuk a belltsokat trolni, gy nem kell minden egyes oldalon kln elvgeznnk azokat. (Egy regisztrcis adatbzis fellltshoz nem kell felttlenl SMTP szervert konfigurlnunk, erre csak akkor van szksg, ha megerst e-mailt szeretnnk kldeni a regisztrcihoz, illetve e-mailben szeretnnk elkldeni az elfelejtetett jelszavakat. 6. Tvoltsuk el a // karaktereket mindegyik megjegyzs elejrl 7. Mdostjuk a kvetkez e-mail-lel kapcsolatos belltsokat a kdban: A WebMail.SmtpServert a rendelkezsre ll SMTP szerver nevre lltsuk be! A WebMail.EnableSsl-t hagyjuk true belltson! Ez a bellts teszi biztonsgossg az SMTP szervernek kldtt azonost adatokat azltal, hogy kdolja ket. A WebMail.UserName-et lltsuk be az SMTP szervernkhz tartoz felhasznlnevnkre! A WebMail.Password-t az SMTP szervernkhz tartoz jelszra lltsuk be! A WebMail.From-ot lltsuk a sajt e-mail cmnkre! Ez az e-mail cm az, amirl elkldjk az levelet! 8. Mentsk s zrjuk be az _AppStart.cshtml-t! 9. Nyissuk meg a Default.cshtml fjlt!
Honlappts a XXI. szzadban 17. fejezet Biztonsgi elemek s felhasznli fikok hozzadsa
211
10. Futtassuk a Default.cshtml oldalt egy bngszben
11. Az oldal jobb fels sarkban kattintsunk a Register linkre! 12. rjunk be egy felhasznlnevet s egy jelszt, majd kattintsunk a Register gombra!
212
Amikor ltrehoztuk a weboldalt a Starter Site sablonbl, egy StarterSite.sdf nev adatbzis is ltrejtt az oldal App_Data mappjban. A regisztrci sorn a felhasznl adatai hozzaddtak az adatbzishoz. A regisztrci befejezshez a rendszer elkld egy levelet a megadott e-mail cmre.
13. Nyissuk meg a levezprogramunkat s keressk meg a levelet, ami tartalmazza a megerst kdot, s egy hiperhivatkozst az oldalra! 14. Kattintsunk a hiperhivatkozsra, hogy aktivljuk a felhasznli fikunkat! A hivatkozs egy regisztrcit megerst oldalt nyit meg.
213
15. Kattintsunk a Login linkre, majd lpjnk be a regisztrlt felhasznlnvve! Miutn belptnk, a Login s Register linkek helyett a Logout link jelenik meg.
16. Kattintsunk az About linkre! Az About.cshtml oldal jelenik meg. Most, hogy bejelentkeztnk, az oldal tetejn megjelent a Welcome Joe zenet s a Logout hivatkozs. Megjegyzs: Alapbelltsokkal az ASP.NET weboldalak egyszer szvegknt (emberek szmra olvashat szveg) kldik el a szervernek a hitelest adatokat. Egy mkd oldalhoz biztonsgos HTTP-t (https://, ms nven secure sickets layer vagy SSL) rdemes hasznlni azrt, hogy a szerverrel kzlt bizalmas informcikat kdolja. A bizalmas informcikat kdolhatjuk a WebMail.EnableSsl=true belltsval, ahogy az elz pldban. Az SSL-lel kapcsolatban tovbbi informcirt olvassuk el a kvetekez angol nyelv oldalt: How To: Protect Forms Authentication in ASP.NET 2.0.
Csak felhasznlk szmra elrhet oldal ltrehozsa

Kezdetben akrki bngszheti a webhely akrmelyik oldalt. Lehetsges, hogy szeretnnk olyan oldalakat ltrehozni, melyeket csak a bejelentkezett falhasznlk (tagok) rhetnek el. Az ASP.NET lehetv teszi, hogy gy konfigurljuk a weboldalakat, hogy csak a bejelentkezett felhasznlk rhetik el. ltalban ha ismeretlen felhasznlk prbljk elrni az oldalt, tovbbtjuk ket a bejelentkez oldalra. Ebben az eljrsban korltozni fogjuk az About oldal (About.cshtml) hozzfrst, gy csak bejelentkezett felhasznlk rhetik el.
214
1. Nyissuk meg az About.cshtml fjlt! Ez egy tartalmi oldal, ami a _SiteLayout.cshtml layout oldal szerint jelenik meg. (Tbbet az elrendezsi oldalakrl a 4. fejezet Egysges megjelens kialaktsa fejezetben tudhatunk meg) 2. Az About.cshtml oldalban lv kdot cserljk le a kvetkezvel:
@if (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); } @{ Layout = "/_SiteLayout.cshtml"; Page.Title = "About My Site"; } <p> This web page was built using ASP.NET Web Pages. For more information, visit the ASP.NET home page at <a href="http://www.asp.net" target="_blank">http://www.asp.net</a> </p>
Ez a kd teszteli a WebSecurity objektum IsAuthenticated tulajdonsgt, ami igaz vlaszt ad vissza, ha a felhasznl be van jelentkezve. Ellenkez esetben a kd meghvja a Respone.Redict-et s a felhasznlt az Account mappban lv Login.cshtml oldalra kldi. Megjegyzs: A pldban szerepl URL-ek (mint az ~/Account/Login) nem tartalmazzk a .cshtml kiterjesztst. Az ASP.NET krnyezetben nem szksges a kiterjeszts azokban az URL-ekben, amik .cshtml oldalra mutatnak. Tovbbi informcirt lsd: 19. fejezet A Site-Wide viselkeds testreszabsa. 3. Futtassuk a Default.cshtml-t egy bngszben! Ha be vagyunk jelentkezve, kattintsunk a Logout linkre! 4. Kattintsunk az About linkre! Most tovbbtott minket a Login.cshtml oldalra, mert nem vagyunk bejelentkezve. Ahhoz, hogy tbb oldal hozzfrst is korltozzuk, hozzadhatjuk minden egyes oldalhoz a biztonsgi ellenrzst, vagy ltrehozhatunk egy _SiteLayout-hoz hasonl minta oldalt, ami tartalmazza a biztonsgi ellenrzst. gy a biztonsgi ellenrzssel elltott layout oldalra hivatkoznnk a tbbi oldalrl ugyangy, ahogy most a Default.cshtml hivatkozik a _SiteLayout-ra.
Csoportok biztonsgi belltsai (szerepek)

Ha sok tagja van az oldalunknak, knyelmetlen minden egyes felhasznl engedlyeit kln ellenrizni, mieltt megnzhetnek egy oldalt. Helyette ltrehozhatunk csoportokat vagy szerepeket (roles), amik az egyes felhasznlkhoz tartoznak. Ezek utn ellenrizhetjk a jogosultsgokat a szerepek alapjn. Ebben a fejezetben meg fogjuk tanulni, hogyan ksztsnk egy rendszergazda szerepet, s hogyan hozzunk ltre olyan oldalt, amihez csak ebben a szerepben (csoportban) lv felhasznlk frnek hozz. Kezdsknt hozz kell adnunk a csoport informciit a felhasznli fikok adatbzishoz. 1. A WebMatrixban kattintsunk a Databases workspace seletor-ra! A baloldali panelen nyissuk ki a SarterSite.sdf-ot, azon bell a Tables-t, majd dupla kattintssal nyissuk meg a webpages_Role tblt!
215
2. Adjunk hozz egy admin szerepet! A RoleId mez automatikusan kitltdik. (Ez az elsdleges kulcs, s egy azonost meznek lett belltva, ahogya a 6. fejezetben tanultuk.) Figyeljk meg, hogy mi a RoleId mez rtke! (Ha ez az els, amit megadtunk, akkor 1 lesz.)
3. Zrjuk be a webpages_Roles tblt! 4. Nyissuk meg a UserProfiles tblt! 5. Figyeljk meg, hogy egy vagy tbb felhasznl UserId rtke mr a tblban van, majd zrjuk be a tblt!
6. Nyissuk meg a webpages_UserInRoles tblt, s rjunk be a tblba egy UserID s egy RoleID rtket! Pldul ahhoz, hogy a 3-as felhasznlt (Keith a fenti pldban) admin szerepbe tegyk, a kvetkez adatokat adjuk meg:
216
7. Zrjuk be a webpages_UserInRoles tblt! Most, hogy meghatroztunk egy szerepet, bellthatunk egy oldalt, amihez csak azok a felhasznlk frhetnek hozz, akik a megfelel szerepben vannak. 8. A webhely gykrmappjban hozzunk ltre egy AdminError.cshtml nev oldalt s cserljk ki a tartalmt a kvetkezkre! (Azok a felhasznlk, akiknek nincs joga az oldal megnyitshoz, ide kerlnek).
@{ Layout = "/_SiteLayout.cshtml"; PageData["Title"] = "Admin-only Error"; } <p>You must log in as an admin to access that page.</p>
9. A weboldal gykrmappjban hozzunk ltre egy AdminOnly.cshtml nev oldalt, s rjuk be a kvetkez kdot:
@{ Layout = "/_SiteLayout.cshtml"; PageData["Title"] = "Administrators only"; } @if ( Roles.IsUserInRole("admin")) { <span> Welcome <b>@WebSecurity.CurrentUserName</b>! </span> } else { Response.Redirect("/AdminError"); }
A Roles.IsUserInRole metdus igaz rtket ad vissza, ha a jelenlegi felhasznl az admin csoport tagja. 10. Nyissuk meg a Default.cshtml-t egy bngszben, de ne lpjnk be! (Ha be vagyunk jelentkezve, lpjnk ki!) 11. A bngsz cmsorban az URL-ben vltoztassuk meg a Default-ot AdminOnly-ra. (Ms szval tltsk be: az AdminOnly.cshtml fjlt!) tirnyt minket az AdminError.cshtml oldalra, mert jelenleg nem admin jog felhasznlval vagyunk belpve. 12. Lpjnk vissza a Default.cshtml oldalra, s lpjnk be egy admin szerep felhasznlval! 13. Nyissuk meg az AdminOnly.cshtml oldalt! Ebben az esetben ltni fogjuk az oldalt.
Jelszt megvltoztat oldal ltrehozsa

Lehetv tehetjk a felhasznlk szmra jelszavaik megvltoztatst egy jelsz-megvltoztat oldal ltrehozsval. Ebben a pldban csak alapszinten foglalkozunk a problmval. (A Starter Site sablonban tallhat ChangePassword.cshtml fjl kifinomultabb hibaszrssel rendelkezik.)
217
1. A weboldal Account mappjban hozzunk ltre egy ChangePassword2.cshtml-t! 2. A tartalmt cserljk le a kvetkezkre:
@{ Layout = "/_SiteLayout.cshtml"; PageData["Title"] = "Change Password"; var message = ""; if(IsPost) { string username = Request["username"]; string newPassword = Request["newPassword"]; string oldPassword = Request["oldPassword"]; if(WebSecurity.ChangePassword(username, oldPassword, newPassword)) { message="Password changed successfully!"; } else { message="Password could not be changed."; } } } <style> .message {font-weight:bold; color:red; margin:10px;} </style> <form method="post" action=""> Username: <input type="text" name="username" value="@WebSecurity.CurrentUserName" /> <br/> Old Password: <input type="password" name="oldPassword" value="" /> <br/> New Password: <input type="password" name="newPassword" value="" /> <br/><br/> <input type="submit" value="Change Password" /> <div class="message">@message</div> <div><a href="Default.cshtml">Return to home page</a></div> </form>
Ez az oldal olyan szvegdobozokat tartalmaz, amik lehetv teszik a felhasznlnak, hogy berja a felhasznlnevt, jelszavt s az j jelszavt. Ebben a kdban meghvjuk a WebSecurity helper ChangePassword metdust, s a felhasznltl kapott adatokat kzvettjk neki.
218
3. Nyissuk meg az oldalt egy bngszben. Ha mr be vagyunk jelentkezve, a felhasznlnevnk megjelenik az oldalon. Prbljuk ki, hogy rosszul adjuk meg a rgi jelszavunkat! Ha rossz jelszt adunk meg, a
WebSecurity.ChangePassword
meghvsa sikertelen, s megjelenik egy zenet.
4. Adjuk meg az rvnyes adatokat, s prbljuk ismt megvltoztatni a jelszavunkat.
j jelsz ltrehozsnak lehetsge

Ha a felhasznlk elfelejtik a jelszavukat, lehetv tehetjk, hogy egy jat ksztsenek. (Itt nem kell megadni a rgi jelszt.) Ahhoz, hogy a felhasznl egy j jelszt kapjon, a WebSecurity helper GeneratePasswordResetToken folyamatt hasznljuk, s ez hoz ltre egy tokent. (A token egy kriptogrfiailag biztonsgos string, amit elkldnk a felhasznlnak, s egyedi azonostknt szolgl olyan clokra, mint a jelsz visszalltsa.) Ezt az eljrs gyakran hasznljk a gyakorlatban elksztjk a kulcsot, elkldjk a felhasznlnak, majd hivatkozunk arra az oldalra, amely kiolvassa a tokent, s lehetv teszi az j jelsz megadst. A felhasznl postaldjba hasonl link rkezik: http://localhost:36916/Account/PasswordReset2?PasswordResetToken=08HZGH0ALZ3CGz3 A link vgn tallhat vletlenszer karakterek sorozata a token. (A Starter Site sablon ForgotPassword.cshtml fjlja ennl nmileg komplexebb.)
1. A webhely Account mappjban ksztsnk egy j ForgotPassword2.cshtml nev oldalt! 2. A tartalmt cserljk le a kvetkezkre:
@{ Layout = "/_SiteLayout.cshtml"; PageData["Title"] = "Forgot your password?"; var message = ""; var username = ""; if (WebMail.SmtpServer.IsEmpty() ){ // The default SMTP configuration occurs in _start.cshtml message = "Please configure the SMTP server."; }
219
if(IsPost) { username = Request["username"]; var resetToken = WebSecurity.GeneratePasswordResetToken(username); var portPart = ":" + Request.Url.Port; var confirmationUrl = Request.Url.Scheme + "://" + Request.Url.Host + portPart + VirtualPathUtility.ToAbsolute("/Account/PasswordReset2?PasswordResetT oken=" + Server.UrlEncode(resetToken)); WebMail.Send( to: username, subject: "Password Reset", body: @"Your reset token is:<br/><br/>" + resetToken + @"<br/><br/>Visit <a href=""" + confirmationUrl + @""">" + confirmationUrl + @"</a> to activate the new password." ); message = "An email has been sent to " + username + " with a password reset link."; } } <style> .message {font-weight:bold; color:red; margin:10px;} </style> <form method="post" action=""> @if(!message.IsEmpty()) { <div class="error">@message</div> } else{ <div> Enter your email address: <input type="text" name="username" /> <br/> <br/><br/> <input type="submit" value="Get New Password" /> </div> } </form>
Az oldal tartalmazza a szvegdobozt, amibe a felhasznl e-mail cmt kell berni. Ha a felhasznl elkldi az rlapot, elszr meg kell gyzdnnk, hogy az SMTP belltsokat megtettk, hiszen az oldal clja, hogy kldjn egy e-mail zenetet. Az oldal lnyege a jelsz-visszallt token, amit gy ksztnk, s a felhasznl ltal megadott e-mail cmre (username) elkldjk.
string resetToken = WebSecurity.GeneratePasswordResetToken(username);
A kd tovbbi rsze az e-mail elkldsre szolgl. Nagy rsze a Register.cshtml fjlbl szrmazik, amely a sablon kivlasztsakor jtt ltre.
220
Az e-mailt a WebMail helper Send parancsval kldjk el. Az e-mail trzse szvegek s HTML elemeket tartalmaz vltozk s stringek sszefzsvel jn ltre. Amikor a felhasznl megkapja, az e-mail trzse krlbell gy fog kinzni:
3. Az Account mappban hozzunk ltre mg egy j oldalt PasswordReset2.cshtml nven, s a tartalmt cserljk le a kvetkezre:
@{ Layout = "/_SiteLayout.cshtml"; PageData["Title"] = "Password Reset"; var message = ""; var passwordResetToken = ""; if(IsPost) { var newPassword = Request["newPassword"]; var confirmPassword = Request["confirmPassword"]; passwordResetToken = Request["passwordResetToken"]; if( !newPassword.IsEmpty() && newPassword == confirmPassword && WebSecurity.ResetPassword(passwordResetToken, newPassword)) { message = "Password changed!"; } else { message = "Password could not be reset."; } } } <style> .message {font-weight:bold; color:red; margin:10px;} </style> <div class="message">@message</div> <form method="post" action=""> Enter your new password: <input type="password" name="newPassword" /> <br/> Confirm new password: <input type="password" name="confirmPassword" /><br/> <br/> <input type="submit" value="Submit"/> </form>
Ez az oldal nylik meg, ha a felhasznl az e-mailben lv linkre kattint, hogy megvltoztassa a jelszavt. A trzs tartalmaz szvegdobozokat, hogy a felhasznl megadhassa a jelszavt s megerstse azt. A jelsz tokent az URL-bl tudhatjuk meg a *PasswordResetToken+ olvassval. Emlkezznk, hogy az URL valahogy gy fog kinzni! http://localhost:36916/Account/PasswordReset2?PasswordResetToken=08HZGH0ALZ3CGz3 Amint megvan a token, meghvjuk a WebSecurity helper ResetPassword folyamatt az j jelszval s a tokennel. Ha a token rvnyes, akkor a segd frissti annak felhasznlnak a
221
jelszavt, aki az e-mailt kapta. Ha a jelsz-visszallts sikeres, a ResetPassword metdus true rtket ad vissza. Ebben a pldban a ResetPassword meghvst kombinltuk nhny rvnyessgi vizsglattal a && (logikai S) opertorral. A logika, hogy a jelszvltoztats sikeres, ha: a newPassword szvegdoboz nem res (a ! opertor jelentse not nem), s a newPassword s a confirmPassword mez rtke megegyezik, s a ResetPassword folyamat sikeres volt.
4. Nyissuk meg a ForgotPassword2.cshtml-t egy bngszben!
5. rjuk be az e-mail cmnket s kattintsunk a Get New Password gombra! Az oldal elkld egy emailt. (Ez nhny pillanatot vehet ignybe.)
6. Ellenrizzk a leveleinket, s keressnk egy Password Reset trgy levelet! 7. Az e-mailben kattintsunk a linkre! A PasswordReset2.cshtml oldalra jutunk. Adjunk meg egy j jelszt s kattintsunk a Submit gombra!
Automatizlt programok csatlakozsnak megakadlyozsa

A bejelentkez kperny nem fogja meglltani az automatizlt (nha web robot-okknt vagy botokknt emltett) programokat abban, hogy regisztrljanak a weboldalra. (A botok csatlakozsnak clja ltalban az, hogy az eladsra tett termkek linkjt megszerezzk.) A CAPTCHA teszt hasznlatval kiderthetjk, hogy a felhasznl valdi szemly-e, nem csak egy szmtgpes program. (A CAPTCHA a Completely Automated Public Turing teszt rvidtse, aminek az a feladata, hogy megklnbztesse a szmtgpeket s az embereket.) Az ASP.NET oldalakon hasznlhatjuk a ReCaptcha helpert, hogy ksztsen egy CAPTCHA tesztet a reCAPTCHA szolgltats (http://recaptcha.net) segtsgvel. A ReCaptcha helper megjelent egy kpet kt elvlasztott szval, amiket a felhasznlknak helyesen le kell rniuk, mieltt az oldal rvnyes lesz. A felhasznl vlaszt a ReCaptcha.Net szolgltats ellenrzi. Honlappts a XXI. szzadban 17. fejezet Biztonsgi elemek s felhasznli fikok hozzadsa
222
1. Regisztrljuk a weboldalt a ReCaptcha.Net (http://recaptcha.net) oldalon! Amikor kszen vagyunk a regisztrcival, kapunk egy nyilvnos s egy privt kulcsot. 2. Az Account mappban nyissuk meg a Register.cshtml fjlt! 3. Trljk a // karaktereket a captchaMessage vltoz ell! 4. Cserljk le a PRIVATE_KEY stringet a sajt privt kulcsunkkal! 5. Trljk a // karaktereket abbl a sorbl, ami tartalmazza a ReCaptcha.Validate meghvst! A kvetkez plda a ksz kdot mutatja a kulcs helyvel.
// Validate the user's response if (!ReCaptcha.Validate("user-key-here")) { captchaMessage = "Response was not correct"; isValid = false; }
6. A Register.cshtml oldal aljn cserljk ki a PUBLIC_KEY stringet a nyilvnos kulcsunkkal! 7. Trljk a // karaktereket abbl a sorbl, ami tartalmazza a ReCaptcha meghvst! A albbi plda a ksz kdot mutatja a kulcs helyvel.
@ReCaptcha.GetHtml("user-key-here", theme: "white")
A kvetkez illusztrci a ksz regisztrcis oldalt mutatja. 8. Nyissuk meg a Default.cshtml oldalt egy bngszben! Ha be vagyunk jelentkezve, kattintsunk a Logout llinkre! 9. Kattintsunk a Register linkre s teszteljk a regisztrcit a CAPTCHA teszt hasznlatval!
223
Megjegyzs: Ha a szmtgpnk egy olyan tartomny tagja, ami proxy szervert hasznl, lehet, hogy konfigurlnunk kell a Web.config fjl defaultproxy paramtert. Az albbi plda egy olyan Web.config fjlt mutat, ahol a defaultproxy gy van konfigurlva, hogy a reCAPTCHA szolgltats mkdik.
<?xml version="1.0" encoding="utf-8"?> <configuration> <system.net> <defaultProxy> <proxy usesystemdefault = "false" proxyaddress="http://myProxy.MyDomain.com" bypassonlocal="true" autoDetect="False" /> </defaultProxy> </system.net> </configuration>
224
18. fejezet Bevezets a hibakeressbe

A hibakeress a hibk megllaptsnak s kijavtsnak folyamata a kdlapunkon. Ez a fejezet megmutat nhny eszkzt s technikt, hogyan hasznljuk a hibakeresst s elemezzk webhelynket. A fejezetbl megtudhatjuk: Hogyan jelentsnk meg informcikat, melyek elsegtik az oldal elemzst s a hibakeresst? Hogyan hasznljuk a hibakeres eszkzket, mint az Internet Explorer Developer Toolst s a Firebugot a webhely elemzshez?
A fejezetben bemutatott ASP.NET funkcik s WebMatrix (valamint egyb) eszkzk: A ServerInfo helper. Az ObjectInfo helper. Az Internet Explorer Developer Tools s a Firebug hibakeres eszkzk.
Egy fontos szempont a hibk s a problmk elhrtsban, hogy elszr el kell kerlni ket. Ezt gy tehetjk meg, hogy azokat a rszeit a kdnak, amelyek a leginkbb hibt szoktak okozni, behelyezzk egy try/catch blokkba. Tovbbi informcikrt olvassuk el 3. fejezetben a hibk kezelsrl szl rszt!
A ServerInfo helper hasznlata a szerverinformcik megjelentshez

A ServerInfo helper egy olyan diagnosztikai eszkz, amely ttekintst nyjt a webszerver krnyezetrl. Megmutatja emellett az oldal lehvsakor elkldtt HTML krseket is. A ServerInfo helper kijelzi az aktulis felhasznl azonostjt, a bngsz tpust, amirl benyjtotta a krelmet, s gy tovbb. Ezen informcik birtokban knnyebben kivdhetjk a gyakori problmkat. 1. Ksztsnk egy ServerInfo.cshtml nev weblapot. 2. Az oldal vgn, mieltt bezrnnk a </body> cmkvel, adjuk hozz az @ServerInfo.GetHtml() kdot:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> @ServerInfo.GetHtml() </body> </html>
Az oldalon brhol elhelyezhetjk a ServerInfo kdot. Azonban ha a kd vghez fzzk, nem keveredik az oldal tbbi rszvel, gy kdunk ttekinthet marad. Megjegyzs: Mieltt les zembe lltjuk a webhelyet, trljk ki az sszes diagnosztikval kapcsolatos kdot, belertve a ServerInfo helpert. Nem szeretnnk, ha a weboldal ltogati brmilyen informcit lthatnnak a szervernk nevrl, felhasznlnevekrl, szerveren lv elrsi utakrl s hasonl rszletekrl, mivel ezek hasznosak lehetnek rossz szndk emberek szmra. 3. Mentsk el az oldalt, majd futtassuk a bngszben! (Futtats eltt gyeljnk arra, hogy az oldal ki legyen vlasztva a Files munkaterleten!) Honlappts a XXI. szzadban 18. fejezet Bevezets a hibakeressbe
225
A ServerInfo helper ngy informcis tblt jelez ki az oldalon: Server Configuration. Informcikat ad a futtat webszerverrl, s tartalmazza a szmtgp nevt, az ppen fut ASP.NET verzijt, a domain nevt, valamint a szerveridt. ASP.NET Server Variables. Informcikat ad szmos HTTP protokoll rszleteirl (melyeket HTTP vltozknak neveznk) s azokrl az rtkekrl, amelyek szerepelnek minden weboldal lekrsben. HTTP Runtime Information. Rszleteket kzl a webhelyet futtat Microsoft .NET Framework verzijrl, , az elrsi tat, rszleteket a gyorsttrrl, s gy tovbb. ( Ahogy az 3. fejezetben megtanultuk, az ASP.NET weboldalak ltal hasznlt Razor szintaxis a Microsoft ASP.NET webszerver technolgijra plt, amely maga is egy .NET Framework nev kiterjedt szoftverfejleszt knyvtrra pl.) Environment Variables. Egy listt ad a webszerver sszes krnyezeti vltozjrl s azok rtkeikrl.
A szerver teljes lersa s a krelmi informci mr tlmutatnak ezen a fejezeten, de lthatjuk, hogy a ServerInfo helper szmos diagnosztikai informcit ad neknk. Tovbbi informcikrt a ServerInfo ltal visszadobott rtkekrl ltogassunk el a Recognized Enviromnent Variables oldalra a Microsoft TechNet weboldalon s az IIS Server Variables oldalra az MSDN weboldalon!
Oldal rtkek kijelzse kifejezsek begyazsval

Kdunk mkdst egy msik eljrssal is vizsglhatjuk. Mint tudjuk, egy vltoz rtkt kzvetlenl is kijelezhetjk, ha hozzadunk az oldalhoz egy ehhez hasonlt: @myVariable or @(subTotal * 12). A hibakeresshez jelentsk meg a vltozkat a kd kritikus rszeinl! Ez lehetv teszi, hogy lssuk a fontos vltozk rtkt, illetve a szmtsok eredmnyeit, mikor fut az oldal. Amikor vgeztnk a hibakeresssel, eltvolthatjuk a kifejezseket vagy megjegyzsbe tehetjk ket. Ez az eljrs bemutatja egy tipikus mdjt, hogy hogyan hasznljuk a begyazst a hibakeress elsegtshez. 1. Ksztsnk egy j, OutputExpression.cshtml nev WebMatrix lapot! 2. Cserljk ki az oldal tartalmt a kvetkezre:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> @{ var weekday = DateTime.Now.DayOfWeek; // As a test, add 1 day to the current weekday. if(weekday.ToString() != "Saturday") {
Honlappts a XXI. szzadban 18. fejezet Bevezets a hibakeressbe
226
// If weekday is not Saturday, simply add one day. weekday = weekday + 1; } else { // If weekday is Saturday, reset the day to 0, or Sunday. weekday = 0; } // Convert weekday to a string value for the switch statement. var weekdayText = weekday.ToString(); var greeting = ""; switch(weekdayText) { case "Monday": greeting = "Ok, it's a marvelous Monday."; break; case "Tuesday": greeting = "It's a tremendous Tuesday."; break; case "Wednesday": greeting = "Wild Wednesday is here!"; break; case "Thursday": greeting = "All right, it's thrifty Thursday."; break; case "Friday": greeting = "It's finally Friday!"; break; case "Saturday": greeting = "Another slow Saturday is here."; break; case "Sunday": greeting = "The best day of all: serene Sunday."; break; default: break; } } <h2>@greeting</h2> </body> </html>
Ez a plda egy switch utastst hasznl annak rdekben, hogy ellenrizze a weekday rtkt, s ezutn megjelentsen egy zenetet, ami aszerint vltozik, hogy melyik napja az a htnek. A pldban az if tmb az els kd blokkban nknyesen megvltoztatja a ht napjt, egyet hozzadva a ht jelenlegi napjnak rtkhez. me egy hiba, szemlltets cljbl. 3. Mentsk el az oldalt, s futtassuk egy bngszben! Az oldalon az zenet a ht nem megfelel napjval fog megjelenni. A ht brmely napja is legyen aktulis, az egy nappal ksbbi zenetet fogjuk ltni. Br ebben az esetben tudjuk, hogy mirt a hibs zenet jelent meg (mivel a kd szndkosan a nem megfelel nap rtkt lltja be), a valsgban sokszor nehz megllaptani, hogy hol van hiba a kdban. A hibakeresshez ki kell tallnunk, mi is trtnik a kulcsobjektumok rtkvel s a vltozkkal, esetnkben a ht napjaival. Honlappts a XXI. szzadban 18. fejezet Bevezets a hibakeressbe
227
4. Adjunk hozz egy kifejezst a @weekday beillesztsvel kt, megjegyzsekkel jellt helyre a kdban. Ezek a kifejezsek ki fogjk jelezni a vltozk rtkeit ezeken a pontokon.
var weekday = DateTime.Now.DayOfWeek; // Display the initial value of weekday. @weekday // As a test, add 1 day to the current weekday. if(weekday.ToString() != "Saturday") { // If weekday is not Saturday, simply add one day. weekday = weekday + 1; } else { // If weekday is Saturday, reset the day to 0, or Sunday. weekday = 0; } // Display the updated test value of weekday. @weekday // Convert weekday to a string value for the switch statement. var weekdayText = weekday.ToString();
5. Mentsk el az oldalt, majd futtassuk egy bngszben! Az oldal elszr a ht valdi napjt jelzi ki, majd a frisstett napot - ami az egy nap hozzadsnak az eredmnye -, majd a switch utaststl kapott zenetet. A kt vltoz kifejezsbl (@weekday) szrmaz kimenet kztt nem lesz szkz, mivel semmilyen HTML <p> cmkt nem adtunk hozz, a kifejezseket most csak tesztels cljbl szrtuk be.
Most mr lthatjuk, hol a hiba. Mikor elszr jelenik meg a weekday vltoz a kdban, a megfelel napot mutatja. Mikor msodik alkalommal jelenik meg az if tmb utn, a nap eggyel ksbbi a kelletnl, teht belthatjuk, hogy valami trtnt a weekday vltoz els s msodik megjelense kztt a. Ha ez egy valdi hiba lenne, ezzel a megkzeltssel kzelebb kerlnk a problmt okoz kdrszlethez. 6. Javtsuk ki a kdot az oldalon a kt nemrg hozzadott kifejezs trlsvel, s a nap megvltozst okoz kd eltvoltsval. A fennmarad, teljes kdtmb ehhez gy fog kinzni:
@{ var weekday = DateTime.Now.DayOfWeek; var weekdayText = weekday.ToString();
228
var greeting = ""; switch(weekdayText) { case "Monday": greeting = "Ok, it's a marvelous Monday."; break; case "Tuesday": greeting = "It's a tremendous Tuesday."; break; case "Wednesday": greeting = "Wild Wednesday is here!"; break; case "Thursday": greeting = "All right, it's thrifty Thursday."; break; case "Friday": greeting = "It's finally Friday!"; break; case "Saturday": greeting = "Another slow Saturday is here."; break; case "Sunday": greeting = "The best day of all: serene Sunday."; break; default: break; } }
7. Futtassuk az oldalt egy bngszben! Mostantl a megfelel zenet fog megjelenni a ht aktulis napjval.
Objektumrtkek kijelzse az ObjectInfo helper hasznlatval

Az ObjectInfo helper az sszes kvnt objektum tpust s rtkt kijelzi. Hasznlhatjuk vltozk s objektumok rtkeinek megtekintshez a kdban (mint ahogy azt az elz pldban tettk a kifejezsek segtsgvel), valamint lthatunk a kivlasztott objektumok tpust is. 1. Nyissuk meg a korbban elksztett OutputExpressions.cshtml fjlt! 2. Helyettestsk az sszes kdot az oldalon a kvetkez kdtmbbel:
<!DOCTYPE html> <html> <head> <title></title>
229
</head> <body> @{ var weekday = DateTime.Now.DayOfWeek; @ObjectInfo.Print(weekday) var weekdayText = weekday.ToString(); var greeting = ""; switch(weekdayText) { case "Monday": greeting = "Ok, it's a marvelous Monday."; break; case "Tuesday": greeting = "It's a tremendous Tuesday."; break; case "Wednesday": greeting = "Wild Wednesday is here!"; break; case "Thursday": greeting = "All right, it's thrifty Thursday."; break; case "Friday": greeting = "It's finally Friday!"; break; case "Saturday": greeting = "Another slow Saturday is here."; break; case "Sunday": greeting = "The best day of all: serene Sunday."; break; default: break; } } @ObjectInfo.Print(greeting) <h2>@greeting</h2> </body> </html>
3. Mentsk el, majd futtassuk az oldalt egy bngszben!
Ebben a pldban az ObjectInfo kt adatot jelent meg: A tpust. Az els vltozban a tpus a DayOfWeek. A msodik vltoz egy string.
230
Az rtk. Ebben az esetben, mivel a kezdeti vltoz rtke mr megjelent az oldalon, az rtk ismt megjelenik, a vltoz eljut ObjectInfohoz.
Tovbbi, bonyolultabb objektumok esetn az ObjectInfo helper tbb informcit is kpes megjelenteni alapveten minden tpust s rtket ki tud jelezni az objektumok tulajdonsgai kzl.
Hibakeres eszkzk hasznlata

Amellett, hogy az oldal a hibakeress megknnytshez informcikat jelentsen meg, hasznlhatunk eszkzket is, amelyek informcit nyjtanak arrl, hogyan fut az oldal. Ez a rsz bemutatja, hogyan hasznljuk a legnpszerbb diagnosztikai eszkzket a weboldalon, s hogyan hasznljunk nhny eszkzt a WebMatrixban, melyek ugyancsak segtik az oldalon val hibakeresst.
Internet Explorer Developer Tools

Internet Explorer Developer Tools egy Internet Explorer 8-ba bepl web eszkz csomag. (Az Internet Explorer korbbi verziihoz telepthetjk az eszkzt az Internet Explorer Developer Toolbar oldalrl a Microsoft Download Centerben.) Ez az eszkz nem kifejezetten engedi az ASP.NET kdban val hibakeresst, de igazn hasznos lehet a hibakeresshez a HTML-ben, CSS-ben s szkriptekben, belertve az ASP.NET weboldalakon dinamikusan ltrejv utastsokat s szkripteket. Ez az eljrs szemllteti, hogyan mkdik az Internet Explorer Developer Tools. Ez azt felttelezteti, hogy Internet Explorer 8-at hasznlunk. 1. Az Internet Explorerben nyissunk meg egy publikus weboldalt, mint pldul a www.microsoft.com! 2. A Tools menben kattintsunk a Developer Toolsra! 3. Kattintsunk a HTML flre, nyissuk le a <html> elemet, majd a <body> elemet is! Az ablak az sszes cmkt a body elemben mutatja meg. 4. A jobb oldali panelen kattintsunk az Attributes flre, hogy lthassuk a <body> cmke tulajdonsgait:
231
5. A jobb oldali panelon kattintsunk a Style-ra, hogy lssuk a CSS stlusokat, amik a body szakaszhoz tartoznak az oldalon. Az Internet Explorer Developer Tools-rl ltogassunk el a Discovering the Internet Explorer Developer Tools-ra az MSDN weboldaln!
Firebug
Firebug egy add-on a Mozilla Firefoxhoz, amivel ellenrizni lehet a HTML kdokat s a CSS-t, hibkat lehet kerestetni a kliens szkriptben s lehetv teszi, hogy lssuk a cookie-kat s egyb informcikat az oldalrl. A Firebugot telepthetjk a Firebug weboldalrl. Ahogyan az Internet Explorer hibakeres eszkzeiv, ez az eszkz sem kimondottan alkalmas az ASP.NET kdban val hibakeressre, viszont hasznos lehet HTML s egyb oldalelemek vizsglatban, belertve azokat, amelyeket az ASP.NET generlt dinamikusan. Ez a lers megmutat neknk nhnyat a Firebug funkcii kzl. 1. A Firefoxban nyissuk meg a www.microsoft.com-ot! 2. A Tools menben kattintsunk a Firebugra, majd kattintsunk az Open Firebug in New Windowra! 3. A Firebug f ablakban kattintsunk a HTML flre, ezutn nyissuk szt a <html> csompontot a bal panelen! 4. Vlasszuk a <body> cmkt, majd kattintsunk a Style flre a jobb oldali panelon! A Firebug megjelenti neknk az informcikat a Microsoft oldalrl.
232
A Firebug szmos belltst tartalmaz a HTML s CSS stlusok szerkesztshez s rvnyestshez, valamint a szkriptekben lv hibk keresshez s javtshoz. A Net fln lehet elemezni a szerverek s weboldalak kzti hlzati forgalmat. Pldul megvizsglhatjuk hogy lssuk, meddig tart letltenie az sszes tartalmat a bngsznek. Ha tbbet szeretnnk megtudni a Firebugrl, ltogassunk el a Firebug foldalra s a Firebug Documentation Wiki-re!

IIS Server Variables Recognized Enviromnent Variables Internet Explorer Developer Tools: Discovering the Ineternet Explorer Developer Tools Download the IE Developer Tools (IE version prior to IE 8) Debugging HTML and CSS with the Developer Tools Debugging Script with the Developer Tools
Firebug Add-on for Web Developers: Firebug main site Firebug Documentation Wiki
233
19. fejezet A Site-Wide viselkeds testreszabsa

Ebben a fejezetben megtanuljuk, hogyan hozzunk ltre olyan belltsokat, amelyek az egsz weboldalra vagy egy mappra vannak hatssal, nem csak egyetlen oldalra. Az fejezetbl megtudhatjuk: Hogyan futtassunk olyan kdot, amely egy weboldal sszes oldaln tud rtkeket belltani? Hogyan futtassunk olyan kdot, amely egy mappban tallhat sszes oldalon tud rtkeket belltani? Hogyan futtassunk kdot, mieltt s miutn az oldal betltdtt? Hogyan hasznlja az ASP.NET az tvonalkezelst, hogy knnyebben olvashat s kereshet URL-eket hasznlhassunk?
Weboldal indulsakor lefut kd hozzadsa

Az ltalunk megrt kdok tbbsge s a belltsok, amiket hasznlunk, csak egy-egy oldalra rvnyesek. Pldul, ha egy oldal e-mailt kld, akkor ltalban az oldal tartalmazza az egsz kdot, ami szksges a belltsok inicializlshoz (SMTP szerverhez) s az e-mail elkldshez. Azonban nhny esetben mr akkor szeretnnk kdot futtatni, amikor mg egyetlen oldal sem tltdtt be. gy bellthatunk olyan rtkeket, amiket az oldalunkon brhol hasznlhatunk (Globlis rtkek). Nhny helper ktelez klnbz rtkek/adatok megadsra, mint pldul e-mail belltsok vagy account kulcsok, szval hasznos lehet ezeket az adatokat globlis vltozkban trolni. Ezt gy tehetjk meg, hogy ltrehozunk egy _AppStart.cshtml oldalt a honlap gykerben. Ha ez az oldal ltezik, akkor az ebben tallhat kd lefut, mikor lekrnek egy oldalt a honlaprl. Teht ez j hely olyan kd futtatsra, ami globlis vltozkat llt be.(Mivel az _AppStart.cshtml tartalmaz egy alulvons eltagot, az ASP.NET nem fogja elkldeni az oldalt a bngsznek mg akkor sem, ha a felhasznl ezt szeretn.) A kvetkez diagram bemutatja, hogyan mkdik az _AppStart.cshtml. Amikor elszr krelem rkezik egy oldalrt, az ASP.NET elszr megvizsglja, hogy ltezik-e egy _AppStart.cshtml oldal, ha igen, akkor elszr az abban tallhat kd fut le s csak utna a krt oldal.
Honlappts a XXI. szzadban Fggelk ASP.NET API referencia
234
Globlis rtkek belltsa a weboldalon

1. A WebMatrix weboldal gykrknyvtrban hozzunk ltre egy _AppStart.cshtml fjlt! A fjlnak mindenkppen a honlap gykerben kell lennie. 2. Cserljk le az alaprtelmezett kdot a kvetkezre:
@{ } AppState["customAppName"] = "Application Name";
3. Ez a kd egy olyan rtket trol az AppState sztrban, ami automatikusan elrhet az sszes oldal szmra a webhelyen. Megjegyzs: Vigyzzunk, amikor az _AppStart.cshtml-t ksztjk, ugyanis ha brmi hiba van a kdban, akkor nem fog elindulni a honlap! 4. Hozzunk ltre egy AppName.cshtml oldalt a gykrknyvtrban! 5. Cserljk le az alaprtelmezett markupot s a kdot a kvetkezre:
<!DOCTYPE html> <html> <head> <title>Show Application Name</title> </head> <body> <h1>@AppState["customAppName"]</h1> </body> </html>
Ezzel a kddal kiolvassuk azt az rtket az AppState-bl , amit az _AppStart.cshtml-ben lltottunk be.
235
3. Egy bngszvel nyissuk meg az AppName.cshtml-t.(Futtats eltt bizonyosodjunk meg arrl, hogy az oldal ki van vlasztva a Files munkaterleten.) Az oldalon megjelenik a globlis rtk.
rtkads helperek szmra

Az _AppStart.cshtml-t j tlet arra felhasznlni, hogy az oldalunkon felhasznlt helpereknek rtket adjunk. Erre tkletes plda a ReCaptcha helper, hiszen ennek a hasznlathoz egy publikus s egy privt kulcs megadsra van szksg a reCAPTCHA felhasznli fik szmra. Ahelyett, hogy ezeket az rtkeket minden oldalon belltannk, ahol a ReCaptchat hasznljuk, bellthatjuk ket az _AppStart.cshtml-ben, gy a weblapunk minden oldaln elre belltjuk ket. A tbbi rtk, amit bellthatunk az _AppStart.cshtml-ben, e-mail kldsre szolgl SMTP szerver felhasznlsval. Lsd: 17. fejezet Biztonsgi elemek s felhasznli fikok hozzadsa A kvetkez pldbl megtudhatjuk, hogyan lltsuk be globlisan a ReCaptcha kulcsokat.(Tovbbi informcikrt a ReCaptcha hasznlatrl lsd: 17. fejezet Biztonsgi elemek s felhasznli fikok hozzadsa) 1. Ha mg nem tettk meg, adjuk hozz a weboldalunkhoz az ASP.NET Web Helpers Libraryt a 2. fejezetben lertak alapjn! 2. Regisztrljuk weboldalunk a ReCaptcha.Net-en (http://recaptcha.net)! A regisztrci utn megkapjuk publikus s privt kulcsunkat. 3. Ha mg nem rendelkeznk _AppStart.cshtml fjllal a weboldal gykrknyvtrban, akkor most hozzunk ltre egyet! 4. Trljnk ki mindent az _AppStart.cshtml-bl, s adjuk hozz a kvetkez kdot:
@{ // Adjunk hozz PublicKey s PrivateKey stringeket, // a ReCaptcha.Net-rl szerezhetnk publikus s privt kulcsokat. // (http://recaptcha.net) ReCaptcha.PublicKey = ""; ReCaptcha.PrivateKey = "";
5. Tltsk fel a PublicKey s PrivateKey tulajdonsgainkat a sajt publikus s privt kulcsainkkal! 6. Mentsk s zrjuk be az _AppStart.cshtml fjlunkat! 7. A weboldal gykerben hozzunk ltre egy Recaptcha.cshtml oldalt! 8. Cserljk le az alaprtelmezett kdot a kvetkezre: Honlappts a XXI. szzadban Fggelk ASP.NET API referencia
236
@{ var showRecaptcha = true; if (IsPost) { if (ReCaptcha.Validate()) { @:Your response passed! showRecaptcha = false; } else{ @:Your response didn't pass! } } } <!DOCTYPE html> <html> <head> <title>Testing Global Recaptcha Keys</title> </head> <body> <form action="" method="post"> @if(showRecaptcha == true){ if(ReCaptcha.PrivateKey != ""){ <p>@ReCaptcha.GetHtml()</p> <input type="submit" value="Submit" /> } else { <p>You can get your public and private keys at the ReCaptcha.Net website (http://recaptcha.net). Then add the keys to the _AppStart.cshtml file.</p> } } </form> </body> </html>
9. Egy bngszvel nyissuk meg a Recaptcha.cshtml-t! Ha a PrivateKey rtknk rvnyes, akkor az oldalon meg fog jelenni a reCAPTCHA panel s egy gomb. Ha a kulcsokat nem lltottuk volna be globlisan az _AppStart.cshtml-ben, akkor az oldal hibt jelezne.
10. Tesztels cljbl rjuk be a szavakat! Ha megfelelnk a reCAPTCHA teszten, akkor megjelenik egy belltott zenet, ha mgsem, akkor egy hibazenet jelenik meg, majd jra megjelenik a reCAPTCHA panel.
Kd futtatsa egy mappa fjljainak elindulsa eltt s lefutsa utn

Ahogy hasznlhatjuk az _AppStart.cshtml-t arra, hogy kdot futtassunk, mieltt a weboldal brmelyik oldala lefutna, ugyangy rhatunk olyan kdot, ami egy bizonyos knyvtrban tallhat fjlok eltt s
237
utn lefut. Ez azrt hasznos, mert gy ugyanazt a layout oldalt hasznlhatjuk a mappa sszes oldalra, vagy egy oldal megnyitsa eltt ellenrizhetjk, hogy a felhasznl be van-e jelentkezve. Ilyen tpus kdok ltrehozsra s futtatsra egy _PageStart.csthml fjlt hasznlunk. A kvetkez diagram bemutatja, hogyan mkdik a _PageStart.cshtml oldal. Ha krelem rkezik egy oldalrt, akkor az ASP.NET elszr megvizsglja, hogy ltezik-e egy _AppStart.cshtml, ha igen, akkor futtatja azt. Ezek utn ellenrzi, hogy ltezik-e egy _PageStart.cshtml oldal, ha igen, azt is lefuttatja, s csak ezek utn futtatja le a krt oldalt. A _PageStart.cshtml-be belert RunPage metdussal megadhatjuk, hogy a feldolgozs melyik pillanatban jelenjen meg a lekrt weboldal, ezzel lehetsgnk van kdot futtatni a lekrt oldal eltt vagy akr utna. Ha nem tesznk RunPage metdust a _PageStart.cshtml-be, akkor elbb az fut le, majd utna a lekrt weboldal.
Az ASP.NET segtsgvel a _PageStart.cshtml fjlokbl egy egsz hierarchit hozhatunk ltre. Tehetnk egy _PageStart.cshtml-t a weboldal gykrknyvtrba s minden alknyvtrba. Ha lekrnek egy oldalt, akkor a legmagasabb szint (legkzelebbi a gykrknyvtrhoz) _PageStart.cshtml fut le, majd utna kvetkez almappban tallhat _PageStart.cshtml. Az ASP.NET gy megy vgig a knyvtr struktrn, amg el nem ri a kvnt oldalt tartalmaz mappt. A krt oldal csak akkor kvetkezik, miutn minden megfelel _PageStart.cshtml fjl vgrehajtdott. Pldul lehetsges, hogy a kvetkez _PageStart.cshtml s default.cshtml kombincival rendelkeznk:
@* /_PageStart.cshtml *@ @{ PageData["Color1"] = "Red"; PageData["Color2"] = "Blue"; } @* /myfolder/_PageStart.cshtml *@ @{ PageData["Color2"] = "Yellow";
238
PageData["Color3"] = "Green"; } @* /myfolder/default.cshtml *@ @PageData["Color1"] <br/> @PageData["Color2"] <br/> @PageData["Color3"]
Amikor a default.cshtml-t futtatjuk, a kvetkezt ltjuk:

Red Yellow Green
Inicializl kd futtatsa minden oldalra egy mappban

J tlet a _PageStart.cshtml-t arra hasznlni, hogy ugyanazt a szerkezeti oldalt inicializljuk minden fjlra egy mappban. 1. A gykrknyvtrban hozzunk ltre egy gy mappt InitPages nven! 2. Hozzunk ltre egy _PageStart.cshtml fjlt az InitPages knyvtrban, majd cserljk le az alaprtelmezett kdot a kvetkezre:
@{ // Belltjuk a szerkezeti oldalt az sszes oldalra a mappban. Layout = "/Shared/_Layout1.cshtml"; // Belltunk egy vltozt, ami a mappa minden oldala szmra elrhet. PageData["MyBackground"] = "Yellow"; }
3. A weboldal gykerben hozzunk ltre egy Shared mappt! 4. A Shared mappba hozzunk ltre egy _Layout1.cshtml fjlt, majd cserljk le az alaprtelmezett kdot a kvetkezre:
@{ var backgroundColor = PageData["MyBackground"]; } <!DOCTYPE html> <html> <head> <title>Page Title</title> <link type="text/css" href="/Styles/Site.css" rel="stylesheet" /> </head> <body> <div id="header"> Using the _PageStart.cshtml file </div> <div id="main" style="background-color:@backgroundColor"> @RenderBody() </div> <div id="footer"> © 2010 Contoso. All rights reserved </div> </body> </html>
239
5. Az InitPages knyvtrban hozzunk ltre egy Content1.cshtml fjlt, majd az alaprtelmezett markupot cserljk a kvetkezre:
<p>This is content page 1.</p>
6. Az InitPages knyvtrban hozzunk ltre mg egy fjlt Content2.cshtml nven, s cserljk le az alaprtelmezett markupot a kvetkezre:
<p>This is content page 2.</p>
7. Egy bngszvel nyissuk meg a Content1.cshtml-t!
Mikor a Content1.cshtml elindul, akkor a _PageStart.cshtml belltja a Layoutot s a PageData["MyBackground"]-t belltja egy sznre. 8. Egy bngszvel nyissuk meg a Content2.cshtml-t! A szerkezet s a sznek ugyanazok lesznek a kt oldalon, mivel mind a kett ugyanabbl a _PageStart.cshtml-bl veszi az adatokat.
A _PageStart.cshtml hasznlata hibk kezelsre

Msik j felhasznlsi mdja a _PageStart.cshtml-nek, hogy kezeljk a klnbz hibkat s kivteleket, amik felmerlhetnek brmilyen cshtml oldalon. A kvetkez plda erre mutat be egy mdszert. 1. A gykrknyvtrban hozzunk ltre egy InitCatch knyvtrat! 2. Hozzunk ltre egy _PageStart.cshtml-t az InitCatch knyvtrban, s cserljk ki a ltez kdot a kvetkezvel:
@{ try { RunPage(); } catch (Exception ex) { Response.Redirect("/Error.cshtml?source=" + HttpUtility.UrlEncode(Request.AppRelativeCurrentExecution FilePath)); } }
Ebben a kdban explicit mdon hvjuk meg a krt oldalt a try blokkba zrt RunPage metdus segtsgvel. Ha brmi programozsi hiba van a krt honlapban, akkor a catch blokk fog lefutni. A mi esetnkben a kd egy msik oldalra irnyt (Error.cshtml), s az URL rszeknt elkldi az oldal nevt, amin a hiba trtnt. (Hamarosan elksztjk az oldalt.)
240
3. Az InitCatch mappban hozzunk ltre egy Exception.cshtml fjlt, s a tartalmt cserljk a kvetkezre:
@{ var db = Database.Open("invalidDatabaseFile");
}
A plda szemlltetse miatt most hibt generlunk gy, hogy olyan adatbzis fjlt prblunk megnyitni, ami nem ltezik. 4. A gykrknyvtrban hozzunk ltre egy Error.cshtml oldalt, s cserljk le a tartalmt a kvetkezre:
<!DOCTYPE html> <html>
<head> <title>Error Page</title> </head> <body>
<h1>Error report</h1>
<p>An error occurred while running the following file: @Request["source"]</p> </body>
</html>
Ezen az oldalon a @Request["source"] olvassa ki az adatokat az URL-bl s jelenti meg ket. 5. Mentsk a fjlt! 6. Nyissuk meg az Exception.cshtml-t egy bngszben!
Mivel hiba trtnik az Exception.cshtml-ben, ezrt a _PageStart.cshtml tirnyt minket az Error.cshtml-re, ami megjelenti a hibazenetet. Tovbbi informcirt a kivtelkezelsrl lsd: 3.fejezet Bevezets az ASP.NET webszerkesztsbe Razor szintaxissal
A _PageStart.cshtml hasznlata korltozott mappaelrshez

Arra is hasznlhatjuk a _PageStart.cshtml-t, hogy korltozzuk a mappban lev sszes fjl elrst. 1. 2. 3. 4. Hozzunk ltre egy j weboldalt a Site From Template opcival! A lehetsges sablonokbl vlasszuk ki a Starter Site-ot! A gykrknyvtrban hozzunk ltre egy mappt AuthenticatedContent nven! Ebben a mappban hozzunk ltre egy _PageStart.cshtml-t, s tartalmt cserljk a kvetkezre:
241
@{ Response.CacheControl = "no-cache"; if (!WebSecurity.IsAuthenticated) { Response.Redirect("/Account/Login"); } }
A kd elejn megakadlyozzuk, hogy brmilyen fjl a mappbl a gyorsttrba mentdjn.(Ez pldul publikus gpeknl szksges, hogy az egyik felhasznl gyorsttrba mentett oldalait a kvetkez felhasznl ne rje el.) Ezutn meghatrozzuk, hogy a felhasznl belpett-e, mieltt a mappa brmilyen oldalt megnyithatn. Ha a felhasznl nincs bejelentkezve, akkor a kd visszairnyt minket a login oldalra. 5. Hozzunk ltre egy Page.cshtml oldalt az AuthenticatedContent mappba! 6. Cserljk le az alaprtelmezett kdot a kvetkezre:
@{ Layout = "/_SiteLayout.cshtml"; Page.Title = "Authenticated Content"; } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> Thank you for authenticating! </body> </html>
7. Nyissuk meg a Page.cshtml-t egy bngszben! A kd visszairnyt minket a login oldalra. Elszr mindenkppen regisztrlnunk kell, mieltt belphetnnk. Miutn regisztrltunk s belptnk, mr hozzfrnk az oldal tartalmhoz.
Knnyebben olvashat s kereshet URL-ek ksztse

Oldalaink mkdst az URL-jeikkel is befolysolhatjuk. Egy URL, ami bartsgosabb, knnyebb teszi az oldal hasznlatt, s persze segt a keres optimalizlsban is. Az ASP.NET weboldalak kpesek automatikusan bartsgosabb URL-eket hasznlni.
Az tvonalkezelsrl
Az ASP.NET segtsgvel knnyebben rtelmezhet URL-eket hozhatunk ltre, amik lerjk a felhasznl tevkenysgt, ahelyett, hogy csak egy fjlra mutatnnak a szerveren. Hasonltsuk ssze a kvetkez URL-eket, ezek egy kitallt bloghoz tartoznak:
http://www.contoso.com/Blog/blog.cshtml?categories=hardware http://www.contoso.com/Blog/blog.cshtml?startdate=2009-11-01&enddate=2009-11-30 http://www.contoso.com/Blog/categories/hardware/ http://www.contoso.com/Blog/2009/November
242
Az els kt pldban a felhasznlnak tudnia kellene, hogy blog a blog.cshtml oldalon jelenik meg. s ssze kell lltania hozz egy lekrdez parancsot, ami megadja a megfelel kategrit, vagy dtumot. Ezzel szemben a msik kt plda sokkal knnyebben ltrehozhat s rtelmezhet. Az els kt URL radsul egy fjlra mutat (blog.cshtml). Ha valamilyen okbl a blogot eltvoltannk vagy csak msik mappba helyeznnk t, vagy csak egyszeren msik fjlt hasznlnnk, akkor a linkek nem mkdnnek. A msik kt URL nem mutat semmilyen fjlra, gy ha a blogon vltoztatnnk, a link akkor is rvnyes maradna s mkdne. Az ASP.NET segtsgvel ltrehozhatunk bartsgosabb URL-eket, olyanokat, mint az elz pldkban ltottak. Ez azrt lehetsges, mert az ASP.NET tvonalkezelst (routing) hasznl. Az tvonal-kezels segtsgvel egy olyan logikai trkpet kszthetnk egy URL-bl, ami teljesteni tud egy oldal krelmet. Mivel logikai trkpet hoz ltre s nem fizikait (nem egy fjlra mutat), az tvonalkezels magas rugalmassgot biztost abban, hogy hogyan definiljuk az URL-jeinket.
Hogy mkdik az tvonalkezels?

Amikor az ASP.NET feldolgoz egy krelmet, akkor beolvassa az URL-t, hogy megllaptsa, milyen tvonalat hasznljon. Megprblja balrl jobbra haladva prostani az URL klnbz szegmenseit a lemezen tallhat fjlokhoz. Ha egyezst tall, akkor mindent, ami mg megmaradt az Url-ben, tovbbkld az oldalnak mint tvonal informci. Erre j plda a kvetkez knyvtrstruktra:
Kpzeljk el, hogy valaki a kvetkez URL-t hasznlja: http://www.contoso.com/a/b/c A keress gy megy vgbe: 1. Ltezik-e egy fjl az /a/b/c.cshtml elrsi ttal s nvvel? Ha igen, akkor megjelenik, s semmilyen informcit nem kld tovbb. Ellenkez esetben: Honlappts a XXI. szzadban Fggelk ASP.NET API referencia
243
2. Ltezik-e egy fjl az /a/b.cshtml elrsi ttal s nvvel? Ha igen, akkor megjelenik s tovbbkldi a c-t mint informcit. Ellenkez esetben: 3. Ltezik-e egy fjl az /a.cshtml elrsi ttal s nvvel? Ha igen, akkor megjelenik s tovbb kldi a b/c-t mint informcit. Ha a keress eredmnytelen s nem tall pontos egyezst .cshtml fjlok kztt a meghatrozott mappjukban, az ASP.NET sorban folytatja e fjlok keresst. 4. /a/b/c/default.cshtml (Nincs tvonal informci). 5. /a/b/c/index.cshtml (Nincs tvonal informci). Megjegyzs: Termszetesen azok az URL-ek is hibtlanul mkdni fognak, amik megadott oldalakra mutatnak (tartalmazzk a .cshtml kiterjesztst). Teht pldul a http://www.contoso.com/a/b.cshtml is mkdni fog. Egy oldalon bell az oldal tvonal informcijt az UrlData tulajdonsgn keresztl rhetjk el (ez egy sztrrtk). Kpzeljk el, hogy van egy ViewCustomers.cshtml fjlunk, s az oldalunk ezt a krelmet kapja meg: http://mysite.com/myWebSite/ViewCustomers/1000 Az elbbiekben lert szablyok alapjn a krs elri az oldalunkat. Az oldalunkon a kvetkezhz hasonl kd segtsgvel megjelenthetjk az tvonal informcikat.(Ebben az esetben 1000):
<!DOCTYPE html> <html> <head> <title>URLData</title> </head> <body> Customer ID: @UrlData[0].ToString() </body> </html>
Megjegyzs: Mivel az tvonalkezels nem hasznl teljes fjlneveket, nha ktrtelmsg lphet fel, pldul ha az oldalainknak ugyanaz a neve, de ms a kiterjesztsk (MyPage.cshtml s MyPage.html). Ennek elkerlse rdekben legjobb, ha nem hasznlunk olyan oldalakat, amik csak a kiterjesztskben trnek el.
244
Fggelk ASP.NET API referencia

A knyv ezen oldalain megtallhatjuk azokat az objektumokat, tulajdonsgokat, s metdusokat, amiket az ASP.NET Razor szintaxissal legtbbszr hasznlunk. Ez nem egy teljes referencia dokumentum. A teljes referencia majd a hivatalos megjelenskor lesz elrhet. Ez a fggelk a kvetkez tmkban nyjt informcikat: Osztlyok Adatok Helperek
Osztlyok
AsBool(),AsBool(true|false)
String rtkbl Booleant (igaz/hamis) konvertl. Ha a megadott string nem felel meg az igaz/hamis (true/false) rtkeknek, akkor visszatrsi rtke hamis vagy a megadott rtk lesz. bool b = stringValue.AsBool();
AsDateTime(),AsDateTime(value)
String rtkbl Date/Time rtket konvertl. Ha a string nem felel meg a dtum/id (date/time) rtkeknek, akkor a visszatrsi rtke a DateTime.MinValue vagy a megadott rtk lesz.
DateTime dt = stringValue.AsDateTime();
AsDecimal(),AsDecimal(value)
String rtkbl decimal rtket konvertl. Ha a string nem felel meg a decimlis (decimal) rtkeknek, akkor a visszatrsi rtke 0.0 vagy a megadott rtk lesz.
decimal d = stringValue.AsDecimal(); AsFloat(),AsFloat(value)
String rtkbl floatot konvertl. Ha a string nem felel meg decimlis rtkeknek, akkor a visszatrsi rtke 0.0 vagy a megadott rtk lesz.
float d = stringValue.AsFloat(); AsInt(),AsInt(value)
String rtkbl integert konvertl. Ha a megadott rtk nem felel meg egsz szmnak (integer), akkor visszatrsi rtke 0 vagy a megadott rtk lesz.
int i = stringValue.AsInt(); Href(path[,param1[,param2]])
Egy bngsz kompatibilis s opcionlis plusz elrsi trszekkel rendelkez URL-t hoz ltre egy helyi elrsi tbl.
<a href="@Href ("~/Folder/File")">Link to My File</a> <a href="@Href ("~/Product", "Tea")">Link to Product</a> Html.Raw(value)
Az rtket HTML kdolt kimenet helyett HTML markupknt rendereli.

@* A string rtkt behelyezi a markupba. *@ @Html.Raw("<div>Hello <em>world</em>!</div>") IsBool(), IsDateTime(), IsDecimal(), IsFloat(), IsInt()
Visszatrsi rtke igaz(true), ha a megadott rtk stringbl valamelyik kivlasztott tpuss Honlappts a XXI. szzadban Fggelk ASP.NET API referencia 245
konvertlhat.
var isint = stringValue.IsInt(); IsEmpty()
Visszatrsi rtke igaz(true) ha a vltoz vagy objektum nem tartalmaz rtket.

if (Request["companyname"].IsEmpty()) { @:Company name is required.<br /> } IsPost
Ha a lekrdezs POST tpus, akkor visszatrsi rtke igaz (true) lesz. (A kezdeti lekrdezsek ltalban GET-ek.)
if (IsPost) { Response.Redirect("Posted"); } Layout
Az oldalhoz hasznlt layout oldal elrsi tjt adja meg.

Layout = "_MyLayout.cshtml"; PageData[key],PageData[index],Page
Az aktulis lekrdezs oldalak, szerkezeti oldalak s rszleges oldalak kztt megosztott adatait trolja. Hasznlhatjuk a dinamikus Page tulajdonsgot, hogy ugyanezeket az adatokat elrjk.
PageData["FavoriteColor"] = "red"; PageData[1] = "apples"; Page.MyGreeting = "Good morning"; // Megjelenti a PageData[1]-hez tartoz rtket. @Page[1] // Megjelenti a Page.MyGreetinghez tartoz rtket. @Page.MyGreeting RenderBody()
(Szerkezeti oldalak) Lerendereli az oldal olyan tartalmait, amik nincsenek megnevezett szekcik kztt.
@RenderBody() RenderPage(path,values) RenderPage(path[,param1[,param2]])
Lerenderel egy tartalmi oldalt a megadott elrsi utat s az opcionlis extra adatparamtereket hasznlva. Az adat paramtereket pozci (plda 1) vagy kulcs (plda2) alapjn a PageDatabl olvashatjuk ki.
RenderPage("_MySubPage.cshtml", "red", 123, "apples") RenderPage("_MySubPage.cshtml", new { color = "red", number = 123, food = "apples" }) RenderSection(sectionName[,required=true|false])
(Szerkezeti oldalak) Lerenderel egy nvvel elltott tartalmi szekcit. A required rszt hamisra (false) kell lltanunk, ha a renderelst opcionlisnak akarjuk hagyni.
@RenderSection("header")
Request.Cookies[key]
Beolvassa vagy belltja egy http cookie rtkt.

var cookieValue = Request.Cookies["myCookie"].Value; Request.Files[key]
246
Az aktulis lekrdezsben feltlttt fjlokat olvassa be.

Request.Files["postedFile"].SaveAs(@"MyPostedFile"); Request.Form[key]
Egy rlapon bekldtt adatokat olvassa be (stringknt). A rvidebb Request[key] megvizsglja a Request.Form valamint a Request.QueryString gyjtemnyt is.
var formValue = Request.Form["myTextBox"]; // Ugyanazt az eredmnyt kapjuk. var formValue = Request["myTextBox"]; Request.QueryString[key]
Beolvassa az adatot, amit az URL query stringben adtunk meg. A rvidebb Request[key] megvizsglja a Request.Form, valamint a Request.QueryString gyjtemnyt is.
var queryValue = Request.QueryString["myTextBox"]; // Ugyanazt az eredmnyt kapjuk. var queryValue = Request["myTextBox"]; Request.Unvalidated(key) Request.Unvalidated().QueryString|Form|Cookies|Headers[key]
Egy kivlasztott rlap elemnek, query-string rtknek, cookienak, vagy fejlc rtknek kikapcsolja a lekrdezs sorn trtn validcijt.
// Kzvetlenl hvjuk meg a metdust, hogy kikapcsoljuk a validcit valamelyik Request elemen. Request.Unvalidated("userText"); // Megadhatjuk, hogy az rtk melyik gyjtemnybl szrmazik. var prodID = Request.Unvalidated().QueryString["productID"]; var richtextValue = Request.Unvalidated().Form["richTextBox1"]; var cookie = Request.Unvalidated().Cookies["mostRecentVisit"]; Response.AddHeader(name,value)
http szerver fejlcet ad a vlaszba.

// A fejlcben elkld egy egyszer hitelestst a bngsznek. Response.AddHeader("WWW-Authenticate", "BASIC"); Response.OutputCache(seconds[,sliding][,varyByParams])
Egy megadott ideig elraktrozza az oldal kimenett. Lehetsg van belltani minden oldal idtllpst s a varyByParams rtket, hogy a lekrdezsekben minden egyes query string utn ms verzij oldalt troljunk el.
Response.OutputCache(60); esponse.OutputCache(3600, true); Response.OutputCache(10, varyByParams : new[] {"category","sortOrder"}); Response.Redirect(path)
tirnytja a bngszben tett lekrdezst egy msik helyre.

Response.Redirect("~/Folder/File"); Response.SetStatus(httpStatusCode)
Belltja a bngsznek kldend http sttusz kdot.

Response.SetStatus(HttpStatusCode.Unauthorized); Response.SetStatus(401); Response.WriteBinary(data[,mimetype])
247
A vlaszba belerja az adatokat opcionlis MIMI tpussal.

Response.WriteBinary(image, "image/jpeg"); Response.WriteFile(file)
Egy fjl tartalmt beleteszi a vlaszba.

Response.WriteFile("file.ext"); @section(sectionName){content}
(Szerkezeti oldalak) Meghatroz egy nvvel elltott tartalmi rszt.

@section header { <div>Header text</div> }
Server.HtmlDecode(htmlText)
Egy HTML kdolt stringet dekdol.

var htmlDecoded = Server.HtmlDecode("<html>"); Server.HtmlEncode(text)
HTML markup renderelshez lekdol egy stringet.

var htmlEncoded = Server.HtmlEncode("<html>");
Server.MapPath(virtualPath)
A virtulis elrsi utat fizikai elrsi tt alaktja.

var dataFile = Server.MapPath("~/App_Data/data.txt"); Server.UrlDecode(urlText)
Egy URL-bl dekdol szveget.

var urlDecoded = Server.UrlDecode("url%20data"); Server.UrlEncode(text)
Lekdol egy szveget, hogy beletehessk egy URL-be.

var urlEncoded = Server.UrlEncode("url data"); Session[key]
Bellt vagy beolvas egy olyan rtket, ami egszen addig ltezik amg be nem zrjuk a bngszt.
Session["FavoriteColor"] = "red"; ToString()
Egy objektum rtkt stringknt jelenti meg.

<p>It is now @DateTime.Now.ToString()</p> UrlData[index]
Tbbletadatot olvas ki egy URL-bl(pl: /MyPage/ExtraData).

var pathInfo = UrlData[0]; WebSecurity.ChangePassword(userName,currentPassword,newPassword)
Egy megadott felhasznlnak megvltoztatja a jelszavt.

var success = WebSecurity.ChangePassword("my-username","currentpassword", "newpassword"); WebSecurity.ConfirmAccount(accountConfirmationToken)
Az account confirmation token(megerst token) hasznlatval megerst egy felhasznli fikot.

var confirmationToken = Request.QueryString["ConfirmationToken"];
248
if(WebSecurity.ConfirmAccount(confirmationToken)) { //... } WebSecurity.CreateAccount(userName, password[, requireConfirmationToken=true|false])
A megadott felhasznlnvvel s jelszval ltrehoz egy j felhasznli fikot. Ha a requireConfirmationToken paramtert igazra(true) lltjuk, akkor szksg van mg egy megerst tokenre (confirmation token) is.
WebSecurity.CreateAccount("my-username", "secretpassword"); WebSecurity.CurrentUserId
Az ppen bejelentkezett felhasznl interger azonostjt olvassa be.

var userId = WebSecurity.CurrentUserId; WebSecurity.CurrentUserName
Az ppen bejelentkezett felhasznl nevt olvassa be.

var welcome = "Hello " + WebSecurity.CurrentUserName; WebSecurity.GeneratePasswordResetToken(username[,tokenExpirationInMin utesFromNow])
Ltrehoz egy olyan jelsz-visszallt tokent, amit el lehet kldeni a felhasznlnak, hogy tllthassa a jelszavt.
var resetToken = WebSecurity.GeneratePasswordResetToken("myusername"); var message = "Visit http://example.com/reset-password/" + resetToken + " to reset your password"; WebMail.Send(..., message); WebSecurity.GetUserId(userName)
A megadott felhasznli nvbl visszaadja a felhasznl ID-jt.

var userId = WebSecurity.GetUserId(userName); WebSecurity.IsAuthenticated
Ha az aktulis felhasznl be van jelentkezve, akkor visszatrsi rtke igaz (true) lesz.
if(WebSecurity.IsAuthenticated) {...} WebSecurity.IsConfirmed(userName)
Ha a felhasznl meg van erstve, akkor visszatrsi rtke igaz (true) lesz.(pl. megerst e-mail)
if(WebSecurity.IsConfirmed("joe@contoso.com")) { ... } WebSecurity.IsCurrentUser(userName)
Igazat ad vissza, ha az aktulis felhasznl felhasznlneve megegyezik a megadott felhasznlnvvel.

if(WebSecurity.IsCurrentUser("joe@contoso.com")) { ... } WebSecurity.Login(userName,password[,persistCookie])
Egy cookieba elhelyez egy hitelest token-t, s belpteti a felhasznlt.

if(WebSecurity.Login("username", "password")) { ... } WebSecurity.Logout()
249
Eltvoltja a hitelest token stit, s ezzel egytt kilpteti a felhasznlt.

WebSecurity.Logout();
WebSecurity.RequireAuthenticatedUser()
A http sttuszt 401-re (Jogosulatlan) lltja, ha a felhasznl nincs hitelestve.

WebSecurity.RequireAuthenticatedUser(); WebSecurity.RequireRoles(roles)
Ha a felhasznl nem tagja valamelyik megadott csoportnak, akkor belltja a http sttuszt 401re(Jogosulatlan).
WebSecurity.RequireRoles("Admin", "Power Users"); WebSecurity.RequireUser(userId) WebSecurity.RequireUser(userName)
Ha az aktulis felhasznl nem egyezik meg a felhasznl ltal megadott felhasznlnvvel, akkor a HTML sttuszkdot 401(Jogosulatlan)-re lltja.
WebSecurity.RequireUser("joe@contoso.com"); WebSecurity.ResetPassword(passwordResetToken, newPassword)
Ha a jelsz-visszallt token(password reset token) rvnyes,megvltoztatja a felhasznl jelszavt a megadottra.

WebSecurity.ResetPassword( "A0F36BFD9313", "new-password")
Adatok
Database.Execute(SQLstatement[,parameters]
Lefuttat egy SQL utastst opcionlis paramterekkel egytt, majd az rintett rekordok szmt visszaadja. Az utastsok lehetnek INSERT, DELETE vagy UPDATE.
db.Execute("INSERT INTO Data (Name) VALUES ('Smith')"); db.Execute("INSERT INTO Data (Name) VALUES (@0)", "Smith"); Database.GetLastInsertId()
Visszaadja a legutoljra beillesztett sorbl az ID oszlopot.

db.Execute("INSERT INTO Data (Name) VALUES ('Smith')"); var id = db.GetLastInsertId(); Database.Open(filename) Database.Open(connectionStringName)
Megnyit egy megadott adatbzis fjlt, vagy azt, amit a Web.config fjlbl vett elnevezett connection string ad meg.
// Figyeljk, meg hogy nincs kiterjeszts megadva. var db = Database.Open("SmallBakery"); // Opens SmallBakery.sdf in App_Data // Megnyitunk egy adatbzist egy elnevezett connection stringgel. var db = Database.Open("SmallBakeryConnectionString"); Database.OpenConnectionString(connectionString)
Megnyit egy connection stringgel meghatrozott adatbzist. Ez abban tr el a DataBase.Opentl, hogy az egy elnevezett connection stringet hasznl.
var db = Database.OpenConnectionString("Data Source=|DataDirectory|\SmallBakery.sdf");
Database.Query(SQLstatement[,parameters])
250
Lekrdezi az adatbzist SQL utastsok hasznlatval, majd a result vltozba beletlti az eredmnyt.
foreach (var result in db.Query("SELECT * FROM PRODUCT")) {<p>@result.Name</p>} foreach (var result = db.Query("SELECT * FROM PRODUCT WHERE Price > @0", 20) { <p>@result.Name</p> } Database.QuerySingle(SQLstatement[,parameters])
Lefuttat egy SQL utastst (paramterek tadsval), majd visszaad egyetlen rekordot.
var product = db.QuerySingle("SELECT * FROM Product WHERE Id = 1"); var product = db.QuerySingle("SELECT * FROM Product WHERE Id = @0", 1); Database.QueryValue(SQLstatement[,parameters])
Lefuttat egy SQL utastst(paramterek tadsval), s visszaad egyetlen rtket.

var count = db.QueryValue("SELECT COUNT(*) FROM Product"); var count = db.QueryValue("SELECT COUNT(*) FROM Product WHERE Price > @0", 20);
Helperek
Analytics.GetGoogleHtml(webPropertyId)
Lerendereli a Google Analytics JavaScriptet a megadott ID-nek.

@Analytics.GetGoogleHtml("MyWebPropertyId") Analytics.GetStatCounterHtml(project,security)
Lerendereli a StatCounter Analytics JavaScriptet a megadott projektnek.

@Analytics.GetStatCounterHtml(89, "security") Analytics.GetYahooHtml(account)
Lerendereli a Yahoo Analytics JavaScriptet a megadott felhasznli fiknak.

@Analytics.GetYahooHtml("myaccount") Bing.SearchBox([siteUrl])
Elkld egy akr URL-t is tartalmaz keresst a Bingnek.

@Bing.SearchBox() @* Searches the web.*@ @Bing.SearchBox(siteUrl: "www.asp.net") @* Searches the www.asp.net site. *@ Bing.AdvancedSearchBox([siteUrl][,siteName][, boxWidth][,resultWidth][,resultHeight][, themeColor][,locale])
Megjelenti a Bing keress eredmnyt a megadott formzssal s URL-lel egytt.

@Bing.AdvancedSearchBox( siteUrl: "www.asp.net", siteName: "ASP.NET Custom Search", boxWidth: 300, resultWidth: 600, resultHeight: 900, themeColor: "Green", locale: "en-US") Chart(width,height[,template][,templatePath])
251
Inicializl egy grafikont.

@{ var myChart = new Chart(width: 600, height: 400); } Chart.AddLegend([title][,name])
Magyarz feliratot ad a grafikonhoz.

@{ var myChart = new Chart(width: 600, height: 400) .AddLegend("Basic Chart") .AddSeries( name: "Employee", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); }
Chart.AddSeries([name][,chartType][,chartArea][,axisLabel][, legend] [, markerStep][,xValue] [,xField][,yValues][,yFields][,options])
rtkeket ad a grafikonhoz.
@{ var myChart = new Chart(width: 600, height: 400) .AddSeries( name: "Employee", xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); } Crypto.Hash(string[,algorithm]) Crypto.Hash(bytes[,algorithm])
Visszaadja a megadott adat hash-t. Az "sha256".az alaprtelmezett algoritmus.

@Crypto.Hash("data")
Facebook.LikeButton(url[,action][, width][,layout][, showFaces][, colorScheme])
A Facebook felhasznlknak enged kapcsolatot kipteni oldalakkal.

@Facebook.LikeButton("www.ASP.net") FileUpload.GetHtml([initialNumberOfFiles][,allowMoreFilesToBeAdded][, includeFormTag] [,addText][,uploadText])
Lerenderel egy felhasznli felletet fjlok feltltshez.

@FileUpload.GetHtml(initialNumberOfFiles:1, allowMoreFilesToBeAdded:false, includeFormTag:true, uploadText:"Upload") GamerCard.GetHtml(gamerTag)
Lerendereli a megadott Xbox jtkos krtyt.

@GamerCard.GetHtml("joe") Gravatar.GetHtml(email[,imageSize],[,defaultImage],[, rating],[,imageExtension] [,attributes])
Lerenderel egy Gravatar kpet a megadott e-mail cmnek.

@Gravatar.GetHtml("joe@contoso.com")
Json.Encode(object)
252
Egy adat objektumbl JavaScript Object Notation (JSON) formtum stringet konvertl.
var myJsonString = Json.Encode(dataObject); Json.Decode(string)
Egy JSON kdolt stringet adat objektumm konvertl.

var myJsonObj = Json.Decode(jsonString); LinkShare.GetHtml(pageTitle[, pageLinkBack][,twitterUserName][,additionalTweetText] [,linkSites])
Lerenderel egy kzssgi portl linket a megadott cmbl s Url-bl.

@LinkShare.GetHtml("ASP.NET Web Pages Samples") @LinkShare.GetHtml("ASP.NET Web Pages Samples", "http://www.asp.net") ModelStateDictionary.AddError(key,errorMessage)
Trst egy hibazenetet egy rlap mezvel. Hasznljuk a ModelState helpert, hogy elrjk ezt a tagot!
ModelState.AddError("email", "Enter an email address"); ModelStateDictionary.AddFormError(errorMessage)
Trst egy hibazenetet egy rlappal. Hasznljuk a ModelState helpert hogy elrjk ezt a tagot.
ModelState.AddFormError("Password and confirmation password do not match."); ModelStateDictionary.IsValid
Ha nincs semmilyen validcis hiba, akkor igazat ad vissza. Hasznljuk a ModelState helpert, hogy elrjk ezt a tagot!
if (ModelState.IsValid) { // Save the form to the database } ObjectInfo.Print(value[,depth][,enumerationLength])
Lerendereli egy objektum tulajdonsgait s rtkeit egy objektumnak

@ObjectInfo.Print(person) Recaptcha.GetHtml([,publicKey][, theme][,language][, tabIndex])
Lerenderel egy reCAPTCHA verifikcis tesztet.

@ReCaptcha.GetHtml() ReCaptcha.PublicKey ReCaptcha.PrivateKey
Belltja a publikus s privt kulcsokat a reCAPTCHA-hoz. ltalban ezeket az _AppStart oldalon lltjuk be.
ReCaptcha.PublicKey = "your-public-recaptcha-key"; ReCaptcha.PrivateKey = "your-private-recaptcha-key"; ReCaptcha.Validate([,privateKey])
Visszaadja a reCAPTCHA teszt eredmnyt.

if (ReCaptcha.Validate()){ // Sikeres teszt. } ServerInfo.GetHtml()
Sttusz informcit renderel ASP.NET weboldalakrl.

@ServerInfo.GetHtml()
253
Twitter.Profile(twitterUserName)
Egy Twitter csatornt renderel a megadott felhasznlhoz.

@Twitter.Profile("billgates") Twitter.Search(searchQuery)
Egy Twitter csatornt renderel a megadott keres szveghez.

@Twitter.Search("asp.net") Video.Flash(filename[,width,height])
Egy Flash lejtszt renderel a megadott fjlhoz. Mreteit megszabhatjuk.

@Video.Flash("test.swf", "100", "100") Video.MediaPlayer(filename[, width,height])
Egy Windows Media lejtszt renderel a megadott fjlhoz. Mreteit megszabhatjuk.

@Video.MediaPlayer("test.wmv", "100", "100") Video.Silverlight(filename,width,height)
Egy Silverlight lejtszt renderel a megadott .xap fjlhoz. Mreteit megszabhatjuk.

@Video.Silverlight("test.xap", "100", "100") WebCache.Get(key)
Visszaadja a kulcs ltal meghatrozott objektumot vagy null-t, ha az nem tallhat.

var username = WebCache.Get("username") WebCache.Remove(key)
A kulcs ltal meghatrozott objektumot kiveszi a gyorsttrbl.

WebCache.Remove("username") WebCache.Set(key,value[,minutesToCache][,slidingExpiration])
A kulcs ltal meghatrozott nvvel egy rtket tesz a gyosttrba.

WebCache.Set("username", "joe@contoso.com ") WebGrid(data)
A lekrdezsbl vett adatokkal egy j WebGrid objektumot hoz ltre.

var db = Database.Open("SmallBakery"); var grid = new WebGrid(db.Query("SELECT * FROM Product")); WebGrid.GetHtml()
Egy HTML tblzatokban adatok megjelentsre szolgl markupot renderel.

@grid.GetHtml()// The 'grid' variable is set when WebGrid is created. WebGrid.Pager()
Lerenderel egy pager-t a WebGrid objektumnak.

@ grid.Pager() // A grid vltoz akkor jn ltre, amikor a WebGrid ltrejn. WebImage(path)
Betlt egy kpet a megadott tvonalrl.

var image = new WebImage("test.png"); WebImage.AddImagesWatermark(image)
254
A megadott kpet vzjelknt adja hozz egy kphez.

WebImage photo = new WebImage("test.png"); WebImage watermarkImage = new WebImage("logo.png"); photo.AddImageWatermark(watermarkImage); WebImage.AddTextWatermark(text)
A megadott szveget hozzadja egy kphez.

image.AddTextWatermark("Copyright") WebImage.FlipHorizontal() WebImage.FlipVertical()
Megfordtja a kpet horizontlisan vagy vertiklisan.

image.FlipHorizontal(); image.FlipVertical(); WebImage.GetImageFromRequest()
Betlti a feltlttt kpet.

var image = WebImage.GetImageFromRequest(); WebImage.Resize(width,height)
tmretez egy kpet.

image.Resize(100, 100); WebImage.RotateLeft() WebImage.RotateRight()
Balra vagy jobbra forgatja a kpet.

image.RotateLeft(); image.RotateRight(); WebImage.Save(path[,imageFormat])
A megadott elrsi tra elmenti a kpet.

image.Save("test.png"); WebMail.Password
Belltja az SMTP szerver jelszavt. Ezt ltalban az _AppStart oldalon szoktuk megtenni.
Webmail.Password = password; WebMail.Send(to,subject,body[, from][, cc][,filesToAttach][,isBodyHtml] [,additionalHeaders])
Elkld egy e-mail-t.

WebMail.Send("touser@contoso.com", "subject", "body of message", "fromuser@contoso.com"); WebMail.SmtpServer
Belltja az SMTP szerver nevt. Ezt ltalban az _AppStart oldalon szoktuk megtenni.
WebMail.SmtpServer = "mailServer"; WebMail.UserName
Belltja az SMTP szerver felhasznl nevt. Ezt ltalban az _AppStart oldalon szoktuk megtenni.
WebMail.UserName = "Joe";
255
Fggelk ASP.NET Weboldalak Visual Basickel

Ahogy lthattuk, az ASP.NET Razor syntax kdok ebben a knyvben C#-on alapulnak. De a Razor syntax Visual Basicet is tmogat. Ahhoz hogy egy ASP.NET weblapot Visual Basicben hozzunk ltre, egy olyan weboldalt ksztnk aminek .vbhtml a kiterjesztse, s ebbe rjuk bele a Visual Basic kdot. Ebben a fggelkben ttekintjk, hogyan hasznljuk a Visual Basic programozsi nyelvet s annak szintaxist, hogy ASP.NET weboldalakat hozzunk ltre. A fejezetbl megismerhetjk: A 8 legjobb programozsi tippet s trkkt. A Visual Basic programozsi nyelvet s annak szintaxist.
A 8 legjobb programozsi tipp s trkk

Ebbl a rszbl megtudhatjuk azokat a dolgokat, amiket muszj tudnunk, hogy elkezdhessnk ASP.NET Razor syntax szerver kdot rni.
1. Kdot a @ jel utn adhatunk az oldalhoz.

A @ jel segtsgvel begyazott kifejezseket s egy vagy tbb soros parancsblokkok kezdett jelezzk.
 @Code Dim total = 7 End Code @Code Dim myMessage = "Hello World" End Code  <p>The value of your account is: @total </p> <p>The value of myMessage is: @myMessage</p>  @Code Dim greeting = "Welcome to our site!" Dim weekDay = DateTime.Now.DayOfWeek Dim greetingMessage = greeting & " Today is: " & weekDay.ToString() End Code <p>The greeting is: @greetingMessage</p>
HTML kdols Ahogy az elz pldkban lthattuk, ha a @ jelet hasznljuk az oldalon, akkor az ASP.NET HTML kdolja a kimenetet. Ugyanis felcserli a lefoglalt HTML karaktereket (mint pldul a <,> s az &) Honlappts a XXI. szzadban Fggelk ASP.NET Weboldalak Visual Basickel 256
olyan kdokkal, melyek engedlyezik, hogy a karakterek normlisan jelenjenek meg, nem pedig HTML cmkeknt vagy entitsknt. A HTML kdols nlkl a kdunk kimenete lehet, hogy nem fog jl megjelenni, s az oldalunkat biztonsgi kockzatoknak tehetjk ki. Ha esetlegesen HTML kdot szeretnnk megjelenteni (pl <p></p> a bekezdsekhez vagy <em></em> hogy kiemeljnk egy szveget), lsd: Szveg, Markup s Kd a Kdblokkban. A HTML kdolsrl bvebben lsd: 5 .Fejezet Munka az rlapokkal
2. A kdblokkokat Code s End Code kz tegyk

A kdblokkokban egy vagy tbb utastst tallunk s Code, illetve End Code kulcsszavakkal jelezzk ket. A kdblokk kezdett jell Code kulcsszt hasznljuk kzvetlenla @ jel utn, ugyanis nem lehet res hely kzttk!
 @Code Dim theMonth = DateTime.Now.Month End Code <p>The numeric value of the current month: @theMonth</p>  @Code Dim outsideTemp = 79 Dim weatherMessage = "Hello, it is " & outsideTemp & " degrees." End Code <p>Today's weather: @weatherMessage</p>
3. Egy kdblokkon bell az utastsokat egy sortrssel zrjuk le

Egy Visual Basic kdblokkban minden utastst egy sortrssel zrunk le. (A ksbbiekben megtanuljuk, hogy lehet egy hossz utastst tbb sorba rni, ha szksges.)
 @Code Dim theMonth = DateTime.Now.Month End Code  @Code Dim outsideTemp = 79 Dim weatherMessage = "Hello, it is " & outsideTemp & " degrees." End Code  <p>Today's weather: @weatherMessage</p>
Honlappts a XXI. szzadban Fggelk ASP.NET Weboldalak Visual Basickel
257
4. rtkek trolsra hasznljunk vltozkat !

rtkeket vltozkban trolhatunk. Ezek lehetnek stringek, szmok, dtumok,stb. j vltozt a Dim kulcsszval hozhatunk ltre. Ahhoz, hogy a vltozkat kzvetlenl beillesszk az oldalunkba, hasznljuk a @ jelet.
 @Code Dim welcomeMessage = "Welcome, new members!" End Code <p>@welcomeMessage</p>  @Code Dim year = DateTime.Now.Year End Code  <p>Welcome to our new members who joined in @year!</p>
5. Stringekhez a szveget idzjelek kz tegyk!

A string olyan karaktersorozat, amit szvegknt kezelnk. Hogy meghatrozzunk egy stringet, idzjelek kz kell tegyk.
@Code Dim myString = "This is a string literal" End Code
Hogy dupla idzjelet tegynk a stringnkbe, hasznljunk kt dupla idzjelet! Ha azt szeretnnk, hogy az idzjelek megjelenjenek az oldalon, gy hasznljuk ket: "" megjelentend szveg"", ha esetleg dupla idzjelet szeretnnk hasznlni, akkor """"-t hasznljunk!
 @Code Dim myQuote = "The person said: ""Hello, today is Monday.""" End Code <p>@myQuote</p>
258
6. A Visual Basic kd nem case sensitive.

A Visual Basic programozsi nyelv nem klnbzteti meg a kis- s nagybetket. A programozsi kulcsszavak (Dim,If,True) s a vltoz nevek (myString) kis- s nagybetvel is rhatak. A kvetkez pldban a lastname vltozt kisbetsen deklarljuk, de az oldalunkon nagybetvel hasznljuk.
@Code Dim lastName = "Smith" ' A kulcsszavaknl, mint pl. a Dim, nem kell a kis- s nagybetkre figyelni. DIM someNumber = 7 End Code <p>The value of the <code>lastName</code> variable is: @LASTNAME</p>
Az eredmny gy jelenik meg a bngszben.
7. Az oldalunk kdolsa objektumokkal val munkt ignyel

Objektumnak neveznk olyan dolgokat, amiket a programozs sorn felhasznlunk (oldal, szvegdoboz, fjl, kp, webes lekrs, e-mail, egy adatbzis sor stb.) Egy objektum jellemzit a tulajdonsgain keresztl tudhatjuk meg. (Pl: egy szvegdoboznak van egy Text tulajdonsga, egy lekrsnek van egy URL tulajdonsga, egy e-mailnek van From tulajdonsga, az gyfl objektumnak pedig FirstName tulajdonsga). Az objektumok termszetesen rendelkeznek metdusokkal is, ezeket igkknt lthatjuk. Erre j plda a fjl objektum Save metdusa, egy kp objektum Rotate metdusa, vagy egy e-mail objektum Send metdusa. Valsznleg srn fogunk dolgozni Request objektummal, ami egy rlap meziben tallhat rtkeket adja vissza (szvegdobozstb.), vagy esetleg azt, hogy milyen tpus bngsz indtotta meg a lekrdezst, vagy a lekrt oldal URL-jt,esetlegesen azonostja a felhasznlt, s mg sok minden msra kpes. A kvetkez plda bemutatja, hogyan rjk el a Request objektum Honlappts a XXI. szzadban Fggelk ASP.NET Weboldalak Visual Basickel 259
tulajdonsgait s hogyan hvjuk meg a MapPath nev metdust. Ezzel megismerhetjk egy oldal szerveroldali abszolt elrsi tjt.
<table border="1"> <tr> <td>Requested URL</td> <td>Relative Path</td> <td>Full Path</td> <td>HTTP Request Type</td> </tr> <tr> <td>@Request.Url</td> <td>@Request.FilePath</td> <td>@Request.MapPath(Request.FilePath)</td> <td>@Request.RequestType</td> </tr> </table>
8. rhatunk olyan kdot, ami helyettnk dnt .

A dinamikus weboldalak egyik kulcstulajdonsga, hogy kpesek vagyunk eldnteni, mi trtnjen klnbz helyzetekben. Ennek a legltalnosabb mdja a ha (if) parancs (s az opcionlis vagy (else) parancs).
@Code Dim result = "" If IsPost Then result = "This page was posted using the Submit button." Else result = "This was the first request for this page." End If End Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Write Code that Makes Decisions</title> </head> <body> <form method="POST" action="" > <input type="Submit" name="Submit" value="Submit"/> <p>@result</p> </form> </body> </html>
260
Az If IsPost utasts az If IsPost = True utasts rvidtse. Az If utastssal sokfle mdon tesztelhetnk klnfle eseteket, ismtelhetnk kdblokkokat. Ezekrl a ksbbiekben tbbet megtudhatunk:
HTTP GET s POST metdusok s az IsPost tulajdonsg

A HTTP protokoll nagyon kevs olyan metdust tmogat, amivel lekrdeznk a szerverrl. A kt legtbbszr hasznlt a GET, amivel beolvashatunk egy oldalt, a msik pedig a POST, amivel pedig elkldhetnk egy oldalt. ltalban amikor a felhasznl elszr lekr egy oldalt, akkor a lekrdezs a GET metdust hasznlja. Ha a felhasznl kitlt egy rlapot s rklikkel az elkldre, akkor a bngsz egy POST lekrdezst kld a szervernek. A web programozsban nem rt tudnunk, hogy egy oldalt ppen GET vagy POST metdussal krnek le, ugyanis ebbl tudhatjuk meg, hogyan dolgozzuk fel az oldalt. Az ASP.NET weboldalaknl hasznlhatjuk az IsPost tulajdonsgot, hogy megtudjuk a lekrdezs GET vagy POST tpus-e, ugyanis ha a lekrdezs POST tpus, akkor az IsPost tulajdonsg visszatrsi rtke igaz (true) lesz, ekkor megtehetnk olyan dolgokat, mint pldul egy szvegdoboz rtknek kiolvassa. Ebben a knyvben sok olyan pldt tallunk, ami bemutatja, hogyan dolgozzunk fel egy weboldalt az IsPost tulajdonsgtl fggen.
Egyszer pldakdok
A kvetkez pldkbl megismerhetjk az alapszint programozsi technikkat. Ebben a pldban egy olyan weboldalt ksztnk, amiben a felhasznl megad kt szmot, majd az oldal sszeadja s megjelenti az eredmnyt. 1. Hozzunk ltre egy AddNumbers.vbhtml fjlt! 2. Msoljuk bele a kvetkez kdot s markupot, fellrva brmit, amit az oldal tartalmazott!
@Code Dim total = 0 Dim totalMessage = "" if IsPost Then ' Retrieve the numbers that the user entered. Dim num1 = Request("text1") Dim num2 = Request("text2") ' Convert the entered strings into integers numbers and add. total = num1.AsInt() + num2.AsInt() totalMessage = "Total = " & total End If End Code
261
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Adding Numbers</title> <style type="text/css"> body {background-color: beige; font-family: Verdana, Ariel; margin: 50px; } form {padding: 10px; border-style: solid; width: 250px;} </style> </head> <body> <p>Enter two whole numbers and click <strong>Add</strong> to display the result.</p> <p></p> <form action="" method="post"> <p><label for="text1">First Number:</label> <input type="text" name="text1" /> </p> <p><label for="text2">Second Number:</label> <input type="text" name="text2" /> </p> <p><input type="submit" value="Add" /></p> </form> <p>@totalMessage</p> </body> </html>
Pr dolog, amire figyelni kell: A @ jel kezdi meg az oldalunk els kdblokkjt, de megtallhat a totalMessage begyazott vltoznk eltt is. Az oldal elejn tallhat kdblokk Code s End Code kz van zrva. A total, num1, s num2 vltozk klnfle szmokat trolnak, a totalMessage pedig szveget trol. A szvegrtk, amit a totalMessage vltozban trolunk, idzjelek kz van tve. Mivel a Visual Basic nem klnbztet meg kis s nagy betket, amikor az oldal vge fel hasznljuk a totalMessage vltozt, csak arra kell gyelnnk, hogy a betzse ugyanaz legyen, mint ahogy az oldal elejn deklarltuk. A num1.AsInt()+num2.AsInt() kifejezs bemutatja, hogyan dolgozzunk objektumokkal s metdusokkal. Az AsInt metdus talaktja a vltozkban tallhat szveg rtket szmm (intergerr), amiket ezek utn ssze lehet adni. A <form> cmke tartalmaz egy method=post tulajdonsgot. Ez hatrozza meg, mikor klikkel a felhasznl az Add(sszeads) gombra,ekkor az oldalt elkldjk a szervernek a HTTP POST metdus segtsgvel. Ha elkldtk az oldalt, s az If IsPost visszatrsi rtke igaz (true) lesz, akkor lefut az oldal kdja s megjelenti az sszeadott szmokat.
3. Mentsk el az oldalt, s nyissuk meg egy bngszben! (Bizonyosodjunk meg arrl, hogy az oldal ki van vlasztva a Files nvtrben!) rjunk be kt egsz szmot, majd klikkeljnk az Add gombra!
262
A Visual Basic programozsi nyelv s szintaxisa

A 2. fejezetben egyszer pldn keresztl lthattuk hogyan kell ASP.NET weboldalt kszteni, s hogyan adhatunk hozz szerver kdot a HTML markuphoz. A knyvnek ebben a rszben megtanuljuk, hogyan rjunk Razor szintaxist hasznl ASP.NET szerver kdot Visual Basicben. Ha mr van nmi tapasztalatunk a programozs tern (fknt, ha mr programoztunk C-ben, C++ban, C#-ban, Visual Basicben, vagy esetleg JavaScriptben), akkor az itt olvashat anyag nagyrszt ismers lehet. Ha gy van, akkor valsznleg csak azt kell megszoknunk, hogy a .vbhtml fjloknl hogyan adjuk hozz a markuphoz a WebMatrix kdot.
Alap szintaxis Szveg, markup s kd egyestse kdblokkokban

A szerver kdblokkokban srn szeretnnk kiratni az oldalra a szvegeinket s a markupot. Ha a kdblokkunk tartalmaz szveget, amit szvegknt szeretnnk megjelenteni, akkor az ASP.NET-nek kpesnek kell lennie megklnbztetni a szveget a kdtl. Ezt klnbz mdokon rhetjk el. Tegyk a szveget HTML elemek kz, mint pldul <p></p> vagy <em></em>:
@If IsPost Then ' Ebben a sorban minden tartalom <p> cmkk kztt van. @<p>Hello, the time is @DateTime.Now and this page is a postback!</p> Else ' Itt a szvegek vannak cmkk kztt, majd csak utna a szerver kd. @<p>Hello, <em>Stranger!</em> today is: </p> @DateTime.Now End If
Egy HTML elem tartalmazhat szveget, mg tbb HTML elemet s kdot. Ha az ASP.NET rzkeli a kezd HTML cmkt, akkor lekdol mindent, amit az elem tartalmaz, s elkldi a bngsznek.(Termszetesen, ha mg tartalmaz kdot, akkor azt is vgrehajtja.) Hasznljuk a @: opertort vagy a <text> elemet. A @: segtsgvel egy sor szveget vagy prostatlan HTML cmkket rathatunk ki. A <text> elem segtsgvel tbb sort is
263
kirathatunk. Ezek a mdszerek akkor hasznosak, ha egy HTML elemet a kimeneten nem akarunk megjelenteni.
@If IsPost Then ' Sima szveg prostatlan HTML cmkvel s kddal. @:The time is: <br /> @DateTime.Now ' Kd aztn sima szveg, prostott cmkk,s mg tbb szveg. @DateTime.Now @:is the <em>current</em> time. End If
A kvetkez plda megegyezik az elzvel, csak itt <text> cmkt hasznlunk.

@If IsPost Then @<text> The time is: <br /> @DateTime.Now @DateTime.Now is the <em>current</em> time. </text> End If
A kvetkez pldban hasznlunk szveget, prostatlan HTML cmkket, programkdot s prostott HTML cmkket, amiket <text> s </text> kz zrunk. Termszetesen a sorokat kln-kln rva is mkdne a kd, csak hasznlni kellene a @ opertort minden sor eltt.
@Code dim minTemp = 75 @<text>It is the month of @DateTime.Now.ToString("MMMM"), and it's a <em>great</em> day! <p>You can go swimming if it's at least @minTemp degrees.</p></text> End Code
Megjegyzs: Ha a szveget HTML elemmel, @ opertorral vagy <text> elemmel jelentjk meg, az ASP.NET nem HTML kdolja. (Termszetesen ahogy mr megjegyeztk, az ASP.NET a kd kifejezseket s a @ utn rt kd blokkokat lekdolja, kivtelek az itt felsorolt specilis esetek.)
res helyek
A plusz res helyek a programkdban (stringen kvl) nem vltoztatjk annak lefutst.
@Code Dim personName= "Smith" End Code
Hossz utastsok tbb sorba trdelse

Egy hossz parancsot a sor vgre elhelyezett alulvons _ karakterrel tudunk tbb sorba trdelni (Visual Basicben folytats karakter). Ahhoz, hogy hasznljuk a sortrst, az _ el tegynk egy szkzt, majd folytassuk a parancsot a kvetkez sorban! Az olvashatsg rdekben a parancsokat annyi sorba trdelhetjk, amennyibe csak szeretnnk.
@Code Dim familyName _ ="Smith" End Code @Code Dim _ theName _ = _ "Smith" End Code
Arra vigyzzunk, hogy a string szvegeket nem trdelhetjk tbb sorba! A kvetkez plda ezt a hibt mutatja be.
@Code ' Doesn't work.
264
Dim test = "This is a long _ string" End Code
Ha esetleg mgis szksg lenne arra, hogy egy hossz szveget tbb sorba trdeljnk, az s (&) jelet kell hasznlnunk. Errl a fejezet egy ksbbi rszben olvashatunk.
Megjegyzsek a kdban
A kdjainkban elhelyezhetnk megjegyzseket magunknak vagy msoknak. A Razor syntax megjegyzsek @*-gal kezddnek s *@-cal zrulnak.
@* Ez egy egysoros megjegyzs. *@ @* Ez egy tbbsoros megjegyzs. A sorok szma nincs megszabva. *@
A kdblokkokban hasznlhatjuk a Razor syntax megjegyzseket vagy kznsges Visual Basic jellst, ami egy szimpla idzjel () minden sor elejn.
@Code ' Minden sor elejre tegynk egy -t megjegyzs ksztshez. End Code @Code ' A Visual Basicben nincs tbbsoros megjegyzs. ' Ezrt hasznlunk minden megjegyzs eltt egy jelet. End Code
Vltozk
A vltoz adatok/rtkek trolsra alkalmas objektum. Egy vltoz neve akrmi lehet, csak arra kell figyelni, hogy betvel kezddjn, s nem tartalmazhat szkzt vagy elre lefoglalt karaktereket. Ahogy mr az elzekben lthattuk, nem szmt, hogy kis- vagy nagybetsek.
Vltozk s adattpusok
A vltozknak lehet egy megadott adattpusuk, amik megadjk, hogy milyen adatokat tartalmazhatnak. A string vltozk szvegesek (pl Hell vilg), az integer vltozkban egsz szmokat tallhatunk (pl 3 vagy 79), a date vltozkban pedig dtum rtkeket trolhatunk klnbz formtumokban (pl 4/12/2010 vagy mrcius 2009). Termszetesen mg sokfle adattpust hasznlhatunk. Azonban egy vltoznak nem ktelez tpust megadni. A legtbb esetben az ASP.NET kitallja, hogy a vltoz milyen adatknt van hasznlva. (Esetenknt meg kell adnunk egy tpust, a knyvben tallhat pldkbl kiderl, mikor.) Hogy deklarljunk egy tpus nlkli vltozt, hasznljuk a Dim kulcsszt s rjuk utna a vltoz nevt (Pl Dim myVar). Ahhoz, hogy tpussal rendelkez vltozt hozzunk ltre hasznljuk a Dim kulcsszt s rjuk utna a vltoz nevt, majd hasznljuk az As kulcsszt s utna rjuk a tpus nevt (Pl Dim myVar As String).
@Code ' Szveget adunk meg a vltoznak. Dim greeting = "Welcome" ' Szmot adunk meg a vltoznak. Dim theCount = 3 ' Egy kifejezst adunk meg a vltoznak. Dim monthlyTotal = theCount + 5 ' Dtumot adunk meg a vltoznak.
265
Dim today = DateTime.Today ' Az aktulis oldal URL-jt adjuk meg a vltoznak. Dim myPath = Request.Url ' Vltozk deklarlsa explicit adattpusokkal. Dim name as String = "Joe" Dim count as Integer = 5 Dim tomorrow as DateTime = DateTime.Now.AddDays(1) End Code
A kvetkez pldban olyan begyazott kifejezseket lthatunk, amik felhasznljk a weboldal vltozit.
@Code ' Vltozk rtkeinek begyazsa a HTML markupba. ' A markup el tegynk @-ot, mert ez egy kdblokk. @<p>@greeting, friends!</p> End Code  <p>The predicted annual total is: @( monthlyTotal * 12)</p>  <p>The URL to this page is: @myPath</p>
Adattpusok konvertlsa s tesztelse

Annak ellenre, hogy az ASP.NET ltalban automatikusan meg tudja hatrozni az adattpusokat, nha mgsem sikerl. Ilyenkor besegtnk egy explicit tkonvertlssal. Mg akkor is, ha nincs szksg tkonvertlsra, nha hasznos lehet, ha tudjuk, hogy milyen tpus adatokkal dolgozunk. A legltalnosabb eset, hogy string-et konvertlunk t ms tpuss, mint pldul integerre, vagy datere. A kvetkez plda egy tipikus esetet mutat be, amiben stringbl szmot csinlunk.
@Code Dim total = 0 Dim totalMessage = "" if IsPost Then ' Retrieve the numbers that the user entered. Dim num1 = Request("text1") Dim num2 = Request("text2") ' Convert the entered strings into integers numbers and add. total = num1.AsInt() + num2.AsInt() totalMessage = "Total = " & total
266
End If End Code
A felhasznl minden adatot stringknt ad meg. Mg akkor is, ha a felhasznltl szmot krnk, s k azt is rtak be, az elkldtt adat string lesz. Ebbl addik, hogy azt szmm kell konvertlnunk. Mivel az ASP.NET nem tud kt stringet sszeadni, ha a pldnkban ssze akarnnk adni az rtkeinket anlkl, hogy, tkonvertlnnk ket, a kvetkez hibazenetet kapnnk.
Cannot implicitly convert type 'string' to 'int'.
Az rtkek integerr konvertlshoz az AsInt metdust hasznljuk. Ha a konvertls sikeres, ssze tudjuk adni a kt szmot. A kvetkez tblzat tartalmazza a vltozk gyakori konvertlsait s tesztelsi metdusait. Metdus
AsInt(), IsInt()
Lers Egy stringet, ami egy egsz szmnak felel meg tkonvertl integerr tkonvertl egy igaz vagy hamis stringet boolean tpuss. Egy string-bl, aminek decimlis rtke van (1,3) float-ot (lebegpontos) konvertl. tkonvertl egy decimlis rtk stringet (1,3) egy decimlis szmm. (Az ASP.NET-ben a decimlis szm pontosabb, mint a float. tkonvertl egy stringet ami dtum s id rtk az ASP.NET DateTime tpuss. Brmilyen adatot stringg konvertl.
Plda
Dim myIntNumber = 0 Dim myStringNum = "539" If myStringNum.IsInt() Then myIntNumber = myStringNum.AsInt() End If Dim myStringBool = "True" Dim myVar = myStringBool.AsBool() Dim myStringFloat = "41.432895" Dim myFloatNum = myStringFloat.AsFloat()
AsBool(), IsBool()
AsFloat(), IsFloat()
AsDecimal(), IsDecimal()
Dim myStringDec = "10317.425" Dim myDecNum = myStringDec.AsDecimal()
AsDateTime(), IsDateTime()
Dim myDateString = "12/27/2010" Dim newDate = myDateString.AsDateTime()
ToString()
Dim num1 As Integer = 17 Dim num2 As Integer = 76 ' myString is set to 1776 Dim myString as String = num1.ToString() & num2.ToString()
267
Opertorok
Az opertor olyan kulcssz vagy karakter, ami megmondja az ASP.NET-nek, hogy milyen parancsot hajtson vgre egy-egy kifejezsben. A Visual Basic sokfle opertort tmogat, de csak prat kell ismernnk ahhoz, hogy elkezdhessnk ASP.NET weboldalakat kszteni. A kvetkez tblzatban megismerhetjk a leggyakoribb opertorokat. Opertor
.
Lers Pont. Arra hasznljuk, hogy megklnbztessk az objektumokat s azok tulajdonsgait, illetve metdusait. Zrjelek. Kifejezseket csoportosthatunk velk, paramtereket adhatunk t metdusoknak, s tmbk, listk, gyjtemnyek elemeit rhetjk el. rtkads s egyenlsg. Kontextustl fggen vagy a kifejezs jobb oldaln tallhat rtket a kifejezs bal oldaln tallhat objektumnak rtkl adjuk, vagy egyenlsget vizsglunk kzttk. Tagads. Az igaz (true) rtket megfordtja hamisra (false) s fordtva. ltalban gyors mdszerknt hasznljuk hamissg vizsglatra (vagyis tagadva igaz). Egyenltlensg. Visszatrsi rtke igaz(true), ha az rtkek nem egyenlk. Kisebb, mint
Pldk
Dim myUrl = Request.Url Dim count = Request("Count").AsInt()
()
@(3 + 7) @Request.MapPath(Request.FilePath)
Dim age = 17 Dim income = Request("AnnualIncome")
Not
Dim taskCompleted As Boolean = False ' Processing. If Not taskCompleted Then ' Continue processing End If
<>
Dim theNum = 13 If theNum <> 15 Then ' Do something. End If If 2 < 3 Then
<
268
> <= >=
Nagyobb mint Kisebb vagy egyenl, Nagyobb vagy egyenl..
' Do something. End If Dim currentCount = 12 If currentCount >= 12 Then ' Do something. End If @(5 + 13) Dim netWorth = 150000 Dim newTotal = netWorth * 2 @(newTotal / 2) ' The displayed result is "abcdef". @("abc" & "def") Dim myTaskCompleted As Boolean = false Dim totalCount As Integer = 0 ' Processing. If (Not myTaskCompleted) AndAlso totalCount < 12 Then ' Continue processing. End If Dim theCount As Integer = 0 theCount += 1 ' Adds 1 to count
+ * / &
Matematikai opertorok, szmolsoknl hasznljuk ket. sszelncols. Stringeket fznk ssze vele. Logikai S s VAGY mvelet, amikkel feltteleket ktnk ssze.
AndAlso OrElse
+= -=
A nvels s cskkents opertorok. Hozzadunk vagy kivonunk 1-et egy vltoz rtkbl.
Fjlok s mappk hasznlata a kdban

A kdjainkban srn fogunk hasznlni fjl s mappa elrsi utakat. Ebben a pldban egy weboldal fizikai mappastruktrjt lthatjuk, ahogy megjelenhet a weblapot fejleszt szmtgpen.
C:\WebSites\MyWebSite default.cshtml datafile.txt \images Logo.jpg \styles Styles.css
Egy webszerveren, minden weboldalnak van egy virtulis mappastruktrja, ami megfelel az oldalunk fizikai mappastruktrjnak. Alaprtelmezetten a virtulis s a fizikai mappanevek megegyeznek. A virtulis gykrknyvtrat egy perjel (/) jelli, pont gy, mint ahogy a szmtgpnkn C: meghajt gykrknyvtrt fordtott perjel (\) jelli. (A virtulis mappa elrsi utakat mindig sima perjellel jelljk.) A kvetkez pldban bemutatjuk a virtulis s fizikai elrsi tjt az elz pldban lthat StyleSheet.css fjlnak. Fizikai elrsi t: C:\WebSites\MyWebSiteFolder\styles\StyleSheet.css Virtulis elrsi t (a virtulis gykrknyvtrtl /): /styles/StyleSheet.css
269
Amikor fjlokkal s mappkkal dolgozunk a kdunkban, az alkalmazott objektumtl fggen nha virtulis, nha fizikai elrsi utakat hasznlunk. Az ASP.NET-ben sokfle mdszer ll rendelkezsnkre, hogy fjlokat s mappkat hasznljunk a kdunkban. Ezek lehetnek: a ~ opertor, a Server.MapPath metdus s a Href metdus.
A ~ opertor: a virtulis gykrknyvtr be olvassa

Hogy kdunkban megadjuk a fjljaink s mappink virtulis gykert, hasznljuk a ~ opertort! Ez azrt hasznos, mert gy szabadon mozgathatjuk a weboldalunkat anlkl, hogy a kdban szerepl elrsi utakat megzavarnnk.
@Code Dim myImagesFolder = "/images" Dim myStyleSheet = "/styles/StyleSheet.css" End Code
A Server.MapPath metdus: A virtulis elrsi t fizikaiv konvertlsa

A Server.MapPath metdus egy virtulis elrsi tbl (pl /default.cshtm) abszolt fizikai elrsi utat (pl C:\WebSites\MyWebSiteFolder\default.cshtml) konvertl. Ezt a metdust olyan feladatok elvgzsre hasznlhatjuk, amik teljestshez fizikai elrsi tra van szksg, mint pldul egy a webszervernkn tallhat szvegfjl olvassa vagy rsa.(Egy kiszolgl szerveren ltalban nem ismerjk weboldalunk fizikai elrsi tjt.) A metdus gy mkdik, hogy egy fjl vagy mappa virtulis elrsi tjt tadjuk neki, s visszatrsi rtkknt megadja a fizikai elrsi utat.
@Code Dim dataFilePath = "/dataFile.txt" End Code  <p>@Server.MapPath(dataFilePath)</p>
A Href metdus: Elrsi utak ltrehozsa az oldal forrsaihoz

A WebPage objektum Href metdusa tkonvertlja azokat az elrsi utakat, amiket a szerverkdunkban hozunk ltre (tartalmazhat ~ opertort), olyan elrsi utakk, amiket a bngsznk rtelmezni tud. (A bngsz nem tudja rtelmezni a ~ opertort mivel az szigoran ASP.NET opertor. Arra is hasznlhatjuk mg a Href metdust, hogy elrsi utakat ksztsnk olyan forrsokhoz, mint pldul kpfjlok, ms weboldal, s CSS fjlok. Pldul hasznlhatjuk ezt a metdust arra, hogy egy HTML markupban attribtumokat adjuk egy <img>,<link>, s egy <a> elemnek.
@Code Dim myImagesFolder = "/images" Dim myStyleSheet = "/styles/StyleSheet.css" End Code  <img src="@Href(myImagesFolder)/Logo.jpg" />  <img src="@Href("/images")/Logo.jpg" />  <link rel="stylesheet" type="text/css" href="@Href(myStyleSheet)" />
Logikai felttelek s ciklusok
270
ASP.NET kdban rhatunk olyan parancsokat, amik bizonyos felttelektl fggenek, vagy akr olyan kdot, ami egy meghatrozott alkalommal megismtli nmagt.
Felttelek tesztelse
Hogy egyszer feltteleket teszteljnk, hasznljuk az IfThen parancsot! Ennek visszatrsi rteke lehet igaz vagy hamis a felttelnktl fggen.
@Code Dim showToday = True If showToday Then DateTime.Today End If End Code
A teszt blokk az If kulcsszval kezddik. A valdi tesztels (felttel) az If kulcssz utn van, ennek lehet a visszatrsi rtke igaz vagy hamis. Ezutn kvetkezik a Then kulcssz, ez lesz az a rsz, ami lefut, ha a felttelnk (ami If s End if kz van zrva) visszatrsi rtke igaz lesz. Az If parancs egy Else gat is tartalmazhat, arra az esetre, ha felttelnk visszatrsi rtke hamis lenne.
@Code Dim showToday = False If showToday Then DateTime.Today Else @<text>Sorry!</text> End If End Code
Ha a kdblokkunkat az If utastssal kezdjk, nincs szksg a megszokott CodeEnd Code pros hasznlatra, elg, ha a@ jelet hasznljuk. Ez a megolds nemcsak az If-fel mkdik, hanem minden olyan Visual Basic programozsi kulcsszval, amit kdblokk kvet.(For, For each, Do Whilestb.)
@If showToday Then DateTime.Today Else @<text>Sorry!</text> End If
Egy vagy tbb ElseIf blokk hasznlatval akr tbb felttelt is megadhatunk.
@Code Dim theBalance = 4.99 If theBalance = 0 Then @<p>You have a zero balance.</p> ElseIf theBalance > 0 AndAlso theBalance <= 5 Then ' If the balance is above 0 but less than ' or equal to $5, display this message. @<p>Your balance of $@theBalance is very low.</p> Else ' For balances greater than $5, display balance. @<p>Your balance is: $@theBalance</p> End If End Code
A kvetkez pldban lthatjuk, hogy ha az If gunk felttele nem teljesl, akkor az ElseIf gunk felttelt vizsgljuk meg. Ha ez a felttel teljesl, az ElseIf g fog lefutni, ha azonban egyik felttel se teljesl, akkor az Else g. Egy If g mell vgtelen szm ElseIf gat hasznlhatunk, az a lnyeg, hogy egy Else ggal zrjuk le, ugyanis ez felel meg a brmi ms felttelnek. Sok felttel esetn hasznljuk a Select Case blokkot:
@Code Dim weekday = "Wednesday"
271
Dim greeting = "" Select Case weekday Case "Monday" greeting = "Ok, it's a marvelous Monday." Case "Tuesday" greeting = "It's a tremendous Tuesday." Case "Wednesday" greeting = "Wild Wednesday is here!" Case Else greeting = "It's some other day, oh well." End Select End Code <p>Since it is @weekday, the message for today is: @greeting</p>
Az ellenrizend vltozt idzjelezni kell (A pldnkban a weekday vltoz) Minden esetben egy Case parancsot hasznlunk, amit a vltoz egy lehetsges rtke kvet. Ha valamelyik rtk megegyezik a letesztelt rtkkel, akkor abban a Case gban lev kd fut le. Az utols kt plda gy jelenik meg a bngszben:
Kd ismtlse (Ciklusok)
Srn van arra szksg, hogy egy-egy parancsot tbbszr is lefuttathassunk. Ezt ciklusok hasznlatval rjk el. Pldul sokszor kell egy parancsot egy adattmb minden elemre lefuttatnunk. Ha tudjuk, hogy hnyszor szeretnnk ismtelni, akkor hasznljuk a For ciklust, mivel ez a ciklus nagyon hasznos ha elre vagy htrafele szeretnnk szmolni.
@For i = 10 To 20 @<p>Item #: @i</p> Next i
A ciklus a For kulcsszval kezddik, majd hrom fontos rsz kveti. kulcssz utn deklarlunk egy szmllknt hasznlatos vltozt (nincs szksg Dim-re), majd megadjuk a szmlls kerett, pldul i=10 to 20. Ez azt jelenti, hogy az i vltoznk 10-tl 20-ig fog elszmolni. A For s a Next kulcsszavak kztt van a tartalmi rsz. Ez egy vagy tbb parancsot tartalmazhat, ami lefut minden egyes ismtlskor. A Next i utasts zrja le a ciklust. Megnveli a szmllt s elindtja a ciklus kvetkez itercijt.
For
272
A For cikluson bell a markup minden egyes itercikor ltre hoz egy j bekezdst (<p> elem) s belltja a betmretet az i (a szmll) rtkre. Ha megnyitjuk ezt a pldt, akkor 11 sornyi szveget fogunk ltni, amiben minden sor egy szmmal nagyobb, mint az elz.
Ha tmbkkel vagy listkkal dolgozunk, akkor srn fogunk For Each ciklust hasznlni. A lista hasonl objektumok gyjtemnye, s a For Each segtsgvel feladatokat hajthatunk vgre minden elemn. Ez a tpus ciklus azrt hasznos a listknl, mert nincs szksg szmllra vagy belltott hatrra. Ehelyett a For Each vgig megy a listn elejtl a vgig. A kvetkez plda visszaadja a Request.ServerVariables lista elemeit (informcik a webszerverrl). Arra hasznljuk a For Each ciklust, hogy a lista minden elemnek a nevt megjelentsk egy HTML listban egy j <li> elemknt.
<ul> @For Each myItem In Request.ServerVariables @<li>@myItem</li> Next myItem </ul>
A For Each kulcsszt egy vltoz kveti, ami a lista egy elemnek felel meg (pl Myitem), ezt kveti az In kulcssz, majd a lista, amin a ciklusunkat le szeretnnk futtatni. A cikluson bell a lista vltozval mindig az ppen aktulis listaelemet rhetjk el.
273
A Do While utasts segtsgvel sokkal ltalnosabb cl ciklusokat kszthetnk:

@Code Dim countNum = 0 Do While countNum < 50 countNum += 1 @<p>Line #@countNum: </p> Loop End Code
Ez a ciklus a Do While-lal kezddik, majd megadjuk a felttelt, s ezt kveti az ismtelni akart blokk. A ciklusok egy szmolsra hasznlt vltozt vagy objektumot tipikusan vagy nvelnek, vagy cskkentenek. A pldnkban akrhnyszor lefut a ciklus, a += opertor mindig hozzad 1-et a vltozhoz. (Ha cskkenteni szeretnnk a vltozt, akkor a -= opertort kellene hasznlni.)
Objektumok s gyjtemnyek
Az ASP.NET weboldalak szinte minden rsze objektum, mg maga a weboldal is. Ebbl a rszbl megismerhetjk a fontosabb objektumokat.
Oldal objektumok
Az ASP.NET ben a legalapvetbb objektum az oldal. Egy oldal tulajdonsgait kzvetlenl elrhetjk, anlkl, hogy brmilyen ms objektumot kellene hasznlnunk, a kvetkez kd a Request objektum segtsgvel beolvassa az oldal elrsi tjt:
@Code Dim path = Request.FilePath End Code
A Page objektum tulajdonsgaival sok informcihoz juthatunk hozz, mint pldult:
274
(Krelem). Ahogy mr lthattuk, ez a gyjtemny informcikat trol az ppen aktulis lekrdezsrl, azt is belertve, hogy milyen bngsz indtotta a lekrdezst, mi a megtekinteni kvnt oldal URL-je, ki a felhasznl stb. Response (Vlasz). Ez azoknak az informciknak a gyjtemnye, amiket visszakld az oldal a bngsznknek, amikor lefutott a szerveroldali kd. Hasznlhatjuk ezt a tulajdonsgot pldul arra, hogy informcikat helyezznk el a vlaszba.
Request
@Code ' Access the page's Request object to retrieve the URL. Dim pageUrl = Request.Url End Code <a href="@pageUrl">My page</a>
Gyjtemny objektumok (Listk, tmbk)

Az ugyanolyan tpus objektumok csoportjt nevezzk gyjtemnynek. Erre tkletes plda a Customer (vsrlk) objektumok gyjtemnye egy adatbzisbl. Az ASP.NET-ben sok beptett gyjtemny tallhatunk, mint pldul a Request.Files gyjtemny. Kt megszokott gyjtemny tpus a tmb s a sztrrtk. A lista akkor hasznos, ha hasonl dolgokat akarunk egytt trolni, de nem akarunk minden elemhez kln vltozt ltrehozni.
<h3>Team Members</h3> @Code Dim teamMembers() As String = {"Matt", "Joanne", "Robert", "Nancy"} For Each name In teamMembers @<p>@name</p> Next name End Code
Minden tmbnek van egy megadott adattpusa, mint pldul String, Integer vagy DateTime. A vltoz neve utn rt zrjelekkel jelezzk, hogy a vltoznk tmb (pl. Dim myVar() as String). A tmbben trolt elemeket az indexket hasznlva rhetjk el, vagy egy For Each ciklussal. A tmbk indexei 0-val kezddnek, vagyis a tmb els elemnek az indexe 0, a msodiknak 1, s gy tovbb.
@Code Dim teamMembers() As String = {"Matt", "Joanne", "Robert", "Nancy"} @<p>The number of names in the teamMembers array: @teamMembers.Length </p> @<p>Robert is now in position: @Array.IndexOf(teamMembers, "Robert")</p> @<p>The array item at position 2 (zero-based) is @teamMembers(2)</p> @<h3>Current order of team members in the list</h3> For Each name In teamMembers @<p>@name</p> Next name @<h3>Reversed order of team members in the list</h3> Array.Reverse(teamMembers) For Each reversedItem In teamMembers @<p>@reversedItem</p> Next reversedItem End Code
Egy tmb hosszt, vagyis hogy hny elem, a Length tulajdonsgbl tudhatjuk meg. Ha szeretnnk egy megadott rtk helyt meghatrozni a tmbben, akkor az Array.IndexOf metdust hasznljuk. De ha gy akarjuk, meg is fordthatjuk a tmb tartalmt (Array.Reverse metdus) vagy akr szt is vlogathatjuk (Array.Sort metdus). Honlappts a XXI. szzadban Fggelk ASP.NET Weboldalak Visual Basickel
275
A string tmbnk gy jelenik meg a bngszben:
A tr (sztrrtk) nem ms, mint kulcs/rtk prok gyjtemnye, ezekben elg megadni a kulcsot (vagy nevet), hogy belltsuk vagy beolvassuk a hozztartoz rtket:
@Code Dim myScores = New Dictionary(Of String, Integer)() myScores.Add("test1", 71) myScores.Add("test2", 82) myScores.Add("test3", 100) myScores.Add("test4", 59) End Code <p>My score on test 3 is: @myScores("test3")%</p> @Code myScores("test4") = 79 End Code <p>My corrected score on test 4 is: @myScores("test4")%</p>
A New kulcsszval jelezzk, hogy j Tr (sztrrtk) objektumot akarunk ltrehozni. A Dim kulcsszval egy vltozhoz fzhetjk a trunkat. A trban hasznlt adattpusokat zrjelek kz kell tennnk, s a deklarls vgre mg egy zrjel prt kell tenni, mivel amit rtunk, igazbl egy metdus, ami egy j trat hoz ltre. Ahhoz, hogy j elemeket adjunk a trunkhoz, meghvhatjuk a tr Add metdust, s megadjuk hozz a kulcs/rtk prt. A kvetkez pldban lthatjuk az rtkads egy alternatvjt:
@Code myScores("test4") = 79 End Code
276
Hogy rtket olvassunk ki a trunkbl, zrjelezzk az elrni kvnt kulcsot:

@myScores("test4")
Paramterekkel elltott metdusok hvsa

Ahogy a fejezet korbbi rszeiben lthattuk, az objektumok metdusokkal rendelkezhetnek. Pldul a DataBase objektum tartalmazhat egy DataBase.Connect metdust. Lteznek olyan metdusok, amiknek egy vagy tbb paramtere is van. A paramter olyan rtk, amit azrt adunk t egy metdusnak, hogy az sikeresen le tudjon futni. Erre j plda a Request.MapPath metdus, ami hrom paramterrel is rendelkezik.
Public Overridable Function MapPath (virtualPath As String, _ baseVirtualDir As String, _ allowCrossAppMapping As Boolean)
Ez a metdus visszaadja a megadott virtulis elrsi tnak megfelel fizikai elrsi utat. A metdus hrom paramtere a virtualPath, baseVirtualDir s az allowCrossAppMapping. (Megjegyzs: a deklarlsnl a paramterek azokkal az adattpusokkal jelennek meg, amiket elfogadnak.) Amikor meghvjuk ezt a metdust, mindhrom paramtert meg kell adnunk. Amikor Razor szintaxissal hasznljuk a Visual Basicet, ktfle mdon adhatunk t paramtereket, helyzeti s nvszerinti paramterekknt. Hogy helyzeti paramterek hasznlatval hvjunk meg egy metdust, a metdus deklarlsnl lthat sorrendben kell megadni a paramtereket (a metdus dokumentcijbl kiderl). Ehhez a sorrendhez mindenkpp tartanunk kell magunkat, nem cserlhetjk fel a paramtereket, s nem hagyhatunk ki paramtereket (ha mgis szksges, akkor null rtket vagy res stringet ("") adjunk neki). A kvetkez plda felttelezi, hogy rendelkeznk a web oldalunkon egy script mappval. A kd meghvja a Request.MapPath metdust, s tadja a hrom paramtert a megfelel sorrendben, majd megjelenti a vgeredmnyt.
@Code ' Pass parameters to a method using positional parameters. Dim myPathPositional = Request.MapPath("/scripts", "/", true) End Code <p>@myPathPositional</p>
Amikor egy metdus sok paramterrel rendelkezik, nv szerinti paramterek hasznlatval tisztbban s knnyen olvashatbban tarthatjuk a kdunkat. Hogy nv szerinti paramterekkel hvjunk meg egy metdust, adjuk meg a paramter nevt, majd egy := jel utn adjuk meg az rtkt. A nvszerinti paramterek elnye, hogy akrmilyen sorrendben megadhatjuk ket.(Htrnya hogy a metdushvs sokkal hosszabb lesz (mretben).) Az elz pldban lthat metdust most nvszerinti paramterekkel s eltr sorrendben hvjuk meg:
@Code ' Pass parameters to a method using named parameters. Dim myPathNamed = Request.MapPath(baseVirtualDir:= "/", allowCrossAppMapping:= true, virtualPath:= "/scripts") End Code <p>@myPathNamed</p>
Mint lthatjuk, a paramtereket ms sorrendben adtuk t, ennek ellenre ha lefuttatjuk az elz kt pldt, ugyan azt az rtket fogjk visszaadni.
Hibk kezelse Try-Catch utastsok

Lehetsges, hogy a kdunk tartalmaz olyan utastsokat, amik valamifle hibt generlnak. Pldul: Honlappts a XXI. szzadban Fggelk ASP.NET Weboldalak Visual Basickel
277
Sokfle hiba lphet fel, amikor egy fjlon valamifle mveletet szeretnnk vgrehajtani. Lehet, hogy a fjl nem is ltezik vagy csak olvashat, esetleg a kdunk nem tartalmazza a megfelel jogosultsgokat, s gy tovbb. Hasonlkppen lehetnek jogosultsgi problmk, ha egy adatbzis rekordjain szeretnnk vltoztatni, de az is lehet, hogy elvesztjk a kapcsolatot az adatbzissal, vagy egyszeren csak nem megfelel adatokat akarunk elmenteni, s gy tovbb.
Ezeket a szitucikat programozsi krkben kivteleknek (exception) hvjuk. A kdunk automatikusan generl (dob) egy hibazenetet, ha kivtelbe tkzik.
Hasznljuk Try/Catch utastsokat, amikor kivtelekbe tkznk, vagy csak el akarjuk kerlni az ilyen tpus hibazeneteket. A Try blokkba azt a kdot rjuk, amit ellenrizni szeretnnk, majd ehhez prosthatunk egy vagy tbb Catch-t, ahol klnbz kivteleket kezelhetnk le. Valjban annyi Catch blokkot hasznlhatunk, ahny hibra szmtunk. Megjegyzs: Nem ajnlatos a Response.Redirect metdust hasznlni egy Try/Catch utastsban, mert alapbl ltrehozhat egy kivtelt az oldalunkban. A kvetkez pldban megalkotunk egy oldalt, ami az els lekrdezskor ltrehoz egy szvegfjlt s megjelent egy gombot, amivel a felhasznl megnyithatja azt. A pldban szndkosan hasznlunk rossz fjlnevet, hogy ltrehozzunk egy kivtelt. A kd kt kivtelt kezel: Az egyik a FileNotFoundException vagyis a nem ltez fjl kivtel, ami akkor trtnik, ha a megadott fjlnv hibs vagy nem ltezik. A msodik a DirectoryNotFoundException vagyis a nem ltez mappa kivtel, ami akkor kvetkezik be, amikor az ASP.NET mg a mappt sem tudja megtallni. (Megszntethetjk a megjegyzseket az egyik utastsban, hogy lssuk, milyen, amikor minden jl mkdik.) Ha a kdunk esetlegesen nem kezelne egy kivtelt, akkor olyan hiba oldalt jelentene meg, amit az elz kpen lthattunk. Azonban a Try/Catch rszek segtenek megakadlyozni az ilyen tpus hibazeneteket.
@Code Dim Dim Dim Dim Dim dataFilePath = "/dataFile.txt" fileContents = "" physicalPath = Server.MapPath(dataFilePath) userMessage = "Hello world, the time is " + DateTime.Now userErrMsg = ""
278
Dim errMsg = "" If IsPost Then ' A felhasznl rklikkel a megnyitsra s elkldi az oldalt ' majd megprblja megnyitni a fjlt. Try ' Hibs kd, mivel rossz az elrsi t. fileContents = File.ReadAllText("c:\batafile.txt") ' Ez a mkd kd, ' Tegyk megjegyzss az elz sort, s ezt aktivljuk: ' fileContents = File.ReadAllText(physicalPath) Catch ex As FileNotFoundException ' A kivtel objektumot hasznlhatjuk debuggolsra, logolsra,stb. errMsg = ex.Message ' Ltrehoz egy felhasznlbart hibazenetet. userErrMsg = "The file could not be opened, please contact " _ & "your system administrator." Catch ex As DirectoryNotFoundException ' Hasonlt az elz kivtelhez. errMsg = ex.Message userErrMsg = "The file could not be opened, please contact " _ & "your system administrator." End Try Else ' Ltrehoz egy szveg fjlt, amikor elszr lekrik az oldalt. File.WriteAllText(physicalPath, userMessage) End If End Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Try-Catch Statements</title> </head> <body> <form method="POST" action="" > <input type="Submit" name="Submit" value="Open File"/> </form> <p>@fileContents</p> <p>@userErrMsg</p> </body> </html>

ASP.NET Visual Basic programozsi nyelv
279
Fggelk ASP.NET weboldalak programozsa Visual Studiban

A fggelkben megtudhatjuk, hogyan hasznlhatjuk a Visual Studio 2010-et vagy a Visual Web Developer 2010 Expresst az ASP.NET weboldalak programozsra a RazorSyntaxszal. Megtudhatjuk: Hogyan teleptsk a Visual Web Developer 2010 Expresst s az ASP.NETRazorToolst (benne az ASP.NET MVC3 ReleaseCandidate-et is)? Hogyan hasznlhatjuk a Visual StudioASP.NET-tel kapcsolatos funkciit: az IntelliSense-t s a debuggert?
Mirt vlasszuk a Visual Studit?

Az ASP.NET weboldalaknak a RazorSyntaxszal val programozsra hasznlhatjuk a WebMatrixot s sok ms szerkesztt. Hasznlhatjuk a Microsoft Visual Studio 2010-et, mely egy teljes funkcionalitssal br integrlt fejlesztkrnyezet (integrateddevelopmentenvironment IDE), mely rengeteg hasznos eszkzzel segt minket alkalmazsaink (nem csak weboldalak) fejlesztsben. Ha ASP.NETRazor weboldalakkal szeretnnk dolgozni, megvsrolhatjuk a Visual Studio teljes verzijt, vagy hasznlhatjuk az ingyenes Visual Web Developer Express edition-t. Kt lnyeges funkci, amit a Visual Studio nyjthat neknk ASP.NET oldalak programozsakor: IntelliSense. Gyorsabb teszi a kdok rst azltal, hogy egy-egy parancs begpelse kzben automatikusan kilistzza azokat a lehetsges osztlyokat s metdusokat, amelyeket hasznlhatunk a szerkesztben, s kiegszti a parancsokat is. Debugger. A debugger lehetv teszi a hibakeresst. A program futtats kzben brhol megllthat, kilistzhat az egyes vltozk rtke, s futtathatjuk a kdot sorrl sorra, gy egyszeren megtalljuk, hol hibs a kdunk.
Ezek a funkcik csak a Visual Studiban rhetk el.
Az ASP.NETRazorTools teleptse
Ebben a rszben megtudhatjuk, hogyan teleptsk az ingyenes Visual Web Developer Express 2010-et s az ASP.NET Web PagesToolsfor Visual Studit. 1. Ha mg nem rendelkeznk a Web Platform Installerrel, tltsk le a kvetkez helyrl: http://go.microsoft.com/fwlink/?LinkID=205867 2. Indtsuk el a Web Platform Installert, vlasszuk a Productsot, majd keressk meg az ASP.NET MVC3 ReleaseCandidate-et! Kattintsunk az Add gombra! Ez a termk tartalmazza a Visual Studio eszkzket, melyekkel ASP.NET Razor webhelyeket kszthetnk.
Honlappts a XXI. szzadban Fggelk ASP.NET weboldalak programozsa Visual Studiban
280
3. Ha mg nincs felteleptve a Visual Studio vagy a Visual Studio Express, keressk meg a Visual Web Developer Expresst, majd kattintsunk az Add gombra! 4. Kattintsunk az Install gombra a teleptshez!
Az ASP.NET Razor Tools hasznlata Visual Studioval

Az IntelliSense s a debugger hasznlathoz ksztsnk egy ASP.NETRazorwebhelyet a Visual Studiban. 1. Indtsuk el a Visual Studit vagy a Visual Web Developert! 2. A File menben vlasszuk a New Web Site lehetsget! 3. A megnyl New Web Site ablakban vlasszuk ki a hasznlni kvnt nyelvet (C# vagy Visual Basic)! 4. Vlasszuk az ASP.NET Web Site (Razor) sablont! 5. A Web Locations felirat melletti legrdl menben vlasszuk a File System lehetsget, az elrsi thoz (path) pedig rjuk be egy mappa elrsi tjt a szmtgpen!
281
6. Kattintsunk az OK gombra!
Az IntelliSense hasznlata
Miutn ltrehoztunk egy webhelyet, lthatjuk, hogyan mkdik az IntelliSense. 1. A frissen ltrehozott webhelyen nyissuk meg a Default.cshtml oldalt! Gyzdjnk meg rla, hogy az ablak aljn a Source fl van kivlasztva! 2. Amikor lezrjuk a </p>taget, rjuk be: @ServerInfo. (a pontot is a vgre)! Az IntelliSense megjelenti a lehetsges metdusokat, amiket hasznlhatunk a ServerInfohelperhez.
3. Vlasszuk a GetHtml metdust a listbl, s nyomjuk le az Enter gombot! Az IntelliSense automatikusan kiegszti a parancsot. (A C#-ban brmilyen metdus esetn oda kell rni a () karaktereket a metdus vgre. A teljes kd a GetHtml parancshoz a kvetkezkppen nz ki: @Server.GetHtml() Honlappts a XXI. szzadban Fggelk ASP.NET weboldalak programozsa Visual Studiban
282
4. Nyomjuk le a Ctrl+F5-t az oldal futtatshoz! Az oldal gy jelenik meg a bngszben:
5. Zrjuk be a bngszt, s mentsk a Default.cshtmloldal vltozsait!
A Debugger hasznlata
1. A Default.cshtml oldal tetejn a Page.Title kezdet sor utn rjuk be a kvetkez sort: Var myTime = DateTime.Now.TimeOfDay; 2. A szerkeszt bal oldaln lv szrke terleten kattintsunk a sor melletti rszre, gy ltrehozva egy gynevezett breakpointot! Ez egy olyan jell, mely jelzi a debuggernek, hogy lltsa meg a programot az adott ponton, gy megvizsglhatjuk a program adott rsznek mkdst. 3. Tvoltsuk el a ServerInfo.GetHtml parancsot, s rjunk a helyre egy meghvst a @myTime vltozra! Ez a meghvs megjelenti az aktulis idt az j sorban. A megvltozott kd a kt j sorral s a breakpointtal a kvetkezkppen nz ki:
4. Nyomjuk le az F5-t az oldal debuggerben val futtatshoz! A futtats megll az ltalunk belltott breakpointon. A kvetkez kpen lthatjuk, hogyan jelenik meg az oldal a szerkesztben a breakpointhoz (srgval jellt sor) rve. Lthatjuk tovbb a Debug eszkztrat, illetve a Step Into (sor futtatsa) gombot.
283
5. Kattintsunk a StepInto gombra, vagy nyomjuk le az F11 gombot! Ez futtatja a kd kvetkez sort. Az F11 gomb kvetkez lenyomsval a kvetkez sort futtatjuk, gy soronknt haladhatunk a kdban. 6. Vizsgljuk meg a MyTime vltoz rtkt! Tartsuk az egrmutatt a felirat fltt, vagy nzzk meg a Locals s a CallStack ablakokban! 7. Amikor vgeztnk a vltozk vizsglatval, s lpsenknt vgighaladtunk a programon, nyomjuk meg az F5 gombot a kd megszakts nlkli futtatshoz! Az oldal gy jelenik meg a bngszben:
284
Ha szeretnnk rszletesebben megismerkedni a debuggerrel, vagy szeretnnk megtudni, hogyan hasznljuk a debuggert a Visual Studiban, ltogassunk el a kvetkez cmre, ahol angol nyelv lersokat tallhatunk a debuggerrl: http://msdn.microsoft.com/en-us/library/z9e7w6cs.aspx
285
Nyilatkozat
Ez a dokumentum egy fejleszts alatt ll termkrl szl. Bizonyos informcik s funkcik, belertve a hivatkozsokat s egyb internetes cmeket, elzetes bejelents nlkl megvltoztathatk. Vegye figyelembe ezt a kockzatot! A dokumentumban szerepl pldk csak illusztrcis pldkat szolglnak, s csak kitallt adatokat tartalmaznak. A valsggal val brmilyen egyezs csupn a vletlen mve, nem szndkos. Jelen dokumentum nem ruhzza fel nt semmifle joggal a Microsoft brmely szellemi termkvel kapcsolatosan. A dokumentumot lemsolhatja s felhasznlhatja bels, illetve referencia clokra. Ez a dokumentum a Microsoft tulajdont kpezi. Nyilvnos dokumentum, mely hasznlhat titoktartsi szerzds rtelmben is. 2010 Microsoft. Minden jog fenntartva. A Microsoft a Microsoft group vdjegye. Minden ms vdjegyrl a sajt tulajdonosa rendelkezik.
Honlappts a XXI. szzadban Nyilatkozat
286

Honlapépítés A XXI. Században v1.1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Honlapépítés A XXI. Században v1.1

Uploaded by

Copyright:

Available Formats

Honlappts a XXI.

A HyperText Transfer Protocol ...................................................................................................... 13

A HyperText Markup Language ..................................................................................................... 24

Cascading Style Sheets stluslapok ................................................................................................ 38

HTTP GET s POST metdusok s az IsPost tulajdonsg .......................................................................... 70

Egyszer pldakdok ..................................................................................................................... 70 Programozsi alapfogalmak .......................................................................................................... 72

Flash videk (.swf) lejtszsa ...................................................................................................... 181

1. fejezet Balssy Gyrgy: Bevezets a web programozsba

1. bra - A hlzati csatlakoz a szmtgp htoldaln

2. bra - Hlzati kbel

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

3. bra - Egy 48 portos switch

4. bra - Ngy szmtgp sszektse egy switch segtsgvel

5. bra - Kt alhlzat sszekapcsolsa routerrel

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

A HyperText Transfer Protocol

6. bra - A HTTP krsek s vlaszok

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

8. bra - Egy webes rlap kitltsnek folyamata

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Ez a kezdlap (a Default.aspx oldal) tartalmaz egy kpet, amire a hivatkozs gy trtnik:

200 OK Ez a legjobb s szerencsre leggyakoribb eset.

302 Found (temporary move) A krt tartalom ideiglenesen mshol tallhat.

4xx: Client Error Hiba trtnt, ami valsznleg a kliens hibja.

A kliensnek nincs jogosultsga a krt tartalom elrsre.

5xx: Server Error Hiba trtnt a szerveren.

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

9. bra - Figyelmeztets az Internet Explorerben rvnytelen tanstvny esetn

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

10. bra - A munkamenet azonost a HTTP krsekben s vlaszokban

11. bra - A bejelentkezs s az Emlkezz Rm opci a Facebookon

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

A HyperText Markup Language

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Termszetesen ehhez is kapcsoldhatnak attribtumok:

3. HTML 4.01 Frameset: a fentieken kvl keretek (frame-ek) hasznlatt is tmogatja:

12. bra - Az els HTML oldalunk

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

13. bra - A HTML forrskd trdelse nem jelenik meg az oldalon

Rakjuk ssze ezeket egyetlen pldba:

Mindez gy jelenik meg a bngszben:

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

14. bra - Cmsorok s bekezdsek az oldalon

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Amit a bngsz gy mutat meg:

15. bra - Tbbszint lista, automatikus szmozssal, ikonokkal, behzssal

A hasznlata nagyon egyszer:

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

A bngsz tudja a dolgt:

16. bra - gy jelenik meg a <hr /> elem az oldalon

17. bra - A fenti hivatkozs kd gy jelenik meg az oldalon

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

Majd az erre mutat linket be kell szrnunk a kvnt helyre:

18. bra - Kiemelsek a szvegben

19. bra - Forrs megjellse

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba

20. bra - A szveg kr automatikusan odakerltek az idzjelek

Honlappts a XXI. szzadban 1. fejezet Balssy Gyrgy: Bevezets a web programozsba