P. 1
Honlapepites_a_XXI._szazadban_v1.1

Honlapepites_a_XXI._szazadban_v1.1

|Views: 147|Likes:
Published by Gábor Rohrbacher

More info:

Published by: Gábor Rohrbacher on Mar 03, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

12/13/2012

pdf

text

original

Sections

  • 1. fejezet – Balássy György: Bevezetés a web programozásába
  • Az internet működése
  • Géptől gépig
  • Számok a gépeknek
  • Nevek az embereknek
  • Programok egymás között
  • A HyperText Transfer Protocol
  • Főbb jellemzők
  • A kérés és a válasz
  • Biztonságos kommunikáció
  • Állapotkezelés
  • A HyperText Markup Language
  • A HTML nyelv elemei
  • Fontosabb HTML elemek
  • Validálás
  • Cascading Style Sheets stíluslapok
  • Attribútumok
  • Elhelyezés
  • A CSS szelektorok
  • Span és div
  • Öröklés
  • Doboz modell
  • Oldalelrendezések
  • Több stíluslap
  • Ellenőrzés
  • 2. fejezet – Bevezetés a WebMatrixba és az ASP.NET weboldalakba
  • Mi az a WebMatrix?
  • Webmatrix telepítése
  • Első lépések a WebMatrixszal
  • Weboldal létrehozása
  • Helperek telepítése a Package Manager segítségével
  • ASP.NET weboldal kódok használata
  • ASP.NET Razor oldalak programozása Visual Studióban
  • ASP.NET oldalak létrehozása és tesztelése saját szövegszerkesztővel
  • 3. fejezet – Bevezetés az ASP.NET webszerkesztésbe Razor szintaxissal
  • 8 fő programozási tipp
  • HTML kódolás
  • HTTP GET és POST metódusok és az IsPost tulajdonság
  • Egyszerű példakódok
  • Programozási alapfogalmak
  • Osztályok és példányok
  • Nyelv és szintaxis
  • További források
  • 4. fejezet – Egységes megjelenés kialakítása
  • Többször használható tartalomblokkok létrehozása
  • Egységes látvány kialakítása layout oldalakkal
  • Többféle tartalommal rendelkező layout oldalak tervezése
  • Opcionális tartalomszakaszok létrehozása
  • Adat küldése layout oldalakra
  • Egyszerű helper létrehozása és használata
  • 5. fejezet – Munka az űrlapokkal
  • Egy egyszerű HTML űrlap létrehozása
  • Felhasználó által bevitt érték olvasása az űrlapból
  • HTML kódolás a megjelenésért és biztonságért
  • Adatbevitel ellenőrzése
  • Az űrlap értékeinek visszaállítása az elküldés után
  • További források angolul
  • 6. fejezet – Műveletek adatokkal
  • Bevezetés az adatbázisokba
  • Relációs adatbázisok
  • Adatbázis létrehozása
  • Adatok hozzáadása az adatbázishoz
  • Adatok megjelentítése az Adatbázisból
  • Strukturált lekérdező nyelv (SQL)
  • Adatok beillesztése egy adatbázisba
  • Adatok frissítése egy Adatbázisban
  • Adatok törlése egy Adatbázisból
  • Csatlakozás egy adatbázishoz
  • További forrás angolul
  • 7. fejezet – Adatok megjelenítése gridekben
  • A WebGrid Helper
  • Adatok megjelenítése a WebGrid Helper használatával
  • Oszlopok kiválasztása és formázása megjelenítéshez
  • A teljes grid formázása
  • Adatok lapozása
  • 8. fejezet – Adatok megjelenítése diagramokon
  • A Chart helper
  • A Chart helper
  • A diagram elemei
  • Diagram készítése az adatokból
  • Állítások és teljesen kvalifikált nevek használata
  • Diagramok megjelenítése weboldalakon
  • Diagram formázása
  • Diagram mentése
  • 9. fejezet – Munka fájlokkal
  • Szövegfájl létrehozása és adatok beleírása
  • Adat hozzáadása meglévő fájlhoz
  • Adatok olvasása és megjelenítése fájlból
  • Adatok megjelenítése Microsoft Excel vesszővel elválasztott fájlból
  • Fájlok törlése
  • Fájlok feltöltése a felhasználók által
  • Több fájl feltöltése a felhasználók által
  • 10. fejezet – Munka képekkel
  • Kép dinamikus hozzáadása egy weboldalhoz
  • Kép feltöltése
  • A GUID-okról
  • Kép átméretezése
  • Kép forgatása és tükrözése
  • Vízjel hozzáadása képhez
  • Kép használata vízjelként
  • 11. fejezet – Műveletek videókkal
  • Videolejátszó kiválasztása
  • MIME típusok
  • Flash videók (.swf) lejátszása
  • Media Player (.wmv) videók lejátszása
  • Silverlight videók lejátszása
  • 12. fejezet – E-mail hozzáadása a webhelyünkhöz
  • E-mail üzenet küldése a webhelyről
  • Fájl küldése e-mail használatával
  • 13. fejezet – Kereső hozzáadása a webhelyünkhöz
  • Keresés a webhelyünkön
  • 14. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz
  • Weboldalunk linkelése közösségi oldalakon
  • Twitter hírfolyam hozzáadása
  • Gravatar kép megjelenítése
  • Xbox Gamer kártya megjelenítése
  • Facebook „Like” gomb megjelenítése
  • 15. fejezet – Forgalomanalízis
  • Látogatások információinak követése (Analízis)
  • 16. fejezet – Gyorsítótárazás a webhely teljesítményének növeléséhez
  • Cache-elés a weboldal sebességének növeléséhez
  • 17. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása
  • Bevezetés a felhasználói fiókokba
  • Weboldal létrehozása regisztrációs és bejelentkező oldalakkal
  • Csak felhasználók számára elérhető oldal létrehozása
  • Csoportok biztonsági beállításai (szerepek)
  • Jelszót megváltoztató oldal létrehozása
  • Új jelszó létrehozásának lehetősége
  • Automatizált programok csatlakozásának megakadályozása
  • 18. fejezet – Bevezetés a hibakeresésbe
  • A ServerInfo helper használata a szerverinformációk megjelenítéséhez
  • Oldal értékek kijelzése kifejezések beágyazásával
  • Objektumértékek kijelzése az ObjectInfo helper használatával
  • Hibakereső eszközök használata
  • Internet Explorer Developer Tools
  • Firebug
  • 19. fejezet – A Site-Wide viselkedés testreszabása
  • Weboldal indulásakor lefutó kód hozzáadása
  • Kód futtatása egy mappa fájljainak elindulása előtt és lefutása után
  • Könnyebben olvasható és kereshető URL-ek készítése
  • Függelék – ASP.NET API referencia
  • Osztályok
  • Adatok
  • Helperek
  • Függelék – ASP.NET Weboldalak Visual Basickel
  • A 8 legjobb programozási tipp és trükk
  • A Visual Basic programozási nyelv és szintaxisa
  • Szöveg, markup és kód egyesítése kódblokkokban
  • Függelék – ASP.NET weboldalak programozása Visual Studióban
  • Miért válasszuk a Visual Studiót?
  • Az ASP.NETRazorTools telepítése
  • Az ASP.NET Razor Tools használata Visual Studioval
  • Az IntelliSense használata
  • A Debugger használata
  • Nyilatkozat

Honlapépítés a XXI. szazadban
A Microsoft ASP.NET Web Pages egy ingyenes webfejlesztő technológia, melyet úgy terveztek meg, hogy a világ legjobb fejlesztői élményét nyújtsa webfejlesztők számára. Ezen könyv segítségével megtanulhatjuk az internet és a Web működését, továbbá képesek leszünk XXI. századi, korszerű dinamikus webes tartalmak készítésére az ASP.NET és a Razor szintaxis segítségével.

Megjegyzés: Ez a dokumentum a Microsoft WebMatrix and ASP.NET Web Pages Beta 3 kiadásához készült. A termék a fejlesztés során némileg változhat. A legújabb információkért látogassunk el a http://www.asp.net/webmatrix oldalra. A Microsoftos fejlesztői közösség http://webmatrix.devportal.hu WebMatrix-os oldalát az alábbi linken találjuk:

Weblapfejlesztéssel, WebMatrix-szal, Razor nyelvvel kapcsolatos szakami kérdéseinket az alábbi fórumon tehetjük fel: http://devportal.hu/forums/348.aspx A Facebookon a WebMatrix magyarországi rajongó táborához való csatlakozással értesülhetünk a legújabb hírekről! WebMatrix Magyarország

Ez a könyv elektronikusan, kizárólag változatlan formában szabadon terjeszthető. A könyv részeinek bármilyen célú felhasználásához a kiadó előzetes írásbeli engedélye szükséges. A könyv fordítása és lektorálása során a kiadó a legnagyobb gondossággal járt el. Az esetleges hibákat és észrevételeket a jos@jos.hu címen szívesen fogadjuk. Az 1. fejezet Balássy György munkája Internet: http://www.msdnkk.hu/Users/balassy Szerkesztette és szakmailag lektorálta: Szabó Vince Anyanyelvi lektor: Dr. Bonhardtné Hoffman Ildikó  Kiadó: Jedlik Oktatási Stúdió Kft. 1212 Budapest, Táncsics Mihály u. 92. Internet: http://www.jos.hu E-mail: jos@jos.hu Felelős kiadó: a Jedlik Oktatási Stúdió Kft. ügyvezetője

Tartalomjegyzék
1. fejezet – Balássy György: Bevezetés a web programozásába ................................................6 Az internet működése ..................................................................................................................... 6
Géptől gépig ............................................................................................................................................... 6 Számok a gépeknek .................................................................................................................................... 8 Nevek az embereknek ................................................................................................................................ 9 Programok egymás között ........................................................................................................................ 12

A HyperText Transfer Protocol ...................................................................................................... 13
Főbb jellemzők ......................................................................................................................................... 13 A kérés és a válasz .................................................................................................................................... 14 Biztonságos kommunikáció ...................................................................................................................... 20 Állapotkezelés .......................................................................................................................................... 22

A HyperText Markup Language ..................................................................................................... 24
A HTML nyelv elemei ................................................................................................................................ 24 Fontosabb HTML elemek.......................................................................................................................... 25 Validálás ................................................................................................................................................... 37

Cascading Style Sheets stíluslapok ................................................................................................ 38
Attribútumok ............................................................................................................................................ 39 Elhelyezés ................................................................................................................................................. 40 A CSS szelektorok ..................................................................................................................................... 41 Span és div ................................................................................................................................................ 44 Öröklés ..................................................................................................................................................... 44 Doboz modell ........................................................................................................................................... 45 Oldalelrendezések .................................................................................................................................... 46 Több stíluslap ........................................................................................................................................... 48 Ellenőrzés ................................................................................................................................................. 50

2.

fejezet – Bevezetés a WebMatrixba és az ASP.NET weboldalakba ...................................... 52 Mi az a WebMatrix? ...................................................................................................................... 52 Webmatrix telepítése .................................................................................................................... 52 Első lépések a WebMatrixszal ....................................................................................................... 53 Weboldal létrehozása.................................................................................................................... 55 Helperek telepítése a Package Manager segítségével .................................................................. 57 ASP.NET weboldal kódok használata ............................................................................................ 59 ASP.NET Razor oldalak programozása Visual Studióban ............................................................... 62
ASP.NET oldalak létrehozása és tesztelése saját szövegszerkesztővel ..................................................... 63

3.

fejezet – Bevezetés az ASP.NET webszerkesztésbe Razor szintaxissal ................................. 65 8 fő programozási tipp .................................................................................................................. 65
HTML kódolás ........................................................................................................................................... 66

HTTP GET és POST metódusok és az IsPost tulajdonság .......................................................................... 70

Egyszerű példakódok ..................................................................................................................... 70 Programozási alapfogalmak .......................................................................................................... 72
Osztályok és példányok ............................................................................................................................ 73

Nyelv és szintaxis ........................................................................................................................... 74 További források............................................................................................................................ 91 4. fejezet – Egységes megjelenés kialakítása ......................................................................... 92 Többször használható tartalomblokkok létrehozása .................................................................... 92 Egységes látvány kialakítása layout oldalakkal.............................................................................. 95 Többféle tartalommal rendelkező layout oldalak tervezése......................................................... 98 Opcionális tartalomszakaszok létrehozása.................................................................................. 101 Adat küldése layout oldalakra ..................................................................................................... 102 Egyszerű helper létrehozása és használata ................................................................................. 106 5. fejezet – Munka az űrlapokkal ........................................................................................ 109 Egy egyszerű HTML űrlap létrehozása ......................................................................................... 109 Felhasználó által bevitt érték olvasása az űrlapból ..................................................................... 110
HTML kódolás a megjelenésért és biztonságért ..................................................................................... 112

Adatbevitel ellenőrzése ............................................................................................................... 112 Az űrlap értékeinek visszaállítása az elküldés után ..................................................................... 114 További források angolul ............................................................................................................. 115 6. fejezet – Műveletek adatokkal ........................................................................................ 116 Bevezetés az adatbázisokba ........................................................................................................ 116
Relációs adatbázisok .............................................................................................................................. 116

Adatbázis létrehozása.................................................................................................................. 117 Adatok hozzáadása az adatbázishoz ........................................................................................... 118 Adatok megjelentítése az Adatbázisból ...................................................................................... 119
Strukturált lekérdező nyelv (SQL) ........................................................................................................... 120

Adatok beillesztése egy adatbázisba ........................................................................................... 121 Adatok frissítése egy Adatbázisban ............................................................................................. 124 Adatok törlése egy Adatbázisból ................................................................................................. 129
Csatlakozás egy adatbázishoz ................................................................................................................. 131

További forrás angolul ................................................................................................................. 132 7. fejezet – Adatok megjelenítése gridekben....................................................................... 133 A WebGrid Helper ....................................................................................................................... 133 Adatok megjelenítése a WebGrid Helper használatával ............................................................. 133

Oszlopok kiválasztása és formázása megjelenítéshez................................................................. 134 A teljes grid formázása ................................................................................................................ 137 Adatok lapozása .......................................................................................................................... 138 További források.......................................................................................................................... 139 8. fejezet – Adatok megjelenítése diagramokon .................................................................. 140 A Chart helper ............................................................................................................................. 140 A diagram elemei......................................................................................................................... 141 Diagram készítése az adatokból .................................................................................................. 141
Állítások és teljesen kvalifikált nevek használata ................................................................................... 146

Diagramok megjelenítése weboldalakon .................................................................................... 147 Diagram formázása...................................................................................................................... 148 Diagram mentése ........................................................................................................................ 150 További forrás angolul ................................................................................................................. 155 9. fejezet – Munka fájlokkal ............................................................................................... 156 Szövegfájl létrehozása és adatok beleírása ................................................................................. 156 Adat hozzáadása meglévő fájlhoz ............................................................................................... 159 Adatok olvasása és megjelenítése fájlból.................................................................................... 160
Adatok megjelenítése Microsoft Excel vesszővel elválasztott fájlból .................................................... 162

Fájlok törlése ............................................................................................................................... 162 Fájlok feltöltése a felhasználók által ........................................................................................... 163 Több fájl feltöltése a felhasználók által ....................................................................................... 166 További forrás angolul ................................................................................................................. 168 10. fejezet – Munka képekkel ............................................................................................... 169 Kép dinamikus hozzáadása egy weboldalhoz.............................................................................. 169 Kép feltöltése .............................................................................................................................. 171
A GUID-okról .......................................................................................................................................... 174

Kép átméretezése........................................................................................................................ 174 Kép forgatása és tükrözése ......................................................................................................... 175 Vízjel hozzáadása képhez ............................................................................................................ 177 Kép használata vízjelként ............................................................................................................ 178 11. fejezet – Műveletek videókkal ........................................................................................ 180 Videolejátszó kiválasztása ........................................................................................................... 180
MIME típusok ......................................................................................................................................... 181

Flash videók (.swf) lejátszása ...................................................................................................... 181

.................................................... fejezet – E-mail hozzáadása a webhelyünkhöz.......................................................................................... 225 Oldal értékek kijelzése kifejezések beágyazásával ....................................................... 186 Fájl küldése e-mail használatával ......................................... 183 Silverlight videók lejátszása ................................ fejezet – Gyorsítótárazás a webhely teljesítményének növeléséhez ..................................................... 191 13.......................................................................................................................... fejezet – Kereső hozzáadása a webhelyünkhöz................................................................................... 195 14......................................................................... 219 Automatizált programok csatlakozásának megakadályozása ....................................................... 196 Weboldalunk linkelése közösségi oldalakon ......................... 229 ................................................................................................................................................................ 196 Twitter hírfolyam hozzáadása ..... 204 16................ 225 A ServerInfo helper használata a szerverinformációk megjelenítéséhez ........................................................................................... fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása..................................... 204 Látogatások információinak követése (Analízis) ................ 215 Jelszót megváltoztató oldal létrehozása ................................. 226 Objektumértékek kijelzése az ObjectInfo helper használatával ............................................. 210 Csak felhasználók számára elérhető oldal létrehozása ...... 214 Csoportok biztonsági beállításai (szerepek) .............................................................. 189 További forrás angolul ..................................... 197 Gravatar kép megjelenítése ................................................... 192 További források angolul ........................................................................................................................................................................ 199 Xbox Gamer kártya megjelenítése ................................................................................. 210 Weboldal létrehozása regisztrációs és bejelentkező oldalakkal . fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz ..................................................................... 200 Facebook „Like” gomb megjelenítése ..................................... 207 17................................................................................... 192 Keresés a webhelyünkön ................................................Media Player (................................................................................................................................................................................................................................. fejezet – Forgalomanalízis .............................................................. 222 18..... 217 Új jelszó létrehozásának lehetősége ............................................................................................ 210 Bevezetés a felhasználói fiókokba .....................................wmv) videók lejátszása ...................................................... 207 Cache-elés a weboldal sebességének növeléséhez ... 186 E-mail üzenet küldése a webhelyről.................................................................................. 185 12........................................................... fejezet – Bevezetés a hibakeresésbe ......................................................................... 201 15.................................................................................. 184 További források angolul ........................

.............................................NETRazorTools telepítése ..................................................................................................................................................................................................................................................................................................................................................................................................................................................................... 233 19.........................................NET Razor Tools használata Visual Studioval .......... 234 Kód futtatása egy mappa fájljainak elindulása előtt és lefutása után... 280 Az ASP.. 251 Függelék – ASP............................................................................................................................................................................................................................................. 242 Függelék – ASP................................................................................................................................................................................................ 256 A 8 legjobb programozási tipp és trükk ......................................... 245 Osztályok ............ fejezet – A Site-Wide viselkedés testreszabása ..................... 279 Függelék – ASP...............................................................................................NET Weboldalak Visual Basickel ........................... 232 További források angolul ............NET weboldalak programozása Visual Studióban ........................................................ 231 Firebug ................. 256 Egyszerű példakódok ........................................................... 261 A Visual Basic programozási nyelv és szintaxisa............................ 245 Adatok .................................................................................................................. 231 Internet Explorer Developer Tools ........................................................................................................... 282 A Debugger használata ................................................ 286 .................. 280 Az ASP........................................................................... 281 Az IntelliSense használata .................................. 250 Helperek .................................. 263 További források angolul ....................... 256 HTML kódolás ................... 234 Weboldal indulásakor lefutó kód hozzáadása................................................................ 237 Könnyebben olvasható és kereshető URL-ek készítése ..... 280 Miért válasszuk a Visual Studiót? .........................................................................................Hibakereső eszközök használata ....................NET API referencia .................................................................................................................................................................................................... 283 Nyilatkozat............................................................................................................................................................................................................................

ábra . a boltban UTP patch kábel néven vásárolhatjuk meg. csak egy kicsit szélesebb. században 1. fejezet – Balássy György: Bevezetés a web programozásába Az internet működése Avagy honnan jön a vezeték és mi történik benne? Az ASP. Ezek mindennapos problémák egy webfejlesztő életében. A fejezet végére egyértelmű lesz. róla van szó: 1. mi történik a háttérben. kártya formájú. 2. nem tudjuk rossz helyre dugni. ábra . hogy a legjobb igyekezetünk ellenére valami mégsem működik. valami ehhez hasonlót biztosan találunk rajta. hogy értsük. ezzel is csökkentve a laptopunk fogyasztását. és hogyan találja meg a böngésző a webszervert a beírt webcím alapján. Ennek a fejezetnek a célja. Ha megnézzük a gépünk csatlakozóit.A hálózati csatlakozó a számítógép hátoldalán A hálózati kártya régebben a nevéhez hűen valóban önálló. Mivel ehhez nem csatlakozik kábel. hogy a rendszer számos terhet levesz a vállunkról. természetesen valahogy fizikailag is össze kell tudnunk kapcsolni őket. melyek megoldásához nélkülözhetetlen. hogy megismerjük. hogyan is működik az internet. hanem készen kapjuk a működő megoldást. A hálózati kártyába kell bedugnunk a hálózati kábelt. azaz bizonyos problémákat nem nekünk kell megoldanunk. Az internet nélkülözhetetlenségének köszönhetően a mai számítógépeknek ma már szinte kötelező tartozékuk az erre a célra szolgáló hálózati kártya (más néven hálózati csatoló.1. fejezet – Balássy György: Bevezetés a web programozásába 6 . hogy mikor legyen be. A csatlakozója (hivatalosan RJ45-ként szokták feltüntetni) nagyon hasonló a telefonkábel csatlakozójához (amit pontosan RJ11-nek hívnak). A hatékonyság és az egyszerűség egyik kulcsa. Néha azonban előfordul. akkor valószínűleg egy vezeték nélküli hálózati kártya (wireless network card) is található a gépben. Géptől gépig Ahhoz. biztos mindannyian találkoztunk már a „nincs internet”. a „nem jön be az oldal” vagy épp a „nem töltődik le a fájl” jelenségekkel. vagy egyszerűen csak NIC). Sőt.Hálózati kábel Honlapépítés a XXI. ezért ha nem erőltetjük. hogy a gépünkből kilógó kábel hova fut a világban. hogy az önálló számítógépeket világhálóba tudjuk szervezni. hogy sok gépen egy külön kapcsolóval szabályozhatjuk. Ha ilyen kábelre van szükségünk. ha hordozható számítógépünk van. legfeljebb annyit fogunk észrevenni belőle. különböző hosszúságokban.vagy kikapcsolva a vezeték nélküli hálózati kártyánk. angolul network interface card.NET WebPages technológia és a Microsoft WebMatrix segítségével nagyon egyszerűen és hatékonyan készíthetünk új weboldalakat. opcionális része volt a számítógépnek. interaktív webhelyeket. miközben egy weboldalt nézünk a böngészőben. ma már a számítógép nélkülözhetetlen részévé vált.

Két alhálózat összekapcsolása routerrel Honlapépítés a XXI. azaz van egy helyi központi eszköz. ezt még véletlenül se keverjük össze a 230V-os elektromos hálózattal! A hálózati kábeleket (network cable és nem power cable) és eszközöket gyengeáramú jelek továbbítására tervezték. vagy egyszerűen csak subnet) a gépeket legtöbbször csillag alakzatban rendezik el. században 1. és amely képes a gépek között zajló forgalomban rendet tartani. ábra . amelyik nem erre a switchre csatlakozik? Itt egy újabb hálózati eszközre van szükség. a switch pedig a csillag közepén gondoskodik arról. amelyhez az összes környéken lévő számítógép csatlakozik.MEGJEGYZÉS: Ebben a könyvben a hálózat szó alatt mindenhol a számítógép-hálózatokat értjük. 5. ábra . hogy nem lehet minden egyes számítógépet egyetlen központi csomóponthoz csatlakoztatni. 3.Négy számítógép összekötése egy switch segítségével De mi van akkor. Egy-egy kisebb alhálózatban (local area network *LAN+. és rossz néven veszik. hogy a gépek megtalálják egymást.Egy 48 portos switch Egy-egy switchre 8. 16. a hálózati kapcsoló (amit magyarul is inkább switchnek szoktunk hívni) szolgál. mint a switch és képes egy switchre csatlakoztatott összes gépet a világháló többi részéhez kapcsolni. fejezet – Balássy György: Bevezetés a web programozásába 7 . Az internet olyan óriási hálózat. Ez az eszköz az útvonalválasztó (router vagy default gateway). ha egy számítógép egy olyan számítógéppel kíván kommunikálni. ha a fali konnektorba erőszakoljuk őket. hogy hány csatlakozója (azaz portja) van. A nagy kérdés persze az. 4. Erre a feladatra egy aktív hálózati eszköz. ami okosabb. 48 számítógépet lehet csatlakoztatni attól függően. hogy a gépünkből induló kábel hova megy tovább. ezért inkább hálózatok hálózataként valósították meg. ábra . 24.

Számok a gépeknek Miután megértettük. a gép meg is tudja mondani magáról. hogy pontosan melyik cég gyártotta az adott hálózati kártyát. akkor vásárolhatunk olyan eszközt. században 1. hogy földrajzilag hol található a gép.66. hogy mi az ő fizikai címe. alhálózati maszk (subnet mask) beállításra is.13.Ha csak egyetlen számítógéppel szeretnénk az internetre csatlakozni. Bár kiderül belőle. Az alhálózati maszk segítségével egy számítógép. hogy az interneten lévő gépek fizikailag hogyan kapcsolódnak egymáshoz. melyek közül a legfontosabb. és a fizikai cím helyett használjunk egy másik címet. Ha laptopod van. az internet szolgáltatók gondoskodnak róla. akkor szintén Parancssorban írd be a ping parancsot. Kíváncsi vagy a sajátodra? Indítsd el a Start menüből a Parancssort (Command Prompt). ha viszont nem. de azt például már nem tudja. ez pedig az IP cím (Internet Protocol address). az én gépemben lévő hálózati kártyáé például ez: 00-1C-7E-1D-B8-B5. fejezet – Balássy György: Bevezetés a web programozásába 8 . vagy hogy melyek a szomszédos gépek. sem routerrel nem fogunk találkozni. Ha pedig ki szeretnéd próbálni. vagy más néven fizikai címet. hogy az IP címet használó számítógép hol található. és írd be. Ha azonban több gépet szeretnénk egymással és a világhálóval összekötni. Az IP cím mellett még szükség van az ún. Mivel az internet szolgáltatók földrajzilag helyhez kötöttek (például egy adott országban lévő ügyfeleknek nyújtanak szolgáltatást).188. ezért az IP címekből az is kiderül. ezért a laptopok gyártói gyakran ráírják egy matricára a laptop alján. majd üss Entert! Az IPv4 cím (IPv4 Address) sorban találod a géped által használt IP címet. Az IP cím egy 4 bájtból álló cím. ami több információt hordoz. majd utána a másik gép IP címét! Az IP címek szintén egyediek a világon. Ugorjunk tehát egy magasabb absztrakciós szintre. hogy a címzettel azonos alhálózaton tartózkodik-e. aminek a 4 elemét (angolul octetjét) ponttal elválasztva szoktuk leírni. hátha a tiédre is ráírták! Akár ráírták. ejtsünk pár szót arról. Mivel ezt a címet a rendszergazdák és az internet szolgáltatók beállításnál és hibakeresésnél gyakran szokták kérni. amely egyben képes ellátni a router és a switch funkcióit is. amely adatot akar küldeni egy másik számítógép számára a hálózaton. a router pedig gondoskodik a csomag továbbításáról Honlapépítés a XXI. akár nem. hogy otthon sem switchcsel. meg tudja állapítani. hogy ipconfig /all! Az elszaladó hosszú listában a Fizikai cím (Physical Address) sorban találod a géped egyedi címét. Media Access Control addresst. akkor előfordulhat. Ez például egy nagyon barátságos IP cím: 152. és írd be. hogy ezeken a kábeleken hogyan vándorolnak az adatok! Fizikai cím A gépek egymást számokkal azonosítják. akkor a feladó a router felé küldi a csomagot. amit éppen más nem használ. Ez azért fontos. hogy a géped „lát-e” egy másik gépet a címe alapján. mert ha egy alhálózaton vannak. röviden MAC-addresst. egyedi a világon. IP cím A fizikai címmel több probléma is van. hogy a körülbelül 4 milliárd cím közül mindenkinek olyan jusson. azaz minden egyes gépnek van egy önálló címe. hogy ipconfig. Ez egy 6 bájtos cím. fordítsd meg a gépet. akkor közvetlenül kommunikálhatnak egymással. ún. Indítsd el a Start menüből a Parancssort (Command Prompt). A hálózati kártyák gyártói minden egyes kártyának adnak egy egyedi címet. hogy semmilyen jelentést nem hordoz.

ha azt szeretnénk. A következő fejezetben annak járunk utána. de az emberek inkább neveket tudnak megjegyezni. hogy a legtöbb nyilvános hálózaton elég rácsatlakoznunk a hálózatra. hiszen az előző fejezetben láttuk. hogy a számítógép adatokat tudjon küldeni és fogadni az interneten:    Az IP címet. A DNS kiszolgáló egy olyan szolgáltatás a hálózaton. így akár hálózati kapcsolat nélkül is készíthetünk weboldalakat.0. Egyetlen DNS kiszolgáló nem tudja a világhálóra kapcsolt összes számítógép nevét és IP címét. akkor a két gép tud egymással kommunikálni. hogy azt más gépek név szerint is megtalálják.hu. a számítógép tudja őket „magától”.0. hívják ugyanis alapértelmezett átjárónak (default gateway) is. Ha egy rendszergazda új gépet köt a hálózatra.1. ha a mi gépünknek helyesen beállítjuk a három cím paraméterét és ismerjük a címzett gép IP címét. hogy http://127. ami a routernek az adott alhálózatra kapcsolódó hálózati kártyájának címe. ami minden számítógép esetén egyedi cím. és ő visszaadja a beküldött névhez tartozó IP címet (vagy akár fordítva. hogy honnan tudjuk. Windows 7 alatt a Hálózati Kapcsolat Részletek ablakban tekinthetjük át kényelmesen az összes beállítást. az Alhálózati Maszk (Subnet Mask) és az Alapértelmezett átjáró (Default Gateway) sorokban látható a három cím. ez pedig a 127. Dinamikus névfeloldás esetén az előző fejezetben bemutatott három címen kívül a gépünk automatikusan megkapja a DHCP kiszolgálótól a DNS kiszolgáló címét is. hogy http://devportal. Ezt a folyamatot névfeloldásnak hívjuk. hogy a hálózaton üzemel egy ún.más alhálózatok felé. hogy a gépeknek címekre van szükségük a sikeres kommunikációhoz.0. ezért ha ő nem tud válaszolni a kérdésre. és azt szeretné. akkor továbbítja azt más DNS kiszolgálóknak. és a Domain Name System (DNS) szolgáltatás a felelős érte. az IP címhez tartozó nevet). akkor be kell jegyeznie az új gépet a helyi DNS kiszolgáló adatbázisába. amivel a feladó eldöntheti. Tehát ha egy böngésző címsorába beírjuk. fejezet – Balássy György: Bevezetés a web programozásába 9 . Ez valójában azt jelenti.1. pontosan milyen értékeket kell beállítanunk? A kényelem érdekében a legtöbb esetben nem szükséges ennek a három értéknek a kézi beállítása. DHCP kiszolgáló (Dynamic Host Configuration Protocol). Összefoglalva eddigi tudásunkat. Innen a router másik neve. hogyan lesznek a nevekből számok. A kérdés már csak az. Az alapértelmezett átjáró címét. ám ha hús-vér felhasználó is ül a gép előtt. Ezért fordulhat elő. DNS A DNS szolgáltatás kétféleképpen tud működni. Ez a gyakorlatban valóban így működik. amelytől a számítógép képes lekérdezni a szükséges beállításokat. az IPv4 cím (IPv4 Address).0. Az alhálózati maszkot. ami mindig a saját gépünket jelöli. Mivel a DNS kiszolgálók kapcsolódnak egymáshoz. században 1. hogy a címzett vele azonos alhálózaton van-e. Tehát legalább három címet kell beállítanunk minden számítógépen. nem kell a beállításokkal bajlódnunk. például azt. akkor azt a böngészőnek le kell fordítania egy IP címre. akkor a címek használata nem túl praktikus. Nevek az embereknek Mikor kedvenc böngészőnk címsorába beírunk egy webcímet. egy távoli gépről érkező névfeloldási kérés előbbHonlapépítés a XXI. hogy van egy speciális IP cím. akkor mindig az ugyanazon a gépen lévő webkiszolgálóhoz fogunk csatlakozni. A gépek jól működnek számokkal. TIPP: Parancssorban kiadva az ipconfig parancsot. JÓ TUDNI: Webfejlesztőként érdemes tudnunk. amelynek a hálózat gépei kéréseket küldenek.

Ezeket is be lehet állítani kézzel. később pedig amikor megtörténik a hivatalos névbejegyzés.0. állandó. ha az elsődleges nem válaszol. Ebben az esetben ideiglenesen felvehetjük a nevet a saját hosts fájlunkba. hanem a dinamikus névfeloldással együtt szokott működni. a DNS kiszolgálók sorokban láthatóak a számítógép számára beállított névszerverek. de az alkalmazásnak mindenképp szüksége van rá. akkor a számítógép értesíti a DNS szervert. akkor megmondja a címhez tartozó nevet (feltéve. a központi szolgáltatás beállításával az összes kliens számítógép el fogja tudni érni az adatokat. akkor könnyen törölhetjük onnan. hogy az adott tartomány rendszergazdája nem csak a névhez tartozó IP címet regisztrálta. és automatikusan frissíti a saját névbejegyzéséhez tartozó IP címet. például Jegyzettömbbel is szerkeszthető. Csakhogy a mai világban az internet szolgáltatók többsége az otthoni felhasználók számára dinamikus IP címet ad. A hosts fájlban felvehetünk több nevet.hu. Erre a problémára jelent megoldást a dinamikus DNS szolgáltatás (nem összekeverendő a dinamikus névfeloldással). tehát a két módszer kiegészíti egymást. bármilyen szövegszerkesztővel. A válaszban látni fogjuk a névfeloldást végző kiszolgáló nevét és a devportal. hogy ha egy számítógép IP címe változik. hogy az IP cím. aki így képes lesz megadni a névhez tartozó IP címet. hanem az IP címhez tartozó nevet is). ekkor a rendszer például a név alapján különböztetheti meg őket. A gyakorlatban a statikus névfeloldás nem önállóan. TIPP: A névfeloldás működésének tesztelésére kiválóan használható az nslookup parancs. Statikus névfeloldás esetén nincs központi szolgáltatás. hogy egy IP címhez tetszőleges nevet vehetünk fel. és mindegyik mutathat a 127. Webfejlesztés közben nagyon jó szolgálatot tehet a hosts fájl. Ennek a megoldásnak az előnye. TIPP: Parancssorban kiadva az ipconfig /all parancsot.utóbb el fog jutni az adott alhálózatért felelős DNS kiszolgálóhoz. azaz bizonyos időközönként az IP cím megváltozik.hu IP címét is. a másodlagoshoz csak akkor. amikor praktikus a hosts fájl használata: ha még nincs bejegyezve a hivatalos tartomány (domain) név egy internet szolgáltatónál. Dinamikus DNS A fenti megoldások mind azt feltételezik. Ennek a módszernek az az előnye. ami egy egyszerű szöveges állomány. hogy semmit nem kell konfigurálni az egyes számítógépeken. majd üssünk Entert. hogy a gépünkön futó webszerveren több webhelyet is szeretnénk futtatni. Hosts fájl Egy másik lehetséges megoldás a statikus névfeloldás. és azzal a névvel hivatkozhatunk az adott gépre még akkor is. azzal az egyetlen különbséggel. hogy először mindig az elsődleges DNS szerverhez fordul a gépünk. Több névszervert is beállíthatunk. században 1. Előfordulhat. Nyissunk egy Parancssort. hogy nslookup devportal. Mivel a DNS szerverek erről a címváltozásról automatikusan nem értesülnek.1 IP címre. azaz ha egy név helyett IP címet írunk be utána. Ez az adatbázis alapértelmezés szerint a C:\Windows\System32\drivers\etc\hosts fájlban található. de többnyire a DHCP szervertől kapja meg a gépünk a DNS szerverek IP címeit is. Honlapépítés a XXI. Az nslookup fordítva is tud működni. de érdemes tudni. ha az nincs bejegyezve a központi DNS szolgáltatásba. A dinamikus DNS működése megegyezik a hagyományos DNS szerverek működésével. Egy másik gyakori eset. amire a névbejegyzés hivatkozik. fejezet – Balássy György: Bevezetés a web programozásába 10 .0. és írjuk be. hanem minden egyes gépen nyilvántartjuk az elérni kívánt gépek név-IP cím párosait. ezért az ilyen dinamikus IP címre mutató névbejegyzések nagyon hamar elavulnának.

és kitesszük egy szerverre. 4.A világon számos ingyenes dinamikus DNS szolgáltató van. amely a gépünkön folyamatosan figyeli a hálózati kapcsolatot. Így megoldható. mint a sikeres válaszok. 2. Ez a válasz – legyen bármennyire használhatatlan – ugyanúgy bekerül a DNS gyorsítótárba. hanem „fejből” azonnal nyomja a választ. Ez azt jelenti. ezért a válaszok egy ún. de létezik több magyar szolgáltató is. és ha IP cím változást tapasztal. automatikusan frissíti a DNS szerveren a névbejegyzést. hogy a szerverre név helyett IP címmel hivatkozunk. 5. században 1. A választ annyi időre gyorsítótárazhatja a kliens. A válaszban tehát nemcsak a kérdezett névhez tartozó IP címet küldi vissza a névszerver. amennyi időre a DNS kiszolgáló engedi. akkor nem fordul a névkiszolgálóhoz. amíg a gyorsítótárból magától kikerül ez a Honlapépítés a XXI. de az eredmény ugyanaz. a webfejlesztőknél azonban néha okoz egy kis galibát. ezért a DNS kiszolgáló azt fogja mondani. ahova felvesszük a szerver nevéhez tartozó IP címet. lépésben a böngészőben megpróbáljuk megnyitni az oldalt. Mikor a 2. és ez alatt az idő alatt ha egy program ismét erre kíváncsi. hogy mennyi ideig őrizheti a kliens a gyorsítótárban a választ. gyorsítótárba (cache) kerülnek. ezért érdemes ismernünk a megoldást: a problémát a DNS gyorsítótár okozza. Visszatérünk a böngészőnkhöz. név szerint el tudjuk érni távolról. Beírjuk a kedvenc Internet Explorer böngészőnk címsorába a szerver nevét. ami azt jelzi. hogy nem jön be semmi . attól még nem fog kikerülni a bejegyzés a számítógép DNS gyorsítótárából. Fehér oldal szép nagy hibaüzenettel: A kiszolgáló nem található.com. a gépünk a DNS kiszolgálóhoz fordul. Hol a hiba? Ebbe a szituációba előbb-utóbb minden webfejlesztő belekeveredik. Mivel a névfeloldás időigényes folyamat (el kell mennie a kérésnek a hálózaton keresztül a névszerverig és vissza). a legismertebbek a DynDns. de keserűen tapasztaljuk. ezért irány a hosts fájl vagy a DNS kiszolgáló. például a myip. hogy „ilyen nevű szerver nincs”. hogy például az otthoni gépünket. Ezekről a weboldalakról a regisztráció után egy kliens programot kell letöltenünk. Mivel azonban a DNS kiszolgálón nincs bejegyezve a webkiszolgáló neve.hu és a dynpro. time-to-live (TTL) értéket is. elfelejtettük regisztrálni a nevet. hogy hoppá. Ha nem akarjuk kivárni. Hmm. amely akár naponta többször új IP címet kap. Képzeljük el az alábbi esetet: 1. Némi gondolkodás után a homlokunkra csapunk. hanem egy ún.com és a no-ip. A DNS gyorsítótár hasznos szolgáltatás. 3. hogy a számítógép egy ideig megjegyzi a DNS szervertől kapott választ. Fejlesztőként készítünk egy weboldalt. Kipróbáljuk úgy. fejezet – Balássy György: Bevezetés a web programozásába 11 . DNS gyorsítótár Gyakori eset. és megkísérli elvégezni a névfeloldást. frissítjük az oldalt. hogy egy futó programnak egymás után többször van szüksége egy adott névhez tartozó IP címre.hu. és úgy minden működik. Ezek után hiába frissítjük a névszerver adatbázisát. JEGYEZZÜK MEG: a negatív válasz is válasz.

De mi van akkor. a másiké pedig például a http://localhost:8080/default.com. hogy lehet. hogy mindegyik a HTTP protokollhoz tartozó 80-as porton figyel. akkor pedig a kiszolgáló 443-as portjára kell küldenie a kérést. Bármennyire is igaz. ha https://-sel.php. hogy két gép hogyan találja meg egymást IP cím és név alapján. Programok egymás között Az előző fejezetben láttuk. Figyeljük meg a böngésző címsorát. században 1. A Windows beépített Internet Information Services webkiszolgálójával (ami az előbb említett IIS Express nagy testvére) úgy is üzemeltethetünk több webhelyet. hogy melyik webhelyre gondolunk. ugyanis a mai böngészők általában maguk is tartalmaznak egy DNS gyorsítótárat. hogy pontosan melyik programnak kell feldolgoznia az üzenetet. Ha ezt a fenti 5. akkor parancssorból kiadhatjuk az ipconfig /flushdns parancsot. akkor a WebMatrix elindítja az IIS Expresst. Az IIS Express képes egyszerre több webhelyet is futtatni. Az egyik webhely kezdőlapja lehet a http://localhost/index. Ez akkor lehetséges. a böngésző automatikusan tudni fogja. ami a gépen belül azonosít egy alkalmazást. A böngészők gyorsítótárát legegyszerűbben a böngésző újraindításával törölhetjük. Ám ettől még valószínűleg nem fog megjavulni minden. mégpedig úgy. Például a webkiszolgáló mindig a 80-as porton figyelve várja a bejövő HTTP kéréseket. akkor nemcsak a célgép IP címét kell megadnia. melyekkel korlátozhatjuk egy számítógép kimenő és bejövő forgalmát. két program vagy két webhely nem osztozhat ugyanazon a porton. melyeknek a port számát az egyszerűség érdekében szabványosították. amin fut egy webböngésző és egy FTP kliens program is. a másik pedig a Honlapépítés a XXI. Vannak nagyon gyakran használt alkalmazások – mint például a webkiszolgáló –.cshtml. hogy ha a webcím http://-vel kezdődik. hogy mégsem keverednek össze az üzenetek. hogy egy alkalmazásból több példányt is szeretnénk futtatni. hogy a http:// protokollhoz a szabvány szerint a 80-as port tartozik.example. akkor a kiszolgáló 80-as portjára. ami egy kifejezetten fejlesztői célra használható webkiszolgáló. Amikor egy program egy másik gépen futó alkalmazásnak kíván üzenetet küldeni. A portoknak nagy szerepük van a tűzfalak beállításában. Például ha a webszerverünk elé beteszünk egy tűzfalat. az egyik például a http://forum. a titkosított HTTPS kéréseket pedig a 443-as porton. Ezért aztán nem is szükséges ezeket a port számokat kiírnunk. így lesz egyértelmű. hiszen ha egy böngésző címsorába beírnánk. A port nem más. és látni fogjuk a port számot. Előfordulhat. ami elvégzi az operációs rendszer DNS gyorsítótárának törlését. akkor a webszerver nem lesz elérhető. akkor a webkiszolgáló nem tudná eldönteni. Ilyenkor kénytelenek vagyunk a két webhelyet más-más porton üzemeltetni. amely több webhelynek ad otthont. akkor valószínűleg már sikeresen meg fog jelenni az új oldalunk.cshtml. hogy mindegyiket önálló port számon teszi elérhetővé. fejezet – Balássy György: Bevezetés a web programozásába 12 . illetve van egy ide kapcsolódó kliens számítógépünk. hogy van egy szerver gépünk. hogyan talál be egy üzenet egy gépen belül a megfelelő alkalmazáshoz? Ezt a problémát oldják meg az ún. és a nem alapértelmezett portszámokat a kérésben kiírni. ha a webhelyek önálló néven érhetőek el. portok. Mikor egy WebMatrixban készülő webhelyet futtatunk. mint egy egész szám 0 és 65535 között. lépés előtt megtesszük. hogy http://localhost/default. amin fut egy webkiszolgáló és egy FTP kiszolgáló.bejegyzés – ez akár több nap múlva is lehet –. vagy például egy webszervert üzemeltetünk a gépünkön. hanem a célgépen futó alkalmazás port számát is. ha egy gépen több program is található? Tegyük fel. A két gépen két-két program üzenget egymásnak. de azon nem nyitjuk ki a 80-as portot.

http://aruhaz. amely a felhasználó által elérni kívánt tartalmat vagy szolgáltatást biztosítja. Fontos. A fejezet végére pontosan ismerni fogjuk a HTTP protokoll működését.1 verzió. században 1. A HTTP aktuális verziója az 1. hogy egy ún. azaz a HTTP a webböngészők által a weboldalak megjelenítésére használt információátviteli protokoll a világhálón. hogy a webszerver nagyon jólnevelt. ASP. éppen ezért általánosságban a klienseket összefoglaló néven user agentnek szokták nevezni. mindenképp érdemes megismerkednünk a protokoll működésével. Ilyen tehát nincs: Honlapépítés a XXI. ábra . akkor a legfontosabb elvárás a kódunkkal szemben. A webes kliens (angolul client. akit további részletek érdekelnek. ha nem kérdezik. A kommunikáció során tehát mindig kérés-válasz párok követik egymást. kérés-válasz protokoll a kliens és a szerver között. A HTTP legfontosabb jellemzője. aki erre egy HTTP válasszal (response) válaszol. hogy a kommunikációt mindig (értsd MINDIG!) a kliens kezdeményezi azzal.A HTTP kérések és válaszok Ebből az következik. hogy elküldjön egy olyan új információt a kliensnek. az eredeti dokumentumból tájékozódhat. hogy a bejövő kérés pontosan melyik webhelyre vonatkozik. ami nagy segítség lesz a weboldalak hibáinak feltárásában. ezért amikor egy webalkalmazást készítünk. de lehet bármilyen más szoftver is. hogy a szerveren megjelenő új információ azonnal megjelenjen a felhasználó böngészőjében.NET) jórészt elfedi a HTTP protokoll részleteit.net címen. Bár a legtöbb szerver oldali programozási környezet (pl. Főbb jellemzők A HTTP protokollal két szoftver beszélget egymással. ami érti a HTTP protokollt (például egy RSS olvasó program). Ilyenkor a webkiszolgáló a név alapján képes eldönteni. A párbeszéd másik résztvevője a webszerver (más néven webkiszolgáló). Ebben a fejezetben csak a legfontosabb részeket érintjük. hogy HTTP protokollon keresztül lehessen vele kommunikálni. mert ez a tudás sokat segíthet a programjaink megtervezésében és a fejlesztés során a hibakeresésben is. fejezet – Balássy György: Bevezetés a web programozásába 13 . valahogy így: 6. amit a kliens nem kért. nem beszél. A HyperText Transfer Protocol Avagy mi történik a böngésző színfalai mögött? A HyperText Transfer Protocol. hogy a HTTP protokoll nem biztosít lehetőséget arra. 176 oldalas RFC 2616 specifikál. amit néha ügyfélnek is fordítanak) legtöbbször a felhasználó által elindított webböngésző program (webbrowser). Ez azt jelenti. melyet pontosan az 1999 júniusában kiadott (nem egy mai darab. hogy elküld egy HTTP kérést (request) a szervernek. de működik ).example. egy webes kliens és egy webszerver. A szerver nem képes arra.

és miközben használjuk a weboldalt. A HTTP másik jellemzője.com oldalt kedvenc böngészőnkben. F12) Hálózat (Network) fülén azonnal látszik a HTTP kérés és a válasz minden részlete. Állapotnak tekinthető az. Bátran telepítsük fel őket. ássunk egy kicsit mélyebbre. amikor azonban a szerveren új információ keletkezik (például érkezik egy levelünk). A kérés és a válasz Miután így megbeszéltük a HTTP legfontosabb jellemzőit. amikor a Facebookot alkalmazva azt látjuk. hogy új levelünk érkezett. Ezt hívják a szerver pollozásának. akkor a következő kérés alkalmával erről a kliens is értesülni is fog. nincs szükség külső eszköz telepítésére: Honlapépítés a XXI. vagy hogy egy közösségi oldalra éppen be vagyunk-e jelentkezve. és nézzük meg. hogy a mások által írt bejegyzések „maguktól” megjelennek az üzenőfalunkon. miközben a kliens és a szerver beszélget egymással! A webfejlesztők szerszámosládájának egyik legfontosabb eleme a saját (de tényleg!) HTTP forgalmunk elemzésére szolgáló eszköz. és a rajtuk átmenő forgalmat megmutatják. mit mutatnak! Még egyszerűbb és kényelmesebb a helyzet. ezért ezek az állapotok és azoknak a változása protokoll szinten nem jelenik meg sehol. fejezet – Balássy György: Bevezetés a web programozásába 14 .example. ott ugyanis a beépített Fejlesztői Eszköztár (Developer Toolbar. Ezeket a szoftvereket összefoglaló néven HTTP debugging proxynak hívják. és figyeljük meg. hogy egy webáruházban hány termék van éppen a kosarunkban. hogy miközben mi a weboldalt nézegetjük. hogy beállnak a böngésző és a hálózat közé. ezt a problémát máshogy kell megoldanunk. a böngésző a háttérben (a felhasználó számára nem látható módon) bizonyos időnként (például percenként) kéréseket küld a szervernek. hogy pontosan mi történik. Mivel a HTTP állapotmentes.Érdekes módon felhasználóként mégis nagyon hasonlóval találkozunk. állapotmentes protokoll. Ezekre a kérésekre a legtöbb esetben a szerver azt fogja válaszolni. majd nézzük meg például a www. ha Internet Explorer 9-et használunk. században 1. és úgy működnek. Ezek mind pillanatnyi állapotok. hogy nincs semmi újdonság. hogy ún. kár is keresni. vagy amikor a GMail arra figyelmeztet. a háttérben történő kommunikációt pedig Ajaxnak. Az egyik legkönnyebben használható ilyen eszköz a Fiddler. most már van benne egy karalábé). Ez csak úgy működhet. Ahogy később látni fogjuk. de nagyon elterjedt a Firefox böngészőbe beépülő Firebug kiegészítés is. ezek az állapotok megváltozhatnak (például az előbb még üres volt a kosarunk.

deflate Connection: Keep-Alive Host: www. Trident/4.NET CLR 3. Windows NT 6. A metódust követi a kért erőforrás webcíme (itt: http://www.0.0. ami szinte mindig HTTP/1. majd utána következhet a kérés törzse (body). ábra – Az Internet Explorer 9 Developer Toolbar Network fülén a forgalom minden részlete látható Miközben ellátogatunk egy oldalra. metódus (method). hogy milyen műveletet szeretnénk elvégezni.30729. így a kommunikáció nagyon könnyen értelmezhető.NET4.NET CLR 3.0C. A fejléc sorokat egy üres sor követi.hu-HU. a böngésző az alábbihoz hasonló HTTP kérést küldi el a szervernek: GET http://www.0. .com Pragma: no-cache Ahogy látható.example. A szerver erre a kérésre egy HTTP választ küld vissza: HTTP/1.com/).1 Accept: */* Accept-Language: en-US.com/ HTTP/1.NET4.5. .example. A fenti részletben például egy Accept-Language fejlécben tudatja a böngésző a szerverrel.q=0. . Ilyet főként HTTP POST kérésekben lehet látni (a fenti példában tehát nem).1.0. például egy űrlapba beírt szövegek a kérésnek ebben a részében jutnak el a szerverhez.30729.50727. században 1. MSIE 8.0 (compatible. majd a protokoll verziószáma. amivel azt mondjuk meg. a HTTP egy szöveges protokoll.7. fejléc sorok. hogy elsősorban angol (en-US). A következő sorok ún. WOW64.NET CLR 2. Media Center PC 6.5 User-Agent: Mozilla/4. .1.example. fejezet – Balássy György: Bevezetés a web programozásába 15 .0E.0. másodsorban magyar (hu-HU) nyelvű tartalmat szeretne kapni. MS-RTC LM 8) Accept-Encoding: gzip. vagy a feltöltéshez használt POST. A kérés első része az ún. SLCC2. amellyel a böngésző további információkat juttathat el a szerverhez. .1 200 OK Honlapépítés a XXI. Ez leggyakrabban a letöltéshez használt GET.

azaz nem változtatják meg a szerver állapotát. A Törlés funkciót egy hiperlink vagy egy gomb (button) valósítsa meg? A hiperlink ugyanis alapértelmezés szerint egy HTTP GET.01 Transitional//EN"> <HTML> (…még folytatódik…) A válasz első sora a státusz sor. a következő fejezetekben egy kicsit részletesebben is megnézzük. Ha technikailag bármelyiket választhatjuk.Date: Fri. vagy általános néven erőforrást tudunk lekérni a szerverről. akkor inkább használjunk POST-ot. A leggyakoribb metódus a GET. amivel feltölteni tudunk. és többszöri végrehajtásuk ugyanazt az eredményt váltja ki. hogy milyen műveletet akarunk elvégezni a szerveren. amivel meghatározzuk. amit le akartunk tölteni. Egy webes űrlap (például kérdőív) kitöltése során több HTTP kérésre van szükség. képet. majd egy üres sor után a válasz törzse következik. képet vagy videót. hogy a GET kérések általában biztonságosak. 01 Oct 2010 10:42:07 GMT Server: Apache Last-Modified: Fri.1) után egy státusz kód (200) és egy angol nyelvű indoklás (OK) található. fejezet – Balássy György: Bevezetés a web programozásába 16 . fájlt. A válasz törzsében kapjuk vissza a kért weboldalt. mint az egyszeri. milyen értékekkel találkozhatunk ott. században 1. amik között előfordulnak GET és POST kérések is: Honlapépítés a XXI. ezért ezekben az esetekben inkább POST javasolt. melyiket válasszuk? Hasonló probléma jön akkor is elő. 30 Jul 2010 15:30:18 GMT ETag: "573c1-254-48c9c87349680" Accept-Ranges: bytes Content-Length: 596 Connection: close Content-Type: text/html. amik ráadásul többször végrehajtva mást eredményeznek. charset=UTF-8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Egy levél letörlése a Hotmailen megváltoztatja az állapotot. Egy másik nagyon gyakori metódus a POST. Adatok lehívására tehát kiváló a GET. míg a gomb egy HTTP POST kérést küld a szervernek. egy banki átutalás pedig többször megismételve a kívánt mértéknél jobban apasztja a bankszámlánkat. Ezek tehát a kérés és a válasz általános formái. akkor célszerű aszerint dönteni. amikor a felhasználói felületet tervezzük. vagy a Bingben is lefuttathatom ugyanazt a keresést többször. hogy a HTTP kérés legelső eleme a metódus. nem fáj senkinek. például egy űrlap kitöltése után megadott értékek legtöbbször HTTP POST kéréssel utaznak fel a szerverre a kérés törzsében. hogy egy adott funkciót egy GET vagy egy POST művelettel valósítsunk meg. amiben a szerver által támogatott verziószám ( HTTP/1. amivel egy oldalt. hogy az egyes részek mire jók. Ha azonban adatok felküldéséről vagy állapotváltozásról van szó. Egy webalkalmazás készítése során néha döntés elé kerülünk. Például egy kerti törpe katalógust többször is letölthetek a szerverről. Például egy webes levelező oldalon a nem kívánt levelek törlése elviekben bármelyik módon megoldható. A kéréshez hasonlóan ezután a fejléc. GET és POST Az előző fejezetben láttuk.

A szabvány szerint itt egy egységes erőforrás azonosítót. Itt egy másik URI példa. nem derül ki belőle. hogy ez egy a HTTP protokoll számára értelmezhető cím: http://balassygyorgy. ami azt mondja. de azt is meghatározza. Az URL általános formája a következő: protocol://username:password@FQDN:port/path/file? variable1=value1&variable2=value2#name Honlapépítés a XXI.com/2010/05/21/facebook-like-button-xss Csakhogy ennek a címnek van még egy érdekessége is: nemcsak hogy egyedileg azonosít egy weboldalt. azaz egyértelműen azonosít egy postaládát: mailto:gipszjakab@example. URI-t (Uniform Resource Identifier) kell megadnunk. hogy ez egy telefonszám. dokumentum stb. A kettőspont előtti rész tehát megmondja. hogy mire jó a kettőspont utáni rész. hogy hol található ez az oldal az interneten. ábra .wordpress.) pontos címe. és talán már az sem emlékszik rá. ha felhívjuk. majd a kettőspont után azt a szöveget.Egy webes űrlap kitöltésének folyamata A kért erőforrás címe A kérés második része a kért erőforrás (oldal. Lehet egy hangya cipőmérete.8. ami csörögni fog. fejezet – Balássy György: Bevezetés a web programozásába 17 . de akár három fej kelkáposzta ára is (persze más mértékegységben). században 1. mindjárt értelmet nyer: tel:4633714 A tel séma egyértelműen megmondja. de akárhogy nézem. hogy a gigantikus méretű interneten hol kell keresnie. hanem a dokumentum lelőhelyének meghatározásáról is szó van. ahol a sémából az derül ki. és úgy hívják. ezért az URI elnevezés helyett gyakran használjuk az URL. hogy ez egy e-mail cím. erről pedig tudjuk. kép. Konkrétan a balassygyorgy. hogy facebook-likebutton-xss. hogy mit kell csinálnunk vele: be kell nyomkodnunk a telefonunkba.com szerveren a 2010/05/21 mappában. hogy mit kell kezdeni vele.com Ez alapján már értjük az alábbi URI-t is. mert tudja. amit a séma ismeretében tudunk értelmezni. azaz Uniform Resource Locator elnevezést.wordpress. aki ideírta. ún. A fenti telefonszám egyértelműen azonosít egy készüléket. hogy ez egyértelműen azonosítson valamit. De ha így írom le. mégpedig azt. Lássunk rá példát! Ez itt vajon micsoda? 4633714 Csak egy szép nagy szám. Ezért tudja megtalálni a böngésző. Mivel itt nemcsak azonosításról. ami formailag így néz ki: [séma]:[séma függő rész] Először tehát meg kell adnunk egy sémát. Ezenkívül az URI még egy dolgot ír elő.

hu/Pages/InduloKeszlet/ASPNET/Default. Az URL legvégén a # karakter után egy név következhet. mert rövidebbek. Fontos tudni.msdnkk. olvashatóbbak. mert a szabvány megengedi a karakterek kódolását.aspx Ez a kezdőlap (a Default. Ez lesz az abszolút cím: http://www. akkor nem kell a szerver nevét mindenhol átírnunk. sajnos egy URL lehet teljesen „álcázott” is. Ezek a paraméterek név=érték formában. században 1. és a szerver nem találná meg a fájlt. hogy bár a fenti az URL-ek „szép” általános formája van. amit a szerver tetszőleges módon dolgozhat fel. majd végül a lekérni kívánt fájl neve. Egy webalkalmazás készítése során gyakran előforduló feladat. ez jelzi a böngészőnek.NET platformon a System. Például az alábbi egy ilyen URL: /Storage/balassy/Avatar/avatar.Elöl van tehát a protokoll. a böngésző és a szerver is küld fejléc sorokat. ezért ezt relatív URL-nek hívjuk.jpg A sima relatív URL-ekhez képest az a nagy különbség. melyekben a kért tartalmon kívül további információk utaznak. és ott hivatkoznánk ugyanezzel a relatív URL-lel erre a képre. például ASP. amit opcionálisan egy felhasználónév és egy jelszó követhet.com. a böngésző megérti. A kérdőjel (?) után következő ún. hanem a szerver neve után illessze oda. hogy egy „/” jellel kezdődik. hagyományos string műveletekkel megoldani nagyon kockázatos. Részben ezért szoktak ún. Például ez a cím mindig az MSDN Kompetencia Központ honlapján található ASP. a HTTPS protokoll a 443-as portra kapcsolódik.jpg Általában jobban szeretünk relatív címeket használni.msdnkk. azaz a tartomány teljes neve. például balassygyorgy.jpg Ha éppen egy másik oldalon lennénk. ha beírjuk neki: %77%77%77%2E%67%6F%6F%67%6C%65%2E%63%6F%6D Éppen ezért egy URL feldolgozását manuálisan. hogy ne az aktuális oldal mappájához csapja hozzá ezt a címet. mert könnyen hibázhatunk. ami az oldalon belüli hivatkozásra utalhat. A legtöbb webalkalmazás programozói keretrendszer erre biztosít beépített lehetőséget. mert a böngésző tudja.Uri osztály segítségével egy csapásra megkaphatjuk az URL bármely részét. csak a kezdőlap címéhez viszonyítva értelmezhető.hu/Pages/InduloKeszlet/ASPNET/ASPNET_Indulo_Keszlet. amire a hivatkozás így történik: ASPNET_Indulo_Keszlet. Az URL-ek két nagyobb csoportba sorolhatóak. amit többnyire elhagyunk. A portszám után jöhetnek mappák és almappák (path). query stringben további információkat adhatunk át a szervernek.jpg Ez a webcím önmagában nem teljes. és ha a weboldalunkat másik szerverre költöztetjük.msdnkk. A fejléc sorok Honlapépítés a XXI. Például ez is egy érvényes webcím.wordpress. akkor már valószínűleg rossz lenne a hivatkozás. Az FQDN a Fully Qualified Domain Name.hu/Storage/balassy/Avatar/avatar.NET Induló Készlet oldalára mutat: http://www. Az FQDN után jöhet a port száma a szerveren. hogy egy URL-t kell darabjaira szednünk vagy éppen két URL egyezőségét kell vizsgálnunk. egymástól & jellel elválasztva adhatók meg. Az ebből képzett abszolút URL ez lesz: http://www. amit egy kukac (@) karakter választ el az FQDN-től. hogy a HTTP protokoll a 80-as portra. Fejléc mezők Ahogy a HTTP kérés és válasz általános formájának bemutatásánál láttuk.aspx oldal) tartalmaz egy képet. fejezet – Balássy György: Bevezetés a web programozásába 18 . önmagukban egyértelműen meghatározzák a kért erőforrást. Az abszolút URL-ek nem függnek semmitől. gyökér relatív címeket (root-relative URL) használni.

Ha azt tapasztaljuk. Sőt. akkor vizsgáljuk meg a HTTP forgalmat.formailag azonosak. akkor a böngésző a hivatkozó oldal címét egy Referer (igen. amit egy kettőspont után a hozzá tartozó érték követ. ha az a megadott idő után változott. hogy az egyes fájlokat mikor módosították utoljára a szerveren ( LastModified fejléc). és figyeljünk ezekre a fejléc mezőkre! JÓ TUDNI: A böngészők próbálják minimalizálni a hálózati forgalmat – ezzel is gyorsítva az oldal megjelenítését –. ami alapján gyönyörű statisztikák készíthetőek szerver oldalon. akkor ne egyszerűen az F5 gombot nyomjuk meg. ezért a saját gyorsítótárukban igyekeznek eltárolni a szervertől kapott válaszokat (vagy legalább egyes részeit. azt a szerver határozza meg a Cache-Control és az Expires fejléc mezőkkel. A böngésző a kommunikáció során elég sokat elárul magáról. hogy egy weboldal első alkalommal kicsit lassabban töltődik be. hogy a felhasználó hogyan állította be a nyelvi opciókat a böngészőjében. a szabvány szerint így kell írni) nevű fejléc mezőben elárulja a hivatkozott oldalnak. hogy milyen nyelvű tartalmat adjon vissza. sőt ilyen esetekben azt is elküldi. Biztos tapasztaltuk már. A következőkben a teljesség igénye nélkül álljon itt néhány érdekesebb fejléc mező jelentése! Az Accept fejléccel a kliens határozhatja meg. hogy bár a webszerveren módosítottunk valamit. hogy a letölteni kívánt fájl mekkora (Content-Length fejléc) és hogy ez a szám miben értendő (Accept-Ranges). Ha teljesen frissíteni szeretnénk az oldalt a böngészőben. Ez gyakran azért van. először az adott fejléc mező neve áll. – Átirányítás. melyek az első számjegy alapján csoportokba sorolhatóak. 3xx: Redirect o 301 Moved permanently – A kért tartalom végérvényesen átköltözött egy másik címre. a kért tartalom máshol található. de az nem jelenik meg a böngészőben. Íme a leggyakoribb hibakódok: o – A HTTP kapcsolattal kapcsolatos tájékoztató üzenetek. Szintén megadja hozzá a szerver. Ezt felhasználva a következő alkalommal a böngésző egy If-Modified-Since fejléc mezővel tudja jelezni a szerver felé. fejezet – Balássy György: Bevezetés a web programozásába 19 . vagy a CTRL lenyomása közben kattintsunk a Frissítés (Refresh) gombra! Státusz kódok A HTTP válasz legfontosabb részei kétségkívül a státusz kód és a hozzá tartozó szöveges indoklás. Szintén elküldi az Accept-Language mezőben. amit a Location fejléc mezőben ad meg a szerver. hanem a CTRL+F5 billentyűket. így azokat legközelebb nem kell letöltenie. hogy csak akkor kéri az adott fájlt. o o o 200 OK – Ez a legjobb és szerencsére leggyakoribb eset. században 1. Hogy mit és mennyi ideig tárolhat. mert az oldal egyes részeit (például a képeket) a böngésző a saját gyorsítótárában eltárolja. hogy milyen típusú fájlt szeretne letölteni. 1xx: Information 2xx: Successful – Sikeres kérés. például a képeket). például a Server sorban megmondja az ő típusát. amire mintegy válaszul a szerver a Content-Type fejlécben adja meg. például a User-Agent mezőben elküldi a saját típusát. amit visszaküld. A hibakódok háromjegyű számok. ha egy oldalra úgy jutottunk el. verziószámát és még az operációs rendszer verziószámát is. Honlapépítés a XXI. a Date sorban pedig a szerver pillanatnyi dátumát. A szerver is tud bőbeszédű lenni. hogy egy másik oldalon kattintottunk egy linkre. a gyakorlatban nagyon ritkán találkozhatunk velük. hogy milyen típusú a fájl. mint a későbbi alkalmakkor. a böngésző akár meg is jegyezheti az új címet. így ez alapján a szerver eldöntheti.

ami valószínűleg a kliens hibája. 500 Internal server error – A szerveren leállt a szolgáltatás.) Az URL alapján? Az sem jó. Ennek az üzenetnek a hatására a böngésző fel fogja dobni a felhasználónév és a jelszó bekérésére szolgáló ablakot. akkor az valószínűleg annak köszönhető. vagy a túl nagy forgalom (túlterhelés) eredménye. hiszen az adott bank tetszőleges webcímet választhat magának. hogy az valóban annak a banknak az oldala? Csak azért. hogy könnyen tudtuk értelmezni a kommunikációt. Ha a HTTP-vel együtt használjuk a Secure Sockets Layer (SSL) protokollt is. ahogy terveztük. o 5xx: Server Error – Hiba történt a szerveren. 304 Not modified o 4xx: Client Error – Hiba történt. amire a szerver 404-es hibával fog válaszolni. de ez a kép hiányozni fog. nyilván nem. fejezet – Balássy György: Bevezetés a web programozásába 20 . hogy kinek küldi el például a bankkártyája adatait. ami például X banknak mondja magát. akkor az eredmény a HTTPS protokoll. hogy a kért címen valóban található fájl a szerveren. hogy amikor felhasználóként megnyitunk egy weboldalt. Ha például egy oldalon nem jelenik meg egy kép. hogy elírtuk a kép URL-jét. Biztonságos kommunikáció Ahogy az előző fejezetben láttuk. 500-as hiba). ennek köszönhető. ami az alábbi két előnnyel bír:   Titkosítja a forgalmat. Ezt válaszolhatja a szerver.o o 302 Found (temporary move) – A kért tartalom ideiglenesen máshol található. Azonosítja a szervert. Akkor mi a megoldás? Honlapépítés a XXI. hogy valami nem egészen úgy történik. Célszerű ellenőrizni. a HTTP protokoll egy nyílt szöveges protokoll. így az átküldött információt nem lehet lehallgatni. Ha illetéktelenek elől védeni szeretnénk a HTTP forgalmat. ami a gyakorlatban nagyban segíti a fejlesztő munkáját. mert az oldal annak mondja magát. akkor célszerű megnézni a HTTP forgalmat és megkeresni a hibakódot. o – A kliens olyan oldalt próbál elérni. Ezt általában a programozó vagy az üzemeltető tudja kijavítani. 401 Unauthorized 403 Forbidden – 404 Not found o o A kliensnek nincs jogosultsága a kért tartalom elérésére. Sajnos ugyanez a nyílt kommunikáció a rosszindulatú támadók munkáját is ugyanígy segíti. hogy mi a nála tárolt utolsó változat. (Ennyi erővel bárki mondhatná magáról. akkor a HTTP protokoll mellett egy másik protokollt is be kell vetnünk. ami vagy a túl sok hiba (ld. században 1. Ekkor a kért fájl tartalma nem fog ismét letöltődni a szerverről. ha a kliens az If-Modified-Since fejléc mezővel jelzi. akkor honnan tudhatjuk. 503 Service unavailable Ha egy weboldal készítésekor azt tapasztaljuk. ugyanis lehetővé teszi a kommunikáció egyszerű lehallgatását. A HTTP válaszban lévő hibakódból egyértelműen kiderül. Ettől még az oldal meg fog jelenni. hogy miért. A nagy kérdés persze az. így a felhasználó számára egyértelmű. o o – A szerveren futó webalkalmazásban belső hiba történt. – A kért tartalom az utolsó letöltés óta nem változott. vagy elgépeltük az URL-t. amihez nincs joga. – Hibás a cím. hogy ő személyesen a Batman. a böngésző nem fog hibát jelezni. a megadott címen nem található tartalom.

hogy az example. akkor a tanúsítvány kiadója visszavonhatja azt.A megoldás az.com oldalról van-e szó. hogy az adott cég vásárol egy tartomány nevet (pl. a Certificates gombra kattintva. hogy a tanúsítvány tulajdonosa valóban az. a tanúsítvány kiadóhoz (certification authority). xbank.example. és ellenőrzi a benne szereplő adatokat: 1. akiben a kommunikáció mindkét szereplője megbízik. Ellenőrzi. A megbízható tanúsítványkiadók listája az Internet Explorer Internet Options ablakának Content fülén. Nem mindegy. akkor a felhasználó ezt elhiheti. Lekéri a szerver tanúsítványát. Ellenőrzi. században 1. 2. hogy a tanúsítványt olyan tanúsítvány kiadó állította ki. A cégnek ezek után fel kell telepítenie ezt a tanúsítványt a webszerverre. majd kiállít egy tanúsítványt (certificate). akkor automatikusan HTTP helyett HTTPS protokollt fog használni. amire a tanúsítványt kiállították. és innen kezdve megy minden magától. hogy a tanúsítványt nem vonták-e vissza. majd a céget és a tartományt igazoló dokumentumokkal elmegy egy ilyen megbízható harmadik félhez. A böngésző. akiben a böngésző megbízik. hogy tényleg azt a webcímet nézzük-e éppen. és a szerver 80-as portja helyett a HTTPS protokollnak megfelelő 443-as portjára fog csatlakozni. Ellenőrzi. hogy az adott weboldal tényleg annak a banknak a honlapja. Ellenőrzi. Ez a gyakorlatban úgy történik. amikor https:// kezdetű URL-t lát. fejezet – Balássy György: Bevezetés a web programozásába 21 . 4. akinek mondja magát. a felugró ablak Trusted Root Certification Authorities oldalán tekinthető meg: Honlapépítés a XXI. hogy választunk egy megbízható harmadik felet. hogy a tanúsítvány nem járt-e le (általában 1 évre szól).com vagy a www. Ha egy tanúsítvány rossz kezekbe kerül. a szerver is és a kliens is. amely igazolja. Ha ez a harmadik fél azt állítja. 3. A tanúsítvány kiadó a lehető legalaposabban ellenőrzi a dokumentumokat.example.com).

így a böngésző a tanúsítványt érvénytelennek fogja tekinteni. Ha egy tanúsítvány nem érvényes. hogy kinek a szerverével kommunikál. vagy hogy be tudjunk jelentkezni a kedvenc közösségi oldalunkra. a program Honlapépítés a XXI. Bár a kommunikáció ebben az esetben is lehet titkosított. A tanúsítványt egy hiteles tanúsítvány kiadótól kell vásárolni. és a felhasználó sem tudhatja biztosan. a HTTP állapotmentes protokoll. hogy nincs ebben semmi különös. fejezet – Balássy György: Bevezetés a web programozásába 22 . ami azt jelenti. kivel osztja meg a bizalmas adatait. azaz angolul a HTTP cookie-k formájában. hogy az egyes kérés-válasz párok között nincs kapcsolat.Figyelmeztetés az Internet Explorerben érvénytelen tanúsítvány esetén Az érvénytelen tanúsítvány azt jelenti. akinek mondja magát. hogy a webáruházakban meg tudjuk tömni a kosarunkat. Montullitól azóta sokszor megkérdezték. A tanúsítvány másik felhasználása. Ha ennek a költségeit nem szeretnénk kifizetni. A megoldást Lou Montulli találta ki a sütik. Azaz a webalkalmazásokban szükségessé vált a felhasználói munkamenet (angolul session) követése. hogy miért pont a cookie nevet adta ennek a technológiának. Ebben az esetben a fenti ellenőrző lista 4. és figyelmeztetést fog megjeleníteni: 9. akkor a tanúsítványt érvénytelennek tekinti a böngésző. önaláírt tanúsítvány esetén a rosszindulatú támadó nagyon könnyen kijátszhatja a felhasználók figyelmetlenségét. és belehallgathat a hálózati forgalomba. ábra . ha azt szeretnénk. pontja nem fog teljesülni. ezért önaláírt tanúsítvány helyett mindig célszerű hiteles kiadótól származó tanúsítványt vásárolni. században 1. hogy a böngésző megbízhatónak tekintse. melyeket a böngésző beépítetten nem ismer. Ha ezek közül bármelyik nem teljesül.Az Import gombra kattintva lehet olyan tanúsítványkiadókat hozzáadni a rendszerhez. hogy a felhasználó nem tudhatja biztosan. az ilyet hívják önaláírt tanúsítványnak (selfsigned certificate). hogy a webszerver valóban az-e. amire ő azt szokta válaszolni. hogy a benne szereplő információk felhasználásával a kommunikáció két szereplője titkosítani tudja a forgalmat. Állapotkezelés Ahogy arról korábban már szó volt. attól még a forgalom titkosítására lehet alkalmas. akkor van lehetőség a tanúsítvány házi elkészítésére is. de mára már elengedhetetlenné vált. Ez valószínűleg nem is okozott különösebb gondot a web megjelenésekor.

com A következő kéréseknél pedig a böngésző egy Cookie nevű fejléc mezőben visszaküldi azt a szervernek: GET http://www. először a szerver egy Set-Cookie nevű fejléc mezőben állítja be a cookie értékét: HTTP/1. path=/. Amikor egy weboldalra bejelentkezve bejelöljük az Emlékezz Rám (jegyezd meg a jelszavam) opciót. ábra .com/home. Ha a munkamenetünk véget ér vagy a böngészőt bezárjuk. ábra . Az átküldött információ bármi lehet. és a sütiben csak egy munkamenet azonosító (session ID) utazik. hogy a mi gépünkre bejelentkezve egy másik felhasználó a mi munkamenetünket folytatja. amikor újraindítjuk a böngészőt vagy akár az egész gépünket. A cookie-k olyan információdarabkák. hogy az egyik webhelyről kapott sütink eljut egy másik webhelyhez. ezért az a bevett megoldás. de mivel a sütik mérete korlátozott. akkor tipikusan ilyen állandó süti keletkezik. 10. században 1.1 200 OK Set-Cookie: lsd=2EDQr. így meglesz akkor is. ahonnan kapták. 11.által kapott és változatlanul visszaküldött információdarabkára akkoriban elterjedt elnevezés volt a magic cookie. hogy a böngészőknek a szabvány szerint úgy kell kezelniük a sütiket. így nem lehetséges az. és a böngésző memóriájában tárolódik.A bejelentkezés és az Emlékezz Rám opció a Facebookon Honlapépítés a XXI. a süti elveszik. Az állandó sütit (angolul permanent vagy persistent cookie) viszont a böngésző a diszkre menti. Fontos. így nem fordulhat elő. hogy csak azoknak a weboldalaknak küldjék vissza őket. domain=. Kétféle süti létezik:   A session cookie csak a munkamenet idejére létezik.facebook.1 Cookie: lsd=2EDQr. amiket az első kérésre válaszolva a szerver elküld a böngészőnek. a böngésző pedig minden egyes további HTTP kérésben visszaküldi a szervernek. fejezet – Balássy György: Bevezetés a web programozásába 23 . hogy a webalkalmazás szerver oldalon tárolja az összes felhasználó munkamenetéhez tartozó adatait. Az operációs rendszerben szerencsére minden böngészőnek és minden felhasználónak önálló süti tára van.php? HTTP/1.A munkamenet azonosító a HTTP kérésekben és válaszokban A gyakorlatban a cookie HTTP fejléc sorokban utazik.facebook.

Önmagában nincs benne semmi veszélyes. azaz olyan hiperszövegeket (hypertext) tartalmazzanak. kettős aláhúzás: félkövér betű). miszerint a sütik vírusokat. ábrák. A HTML gyökerei a nyolcvanas évek végére nyúlnak vissza. melyek a mai napig meghatározzák a HTML nyelvet: 1. amit ma úgy ismerünk. A HyperText Markup Language Avagy milyen nyelven értenek a böngészők? Miután megfejtettük. egyszeres aláhúzás: dőlt. hogy a felhasználó számára az eredmény egy weboldal legyen? A HTTP válasz törzsében a webszervernek egy HyperText Markup Language (az elnevezés magyarul hiperszöveges jelölőnyelvet jelent). így jött létre a HTML mint jelölőnyelv (markup language). melynek ma a továbbfejlesztett és szabványosított 4. Az egyik fájó pont a képek. E két fő irányvonal mentén született meg a HTML nyelv első leírása 1991-ben. akkor mindenképpen használjunk biztonságos HTTPS protokollt! A sütikkel kapcsolatos összes kérdésünkre választ kaphatunk az Unofficial Cookie FAQ oldalán. Ha nem szeretnénk. ez ugyanis a böngészők nyelve. amelyek bármely részlete egy másik dokumentumra hivatkozhat. melyek kiegészítő információkat (metaadatokat) adnak a szöveghez. itt a nagy újdonság a formalizmus és címkekészlet megalkotása volt.01-es. Honlapépítés a XXI. amikor a svájci CERN1-ben dolgozó fizikus. A dokumentumok „mutassanak túl” önmagukon. Az viszont igaz. mely a franciasvájci határon helyezkedik el. Hasonló célú egyszerűbb jelöléseket a nyomdatechnikában már korábban is használtak (pl. században 1. hanem a tartalmat hordozó részt lássuk el címkékkel. hogyan kommunikálnak egymással a számítógépeink az interneten keresztül. hogy meglátogattunk egy weboldalt. hogy a kutatási eredmények általában egymásra épülnek. Az elemekkel tudjuk felcímkézni a szöveg egyes részeit. Tim Berners-Lee azzal a problémával szembesült. ezért rögtön el is oszlathatjuk azokat a tévhiteket. kapcsolódnak egymáshoz. kéretlen leveleket vagy reklámokat terjesztenének – a cookie-k erre nem képesek. a Conseil Européenne pour la Recherche Nucléaire (magyarul Nukleáris Kutatások Európai Tanácsa) a részecskefizikai kutatások európai szervezete. a világ legnagyobb részecskefizikai laboratóriuma. illusztrációk és általánosságban a gazdag formázási lehetőségek hiánya volt. Ez az.A süti egy egyszerű szöveges állomány. hogy a korabeli dokumentum formátumok nem megfelelőek a fizikusok által előállított kutatási eredmények megjelenítésére. 1 A CERN. Forrás: Wikipedia. A HTML nyelv elemei A HTML nyelv jelölőrendszere elemekből és attribútumokból épül fel. Ezen problémák megoldására Tim Berners-Lee két ötlettel állt elő. felugró ablakokat. azaz HTML formátumú dokumentumot kell visszaküldenie. hogy a süti a hálózaton átutazva illetéktelen kezekbe kerüljön. 2. az attribútumokkal pedig ezeknek a címkéknek a tulajdonságait tudjuk meghatározni. fejezet – Balássy György: Bevezetés a web programozásába 24 . ahogy az a fenti példából is látszik. és megértettük a kommunikáció során használt HTTP protokoll minden részletét. hogy egy süti tartalmazhat személyes adatot vagy egy sütinek pusztán a létezése a gépünkön utalhat arra. aminek hatására betöltődik egy másik weboldal. hogy mit kell visszaküldeni a webszervernek a böngésző számára ahhoz. a következő kérdés az lehet. hamarosan pedig 5-ös verzióját használjuk. amit az akkori fájlformátumok nem tudtak kezelni. Genftől kissé északra. A dokumentum ne csak egyszerű szöveg legyen. hogy egy weboldalon rákattinthatunk hivatkozásokra (linkekre). a másik pedig az.

a záró címkét szintén. Document Type Definition. de bárki számára láthatóak. amelyeknek ilyen egyszerű a formájuk: <címke /> Természetesen ehhez is kapcsolódhatnak attribútumok: <címke attribútum1="érték1" attribútum2="érték2" /> Van lehetőség arra. hogy egyértelművé tegyük. JÓ TUDNI: A HTML nyelv eredeti szabványa a fentieknél „lazább” szintaktikát is megenged. ezért ma már inkább XHTML kódot szokás írni.Az elemek (angolul element) a szöveget formailag egy kezdő címke (start tag) és egy záró címke (end tag) közé zárják: <címke>szöveg</címke> Az elem elején a kezdő címkét „kacsacsőrök” közé kell tennünk. méghozzá úgy. hogy a dokumentum pontosan milyen szabványt követ. az az elem vége. mit miért csináltunk. hogy a HTML kódba megjegyzéseket (comment) tegyünk annak érdekében. amiket a böngésző értelmez. A címkék természetesen nem fognak megjelenni a weboldalon. fejezet – Balássy György: Bevezetés a web programozásába 25 . de ott még egy per-jelre is szükség van. nem találhatunk ki találomra újabb elemeket.Itt következik a lábléc --> Természetesen ezek a megjegyzések sem jelennek meg a böngészőben. Fontosabb HTML elemek Miután áttekintettük az elemek. Ezért formailag léteznek ún. amik a szabványban megtalálhatóak. A HTML dokumentum struktúrája A HTML dokumentum első sora az ún. hogy az értéket idézőjelek ("érték") vagy aposztrófok ('érték') közé tesszük. önbezáró címkék (self-closing tag). vagy hogy éppen a weboldal melyik részének a kódját látjuk: <!-. azokat kell használnunk. aki a böngészőben kiválasztja a View Source menüpontot. így a böngésző Honlapépítés a XXI. ezért bizalmas információkat még véletlenül se írjunk ide. Ezek a lazán formázott HTML dokumentumok azonban sok bosszúságot okoznak a HTML szerkesztő programoknak és a HTML kódot értelmező böngészőknek is. Például bizonyos esetekben a záró címke elhagyható (pl. az attribútumok értékeit nem kötelező idézőjelek közé tenni és az önbezáró elemeket sem kötelező jelölni. ismerkedjünk meg a legfontosabb HTML elemek jelentésével és használatával! Fontos látni. hanem csak kiegészítő információkat hordoznak. címkék és attribútumok formáját. címsor) határozza meg. kép hivatkozás). A fent ismertetett szintaktika megfelel ezeknek az előírásoknak. melyekből több is kapcsolódhat egy elemhez: <címke attribútum1="érték1" attribútum2="érték2">szöveg</címke> Az attribútumokat és értékeiket a kezdő címkénél adhatjuk meg. A címke viselkedését attribútumokkal tudjuk meghatározni. vagyis a DTD. de vannak más jellegű elemek is (pl. amely az XML (eXtensible Markup Language) nyelv szigorú formai szabályait követi. A legtöbb elem a fenti formában egy szöveg formáját vagy szerepét (pl. században 1. hogy a HTML nyelvben az elemek nevei rögzítettek. sortörés. új bekezdés kezdete egyben az előző végét is jelenti). A DTD határozza meg a böngésző számára. hogy később emlékezzünk arra.

transitional. ahogy szeretnénk.01 háromféle DTD-t ismer: 1. nyissuk meg a Jegyzettömbbel (Notepad). ami tartalmazza a dokumentum fejlécét (head) és törzsét (body): <!DOCTYPE html> <html> <head> <!-. az XHTML 1.w3.dtd"> 3.org/TR/xhtml11/DTD/xhtml11. században 1. azok helyett mindenképp Cascading Style Sheets stíluslapok segítségével kell a formázást elvégezni. charset=utf-8" /> </head> Ennyi tudással akár el is készíthetjük az első HTML oldalunkat! Készítsünk egy új szövegfájlt.1 verzióhoz azonban csak ez az egy: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.Ez a szövegtörzs --> </body> </html> A fejlécben kap helyet a dokumentum címe.dtd"> Hasonlóan létezik háromféle (strict.01 Frameset: a fentieken kívül keretek (frame-ek) használatát is támogatja: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.Ez a fejléc--> </head> <body> <!-.dtd"> 2. és írjuk ezt bele: Honlapépítés a XXI. fejezet – Balássy György: Bevezetés a web programozásába 26 . frameset) DOCTYPE deklaráció az XHTML 1.01//EN" "http://www. a szabványból később kikerült elem használatát is: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. HTML 4. HTML 4. és melyiknek mi a jelentése.w3.dtd"> A közelgő HTML5 verzióban (ami gyakorlatilag egyben az XHTML5 verzió is) szerencsére lényegesen egyszerűsödik ez a sor: <!DOCTYPE html> Fontos.01 Frameset//EN" "http://www.01 Transitional: engedélyezi néhány korábbi.org/TR/html4/loose. HTML 4.w3. különben előfordulhat. hogy a szabványnak abban a verziójában milyen HTML elemek megengedettek.0 szabványhoz is.01 Transitional//EN" "http://www. hogy a böngésző nem úgy jeleníti meg az oldalt. gyökér eleme (root element).org/TR/html4/strict.w3. hogy a HTML fájlunk elején szerepeljen ez a sor. Ez a legelterjedtebb DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. A HTML 4.01 Strict: nem engedélyezi formázó elemek használatát.1//EN" "http://www. amik viszont nem jelennek meg az oldalon. például: <head> <title>Bevezetés az internet programozásába</title> <meta name="author" content="Balássy György" /> <meta http-equiv="Content-Language" content="hu" /> <meta http-equiv="Content-Type" content="text/html. a html elem.pontosan tudni fogja.org/TR/html4/frameset. A !DOCTYPE után következik az oldal ún. amit a böngésző az ablak címsorban megjelenít (title elem) és további leíró információk (meta elem).

sortöréssel és tabulátorral. formázni szeretnénk a szöveget. amelyek alapján a böngésző megjeleníti az oldal tartalmát.<!DOCTYPE html> <html> <head> <title>Első oldalam</title> </head> <body> Szia Világ! </body> </html> Mentsük el a fájlt . hogy a dokumentum törzse (body elem) tartalmazza azokat a HTML elemeket.Az első HTML oldalunk Látható. ábra . és így fog megjelenni az oldalunk: 12. században 1. A szöveg struktúrája Ha egy HTML dokumentumban rendezni. A következő fejezetekben ezekkel az elemekkel foglalkozunk.htm kiterjesztéssel. vagy hiába teszünk egymás után sok szóközt. akkor ezt kizárólag HTML elemekkel tehetjük meg. a böngészőben csak egyetlen szóköz fog megjelenni helyette. mintha csak egyetlen szóközt írtunk volna: Honlapépítés a XXI. majd kattintsunk rá duplán! Meg fog nyílni az elsődleges böngészőnk. fejezet – Balássy György: Bevezetés a web programozásába 27 . Például átírhatjuk az előző példánk body elemének kódját így: <body> első második harmadik ötödik </body> hatodik negyedik De hiába is erőlködünk a sok szóközzel. a böngészőben úgy fog megjelenni. Azaz hiába teszünk sortöréseket a HTML kódba.

<h2>Évfordulók</h2> <p> 518 éve Kolumbusz Kristóf felfedezte Kubát.h6 (heading) elemekkel jelölhetünk: <h1>Főcím</h1> <h2>Alcím</h2> Rakjuk össze ezeket egyetlen példába: <!DOCTYPE html> <html> <head> <title>Bekezdések.</p> </body> </html> Mindez így jelenik meg a böngészőben: Honlapépítés a XXI.13. mindössze ennyi: <br /> A bekezdések közé címsorokat tehetünk. címsorok</title> </head> <body> <h1>Ma 2010. ábra . ma a legnépesebb karibi ország. október 27. Egy hosszabb szöveget a p (paragraph) elem segítségével tagolhatunk bekezdésekre: <p>Első bekezdés</p> <p>Második bekezdés</p> Ha egy bekezdésen belül új sort szeretnénk kezdeni. erre szolgáló címkéket kell használnunk.<br /> (Hivatalosan Kubai Köztársaság. akkor azt a br (break) elemmel tehetjük meg.A HTML forráskód tördelése nem jelenik meg az oldalon Ha másként szeretnénk. egykori spanyol gyarmat. A br elem önállóan áll. nincs sem záró címkéje.) </p> <p>85 éve Fred Waller feltalálta a vízisít. van</h1> Az év 300. sem pedig attribútumai. melyeket a h1. fejezet – Balássy György: Bevezetés a web programozásába 28 .. napja a Gergely-naptár szerint. században 1. méghozzá hat méretben.

a böngésző automatikusan gondoskodni fog a megfelelő sorszám vagy lista ikon megjelenítéséről. fejezetben lesz szó. amin belül az egyes lista tételeket li (list item) címkék jelzik: <ol> <li>Első</li> <li>Második</li> <li>Harmadik</li> </ol> Ha nincs szükségünk a sorszámokra. Ha listákra van szükségünk. hogy számozott vagy csak egyszerű felsorolásos listát szeretnénk megjeleníteni az oldalon. hogy van egy alapértelmezett megjelenési módja. hogy a böngésző nagyobb betűkkel jeleníti meg a címsorokat. ha mi másként szeretnénk. a bekezdések között automatikusan hagy távolságot. amit természetesen megváltoztathatunk. sőt a hosszú sorok tördeléséről is gondoskodik. Erről részletesebben a Cascading Style Sheets c. Ez például egy többszintű lista: <ol> <li>Magyarul <ul> Honlapépítés a XXI. akkor az ul (unordered list) elemmel egyszerű felsorolásos listát készíthetünk: <ul> <li>Piros</li> <li>Fehér</li> <li>Zöld</li> </ul> Igény szerint a felsorolásokat és számozott listákat több szint mélyen akár egymásba is ágyazhatjuk. ábra . Minden HTML elemre igaz. A számozott listák keretét ol (ordered list) elemek jelentik. akkor kétféle elemet használhatunk attól függően.14. században 1.Címsorok és bekezdések az oldalon Érdemes megfigyelni. fejezet – Balássy György: Bevezetés a web programozásába 29 .

automatikus számozással. A br elemhez hasonlóan a hr is önbezáró: <hr /> A használata nagyon egyszerű: Felső tartalom <hr /> Honlapépítés a XXI. ábra .Többszintű lista. amely egy vízszintes vonallal választja el a felette és alatta lévő tartalmat. behúzással A szöveg tagolására használható még a hr (horizontal rule) elem is. fejezet – Balássy György: Bevezetés a web programozásába 30 . ikonokkal. században 1.<li>Piros <ul> <li>rózsaszín</li> <li>piros</li> <li>vörös</li> <li>bordó</li> </ul> </li> <li>Fehér</li> <li>Zöld</li> </ul> </li> <li>Angolul <ul> <li>Red</li> <li>White</li> <li>Green</li> </ul> </li> </ol> Amit a böngésző így mutat meg: 15.

A target attribútumban azt adhatjuk meg. ábra . fejezet – Balássy György: Bevezetés a web programozásába 31 . amikor a felhasználó a hivatkozás fölé viszi az egeret (ún. hogy hova töltődjön be a hivatkozott weboldal. a href attribútumban pedig azt a webcímet kell megadnunk. 17. században 1. A title attribútumba olyan segítség írható. amely megjelenik a böngészőben.Így jelenik meg a <hr /> elem az oldalon Hivatkozások Az egyes weboldalaink között a kapcsolatot hiperhivatkozásokkal (hyperlink) teremthetjük meg. Ha az értéke _blank.A fenti hivatkozás kód így jelenik meg az oldalon Szintén az a elem használható oldalon belüli ugrások.hu" title="Ugrás a BME oldalára" target="_blank">BME honlap</a> A nyitó és a záró címke között szerepel az a szöveg. ábra . amit az a (anchor=horgony) elem valósít meg: <a href="http://www.bme. ami meg fog jelenni a weboldalon.Alsó tartalom A böngésző tudja a dolgát: 16. akkor a böngésző új ablakban fogja megnyitni az oldalt. amire ezzel a hivatkozással ugrani lehet. tooltip). például tartalomjegyzék vagy az oldal tetejére mutató hivatkozás létrehozására. Ehhez meg kell jelölnünk a hivatkozni kívánt részt a name attribútummal: <a name="LapTeteje" /> Honlapépítés a XXI.

amelyek jelentést (szemantikát) is társítanak a szöveghez! Láttunk már erre példát a címsorok esetén. ábra . de azt is jelenti. hogy ez hangsúlyozott illetve kiemelt tartalom: A <em>fogalmakhoz</em> például használhatjuk az em elemet. fejezet – Balássy György: Bevezetés a web programozásába 32 . akkor a kép megjelenítésére szolgáló img elemet tehetjük a link belsejébe: <a href="http://www. hogy egy hivatkozott forrásról van szó: Douglas Adams <cite>Galaxis útikalauz stopposoknak</cite> c. hogy az a pár szó az oldal címe. A továbbiakban lássunk pár olyan HTML elemet. Hasonlóan az <em> és a <strong> elem nemcsak dőlten és félkövéren jeleníti meg a tartalmazott szöveget.hu"> <img src="logo. hogy megnagyobbítja a szöveget még azt is jelenti.bme. hiszen a <h1> elem azonkívül. 18. A Világmindenség Meg Minden nagy kérdésére.Forrás megjelölése Honlapépítés a XXI. században 1.gif" /> </a> Szemantikai elemek Az eddig bemutatott elemek többnyire a szöveg megjelenésén változtattak.Majd az erre mutató linket be kell szúrnunk a kívánt helyre: <a href="#LapTeteje">Ugrás az oldal tetejére</a> Az a elemen belül tetszőleges elem állhat. például ha egy képet szeretnénk kattinthatóvá tenni. ábra . 19. a <strong>feltűnő</strong> szövegekhez pedig a strong elemet.Kiemelések a szövegben A <cite> elem nemcsak hogy alapértelmezés szerint sok böngészőben dőlten jeleníti meg a tartalmazott szöveget. művében választ kaphatunk Az Élet. hanem egyben azt is jelenti.

org/wiki/Woody_Allen"> Nem vagyok nagy ivó. Ezeknek az elemeknek a törzse mindkét esetben a rövid verzió. ábra .A szöveg köré automatikusan odakerültek az idézőjelek A rövidítésekhez és mozaikszavakhoz az <abbr> és <acronym> elemeket használhatjuk. Például a vakok és gyengénlátók által használt képernyőolvasó programok szóban jelzik. Táblázatok A HTML nyelvben egy egész sor elem szolgál arra. mindkét esetben az opcionális cite attribútummal hivatkozhatunk a forrás URL-jére: <q cite="http://hu. A title attribútumra általában az jellemző. ha címet. században 1. így ha a rövidítés fölé viszi a felhasználó az egeret. amit itt nem tudtunk felsorolni) nagyban hozzájárulnak ahhoz. a kifejtést a title attribútumban adhatjuk meg. hogy táblázatokat tudjunk megjeleníteni az oldalainkon.wikiquote. Egy három soros és két oszlopos táblázatot így készíthetünk el: <table border="1" cellpadding="1" cellspacing="2" summary="Kiadások"> <thead> <tr> <th>Hónap</th> <th>Összeg</th> </tr> </thead> <tfoot> <tr> <td>Összesen:</td> <td>600</td> </tr> </tfoot> <tbody> <tr> Honlapépítés a XXI. fejezet – Balássy György: Bevezetés a web programozásába 33 . <p> elemekkel jelölve). idézetet vagy rövidítést találnak. Szilveszterkor két martini után megpróbáltam elrabolni és Kubába téríteni egy liftet. a hosszabbakat pedig a <blockquote> elemmel jelezhetjük (ez utóbbiban több bekezdés is lehet. </q> 20. hogy a böngészők egy felugró tipp ablakban jelenítik meg a tartalmát.A külső forrásból átvett rövidebb idézeteket a <q> elemmel. akkor rögtön látja a rövidítés feloldását is: <acronym title="National Aeronautics and Space Administration">NASA</acronym> Ezek a szemantikai HTML elemek (és a többi. hogy a weboldalaink ne csak az emberi szem számára szépen megjelenő szövegek legyenek. hanem a szöveg egyes részeinek szerepe a feldolgozó programok számára is egyértelmű legyen.

akkor a scope="col" vagy scope="column" attribútumot kell használnunk. hogy hány cellát kívánunk összevonni: <table> <!-. ábra .Második sor egy cellával --> <tr> <td colspan="2">összevonva</td> </tr> </table> A cellák között a <th> (table header) elemekkel különböztethetjük meg a fejléc cellákat.Első sor két cellával --> <tr> <td>első</td> <td>második</td> </tr> <!-.Egyszerű táblázat Ha több cellát szeretnénk összevonni vízszintesen vagy függőlegesen. A böngésző itt is ad egy alapértelmezett stílust az egyes elemeknek: 21. akkor azt a <td> elem colspan és rowspan attribútumaival tehetjük meg. században 1. fejezet – Balássy György: Bevezetés a web programozásába 34 . melyben az egyes sorokat <tr> (table row). azon belül az egyes cellákat pedig <td> (table data) elemek definiálják. Honlapépítés a XXI. hogy sor vagy oszlop fejlécről van szó.<td>Január</td> <td>100</td> </tr> <tr> <td>Február</td> <td>200</td> </tr> <tr> <td>Március</td> <td>300</td> </tr> </tbody> </table> A táblázatot a <table> elem jelzi. Ha precízen jelölni szeretnénk. ahol értékként azt kell megadnunk.

Íme. hogy a böngésző a feldolgozás során időben hozzáférjen az abban szereplő információkhoz. Az űrlapon belül a mezőket és a mezőkhöz tartozó címkéket célszerű összekapcsolni egymással. Hogy a szerver oldalon mi történik az elküldött adatokkal. hogy logikailag is legyen kapcsolat. majd az adatokat a böngésző egy HTTP POST kéréssel eljuttatja a szerverre. hogy itt egy űrlapról van szó. Ezek nélkül az űrlap nem sokat ér.Egyszerű űrlap két szövegdobozzal és egy gombbal A <form> elem jelzi a böngésző számára.Ha nagyobb táblázatról van szó. amiket a felhasználó kitölt. ami például az oldal kinyomtatásakor lehet hasznos információ a böngészőnek. ne csak a megjelenítéskor kerüljenek egymás mellé. a láblécet és a táblázat törzsét. ábra . A táblázatnak ezeket a részeit a <thead>. A <form> elem action attribútumában azt az URL-t kell megadnunk. hogy a <tfoot> elemnek a <tbody> előtt kell állnia. században 1. az oldalon belüli egyedi azonosítót és erre hivatkozunk a <label> elem for attribútumában. ahova a böngésző a megadott adatokat el fogja küldeni. Űrlapok A weboldalak nemcsak információk megjelenítésére használhatóak. akkor azon belül célszerű jeleznünk a fejlécet. egy egyszerű űrlap: <form action="urlap. hogy HTTP GET vagy POST formában várja a szerver az adatokat. hanem adatok bekérésére is szolgálhatnak. Honlapépítés a XXI. hogy az <input> elem id attribútumában megadunk egy tetszőleges. Ilyenkor űrlapokat kell készítenünk. A címkéket a <label> elem hordozza. az a webszerveren futó alkalmazás feladata. Elsőre kicsit szokatlan lehet. a method attribútumban pedig azt. a <tbody> és a <tfoot> elemek jelölik.aspx" method="post"> <label for="veznev">Vezetéknév:</label> <input id="veznev" type="text" /> <br /> <label for="kernev">Keresztnév:</label> <input id="kernev" type="text" /> <br /> <input type="submit" value="Mehet" /> </form> Ami így jelenik meg a felhasználó számára: 22. E kettő között úgy lehet kapcsolatot teremteni. a mezőkhöz tartozó beviteli vezérlők többségét pedig az <input> elem jeleníti meg. fejezet – Balássy György: Bevezetés a web programozásába 35 .

A title attribútumba olyan súgó szöveget írhatunk. Az <input> elem type attribútumában kell megadnunk. A lehetséges értékeket a <select> elemen belül elhelyezett <option> elemekkel kell felsorolni: <select id="szinek"> <option value="P">Piros</option> <option value="F">Fehér</option> <option value="Z">Zöld</option> </select> Mikor a felhasználó választ egy elemet és elküldi az űrlapon megadott adatokat a szerverre. erre szolgál a <fieldset> elem. században 1.Ide jönnek a személyes adatok mezői --> </fieldset> <fieldset> <legend>Szakmai adatok</legend> <!-. amivel a felhasználó (ha az ALT gombbal együtt. de nem látszanak a beírt karakterek) file: fájl feltöltés hidden: rejtett Az input vezérlővel gombokat is tehetünk az űrlapunkra. hogy pontosan milyen beviteli mezőre van szükségünk.Ide jönnek a szakmai adatok mezői --> </fieldset> </form> Honlapépítés a XXI.aspx" method="post"> <fieldset> <legend>Személyes adatok</legend> <!-. az <option> elem value attribútumában megadott értéket fogja megkapni a szerver. Így az űrlap nemcsak egérrel lesz kezelhető. ami rövid. egyértelmű. Az input vezérlőn kívül gyakran használunk még legördülő listákat. hanem előre meghatározott értékek közül választhasson ki egyet.Azonosítóként bármit használhatunk. Az accesskey attribútumban pedig egy billentyűt határozhatunk meg. amivel tetszőleges feladatot bízhatunk a gombra Az input vezérlőnek van még két hasznos attribútuma. hanem a billentyűzet használatával is mozoghatnak a felhasználók az egyes mezők között. Ezek a lehetséges értékek:       text: szövegdoboz checkbox: jelölőnégyzet radio: rádiógomb password: jelszó mező (szövegdoboz. szintén a type attribútum beállításával:    submit: elküldi az űrlap tartalmát a <form> elemben megadott címre reset: kitörli az összes űrlap mezőbe beírt értéket button: egyszerű nyomógomb. vagy más böngészőkben a SHIFT+ALT gombbal együtt nyom le) gyorsan „beleugorhat” a szöveg kurzorral a mezőbe. JavaScript kódot kell írnunk. amin belül az egyes részeknek a <legend> elemmel adhatunk címet: <form action="urlap. de a bevált gyakorlat szerint olyan azonosítót választunk. hogy a felhasználónak ne kelljen gépelnie. ezért fontos ennek az attribútumnak az egyértelmű. illetve nem tartalmaz ékezeteket és szóközöket. fejezet – Balássy György: Bevezetés a web programozásába 36 . Ha egy űrlap hosszú. ha a felhasználó a vezérlő fölé viszi az egeret. akkor célszerű azt részekre bontani. ami akkor jelenik meg. program által könnyen feldolgozható értékekkel történő kitöltése.

F12) található Validate menüpontot: Honlapépítés a XXI. Erre kiválóan használható a W3C által biztosított Markup Validation Service (http://validator. akkor pedig instrukciókat kapunk arra vonatkozóan. és válaszul egy részletes jelentést találunk a benne található hibákról. Például nem lehet <p> elemeket egymásba ágyazni – szerencsére nem is lenne értelme bekezdésen belül bekezdést írni. században 1. Ha az oldalunkat már feltöltöttük egy nyilvános webszerverre. mégpedig az elemek egymáshoz viszonyított helyzetére vonatkozóan: a HTML szabvány szigorúan meghatározza.w3. Sajnos nem mindenhol ennyire egyszerű és logikus a helyzet.23. hogyan jelezhetjük oldalunk kiválóságát egy erre szolgáló logó segítségével. Ez egy ingyenes és nyilvános szolgáltatás. amelyre feltölthetjük az elkészített HTML oldalunkat. ábra .org). hogy az általunk elkészített HTML kód helyes-e. van még egy fontos megkötés. akkor a HTML kód validálásához használhatjuk az Internet Explorer Fejlesztői Eszköztárán (Developer Toolbar. Azon kívül. hogy a HTML nyelvben csak ezeket az előre definiált elemeket használhatjuk. fejezet – Balássy György: Bevezetés a web programozásába 37 . ritkábban használt elemet definiál. ám ezek mellett a HTML nyelv még sok.Hosszú űrlap több részre bontva Validálás Az előző fejezetekben számos elem szerepét és lehetőségeit tekintettük át. hogy az egyes elemeknek mely elemek lehetnek a gyermekei. Ha a kódunk helyes. ezért célszerű valamilyen programmal ellenőrizni.

(http://browsershots. Sajnos a gyakorlatban nem mindig elég. (http://www.24. így ennek a böngészőnek az újabb és régebbi változatai alatt tesztelhetjük az oldalunkat (http://www. A BrowserShots ingyenes online szolgáltatásnak egy webcímet kell megadnunk. és közel 70. Ennél a tesztelésnél az alábbi eszközök segíthetnek:  A Microsoft Expression SuperPreview képes egyszerre egymás mellett több böngészőben is megjeleníteni a tesztelni kívánt oldalt és az oldal egyes részeinek összehasonlításában segíteni. hogy melyikkel akarjuk a tesztelést elvégeztetni. fejezet – Balássy György: Bevezetés a web programozásába 38 . különböző platformon futó böngésző és böngésző verzió közül választhatjuk ki. amely a különböző ablakaiban az Internet Explorer különböző verzióit képes betölteni. hogy az oldalunk megfelel a szabványoknak.com/wiki/IETester/HomePage).aspx) Az IE Tester egy ingyenesen letölthető alkalmazás.microsoft. akkor el kell látogatnunk a Markup Validation Service weboldalára.mydebugbar.Validálás közvetlenül Internet Explorerből Ha az oldalunk még nem nyilvános. hogy a böngészők hogyan implementálják a szabványokat. hiszen az oldalunk megjelenése leginkább a böngészőktől függ és így attól. Ezért a szintaktikai tesztelés után mindig célszerű ellenőriznünk.org/)   Cascading Style Sheets stíluslapok Avagy mitől lesz szép az oldal? Honlapépítés a XXI.com/expression/products/SuperPreview_Overview. A szolgáltatás ezek után a háttérben megnyitja az oldalt a kiválasztott böngészőkben és készít róluk egy-egy képernyőfotót. ahol közvetlenül feltölthetjük az ellenőrizendő HTML kódot. hogy az oldalunk az elképzelésünk szerint jelenik-e meg az összes böngészőben. ábra . században 1.

képek hol és hogyan jelenjenek meg. Honlapépítés a XXI. A HTML és CSS attribútumok elnevezése néhol teljesen egyező. Nemcsak strukturálni szeretnénk a tartalmat. A HTML nyelvben erre természetesen már a kezdetektől fogva van lehetőség. hiszen a dizájn részletei a tartalom között bújnak meg. Szerencsére erre van megoldás. távolságok. Egyes elemek tartalmazhatnak megjelenítésre vonatkozó attribútumokat (pl. font-weight: bold. Mivel minden oldalon újra és újra definiáljuk ugyanazokat az arculati beállításokat. Attribútumok Cascading Style Sheets stíluslapokkal dolgozva a beállításokat attribútum név-attribútum érték párosokkal adhatjuk meg. bekezdések.) lefedik. hogy az egyes részletek. helyettük a szövegszerkesztőkben megszokott módon stílusokat definiálnánk.   A nyilvánvaló megoldás az lenne. azaz szeretnénk megadni. Nehéz következetes dizájnt készíteni. vagy például a font elemmel megadhatjuk a betűtípust. hogy az oldalnak olyan arculatot adhassunk. hanem formázni is. pozíciók stb. így az ide vonatkozó HTML attribútumokra már nincs is szükség. </font> </p> Ez a megközelítés működőképes. században 1. Egyszerre több CSS attribútumnak is adhatunk értéket. Nem lehet a webhely arculatát egyszerűen megváltoztatni.Egy weboldal készítésekor természetesen alapvető elvárás. Az attribútumok neve és értéktartománya rögzített. és a szövegben csak az így kialakított stílusokra hivatkoznánk. Íme egy példa: <p align="center"> <img src="logo. amiből számos kellemetlenség következik:   Egy teljes oldal forráskódját nagyon nehéz átlátni. fejezet – Balássy György: Bevezetés a web programozásába 39 . ezért a hálózati forgalom jelentősen megnövekedhet. címek. align: igazítás). pont erre szolgál a Cascading Style Sheets (CSS) technológia. ügyelve arra. Például a fenti kódrészletben használt color attribútum létezik CSS-ben is. betűméretet és a színt. hiszen például a címsorokat minden esetben helyben kell megformáznunk. ebben az esetben pontosvesszővel kell elválasztanunk a név-érték párosokat egymástól. amilyet csak szeretnénk. hogy itt nincs szükség idézőjelekre. ugyanis a tartalom és a megjelenés nagyon keveredik egymással. hogy mindenhol következetesen ugyanúgy nézzenek ki. színek. Ha megjegyzést szeretnénk írni a CSS kódunkba. máshol csak hasonló. az align="center" HTML attribútum helyett viszont a text-align CSS attribútumot kell használnunk: text-align: center. ha a HTML kódból ki tudnánk emelni a megjelenítésért felelős elemeket és attribútumokat. akkor azt /* és */ jelek között tehetjük meg: /* Kiemelés */ color: red. hiszen a tiszta tartalmat felszabdalják a megjelenítésért felelős címkék és attribútumok. de nem túl szép. és gyakorlatilag az összes megjelenéssel kapcsolatos területet (méretek. color: red. az egyenlőségjel helyett pedig kettőspontot kell használnunk. Formailag annyi megkötés van.jpg" border="1" /> <font size="10" color="red"> Ez itt egy nagy piros szöveg középre igazítva. sőt ma már ez a javasolt és elvárt megközelítés a dizájn és az egységes arculat kialakítására.

rögzített szélességgel. border: 1px solid blue. Egyelőre csak a style blokk szintaktikáját akarjuk megismerni: <style type="text/css"> /* A body elem és a gyermek elemeinek stílusa */ body { font-family: Verdana. egy központi helyen tehetjük Honlapépítés a XXI. minden komolyabb előkészítés nélkül. hogy így a stílusbeállításaink továbbra is több helyen lesznek az oldalon. margin-left: 30px.kezeimen járok. Arial. hogy honnan fogják tudni az oldal egyes részei.Elhelyezés A következő kérdés nyilvánvalóan az. A fenti stílusbeállításoknak köszönhetően az egyszerű bekezdés így jelenik meg a böngészőben: 25. hogy mely beállítások vonatkoznak rájuk. ha levágják lábaimat . többszörösen növelik az oldal méretét. ekkor a formázandó HTML elem style attribútumába kell írnunk a CSS attribútumokat és azok értékeit: <p style="font-style: italic. background-color: #f4e7bb. akkor hason fogok csúszni. } </style> A stílus blokk lehetőséget ad arra. inline stílust. text-align: center. hogy a HTML oldalban egy helyre koncentráljuk a megjelenítésre vonatkozó részeket. font-size: 75%. nekünk kell szinkronban tartani őket stb."> Ha megnyesik szárnyaimat . width: 300px. A hátránya pedig természetesen az. és oda írjuk a CSS kódunkat. középre igazítva Egy másik lehetőség a CSS kód elhelyezésére a stílus blokk használata. Ebben az esetben tipikusan a HTML oldal head elemében hozunk létre egy style elemet. hogy bárhol használhatjuk. de erre még később visszatérünk.lábaimon járok.Egy bekezdés kerettel. hogy ezeket a CSS beállításokat hogyan kapcsoljuk a HTML kódunkhoz. Sans-Serif. században 1. csakhogy használhassak. padding: 10px. így ha esetleg át kell szabnunk az oldal arculatát. Erre háromféle lehetőségünk van: Használhatunk ún. ábra . margóval. és ha azt is kiszakítják. Ekkor persze felmerül az a kérdés. (Széchenyi István) </p> Az inline stílusnak megvan az az előnye. fejezet – Balássy György: Bevezetés a web programozásába 40 .

hogy egy definiált stílus pontosan melyik HTML elemre vagy elemekre vonatkozzon. fejezet – Balássy György: Bevezetés a web programozásába 41 . Például a második szintű címsor (h2) elé (fölé) tehetünk 25 pixel távolságot (padding-top) és aláhúzhatjuk (text-decoration) a szöveget: h2 { text-decoration: underline. aminek tipikusan a . majd ugyanarra az elemre és ugyanarra a tulajdonságára (például háttérszín) az oldalon belül megadunk egy másik beállítást. akkor az oldalon belül definiált felülírja a külső fájlban megadott értéket. Jogosan teheti fel bárki a kérdést. Az alábbi példában egy adott címsort kis kapitális stílussal jelenítünk meg: Honlapépítés a XXI. így ha módosítani kell valamit. mégpedig a következő sorrendben. a külső. akkor a * (csillag) szelektort kell használnunk. hogy lehetőleg csak külső CSS fájlt használjunk. mert ez a legrugalmasabb és legjobban karbantartható megoldás. Hivatkozhatunk a HTML elem nevére is. Erre szolgálnak a CSS szelektorok (CSS selectors). padding-top: 25px. Úgy is mondhatnánk. amikor nem a HTML fájlban helyezzük el a CSS kódot. ha mind a három megoldást egyszerre használom? Ebben az esetben a böngésző alkalmazni fogja az összes stílusbeállítást. padding: 0. margin: 0. hogy a webhely által használt összes oldal között nekünk kell szinkronban tartani a CSS blokkokat. akkor azt elég egyetlen helyen megtenni. a szélességük méretét kell számmal megadni): * { border: 0. Oldalon belüli stílus blokk 3. hogy meg kell adnunk. Ha azt akarjuk.meg azt a CSS kód átírásával. hanem egy külső fájlban. } A harmadik szelektor lehetőség. erre hivatkozik az összes oldal. Az elemhez tartozó stílusbeállítások Ez azt jelenti. hogy egy konkrét elemre hivatkozunk az id attribútumán keresztül. Az a hátrány azonban így is megmarad. automatikusan a megadott stílussal fog megjelenni. hogy formailag annyi követelmény van. hogy a közelebbi nyer. században 1. Viszont ha egy tulajdonságot csak a külső CSS fájlban adunk meg és az oldalon belül nem adunk meg erre a tulajdonságra másik értéket. Például a keretet (border). hogy egy beállítás az összes HTML elemre érvényes legyen. ám a javasolt megközelítés az. ebben az esetben az összes helyen. Ezen segít a harmadik megoldás. Ehhez a HTML kódban egyedi értéket kell adnunk az id attribútumnak. ahol az adott elemet használjuk. Külső CSS fájl 2. hiszen ilyenkor a teljes webhelyünkhöz tartozó összes stílusbeállítás egyetlen (vagy néhány) fájlban van. Ekkor a HTML oldal head elemében egy link elemmel hivatkozhatunk az oldalhoz tartozó stíluslapra: <link href="style.css kiterjesztést szoktuk adni.(margin) és a belső margót (padding) így szüntethetjük meg (a vastagságuk ill. hogy ha egy elemre a külső CSS fájlban megadunk egy beállítást. akkor természetesen a korábbi beállítás érvényre fog jutni. hogy mi van akkor. A CSS szelektorok Az előző fejezetben a stílus blokknál már érintettük azt a problémát. } Látható. Tehát lehet egy webhelyen belül egyszerre több helyen is stílusokat megadni. és ezt kell megadnunk a CSSben is egy # jel után. hogy miután egy szelektorral meghatároztuk a kiválasztandó elemek körét.css" rel="stylesheet" type="text/css" /> Ez a legpraktikusabb megoldás. a rá vonatkozó stílusbeállításokat kapcsos zárójelek között kell megadnunk. az általánostól a specifikusabb irányba haladva: 1.

a nagypiros viszont nem. azaz pixelben (px) vagy pointban (pt) adjuk meg az értéket. a HTML elem class attribútumában tudunk rá hivatkozni: <p class="szerzo">(Deák Ferenc)</p> Így az oldalon több helyen is hivatkozhatunk erre a CSS osztályra. Például a fontos dolgok hangsúlyozására szolgáló osztálynál a kiemeles jó elnevezés. A leggyakoribb példa erre a hiperhivatkozás: HTML szinten mindegyik egy-egy a elemnek látszik. akkor nagyon könnyű lesz a dizájnon módosítani. működni fog. még ha a lényeges részeket az oldalon nagyobb. a lényeg az. ha képpontban. amelyek szintén hasznosak lehetnek munkánk során. Ezekre az esetekre megadhatunk más formátumot CSS-ben: a:hover { color: #be2d00. ami meghatározza. Ezen kívül vannak még további speciális szelektorok. csak éppen nem fogjuk később érteni. hogy nem az elem összes előfordulását. hogy a fontos részek megjelenítésénél használjuk. ha kéken jelenik meg. Ha követjük ezt a bevált gyakorlatot. Ezután azon a helyen. hogy fölé visszük-e az egeret (hover). Hasonló relatív megadási mód az em egység használata: 1em az aktuális betűtípus méretével egyezik meg. class) a leggyakrabban használt szelektor típus. hogy a színekre CSS-ben kétféleképpen hivatkozhatunk: a nevükkel vagy a kódjukkal. JÓTANÁCS: Célszerű olyan elnevezéseket választani a CSS osztályainkhoz. aminek tetszőleges nevet adhatunk. században 1. font-size: 80%. } a:visited { color: Black. hogy pontot írjunk elé. Például definiálhatunk egy szerzo osztályt.szerzo { font-style: italic. } Ebben a példában az is látszik. hogy a szöveg legyen dőlt (font-style) és kisebb (font-size): <style type="text/css"> . id. vagy hogy meglátogattuk-e már (visited) a hivatkozott oldalt. fejezet – Balássy György: Bevezetés a web programozásába 42 . hanem csak néhány kitüntetett helyen akarunk alkalmazni egy stílust. } </style> Ebben a példában a betűméretet %-ban. hogy miért hívjuk nagypirosnak. azaz nehéz lesz a kódunkat karbantartani. nem pedig arra. piros betűvel jelenítjük is meg. akár különböző HTML elemekben is. Név szerint meglehetősen sok színre tudunk hivatkozni Honlapépítés a XXI. hogy mire szolgál az adott osztály. } </style> <h2 id="idezetek">Idézetek</h2> Könnyen lehet. amik arra utalnak. de az oldalon megjelenve lesz különbség köztük aszerint. Ebben az esetben célszerű létrehoznunk egy saját stílus osztályt. hogy hogyan néz ki. például a kiemeles osztályt bátran átszínezhetjük kékre. Ez a négy (*.<style type="text/css"> #idezetek { font-variant: small-caps. azaz a normál mérethez viszonyított arányban adjuk meg. Van lehetőség abszolút méret megadására is. a neve továbbra is arra utal. ahol használni akarjuk. pszeudo-osztályok (pseudo-class) lehetővé teszik speciális tulajdonságokkal bíró elemek kiválasztását és ahhoz stílus definiálását. A nagypiros osztályban is átírhatjuk a színezést más színre. elem. Az ún. és nem is egy konkrét elemet akarunk formázni.

Az összes olyan képre (img). így hivatkozhatunk: p img { margin-right: 10px. amely egy bekezdésen (p) belül található. hogy miért így csináltuk. a HTML elemek egymásba ágyazását kihasználva egészen specifikus szelektorokat is használhatunk.AliceBlue-tól YellowGreenig. ami a # jel után 6 karakter megadását jelenti. azonban a gyakorlatban célszerű kerülni a szelektorok túlbonyolítását. Például az összes bekezdés első betűjét (p:first-letter) felnagyítva iniciálé hatást érhetünk el: p:first-letter { font-size: 130%. sőt osztályokat és id-kat is bevonhatunk. Ez a 6 karakter valójában 3×2 karakter. Ha nem akarjuk magunk elvégezni az átváltást. } Ezt persze fokozhatjuk akár több szint mélységben.0. mert a böngészőnek is tovább tart megjeleníteni. akkor használhatjuk az Internet Explorer Developer Toolbar (F12) Tools menüjének Show Color Picker (CTRL+K) eszközét. mindhárom helyen az RGB színskálának megfelelő 0-255 értékek hexadecimális változatai szerepelnek. A precíz megoldás a színkódok használata. például: rgb(255. de természetesen csak a gyakoribbakra. hogy ún. és mi sem fogjuk megérteni később. Honlapépítés a XXI. A megjelenő pipettával egyszerűen mutassunk rá a weboldalon a szimpatikus színre. aminél zárójelben az RGB színkomponensek értékeit tízes számrendszerben kell megadnunk.0) Tipp: ha tetszik valahol egy szín és szeretnénk megtudni a kódját. valamint hogy ezek pontosan hogyan is jutnak érvényre. Sőt. akkor használhatjuk az rgb makrót. és a kis ablakban máris látjuk a színhez tartozó HTML kódot: Arra is van mód. pszeudo-elemekkel (pseudo-element) meghatározzuk egy elem speciális tulajdonságokkal bíró részének a formáját. században 1. } Ezekkel a szelektorokkal a HTML dokumentum bármely elemét el tudjuk érni és meg tudjuk formázni. Tehát például a piros színre hivatkozhatunk a nevével (Red) vagy a kódjával (#ff0000) is. fejezet – Balássy György: Bevezetés a web programozásába 43 .

Span és div Mi van akkor, ha nincs is a kívánt helyen semmilyen HTML elem? Ebben a kódrészletben például szerepel a nemkívánatos (elavult, nem javasolt a használata, de a böngészők megértik) font elem a lényeg pirossal történő kiemelésére:
Ez itt a <font color="red">lényeges</font> rész.

Ha az ajánlásoknak megfelelően mellőzzük a font elemet, akkor marad a csupasz szöveg, de vajon milyen szelektorral tudunk egyetlen szóra hivatkozni? Sajnos semmilyennel, mindenképp szükségünk van egy HTML elemre. Ha ilyen problémával találkozunk, hogy az oldalon belül egy kisebb részt szeretnénk megformázni, akkor beszúrhatunk egy span elemet, és arra alkalmazhatjuk a stílust a korábban már megismert módokon:
<style type="text/css"> .fontos { color: red; } </style> Ez itt egy <span class="fontos">lényeges</span> rész.

Ha az oldalnak egy nagyobb részét (például fejléc, jobb hasáb, friss hírek blokk stb.) szeretnénk formázni, akkor hasonlóan használhatjuk a div (division) elemet. Mindkét elemnek van style, class és id attribútuma, a formázás tehát hasonlóan megy mindkét esetben. A nagy különbség, hogy a span ún. inline elem, a div pedig blokk elem. Ez első megközelítésben annyit jelent, hogy a span nem változtat az oldal elrendezésén, a div után viszont alapértelmezés szerint bekerül egy sortörés, ezzel is jelezve, hogy ott egy újabb nagyobb blokk következik. Ennél azonban fontosabb, hogy a span csak további inline elemeket tartalmazhat (pl. strong, em, abbr, de div vagy p nem), míg a div szinte bármilyen HTML elemnek lehet a szülő eleme, így akár bekezdéseket vagy további div és span elemeket is tartalmazhat. Spant majdnem bármilyen másik elembe tehetünk, a div azonban szigorúbb, például spanbe vagy p elembe nem ágyazhatjuk. Öröklés A CSS egyik legérdekesebb és leghasznosabb tulajdonsága, hogy a beállítások öröklődnek. Ennek köszönhető, hogy nem szükséges minden beállítást minden elemre definiálnunk, hanem elég a legkülső elemre megadnunk, onnan öröklődni fog a gyermek elemekre. Lehet például egy bekezdésünk egy kiemelt résszel:
<p> Jártál-e már <em>Makkoshotykán</em>? </p>

Ha a bekezdést kékkel írjuk, automatikusan a kiemelés is kék lesz, nem szükséges arra külön megadnunk ugyanezt a stílust:
p { color: blue; }

Szerencsére nem minden beállítás öröklődik, hanem csak azok, amelyeknek tipikusan kívánatos az öröklődése. A keretezés (border) például nem öröklődik. Ha öröklődne, akkor a bekezdésre alkalmazott kereten belül megjelenne egy külön keret Makkoshotyka körül is. Ha szeretnénk kikényszeríteni az öröklést, akkor az inherit értéket adhatjuk meg az attribútumnak:
border: inherit;

Honlapépítés a XXI. században 1. fejezet – Balássy György: Bevezetés a web programozásába

44

A CSS-ben általában igaz az, hogy a specifikusabb beállítások fontosabbak, mint az általánosabb beállítások, ezért előfordulhat, hogy a szülőtől öröklődő értéket egy gyermek elemre megadott stílus felülírja. Ha ezt nem szeretnénk, használhatjuk az !important kiegészítést:
em { color: red; } p { color: blue !important; }

Doboz modell Az elemek méretének meghatározásához és helyes pozicionálásához érdemes megismerkednünk a CSS doboz modellel (CSS box model). Az alábbi ábra szemlélteti, hogy egy adott HTML elem (leggyakrabban div) esetén pontosan hol is állítjuk a belső margó (padding), keret (border) és külső margó (margin) értékeket:

26. ábra: A CSS doboz modell

Bár a doboz modell logikusnak és egyértelműnek látszik, történeti okokból sajnos a böngésző gyártók nem egyformán valósították meg, emiatt könnyen előfordulhat, hogy ugyanazt az oldalt különböző böngészőkben megtekintve pár pixel különbséget tapasztalunk. Ez többnyire nem okoz gondot, azonban ha nagyon kicentizzük az oldalt és mindent pixelre kikalkulálunk, akkor lehet, hogy kellemetlen élményben lesz részünk, például az egyik böngészőben egymás mellé kerül két elem, míg egy másik böngészőben egymás alá tördelődnek, mert ott éppen nem férnek ki egy sorba. Az alábbi ábra például a W3C szabványnak megfelelő és az Internet Explorer régebbi változatai által alkalmazott doboz modell közötti különbséget szemlélteti:

Honlapépítés a XXI. században 1. fejezet – Balássy György: Bevezetés a web programozásába

45

27. ábra: IE és W3C doboz modell (Forrás: Wikipedia)

JÓTANÁCS: Bár a szabványok és a böngészők egyre jobban közelednek egymáshoz, egyelőre sajnos nem a doboz modell a CSS egyetlen böngészőfüggő része (lásd QuirksMode.org). A váratlan problémák elkerülése érdekében ezért célszerű az oldalunkat minden böngészőben ellenőrizni, amit a webhelyen támogatni szeretnénk. Az oldal megjelenésének teszteléséhez jól használható a Microsoft Expression SuperPreview, az ingyenesen letölthető IE Tester és az online szolgáltatásként elérhető BrowserShots.

Oldalelrendezések A webhely arculatának kialakításakor az egyik első feladatunk az oldalak elrendezésének kialakítása lesz. Ki kell találnunk, hogy milyen széles és milyen magas lesz az oldal, lesz-e fejléc, lábléc, esetleg menü – és persze azt is, hogy mindez hol és mekkora méretben fog megjelenni. Hagyományosan erre létezik egy nagyon egyszerű megoldás, a táblázat alapú oldalelrendezés (tablebased layout). Ennek a lényege, hogy a HTML nyelv által biztosított táblázat elemekkel (table, td, tr) valójában az egész oldalt egy nagy, láthatatlan keretekkel megrajzolt táblázatként képzeljük el. Például a bal hasáb a táblázat első oszlopa, a jobb hasáb a táblázat utolsó oszlopa, a felső menü pedig egy nagy cella, összevonva a táblázat összes oszlopát. Ha a nagy külső táblázat valamelyik celláját tovább kell osztanunk, akkor abban újabb táblázatot helyezünk el, ahol a sorokat és oszlopokat az igényeknek megfelelően vonjuk össze. A végeredmény egy gigantikus táblázat rengeteg, amiből szerencsére a végfelhasználó semmit nem vesz észre.

Honlapépítés a XXI. században 1. fejezet – Balássy György: Bevezetés a web programozásába

46

A táblázatos elrendezésnek a „súlyosbított” fajtája az ún. spacer GIF-ek alkalmazása. Ennél a megoldásnál az oldal egyes elemeinek pozicionálását átlátszó (azaz rejtett) képfájlok tetszőleges átméretezésével oldják meg, amelyek így épp a kívánatos mértékben tolják szét az oldalon lévő rejtett táblázatot. Ennek a megközelítésnek azonban számos hátránya van:  A HTML nyelv táblázattal kapcsolatos elemeit táblázatos adatok megjelenítésére találták ki. Egy táblázatnak lehet fejléc sora, lábléc sora és benne az egyes cellákban adatok szoktak megjelenni, és ezeket az adatokat lehet soronként vagy oszloponként olvasni. Egy szó mint száz, a table elem arra való, hogy a felhasználónak egy a hagyományos értelemben vett táblázatot jelenítsünk meg. A table elem szemantikai jelentését bizonyos programok kihasználják, például a látássérültek által használt képernyőolvasók vagy a keresőmotorok. Ezek az alkalmazások speciálisan értelmezik a táblázatot, ezzel segítve a felhasználót. A táblázat alapú oldalelrendezés nagyon sok HTML kódot eredményez, mely nemcsak az oldal letöltését és betöltését lassítja, hanem ráadásul nagyon nehezen átlátható, azaz nehezen tudunk később belejavítani.
„A pokolba vezető út átlátszó képekkel és egymásba ágyazott, rejtett táblázatokkal van kirakva.” - Bill Merikallio, Adam Pratt

Ezek a megoldások a maguk idejében sem voltak ideálisak, ma már kifejezetten idejétmúltak, sőt nem túlzás azt állítani, hogy napjainkban igen ciki ezeket használni pozicionálásra. A korrekt megoldás a táblázatmentes oldalelrendezés (tableless layout) alkalmazása. A táblázatmentes elrendezésnél az alapelv, hogy mindent stílusbeállításokkal próbálunk a megfelelő helyen és a megfelelő formában megjeleníteni. Ez a legtöbbször azt jelenti, hogy az oldalon létrehozunk számos div elemet (pl. fejléc, menü, kereső doboz, lábléc stb.) és ezeket CSS-sel méretezzük és pozicionáljuk. A következő példában az egyik leggyakoribb oldalelrendezést készítjük el táblázatok nélkül. A cél egy olyan oldal, aminek van egy 50 pixel magas fejléce, egy 20 pixel magas lábléce, a kettő közötti rész pedig függőlegesen 30%-70% arányban osztott, és mindez összesen 950 pixel szélességben középre rendezve jelenik meg az oldalon, valahogy így:

Fejléc

Menü

Tartalom

Lábléc Mivel az oldal egyes részei önmagukban is összetettek lehetnek (képek, bekezdések, felsorolások stb.), ezért minden egyes részt önálló div elembe zárunk, amiket pedig az id attribútumon keresztül egyedi névvel látunk el:

Honlapépítés a XXI. században 1. fejezet – Balássy György: Bevezetés a web programozásába

47

<div id="keret"> <div id="fejlec">Fejléc helye</div> <div id="balmenu">Bal menü helye</div> <div id="tartalom">Tartalom helye</div> <div id="lablec">Lábléc helye</div> </div>

A CSS fájlban ezekre az egyedi azonosítókra hivatkozva állítjuk be az oldal egyes részeinek megjelenését. Az egész oldal legyen 950 pixel széles és középre rendezett:
#keret{ width: 950px; margin-left: auto; margin-right: auto; }

Majd jöjjön az 50 pixel magas fejléc:
#fejlec{ height: 50px; }

A következő két div a balmenu és a tartalom egymás mellett:
#balmenu{ width: 30%; float: left; } #tartalom{ width: 70%; float: right; }

Végül pedig a lábléc, ami a teljes szélességet kitölti és 20 pixel magas:
#lablec{ height: 20px; clear: both; }

Ezzel készen is vagyunk. Látható, hogy a HTML kód nagyon egyszerű maradt, és az azonosítóknak köszönhetően jól olvasható, hogy az egyes blokkok az oldal melyik részét jelentik. A CSS kód sem bonyolult, ráadásul nagyon rugalmas, hiszen könnyen vehetjük magasabbra a fejlécet vagy éppen szélesebbre a menüt. Több stíluslap Van lehetőségünk arra, hogy egy HTML oldalhoz több CSS stíluslapot rendeljünk. Ehhez mindössze annyit kell tennünk, hogy a HTML oldal head részébe több link elemet teszünk és több külső .css fájlra hivatkozunk. Ez több esetben is hasznos lehet. Az egyik gyakori eset több stíluslap alkalmazására az ún. reset CSS. A böngészők az egyes HTML elemekhez rendelnek egy alapértelmezett megjelenítést, például a címsorokat nagyobb betűvel jelenítik meg, a bekezdések között hagynak egy kis helyet stb. Sajnos ez nem egészen egyezik az egyes böngészőkben, éppen ezért bevált gyakorlat egy önálló CSS fájl alkalmazása, amely eltörli ezeket a különbségeket. Eric Meyer például ezt javasolja (részlet):
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,

Honlapépítés a XXI. században 1. fejezet – Balássy György: Bevezetés a web programozásába

48

de lecserélhető --> <link rel="stylesheet" type="text/css" href="normal. Extra információk jelenhetnek meg (például szerzői jogok. Ezeknek a problémáknak az elkerülésére célszerű az oldalhoz egy nyomtatóbarát stíluslapot is készíteni. var. Serif (talpas) betűt használ (nyomtatásban jobban olvasható).Ez mindig alkalmazódni fog --> <link rel="stylesheet" type="text/css" href="reset.css" title="Gyengénlátó változat" /> Az alapértelmezett és az alternatív változatok között az oldal látogatói a böngésző beépített menüpontjai segítségével válthatnak (Firefoxban például View menü Page style menüpontjával). b. label. fejezet – Balássy György: Bevezetés a web programozásába . background: transparent. alternatív stíluslapok (alternate style sheet) alkalmazása. hogy az oldal szélesebb. hogy egy weboldalhoz több CSS fájlt rendelünk hozzá. ezzel azonban számos probléma lehet: előfordulhat. linkek URL-jei).Ez lesz az alapértelmezett. tr. border: 0.css" type="text/css" media="screen" /> <link rel="stylesheet" href="print. } Egy másik érdekes lehetőség az ún. Abszolút helyett relatív méretezést alkalmaz (például 950px szélesség helyett 100%). tt. az oldal bal hasábja (ami biztosan ráfér a papírra) csak menüt és reklámot tartalmaz stb. reklám) eltűnnek. Felesleges képernyő elemek (például menü. tfoot. dd. Itt is arról van szó. A link elem media attribútumában adhatjuk meg. hogy az adott stíluslapot a böngésző a képernyőn használja (screen) vagy nyomtatáskor (print): <link rel="stylesheet" href="main. dl. mint a papír. amit a felhasználó kiválaszt. ol. vertical-align: baseline. } body { line-height: 1. a szöveg sötét alapon fehér betűkkel szedett. hanem mindig csak az.Alternatív stíluslap --> <link rel="alternate stylesheet" type="text/css" href="large.css" /> <!-.strong. akkor a böngésző megpróbálja pontosan azt megjeleníteni a nyomtatón. table. Így az oldal szokásos megjelenítésén kívül készíthetünk például gyengénlátóknak szánt erősen kontrasztos változatot. form. sup. td { margin: 0. caption. outline: 0. században 1. } ol. A több stíluslap lehetőségének legpraktikusabb kihasználása kétségkívül a nyomtatóbarát változat megvalósítása.css" title="Normál változat" /> <!-. u. font-size: 100%. sub. tbody.css" type="text/css" media="print" /> A nyomtatóbarát változat számos ponton eltérhet az oldal szokásos megjelenítésétől:      Fehér alapon fekete betűkkel jelenik meg. legend. ul. i. thead. csak éppen még nevet is kell adnunk a stíluslapunknak a title attribútumon keresztül: <!-. th. 49 Honlapépítés a XXI. center. padding: 0. csakhogy ezek nem egyszerre alkalmazódnak. ul { list-style: none. fieldset. Ennek a megvalósítása is a head elembe tett link elemekkel lehetséges. dt. Amikor kinyomtatunk egy weboldalt. li. amit a képernyőn is látunk.

célszerű lefuttatnunk egy ellenőrzést. például az oldalelrendezéseknél látott bal oldali menüt így rejthetjük el: #balmenu{ display: none. ezért általában megéri ezzel fáradnunk. fejezet – Balássy György: Bevezetés a web programozásába 50 . majd a Check gombra kattintva azonnal megkapjuk az elemzés eredményét. Erre legegyszerűbben a W3C CSS Validation szolgáltatását használhatjuk. Ellenőrzés Miután elkészültünk az oldalunkkal és a hozzá tartozó CSS fájllal. } A nyomtatáshoz használt CSS beállítások kialakítása időigényes feladat. hogy elkészült kódunk megfelel-e a szabványnak. Itt megadhatjuk egy nyilvánosan elérhető webhelynek a címét. mert a felhasználó sokkal elégedettebb lesz.w3. a böngésző Nyomtatás ikonjára kattintva kinyomtatja az oldalt. amikor a jól bevált módon. amely a http://jigsaw.org/css-validator/ címen ingyenesen érhető el.A leggyakoribb feladat a nemkívánatos blokkok elrejtése. feltölthetünk a gépünkről egy CSS fájlt. például megtalálható az Internet Explorer Developer Toolbaron is a Validate menüpont alatt: Honlapépítés a XXI. században 1. } #tartalom{ width: 100%. vagy akár egy nagy szövegdobozba is bemásolhatjuk a CSS kódunkat. ábra: A W3C CSS Validation szolgáltatása A W3C-nek ezt a hivatalos szolgáltatását számos webfejlesztő program és böngésző kiegészítés beépítetten tartalmazza. 28. de megéri.

valamint tisztában vagyunk az alapvető technológiákkal és protokollokkal. fejezet – Balássy György: Bevezetés a web programozásába 51 . Honlapépítés a XXI. ábra: CSS validator az IE Developer Toolbaron Ennek a fejezetnek a segítségével megértettük az internet működését. században 1.29. Itt az ideje. hogy elmélyedjünk a dinamikus weboldalak készítésének rejtelmeiben.

fejezet – Bevezetés a WebMatrixba és az ASP. hogy webhelyeket hozzunk létre. fejezet – Bevezetés a WebMatrix Betába és az ASP.com/fwlink/?LinkID=205867 2. C# vagy Visual Basic programozási nyelvet is használhatunk.NET weboldalakba Ebben a fejezetben megismerhetjük a Microsoft WebMatrixot. A WebMatrix segítségével készült weboldalak dinamikusak is lehetnek – felhasználói interakció vagy más események. 1. melyek az ASP. könnyen átlátható fejlesztőkörnyezet. Webmatrix telepítése A WebMatrix telepítéséhez használhatjuk a Microsoft ingyenes Web Platform Installerét. Ebben a fejezetben megtudhatjuk.NET-et (egy webes futtatókörnyezetet) és az SQL Server Compactot (egy beépített adatbázist) tartalmazza. például az adatbázis változása esetén megváltozhat a lapok tartalma vagy megjelenése. vagy készíthetünk saját eszközeinkkel olyan weboldalakat. kipróbálhatjuk a WebMatrix eszközöket. letölthetjük a következő címről: http://go. és kattintsunk a WebMatrix felirat melletti Add gombra a telepítéshez! Honlapépítés a XXI. mely a legjobb környezetet nyújtja webfejlesztők számára. Ezen felül találunk egy egyszerű eszközt.NET alapú dinamikus weboldalak készítéseskor Razor szintaxist.microsoft.NET-et használják. Ha már használunk valamilyen programozói eszközt.NET weboldalakba 52 . az ASP.2. A csomag az IIS Expresst (egy fejlesztői webszervert). mellyel egyszerűen telepíthetjük és konfigurálhatjuk a webbel kapcsolatos technológiákat. mely többféle webes eszközt magába foglalva teszi gyerekjátékká weboldalak elkészítését. és dinamikus weboldalakat készítsünk. egy ingyenes webfejlesztő technológiát. mellyel hatékonyabban fejleszthetjük és hamarabb elindíthatjuk weboldalunkat különféle nyílt forráskódú modulok felhasználásával. válasszuk a Products fület. Ha még nem rendelkezünk a Web Platform Installerrel. hogyan segít a WebMatrix abban. hogy még többet kihozhassunk az oldalunkból? Mi az a WebMatrix? A WebMatrix egy ingyenes. Indítsuk el a Web Platform Installert. században 2. A fejezetből megtudhatjuk:      Mi az a WebMatrix? Hogyan telepíthetjük fel? Hogyan kezdjünk el egyszerű weboldalakat létrehozni a WebMatrix segítségével? Hogyan készíthetünk dinamikus weboldalakat a WebMatrixszal? Hogyan programozhatunk weboldalakat a Visual Studio segítségével. A most elsajátított tudásunkat és WebMatrixban fejlesztett kódunkat könnyedén felhasználhatjuk a Visual Studio vagy SQL Server használata során is. ASP.

fejezet – Bevezetés a WebMatrix Betába és az ASP. hogy a korábban készített webhelyek nem jelennek meg a My Sites listában. Ebben az esetben előfordulhat. Indítsuk el a WebMatrixot! Honlapépítés a XXI.Megjegyzés: Ha már korábban feltelepítettük a WebMatrix Beta verzióját. amikor először megnyitjuk a WebMatrixot. válasszuk ki a kívánt webhelyet. Egy korábban készített webhely megnyitásához kattintsunk a Site From Folder ikonra. Első lépések a WebMatrixszal Elsőként hozzunk létre egy új webhelyet és egy egyszerű weboldalt! 1. a Web Platform Installer frissíti azt a végleges verzióra. században 2.NET weboldalakba 53 . és kattintsunk az Open gombra! A WebMatrix következő megnyitásakor a webhely már látszani fog a My Sites listában.

Kattintsunk az OK gombra.2. században 2. Honlapépítés a XXI. Válasszuk az Empty Site lehetőséget. Válasszuk a Site From Template lehetőséget! A sablonok (Templates) előre megírt fájlokat és oldalakat tartalmaznak különböző típusú webhelyekhez. és nevezzük Hello-World-nek! 4. A WebMatrix létrehozza és megnyitja az új webhelyünket.NET weboldalakba 54 . fejezet – Bevezetés a WebMatrix Betába és az ASP. 3.

fejezet – Bevezetés a WebMatrix Betába és az ASP. ahogyan a Microsoft Office 2010 programjaiban megszokhattuk. ahol a különböző gombokra kattintva változtathatjuk. vagy fájlokat módosíthatunk. ahol az épp aktuális tudnivalókról értesülhetünk. A bal alsó sarokban láthatjuk a munkafelület-választót (workspace selector). hogy mi jelenjen meg felettünk a bal oldali panelon. Weboldal létrehozása Válasszuk a WebMatrixban a Files munkafelületet! Ezzel a felülettel kezelhetjük fájljainkat és mappáinkat. Végül az alsó sorban az értesítési sávot találjuk. azon belül a New File lehetőségre! Honlapépítés a XXI. 1.NET weboldalakba 55 . században 2. Kattintsunk a szalagon a New gombra. A baloldali panelban láthatjuk a webhely fájljainak struktúráját.Az ablak tetején találjuk a Gyorselérési eszköztárat és a szalagot. Jobb oldalon találjuk a tartalom panelt. ahol például jelentéseket tekinthetünk meg.

fejezet – Bevezetés a WebMatrix Betába és az ASP. 2. században 2. melyek tartalmazhatnak hagyományos kódokat. Kattintsunk az OK gombra! A WebMatrix létrehozza a fájlt. Legtöbbjük.) 3. Láthatjuk. és a Name felirat mellé írjuk be a fájl nevét: default. fejlécet és bekezdést az oldalhoz: Honlapépítés a XXI.A WebMatrix különféle fájltípusokat ajánl fel.cshtml. de ezenfelül programkódokat is írhatunk weboldalunkhoz. és megnyitja a szerkesztőben. hogy ez egy hagyományos HTML kód.NET weboldalakba 56 . (A CSHTML fájlokkal később részletesebben megismerkedünk. Adjuk hozzá a következő címet. A CSHTML oldalak olyan speciális oldalak a WebMatrixban. 4. például a HTML. CSS vagy a TXT már ismerős lehet. Válasszuk a CSHTML-t. mint HTML vagy JavaScript.

melynek segítségével weboldalaink futását tesztelhetjük.cshtml oldalunkat! 2. melyek egyszerűbbé teszik a gyakori programozási feladatokat. Megjegyzés: Mielőtt a Run gombra kattintva futtatjuk a weboldalt. a WebMatrix megpróbálja az oldal kezdőlapját (default. a böngésző hibát fog jelezni.NET Web Pages telepítésével. ha a port száma nem 8080): Honlapépítés a XXI. érdemes feltelepítenünk az ASP. fejezet – Bevezetés a WebMatrix Betába és az ASP. és gyakran lesznek segítségünkre az útmutató során. Az elérhető helperek listáját a függelékben találjuk. A böngésző címsorában töröljük ki a cím végéről a default. Gyorselérési eszköztáron mentsük munkánkat a Save gombra kattintva! Kattintsunk a szalagon a Run gombra. században 2. de néhány továbbit kell telepítenünk más gyűjteményekből).<!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.cshtml) futtatni. Az oldal az alapértelmezett böngészőnkben nyílik meg. de ha nem talál ilyet. Helperek telepítése a Package Manager segítségével Miután feltelepítettük a WebMatrixot.NET weboldalakba 57 . Ez a gyűjtemény olyan helpereket (komponenseket) tartalmaz. hogyan használjuk a Package Manager eszközt a Helper csomagok telepítéséhez.cshtml feliratot. Ha egy oldalt sem jelöltünk ki. A következő lépésekből megtudhatjuk. győződjünk meg róla. akkor is. hogy a futtatni kívánt weboldalunk van kiválasztva a Files felületen! A WebMatrix mindig azt az oldalt indítja el. és létrehoztuk első webhelyünket. amelyik ki van jelölve bal oldalon.NET Web Helpers Libraryt. (Néhány helper már automatikusan feltelepül az ASP. ha épp valamelyik másik oldalt szerkesztjük. 1. A WebMatrix elindít egy webszervert (IIS Express). Futtassuk a korábban elkészített default. és írjuk át _Adminra! Az eredmény legyen ehhez hasonló (nem baj.

Kattintsunk a Show felirat melletti legördülő menüre. Hozzuk létre a jelszót! Ha ezzel kész vagyunk.http://localhost:8080/_Admin 3. kattintsunk a Manage Feeds linkre. ahol hozzáadhatunk. létre kell hoznunk egy jelszót. és láthatjuk a Package Manager oldalt. az _Admin oldal bejelentkezik. fejezet – Bevezetés a WebMatrix Betába és az ASP. hogy belépünk az _Admin oldalra. 5. és válasszuk az Online lehetőséget! Erre a lehetőségre kattintva egy listát kapunk a telepíthető csomagokról. módosíthatunk vagy törölhetünk forrásokat. században 2.) Megjegyzés: Válasszuk a legördülő menüben az Updates lehetőséget a már telepített csomagok elérhető frissítéseinek megjelenítéséhez! Honlapépítés a XXI. Alapértelmezésként a Package Manager minden telepített csomagot (package) mutat. 4. Nyomjuk meg az Entert a cím megnyitásához! Mivel ez az első alkalom. (Ha szeretnénk további forrásokat megtekinteni.NET weboldalakba 58 .

illetve láthatjuk a csomag licencszerződését. Nyissuk meg a default. ASP. A részleteket leíró oldalon kattintsunk ismét az Install gombra a telepítéshez! Amikor a csomag feltelepült. 1. Ha valami oknál fogva el szeretnénk távolítani az ASP. melyben egyszerű kódok segítségével jeleníthetjük meg a szerveren aktuális dátumot és időt az oldalon. ezen az oldalon tehetjük meg. a Package Manager jelzi a változást.NET Web Helpers Library telepítéséhez.Helper telepítéséhez! A Facebook helperrel később részletesebben megismerkedünk.cshtml fájlunkat egy dinamikus weboldallá. Kattintsunk a microsoft-web-helpers felirat melletti Install gombra az ASP. Ismételjük meg a 6. fejezet – Bevezetés a WebMatrix Betába és az ASP. 8. lépéseket a Facebook.NET weboldalak HTML kódjába. A megnyíló oldalon részletesebb információkat kapunk a csomagról. milyen egyszerűen alakíthatjuk default.) A most következő kód bemutatja az egyik helpert. melyről korábban olvashattunk. mellyel kódokat illeszhetünk az ASP. Ez a példa bemutatja a Razor szintaxis használatát.NET weboldal kódok használata Most olyan oldalt fogunk készíteni.cshtml fájlt! 2.NET Helpers Libraryt.6.NET weboldalakba 59 . (Ezzel részletesebben a következő fejezetben foglalkozunk. században 2. 7. és 7. Készítsük el az oldalunkat a példának megfelelően: <!DOCTYPE html> <html lang="en"> <head> Honlapépítés a XXI. A következő fejezetben megtudhatjuk.

<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. <input type="text" name="TwitterUser" value=""/> &nbsp. 3. 1. és elküldte azt a böngészőbe. ami. például. Az új oldal tartalma legyen a következő: <!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: &nbsp. kiválasztotta a megjelenés formátumát.) Tegyük fel. hogy görgessük folyamatosan egy kiválasztott Twitter felhasználó bejegyzéseit. Hozzunk létre egy új CSHTML fájlt TwitterFeed. (A formátum egyszerűen módosítható. <input type="submit" value="Submit" /> </div> <div> @if (Request["TwitterUser"]. században 2.Now</p> </body> </html> Az oldal megegyezik a hagyományos HTML jelölésrendszerrel.Search("microsoft") Honlapépítés a XXI. egy kivétellel: a @ karakter jelöli az ASP. mint korábban olvashattuk. Ehhez használhatunk helpert. és indítsuk el a böngészőben! Láthatjuk a pontos dátumot és időt. egyszerűbbé teszi a gyakori feladatokat – ebben az esetben a Twitter bejegyzések begyűjtését és helyes megjelenítését. hogy bonyolultabb kódot szeretnénk beszúrni.NET weboldalakba 60 . ez csak az alapértelmezett. Ez az egyszerű kódsor elvégezte az összes munkát: kiderítette a pontos időt. fejezet – Bevezetés a WebMatrix Betába és az ASP.NET programkódokat.IsEmpty()) { @Twitter. Mentsük el az oldalt.cshtml néven! 2.

NET weboldalakba 61 . és kattintsunk a Submit gombra! Megjelennek a felhasználó bejegyzései. A következő <div> páros között találunk néhány sor kódot. Honlapépítés a XXI. Írjunk be egy Twitter felhasználónevet. A többi esetben a megadott felhasználónévhez tartozó bejegyzések láthatók. Ebben az esetben az oldal a „microsoft” keresésre adott bejegyzéseket fogja listázni. fejezet – Bevezetés a WebMatrix Betába és az ASP. 4. (Az ASP. században 2.} else { @Twitter. (Ha nem létező felhasználónevet írunk be.Profile(Request["TwitterUser"]) } </div> </form> </body> </html> Ez a HTML kód olyan oldalt ír le.IsEmpty feltétel érvényesülni fog. hogy hogyan használhatjuk a WebMatrixot. ahol egy beviteli mezőt találunk a felhasználó nevének beírásához. és egy Submit gombot a küldéshez.NET weboldalaknál a @ karakterrel jelöljük a programkódokat). Ez az első <div> címkepáros között található.NET alapú dinamikus weboldalakat a Razor szintaxis használatával. a Request["TwitterUser"]. de üres lesz. Amikor először jelenik meg a weboldal. és hogyan készíthetünk ASP. 3.) Ez a példa egy kis betekintést adott abba. Futtassuk az oldalt a böngészőnkben! A Twitterolvasó a „microsoft” kifejezést tartalmazó bejegyzéseket listázza. a Twitterolvasó megjelenik. vagy a felhasználó üresen hagyja a szövegdobozt.

NET weboldalakat. Az Intellisense segítségünkre van HTML. hogy kihasználhassuk az Intellisense és a debugger nyújtotta lehetőségeket. a WebMatrixban szerkesztett webhelyeket megnyithatjuk a Visual Studióban.) A debugger segítségével megállíthatunk egy programot futás közben. vagy az ingyenes Visual Web Developer Express editiont.NET Razor oldalak programozása Visual Studióban Az ASP. hogy lássuk annak működését. JavaScript. hogy az egyes változók milyen értékeket vettek fel. Ha például egy HTML elementet írunk be. annak teljes verzióját. hogyan használhatunk programkódot különféle weboldalakkal kapcsolatos feladatok elvégzéséhez. C# és Visual Basic kód írásakor (Ezeken a nyelveken írjuk az ASP. Az IntelliSense a szerkesztőben működve jelenít meg a tartalomhoz kapcsolódó lehetőségeket. láthatjuk annak felépítését a Visual Studio ablak Solution Explorer paneljában. fejezet – Bevezetés a WebMatrix Betába és az ASP. A következő illusztrációban a Visual Web Developer 2010 Expresst láthatjuk. században 2. és azt is megmutatja. Kattintsunk a szalagon a Visual Studio Launch gombra! Miután a webhely megnyílik a Visual Studióban. milyen értékekek adhatók meg az egyes elementekhez.NET weboldalakba 62 . de használhatjuk a Visual Studio 2010-et is. Nyissuk meg az ebben a fejezetben készített webhelyünket. ASP. és soronként futtathatjuk a programot. két programozói eszköz teheti hatékonyabbá munkánkat – az IntelliSense és a debugger. 1. benne a létrehozott webhelyünkkel. Ha a számítógépre fel van telepítve a Visual Studio. Ellenőrizhetjük. és válasszuk a Files felületet! 2. Honlapépítés a XXI. az IntelliSense felajánlja az elementhez kapcsolódó attribútumokat. Ha a Visual Studiot vagy a Visual Web Developert használjuk.A következő fejezet részletesebben foglalkozik a programkóddal.NET Razor oldalakat programozhatjuk a WebMatrix segítségével. Az azt következő fejezetekben pedig megtudhatjuk.

cshtml kiterjesztéssel mentsük az oldalakat (Visual Basic esetén . ASP. Ha nem szeretnénk használni a WebMatrixot.NET Weboldalak programozása Visual Studioban). elindíthatjuk a webszervert a parancssorból is. A Windowsban nyissuk meg a parancssort rendszergazdai jogosultságokkal.) A path értékét úgy adjuk meg. században 2. hogy a tesztelni kívánt . beleértve a Notepadet.A Visual Studióban szerkesztett ASP.cshtml fájlokat tartalmazó mappára mutasson! Honlapépítés a XXI.NET weboldalakba 63 . amikor .NET oldalak létrehozása és tesztelése saját szövegszerkesztővel Nem muszáj a WebMatrix Editort használnunk ASP.exe /port:35896 /path:C:\BasicWebSite Tetszőleges portot választhatunk. és hozzárendelhetünk egy adott portszámot. Az egyetlen. amire oda kell figyelnünk.vbhtml kiterjesztéssel).cshtml fájlokat szeretnénk megtekinteni a böngészőben. fejezet – Bevezetés a WebMatrix Betába és az ASP. melyet más program már használ. Egy oldal létrehozásához bármilyen szövegszerkesztőt használhatunk. A . hogy . hogyha elindítunk egy webszervert (IIS Express) a WebMatrixban található Run gomb segítségével.cshtml oldalak tesztelésének legegyszerűbb módja az. Ezután be kell írnunk a portszámot a címsorba. a webhelyünk elérési útjának megfelelően! iisexpress. csupán arra kell figyelnünk. (Az 1024 fölötti portszámok általában szabadok. hogy ne olyan legyen. és lépjünk a következő mappába: C:\Program Files\IIS Express 64-bites rendszer esetén a következő mappát nyissuk meg: C:\Program Files (x86)\IIS Express Írjuk be a következő parancsot.NET Razor oldalakhoz használható IntelliSenseről és debuggerről részletesebben olvashatunk a függelékben (ASP.NET weboldalak létrehozásához és teszteléséhez.

fejezet – Bevezetés a WebMatrix Betába és az ASP. ha a böngésző címsorába beírjuk: http://localhost:35896/default.exe /? Honlapépítés a XXI.cshtml Az IIS Express parancssori funkcióinak megismeréséhez írjuk be a parancssorba: iisexpress.cshtml fájljainkat.A parancs lefuttatása után megnyithatjuk és böngészhetjük . században 2.NET weboldalakba 64 .

Részletesebb információt a függelék Visual Basic progamozási nyelv és szintaxisa része tartalmaz. fejezet – Bevezetés az ASP. Azonban a Razor syntax a Visual Basic nyelvet is támogatja. amelyekre szükségünk lesz a továbbiakban.Beágyazott kifejezések --> <p>The value of your account is: @total </p> <p>The value of myMessage is: @myMessage</p> <!-. amelyet ebben a könyvben végig használunk. 1. Mi az ASP.NET weboldalak programozásával és a Razor szintaxissal.Now.DayOfWeek.NET szerver kódot írni Razor szintaxissal. Ezen programozási technikák többségéről további részleteket találhatunk a fejezetben tovább haladva. var weekDay = DateTime. Az ASP.vagy többsoros parancsblokkok kezdetét jelezzük. így a könyvben leírtakat Visual Basicben is használhatunk.Egysoros parancsblokkok --> @{ var total = 7.NET webszerkesztésbe Razor szintaxissal Ebben a fejezetben megismerkedhetünk az ASP.Többsoros parancsblokkok --> @{ var greeting = "Welcome to our site!". var greetingMessage = greeting + " Today is: " + weekDay.NET webszerkesztésbe Razor szintaxissal 65 . } @{ var myMessage = "Hello World". században 3.3. Az alapvető programozási fogalmak.NET a Microsoft által kifejlesztett technológia webszervereken futó dinamikus weboldalakhoz. ahogy elkezdhessünk ASP. A @ karakter jelöli a kódrészleteket A @ jel segítségével beágyazott kifejezéseket és egy. A fejezet tartalma:    8 tipp az induláshoz. } <!-. fejezet – Bevezetés az ASP. <!-.NET szerverkód és a Razor szintaxis lényege? 8 fő programozási tipp Ebben a részben összefoglaltuk a legfontosabb tudnivalókat ahhoz. Megjegyzés: A Razor syntax a C# programozási nyelvre épül. } <p>The greeting is: @greetingMessage</p> Az eredmény így jelenik meg a böngészőben: Honlapépítés a XXI.

Többsoros parancsblokk. lásd: Szöveg. században 3. sőt.n.". 2. Ha HTML kódot szeretnénk megjeleníteni (pl <p></p> a bekezdésekhez vagy <em></em>. var weatherMessage = "Hello.Egysoros parancsblokk. Markup és Kód egyesítése a Kódblokkban. it is " + outsideTemp + " degrees. így azokat a böngésző kirajzolja a képernyőre. } <p>Today's weather: @weatherMessage</p> Az eredmény így jelenik meg a böngészőben: 3. Az utasításokat pontosvesszővel zárjuk le Honlapépítés a XXI. Részletesebb információt a HTML kódolásról a 5. és nem kódnak értelmezi. hogy kiemeljünk egy szöveget). HTML kódolás nélkül a kódunk kimenete bizonyos esetekben nem jelenne meg jól. --> @{ var outsideTemp = 79. akár biztonsági rés is keletkezhetne a weboldalunkon. } <p>The numeric value of the current month: @theMonth</p> <!-. A kódblokkokat kapcsos zárójelek közé zárjuk Egy kódblokk egy vagy több utasítást tartalmaz. --> @{ var theMonth = DateTime.Now. fejezet – Bevezetés az ASP. HTML kódolja a kimenetet: A HTML-ben speciális jelentést hordozó karaktereket (mint például a <.HTML kódolás Ahogy az előző példákban láthattuk. fejezetben (Munka az űrlapokkal) olvashatunk.Month.> és az &) lecseréli a HTML szabványban rögzített helyettesítő karaktersorozatokra.NET ú. és ezeket kapcsos zárójelek közé írjuk <!-. a @ jel használatakor az ASP.NET webszerkesztésbe Razor szintaxissal 66 .

--> @{ var theMonth = DateTime. itt nincsen pontosvessző. hogy megkülönböztessük a szöveget a programkódtól.String tárolása --> @{ var welcomeMessage = "Welcome. hogy végződjön.NET webszerkesztésbe Razor szintaxissal 67 . Honlapépítés a XXI. A szöveget tartalmazó stringeket kettős idézőjelek közé írjuk A string egy karaktersorozat. } <p>@welcomeMessage</p> <!-. --> <p>Today's weather: @weatherMessage</p> 4. században 3.Többsoros parancsblokk.Year. <!-. <!-. it is " + outsideTemp + " degrees. amit szövegként kezelünk.Egy változó megjelnítése --> <p>Welcome to our new members who joined in @year!</p> Az eredmény így jelenik meg a böngészőben: 5. } <!-. Ahhoz.Dátum tárolása --> @{ var year = DateTime. dátumok stb. } A C# kódban így elhelyezett szöveg (string literal) esetén a visszaperjelnek (\) és dupla idézőjelnek speciális jelentése van. idézőjelek közé kell tegyük: @{ var myString = "This is a string literal". } <!-.Now. A @ jel segítségével a változó értékét egyszerűen beágyazhatjuk a HTML kódba. Új változót a var kulcsszóval hozhatunk létre a parancsblokkokban.Month. } <!-. A beágyazott kifejezések nem végződnek pontosvesszővel. new members!".Egysoros parancsblokk.Now.". akkor a verbatim string literal jelölést kell használunk: az első idézőjel elé egy @ karaktert kell elhelyezni. fejezet – Bevezetés az ASP. Ezért ha visszapert tartalmazó szöveget szeretnénk elhelyezni a C# kódban. Ezek lehetnek stringek (szövegek). számok. var weatherMessage = "Hello. Értékek tárolására változókat használunk Értékeket a változókban tárolhatunk. --> @{ var outsideTemp = 79.Blokkon belül minden utasítás pontosvesszőre kell.Sorközi kifejezés.

Például egy szövegdoboznak van többek közt egy Text (szöveg) tulajdonsága. egy ügyfél objektumnak pedig FirstName (keresztnév) tulajdonsága. } <p>The path is: @myFilePath</p> Ha a szöveg maga idézőjelet tartalmaz. 7. kép. var LastName = "Jones". <!-. webes lekérés.microsoft. oldal.com/en-us/library/aa691090(VS. e-mail. azt meg kell különbözetnünk a string literalt lezáró idézőjeltől. Erre jó példa a fájl objektum Save (mentés) metódusa. A kód érzékeny a kisbetűkre és nagybetűkre. fájl. a lekért oldal Honlapépítés a XXI. fejezet – Bevezetés az ASP. a LastName nem felismerhető. egy lekérésnek van egy Url tulajdonsága. míg a C# programkódon belül a verbatim string literal kezdetét jelöli. esetleg azt. szövegdoboz. Sokszor fogjuk használni a Request (lékérés) objektumot. A következő kódsorok két különböző változót hoznak létre: lastName és LastName. A kód nagy része objektumokkal foglalkozik Objektumokkal reprezentáljuk azokat a dolgokat.aspx 6. @{ var lastName = "Smith". true. } Ha egy változót var lastName = "Smith" utasítással deklaráljuk később a @LastName kifejezéssel próbálunk hivatkozni rá. További információkat a függelékben (A Visual Basic programozási nyelv és szintaxisa) olvashatunk.NET webszerkesztésbe Razor szintaxissal 68 . } <p>@myQuote</p> Az eredmény így jelenik meg a böngészőben: Megjegyzés: A @ karakternek több jelentése van: az ASP.) Egy objektum jellemzőit a tulajdonságain keresztül tudhatjuk meg.<!-. today is Monday.Visszaperjel beágyazása stringbe --> @{ var myFilePath = @"C:\MyFolder\".""". if) és a változó nevek érzékenyek a kis. Megjegyzés: Visual Basic nyelv nem érzékeny a kis-nagybetűkre. az datbázis egy sora stb. Az objektumok továbbá rendelkeznek metódusokkal is. vagy egy e-mail objektum Send (küldés) metódusa. amiket a programunkkal manipulálni szeretnénk (pl.és nagybetűkre. Verbatim string literal jelölés esetén két egymást követő idézőjel felel meg egy „szó szerinti” idézőjelnek. egy kép objektum Rotate (elforgatás) metódusa. Erről bővebben az alábbi oldalon tájékozódhatunk: http://msdn. melyekre az objektum képes. egy e-mailnek van From (feladó) tulajdonsága. században 3. A C#-ben a kulcsszavak (var.71).Dupla idézőjel beszúrása egy stringbe--> @{ var myQuote = @"The person said: ""Hello. ami egy elküldött űrlap mezőiben található értékeket adja vissza. ezek a műveletek. akkor hibát kapunk. hogy milyen típusú böngésző indította a lekérést.NET oldalakban a programkód kezdetét jelöljük vele.

NET webszerkesztésbe Razor szintaxissal 69 . Ennek a legáltalánosabb módja az if parancs (és az opcionális else parancs) @{ var result = "". és hogyan hívjuk meg a MapPath nevű metódusát. vagy éppen azonosítja a felhasználót. } else { result = "This was the first request for this page. A kódban elágazásokat helyezhezünk el A dinamikus weboldalak egyik kulcs tulajdonsága.RequestType</td> </tr> </table> Az eredmény így jelenik meg a böngészőben: 8. és még sok minden másra is képes.FilePath</td> <td>@Request. mi történjen különböző helyzetekben. hogy képesek vagyunk eldönteni. hogyan érjük el a Request objektum tulajdonságait. Ezzel megtudhatjuk egy lap szerveroldali teljes elérési útját.MapPath(Request. <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. fejezet – Bevezetés az ASP.". if(IsPost) { result = "This page was posted using the Submit button.URL-jét.FilePath)</td> <td>@Request. A következő példa bemutatja.".Url</td> <td>@Request. században 3. } } <!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> Honlapépítés a XXI.

században 3. a lekérdezés a GET metódust használja. Az ASP.AsInt(). Honlapépítés a XXI.AsInt() + num2. hogy egy oldalt éppen GET vagy POST metódussal kérnek le. amikor a felhasználó először lekér egy oldalt. A web programozásban nem árt tudnunk.NET weboldalaknál az IsPost tulajdonságból tudjuk kiolvasni. GET esetén elsősorban tartalmat kér le (pl. 1. ismételhetünk kód blokkokat. felülírva bármit. var num2 = Request["text2"]. Másoljuk bele a következő kódot és jelöléseket. egy weboldalt.cshtml fájlt! 2. Egyszerű példakódok A következő példákból megismerhetjük az alapszintű programozási technikákat.NET webszerkesztésbe Razor szintaxissal 70 . if(IsPost) { // Retrieve the numbers that the user entered. míg POST esetén tartalmat küld a szervernek (pl. Hozzunk létre egy AddNumbers. Ha a felhasználó kitölt egy űrlapot és ráklikkel a Küldés gombra. hogy eldönthessük. majd az oldal összeadja azokat. fejezet – Bevezetés az ASP. Általában. akkor a böngésző általában egy POST kérést küld a szervernek. Ebben a könyvben sok olyan példát találunk. és megjeleníti az eredményt.</body> </html> Az if(IsPost) utasítás az if(IsPost == true) rövidítése. akkor az IsPost tulajdonság visszatérési értéke true (igaz) lesz. Ha a lekérés POST típusú. egy kép fájlt). var totalMessage = "". hogyan dolgozzuk fel az oldalt. Az eredmény egy böngészőben megjelenítve (a Submit gomb megnyomása után): HTTP GET és POST metódusok és az IsPost tulajdonság A weblapok lekéréséhez használt HTTP protokoll szerint a böngésző alapvetően kétféleképpen fordulhat a szerverhez. hogyan dolgozzunk fel egy weboldalt az IsPost tulajdonságtól függően. total = num1. Ebben a példában egy olyan weboldalt készítünk. ami bemutatja. hogy a lekérés GET vagy POST típusú. var num1 = Request["text1"]. Ebben az esetben fogjuk kiolvasni az űrlapmezők tartalmát a lekérésből. amit az oldal tartalmazott! @{ var total = 0. egy kitöltött űrlap tartalmát). amiben a felhasználó megad két számot. // Convert the entered strings into integers numbers and add. Az if utasítással sokféle módon tesztelhetünk különféle eseteket. Ezekről a későbbiekben többet megtudhatunk.

totalMessage = "Total = " + total. A fenti blokkban az összes sor pontosvesszőre végződik. A totalMessage változóban eltároladnó szöveget idézőjelek közé tesszük Mivel a kód érzékeny a kis. illetve egy stringet tárolnak. fejezet – Bevezetés az ASP. A <form> címke tartalmazza a method="post" attríbútumot. így végezhetünk vele matematikai műveleteket.AsInt() + num2. margin: 50px.  Honlapépítés a XXI. width: 250px. num2.</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> Figyeljünk oda a következőkre:        A @ karakter kezdi az első kódblokkot az oldalon. font-family: Verdana. és totalMessage változók számokat.és nagybetűkre.NET webszerkesztésbe Razor szintaxissal 71 . az oldal alján található totalMessage változó nevét pontosan ugyanúgy írjuk. hogyan dolgozzunk objektumokkal és metódusokkal. és megtalálható az oldal alján lévő totalMessage változó előtt is. Arial. } } <!DOCTYPE html> <html lang="en"> <head> <title>Add Numbers</title> <meta charset="utf-8" /> <style type="text/css"> body {background-color: beige. A szerver oldalon ezért az if(IsPost) teszt igaz értéket ad. } form {padding: 10px.AsInt() kifejezés megmutatja. amely megjeleníti a számok összeadásából adódó eredményt. hogy amikor a felhasználó az Add gombra kattint. mint a lap tetején! A num1. Ez utasítja a böngészőt. az oldalt HTTP POST módszerrel küldje el a szervernek. és a megadott kód lefut. A total. Az AsInt metódus egész számmá (integer) alakítja a felhasználó által bevitt karaktersorozatot (string). num1. Az oldal tetején lévő blokkot kapcsos zárójelek veszik körül.} </style> </head> <body> <p>Enter two whole numbers and then click <strong>Add</strong>. században 3. border-style: solid.

Server Code és ASP. A Razor szintaxis lehetővé teszi. a szükséges szerverkód elég egyszerű. hogy a szerverkód dinamikusan tud kliens tartalmat készíteni – HTML kódot vagy más tartalmat tud generálni. JavaScript). A kliensoldali tartalom azokat a dolgokat tartalmazza. fejezetben is láttuk.) Vigyünk be két egész számot. és egyszerű szövegek. ha ezelőtt még sosem programoztunk. Azáltal hogy szerveren is fut. mellyel szerver oldali kódot ágyazhatunk be egy weboldalba. Mint láthatjuk. amiket már megszokhattunk a weboldalaknál: HTML tagek. csak egy gyors áttekintés a leginkább használt programozási fogalmakról. a kód sokkal összetettebb feladatokat tud végrehajtani. akkor a szerver először végigfuttatja a kódot. stílus információk (pl. Ez a fejezet áttekintést ad az ASP. hogy szerverkódot szúrjunk a kliensoldali tartalom közé. mielőtt futtatnánk.NET weboldalaknak speciális kiterjesztésük van (. Honlapépítés a XXI. szkriptek (pl. nem kell kétségbe esni. században 3. és nem kell túl sok kódot írnunk a kívánt eredményhez. A Razor szintaxissal működő ASP. Fontos.NET A Razor szintaxis egy egyszerű programozási szintaxis. amit később küld el a böngészőnek a statikus HTML tartalmakkal együtt. A böngésző szemszögéből nézve a szerverkód által generált kliens tartalom nem fog különbözni más kliens tartalmaktól.cshtml vagy . Ha van szerverkód az oldalon. mint a kliensoldali tartalom önmagában. fejezet – Bevezetés az ASP. Ez nem egy részletes elemzés. Egy. A WebMatrixszal. A most megszerzett tudás lefedi azokat a területeket.NET webprogramozásról. és csak ez után küldi el az oldalt a böngészőnek. Mentsük el az oldalt és futtassuk böngészőben! (Győződjünk meg róla. majd kattintsunk az Add gombra! Programozási alapfogalmak Amint azt az 2. futtatja a Razor szintaxissal megjelölt kódot. A szerver ezeket a kiterjesztéseket felismeri.vbhtml).NET weboldalakkal és a Razor szintaxissal gyorsan tudunk kifinomult dinamikus weboldalakat készíteni. CCS). ASP. például a szerveren lévő adatbázishoz hozzáfér. és csak azután küldi el az oldalt a böngészőbe. ez a kijelölt oldal a Files munkaterületen.3.NET webszerkesztésbe Razor szintaxissal 72 . Először ismerjük meg a technikai hátteret! A Razor Syntax. a Razor szintaxisban megírt weboldal kétféle tartalomból áll: a kliens oldalnak szánt tartalomból és a szerver oldalon futtatandó kódból. amire szükségünk lesz a könyv olvasása során.

egy másikban pedig „Jones”.NET . században 3. amit a Microsoft fejlesztett ki. hogy szinte bármilyen számítógépes alkalmazást fejleszthessünk vele.NET kód objektumokkal dolgozik.NET-et. A világ számos fejlesztője használja óriási.NET webszerkesztésbe Razor szintaxissal 73 . A . Az osztály az objektum definíciója vagy sablonja. és így tovább. mint az ASP. amely meghatározza az ügyfelekkel kapcsolatos tulajdonságokat és metódusokat. bármely különálló weblap a webhelyen egy Page (Oldal) objektum. (Ha egy webhelyen az . hiszen minden ügyfélobjektum egyedi.NET Framework egy nagy.NET-et? A Razor szintaxis egy.Mihez hasonlíthatjuk az ASP. de az egyszerűbb szintaxisnak köszönhetően kezdők számára könnyebben elsajátítható a használata. rendelkezésre állnak a nagy keretrendszerek megoldásai és szolgáltatásai. átfogó programozó keretrendszer. hogy az oldal ASP.NET-tel.NET-tel és a . Ehhez hasonlóan. tudjuk. de mindegyik az osztályában meghatározott „kaptafára készült”. Honlapépítés a XXI. Egy-egy ügyfél adatait leíró objektum az Ügyfél osztály egy-egy példánya. a Microsoft által kidolgozott technikán. a gyakorlottabb felhasználók munkája pedig felgyorsul. Minden példánynak megvan a „maga jelleme”.NET Framework. Az egyik felhasználó objektumnak a LastName (vezetéknév) tulajdonsága lehet „Smith”. A lapon található gomb egy Button (Gomb) objektum ami a Button osztály egyik példánya. de a tulajdonságok értékei példányról példányra különböznek. Például egy alkalmazásban lehet olyan Customer (ügyfél) osztály.NET Frameworkkel.aspx kiterjesztést látjuk.NET-en alapul.NET Framework része. Minden példány ugyanazokat a tulajdonságokat és metódusokat tartalmazza. fejezet – Bevezetés az ASP. így amikor a webhelyünk összetettebbé válik.NET a .NET Framework Osztályok és példányok Az ASP. Az ASP. az ASP. Razor szintaxis ASP. aminek alapja a Microsoft. amelyet web alkalmazások fejlesztéséhez terveztek. Az objektumokkal kapcsolatos alapfogalom az osztályok (class).NET segítségével készült) A Razor szintaxissal olyan hatékonyan dolgozhatunk. nagy forgalmú webhelyek készítéséhez az ASP. ami a Page osztály egyik példánya. Ez az egyszerű szintaxis egy családba tartozik az ASP.

Nyelv és szintaxis Az előző fejezetben egy egyszerű példán keresztül láthattuk.NET-nek meg kell tudnia különböztetni a szöveget a kódtól. @DateTime. melyet nem kódként szeretnénk felhasználni. Ha a kódblokkunk tartalmaz szöveget. de most használja a <text> címkét. és a <text> címkét egyaránt szövegek felismeréséhez használja.Now and this page is a postback!</p> } else { // A szöveg címkepárok között van. században 3. ezek sosem jelennek meg a böngészőben. vagy esetleg JavaScript-ben. további HTML elemeket. @: The time is: <br /> @DateTime. ezeket követi a szerverkód. <p>Hello. A @: segítségével egy sor szöveget vagy párosítatlan HTML címkéket írathatunk ki. <text> The time is: <br /> @DateTime. mint például <p></p> vagy <em></em>: @if(IsPost) { // Ebben a sorban az egész szöveg páros <p> címkék között van. akkor lekódol mindent. A könyv ezen részében megtanuljuk. egyszerű szöveg. akkor az ASP. Ha az ASP. páros címkék. akkor valószínűleg csak azt kell megszoknunk. fejezet – Bevezetés az ASP.Now is the <em>current</em> time. hogyan írjunk Razor szintaxist használó ASP. Alap szintaxis Szöveg.) akkor az itt olvasható anyag nagyrészt ismerős lehet. Ezek a módszerek akkor hasznosak.  Tegyük a szöveget HTML elemek közé. Az ASP. hogyan kell ASP.NET weboldalt készíteni. ha már programoztunk C-ben. és elküldi a böngészőnek (és persze végrehajtja a szerverkód utasításokat). és hogyan adhatunk hozzá szerver oldali kódot a HTML kódhoz. majd ismét szöveg. today is: <br /> </p> @DateTime. minden sort a @: segítségével folytathatunk vagy a <text> elem segítségével csatolhatunk. @if(IsPost) { // Ismételje meg az előző példát.Now @:is the <em>current</em> time. ha egy HTML elemet nem végrehajtani.  Használjuk a @: operátort vagy a <text> elemet.NET a @: operátort. <p>Hello <em>stranger</em>. Ezt különböző módokon tehetjük lehetővé. Honlapépítés a XXI. A <text> elem segítségével több sort is kiírathatunk.cshtml fájlokhoz hogyan adhatunk WebMatrix kódot. Ha már van némi tapasztalatunk a programozás terén (főként.NET szerver kódot – és hogy mik a programnyelv szabályai.NET webszerkesztésbe Razor szintaxissal 74 . Ha így van. C++ban. HTML és programkód keveréke a kódblokkban A szerver oldali kódblokkokban gyakran szöveget vagy HTML kódot szeretnénk generálni a böngésző számára. Visual Basicben.Now // Szerverkód.NET érzékeli a nyitó HTML címkét. hogy a . hanem megjeleníteni szeretnénk. és szerverkód kifejezéseket. the time is @DateTime.Now @DateTime. vagy párosítatlan HTML címkéket szeretnénk kiírni.Now } Egy HTML elem tartalmazhat szöveget. amit az elem tartalmaz. } Ha több sort. C#-ban. @if(IsPost) { // Sima szöveget párosítatlan HTML címke és szerverkód követ.

hogy egy hosszú szöveget több sorba tördeljünk. @: operátorral vagy <text> taggel). </p></text> } A fenti első példa megegyezik az előzővel. Ha egy kódrészletet átmenetileg ki akaránk törölni. @{ var test = "This is a long string".NET nem végez HTML kódolást (ahogyan korábban láthattuk). csak használni kellene a @: operátort minden sor előtt. @{ var longString = @"This is a long string". Használhatjuk a @ karaktert. Ezek tartalmazhatnak sortörést. században 3. Szóközök Az extra szóközök a programkódban (az idézőjelek közötti string literalokon kívül) nem változtatják annak lefutását.</text> } @{ var minTemp = 75. } Az utasításban a sorköznek nincs hatása a utasításra.Now. A következő példa ezt a hibát mutatja be. fejezet – Bevezetés az ASP. a jó olvashatóság érdekében tördelhetjük a sorokat A következő utasítások mind egyenértékűek a fentivel: @{ var theName = "Smith". akkor az ASP. } @{ var personName = "Smith" . Használhatjuk a plusz (+) jelet. átalakíthatjuk megjegyzéssé.NET webszerkesztésbe Razor szintaxissal 75 . de később bármikor újra felhasználhatjuk. and it's a <em>great</em> day! <br /><p>You can go swimming if it's at least @minTemp degrees. } // Nem működik! Ha esetleg mégis szükség lenne arra. erről a fejezet egy későbbi részében olvashatunk. párosítatlan HTML címkéket (<br />).ToString("MMMM"). Megjegyzés: Ha a szöveget az itt leírtak szerint íratunk ki (kód blokkba helyezett HTML taggel. hogy a string szövegeket nem tördelhetjük több sorba. hogy verbatim string literalt hozzunk létre. Honlapépítés a XXI. programkódot és párosított HTML címkéket. <text>It is the month of @DateTime. A második példában használunk szöveget. } Megjegyzések a HTML és programkódban A kódjainkban elhelyezhetünk megjegyzéseket magunknak vagy más fejlesztőknek. @{ var lastName = "Smith". Így a hatása nem érvényesül. csak itt <text> címkét használunk. Természetesen a sorokat külön-külön írva is működne a kód. } Arra vigyázzunk. ahogy azt már korábban láttuk a fejezetben. amiket <text> és </text> közé zárunk. kétféleképpen tehetjük meg.

hogy betűvel kezdődjön. A Razor kód a szerveroldalon fut. --> A HTML megjegyzéseket <!-.) HTML kódhoz készíthetünk HTML megjegyzést is: <!-. 3 vagy 79). ami megadja. } Itt van ugyanaz a kódblokk úgy.és --> közé írjuk. ezek lehetnek egysorosak vagy többsorosak: @* @* Többsoros megjegyzés. a többsoros megjegyzéseket pedig /* és */ közé írjuk. de HTML kódhoz is.</p> --> A Razor megjegyzésekkel ellentétben a HTML megjegyzéseket megkapja a böngésző (de nem jeleníti meg). az integer változókban egész számokat tárolhatunk (pl. „Helló világ”). amit tartalmaz: <!-.NET Razor megjegyzést @* és *@ közé írunk. *@ } Egy kódblokk belsejében. csak arra kell figyelni. így a felhasználók nem láthatják azokat a böngészőjükben.Ez egy megjegyzés. *@ Egysoros megjegyzés. hogy a kód sorát megjegyzésként jelöltük meg. (Ahogy a Razor megjegyzéseket.A HTML és a Razor kódban különbözőképpen jelöljük a megjegyzést. */ A C#-ban // karakter kezdi az egysoros megjegyzéseket. és a date változókba dátum értékeket tárolhatunk különböző Honlapépítés a XXI. A string változókba szöveget tárolhatunk (pl. ezért ez nem fog futni: @{ @* Ez egy megjegyzés. Egy változó neve akármi lehet. többsoros megjegyzés megjegyzés szintaxisát használja. = 17. században 3.<p>Ez egy paragrafus. ASP. *@ @* var theVar = 17. így a felhasználók el tudják olvasni őket az oldal forrását megtekintve. a Razor megjegyzés szintaxisa mellett használhatjuk más programozó nyelv megjegyzés szintaxisát. nem tartalmazhat szóközt és speciális jelentésű karaktereket. Változók A változó egy adatok/értékek tárolására alkalmas objektum. Változók és adattípusok A változóknak lehet egy megadott adattípusuk. A HTML megjegyzéseket nem csak szöveghez használhatjuk. *@ Itt egy megjegyzés egy kódblokkban: @{ @* Ez egy megjegyzés. Ez a HTML megjegyzés az összes tartalmat és címkét eltűnteti. például a C#-ét: @{ // Ez egy var myVar /* Ez egy mely a C# } megjegyzés. ezért a megjegyzések még szerver oldalon eltávolításra kerülnek. hogy milyen adatokat tárolhatunk bennük. Bármennyi sor hosszúságú lehet. úgy a C# megjegyzések sem jutnak el a böngészőig.NET webszerkesztésbe Razor szintaxissal 76 . fejezet – Bevezetés az ASP. *@ var theVar = 17.

NET webszerkesztésbe Razor szintaxissal 77 . DateTime tomorrow = DateTime. <p>@greeting. friends!</p> // Változók használata beágyazott kifejezésben. A legtöbb esetben az ASP. hogy változót hozzunk létre.Request.Url. var today = DateTime.) Ahhoz. } A következő példában olyan beágyazott kifejezéseket láthatunk. Azonban egy változónak nem kötelező típust megadni. a könyvben található példákból kiderül. <p>The predicted annual total is: @( monthlyTotal * 12)</p> // Az oldal URL-jének megjelenítése változóval. fejezet – Bevezetés az ASP. var myPath = this.Today. században 3. // Dátumot adunk meg változónak. amik felhasználják a weboldal változóit. hogy mikor. használjuk a var kulcsszót (ha nem akarjuk meghatározni a típusát) vagy használjuk a típus nevét: @{ // Szöveget adunk meg változónak. Természetesen még sokféle adattípust használhatunk. int count = 5.AddDays(1). // A jelenlegi oldal Url-jét adjuk meg változónak. (Esetenként meg kell adnunk egy típust. hogy milyen adatot tárolunk benne. <p>The URL to this page is: @myPath</p> } Az eredmény így jelenik meg a böngészőben: Adattípusok konvertálása és tesztelése Honlapépítés a XXI. var monthlyTotal = theCount + 5.Now. var theCount = 3. // Számot adunk meg változónak. // A változókat explicit változókkal deklaráljuk.NET kitalálja a változóról. 4/12/2010 vagy Március 2009). // Kifejezést adunk meg változónak.formátumokban (pl. var greeting = "Welcome!". @{ // Változók értékeinek beágyazása HTML markupba. string name = "Joe".

átkonvertálnánk őket. amiben string-ből számot csinálunk.Annak ellenére. században 3. Ilyenkor besegítünk egy explicit átkonvertálással. ha a példánkban össze akarnánk adni az értékeinket anélkül. total = num1. Metódus AsInt(). "1. néha mégsem sikerül. IsInt() Leírás Egy string-et ami egy egész számnak felel meg átkonvertál integerré.AsInt(). ha tudjuk.432895". var myStringFloat = "41. IsBool() Átkonvertál egy igaz vagy hamis string-et boolean típussá. hogy string-et konvertálunk át más típussá. majd azok összeadása. var myDecNum = myStringDec. IsDecimal() var myStringDec = "10317. Ebből adódik.AsFloat(). Átkonvertál egy string-et ami dátum és idő értékű AsFloat().NET-ben a decimális szám pontosabb. ha a felhasználótól számot kérünk. és ők azt is írtak be. például integerre. A következő példa egy tipikus esetet mutat be. AsDateTime(). Az értékek integerré konvertálásához az AsInt metódust használjuk. var myFloatNum = myStringFloat. az elküldött adat string lesz. if(myStringNum. Ha a konvertálás sikeres. Mivel az ASP. hogy a számmá kell konvertálnunk. Cannot implicitly convert type ’string’ to ’int’. Példa var myIntNumber = 0.3") float-ot (lebegő pontos) konvertál.AsDateTime().AsBool(). A legáltalánosabb eset. Honlapépítés a XXI. IsDateTime() var myDateString = "12/27/2010".3) egy decimális számmá. } } A felhasználó minden adatot string-ként ad meg. @{ var total = 0. var newDate = myDateString. össze tudjuk adni a két számot. Egy string-ből ami egy tizedes törtet tartalmaz (pl. fejezet – Bevezetés az ASP. vagy date-re. Még akkor is.NET általában automatikusan meg tudja határozni az adattípusokat. AsBool(). // A stringek átalakítása számmá.NET nem tud két string-et összeadni. Még akkor is. if(IsPost) { // A beírt számok beolvasása. var num1 = Request["text1"]. hogy. hogy milyen típusú adatokkal dolgozunk. (Az ASP. mint a float.425". var myVar = myStringBool. ha nincs szükség átkonvertálásra. var myStringNum = "539".NET webszerkesztésbe Razor szintaxissal 78 . } var myStringBool = "True".AsInt() + num2. var num2 = Request["text2"]. a következő hibaüzenetet kapnánk. hogy az ASP.AsDecimal(). Átkonvertál egy tizedes tört string-et (1. A következő táblázat tartalmazza a változók gyakori konvertálásait a tesztelési metódusait.IsInt()==true){ myIntNumber = myStringNum.AsInt(). IsFloat() AsDecimal(). néha hasznos lehet.

if (theNum != 15) { != vizsgálata. // Processing.(vagyis tagadva igaz).ToString(). if (myNum == 15) { // Do something.NET weboldalakat készíteni. Szögletes zárójelek. ! bool taskCompleted = false. [] var income = Request["AnnualIncome"]. if(!taskCompleted) { // Continue processing } == var myNum = 15. században 3. értéke igaz az értékek Példák var myUrl = Request. de csak párat kell ismernünk ahhoz. } var theNum = 13. // myString is set to 1776 string myString = num1.ToString() + num2. Honlapépítés a XXI. A C# nyelv (és az erre épülő Razor szintaxis is) sokféle operátort támogat.FilePa th).NET-nek hogy milyen parancsot hajtson végre egy-egy kifejezésben. (Vigyázat! Az = és az == operátor mást jelent!) Tagadás. ha egyenlők. ToString() DateTime int num1 = 17. Egyenlőség Visszatérési (true). A következő táblázatban megismerhetjük a leggyakoribb operátorokat. fejezet – Bevezetés az ASP. Kifejezéseket csoportosíthatunk velük és paramétereket adhatunk át metódusoknak. elkezdhessünk ASP. Tömbök. listák. Az objektum neve és az elérni kívánt tulajdonság vagy metódus neve közé írjuk. Leírás Pont.Url. int num2 = 76. A kifejezés jobb oldalán található értéket a kifejezés bal oldalán található változónak értékül adjuk. = var age = 17. Bármilyen adatot stringgé konvertál. Operátor . Zárójelek. ami megmondja az ASP. Egynlőtlenség vizsgálata. gyűjtemények elemeit címezhetjük meg.MapPath(Request. () @(3 + 7) @Request. var count = Request["Count"]. Operátorok Az operátor egy olyan kulcsszó vagy karakter. hogy. Az igaz (true) értéket megfordítja hamis-ra (false) és fordítva. Általában gyors módszerként használjuk hamisság vizsgálatára.az ASP.NET típussá.AsInt().NET webszerkesztésbe Razor szintaxissal 79 . Értékadás.

században 3.cshtml datafile. } var currentCount = 12. operátorok.css fájlnak.) A következő példában bemutatjuk a virtuális és fizikai elérési útját az előző példában látható Styles. (A virtuális mappa elérési utakat mindig sima perjellel jelöljük. Ebben a példában egy weboldal fizikai mappastruktúráját láthatjuk. // Adds 1 to count += -= A növelés és csökkentés operátorok. } @(5 + 13) @{ var netWorth = 150000. Honlapépítés a XXI. < > <= >= // Do something. mint ahogy a számítógépünkön C: meghajtó gyökérkönyvtárát fordított perjel (\) jelöli. Nagyobb. A virtuális gyökérkönyvtárat egy perjel (/) jelöli. amikkel feltételeket kötünk össze. Az ASP. theCount += 1. ha az értékek egynlők. Logikai ÉS és VAGY művelet. int totalCount = 0. pont úgy. } @(newTotal / 2) // The displayed result is "abcdef". Kevesebb vagy egyenlő és Nagyobb vagy egyenlő. A jobb oldalon szereplő kifejezés értékét hozzáadjuk (kivonjuk) a bal oldalon szereplő változó érétkéhez.txt \images Logo. // Processing. if(currentCount >= 12) { // Do something. Fájlok és mappák használata a kódban A kódjainkban sűrűn fogunk használni fájl és mappa elérési utakat. } int theCount = 0. } @{ var newTotal = netWorth * 2. && || bool myTaskCompleted = false.NET webszerkesztésbe Razor szintaxissal 80 . ahogy megjelenhet a weblapot fejlesztő számítógépen. mint. használjuk + Összeláncolás.NET az adat típusa szerint felismeri a különbséget eközött és a matematikai operátor között. fejezet – Bevezetés az ASP. } if (2 < 3) { // Do something.jpg \styles Styles. C:\WebSites\MyWebSite default. ami megfelel az oldalunk fizikai mappastruktúrájának. String-eket fűzűnk össze vele. Alapértelmezetten a virtuális és a fizikai mappanevek megegyeznek. if(!myTaskCompleted && totalCount < 12) { // Continue processing. + Matematikai számolásoknál őket.Visszatérési értéke (true).css Egy webszerveren minden weboldalnak van egy virtuális mappa struktúrája. mint. @("abc" + "def") Kevesebb.

A ~ operátor: a virtuális gyökérkönyvtár beolvasása Hogy a kódunkban megadjuk a fájljaink és mappáink virtuális gyökérét.MapPath metódus: A virtuális elérési út fizikaivá konvertálá sa A Server.  Fizikai elérési út: C:\WebSites\MyWebSiteFolder\styles\Styles.css". Az ASP.css".jpg" /> <!—Ez egy hivatkozást készít a CSS fájlra. A metódus úgy működik. anélkül hogy a kódban szereplő elérési utakat megzavarnánk.. fejezet – Bevezetés az ASP. olyan elérési utakká amiket a böngészőnk értelmezni tud. Ezt a metódust olyan feladatok elvégzésére használhatjuk.NET webszerkesztésbe Razor szintaxissal 81 . mint például képfájlok. @{ var myImagesFolder = "/images".MapPath metódus és a Href metódus. más weboldal.MapPath(dataFilePath)</p> A Href metódus: Elérési utak létrehozása az oldal forrásaihoz A WebPage objektum Href metódusa átkonvertálja azokat az elérési utakat. Arra is használhatjuk még a Href metódust.txt".jpg” az src attribútumban.cshtm) teljes elérési utat (pl C:\WebSites\MyWebSiteFolder\default. hogy elérési utakat készítsünk olyan forrásokhoz. @{ var myImagesFolder = "/images". néha virtuális.). Például használhatjuk ezt a metódust arra. var myStyleSheet = "/styles/StyleSheet. } <!-. a Server.MapPath metódus egy virtuális elérési útból(pl /default./images/Logo. és egy <a> elemnek. amiket a szerverkódunkban hozunk létre (tartalmazhat ~ operátort).Megjeleníti a fizikai elérési utat: C:\Websites\MyWebSite\datafile. hogy egy HTML parancsban attribútumokat adjuk egy <img>. amik teljesítéséhez fizikai elérési útra van szükség. mert így szabadon mozgathatjuk a weboldalunkat. mint például egy. Ez azért hasznos. attól függően. var myStyleSheet = "/styles/StyleSheet. @{ var dataFilePath = "/dataFile.txt --> <p>@Server.Ugyanaz.NET-ben sokféle módszer áll lehetőségünkre hogy fájlokat és mappákat használjunk a kódunkban. és CSS fájlok. a webszerverünkön található szövegfájl olvasása vagy írása.<link>. csak itt ~-t haszálunk --> <img src="@Href("/images")/Logo.css Amikor fájlokkal és mappákkal dolgozunk a kódunkban.jpg" /> <!-. században 3. (A böngésző nem tudja értelmezni a ~ operátort mivel az szigorúan ASP.NET operátor.cshtml) konvertál. } A Server. --> <link rel="stylesheet" type="text/css" href="@Href(myStyleSheet)" /> Logikai feltételek és ciklusok Honlapépítés a XXI. hogy milyen objektumokat használunk.css Virtuális elérési út (a virtuális gyökérkönyvtártól /): /styles/Styles.Ez a kód ezt az elérési utat hozza létre ". } <!-. néha fizikai elérési utakat használunk. hogy egy fájl vagy mappa virtuális elérési útját átadjuk neki és visszatérési értékként megadja a teljes utat. Ezek lehetnek: a ~ operátor.(Egy kiszolgáló szerveren általában nem ismerjük weboldalunk teljes elérési útját. használjuk a ~ operátort. --> <img src="@Href(myImagesFolder)/Logo.

ha azonban egyik feltétel sem teljesül. az a lényeg. if(showToday) { @DateTime. ha feltételünk visszatérési értéke hamis lenne. amik bizonyos feltételektől függenek. Az if parancs egy else ágat is tartalmazhat. ugyanis ez felel meg a ’’bármi más’’ feltételnek.Today.</p> } else { <p>Your balance is: $@theBalance</p> } } A következő példában láthatjuk. } else { <text>Sorry!</text> } } Egy else if blokk használatával akár több feltételt is megadhatunk. Feltételek tesztelése Hogy egyszerű feltételeket teszteljünk. században 3. switch(weekday) { case "Monday": Honlapépítés a XXI. ami egy meghatározott alkalommal megismétli önmagát. A valódi tesztelés (feltétel) zárójelben van. Sok feltétel esetén használjuk a switch blokkot: @{ var weekday = "Wednesday". hogy egy else ággal zárjuk le. if(theBalance == 0) { <p>You have a zero balance.Today. vagy akár olyan kódot. fejezet – Bevezetés az ASP.</p> } else if (theBalance > 0 && theBalance <= 5) { <p>Your balance of $@theBalance is very low. Egy If ág mellé végtelenszámú else if ágat használhatunk. akkor az else ág fog lefutni. var greeting = "".ASP. @{ var showToday = false. használjuk az If parancsot. hogy ha az If águnk feltétele nem teljesül. akkor az else if águnk feltételét vizsgáljuk meg. arra az esetre.NET webszerkesztésbe Razor szintaxissal 82 . ennek lehet a visszatérési értéke igaz vagy hamis. if(showToday) { @DateTime. @{ var theBalance = 4.NET kódban írhatunk olyan parancsokat. } } A teszt blokk az if kulcsszóval kezdődik. Ha ez a feltétel teljesül az else if ág fog lefutni. @{ var showToday = true.99. Ennek visszatérési érteke lehet igaz vagy hamis a feltételünktől függően.

default: greeting = "It's some other day. mivel ez a ciklus nagyon hasznos ha előre vagy hátrafele szeretnénk számolni. a számláló automatikusan növekszik. @for(var i = 10. Minden case kulcsszót egy break kulcsszóval zárunk le. hogy maximum 20-ig számoljon (azaz. break. i++) { <p>Line #: @i</p> } A ciklus a for kulcsszóval kezdődik. Ebben az esetben azt szeretnénk. it's a marvelous Monday". hiszen a „bármi más” utolsó feltétel teljesül ha más eset nem lesz igaz. amit egy kettőspont (:) követ. majd három zárójelben lévő. hogy egy-egy parancsot többször is lefuttatassunk. hogy addig működjön. században 3. Minden esetben egy case kulcsszót használunk. i < 21. the message for today is: @greeting</p> } Az ellenőrizendő változót zárójelezni kell (a példánkban a weekday változó).greeting = "Ok. } <p>Since it is @weekday.   A zárójelben az első parancsot (var i=10. Amikor a for ciklus fut. akkor használjuk a for ciklust.) azt állítjuk be. case "Wednesday": greeting = "Wild Wednesday is here!".". oh well.) Egy switch blokknak rendszerint van default ága. (Ha elfelejtjük beírni a break kulcsszót valamelyik case blokknál. pontosvesszőre végződő parancs követi. Ha valamelyik érték megegyezik a letesztelt értékkel.NET webszerkesztésbe Razor szintaxissal 83 . break. akkor a következő case ág is le fog futni. Ha tudjuk. Például gyakran kell egy parancsot egy adattömb minden elemére lefuttassunk. Ezt ciklusok használatával érjük el. break.) egy számlálót hoz létre és a 10-es értékre állítja be kezdésnek. break. fejezet – Bevezetés az ASP. A második paranccsal (i < 21. akkor abban a case ágban levő kód fut le. case "Tuesday": greeting = "It's a tremendous Tuesday". A számlálót nem kell i-nek hívnunk – bármilyen legális változó nevet adhatunk neki. hogy meddig szeretnénk számolni. hányszor szeretnénk ismételni. amíg a számláló kisebb. Az utolsó két példa így jelenik meg a böngészőben: Kód ismétlése (Ciklusok) Sűrűn van arra szükség. mint 21) Honlapépítés a XXI.

Ez a típusú ciklus azért hasznos a listáknál. amiben minden sor a változó egyesével növelt értékét mutatja.ServerVariables gyűjtemény elemeit (melyek információk a webszerverről). mert nincs szükség számlálóra.NET webszerkesztésbe Razor szintaxissal 84 . Ha megnyitjuk ezt a példát. melyekben meghatározhatjuk a gyűjtemény egy elemét (a példában var myItem). és a foreach segítségével feladatokat hajthatunk végre minden elemén. amely a ciklus minden iterációját lefutja.ServerVariables) { <li>@myItem</li> } </ul> A foreach kulcsszót zárójelek követik. A lista hasonló objektumok gyűjteménye. <ul> @foreach (var myItem in Request. A zárójeleken belül az a kód van. A harmadik parancs (i++) egy inkremens operátort használ. vagy beállított határra. A kód minden alkalommal létrehoz egy új paragrafust (<p> elem) és kijelzi az i (számláló) jelenlegi értékét. ami egyszerűen eggyel növeli a számlálót minden lefutáskor. Arra használjuk a foreach ciklust. hogy a gyűjtemény minden elemének a nevét megjelenítsük egy HTML listában egy új <li> elemként. Honlapépítés a XXI. akkor sűrűn fogunk foreach ciklust használni. században 3. Ehelyett a foreach végigmegy a listán elejétől a végéig. A foreach ciklus törzsében felhasználhatjuk a korábban deklarált változót annak kijelzésére. Ha tömbökkel vagy listákkal dolgozunk. melyet az in kulcsszó követ. melyet végig akarunk vizsgálni. akkor 11 sornyi szöveget fogunk látni. A következőpélda visszaadja a Request. majd a gyűjtemény. fejezet – Bevezetés az ASP.

(Ha csökkenteni szeretnénk a változót akkor a -= operátort kéne használni.NET –ben a legalapvetőbb objektum az oldal. majd a zárójelekben megadjuk.NET webszerkesztésbe Razor szintaxissal 85 .NET weboldalak szinte minden része objektum. Egy oldal tulajdonságait közvetlenül elérhetjük.Az általános felhasználású ciklusokhoz használjuk a while kifejezést: @{ var countNum = 0. században 3. Ebből a részből megismerhetjük a fontosabb objektumokat. Oldal objektumok Az ASP. A példánkban akárhányszor lefut a ciklus a += operátor mindig hozzáad 1-et a countNum változóhoz. } Honlapépítés a XXI. while (countNum < 50) { countNum += 1. fejezet – Bevezetés az ASP.) Objektumok és gyűjtemények Az ASP. hogy bármilyen más objektumot kéne használnunk.FilePath. amíg a countNum kevesebb. mint 50). még maga a weboldal is. <p>Line #@countNum: </p> } } A while ciklus a while kulcsszóval kezdődik. vagy csökkentnek. anélkül. a következő kód a Request objektum segítségével beolvassa az oldal elérési útját: @{ var path = Request. hogy a ciklus meddig folytatódjon (itt addig. A ciklusok egy számolásra használt változót vagy objektumot tipikusan vagy növelnek.

hogy tömbbel dolgozunk. században 3. "Robert".FilePath.Length </p> <p>Robert is now in position: @Array. } <a href="@pageUrl">My page</a> Gyűjtemény objektumok(Listák. A tömbben tárolt elemeket az indexüket használva érhetjük el. A tömbök indexei 0-val kezdődnek. @* Tömbblokk 1: Új tömb deklarálása kapcsoszárójelekkel. szögletes zárójeleket adunk a deklaráláshoz (mint például string[] vagy int[]). mint például string. var pageUrl = this. @{ string[] teamMembers = {"Matt". Két megszokott gyűjtemény típus a tömb és a „szótárérték”.Url.IndexOf(teamMembers.Files gyűjtemény. mint például a Request. "Joanne". Használhatjuk ezt a tulajdonságot például arra.Request. hogy a jelenlegi oldalon lévő objektumra utalunk. vagyis a tömb első elemének az indexe 0 a másodiknak 1. Itt az előző kód példa. } A Page objektum tulajdonságaival sok információhoz juthatunk hozzá. Erre tökéletes példa a Customer (ügyfelek) objektumok gyűjteménye egy adatbázisból. fejezet – Bevezetés az ASP. "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> Honlapépítés a XXI.NET-ben sok beépített gyűjteményt találhatunk. amiket visszaküld az oldal a böngészőnek. Az ASP. *@ @{ <h3>Team Members</h3> string[] teamMembers = {"Matt".tömbök) Az ugyanolyan típusú objektumok csoportját nevezzük gyűjteménynek. azt is beleértve. opcionálisan használhatjuk a this kulcsszót. vagy egy foreach ciklussal. integer.ez a gyűjtemény információkat tárol az éppen aktuális lekérdezésről. foreach (var person in teamMembers) { <p>@person</p> } } Minden tömbnek van egy megadott adattípusa. Hogy utaljunk arra.Hogy tisztázzuk. és így tovább. mint például:  (Kérelem): Ahogy már láthattuk . <p>The number of names in the teamMembers array: @teamMembers. hogy információkat helyezünk el a válaszba.Request. a this kulcsszóval: @{ var path = this.Ez azoknak az információknak a gyűjteménye. "Nancy"}. vagy DateTime.NET webszerkesztésbe Razor szintaxissal 86 . "Nancy"}. Request  @{ // Access the page's Request object to retrieve the Url. "Robert". "Joanne". de nem akarunk minden elemhez külön változót létrehozni. hogy milyen böngésző indította a lekérdezést. Response (Válasz:. ki a felhasználó… stb. mi a megtekinteni kívánt oldal URL-je. A tömb akkor hasznos ha hasonló dolgokat akarunk együtt tárolni. amikor lefutott a szerveroldali kód.

hogy beállítsuk vagy beolvassuk a hozzátartozó értéket: @{ var myScores = new Dictionary<string. foreach (var reversedItem in teamMembers) { <p>@reversedItem</p> } } Egy tömb hosszát. A string tömbünk így jelenik meg a böngészőben: A tár(szótárérték) nem más.Add("test1".IndexOf metódust használjuk. myScores.Reverse(teamMembers).NET webszerkesztésbe Razor szintaxissal 87 . 59). A tárban használt adattípusokat törtzárójelek ( < > ) közé kell Honlapépítés a XXI.Reverse metódus) vagy akár rendezhetjük is (Array.Array. hogy új tár (szótárérték) objektumot akarunk létrehozni. mint kulcs/érték párok gyűjteménye. De ha úgy akarjuk meg is fordíthatjuk a tömb tartalmát (Array. ezekben elég megadni a kulcsot (vagy nevet).Add("test2". myScores. fejezet – Bevezetés az ASP. myScores.Add("test3". } <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 kulcsszóval jelezzük.Add("test4".Sort metódus). myScores. 82).A var kulcsszóval egy változóhoz fűzhetjük a tárunkat. vagyis hogy hány elemű a Length tulajdonságából tudhatjuk meg. 100). 71). int>(). Ha szeretnénk egy megadott érték helyét meghatározni a tömbben akkor az Array. században 3.

és nem hagyhatunk ki paramétereket (ha mégis szükséges. var myPathPositional = Request. Ez a metódus visszaadja a megadott virtuális elérési útnak megfelelő fizikai elérési utat. Hibák kezelése Honlapépítés a XXI. ami három paraméterrel is rendelkezik. public string MapPath(string virtualPath. de ennek ellenére. az objektumok metódusokkal rendelkezhetnek. mivel ez az. A Razor szinakszissal kétféle módon adhatunk át paramétereket: helyzeti és névszerinti paraméterekként. <p>@myPathNamed</p> Mint láthatjuk. (Hátránya.NET webszerkesztésbe Razor szintaxissal 88 .majd megjeleníti a végeredményt.Connect metódust. névszerinti paraméterek használatával letisztultabb. <p>@myPathPositional</p> Amikor egy metódus sok paraméterrel rendelkezik. Hogy értéket olvassunk ki a tárunkból. (Megjegyzés: a deklarálásnál a paraméterek azokkal az adattípusokkal jelennek meg. és a deklarálás végére még egy zárójel párt kell tenni. A következő példában láthatjuk az értékadás egy alternatíváját. ugyanazt az értéket fogják visszaadni. allowCrossAppMapping: true. Például a Database objektum tartalmazhat egy Database. amiket elfogadnak.MapPath(baseVirtualDir: "/". A metódus három paramétere a virtualPath. true).MapPath metódust. és az allowCrossAppMapping. // Helyzeti paraméterek átadása. mind három paraméterét meg kell adnunk. A következő példa feltételezi. Léteznek olyan metódusok. A kód meghívja a Request.) Amikor meghívjuk ezt a metódust. adjuk meg a paraméter nevét. a paramétereket más sorrendben adtuk át. ami tulajdonképpen létrehoz egy új tárat.tennünk. fejezet – Bevezetés az ASP. "/". virtualPath: "/scripts"). akkor null értéket vagy üres stringet ("")adjunk neki). Erre jó példa a Request. hogy akármilyen sorrendben megadhatjuk őket. Hogy névszerinti paraméterekkel hívjunk meg egy metódust. hogy rendelkezünk a webhelyünkön egy script mappával. meghívhatjuk a tár Add metódusát ez változónál (esetünkben myScores). baseVirtualDir. ha lefuttatjuk az előző két példát. és jobban megfejthető lesz a kódunk. bool allowCrossAppMapping).MapPath("/scripts". Ahhoz hogy új elemeket adjunk hozzá a tárunkhoz. amiknek egy vagy több paramétere is van. szögletes zárójelezzük az elérni kívánt kulcsot: var testScoreThree = myScores["test3"]. A névszerinti paraméterek előnye. ez után adjuk meg az értékét. a metódus deklarálásának megfelelő sorrendben kell megadni a paramétereket (a metódus dokumentációjából ezt megtudhatjuk). nem cserélhetjük fel a paramétereket. majd egy kettőspontot (:). átadja a három paramétert a megfelelő sorrendben.MapPath metódus. hogy a metódushívás sokkal több helyet foglal) Az előző példában látható metódust most névszerinti paraméterekkel hívjuk meg: // Névszerinti paraméterek átadása. Hogy helyzeti paraméterek használatával hívjunk meg egy metódust. amit azért adunk át egy metódusnak hogy az sikeresen letudjon futni. amikor a kulcsot szögletes zárójelbe írjuk: myScores["test4"] = 79. században 3. Paraméterekkel rendelkező metódusok hívása Ahogy a fejezet korábbi részeiben olvashattuk. A paraméter egy olyan érték. Ehhez a sorrendhez mindenképp tartanunk kell magunkat. string baseVirtualDir. var myPathNamed = Request. majd megadhatjuk hozzá a kulcs-érték párt.

amikor minden jól működik. Például:  Sokféle hiba léphet fel.NET webszerkesztésbe Razor szintaxissal 89 . hogy a kódunk tartalmaz olyan utasításokat. milyen. ahol különböző kivételeket kezelhetünk. A try blokkba azt a kódot írjuk. vagy nem létezik. Valójában annyi catch blokkot használhatunk. mert kivételt okozhat az oldalunkban.NET még a mappát sem tudja megtalálni. ami az első lekérdezéskor létrehoz egy szövegfájlt és megjelenít egy gombot.Redirect metódust használni egy try/catch utasításban. és így tovább. vagyis a nem létező mappa kivétel. A kód két kivételt kezel le: Az egyik a FileNotFoundException vagyis a nem létező fájl kivétel. hogy létrehozzunk egy kivételt. ami akkor következik be. A következő példában létrehozunk egy oldalt. hogy elveszítjük a kapcsolatot az adatbázissal. amivel a felhasználó megnyithatja azt.) Honlapépítés a XXI. században 3. ha kivételbe ütközik.Try-Catch utasítások Lehetséges. de az is lehet. vagy csak el akarjuk kerülni az ilyen típusú hibaüzeneteket. fejezet – Bevezetés az ASP. vagy csak olvasható. vagy egyszerűen csak nem megfelelő adatokat akarunk elmenteni. hogy a fájl nem is létezik. A példában szándékosan használunk rossz fájlnevet. lehetnek jogosultsági problémák. (Megszüntethetjük a megjegyzéseket az egyik utasításban.  Ezeket a szituációkat programozási körökben kivételeknek (exception) hívjuk. Lehet. ahány hibára számítunk. amikor egy fájlon valamiféle műveletet szeretnénk végrehajtani. Használjuk try/catch utasításokat. Hasonlóképpen. és így tovább. Megjegyzés: Nem ajánlatos a Response. ha egy adatbázis rekordjait szeretnénk változtatni. amit ellenőrizni szeretnénk. esetleg a kódunk nem tartalmazza a megfelelő jogosultságokat. A kódunk automatikusan generál (dob) egy hibaüzenetet. A második a DirectoryNotFoundException. ami akkor történik ha a megadott fájlnév hibás. majd ehhez párosíthatunk egy vagy több catch parancsot. amikor kivételekbe ütközünk. amikor az ASP. hogy lássuk. amik valamiféle hibát generálnak.

". try { // Ez a kód hibát fog jelezni. } catch (FileNotFoundException ex) { // A kivétel objektum használható hibajavításra.ReadAllText(@"c:\batafile. az megpróbálja megnyitni az adott fájlt olvasásra. fileContents = "". userMessage = "Hello world. meg amit az előző képen láthatunk. és elküldi // az oldalt. File.MapPath(dataFilePath). } catch (DirectoryNotFoundException ex) { // Similar to previous exception. userMessage). // Készítsünk felhasználóbarát hibaüzenetet. userErrMsg = "A file could not be opened. please contact " + "your system administrator.Now. } } else { // Amikor először lekérik az oldalt.NET webszerkesztésbe Razor szintaxissal 90 . naplózásra errMsg = ex. fejezet – Bevezetés az ASP. userErrMsg = "A directory was not found.ReadAllText(physicalPath). physicalPath = Server. mert a megadott fájl nem létezik. errMsg = ex. errMsg = "". Hogy elhárítsuk a hibát. } } <!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"/> Honlapépítés a XXI. @{ var var var var var var dataFilePath = "/dataFile.Message. //fileContents = File.Message.txt".". fileContents = File. az alábbi elől pedig töröljük. században 3.WriteAllText(physicalPath.Ha a kódunk esetlegesen nem kezelne le egy kivételt. // Helyezzünk dupla perjelt a fenti parancs elé. the time is " + DateTime. userErrMsg = "".txt"). please contact " + "your system administrator. Azonban a try/catch részek segítenek megakadályozni az ilyen típusú hibaüzeneteket. hozzuk létre a text fájlt. // Ez a kód működik. akkor egy olyan hiba oldalt jelenítene. if(IsPost) { // Amikor a felhasználó az „Open File” gombra kattint.

aspx ASP.NET C# nyelv Honlapépítés a XXI.NET indulókészlet: http://devportal.aspx Függelék: A Visual Basic programozási nyelv és szintaxisa Angol nyelven: Referencia dokumentumok ASP.hu/content/CSharpjegyzet.</form> <p>@fileContents</p> <p>@userErrMsg</p> </body> </html> További források Magyar nyelven: C# jegyzet: http://devportal. században 3. fejezet – Bevezetés az ASP.hu/groups/tanulk/pages/mvc.NET webszerkesztésbe Razor szintaxissal 91 .

és több oldalon is felhasználhatjuk webhelyünkön.NET-nek. mint egy átlagos weboldalon. így egységes megjelenést biztosítva számára. fejezet – Egységes megjelenés kialakítása 92 .NET beszúr egy tartalomblokkot. az ASP. Egy ilyen egyszerű tartalom létrehozása a frissítést is egyszerűbbé teszi. csak egy fájlt kell frissítenünk ahhoz. hogy hova kell az oldal elemeit beilleszteni. A fejezetből megtudhatjuk:     Hogyan hozhatunk létre többször felhasználható tartalomblokkokat. hogyan működnek a tartalomblokkok. mint például fejlécet és láblécet? Hogyan alakíthatunk ki egy layout oldal segítségével egységes kinézetet az összes oldalnak? Hogyan küldhetünk át adatot futás közben a layout oldalra? Hogyan hozzunk létre és használjunk egy saját helpert? A fejezetben a következő ASP. amelyek jelzik az ASP. hogy adatot osszunk meg tartalomblokkok és layout oldalak között. fejezet – Egységes megjelenés kialakítása Egy hatékonyabb weboldal kialakításához létrehozhatunk a webhelyünknek többször felhasználható tartalomblokkokat (például fejlécet és láblécet). Ha meg szeretnénk változtatni a tartalmat. Ezáltal nem kell külön bemásolni ugyanazt a szöveget minden oldalra. hogy megjelenjen a rajta lévő információ. Az ASP.NET funkciókról olvashatunk:     Tartalomblokkok. amely minden oldalon megjelenik. amelyek HTML tartalommal rendelkeznek. amelyek HTML kódot tartalmazó fájlok. amelyben van szöveg és kód. RenderBody és RenderSection metódusok. hogy a felhasználó be van-e jelentkezve. ahol a RenderPage metódust a főoldalra hívják. mint például a fejléc és lábléc. században 4. és több oldalra is beszúrhatók. amely lehetővé teszi. Ezután beilleszthetjük ezt a tartalomblokkot olyan oldalakra a weblapon. Többször használható tartalomblokkok létrehozása Több weboldalon is találunk olyan tartalmat. ahova ezt a tartalmat beszúrtuk. A PageData szótár. ahol szeretnénk. ott. Amikor egy böngésző kér egy oldalt a webszervertől.NET-tel egy különálló fájlt hozhatunk létre egy olyan tartalomblokkal. A RenderPage. hogy ez mindenhol frissüljön. amely mutatja. vagy egy doboz. A kész (összefésült) oldalt ezután küldi el a böngészőnek.4. Honlapépítés a XXI. Layout oldalak. A következő diagram bemutatja.

században 4.Ebben az eljárásban olyan oldalt hozunk létre. egy hasonló oldalt kapunk: 1.cshtml! 2. Ezeket a tartalomblokkokat használhatjuk bármely oldalnál a weblapunkon. fejezet – Egységes megjelenés kialakítása 93 . A gyökérmappában hozzunk létre egy mappát: Shared! Megjegyzés: Általában az olyan fájlokat.</p> </body> </html> 3. amelyeket megosztunk weboldalak között.cshtml! Honlapépítés a XXI. Ha készen vagyunk. Shared nevű mappába helyezzük. Cseréljük ki a már létező kódot a következőre: <html> <head> <title>Main Page</title> </head> <body> <h1>Index Page Content</h1> <p>This is the content of the main page. 4. melyek külön fájlokban találhatók. Hozzunk létre a Shared mappában egy fájlt: _Header. amely két tartalomblokkra utal (egy fejlécre és egy láblécre). A weblap gyökérmappájában hozzunk létre egy fájlt: Index.

Az Index. Hozzunk létre a Shared mappában egy fájlt: _Footer.cshtml.cshtml. A RenderPage-hez indított hívások.cshtml fájlba.cshtml és a _Footer. Az ASP. Előhívjuk a RenderPage metódust. kiemelt kódot. ha annak a neve alulvonással kezdődik. All rights reserved. Cseréljünk ki bármilyen már létező tartalmat a következőre: <div class="header"> This is header text. 8. Futtassuk le a böngészőben az Index. században 4. amely két hívást intéz a RenderPage metódushoz: <html> <head> <title>Main Page</title> </head> <body> @RenderPage("/Shared/_Header. hogy ezeket az oldalakat (figyelmetlenségből vagy másképp) lekérdezzék. amelyet az Index. és átadjuk neki a fájl nevét. Hasznos.cshtml fájlok tartalmait illesztjük be az Index. mert nem szeretnénk.</p> @RenderPage("/Shared/_Footer.cshtml-nek ad át. hogy más oldalakra is beszúrjuk őket.5.cshtml oldalon adjuk hozzá a következő.cshtml oldalt! (Futtatás előtt győződjünk meg róla. egy alulvonással (_) az elején. Ezzel megelőzhetjük. amelyet ennél a pontnál be akarunk illeszteni. Itt a _Heather. <html> <head> <title>Main Page</title> </head> <body> Honlapépítés a XXI. majd cseréljük ki a tartalmat a következőre: <div class="footer"> © 2010 Contoso Pharmaceuticals. amelyekben van tartalomblokk. Jelenítsük meg a forrást a böngészőben. hogy a fájl neve _Header.NET nem küld el egy oldalt a böngészőnek. hogy az oldalt a Files névhelyről választottuk!) 9.cshtml") <h1>Index Page Content</h1> <p>This is the content of the main page. amelyeket az Index. 6. A következő példa megmutatja az oldal forrását.cshtml") </body> </html> Ez megmutatja. </div> 7. </div> Figyeljünk arra. ha alulvonással jelöljük azokat az oldalakat. hogyan szúrjunk be egy tartalomblokkot a weboldalra. hogy ezekhez a felhasználók hozzáférhessenek – ezek kifejezetten arra készültek. fejezet – Egységes megjelenés kialakítása 94 . amely egyesíti az index oldal kódját a tartalomblokkokkal.cshtml-be illesztettünk be felcserélődtek a fejléc és lábléc fájlok aktuális tartalmával. (Például az Internet Explorerben jobb egérgomb lenyomása után kattintsunk a View Source-ra!) Ez elérhetővé teszi a weboldal által a böngészőnek küldött kódot.

cshtml! Honlapépítés a XXI. A layout oldal meghatározza az oldal struktúráját. Egy ennél is strukturáltabb módja az áttekinthető megjelenítésnek a layout oldalak használata. hogy előhívhatja a RenderBody metódust. </div> <h1>Index Page Content</h1> <p>This is the content of the main page. Ez az oldal tartalmaz egy kódot. All rights reserved. hogyan kapcsolódnak össze a tartalommal rendelkező oldalak a megjelenés oldalakkal.</p> <div class="footer"> © 2010 Contoso Pharmaceuticals. Tartalomblokkokat is beilleszthetünk a megjelenés oldalba a RenderPage metódus meghívásával. amely meghatározza. A RenderBody metódus pozíciója a megjelenés oldalon meghatározza. A megjelenítés oldalban a tartalom oda lesz beillesztve. A következő eljárás megmutatja. </div> </body> </html> Egységes látvány kialakítása layout oldalakkal Már láthattuk. hogy egy kész weboldalt kapjunk. hogyan készíthetünk layout oldalt. A weboldalunk Shared mappájába hozzunk létre egy fájlt: _Layout1. mennyire egyszerű tartalmat létrehozni egyszerre több oldalon. fejezet – Egységes megjelenés kialakítása 95 . hogy hova kerüljön a megjelenítendő tartalom.<div class="header"> This is header text. A következő diagram megmutatja. A kész weboldal ezután jelenik meg a böngészőben. Egy ilyen oldal elkészítése után létrehozhatunk tartalommal is rendelkező oldalakat és hozzákapcsolhatjuk őket a layout oldalakhoz. (Ebben az értelemben a layout oldal úgy viselkedik. században 4. a layout oldal szerint lesznek formázva. majd hogyan csatolhatunk ahhoz tartalmat. de nem tartalmaz semmilyen tartalmat. ahol a RenderBody metódust előhívják. milyen megjelenést kell használni az oldal megjelenítéséhez.) Egy megjelenés oldal annyiban tér el egy másik HTML oldaltól. mint egy sablon a tartalommal rendelkező oldalak számára. A böngésző lekéri a tartalommal rendelkező oldalt. ahogyan azt az előző részben csináltuk. Amikor megjelenítjük ezeket a tartalmakat. 1.

majd cseréljünk ki minden. A Shared mappában hozzunk létre egy fájlt: _Header2. background-color: #ffffff.cshtml. már létező tartalmat a következőre: <div id="header"> Chapter 3: Creating a Consistent Look </div> 4.75em Georgia. sans-serif. } body { margin: 0.NET rendelkezik egy @href helperrel.cshtml") <div id="main"> @RenderBody() </div> <div id="footer"> © 2010 Contoso Pharmaceuticals. Cseréljünk ki minden.css majd adjuk meg a következő stílus definíciókat: h1 { border-bottom: 3px solid #cc9900. már létező tartalmat a következőre: <head> <title> Structured Content </title> <link href="@Href("/Styles/Site.75em "Trebuchet MS". Honlapépítés a XXI. 3.75em/1. </div> </body> </html> A RenderPage metódust használjuk tartalomblokkok beillesztéséhez a layout oldalakon. Ezért az ASP. font: 75%/1. font: 2.2. color: #996600. amely értelmezi az elérési utat. fejezet – Egységes megjelenés kialakítása 96 . serif. A gyökérkönyvtárban hozzunk létre egy mappát: Styles! 5. A layout oldal csak egy hívást kérhet le a RenderBody metódustól. All rights reserved. században 4. A Styles mappában hozzunk létre egy fájlt: Styles. } ul { list-style-type: none.css")" rel="stylesheet" type="text/css" /> </head> <body> @RenderPage("/Shared/_Header2. Megjegyzés: A webszerverek nem mind ugyanúgy kezelik a hiperhivatkozásokat (a linkek href attribútumát). Verdana. padding: 1em. hogy azt a webszerver is elfogadja. és olyan formára alakítja.

Excepteur sint occaecat cupidatat non proident. Honlapépítés a XXI. sunt in culpa qui officia deserunt mollit anim id est laborum. A tetején található kódblokk határozza meg. fejezet – Egységes megjelenés kialakítása 97 . 7.</p> Ez az oldal használni fogja a layout oldalt.cshtml. consectetur adipisicing elit. hogyan használhatjuk a stílus lapokat a layout oldalaknál. padding: 1em 0 0 0. width: 25%. akár saját stílust is összeállíthatunk ezekre az elemekre. A gyökérmappában hozzunk létre egy fájlt: Content1. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. } Ezek a stílus definíciók csak bemutatják. color: #996600. } #header. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Futtassuk le a böngészőben a Content1. } <h1> Structured Content </h1> <p>Lorem ipsum dolor sit amet. században 4. Ha szeretnénk. 6.cshtml-ben lévő formázást és stílust fogja használni a Content1.color: #006600. hogy mely layout oldalt fogja használni a tartalom formázásához.cshtml". majd cseréljünk ki minden. float: left. már létező tartalmat a következőre: @{ Layout = "/Shared/_Layout1. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.cshtml-ben összefoglalt szövegnek. #footer { margin: 0. padding: 0. color: #996600.cshtml-t! A lekért oldal a _Layout1. Ut enim ad minim veniam. background-color: #ffffff. } #list { margin: 1em 0 7em -3em.

hogy hol jelenjen meg a névtelen (alapértelmezett) szakasz. a névtelen (alapértelmezett) szakaszt arra a pontra illeszti be.NET hogyan kezeli az olyan tartalmakat.fejezetben . hogy automatikusan ugyanazt a layout oldalt használja a mappában lévő összes tartalomra. (A példában Header és Listnek nevezzük őket. hogy külön elnevezzük a hozzáadott szakaszokat. ahol a RenderSection metódust lehívják. Honlapépítés a XXI. ahol a RenderBody metódust lehívták.A Site-Wide viselkedés testreszabása.) A layout oldalon a RenderBody metódussal meghatározzuk. Megjegyzés: Beállíthatjuk az oldalunkat úgy. Minden elnevezett szakasz megtalálható a tartalom oldal szakasz blokkjában. Többféle tartalommal rendelkező layout oldalak tervezése Egy tartalommal rendelkező oldal többféle szakaszból állhat. A következő diagramban láthatjuk. században 4. (Az alapértelmezett szakasz névtelen marad. Mint már korábban láttuk. lépést megismételhetjük. További információt találunk a 19. fejezet – Egységes megjelenés kialakítása 98 . Ezután külön RenderSection metódusokat adunk hozzá. A tartalmi oldalon minden szakasznak külön nevet adunk. ha további tartalommal rendelkező oldalt szeretnénk hozzáadni a weblaphoz ugyanezzel a megjelenéssel.) A keretrendszer azon a ponton illeszti be a tartalom szakaszt a layout oldalba. amelyek több részre vannak osztva.A 6. hogy az ASP.

Ebből a folyamatból láthatjuk. </div> </body> </html> rel="stylesheet" Mind a fejléc. fejezet – Egységes megjelenés kialakítása 99 . már létező tartalmat a következőre: <html> <head> <title>Multisection Content</title> <link href="@Href("/Styles/Site. amelyben több tartalomszakasz is van. Cseréljünk ki minden.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. Honlapépítés a XXI. században 4.cshtml. 2. A weboldalunk Shared mappájában hozzunk létre egy fájlt: _Layout2. és hogyan lehet ezeket hozzáadni a layout oldalhoz. All rights reserved. amely támogatja a több tartalommal bíró szakaszokat. mind a lista szakaszok hozzáadásához a RenderSection metódust használjuk. 1. hogyan tudunk olyan tartalommal rendelkező oldalt szerkeszteni.

cshtml. Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum. A gyökérmappában hozzunk létre egy fájlt: Content1. Mindegyik elnevezett szakasz egy szakaszblokkban található. században 4.</p> Ez a tartalommal rendelkező oldal tartalmaz egy kódblokkot a lap tetején. fejezet – Egységes megjelenés kialakítása 100 . consectetur adipisicing elit. } @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. Futtassuk az oldalt a böngészőben! Honlapépítés a XXI. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. majd cseréljünk ki minden. már létező tartalmat a következőre: @{ Layout = "/Shared/_Layout2. Ut enim ad minim veniam. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 4. Az oldal többi része az alapértelmezett (névtelen) tartalom szakaszt tartalmazza. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.cshtml".3.

amely nem tartozik egy szakaszhoz sem a layout oldalon. A layout oldal több olyan metódust is tartalmaz. ha egy megnevezett szakaszt opcionálisnak választunk ki a layout oldalon. amihez nincs tartalom. így akár az is előfordulhat. amely ugyanazt a szakaszt kéri le. majd futtassuk le egy böngészőben! Egy hibaüzenet jelenik meg. Azonban ezt a fajta hibalehetőséget kiküszöbölhetjük. Ezzel definiálhatunk többszörös tartalommal bíró oldalakat. amelyek egyszerre használhatják a layout oldalt. fejezet – Egységes megjelenés kialakítása 101 . ha a következők merülnek fel:    A tartalmi részben van olyan szakasz. mert a tartalommal rendelkező oldal nem tud szolgáltatni tartalmat a layout oldal egyik szakaszához. hogy nem lesz tartalom egy kifejezett szakaszhoz. nevezetesen a fejléc szakaszhoz. A layout oldal tartalmaz olyan szakaszt. Nyissuk meg a Content2.Opcionális tartalomszakaszok létrehozása Általában a tartalommal rendelkező oldalon létrehozott szakaszok ugyanolyanok. században 4. Honlapépítés a XXI. Mentsük el az oldalt. 1.cshtml-t és töröljük ki a következő részt: @section header { <div id="header"> Chapter 3: Creating a Consistent Look </div> } 2. mint a layout oldalakon lévők. Különféle hibaüzeneteket kaphatunk.

Shared mappában nyissuk meg a _Layout2.NET hogyan használja a PageData tulajdonságot ahhoz. A PageData tulajdonság egy név/érték pár. A layout oldalon később ezeket az értékeket olvashatjuk a PageData tulajdonságainál. A tartalmi oldalon kódot kell írnunk ahhoz. Amikor az ASP. értékeket adhatunk hozzá a tartalmi oldal PageData tulajdonságához. Ha találkozunk ilyennel. amely az általunk átküldeni kívánt adatokat tartalmazza. egyszerűen frissíthetjük azt. hogy az ASP. és helyettesítsük ezt a sort: @RenderSection("header") a következő kóddal: @RenderSection("header". hogy adatot írjunk be a PageData kollekcióhoz. bár hiányzik a fejléc is. Futtassuk újra a Content2. A PageData kollekcióban levő értékeket a tartalmi oldal más szakaszaiból vagy külön tartalmi blokkból is elérhetjük. vagy megjeleníteni. Ahhoz. illetve elrejteni részeket a felhasználók típusa szerint. Itt egy újabb diagram.NET elkezdi építeni a weboldalt. században 4.cshtml oldalt a böngészőben! (Ha még mindig ez az oldal fut a böngészőben. fejezet – Egységes megjelenés kialakítása 102 . Adat küldése layout oldalakra A tartalmi részben előfordulhat olyan adat. Honlapépítés a XXI. required: false) Alternatívaként az előző kódsort kicserélhetjük a következő kódblokkra. amelyre a layout oldalon utalni kell. hogy adatot küldjünk át a tartalmi oldalról a layout oldalra. Ez bemutatja. elkészíti a PageData kollekciót.3.cshtml oldalt. hogy a tartalmi oldalról értékeket küldjön át a layout oldalra. Például ha fel akarjuk tüntetni a felhasználó állapotát. ami ugyanazt eredményezi: @if (IsSectionDefined("header")) { @RenderSection("header") } 4. az információt át kell küldenünk a tartalmi oldalról a layout oldalra.) Ez alkalommal nem hoz fel hibaüzenetet.

1. igaz/hamis (Boole-i) értéket állít be a PageData tulajdonságban. A gyökérmappában hozzunk létre egy fájlt: Content3. PageData["Title"] = "Passing Data". Amikor az oldal fut. hogy megjelenítse-e a Hide List (Lista eltüntetése) vagy a Show List (Lista megjelenítése) gombokat. eltünteti a listát.A következő folyamat bemutatja. Az érték a tartalmi oldalon is szerepel. században 4. egy gombbal lehet eltüntetni illetve megjeleníteni egy listát a layout oldalról. és ha hamis. A layout oldal kiolvassa az értéket.cshtml". Honlapépítés a XXI. hogyan küldhetünk át adatot a tartalmi oldalról a layout oldalra. fejezet – Egységes megjelenés kialakítása 103 . Ha a felhasználó a gombra kattint.cshtml. már létező tartalmat a következőre: @{ Layout = "/Shared/_Layout3. majd cseréljünk ki minden.

PageData["ShowList"] = true. már létező tartalmat a következőre: <!DOCTYPE html> <html> <head> <title>@PageData["Title"]</title> <link href="@Href("/Styles/Site.css")" rel="stylesheet" type="text/css" /> </head> <body> Honlapépítés a XXI. században 4. attól függően.NET feltételesen engedi a HTML kódot használni az oldalon egy kódblokkal! Például az if/else blokk a szövegtörzsben meghatározza.</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 kód két adatot tárol a PageData tulajdonságon . fejezet – Egységes megjelenés kialakítása 104 . A Shared mappában hozzunk létre egy fájlt: _Layout3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Jegyezzük meg. } } } @section header { <div id="header"> Chapter 3: Creating a Consistent Look </div> } <h1>@PageData["Title"]</h1> <p>Lorem ipsum dolor sit amet. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.cshtml.a weboldal címét és a lista megjelenítéséhez szükséges igaz vagy hamis értéket. Excepteur sint occaecat cupidatat non proident. 2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. if (IsPost) { if (Request["list"] == "off") { PageData["ShowList"] = false. melyik formát használja. consectetur adipisicing elit. majd cseréljünk ki minden. hogy a PageData["Show List"] igaz értékre van-e állítva. Ut enim ad minim veniam. hogy az ASP. sunt in culpa qui officia deserunt mollit anim id est laborum.

hogy megjelenítse-e a lista tartalmát.cshtml oldalt egy böngészőben! Az oldalon látható a lista a bal oldalon és egy Hide List gomb az oldal alján.cshtml") </div> } <div id="main"> @RenderBody() </div> <div id="footer"> © 2010 Contoso Pharmaceuticals. században 4. A Shared mappában hozzunk létre egy fájlt: _List. Honlapépítés a XXI.<div id="header"> @RenderSection("header") </div> @if (PageData["ShowList"] == true) { <div id="list"> @RenderPage("/Shared/_List. ami lekéri a címértéket a PageData tulajdonságtól. már létező tartalmat a következőre: <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Consecte</li> <li>Eiusmod</li> <li>Tempor</li> <li>Incididu</li> </ul> 4.cshtml. fejezet – Egységes megjelenés kialakítása 105 . All rights reserved. 3. Futtassuk a Content3. majd cseréljünk ki minden. </div> </body> </html> A layout oldal tartalmaz <title> elemet. Ez szintén használja a PageData tulajdonság ShowList értékét.

Honlapépítés a XXI.NET több helperrel is rendelkezik. Mint azt már láthattuk a 2. században 4. fejezetben. a helper olyan elem. 6. A helperek teljes listáját a Függelék – ASP. ha létrehozunk egy egyéni helpert. Kattintsunk a Hide Listre! A lista eltűnik és a gomb átvált Show Listre.5. Az ASP.NET API referencia részben találjuk. melyekkel a későbbi fejezetekben jobban megismerkedünk. Kattintsunk a Show List gombra. amellyel egy összetett feladatot vihetünk véghez egyetlen kódsor segítségével. és a lista ismét megjelenik! Egyszerű helper létrehozása és használata További lehetőség egy egységes nézet kialakításához. fejezet – Egységes megjelenés kialakítása 106 .

margin-left: 15px.cshtml! 3. hiszen ha csak jegyzetek kinézetét szeretnénk megváltoztatni. fejezet – Egységes megjelenés kialakítása 107 . amely a fent említett példánkban a megjegyzéseket formázza. hogyan készítsünk helpert. amely tartalmazhat szöveget és formázást is egyaránt. Mentsük el és zárjuk be a fájlt! A következő folyamat azt mutatja be. hogyan illesszünk be a weboldalba megjegyzést az általunk elkészített kisegítővel. A gyökérmappában hozzunk létre egy új fájlt: TestHelper. 4. számunkra hasznos jelölést vagy ASP. amelyek különállnak a normál paragrafusoktól.Itt helyezzük el a megjegyzés helperünkre szóló hívást.") <p>This is some following text.</p> </body> </html> Honlapépítés a XXI. Cseréljünk ki minden már meglévő tartalmat a következőre: @helper MakeNote(string content) { <div class="note" style="border: 1px solid black.Az egységes megjelenítés kialakításában egy helper úgy tud segíteni. amelyet megjegyzéseinkhez mindenhova beilleszthetünk egyetlen kódsorral. hogy létrehozza az új MakeNote kisegítőt.MakeNote("My test note content. készíthetünk belőle egy kisegítőt. Ez a folyamat bemutatja. Adjuk a fájlhoz a következő kódot: <head> <title>Test Helpers Page</title> </head> <body> <p>This is some opening paragraph text. Tegyük fel. 1. Ezzel az oldalon lévő kódok könnyen felismerhetőek. században 4. Az oldal fejlesztését is könnyebbé teszi. A kisegítő a @content változó segítségével illeszt be egy stringet a jegyzet törzsébe. amely egy körülhatárolt dobozt formál. de a kisegítőé MakeNote! Több kisegítőt is elhelyezhetünk egy fájlban. Jegyezzük meg. hogy minden oldalra ugyanazt a jelölést vinnénk fel. elég csak egy helyen átírni a kódot.cshtml! 2. --> @MyHelpers. width: 90%. 1. Ahelyett. Az App_Code mappában hozzunk létre egy új .</p> <!-. padding: 5px. hogy lehetővé teszi a gyakran használt kódblokkok egyszerű elérését a webhely összes oldalán. az egyéni helper bármely. és egyszerűbben átláthatóbbak. Ez a kisegítő segít a content paraméter átküldésében."> <p> <strong>Note</strong> @content </p> </div> } A kód a @helper szintaxist használja. A weboldal gyökérmappájában hozzunk létre egy új mappát: App_Code! 2.NET kódot tartalmazhatja. Ezeket a <div> elemmel tehetjük meg.cshtml fájlt: MyHelpers. hogy a fájl neve MyHelpers. hogy oldalunkon olyan megjegyzéseket szeretnénk gyakran használni. Ez egy egyszerű példa.cshtml .

egy pontot. hogy előhívjuk a kisegítőt bármelyik beágyazott mappaszintről. hogy előhívjuk az általunk elkészített kisegítőt.HelperName szintaxist is. Honlapépítés a XXI. fejezet – Egységes megjelenés kialakítása 108 . majd a kisegítő nevét! (Ha több mappánk is volt az App_Code mappában. akkor használhatjuk a @FolderName. idézőjelek között megadott szöveget fogja a helper úgy megjeleníteni az oldalon. mint egy megjegyzést. használjuk a @-ot a kisegítő fájlnév előtt. században 4. 3.Ahhoz. Mentsük el az oldalt.) A zárójelesen. ahol azt előhívtuk: a két paragrafus közé. majd futtassuk egy böngészőben! A kisegítő oda fogja helyezni a jegyzetet.FileName.

2. fejezet – Munka az űrlapokkal 109 .5.cshtml nevű weboldalt. Akkor használunk űrlapokat. ahol elhelyezhetünk felhasználói beviteli vezérlőket.NET programozási fogalmakat mutatjuk be a fejezetben:    A Request objektum Bevitel ellenőrzése HTML kódolás Egy egyszerű HTML űrlap létrehozása 1. században 5. például szövegdobozokat. fejezet – Munka az űrlapokkal Egy űrlap a HTML dokumentum azon része. amikor a felhasználó által bevitt adatokat szeretnénk összegyűjteni és feldolgozni. A fejezetből megtudhatjuk:     Hogyan hozzunk létre egy HTML űrlapot? Hogy olvassunk ki felhasználó által bevitt adatokat az űrlapból? Hogyan ellenőrizhetjük a bevitt adatokat? Hogyan állítsuk vissza az űrlap értékeit az oldal elküldése után? A következő ASP. A gyökérmappájába hozzuk létre a Form. választókapcsolókat vagy legördülő listákat. jelölőnégyzeteket.</label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> Honlapépítés a XXI. Hozzunk létre egy új webhelyet. és írjuk be a következő kódot: <!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>&nbsp.

A Form.</body> </html> 3. (A való életben rengeteg izgalmas módon használhatjuk fel a felhasználói bevitelt. században 5.) Egy egyszerű űrlap jelenik meg három beviteli mezővel és egy Submit gombbal. csak az üres űrlap fog megjelenni. ami a szerveren fog lefutni. Ezekkel később az adatbázisokkal kapcsolatos fejezetben találkozhatunk. hogy az oldal ki van választva a Files névtérben. ha a Submit gombra kattintunk. Ezen a ponton.AsInt(). <text> You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname <br /> Employee Count: @employeecount <br /> </text> } } Amikor a felhasználó először kéri az oldalt.cshtml-re). mert amikor elkészítettük az űrlapot az előző feladatrészben. Felhasználó által bevitt érték olvasása az űrlapból Hogy feldolgozzuk az űrlapot. hozzá kell adnunk néhány sor kódot. Hogy az űrlapot használhatóvá tegyük.) 1. Futtassuk az oldalt a böngészőben. A most következő feladat bemutatja. hozzáadunk egy kódot. A kérelem eljut ugyanerre a weboldalra (névszerint a Form.cshtml file tetejére szúrja be a következő kódot: @{ if (IsPost) { string companyname = Request["companyname"]. semmi sem történik. int employeecount = Request["employees"]. Ezek a bejegyzések a felhasználó által bevitt adatok a szerverre.(Bizonyosodjunk meg. fejezet – Munka az űrlapokkal 110 . ami kiolvassa a benyújtott mezőértékeket és valamilyen feladatot végrehajt. A felhasználó (jelen esetben Ön) kitölti az űrlapot és rákattint a Submit gombra. string contactname = Request["contactname"]. hogyan lehet kiolvasni a mezőket és megjeleníteni a bevitt értékeket az oldalon. a form elem action attribútumát üresen hagytuk: <form method="post" action=""> Honlapépítés a XXI. mielőtt futtatjuk.

dátum vagy egyéb típusú értékkel szeretnénk dolgozni. A példában. Ezért ha szám. A companyname mező (szövegdoboz) kiolvasásához például használjuk a Request["companyname"] parancsot! Az űrlapértékek a Request objektumban stringként vannak tárolva. században 5.Amikor elküldjük az oldalt. A Request objektum tartalmazza az oldal által benyújtott értékeket. Honlapépítés a XXI. töltsük ki az űrlap mezőit. a HTTP GET és POST metódusok és az IsPost tulajdonság részben olvashatunk. Ezután megkapjuk a felhasználó által megadott értékeket a Request objektumból. fejezetben. hogy meghatározzuk. vagyis rákattintott-e a felhasználó a Submit gombra. későbbi felhasználásra. az ISPost igazat fog mutatni. a Request parancs AsInt metódusa átkonvertálja az employees mező értékeit (ami a foglalkoztatottak számát mutatja) egy integerre (egész számra). 2. át kell konvertálni azt stringből a nekünk megfelelő típusra. A kulcsok megegyeznek az űrlapmezők name attribútumaival. Ha elküldte. a lap el lett-e küldve. Ez az általános eljárás az ASP. a megadott adatok megjelennek az űrlap fölött: Nézzük meg a lap kódját! Legelőször használjuk az IsPost metódust. fejezet – Munka az űrlapokkal 111 . mindegyiket egy kulccsal azonosítva.NET-ben annak kiderítésére. Futtassuk az oldalt a böngészőben. és kattintsunk a Submit gombra! Az oldal megjeleníti a megadott értékeket. és betesszük őket a változókba. (A GET-ről és a POST-ról részletesebben a 3. hogy belső lekéréssel (GET request) vagy felhasználói bevitellel (POST request) dolgozunk.

Azt is ellenőrizzük. (Ez különösen fontos lehet. A Form. mint a <b> vagy <input…> elemeket. feldolgozás előtt érvényesítjük az adatbevitelt. amíg el nem ér valamihez. amiket látni szeretnénk. században 5. és a > karaktert a &gt. ami jelzi. Érdemes mindig HTML kódolást használni a felhasználó által bevitt stringek (adatok) megjelenítésére. hogy az alkalmazottak száma érték egy szám-e. Ha ezek között valamelyik hibás. hogy a felhasználó melyik értékeket adta meg rosszul. Elfelejtenek kitölteni mezőket.HTML kódolás a megjelenésért és biztonságért A HTML-nek vannak speciális felhasználású karakterei. Adatbevitel ellenőrzése A felhasználók hibázhatnak. Ez a művelet mutatja. amit mi nem szeretnénk. vagy alkalmazottjaik száma helyett egy nevet írnak be. if (companyname. Ha nem tesszük. A böngésző ezeket a karakterláncokat helyettesíti azokkal a karakterekkel. ronthatják a weboldal megjelenését és funkcionalitását. a felhasználó nem hagyta üresen. hogy biztosak legyünk. egyszerűen eldobja a < karakterrel kezdődő karakterláncot. amit a böngésző a helyes szimbólummal helyettesít. fejezet – Munka az űrlapokkal 112 . hogyan ellenőrizzük mindhárom űrlapmezőt. kóddal. kóddal. mint a <.> és &. Például a böngésző egy HTML elem kezdeteként értelmezi a <karaktert (hacsaknem szóköz követi).IsEmpty()) { errors = true. A HTML kódolás kicseréli ezeket a lefoglalt karaktereket egy kóddal. tároljuk valahol. Például a <karaktert kicseréli a &lt. felhasználói értékelésekkel tesszük. ami veszélyeztetheti webhelyünk biztonságát vagy olyat tehet. amit újra felismer.cshtml fájlban cseréljük ki a kód első blokkját a következővel: @{ if (IsPost) { var errors = false. 1. Ha ezek a speciális karakterek megjelennek ott. hogy az űrlap helyesen lett kitöltve. Honlapépítés a XXI. a felhasználó megpróbálhat rosszindulatú scripteket vagy valami mást futtatni. ha a felhasználótól kérünk be adatokat. Ha a böngésző nem ismeri fel az elemet. és csak később jelenítjük meg azokat – ahogyan azt például blogos hozzászólásokkal. kiírunk egy hibaüzenetet. var companyname = Request["companyname"]. Hogy megbizonyosodjunk arról. Nyilvánvalóan ez néhány furcsa jelenséget okozhat a weboldalon. ahol nem várható.

mielőtt ezt megtesszük. hagyjuk az űrlapmezőket üresen. hogyha nem).<br /> } if (errors == false) { <text> You entered: <br /> Company Name: @companyname <br /> Contact Name: @contactname <br /> Employee Count: @employeecount <br /> </text> } } } Ez a kód hasonlít a lecseréltre. ténylegesen át kell alakítanunk egy integerré.<br /> } var employeecount = 0. hogy az errors változó még mindig hamis-e. miután minden teszt lefutott. Honlapépítés a XXI. @:Contact name is required. Végül. Ne feledjük. A companyname és contactname mezőket ellenőrizzük az IsEmpty funkció meghívásával. állítsuk az employeecount változót arra az értékre. Ez a funkció igaz értéket ad vissza. Akkor fogjuk megváltoztatni igazra. néhány dologban azonban különbözik.AsInt(). @:Employee count must be a number.IsInt()) { employeecount = Request["employees"]. Az első különbség az. A következő lépés. amikor a kód kiolvassa az űrlapmezők értékeit. Az AsInt funkció a következő sorban ténylegesen végrehajtja az átalakítást. if (Request["employees"]. Ha az IsInt nem ad igaz értéket.<br /> } var contactname = Request["contactname"]. Ha hamis. hogy megbizonyosodunk arról. az else blokkban lévő parancsok beállítják az errors változót igazra. Ehhez hívjuk meg az IsInt funkciót. Ha a teszt nem sikerül ( tehát az IsEmpty igaz értéket ad). hogy a felhasználó számértéket (egy integert) adott-e meg a beosztottak számának.IsEmpty()) { errors = true. } else { errors = true. és kattintsunk a Submit gombra. if (contactname. Nézzük meg a mintát: az IsInt funkció megállapítja. gyakran végzünk matematikai műveleteket a megadott számokkal. Futtassuk az oldalt a böngészőben. században 5. a kód megjeleníti a szövegdobozt. Mindazonáltal. szövegként gépeltük be. a kód megállapítja. mert amikor employeecount-nak értéket adtunk. hogy a szöveg egy egész számot tartalmaz-e. ha az általunk tesztelt érték átalakítható stringből integerbe (és természetesen hamisat. hogy megadja az errors nevű változó kezdőértékét hamisra. a kód az errors változót igazra állítja és megjeleníti a megfelelő hibaüzenetet. fejezet – Munka az űrlapokkal 113 . lefuttat egy hitelesítési tesztet.@:Company name is required. Ha az IsInt szerint az érték egy integer. ehhez pedig számmá kell alakítanunk a szövegeket. ha bármelyik érvényesítési teszt hibát jelez. A weblap hibát fog jelezni. Minden alkalommal. hogy a request objektumban az összes érték string! Bár ebben a példában ez nem igazán számít. ami tartalmazza a felhasználó által megadott értékeket.

ami az oldalon volt. Az űrlap értékeinek visszaállítása az elküldés után Amikor az előző részben az oldalt teszteltük. században 5. tehát azokat az értékeket vissza tudjuk írni az űrlapmezőkbe. fejezet – Munka az űrlapokkal 114 . Ezt könnyen orvosolhatjuk. észrevettük. amit megadtunk (nemcsak a hibás adatok) eltűntek. 1. és kattintsunk a Submit gombra! Az oldal ugyanúgy mutatja a megadott értékeket. elveszett. hogy minden érték. Ez egy fontos dolgot mutat: amikor beküldjük az oldalt. Hozzáférésünk van a beküldött értékekhez (a Request objektumban). amikor elküldtük. És mint látjuk. és az összes mezőt újra ki kellett tölteni. amikor az oldalt újra megjelenítjük. hogy ha az érvényesítés nem sikerült. Adjuk meg az értékeket az űrlap mezőkben.cshtml fájlban cseréljük ki az alapértelmezett oldalt a következő kóddal: <!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> Honlapépítés a XXI. A Form. és aztán az oldalt újra megjelenítjük. mint ahogy korábban láttuk.2. feldolgozzuk. minden. a semmiből. ez azt jelenti.

a Requset objektum értékei mind üresek. Ez rendben van. hiszen az űrlap üres. 2. töltsük ki a mezőket vagy hagyjuk őket üresen.<div> <label>&nbsp. században 5.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 Honlapépítés a XXI. Futtassuk az oldalt a böngészőben. További források angolul      1. hogy a Request objektum értékmezőit dinamikusan olvassa. Amikor az első alkalommal hívjuk le az oldalt. és kattintsunk a Submit-re! A megjelenő oldal tartalmazni fogja a megadott értékeket. fejezet – Munka az űrlapokkal 115 .</label> <input type="submit" value="Submit" class="submit" /> </div> </fieldset> </form> </body> </html> Az <input> elem value attribútumát úgy állítottuk be.

Egy relációs adatbázisban az információ logikusan szét van osztva táblázatokba. A különböző adatok különböző táblákon Honlapépítés a XXI. . ID Keresztnév 1 2 Jim Terry Vezetéknév Abrus Adams Cím 210 100th St SE Orcas WA 98031 1234 Main St. Az útmutatóból megtudhatjuk:     Hogyan készítsünk adatbázist? Hogyan csatlakozzunk egy adatbázishoz? Hogyan jeleníthetünk meg adatokat egy weboldalon? Hogyan szúrjunk be. stb… . hogy elkészítsük az órarendeket. A Database csoport. mint adatok hozzáadása. Relációs adatbázisok Sokféleképpen tudunk adatokat tárolni. és hogy hogyan jelenítsük meg ezeket az ASP. Seattle WA 99011 E-mail jim@contoso.. e-mail cím és telefonszám. Az adatbázis-kezelő szoftverek (mint például az SQL Server) támogatják azokat a hasznos parancsokat. ami egy egyedi azonosítót tartalmaz. fejezet – Műveletek adatokkal Ez a fejezet ismerteti. hogyan csináljunk egy egyszerű adatbázist. hogyan érhetők el az adatok egy adatbázisban. azonban érdemes néhány alapfogalmat megismerni.com Telefon 555 0100 555 0101 A legtöbb adatbázistáblához kell. keresztnév. módosítása és törlése. Például egy iskolai adatbázis tartalmazhat külön táblákat a diákokról és tanárokról.NET weboldalakkal. számlaszám. Az üzleti életben leggyakrabban relációs adatbázisokkal találkozhatunk. beleértve a szöveges fájlokat és táblázatokat. Például összekapcsolhatjuk a diákok és osztályok tábláit. században 6. frissítsünk és töröljünk adatbázis rekordokat? A fejezetben bemutatott szolgáltatások:    Műveletek egy Microsoft SQL Server Compact Edition adatbázissal. Minden oszlop (néha mezőként említjük) tartalmaz egy értéket az összes adattípushoz: vezetéknév. amelyek segítségével a táblák között dinamikus kapcsolatokat hozhatunk létre. Ez a tábla elsődleges kulcsaként ismert. mint a vezetéknév. és hajtsunk végre műveleteket. Ez a fejezet nem foglalkozik túl részletesen az adatbázisokkal. Bevezetés az adatbázisokba Képzeljünk el egy tipikus címjegyzéket! Minden egyes bejegyzéshez a címjegyzékben (azaz minden személyhez) tartoznak információk (adatok). Adatbázis értelmében gyakran minden sort egy-egy rekordként említünk.6. Az adatbázisokról való alapvető ismereteinkkel készen állunk megtanulni.. Egyik jellegzetes módja a szemléltetésnek egy oszlopokra és sorokra tagolt táblázat.com terry@cohowinery. Műveletek SQL lekérdezésekkel. cím. stb. és az egyes oszlopok azonosításához használjuk. Példánkban az ID nevű oszlop az elsődleges kulcs a címjegyzékünkhöz. mint például egy ügyfélszám. hogy tartozzon oszlop. keresztnév. fejezet – Műveletek adatokkal 116 .

ugyanazzal a névvel. Válasszuk az Empty Site-ot. hogy ez legyen a tábla elsődleges kulcsa. Adatbázis létrehozása Ez az eljárás megmutatja. aztán kattintsuk a Tables-re. amelynek a mérete változhat rekordról rekordra. Állítsuk az Allow Nulls-t hamisra! Ez biztosítja. hogy az oszlop adatai egy karakterláncot fognak alkotni. 7. Habár tudunk adatbázist készíteni kódok használatával is. 12. Az új Id oszlop miatt állítsuk az Is Identityt és az Is Primary Keyt True-ra (igazra)! Ahogy a neve is mutatja. 5. az Is Primary Key utasítja az adatbázist. A Column Properties-ben a (Name) mezőbe írjuk be. (Az n prefixum fejezi ki a national-t. mint az oldalunk. A szalagon kattintsunk a New Columra! 10. században 6. hogy a mező karakteres adatokat tartalmazhat. átláthatóbbá teszi az adatbázis struktúráját.sdf csomópontot. A szalagon kattintsunk a NewTable-re. és csökkenti a redundáns adatok szükségességét. A bal oldali panelon kattintsunk a Databases munkafelületre! 4.) Honlapépítés a XXI. hogyan hozzuk létre a SmallBakery nevű adatbázist az SQL Server Compact Database tervező eszközével. Így egy üres adatbázist készítettünk. 3. és kattintsunk az OK-r!. 9. hogy SmallBakery. amely bármely ábécét vagy írásrendszert képviseli—vagyis azt. jelezve azt. Indítsuk el a WebMatrixot. aztán a Site Name mezőbe írjuk be. A WebMatrix megnyitja a táblatervezőt. A szalagon kattintsunk a New Database-re. Az Is Identity utasítja az adatbázist. hogy a mező Unicode adatokat tartalmaz. 1. A bal oldali panelon bontsuk ki a SmallBaker. és hogy ez a következő sorszám legyen (kezdve az 1-gyel).való elhelyezése egyszerűbbé. sokkal tipikusabb. hogy „Id”! 8. hogy adatbázist és adatbázistáblákat tervező eszközökkel készítjük el. és a gyorsindítás lapon kattintsunk a Site From Tempalate-re! 2. 6. fejezet – Műveletek adatokkal 117 . például a WebMatrixszal. melyet a WebMatrixban találhatunk meg. hogy „Name”! 11. A lap elkészült és megjelent a WebMatrixban. A Column Properties-ben a (Name) mezőbe írjuk be. hogy a Name oszlop nem maradhat üresen. Állítsuk a Data Type-t „nvarchar”-ra! A var része a nvarchar-nak azt jelzi. hogy rendeljen automatikusan hozzá egy azonosító számot minden új rekordhoz.

Made with organic strawberries from our garden. If you like pecans.99 11.99 12. A szerkesztés ablakba vigyük be a következő adatsorokat: Name Bread Starwberry Shortcake Apple Pie Pecan Pia Lemon Pia Cupcakes Description Baked frash every day. és nevezzük el „Product”-nak! Ha elkészültünk.99 10. a táblatervezőnk így fog kinézni: Honlapépítés a XXI. Ugynezzel a leírással készítsünk egy Description nevű oszlopot! Állítsuk az Allow Nulls-t hamisra és a Data Type-ot „nvarchar”-ra! 14. A bal oldali panelon bontsuk ki a SmallBaker.99 7. az Is Identity tulajdonságát igazra állítottuk. században 6. Készítsünk egy oszlopot Price névvel! Állítsuk az Allow Nulls-t hamisra és a Data Type-t „money”-ra! 15. Made with the best lemons in the world. hogy semmit sem kell írnunk az ID oszlopba! Mikor elkészítettük az Id oszlopot. melynek következtében a rekord automatikusan kap egy azonosítót. utána kattintsunk a Data-ra! 3. Second only to your mom’s pie. Price 2. amikkel a későbbiekben dolgozni fogunk a fejezetben. Nyomjuk meg a Ctrl+S-t a tábla mentéséhez.sdf csomópontot.99 Ne feledjük. a tábla meghatározása így fog kinézni: Adatok hozzáadása az adatbázishoz Most töltsük fel néhány mintaadattal az adatbázisunkat. Your kids and the kid in you will love these. Ha befejeztük az adatok bevitelét. fejezet – Műveletek adatokkal 118 . Jobb gombbal kattintsunk a Product táblára. aztán kattintsuk a Tables-re! 2. this is for you. 1.99 9.13.

NET weboldalon.4. } </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. 1. Cseréljük ki a meglévő parancsokat a következőre: @{ var db = Database. } <!DOCTYPE html> <html> <head> <title>Small Bakery Products</title> <style> table. fejezet – Műveletek adatokkal 119 .Description</td> <td>@row. A weboldal gyökerében készítsünk egy új CSHTML oldalt ListProducts. Zárjuk be az adatbázis adatokat tartalmazó lapot! Adatok megjelentítése az Adatbázisból Ha az adatbázisunk már tartalmaz adatokat. td { border: solid 1px #bbbbbb.Query(selectQueryString)){ <tr> <td>@row.Price</td> </tr> } </tbody> </table> Honlapépítés a XXI. akkor meg tudjuk azokat jeleníteni egy ASP. border-collapse: collapse. th.Open("SmallBakery").Name</td> <td>@row. A bal oldali panelon kattintsunk a Files munkaterületre! 2. padding: 2px. var selectQueryString = "SELECT * FROM Product ORDER BY Name". században 6.html névvel! 3.Id</td> <td>@row.

Ahhoz. Az oldal törzsén a jelölés egy HTML táblát hoz létre. módosítani és kezelni. az Open eljárás nem is fog működni. ezen felül adatbázistáblákat lehet létrehozni. Minden alkalommal. (Megfigyelhetjük. használhatjuk a row. hogy egy egyéni oszlopot kapjunk egy sorból. amely lekérdezi a következő SQL Select utasítást: SELECT * FROM Product ORDER BY Name Az utasításban a Product azonosítja a táblát a lekérdezéshez. mikor átmegyünk a cikluson. ami a következőképpen fog kinézni: Strukturált lekérdező nyelv (SQL) A legtöbb kapcsolatos adatbázis az SQL nyelvet használja az adatok kezelésére egy adatbázisban. hogy a . amit a sornak szeretnénk adni. a következő rendelkezésünkre álló sor az adatbázisból a row változóban van (ezt állítottuk be a foreach segítségével). fejezet – Műveletek adatokkal 120 .Open eljárás feltételezi. További információkért tekintsük meg a fejezet végén a Csatlakozás egy adatbázishoz részt Ezek után készítünk egy kérelmet. ha megadjuk. vagy row.(Az oszlopokat egyenként. amelyet az adatok megjelenítésére fog használni. amit az adat fájlok tárolására használ. Ezután létrehozunk HTML tábla cellákat (<td> elem) minden oszlop számára. 4.Name-et. hogy az adatok betűrend szerint lesznek rendezve minden sorban a Name oszlop értékei alapján.sdf fájl a weboldalunk App_Data mappájában van. amit a lekérdezés visszaadott.) Az Order By kikötés azt jelzi. hogy a lekérdezésnek minden oszlopot vissza kell adnia.NET-ben.Description-t. Minden egyes adatsorhoz készítünk egy HTML tábla sort (<tr> elem). A <tbody> elem belsejében használjuk a foreach ciklust annak érdekében. Ez magában foglalja a parancsokat. hogy az oldalt kiválasztottuk a Files névmezőben. amit korábban készítettünk el. vesszőkkel elválasztva is ki tudtuk volna választani. A Database. században 6.) Az oldalon megjelenik egy lista. melyek segítségével lehet az adatokat lekérdezni és frissíteni. Megjegyzés: Az App_Data egy speciális mappa az ASP. Ez azt jelenti.</body> </html> Az első kódtömbben megnyitjuk a SmallBakery. vagy bármilyen nevet. A * karakter határozza meg. hogy nem kell megadni az . ha csak néhány oszlopot akarunk látni.sdf kiterjesztést – sőt. hogy egyenként megkapjunk minden adatsort. Az SQL különbözik a többi Honlapépítés a XXI. hogyan lesznek az adatok válogatva – ebben az esetben a Name oszlop szerint.sdf fájlt (adatbázis). Futtassuk az oldalt a böngészőben! (Futtatás előtt győződjünk meg róla.

melyek lejárati dátum oszlopa korábbi. január 01. a Name oszlop értékét „Croissant”-ra.html oldal használatával az oldal megjeleníti a frissített táblát.. Megjegyzés: Néhány ilyen művelethez (mint rekordok beillesztése és törlése) a folyamatnak szüksége van a megfelelő engedélyekre a művelet végrehajtásához. 1. 1. ami ellenőrzi.programozási nyelvtől (például attól is. a Description oszlopét „A flaky delight”-ra és a Price oszlopét pedig 1. században 6. ami a Name oszlop értékein alapul. mivel az SQL alapelve az. de mindegyik ugyanazt a mintát követi. hogy a Product táblának létezik ilyen oszlopa. mint ez. amely tartalmazza a kritériumnak megfelelő rekordokat. INSERT INTO Product (Name. Description. Name. amikor fontos adatbázisokhoz csatlakozunk. Használhatunk SQL parancsokat adatbázistáblák készítésére. mint 2008. Ezért kell gyakran felhasználónévvel és jelszóval hitelesítenünk magunkat. Miután beillesztettünk egy új terméket. Cseréljük ki a meglévő kódot a következőre: @{ var var var var db = Database.Open("SmallBakery"). amit a WebMatrixban használunk). A dátum HH/NN/ÉÉÉÉ formátumban kerül ide. az előző részben létrehozott ListProducts. ezek után betűrendben visszaadja az eredményeket. de beírhatjuk a helyileg használt formátumban is. Az oldal tartalmaz egy hitelesítőt. hogyan lehet létrehozni egy oldalt. Ezért kell gyakran felhasználónévvel és jelszóval hitelesítenünk magunkat. hogy hogyan teljesítsítse a feladatot. hogy hány rekordot érintett ez a parancs. Name = Request["Name"]. vagy egy üres halmazt. Eme parancs vissza fog adni egy eredményhalmazt. Például az oldalban levő kód biztosítja.00 ORDER BY Name Ha a Price értéke több. A weboldalon készítsünk egy új CSHTML fájlt InsertProducts. Az Insert Into és a Delete parancsok nem dobnak ki eredményhalmazokat. Több tucat SQL utasítás létezik.html névvel! 2. "A flaky delight". és hogy mit csinálnak: SELECT Id. Name és Price oszlopokat a rekordok közül a Product táblában. Ehelyett egy számot ad vissza. amit szeretnénk. akkkor kiválasztja az Id. hogy a felhasználók új termékeket adhassanak hozzá a Product adatbázis táblához. Price FROM Product WHERE Price > 10. (Természetesen ez azt feltételezteti. Íme néhány példa az SQL parancsok közül. hogy megmondhatjuk az adatbázisnak. amely lehetővé teszi. árak kiszámítására. hogy minden szükséges helyre kerüljön valamilyen érték. ami kifejezi. if (IsPost) { Honlapépítés a XXI. valamint számos további művelet végrehajtásához. Néhány ilyen művelethez (mint rekordok beillesztése és törlése) a folyamatnak szüksége van a megfelelő engedélyekre a művelet végrehajtásához. hogy a felhasználó által beillesztett adatok érvényesek-e az adatbázisban. Price = Request["Price"]. fejezet – Műveletek adatokkal 121 .99) Ezeket az új rekordokat illeszti be a Product táblába. ha nincs megfelelő rekord. és az adatbázis feladata kitalálni azt. mint 10. rekordok megszámlálására. amikor fontos adatbázisokhoz csatlakozunk (a WebMatrixban létrehozott tesztadatbázisunk nem ilyen). Adatok beillesztése egy adatbázisba Ez a rész bemutatja. DELETE FROM Product WHERE ExpirationDate < "01/01/2008" Ez a parancs rekordokat töröl a Product táblából. Price) VALUES ("Croissant".99-re állítja. Description = Request["Description"].

} // Read product price Price = Request["Price"]. border: 1px solid. "Product description is required. db. Price). @2)".AddError("Price". Description.IsEmpty()) { ModelState.validation-summary-errors {font-weight:bold. width: 8em. Description. Description = Request["Description"]. text-align: right.IsValid) { var insertQuery = "INSERT INTO Product (Name.// Read product name. században 6.} . if (Price. The values to assign to the // columns in the Product table are defined as parameters // with the VALUES keyword.Execute(insertQuery.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> Honlapépítés a XXI. color:red. "Product price is required.AddError("Name". font-weight:bold."). fontsize: 11pt. Name.} </style> </head> <body> <h1>Add New Product</h1> @Html.} legend {padding: 2px 4px.Redirect(@Href("/ListProducts")).IsEmpty()) { ModelState. Name = Request["Name"].IsEmpty()) { ModelState. } // Define the insert query. Response.AddError("Description".5em. margin-right: 0. "Product name is required. } } } <!DOCTYPE html> <html> <head> <title>Add Products</title> <style type="text/css"> label {float:left. Price) " + "VALUES (@0. border: 1px solid. // Display the page that lists products. if(ModelState. } // Read product description.} fieldset {padding: 1em."). @1."). width: 35em. if (Description. if (Name. fejezet – Műveletek adatokkal 122 .

mindig fogadtassunk el értékeket egy paramétereket tartalmazó SQL utasítással. amelyeket a felhasználó hagyott jóvá a Request objektummal. és megelőzhetjük az úgynevezett SQL injekciós támadást. Ezek után megkapjuk azokat az értékeket."). Price). a felhasználót a termékeket felsoroló oldalra küldjük ezzel a sorral: Honlapépítés a XXI. leírásokat és árakat vihetnek be. végezzük el ezt a vizsgálatot: if(ModelState. Name. és hozzárendelte azok értékét a helyi változókhoz. "Product name is required. @1. @1. } Ha a Name oszlop értéke üres. Price) VALUES (@0. Miután minden oszlopot ellenőriztünk. században 6. Annak ellenőrzésére. @2).<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>&nbsp.AddError("Name". mint ahogy azt láthatjuk az előző példában.AddError eljárást.. if (Name. majd hajtsuk ezt végre a következő módon: var insertQuery = "INSERT INTO Product (Name.IsEmpty()) { ModelState. A lekérdezés végrehajtásához használjuk ezt az állítást. Így a bejövő adatok ellenőrzésen esnek át. ami kiír egy hibaüzenetet! Megismételjük ezt minden oszloppal. ha ellenőrizni szeretnénk őket. Megjegyzés: Mint biztonsági óvintézkedés. Értékek beillesztéséhez hozzunk létre paraméteres helyőrzőket (@0. amikor a rosszindulatú felhasználó kártékony kódot küld a lekérdezésben. akkor használjuk a ModelState. az oldal tetején lévő kód egy kapcsolatot fog nyitni a SmallBakery. melyek segítségével a felhasználók neveket. Description. Description. amelyek tartalmazzák a helyőrzőket helyettesítő értékeket: db.sdf adatbázissal.Execute(insertQuery. fejezet – Műveletek adatokkal 123 .IsValid) { // . hogy a felhasználó minden szükséges oszlopba bevitt adatokat. } Mikor minden oszlop érvényesítve lett (nem volt üres). @2)". menjünk tovább. Miután az Insert Into utasítás végrehajtódott.. és hozzunk létre egy SQL utasítást az adatok beillesztéséhez. tegyük ezt: Name = Request["Name"].</label> <input type="submit" value="Insert" class="submit" /> </div> </fieldset> </form> </body> </html> Az oldal törzse tartalmaz egy HTML űrlapot három szövegmezővel. ezzel átadva neki a változókat. Mikor a felhasználó az Insert gombra kattint.

hogy frissítsük. Készítsünk egy EditProduct.Redirect("~/ListProducts"). (Nem készült új rekord. ami tartalmazza az ellenőrzési hibákat. akkor hagyjuk ki a beillesztést.validationsummary-errors osztályt. Nézzük meg az oldalt a böngészőben! Az oldalon megjelenik egy űrlap. A második oldal lehetővé teszi. Ehelyett van egy helperünk az oldalban.) 6. században 6. hogy a felhasználó kiválasszon egyet a változtatáshoz. Írjuk be az értékeket minden oszlopba. Adatok frissítése egy Adatbázisban Miután egy adat bekerült a táblába. Cseréljük ki a meglévő kódot a következőre: Honlapépítés a XXI. ami hasonlít a következő illusztráción lévőhöz: 4. hogy a hitelesítési összefoglaló hibák piros színnel és félkövér betűtípussal jelenjenek meg. melyek hasonlítanak az előző példában az adatok feltöltéséhez használt oldalhoz. Töltsük ki teljesen az űrlapot. hogy a felhasználó valóban szerkeszteni tudja azt. hogy olyan formátumban mutassa a . amilyenben szeretnénk. mint ahogy a következő kép mutatja.Response. de meg tudjuk határozni. ami meg is mutatja az új rekordot.validation-summary-errors nevű CSS osztálydefiníciót! Ez annak a CSS osztálynak a neve. 3. @Html. fejezetben (Biztonsági elemek és felhasználói fiókok hozzáadása) olvashatunk.cshtml nevű CSHTML fájlt a webhelyen! 2. hogyan készítsünk két oldalt. Ha a hitelesítés nem sikerült. Az első oldal a termékeket mutatja és lehetőséget ad arra. szükség lehet rá.cshtml oldal fog megjelenni. A most következő eljárás megmutatja. amely képes megjeleníteni a felgyülemlett hibaüzeneteket (ha van ilyen). fejezet – Műveletek adatokkal 124 . Kattintsunk az Insert gombra! Az oldal egy hibaüzenetet fog megjeleníteni. de a Price oszlopot hagyjuk üresen! 5. amelyet alapértelmezettként használunk a <div> elemhez. hogy kik szerkeszthetnek adatokat. Fontos: Egy élesben futó weboldalon általában korlátozzák. és el is menthesse.ValidationSummary("Errors with your submission:") Figyeljük meg. A tagok hozzáadásáról és az egyes tagok jogainak beállításairól részletesebben a 17. Ebben az esetben a CSS osztály meghatározza. majd kattintsunk az Insert-re! Most a ListProducts. 1. hogy a stílusblokk tartalmaz egy .

A href attribútum köti ki.@{ var db = Database. Mikor erre a hivatkozásra kattintunk. row.Description</td> <td>@row. th. hogy az oldal megjelenjen. td { border: solid 1px #bbbbbb. ahol módosíthatjuk a kiválasztott rekordot. padding: 2px. az oldal forrása 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> Honlapépítés a XXI.Open("SmallBakery"). hogy a HTML oldal táblája tartalmaz egy extra oszlopot egy Edit linkkel.Price</td> </tr> } </tbody> </table> </body> </html> Az egyetlen különbség a mostani és a korábbi ListProducts.cshtml oldal között. átirányít minket az UpdateProducts. row. ami elkészíti az Edit linket: <a href="@Href("/UpdateProducts". Nézzük meg a kódot. } <!DOCTYPE html> <html> <head> <title>Edit Products</title> <style type="text/css"> table.Id)">Edit</a></td> A kód elkészít egy HTML rögzítést (egy <a> elemet). fejezet – Műveletek adatokkal 125 .Name</td> <td>@row.Query(selectQueryString)) { <tr> <td><a href="@Href("/UpdateProducts". aminek a href tulajdonsága dinamikusra van állítva. Mikor fut az oldal.cshtml oldalra (amit ezt követően fogunk elkészíteni).</th> <th>Name</th> <th>Description</th> <th>Price</th> </tr> </thead> <tbody> @foreach (var row in db. mikor a felhasználó rákattint a hivatkozásra. var selectQueryString = "SELECT * FROM Product ORDER BY Name". században 6. border-collapse: collapse. Ugyancsak ez adja át az aktuális sor Id értékét a linknek. } </style> </head> <body> <h1>Edit Small Bakery Products</h1> <table> <thead> <tr> <th>&nbsp.Id)">Edit</a></td> <td>@row.

Open("SmallBakery"). "Product name is required. } Price = Request["Price"].Figyeljük meg.cshtml nevű CSHTML fájlt a weboldalon! 5. a szerkesztés alatt álló termékszám átadásra kerül az URL-be. Például a kód az oldalon gondoskodik arról. if (String.AddError("Name". hogy minden szükséges oszlopba kerüljön érték. hogy a href tulajdonság UpdateProducts/n-re lett állítva. Nézzük meg az oldalt egy böngészőben! Az adatok a következő képhez hasonlóan fognak megjelenni: Ezek után létrehozzuk az oldalt. } Description = Request["Description"]. a megjelenő URL ehhez hasonlóan fog kinézni: http://localhost:18816/UpdateProducts/6 Más szavakkal. fejezet – Műveletek adatokkal 126 . if (String. Cseréljük ki a meglévő kódokat a következőre: @{ var db = Database. 4. amin a felhasználó ténylegesen frissíteni tudja az adatokat.Description.Price.IsNullOrEmpty(Price)) { Honlapépítés a XXI. században 6.AddError("Description".QuerySingle(selectQueryString. amely ellenőrzi a felhasználó által bevitt adatokat. "Product description is required.IsNullOrEmpty(Description)) { ModelState. ProductId).Redirect(@Href("/EditProducts")). if (String. 3.IsEmpty()) { Response. var selectQueryString = "SELECT * FROM Product WHERE Id=@0". if (IsPost) { Name = Request["Name"]. if (ProductId. var Price = row. ahol n a termékszám. var Description = row.Name.IsNullOrEmpty(Name)) { ModelState. var Name = row. A frissítési oldal tartalmaz egy érvényesítést.")."). Készítsünk egy UpdateProducts. } var row = db. Mikor a felhasználó valamelyik hivatkozásra kattint ezek közül. var ProductId = UrlData[0].

"Product price is required.5em. fontsize:11pt. Name. text-align: right.</label> <input type="submit" value="Update" class="submit" /> </div> </fieldset> </form> </body> </html> Honlapépítés a XXI.validation-summary-errors {font-weight:bold.} </style> </head> <body> <h1>Update Product</h1> @Html.Redirect(@Href("/EditProducts")). } if(ModelState. db. fejezet – Műveletek adatokkal 127 . border: 1px solid."). Description. width: 8em. Description=@1.IsValid) { var updateQueryString = "UPDATE Product SET Name=@0.Execute(updateQueryString. border: 1px solid. } } } <!DOCTYPE html> <html> <head> <title>Add Products</title> <style type="text/css"> label { float: left.} fieldset { padding: 1em.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>&nbsp.} .ModelState.} legend { padding: 2px 4px. Price=@2 WHERE Id=@3" .AddError("Price". Response. font-weight: bold. margin-right: 0. Price. században 6. width: 35em. ProductId). color:red.

Hogy megérkezzen a termék rekordja. Ahhoz.) Ahhoz. Ha a hitelesítés sikerrel járt.@2 és így tovább. Description. Price=@2. hogy a felhasználót visszairányítsuk a szerkesztési oldalra.Redirect(@Href("~/EditProducts")). amely csak egy rekordot fog adni: var row = db. WHERE ID=@3 Egy SQL Update utasításban meghatározzuk minden oszlopnak. Honlapépítés a XXI. mely megfelel az SQL utasításban lévő paraméterek sorrendjének: db. Response. var Description = row.Price.Execute módszert használjuk. Miután a rekord megjelent. ProductId). hogyan frissítsen.Execute(updateQueryString.Description. hogy megjelenjen a termék. és állítsa be annak értékét. Az űrlap utasításában ezek az értékek jelennek meg automatikusan az egyes szövegmezőkben. ki tudjuk olvasni az értéket. használjuk a következő szintaxist: var ProductId = UrlData[0]. és azt átadja a helyi változóknak. és ahol a felhasználó szerkeszteni tudja azt. Miután az Update utasítás végrehajtásra került. Az egyetlen sor visszakerül a row változóba. a biztonság kedvéért mindig fogadtassuk el az értékeket egy paramétereket tartalmazó SQL utasítással!) Amikor a db. használjuk ezt az SQL utasítást: SELECT * FROM Product WHERE Id=@0 Ez ki fogja választani azt a terméket. hogy minden oszlop ki van-e töltve.Az oldal törzse tartalmaz egy HTML űrlapot. mint az URL része. Mikor a felhasználó elküldi az űrlapot az Update gombra kattintva. (Mivel az Id az elsődleges kulcs.Name. majd elraktározza azokat a változókban és ellenőrzi. amelyik frissítésre kerül. fejezet – Műveletek adatokkal 128 . ProductId). használjuk a QuerySingle metódust. Kivehetünk adatokat minden egyes oszlopból. században 6. Name. az if(IsPost) tömbben lévő kód lefut. Ebben a kódban az értékek meg vannak határozva a paraméteres helyőrzőkkel: @0. amelyek tartalmazzák az értékeket abban a sorrendben. és ezen felül egyéni is. ahol egy termék van kijelezve. amelyet ennek a Select utasításnak adtunk meg. egyszerre csak egy termék rekordot lehet kiválasztani ezzel az eljárással. a következő beágyazott kódot használva: <input name="Name" type="text" size="50" value="@Name" /> A kód ezen része jelzi ki azt a rekordot. Ez megkapja az értékeket a Request objektumtól. Price. @1. (Mint korábban említettük.QuerySingle(selectQueryString. mint ez: var Name = row. a következő módszert használjuk annak érdekében. var Price = row. a kód a következő SQL Update utasítást hozza létre: UPDATE Product SET Name=@0. ami át lett adva az oldalnak. amelyik a @0 paraméter helyére került. amelyiknek az Id-je megegyezik azzal az értékkel. hogy megkapjuk azt az Id értéket. átadjuk a változókat. Description=@1. a felhasználó szerkeszteni tudja az egyes oszlopokat.

8. az a frissített adatok listája az adatbázisban. } </style> </head> <body> <h1>Delete a Product</h1> <form method="post" action="" name="form"> <table border="1"> <thead> <tr> <th>&nbsp. Az első oldal az.cshtml oldalt (ne az update oldalt). Fontos: Egy élesben futó weboldalon általában korlátozzák. fejezet – Műveletek adatokkal 129 . A törölendő rekord ezután egy második oldalon fog megjelenni. Adatok törlése egy Adatbázisból Ez a rész bemutatja. hogy egy terméket szerkeszthessünk! Megjelenik az UpdateProducts. majd kattintsunk az Edit-re. Cseréljük ki a meglévő kódot a következőre: @{ var db = Database. fejezetben (Biztonsági elemek és felhasználói fiókok hozzáadása) olvashatunk. hogyan tud a felhasználó egy terméket törölni a Product adatbázistáblából. hogy kik szerkeszthetnek adatokat. Készítsünk egy ListProductsForDelete. td { border: solid 1px #bbbbbb. században 6.Amit a felhasználó látni fog.cshtml és a kiválasztott terméket fogja mutatni. A tagok hozzáadásáról és az egyes tagok jogainak beállításairól részletesebben a 17. ahol a felhasználó kiválasztja a törölni kívánt rekordot. A példa két oldalból áll. border-collapse: collapse. } <!DOCTYPE html> <html> <head> <title>Delete a Product</title> <style> table. Végezzük el a változtatást. padding: 2px. 1. Futtassuk az EditProducts. ami a törlés megerősítésére kéri fel a felhasználót.Open("SmallBakery"). th. és egy másik termék szerkesztésére is lehetősége nyílik. de most már a frissített adatokkal. 6. Mentsük el az oldalt! 7. majd kattintsunk az Update-re! A termékek listáját fogja mutatni.</th> <th>Name</th> <th>Description</th> <th>Price</th> Honlapépítés a XXI. var selectQueryString = "SELECT * FROM Product ORDER BY Name".cshtml nevű CSHTML fájlt a weboldalon! 2.

Készítsünk egy másik CSHTML fájlt DeleteProducts.Description</td> <td>@row. hogy egy Edit gomb jelenne meg minden terméknél. A Delete link a következő beágyazott kód az utasításban: <a href="@Href("~/DeleteProduct".cshtml névvel.Description <br /> Honlapépítés a XXI. ami hasonlóan néz ki. db.Id)">Delete</a> Ez kiad egy URL-t.QuerySingle("SELECT * FROM PRODUCT WHERE ID = @0".Redirect("/ListProductsForDelete").IsEmpty()) { Response.</tr> </thead> <tbody> @foreach (var row in db.Name</td> <td>@row. } } <!DOCTYPE html> <html <head> <title>Delete Product</title> </head> <body> <h1>Delete Product . ProductId).Name <br /> Description: @prod. row. row. ProductId).IsEmpty()) { var deleteQueryString = "DELETE FROM Product WHERE Id=@0".Price</td> </tr> } </tbody> </table> </form> </body> </html> Az oldalunk hasonló az EditProducts. 3. most egy Delete linket találunk.Confirmation</h1> <form method="post" action="" name="form"> <p>Are you sure you want to delete the following product?</p> <p>Name: @prod. fejezet – Műveletek adatokkal 130 . ha egy felhasználó a hivatkozásra kattint: http://<server>/DeleteProduct/4 Az URL előhívja a DeleteProducts.cshtml oldalhoz. } var prod = db.Redirect(@Href("/ListProductsForDelete")). amit korábban készítettünk.Open("SmallBakery"). Mentsük el a fájlt.Execute(deleteQueryString.Id)">Delete</a></td> <td>@row. if( IsPost && !ProductId. Azonban ahelyett.cshtml oldalt (amit a következőkben fogunk elkészíteni) és továbbadja a termék Id-jét a törléshez (itt a négyest). if (ProductId.Query(selectQueryString)) { <tr> <td><a href="@Href("/DeleteProduct". és cseréljük ki a meglévő tartalmat a következőre: @{ var db = Database. var ProductId = UrlData[0]. században 6. de hagyjuk nyitva! 4. Response.

ne a GET művelethez. majd visszairányítja a felhasználót a lista oldalára. A connection string információkat tartalmaz az adatbázishoz való csatlakozáshoz. Ez egy fontos biztonsági lépés. A tényleges törlést a következő kód hajtja végre.Price: @prod. db. A kód ellenőrzi azt is. Ez magában foglalhatja a fájl elérési útját. Csatlakozás egy adatbázishoz Kétféle módon csatlakozhatunk egy adatbázishoz. ami törli a megadott rekordot. hogy megerősítsük a rekord törlését. Amikor kritikus műveleteket végzünk. majd az oldal frissül az új terméklistával. és a Honlapépítés a XXI.cshtml oldalt a böngészőben! 6. Az Open eljárás azt feltételezi.Execute(deleteQueryString. Az első. Ha a webhelyünkben a GET művelettel elvégezhető ilyen művelet. Ennek a mappának számos jellemzője van. Például rendelkezik a megfelelő jogosultságokkal. hogy kattintson egy gombra a törlés megerősítéséhez. században 6. Response. vagy tartalmazhatja az SQL Server adatbázis nevét egy helyi vagy távoli szerveren. a WebMatrix nem teszi lehetővé a hozzáférést a fájloknak ehhez a mappához. Kattintsunk a Delete gombra! A termék rekordja törlődik. hogy használjuk a Database. hogy használjunk egy úgynevezett connection stringet.sdf fájl a weboldal App_Data mappájában van. A jóváhagyó oldallal beépített plusz lépcső a POST módszerrel hagyja jóvá ezeket a kritikus műveleteket.cshtml oldal.Price</p> <p><input type="submit" value="Delete" /></p> </form> </body> </html> Az oldal ez után megkéri a felhasználót.Redirect(„/ListProductsForDelete”). hogy ez egy POST művelet.IsEmpty()) { var deleteQueryString = „DELETE FROM Product WHERE Id=@0”. mindig a POST művelethez kössük.sdf kiterjesztést): var db = Database. és hogy az adott ID nem üres-e: if( IsPost && !ProductId. Kattintsunk a Delete linkre valamelyik termék mellett! Ekkor megjelenik a DeleteProducts. fejezet – Műveletek adatokkal 131 . 7. hogy a . 5. így megelőzve a véletlen adatvesztést. ProductId). hogy engedje a weboldalnak az adatok olvasását és írását. Futtassuk a ListProductsForDelete. például rekordok módosítása vagy törlése. és mint biztonsági intézkedés. kimondottan az adatok tárolására tervezve.Open eljárást és meghatározzuk az adatbázis nevét (lehagyva a .Open("SmallBakery"). } A kód egy SQL utasítást futtat. A második út. bárki egy http://<server>/DeleteProduct/4 Url beírásával törölhetne adatokat az adatbázisból.

Ellenőriztessük a rendszergazdával a szükséges értékeket!) A Database.OpenConnectionString ha közvetlen a További forrás angolul SQL Server Compact Honlapépítés a XXI. és teszteljük az oldalunkat. melyiket használja.Open("SQLServerConnectionString").config fájlban tárolt neve helyett. A következő példa bemutatja. például egy tárhelyet szolgáltató oldalon. használhatjuk a Web-config fájlt a weboldal gyökerében konfigurációs információk tárolására. amelyet a tárhely szolgáltató adott nekünk. Database. hogy elfogadjon mind . mikor nincsen hozzáférésünk a connection stringhez (vagy a benne levő értékekhez. Szükségünk lehet arra. században 6. hogyan csatlakozhatunk az adatbázishoz az előző példában szemléltetett connection stringet használva. amire az webhelyünknek szüksége lehet. hogy elfogadjon egy adatbázis nevet vagy egy connection stringet. Ahogy a neve is mutatja. (Hogyha az adatokat egy központilag kezelt SQL Serveren tároljuk. aminek ugyanaz a neve.szerverhez való csatlakozáshoz szükséges felhasználónevet és jelszót.config fájlban tárolt connection string nevet.sdf fájlt. mikor felvonultatjuk (közzétesszük) a weboldalunkat. (A felhasználónév és jelszó értékeinek nem feltétlenül kell megegyeznie a saját Windows-os hitelesítő adatainkkal vagy azzal az értékkel.sdf fájl). Egy példa a Web. mikor közzétesszük. amelyik valahol a szerveren fut (nem pedig egy helyi . mivel lehetővé teszi. a Database. fejezet – Műveletek adatokkal 132 . mikor az oldalunkat egy gyártási szerverre visszük fel. Használhatunk egy App_Data mappában lévő . hogy megváltoztattuk volna a kódot. hogy csatlakozhassunk a szervereikre. beleértve bármilyen connection stringet.config fájlban lévő connection stringre: <?xml version="1. Gyakran a WebMatrixban a connection string egy Web.config fájlból. } Ahogy megfigyelhettük. connection stringgel szeretnénk dolgozni.sdf fájlunknak.Open eljárás lehetővé teszi. Végezetül. vagy a Web. Ez igen hasznos.sdf fájl neve).config nevű XML fájlba van elraktározva. mint ahogy ebben a fejezetben le volt írva. mint a . hogy behelyettesítsük a megfelelő neveket a myServer és myDatabase helyére.sdf adatbázis fájl nevet.pwd=password" providerName="System.uid=username.Open-t. akkor mindig a connection stringet használjuk.Open ejárás rugalmas. használhatjuk a connection stringet a Web.SqlClient" /> </connectionStrings> </configuration> A példában a connection string rámutat az SQL Server egyik példányában lévő adatbázisra. mint a . @{ var db = Database.0" encoding="utf-8" ?> <configuration> <connectionStrings> <add name="SQLServerConnectionString" connectionString= "server=myServer. Ez hasznosnak bizonyulhat olyan szituációkban. és majd kitalálja. hogy megadjuk az adatbázis-kapcsolat információit. Ezután. amíg az oldal fut. és megadjuk az SQL Server belépési értékeit a felhasználónévnek és jelszónak.database=myDatabase.Data. használhatjuk a eljárást és megadhatjuk az aktuális connection stringet a Web. A legtöbb esetben azonban használhatjuk a Database. de az a tárhely szolgáltató adatbázisára mutat – mind anélkül.

Adatok megjelenítése a WebGrid Helper használatával Ez az feladat megmutatja nekünk. } <!DOCTYPE html> <html> <head> <title>Displaying Data Using the WebGrid Helper</title> </head> <body> <h1>Small Bakery Products</h1> <div id="grid"> @grid. 1.Query(selectQueryString). hogyan tároljunk adatokat egy adatbázisban. amit az 5. fejezet – Műveletek adatokkal című fejezetben készített weboldalt. WebGridBasic.Open("SmallBakery") . grid = new WebGrid(data). Lapozás hozzáadása a gridhez. Helyettesítsük a meglévő kódokat a következővel: @{ var var var var db = Database. A fejezetben bemutatott az ASP. és hogyan dolgozzunk velük. fejezet elején készítettünk el. Azonban van egy könnyebb mód is az adatok megjelenítésének – használjuk a WebGrid helpert! A helper le tud renderelni egy HTML táblát az adatok kijelzésére. A helper támogatja a formázási beállításokat. 2. Ha nem csináltuk végig az előző fejezetben leírtakat. Nyissuk meg az 6. hogy létrehozzuk a SmallBakery.cshtml nevű CSHTML fájlt a weboldalon! 3. hogy lapozzon a hosszú adatsorok között. selectQueryString = "SELECT * FROM Product ORDER BY Id". és lehetővé teszi a felhasználónak. Készítsünk egy új. hogyan jelenítsünk meg adatokat a WebGrid helperben annak legegyszerűbb beállításait használva. és hogy rendezze az adatokat az oszlopok fejléceire kattintva. fejezet – Adatok megjelenítése gridekben Az előző fejezetben megtanultuk. században 7.sdf adatbázis fájlt. nem kell mindet pótolnunk. csupán arra van szükség.NET weboldal funkció:  A WebGrid helper A WebGrid Helper Az előző fejezetben saját kezűleg jelenítettünk meg adatokat az oldalon. hogyan jelenítsünk meg adatokat egy HTML táblázatban. data = db. Az útmutatóból megtudhatjuk:    Hogyan jelenítsünk meg adatokat egy weboldalon a WebGrid helper használatával? A griden megjelenített adatok formázása. fejezet – Adatok megjelenítése gridekben 133 .GetHtml() </div> </body> </html> Honlapépítés a XXI. Ennek a fájlnak a weboldal App_Data mappában kell lennie. úgynevezett griden.7. Ebben a fejezetben megtudhatjuk.

sdf adatbázist. lehetőségünk van az oszlopnevekre kattintani. ami a WebGrid objektum létrehozásakor készült. Egységes stílust ad az egész gridnek. majd egy SQL Select utasítást hoz létre: SELECT * FROM Product ORDER BY Id A data nevű változót az SQL Select utasítás által szerzett értékek töltik fel. században 7. ami az SQL Select utasítás által kiválasztott adatokat tartalmazza: Figyeljük meg. a WebGrid helper rengeteg műveletet végrehajt.GetHtml() A grid változó az az érték. A helper emellett még számos dologra képes. fejezet – Adatok megjelenítése gridekben 134 . A fejezet hátralévő részéből megtudhatjuk.A kód először megnyitja a SmallBakery. hogy melyik adatoszlopok jelenjenek meg és milyen formázás mellett. mikor kijelzi (és szétválogatja) az adatokat. hogy rendezzük a tábla adatait a megfelelő oszlop szerint. Az adatok kijelzését a következő úton szabhatjuk testre: Honlapépítés a XXI. ha a lehető legegyszerűbb kódot is használjuk. Futtassuk az oldalt! (Futtatás előtt győződjünk meg arról. 4. Az oldal törzsében a WebGrid-et használva rendereljük az adatokat. ezt a kódot alkalmazva: @grid. amit az SQL lekérdezése kiadott.Query(selectQueryString). var grid = new WebGrid(data). Oszlopok kiválasztása és formázása megjelenítéshez Alapértelmezetten a WebGrid helper minden oszlopot megjelenít. A WebGrid helpert ezek után új gridek készítésére használjuk: var data = db. A kód egy új WebGrid objektumot hoz létre és hozzárendeli a grid változóhoz. hogyan állítsuk be a WebGrid helpert. Lapozzon adatokon keresztül. Mint láthatjuk. hogy végrehajtsa a következőket:    Meghatározza. hogy az oldal ki van választva a Files névmezőben!) A WebGrid helper elkészít egy HTML táblát.

Columns( grid. } <!DOCTYPE html> <html> <head> <title>Displaying Data Using the WebGrid Helper (Custom Formatting)</title> <style type="text/css"> . format:@<i>@item.  Meghatározhatjuk.product { width: 200px.GetHtml( columns: grid.Column("Price".Column("Description".cshtml nevű oldalt a webhelyen! 2.Column("Name". A következő kód mutatja meg. Itt meghatározhatunk minden egyes megjeleníteni kívánt oszlopot a grid. Description és Honlapépítés a XXI.Column("Price". Ebben a gyűjteményben meghatározhatjuk.Column objektummal.Open("SmallBakery") . melyik oszlopot foglalja magában. melyik oszlopok jelenjenek meg és milyen sorrendben: @grid. WebGridColumnFormat. style: "product"). hogy hogyan jelenhetnek meg az adatok – írjuk ki például a pénznem jelét (például a $ jelet) a pénzmennyiségeket jelző oszlopokban! Ebben az eljárásban az oszlopok különálló formázására fogjuk használni a WebGrid helpert.Description</i>).Query(selectQueryString). be kell foglalnunk a columns paramétert a WebGrid helper GetHtml metódusában. "Product". Ebben a példában a WebGrid objektum három oszlopot jelenít meg: Name. hogy amikor a grid-et lerendereljük a oldal törzsében a grid. grid. fejezet – Adatok megjelenítése gridekben 135 . font-weight:bold.Column("Description". grid = new WebGrid(data). format:@<i>@item. melyik oszlopok jelenjenek meg. az oszlop nevének beírásával. format:@<text>$@item. században 7. melyik oszlopokat jelenítse meg a helper és milyen sorrendben. Ezt akkor használhatjuk.GetHtml( columns: grid. Helyettesítsük a meglévő kódokat a következővel: @{ var var var var db = Database. annyi különbséggel. hogy melyik oszlop jelenjen meg és hogyan. ha a lekérdezett adatok csak egy részét szeretnénk megjeleníteni. grid.Column("Name". hogyan határozzuk meg.Description</i>).Columns( grid. Meghatározhatjuk a formázási utasításokat. style: "product").} </style> </head> <body> <h1>Small Bakery Products</h1> <div id="grid"> @grid. grid.Price</text>) ) ) </div> </body> </html> Ez a példa hasonlít az előzőhöz.Price</text>) ) Hogy megmondjuk a helpernek. "Product". Hozzunk létre egy új. grid. data = db. akkor meghatározzuk.GetHtml segítségével. 1. format:@<text>$@item. selectQueryString = "SELECT * FROM Product ORDER BY Id".

valamint betűtípusát.Price. fejezet – Adatok megjelenítése gridekben 136 .Column("Name". Futtassuk az oldalt egy böngészőben! Ebben az esetben csak három oszlopot láthatunk. amelyek nem szerepeltek a lekérdezésben. 3. A példában a kód a Name oszlopot jeleníti meg a következő kódot használva: grid. A Name oszlop testreszabja az oszlop fejlécét.Description</i>) Ez határozza meg a helpernek.) Vegyük észre. Itt olyan formátumot állít be. "Product". hogy megjelenítünk egy oszlopot. A Description oszlophoz a példa a következő kódot használja: grid.Column("Price". hogy rendereljen és hozzáadjon egy dollárjelet ($) az oszlop értéke elé. A Description oszlop dőlt és a Price oszlop most már tartalmaz egy dollár jelet.Column("Description". hogyan határozhatjuk meg a format tulajdonságait: grid. (Ezeknek az oszlopoknak jelen kell lenniük az SQL lekérdezés eredményei között – a helper nem tud megjeleníteni olyan oszlopokat. méretét.Description</i> A Price oszlop példája további változatait mutatja meg annak.Price</text>) Ez ismét meghatároz néhány HTML utasítást. format:@<i>@item. format:@<text>$@item. században 7. továbbíthatunk további formázási utasításokat is. Honlapépítés a XXI. ha az túl hosszú lenne: @<i>@item. ami sortöréssel több sorba rendezi a szöveget. hogy a Description oszlopot jelenítse meg. style: "product") Ez a következőket határozza meg a WebGrid számára:    Mutassa a Name adatoszlop értékeit! Írja ki a „Product” stringet az oszlop fejléceként az eredeti helyett (ami ebben az esetben „Name” lenne)! Alkalmazza a „product” nevű CSS stílusosztályt! A példaként vett oldal utasításaiban a CSS osztály az oszlopok szélességét (200 pixel) és a betűtípusát (félkövér) állítja be. hogy amellett.

grid. data = db.Column("Description". font-weight: bold.Price</text>) ) ) </div> </body> </html> Ez a kód az előző példára épül. selectQueryString = "SELECT * FROM Product ORDER BY Id".Query(selectQueryString). } <!DOCTYPE html> <html> <head> <title>Displaying Data Using the WebGrid Helper (Custom Table Formatting)</title> <style type="text/css"> . format:@<i>@item. grid. megmutatva.Columns( grid. hogy meg tudjuk határozni a különálló oszlopoknak.GetHtml hozzárendeli a stílusokat a grid különböző elemeihez a tableStyle. defaultSort: "Name"). format:@<text>$@item. . fejezet – Adatok megjelenítése gridekben 137 . században 7. hogyan jelenjenek meg. grid = new WebGrid(source: data.valamint alternatingRowStyle paramétereket használva. "Product".head { background-color: #E8E8E8. style: "product"). head.grid { margin: 4px.grid td { border: 1px solid #C0C0C0. Helyettesítsük a meglévő kódokat a következővel: @{ var var var var db = Database. headerStyle. width: 600px.} </style> </head> <body> <h1>Small Bakery Products</h1> <div id="grid"> @grid.Column("Price". hogyan nézzen ki a lerenderelt HTML tábla.cshtml nevű lapot a webhelyen! 2. 1. color: #FFF.Description</i>). } .product { width: 200px. melyek az egész táblára érvényesek. } . headerStyle: "head". Tekintsük meg az oldalt egy böngészőben! Ebben az esetben a grid különböző stílusok használatával jelenik meg. formázhatjuk az egész gridet is.A teljes grid formázása Amellett. Ehhez meg kell határoznunk CSS osztályokat. font-weight:bold. grid td. alternatingRowStyle: "alt". alt). Ezek után a grid. } .Column("Name".alt { background-color: #E8E8E8. 3. padding: 5px. grid th. } . amik kikötik. border-collapse: collapse.grid th. columns: grid. Készítsünk egy WebGridTableFormat. hogyan készítsünk új stílus osztályokat ( grid.Open("SmallBakery").GetHtml( tableStyle: "grid". például a páratlan sorok színezése: Honlapépítés a XXI. color: #000.

században 7. color: #FFF. .grid td { border: 1px solid #C0C0C0.head { background-color: #E8E8E8. hogy egyszerre kijeleztetnénk minden adatot a grid-en. } .alt { background-color: #E8E8E8. padding: 5px. rowsPerPage: 3). Kevés adat mellett a lapozás nem olyan fontos.} </style> </head> <body> <h1>Small Bakery Products</h1> Honlapépítés a XXI. } . } .Adatok lapozása Ahelyett. grid = new WebGrid(source: data. fejezet – Adatok megjelenítése gridekben 138 . } <!DOCTYPE html> <html> <head> <title>Displaying Data Using the WebGrid Helper (with Paging)</title> <style type="text/css"> . lehetővé tesszük a felhasználó számára. } . border-collapse: collapse. width: 600px. Készítsünk egy WebGridPaging.cshtml nevű oldalt! 2. meg kell határoznunk további paramétereket a WebGrid helpernek.Open("SmallBakery"). font-weight: bold.product { width: 200px. Helyettesítsük a meglévő kódokat a következővel: @{ var var var var db = Database. Hogy hozzáadjuk a lapozás lehetőségét a lerenderelt grid-hez.Query(selectQueryString). color: #000. hogy lapozhasson az adatok között.grid th. selectQueryString = "SELECT * FROM Product ORDER BY Id".grid { margin: 4px. font-weight:bold. data = db. több száz vagy ezer adatsoros gridek esetén azonban jól jöhet. defaultSort: "Name". 1.

3. fejezet – Adatok megjelenítése diagramokon Angolul: ASP. További források 5.<div id="grid"> @grid. aminek segítségével átlapozhatunk a többi adatsorhoz.Columns( grid. headerStyle: "head". Ez a paraméter lehetővé teszi számunkra.NET Web Pages with Razor Syntax Reference Honlapépítés a XXI.Description</i>).Column("Price". amikor a WebGrid objektum készül. Nézzük meg az oldalt egy böngészőben! Figyeljük meg. columns: grid. alternatingRowStyle: "alt". Automatikusan engedélyezve lesz a lapozás onnantól. hogy beállítsuk a megjelenítendő sorok számát. style: "product").Column("Description". grid. fejezet – Műveletek adatokkal 8. hogy beillesztettük ezt a paramétert.Column("Name". format:@<i>@item. hogy csak három sor jelenik meg. A grid alján láthatjuk a kezelőfelületet.GetHtml( tableStyle: "grid". fejezet – Adatok megjelenítése gridekben 139 .Price</text>) ) ) </div> </body> </html> A kód kibővíti az előző példát egy rowsPerPage paraméter hozzáadásával. format:@<text>$@item. században 7. "Product". grid.

A Chart helper Ha grafikus formában akarunk adatokat megjeleníteni. hogy kell adatokat megjeleníteni manuálisan és táblázatként. mint például az árfolyamdiagram. Az útmutatóból megtudhatjuk:    Hogyan ábrázoljunk adatokat diagramokon? Hogyan formázzuk a diagramokat a beépített témák segítségével? Hogyan mentsük el a diagramokat . kördiagram és több speciális diagram. Számos különféle lehetőséget kínál a formázásra és feliratozásra. A Chart helper több mint 30 féle grafikont tud készíteni. ami különféle grafikonokon jeleníti meg az adatokat. akkor erre használhatjuk a Chart helpert. Ebben a fejezetben megtanuljuk. Területdiagram Sávdiagram Oszlopdiagram Grafikon Honlapépítés a XXI. melyeket már a Microsoft Excelből vagy egyéb alkalmazásokból ismerhetünk. grafikon.8.NET programozási funkciókat ismerhetjük meg a fejezetben:  A Chart helper. például a területdiagram. fejezet – Adatok megjelenítése diagramokon 140 . fejezet – Adatok megjelenítése diagramokon Az előző fejezetekben megtanulhattuk. sávdiagram.és hogyan rakjuk őket a gyorsítótárba a jobb teljesítmény elérése érdekében? Az alábbi ASP. többek között azokat a típusokat is. oszlopdiagram. hogyan jeleníthetjük meg az adatokat diagramokon. században 8. A Chart helper létrehoz egy képet.

vagy egy XML fájl adataiból is. hogyan jeleníthetjük meg a diagramot az oldalon. például jelmagyarázatokat. egy tömbel több hasonló elemet tárolhatunk egy egyszerű változóban. tengelyeket. hogyan csinálhatunk diagramot a tömbökben tárolt adatokból az alap diagramtípus használatával.fejezetben (Bevezetés a WebMatrixba és az ASP. melyekből a diagramot készítjük. Azt is megmutatja. 1. Diagram készítése az adatokból Az adatok. fejezet – Adatok megjelenítése diagramokon 141 .NET weboldalakba) olvashattuk.cshtml névvel! Honlapépítés a XXI. Ez a fejezet bemutatja.Kördiagram Árfolyamdiagram A diagram elemei A diagramok adatokat és számos egyéb elemet tartalmaznak. A következő képen láthatjuk ezeket az elemeket. származhatnak egy tömbből. hogyan állíthatjuk be ezeket az elemeket. Ezeket a tömböket használhatjuk arra. melyek a Chart helper segítségével testreszabhatóak. Hozzunk létre egy új fájlt ChartArrayBasic. adatsorokat. Ez az eljárás megmutatja. stb. hogy a diagramhoz szükséges adatokat tárolják. Tömb használata Ahogyan a 2. században 8. egy lekérdezés eredményeiből.

} A kód először létrehoz egy új diagramot. A Write metódus hozza létre a diagramot. Futtassuk az oldalt a böngészőben! (Mielőtt futtatjuk. ha még nincs ilyen mappa! 2. mivel nem adtuk meg a diagram típusát. Ebben a példában az AddSeries metódus name. "3" }) . Hozzunk létre egy új fájlt ChartDataQuery. Ez az eljárás megmutatja. Ebben a példában. Hozzunk létre egy App_Data mappát a weboldal gyökérkönyvtárában.AddTitle("Chart Title") . "5". Adatok hozzáadásához az AddSeries metódust alkalmazzuk.sdf nevű adatbázisfájlt! 3. "Julie". és beállítja annak szélességét és magasságát. fejezetben létrehozott SmallBakery.cshtml névvel! 4. "Dave" }. Cseréljük ki a meglévő kódot a következőre: Honlapépítés a XXI.AddSeries( name: "Employee". Az AddTitle metódussal megadhatjuk a diagram címét. "Andrew". 3. 1. fejezet – Adatok megjelenítése diagramokon 142 . Az xValue paraméter egy olyan sor adatot tartalmaz. xValue: new[] { "Peter". amelyek a diagram vízszintes tengelyén láthatók. és a lekérdezés eredményéből származó kiválasztott adatokat felhasználhatjuk. Cseréljük ki a meglévő kódot a következőre: @{ var myChart = new Chart(width: 600. "6". hogyan olvassuk le és hogyan jelenítsük meg az előző példában létrehozott adatokat. height: 400) . futtathatunk egy adatbázis lekérdezést.Write(). ezért a Chart helper oszlopdiagramot készít alapbeállításként. Az yValues pedig egy olyan sor adatot tartalmaz. A name paraméter a diagram jelmagyarázatában jelenik meg. és yValues paramétereit használjuk. "Mary". ellenőrizzük. xValue. melyek a diagram függőleges irányú pontjait adják meg. A mappába másoljuk be az 4.2. Adatbázislekérdezés használata a diagram adataihoz Ha a diagramhoz szükséges adatok egy adatbázisban vannak. hogy az oldal a Files munkaterületen ki van-e választva!) Ekkor a böngésző megjeleníti a diagramot. században 8. yValues: new[] { "2". "4".

xValue: data.DataBindTable(data. } A kód először megnyitja a SmallBakery adatbázist.Open("SmallBakery"). fejezet – Adatok megjelenítése diagramokon 143 .AddSeries("Default". xField: "Name". században 8. A kód létrehoz egy új diagramot. Ez után a kód egy SQL lekérdezést futtat. Például a DataBindTable metódus ilyen kódja helyett: ."Name) Használhatjuk az Addseries metódust így: . Ehhez a metódushoz két paraméter szükséges. hogy melyik adatoszlop legyen a diagram x tengelyén. A DataSource paraméter a lekérdezésből származó adatokhoz van.Query("SELECT Name. amennyiben nincs szükségünk nagyobb rugalmasságra. Ez a váltózó egy olyan Database objektumot képvisel. hogy megtalálja a termékek nevét és árát.DataBindTable(dataSource: data.AddTitle("Product Sales") . var myChart = new Chart(width: 600. height: 400) . az xField paraméterrel pedig beállíthatjuk. de a DataBindTable metódus egyszerűbb. 5.Write(). Futtassuk az oldalt a böngészőben! Honlapépítés a XXI. és a DataBindTable metódus használatával betölti a lekérdezés adatait a diagramba. ami az adatbázis írására és olvasására használható. Az Addseries metódus rugalmasabb. yFields: "Price") Mindkét módszerrel ugyanazt az eredményt kapjuk. var data = db.@{ var db = Database. xField: "Name") . mivel pontosabban megadhatjuk az adatokat és a diagramtípust. Price FROM Product"). A DataBindTable metódus alternatívájaként használhatjuk a Chart helper AddSeries metódusát is. és hozzárendeli egy db változóhoz. Az AddSeries metódussal megadhatjuk az xValue és az yValues paramétereket. yValues: data.

ami leírja az XML fájl struktúráját. Ez az eljárás megmutatja.xml névvel! 2. hogy az XML fájlnak legyen egy séma fájlja (. fejezet – Adatok megjelenítése diagramokon 144 . hogyan nyerjünk ki adatokat egy XML fájlból.xsd) is. Ehhez az szükséges.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> Honlapépítés a XXI. ami egy elképzelt cég munkavállalóinak adatait tartalmazó XML adat: <?xml version="1. században 8. 1.0" standalone="yes" ?> <NewDataSet xmlns="http://tempuri. Cseréljük ki a meglévő XML-t a következővel. Az App_Data mappában hozzunk létre egy új XML fájlt data.XML adatok használata A harmadik lehetőség diagramok létrehozására egy XML fájl használata a diagram adataihoz.org/data.

században 8.w3. @{ var dataSet = new DataSet().MapPath("/App_Data/data.MapPath("/App_Data/data. height: 400) . xField: "Name".ReadXml(Server.AddSeries("Default".xsd" xmlns="http://tempuri. Cseréljük ki a meglévő XML-t a következőre: <?xml version="1. var dataView = new DataView(dataSet.ReadXmlSchema(Server.xsd" xmlns:xs="http://www.xsd" xmlns:mstns="http://tempuri.0" ?> <xs:schema id="NewDataSet" targetNamespace="http://tempuri.AddTitle("Sales Per Employee") .Tables[0]).org/data.cshtml névvel! 6. yValues: dataView.xsd!) 4.xsd névvel! (Figyeljünk. hogy most a kiterjesztés .Data. A weboldal gyökérkönyvtárában hozzunk létre egy új fájlt ChartDataXML. var myChart = new Chart(width: 600.<Sales>21773</Sales> </Employee> <Employee> <Name>Michelle</Name> <Sales>32294</Sales> </Employee> </NewDataSet> 3. fejezet – Adatok megjelenítése diagramokon 145 . chartType: "Pie". dataSet. dataSet. Az App_Data mappában hozzunk létre egy új XML fájlt data. Cseréljük ki a meglévő kódot a következőre: @using System.org/data.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. yFields: "Sales") Honlapépítés a XXI.xsd")). xValue: dataView.org/data.xml")).

hogy az ASP. ahogy korábban láttuk a soradatokból készített diagramoknál.Data. A diagram az AddSeries metódus használatával kapcsolódik az adatokhoz. de ez nem érhető el automatikusan az ASP. Ezért a Dataset osztállyal való munkához a teljesen kvalifikált név használatával alkalmazzuk a következő kódot: var dataSet = new System. (A namespace egy gyűjtemény – egy könyvtárhoz hasonlót képzeljünk el –.NET Razor oldalakról. században 8. hogy rendezze a több ezer osztályt a .DataSet(). hogy hogyan határozhatunk meg egy bizonyos diagramtípust. Az egyik az úgynevezett fully qualified names használata a használni kívánt komponensre.NET Framework könyvtárban található.) A teljesen kvalifikált név megadásával bizonyosak lehetünk abban.NET Razor oldalakra. Például a DataSet osztály a System. További információk az Állítások és teljesen kvalifikált nevek használata című szövegdobozban találhatók. kiolvassa és megjelenítse az adatokat. a chartType paraméter kördiagrammá változik. amikor az oldal épp fut.NET Frameworkben.Data namespace-ben található. amivel dolgozunk. fejezet – Adatok megjelenítése diagramokon 146 . (Vegyük észre. amiben az osztály található. hogy itt az xValue és az yValues paramétereket állítjuk a DataView objektumhoz. Az adat nézet ad egy objektumot. } A kód először létrehoz egy DataSet objektumot.NET megtalálja az osztályt. hanem azt az úgynevezett namespace-t is. A System. félreérthetetlen név.) Ezután a kód létrehoz egy DataView objektumot az adatsor alapján.Data namespace nem érhető el automatikusan az ASP. 7. és rendszerezi őket a séma fájlban található információk szerint. hogy a kód tetején látható a using SystemData állítás! Ez azért szükséges. Honlapépítés a XXI..Write(). Ez a példa azt is megmutatja. ami a kapcsolódó osztályok gyűjteménye. A teljesen kvalifikált név egy komplett. és ez teszi praktikussá. Ilyenkor két lehetőség van. Ez az objektum kezeli az XML-ből kiolvasott adatokat. kivéve. Amikor az adatokat az AddSeries metódussal adjuk meg. mely a . hogy együtt tudjon működni a DataSet objektummal. amihez a diagram kapcsolódni tud. Futtassuk az oldalt a böngészőben! Állítások és teljesen kvalifikált nevek használata Néha olyan komponenssel (osztállyal) kell dolgoznunk. ami nemcsak az osztály nevét tartalmazza.

Ha a DataSet osztályt ismételten használjuk (vagy egyéb osztályt a System.Data namespace-ből), nehézkessé válhat mindig a teljesen kvalifikált nevet használni. Ezért alternatívaként importálhatunk is namespace-t. Ehhez az using állítást használjuk (import a Visual Basicben), ahogy a fejezet egy korábbi példájában láthattuk. Ha importáltuk a namespace-t, nem kell többé teljesen kvalifikált neveket használnunk az ebben a namespace-ben lévő osztályokhoz. A fejezet korábbi részében láthattunk egy példát:
@using System.Data; @{ var dataSet = new DataSet(); // etc. }

Vegyük észre, hogy mivel a System.Data namespace-t a using állítással importáltuk, a kód nem használ teljesen kvalifikált nevet a DataSet-hez – az ASP.NET tudja, melyik namespace-t kell keresni, hogy megtalálja a DataSet osztályt. Hozzáadhatjuk a using állítást bármely egyéb .NET Framework namespace-hez amiket referenciaként szeretnénk. Azonban ezt nem kell túl gyakran megcsinálnunk, mivel a legtöbb osztály, amivel dolgozunk, olyan namespace-ekben van, amiket az ASP.NET automatikusan importál a .cshtml és a .vbhtml oldalak használatához.

Diagramok megjelenítése weboldalakon
Az eddigi példákban készítettünk egy diagramot, és utána ezt képként illesztettük a böngészőbe. Sok esetben azonban szeretnénk, ha a diagram az oldal része lenne, nemcsak ott lenne a böngészőben. Ehhez egy kétlépcsős folyamatot kell elvégezni. Az első lépés egy oldal létrehozása, ami generál egy diagramot, ahogy azt már láttuk korábban. A második lépés, hogy megjelenítsük a létrejövő képet egy másik oldalon. A kép megjelenítéséhez egy HTML <img> elemet használunk, ugyanúgy, mintha bármilyen egyéb képet akarnánk megjeleníteni. Azonban egy .jpg vagy .png fájlra való hivatkozás helyett az <img> elem arra a .cshtml fájlra hivatkozik, amit az a Chart helper tartalmaz, ami létrehozza a diagramot. Amikor a megjelenítő lap fut, az <img> elem a Chart helper által készített diagramot jeleníti meg.

Honlapépítés a XXI. században 8. fejezet – Adatok megjelenítése diagramokon

147

1. Készítsünk egy ShowChart.cshtml nevű fájlt! 2. Cseréljük ki a meglévő kódot a következőre:
<!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 kód az <img> elem használatával megjeleníti azt a diagramot, amit korábban a ChartArrayBasic.cshtml fájlban hoztunk létre. 3. Futtassuk a weboldalt a böngészőben! A ShowChart.cshtml fájl megjeleníti azt a diagramot, ami a korábbi ChartArrayBasic.cshtml fájl kódján alapul.

Diagram formázása
A Chart helper számos olyan opcióval rendelkezik, melyekkel testreszabhatjuk a diagramok kinézetét. Beállíthatjuk a színeket, betűtípusokat, szegélyeket, stb. Egy egyszerű módszer a testreszabáshoz egy theme használata. A témák információk gyűjteményei, melyek meghatározzák, hogyan készüljön el a diagram, milyen betűtípussal, színekkel, feliratokkal, palettákkal, szegélyekkel és effektekkel. (Megjegyzendő azonban, hogy a diagram stílusa nem határozza meg a diagram típusát.) A következő táblázatban láthatóak a beépített témák: Téma
Vanilla

Leírás Fehér háttéren piros oszlopokat jelenít meg.

Honlapépítés a XXI. században 8. fejezet – Adatok megjelenítése diagramokon

148

Blue Green Yellow

Kék színátmenetes háttéren kék oszlopokat jelenít meg. Zöld színátmenetes háttéren kék oszlopokat jelenít meg. Sárga színátmenetes háttéren narancssárga oszlopokat jelenít meg. Fehér háttéren piros 3D-s oszlopokat jelenít meg.

Vanilla3D

Új diagram készítésekor választhatunk a témák közül. 1. Hozzunk létre egy új fájlt ChartStyleGreen.cshtml néven! 2. Cseréljük ki a meglévő kódot a következőre:
@{ 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 kód megegyezik azzal a korábbi kóddal, ami az adatbázist használja adatként, de hozzáteszi a theme paramétert, amikor létrehozza a Chart objektumot. A következő példa mutatja a megváltoztatott kódot:
var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)

Futtassuk az oldalt a böngészőben! Ugyanazokat az adatokat láthatjuk, de a diagram jobban mutat.

Honlapépítés a XXI. században 8. fejezet – Adatok megjelenítése diagramokon

149

Diagram mentése
Ahogy a korábbiakban láttuk a fejezetben, amikor a Chart helpert használjuk, a helper minden alkalommal újra készíti a diagramot a vázlataiból. Ha szükséges, az adatok megszerzéséhez a diagram kódja újra lekérdezi az adatbázist, vagy újra kiolvassa az XML fájlt. Némely esetben ez elég bonyolult művelet, például ha a lekérdezett adatbázis túl nagy vagy az XML fájlban túl sok adat van. Még ha a diagram nem is tartalmaz sok adatot, a kép dinamikus elkészítése sok szerver erőforrást használ fel, és ha sokan kérdezik le a táblázatot tartalmazó oldalt vagy oldalakat, az befolyásolhatja a weboldalunk sebességét. Ezért, hogy csökkentsük a diagram elkészítésének potenciális negatív hatásait az erőforrásainkra, először elkészíthetjük a diagramot, majd elmenthetjük azt. Ezután ha szükségünk van a diagramra, az újragenerálás helyett csak elővesszük az elmentett változatot, és azt jelenítjük meg. A következő módon tudjuk elmenteni a diagramokat:    Diagram elmentése a gyorsítótár bejegyzéseként. Ez a számítógép memóriájába (a szerveren) menti a diagramot, így gyorsan elérhető. Diagram elmentése képfájlként. Diagram elmentése XML fájlként. Ezzel az opcióval módosíthatjuk a diagramot mentés előtt.

Diagram mentése a gyorsítótárba
Miután készítettünk egy diagramot, berakhatjuk a gyorsítótárba. Ez azt jelenti, hogy a diagramot nem kell újra létrehozni, ha ismét meg szeretnénk jeleníteni. Amikor elmentjük a gyorsítótárba, a diagram kap egy egyedi kulcsot.

Honlapépítés a XXI. században 8. fejezet – Adatok megjelenítése diagramokon

150

A gyorsítótárba mentett diagramok törlődhetnek, ha a szerver számára csak kevés memória érhető el. Továbbá a gyorsítótár törlődik, ha valamilyen okból újraindul az alkalmazás. Ezért a szokásos módszer a diagramok gyorsítótárban tárolásához az, hogy először mindig ellenőrizzük, megtalálhatóe a gyorsítótárban, és ha nem, akkor létrehozzuk, vagy újra létrehozzuk. 1. A weboldalunk gyökérkönyvtárában hozzunk létre egy új fájlt ShowCachedChart.cshtml néven! 2. Cseréljük ki a meglévő kódot a következőre:
<!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 attribútumot tartalmaz, ami a ChartSaveToCache.cshtml fájlra mutat és egy kulcsot ad az oldalnak egy lekérdezés szálként. A kulcs értéke „myChartKey”. A ChartSaveToCache.cshtml fájl tartalmazza a Chart helpert, ami elkészíti a diagramot. Ezt az oldalt fogjuk a következőkben elkészíteni. 3. A weboldalunk gyökérkönyvtárában hozzunk létre egy új fájlt ChartSaveToCache.cshtml névvel! 4. Cseréljük ki a meglévő kódot a következőre:
@{ 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 kód először ellenőrzi, hogy a lekérdezés szálban valami megfelelt-e a kulcsértéknek. Ha igen, a kód megpróbálja kiolvasni a diagramot a gyorsítótárból a GetFromCache metódussal és a kulcs biztosításával. Ha nincs semmi a gyorsítótárban ilyen kulccsal (ami az első lekérdezés alkalmával mindig így lesz), akkor a kód elkészíti a diagramot a szokásos módon. Ha a diagram elkészült, a kód a SaveToCache hívásával elmenti a gyorsítótárba. Ehhez a metódushoz egy kulcs kell (hogy a diagramot később le lehessen kérdezni), és meg kell Honlapépítés a XXI. században 8. fejezet – Adatok megjelenítése diagramokon

151

hogy az benne van-e már a gyorsítótárban. ami azt jelzi.határozni. hogy a diagram gyorsítótár bejegyzése egy megnyitás után 2 perccel lejár.cshtml fájl kódján alapuló diagramot. Fontos megjegyezni. Ebben az esetben ez azt jelenti. mert ez attól függetlenül lehívja a diagramot. attól függetlenül. hogy a diagram nem lett újra generálva. (A pontos időtartam attól függ. ami újraindítja a weboldal alkalmazásunkat. hogy közben hányszor lett megnyitva. hogy várunk 2 percet a gyorsítótár kiürülésére.cshtml weboldalt a böngészőben! Az oldal megjeleníti a ChartSaveToCache. A WebMatrixban a Home fül Site csoportjában kattintsunk a Restart gombra! Ez leállítja és újraindítja az ISS Expresst. (Az aktuális dátumot és időt – DateTime. mint előző alkalommal. akkor a visszaszámláló minden hozzáférés alkalmával újraindul. (Erre egy alternatíva az abszolút lejárat. hogy ez a metódus az if blokkon kívül van. Vegyük észre. vagy generálni kell és a gyorsítótárba menteni azt. Figyeljük meg. Futtassuk a ShowCachedChart. fejezet – Adatok megjelenítése diagramokon 152 .) 5. hogy mennyi ideig maradjon a gyorsítótárban. Honlapépítés a XXI.cshtml fájlt! Vegyük észre. milyen gyakran változhatnak azok az adatok.adja a címhez. Zárjuk be a böngészőt! 7. hanem a gyorsítótárból került kiolvasásra! 8.Now .) A SaveToCache metódus egy SlidingExpiration paramétert is tartalmaz– ha ez igaz. mit mutat az időbélyegző a diagram címében. Másik megoldás. ami a gyorsítótárat ellenőrzi. amikor a diagram gyorsítótár bejegyzése a bekerülése után pontosan 2 perccel jár le. 6. hogy az időbélyegző ugyanaz. Futtassuk újra a ShowCachedChart.) Végül a kód a WriteFromCache metódust használja a diagram gyorsítótárból való elérésére és megjelenítésére. században 8. melyeket ábrázol. hogy a példában az AddTitle metódus egy időbélyegzőt tartalmaz.

"3" }). 1. Ha a fájl nem létezik. a megjelenítés előtt módosíthatjuk az XML-t. fejezet – Adatok megjelenítése diagramokon 153 . 400). Ilyenkor úgy használhatjuk a diagramot.cshtml névvel! 3.jpg fájl megjelenítéséhez. Futtassuk a ChartSave. "4". "Dave" }. } } <!DOCTYPE html> <html> <head> <title>Chart Example</title> </head> <body> <img src="@filePathName" /> </body> </html> A kód először a File.cshtml fájlt! Diagram mentése XML fájlként Végül XML fájlként is elmenthetjük a diagramot a szerveren. chartImage. A weboldalunk gyökérkönyvtárában hozzunk létre egy új fájlt ChartSave.AddTitle("Chart Title"). hogy a . és így a változásokat folyamatosan nyomon követhetjük. hogy ha akarjuk. yValues: new[] { "2". mivel az alkalmazás újraindítása kiüríti a gyorsítótárat! Ezért a kód újragenerálta a diagramot és ismét berakta a gyorsítótárba. Honlapépítés a XXI. Különböző időközönként (például óránként) elmenthetjük az új diagramképet. ahová a képet menteni szeretnénk. "Andrew". században 8.Exists(Server. hogy meghatározza a fájl elérési útját és a fájl nevét. Az előnye az. és hozzáadja a path paramétert. chartImage.jpg fájl létezik-e. "Julie". hogy a fájl tárolva van az ideiglenes gyorsítótárba mentés helyett. 4.9. Cseréljük ki a meglévő kódot a következőre: @{ var filePathName = "_ChartFiles/chart01. xValue: new[] { "Peter". mint bármely egyéb képfájt. chartImage.jpg". illetve hogy hova mentse a fájlt. hogy a webalkalmazásnak legyen engedélyezve a fájlok mentése abban a szerveren lévő mappában. ahova a képeket szeretnénk menteni. Ekkor a kód előhívja a Save metódust. "Mary". Az oldal testében az <img> elem felhasználja az elérési utat a . Futtassuk a ShowCachedChart. hogy az időbélyegző megváltozott.Save(path: filePathName). ha még nincsen ilyen mappa! 2. if (!File.cshtml fájlt ismét! Vegyük észre.Exists metódussal ellenőrzi. Diagram mentése képfájlként A diagramokat képfájlként is elmenthetjük (például . "5". A weboldalunk gyökérkönyvtárában hozzunk létre egy új mappát _ChartFiles névvel.MapPath(filePathName))) { var chartImage = new Chart(600. axisLabel: "Name". "6". Ennek az előnye a gyorsítótárba mentéssel és a fájlként elmentéssel szemben az. Az alkalmazásunknak engedélyezve kell legyen az írás/olvasás a szerver azon könyvtárára. a kód elkészíti az adatsorból az új diagramot. Fontos.AddSeries( name: "Employee".jpg fájlként) a szerverre.

"6". "5". var filePathName = "_ChartFiles/XmlChart. fejezet – Adatok megjelenítése diagramokon 154 .cshtml névvel. Cseréljük ki a meglévő kódot a következőre: @{ Chart chartXml. Ez az XML fájl tartalma alapján létrehozza a diagramot. amit korábban a diagram gyorsítótárba mentésénél láttunk. akkor a kód egyszerűen létrehoz egy diagramot. kivéve azt. chartXml. A kód először a File. Ha a fájl létezik. } Ez a kód hasonló ahhoz. "4". a kód létrehoz egy új diagram objektumot. } else { chartXml = new Chart(width: 600. yValues: new[] { "2".AddTitle("Chart Title -.Exists metódussal leellenőrzi. ez a kód is tartalmaz egy időbélyegzőt. themePath: filePathName).SaveXml(path: filePathName). Figyeljük meg a diagram címében az időbélyegzőt! 5. axisLabel: "Name". chartXml. height: 400. "Julie". Honlapépítés a XXI. Hozzunk létre egy új oldalt ChartDisplayXMLChart. és adjuk hozzá a következőt: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Display chart from XML</title> </head> <body> <img src="ChartSaveXML. és a SaveXml-lel elmenti azt. "Mary".AddSeries( name: "Employee". mint ahogy azt korábban láthattuk Ahogy a gyorsítótáras oldalnál. Zárjuk be a böngészőt! 6. xValue: new[] { "Peter". 3. és a themePath paraméterként megadja a fájlnevet.MapPath(filePathName))) { chartXml = new Chart(width: 600. chartXml. "Dave" }. A WebMatrixban kattintsunk a _ChartFiles mappára jobb gombbal. században 8.Exists(Server. hogy ez egy XML fájlt használ. if (File. height: 400). Futtassuk a ChartDisplayXMLChart. majd kattintsunk a Refresh gombra. és nyissuk meg a mappát! A mappában lévő XMLChart. hogy létezik-e az XML fájl.cshtml oldalt! A diagram megjelenik.xml". } chartXml. "3" }).cshtml" /> </body> </html> 4. Ha az XML fájl még nem létezik.Now).cshtml névvel! 2.Write(). "Andrew".Saved at " + DateTime. A weboldalunk gyökérkönyvtárában hozzunk létre egy új fájlt ChartSaveXML.1. A diagramot a Write metódussal hozza létre.xml fájlt a Chart helper hozta létre.

A WebMatrixban nyissuk meg a _ChartFiles mappát.7. fejezet – Adatok megjelenítése diagramokon 155 . mert a diagramot a korábban elmentett XML-ből generálja.cshtml fájlt! Ezúttal az időbélyegzőt frissítette. században 8. Futtassuk a ChartDisplayXMLChart. és töröljük a XMLChart. Futtassuk megint a ChartDisplayXMLChart. Ha akarjuk.cshtml fájlt ismét! A diagram ugyanazt az időbélyegzőt jeleníti meg. megnézhetjük a _ChartFiles mappát. Ez azért van. amiben ismét ott lesz az XML fájl. 8. mert a Chart helpernek újra létre kellett hoznia az XML fájlt. amit az előző megnyitásnál is.xml fájlt! 9. További forrás angolul  Diagramkezelés Honlapépítés a XXI.

hozzunk létre egy új mappát App_Data néven. 3.WriteAllText(@dataFile. században 9. (Az adatok tárolására használt szövegfájlt néha flat filenak hívjuk. var userData = firstName + ". vagy . var dataFile = Server. Cseréljük ki a meglévő kódot a következőre: @{ var result = "".csv (vesszővel elválasztott értékek). és hogyan írjunk bele adatokat? Hogyan adjunk adatokat egy meglévő fájlhoz? Hogyan olvassunk egy fájlt. A weboldalunk gyökérkönyvtárában hozzunk létre egy új fájlt UserData. if (IsPost) { var firstName = Request["FirstName"].NewLine. eltároljuk az általa bevitt adatokat egy szövegfájlban. A Path objektumot. fejezet – Munka fájlokkal Az előző fejezetekben megtanultuk. Az útmutatóból megtudhatjuk:      Hogyan készítsünk szövegfájlt. mint például . keresztnév. . Például a weboldal adatainak egyszerű tárolásához használhatunk szövegfájlokat is. Megjegyzés: ha képeket akarunk feltölteni és szerkeszteni (például forgatni és átméretezni). akkor nézzük meg a 10. userData).xml. Ezzel az eljárással létrehozunk egy oldalt. File. fejezet – Munka fájlokkal 156 . var lastName = Request["LastName"]. result = "Information saved.NET programozási funkciókat ismerhetjük meg a fejezetben:    A File objektumot. Ha még nincs. e-mail cím) és egy Submit gombbal. ami egy egyszerű űrlapot tartalmaz 3 input mezővel (vezetéknév. használhatjuk a File. fejezet – Munka képekkel című részt! Szövegfájl létrehozása és adatok beleírása Amikor adatot szeretnénk tárolni szövegfájlban. Amikor a felhasználó elküldi az űrlapot." + lastName + ".) A szövegfájlok többféle kiterjesztésűek lehetnek. 1. A FileUpload helpert.". amivel elérési utakat és fájlneveket módosíthatunk. és az adatok beírásához.MapPath("/App_Data/data. var email = Request["Email"].9.WriteAllText metódust a létrehozandó fájl meghatározásához.txt.cshtml néven. } } Honlapépítés a XXI." + email + Environment. Azonban akár szövegfájlokkal is dolgozhatunk a weboldalunkban. 2. és hogyan jelenítsük meg? Hogyan töröljünk fájlokat egy weboldalról? Hogyan tölthetnek fel a felhasználók egy vagy több fájlt? Az alábbi ASP. amivel fájlokat kezelhetünk. hogyan tároljunk adatokat adatbázisban.txt").

<!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 elkészíti az űrlapot 3 szövegdobozzal.már elküldték-e. Ha a weboldal elköltözik. hogy a vessző elválasztó egy idézőjelek közötti szál. az abszolút elérési út rossz lesz.txt. Így néz ki. amit ezzel az összekapcsolással létrehozunk: David. Vegyük észre. Ez egy sortörést ad hozzá. Honlapépítés a XXI. mert a vesszőt szó szerint beillesztjük egy nagyobb szálba.com (A végén egy láthatatlan sortöréssel) Ezután létrehozunk egy változót (dataFile). hogy megszerezzük a felhasználó bevitt adatait.NewLine-t. Az első feladat az. mint például C:\Folder\File. században 9. amit készítünk. A kód ekkor a különböző változók értékeit egy vesszőkkel elválasztott szálba összefűzi. A hely beállítása speciális módszert igényel. Az összekapcsolt adatok végén hozzáadjuk az Environment. hogy az oldalt . A webhelyek esetén rossz gyakorlat a kódban abszolút elérési útra hivatkozni. és hozzárendeljük változókhoz. amit egy másik változó alatt eltárol. ami az adat tárolásához szükséges fájl nevét és helyét tartalmazza.mielőtt elkezdjük feldolgozni .davidj@contoso.Jones. amikor írjuk a kódot. fejezet – Munka fájlokkal 157 . A kódban az IsPost tulajdonságot használjuk annak meghatározásához. Ráadásul egy hostolt oldalnál (a saját számítógépünkkel szemben) általában nem is tudjuk az elérési utat.

ahogy a 6. a „~” jelet adjuk a MapPathhoz. fejezetben többet is olvashatunk a fájlok és mappák elérési útjairól. fejezetet!) Megjegyzés: Ahhoz. az alkalmazásnak írásolvasási felhatalmazásra van szüksége erre a mappára. a fájl nevét (és elérési útját). 6. Ehhez két paramétert használ. hogy hogyan állíthatók be ezek az engedélyek! 4. (Alkönyvtár nevet is hozzáadhatunk. a fájlban vannak. amibe ír. hogy a kód az App_Data mappába mentse a fájlokat. Írjunk be a mezőkbe értékeket.) A fájl az App_Data mappában kerül mentésre. és az aktuális adatokat. amit a metódus létrehoz. Ha ezt a kódot futtatjuk a webhosting szolgáltató szerverén. például ~/App_Data/. (További információért nézzük meg a 3. fejezetben láthattuk. Azonban amikor egy hostolt webszerveren publikáljuk a weboldalunkat.txt fájlt! Az adatok. hogy az első paraméter neve előtt egy @ karakter előtag található. kifejezetten szükség lehet az engedélyek beállítására. vegyük fel a kapcsolatot a szolgáltatóval. Honlapépítés a XXI. Ez jelzi az ASP. majd kattintsunk a Submit gombra! Zárjuk be a böngészőt! Térjünk vissza a projekthez. Ebben a példában egy fájlnevet adunk hozzá. amit adatfájlok tárolásához használunk. és például a „/” karaktereket ne értelmezze speciálisan. 8. Ez egy speciális mappa az ASP. fájl írásánál) komplett elérési útra van szükség. hogy megkapjuk az alkönyvtár elérési útját. és frissítsük a nézetet! Nyissuk meg a Data. hogy a Files munkaterület alatt ki van választva az oldal!) 5. hogy szó szerinti szálat adunk meg.) Ekkor összekapcsolhatunk egyéb információt azzal.De néha (mint most. ( A 3. században 9. győződjünk meg róla. fejezet – Munka fájlokkal 158 . Vegyük észre. hogy egy komplett elérési utat készítsen. amiket az űrlapon beírtunk. és hibaüzenetet kapunk. Futtassuk az oldalt a böngészőben! (Mielőtt futtatjuk.NET-ben. A File objektum WriteAllText metódusa írja az adatot a fájlba. A fejlesztő számítógépen általában ez nem okoz problémát.NET számára. amiket beleír. A megoldás a Server objektum MapPath metódusának használata. Hogy megtaláljuk az utat a weboldal gyökérkönyvtárába. 7. Ez megmutatja a weboldal komplett elérési útját.

1. result = "Information saved. 3. var userData = firstName + ". Futtassuk az oldalt a böngészőben! Írjunk be értékeket a mezőkbe.cshtml-re! 2. } } Ez a kód egy dologban különbözik az előző kódtól. Zárjuk be a Data.txt fájlt! Adat hozzáadása meglévő fájlhoz Az előző példában a WriteAllText-et használtuk olyan szövegfájlok létrehozására. fejezet – Munka fájlokkal 159 . Azonban egy fájl létrehozása után gyakran szeretnénk hozzáadni további adatokat is. majd a Refresh gombra! 7. és ismét küldjük el! Térjünk vissza a projekthez. 4. és ugyanazt a nevet rendeljük hozzá.cshtml fájlról. hogy az AppendAllText metódus a fájl végéhez adja hozzá az adatokat. A WriteAllText metódus helyett az AppendAllText metódust használja." + lastName + ". Honlapépítés a XXI.". var email = Request["Email"]. században 9. kattintsunk jobb gombbal a projektmappára.txt"). if (IsPost) { var firstName = Request["FirstName"].NewLine. Nyissuk meg a Data. és kattintsunk a Submit gombra! Írjunk be további adatokat.9. A nyitó <!DOCTYPE html> tag előtti kódblokkot cseréljük ki a következőre: @{ var result = "". 6. annyi különbséggel. Ha újra lehívjuk a metódust. var dataFile = Server. var lastName = Request["LastName"]. File. akkor a meglévő fájlt felülírja. A weboldalban készítsünk egy másolatot a UserData. A két metódus hasonló. az AppendAllText is létrehozza a fájlt." + email + Environment. Csakúgy mint a WriteAllText. amik egyetlen adatot tartalmaznak. és a másolatot nevezzük át UserDataMultiple. 5. userData). Ezt megtehetjük a File objektum AppendAllText metódusának használatával.AppendAllText (@dataFile. ha az még nem létezik.MapPath("/App_Data/data.txt fájlt! Az imént beírt adatokat is tartalmazza.

században 9. result = "The file is empty. Ez az eljárás megmutatja. char[] delimiterChar = {'. vagy egy külön elemet is kiolvashatunk függetlenül az elválasztás módjától. Cseréljük ki a meglévő kódot a következőre: @{ var result = "".Adatok olvasása és megjelenítése fájlból Még ha nem is akarunk adatokat szövegfájlba írni. A File objektum használatával a sorokat egyenként is kiolvashatjuk (sortörésekkel elválasztva). } } else { // File does not exist. Ehhez újra a File objektumot használjuk.cshtml névvel! 2. 1. amiket az előző példában hoztunk létre. hogyan olvassuk ki és jelenítsük meg az adatokat. fejezet – Munka fájlokkal 160 . valószínűleg néha ki kell olvasnunk adatokat belőle.'}. if (File. if (userData == null) { // Empty file.Exists(dataFile)) { userData = File. } } <!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 Honlapépítés a XXI.".txt").MapPath("/App_Data/data. result = "The file does not exist. Array userData = null.ReadAllLines(dataFile). A weboldalunk gyökérkönyvtárában hozzunk létre egy új fájlt DisplayData. var dataFile = Server.".

Ebben az esetben a sorokat sortörések definiálják. században 9. fejezetet!) 3. hogy minden sor 3 mezőt tartalmaz – vezetéknév. mert a Split metódus egy array-t ad. A külső hurok egy új elemet hoz létre (<li> elem) egy rendezett listában (<ol> elem). mindegyik vesszőkkel elválasztva.<ul> @foreach (string dataItem in dataLine. amiket az előző példában bevittünk. a sor és a char adattípust. célszerű először a File.Exists metódust használni.Split(delimiterChar)) { <li>@dataItem</li > } </ul> </li> } </ol> } </div> </body> </html> A kód az előző példában készített fájl olvasásával kezd egy UserData változóra. A kód a két adattípus használatát illusztrálja. a következő metódus hívásával: File. Futtassuk az oldalt a böngészőben! Az adatok. mert a File. az egyiket beágyazva a másikba. A kód szövegtörzse két foreach hurkot tartalmaz. Honlapépítés a XXI.ReadAllLines(dataFile) A kód ehhez egy if állításban van. e-mail cím. A belső hurok az adatsorokat elemekre (mezőkre) osztja a vesszőt használva elválasztóként.) A belső hurok létrehoz egy <ul> listát is. fejezet – Munka fájlokkal 161 . A külső foreach hurok egyszerre egy sort vesz ki az adatfájlból. hogy üres-e a fájl. elérhető-e a fájl. hogy meghatározzuk. (A sorokról való további információkért nézzük meg a 3. és az adatsorban minden mezőre egy listaelemet jelenít meg. (Az előző példa alapján ez azt jelenti. Ha egy fájlt szeretnénk olvasni. amiben minden elem char típusú.ReadAllLines metódus sorként adja az adatokat. megjelennek. keresztnév. A char adattípus pedig azért kell. A sor azért szükséges. A kód ellenőrzi azt is. azaz minden adat egy külön sor a fájlban.

if (File. fejezet – Munka fájlokkal 162 . Ha ezt tesszük.jpg".Delete(fullPath). ha tudják a fájl nevét.jpg fájlt) egy images mappából. } } } Honlapépítés a XXI.Delete metódust használjuk. csak az adatfájl nevét kell megváltoztatni a kódban. hogyan törölhetnek a felhasználók egy képet (.Exists(fullPath)) { File. A weboldalon hozzunk létre egy almappát images névvel! 2. Cseréljük ki a meglévő kódot a következőre: @{ bool deleteSuccess = false. Ez az eljárás megmutatja. az adatokat sima szövegként menti el. A weboldal gyökérkönyvtárában hozzunk létre egy fájlt FileDelete. században 9.Adatok megjelenítése Microsoft Excel vesszővel elválasztott fájlból A táblázatban tárolt adatok vesszővel elválaszott fájlként történő mentéséhez használhatjuk a Microsoft Excelt (. deleteSuccess = true. Fájlok törlése A weboldalról fájlok törléséhez a File.jpg fájlt az images mappába! 3.csv fájl). Másoljunk egy vagy több .cshtml névvel! 4. 1. nem Excel formátumban. var photoName = "". if (IsPost) { photoName = Request["photoFileName"] + ". A táblázat minden sora sortöréssel lesz elválasztva a szövegfájlban. Az előző példában bemutatott kódot használhatjuk Excel vesszővel elválasztott fájl olvasásához. var fullPath = Server. és minden adat elemet vessző választ el egymástól.MapPath("/images/" + photoName).

<!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 . 1. Futtassuk az oldalt a böngészőben! 6. Fájlok feltöltése a felhasználók által A FileUpload helper segítségével a felhasználók fájlokat tölthetnek fel a weboldalra.Delete metódust hívja. ha még nem tettük meg korábban! 2. hogyan tölthetnek fel egy fájlt a felhasználók. Az App_Data mappában hozzunk létre egy új mappát UploadedFiles névvel! 3. és átadja a teljes elérési utat. Cseréljük ki a meglévő kódot a következőre: Honlapépítés a XXI. A fájl törléséhez a kód a File.jpg fájlnév kiterjesztést. a felhasználó által megadott nevet és a „. A kulcs végén a kód egy visszaigazoló üzenetet jelenít meg a fájl törléséről.jpg” szó szerinti szálat használja. amit az előbb készített. 5.MapPath metódus megadja). az images mappát.NET Web Helpers Libraryt a webhelyünkhöz a 2. a fájlnév megjelenik az oldal alján. században 9. Adjuk hozzá az ASP. majd egy komplett elérési utat hoz létre. Ha nem írják be a . A kód elolvassa a beírt fájlnevet. a fájlnév ezen korlátozásával megakadályozhatjuk. A gyökérkönyvtárban hozzunk létre egy új fájlt FileUpload. Ehhez a kód a weboldal aktuális útját (ahogy a Server. fejezet – Munka fájlokkal 163 . fejezetben leírtak szerint. hogy a felhasználók tetszőleges fájlokat törölhessenek az oldalról. Írjuk be a törölni kívánt fájl nevét. ahol a felhasználók megadhatják egy képfájl nevét. majd kattintsunk a Submit gombra! Ha a fájlt törölte.cshtml névvel! 4.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. A következő folyamat megmutatja.

allowMoreFilesToBeAdded:false. includeFormTag:true. amit általában arra használunk. Különböző fájlokat szedhetünk ki a sor meghatározott pozícióiból. if (IsPost) { var fileSavePath = "". fileSavePath = Server. egy változóba rakjuk (itt uploadedFile). uploadedFile. fileName = Path. hogy egy egyszerű dobozt akarunk a feltöltéshez.MapPath("/App_Data/UploadedFiles/" + fileName).) Amikor a felhasználó az Upload gombra kattint. az oldal tetején lévő kód megszerzi a fájlt és elmenti. uploadText:"Upload") @if (IsPost) { <span>File uploaded!</span><br/> } </body> </html> Az oldal szövegtörzse a FileUpload helpert használja a feltöltő doboz és a már valószínűleg ismerős gombok létrehozásához. amiben az egész elérési út megtalálható.txt Honlapépítés a XXI. var uploadedFile = Request.Single-File Example</h1> @FileUpload.@{ var fileName = "". Például így nézhet ki: C:\Users\Public\Sample.Files[0]. hogy űrlapokból szerezzen értékeket.Files[1] és így tovább.FileName).SaveAs(fileSavePath).GetHtml( initialNumberOfFiles:1. A feltöltött fájl nevének meghatározásához csak a FileName tulajdonsága szükséges.Files[0] szükséges. a FileName az eredeti nevét tartalmazza. tartalmaz egy Files sort is. A Request objektum. (Emlékezzünk. A FileUpload helpernek megadott beállítások meghatározzák. században 9. Azonban amikor a felhasználó feltölt egy fájlt. például az első feltöltött fájl megszerzéséhez a Request. (A későbbiekben több dobozt is hozzáadunk. hogy a programozásban a számozás általában 0-val kezdődik!) Amikor megszereztünk egy feltöltött fájlt.Single-File Example</title> </head> <body> <h1>FileUpload .GetFileName(uploadedFile. a másodikhoz a Request. fejezet – Munka fájlokkal 164 . és a küldés gomb Upload feliratú legyen. ami a feltöltött fájlt (vagy fájlokat) tartalmazza. } } <!DOCTYPE html> <html> <head> <title>FileUpload . hogy így módosíthassuk.

txt). és válasszunk ki egy feltölteni kívánt fájlt! A Browse gomb melletti szövegdoboz tartalmazza a fájl elérési útját és helyét. Kattintsunk az Upload gombra! Honlapépítés a XXI. stb. Ha megszereztük a feltöltött fájl nevét. így: Path.Nincs szükségünk erre az összes információra. ahol tárolni kívánjuk a fájlt a weboldalon.GetFileName(uploadedFile. készíthetünk egy új elérési utat.GetFileName metódus használatával. 7. fejezet – Munka fájlokkal 165 . Kivehetjük csak a fájlt a Path. Kattintsunk a Browse gombra. a mappaneveket (App_Data/UploadedFiles) és az újonnan szerzett fájlnevet az új elérési út elkészítéséhez. Ezután a SaveAs metódust hívjuk a fájl mentéséhez. 5. nem a szerveren. Ebben az esetben kombináljuk a Server. században 9.MapPath-t. Futtassuk az oldalt a böngészőben! 6.FileName) A Path elem egy számos ilyen metódussal rendelkező eszköz. amikkel elérési utakat vehetünk ki. Csak az aktuális fájlnévre van szükségünk (Sample. mivel ez az elérési út a felhasználó számítógépén van. kombinálhatunk.

8. A weboldalon jobb gombbal kattintsunk a project mappára, és kattintsunk a Refresh gombra! 9. Nyissuk meg az UploadedFiles mappát! A fájl, amit feltöltöttünk, a mappában van.

Több fájl feltöltése a felhasználók által
Az előző példában a felhasználóknak egy fájl feltöltését engedtük. De a FileUpload helpert egyszerre több fájl feltöltésére is használhatjuk. Ez jól jön például fényképek feltöltésénél, ahol a fájlok egyenkénti feltöltése hosszadalmas. (Fényképek feltöltéséről bővebben a 10. fejezetben olvshatunk.) Ez a példa azt mutatja be, hogyan tölthetnek fel a felhasználók egyszerre két fájlt, azonban ugyanezzel a módszerrel több fájl is feltölthető. 1. Adjuk hozzá az ASP.NET Web Helpers Libraryt a weboldalunkhoz a 2. fejezetben leírtak szerint, ha még nem tettük meg korábban! 2. Hozzunk létre egy új fájlt FileUploadMultiple.cshtml névvel! 3. Cseréljük ki a meglévő kódot a következőre:
@{ 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"

Honlapépítés a XXI. században 9. fejezet – Munka fájlokkal

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 példában a FileUpload helpert az oldal szövegtörzsében arra konfiguráltuk, hogy a felhasználók két fájlt tölthessenek fel egyszerre alapértelmezésként. Mivel az AllowMoreFilesToBeAdded true-ra van állítva, a helper készít egy linket, amivel a felhasználók több feltöltési dobozt adhatnak hozzá.

A felhasználók által feltöltött fájlok feldolgozásához a kód ugyanazt az alapmódszert használja, mint a korábbi példában – a fájlok megszerzése a Request.Files-ból, majd mentése. (A különböző dolgokkal, például a fájlnév megszerzésével és az elérési úttal együtt.) Az újítás ebben az esetben az, hogy a felhasználó több fájlt is feltölthet, de nem tudjuk, hányat. Ezt megtudhatjuk a Request.Files.Count segítségével. A kapott számmal már a Request.Files-on keresztüli hurkot létrehozhatjuk, minden fájlt megszerezhetünk és elmenthetünk. Amikor egy ismert számú gyűjteményen akarunk hurkot létrehozni, használhatjuk 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 változó csak egy ideiglenes számláló, ami nullától az általunk beállított felső határig megy. Ebben az esetben a felső határ a fájlok száma. De mivel a számláló 0-val kezd, a felső határ igazából eggyel kevesebb, mint a fájlok száma. (Ha három fájlt töltenek fel, a számláló nullától kettőig megy.)

Honlapépítés a XXI. században 9. fejezet – Munka fájlokkal

167

Az uploadedCount változó összesíti a sikeresen feltöltött és elmentett fájlokat. Ez a kód számba veszi azt a lehetőséget, hogy a kívánt fájl nem mindig feltölthető. 4. Futtassuk az oldalt a böngészőben. A böngésző megjeleníti az oldalt és a két feltöltő dobozt! 5. Válasszunk ki két feltöltendő fájlt! 6. Kattintsunk az Add another file-ra! Az oldalon megjelenik egy új feltöltő doboz.

7. Kattintsunk az Upload gombra! 8. A weboldalon kattintsunk jobb gombbal a projektmappára, majd a Refresh gombra! 9. Nyissuk meg az UploadedFiles mappát, hogy lássuk a sikeresen feltöltött fájlokat!

További forrás angolul
 Exportálás CSV fájlba

Honlapépítés a XXI. században 9. fejezet – Munka fájlokkal

168

10. fejezet – Munka képekkel
Ez a fejezet bemutatja, hogyan adjunk képeket a weboldalunkhoz, hogyan jeleníthetjük meg, és hogyan szerkeszthetjük –tükrözzük, méretezzük át és adjunk vízjelet hozzájuk –, mielőtt elmentenénk a képeket. A fejezetből megtudhatjuk:       Hogyan adjunk dinamikusan egy oldalhoz képet? Hogyan engedélyezhetjük a felhasználóknak képek feltöltését? Hogyan méretezzünk át egy képet? Hogyan forgassunk vagy tükrözzünk egy képet? Hogyan adjunk vízjelet egy képhez? Hogyan használjunk egy képet vízjelként?

Az alábbi ASP.NET programozási funkciókat ismerhetjük meg a fejezetben:   A WebImage helpert A Path objektumot, amivel fájlneveket és elérési utakat módosíthatunk.

Kép dinamikus hozzáadása egy weboldalhoz
Webhelyünkhöz és különböző oldalakhoz hozzáadhatunk képeket, miközben szerkesztjük a weboldalt. A felhasználók számára is lehetővé tehetjük képek feltöltését, ami hasznos lehet például olyan feladatok esetében, mint egy profilkép feltöltése. Ha egy kép már elérhető az oldalunkon és csak meg szeretnénk jeleníteni, akkor egy HTML <img> elemet használunk így:
<img src="images/Photo1.jpg" alt="Sample Photo" />

Néha azonban a képeket dinamikusan kell megjeleníteni – azaz az oldal futtatásáig nem is tudjuk, milyen képet kell megjeleníteni. Ebben a részben az eljárás megmutatja, hogyan jelenítsünk meg egy képet menet közben, ahol a felhasználók határozzák meg a képfájl nevét egy képfájl listából. Kiválasztják egy kép nevét a legördülő listából, és amikor elküldik az oldalt, a kiválasztott kép megjelenik.

Honlapépítés a XXI. században 10. fejezet – Munka képekkel

169

1. 2. 3. 4.

A WebMatrix-ban hozzunk létre egy új weboldalt! Az új oldalt nevezzük el DynamicImage.cshtml-nek! A weboldal gyökérkönyvtárában hozzunk létre egy új mappát és nevezzük el images-nek! Rakjunk a most létrehozott images mappába négy képet! (Bármilyen kéznél lévő kép megteszi, de az oldalba bele kell, hogy férjenek.) Nevezzük át a képeket Photo1.jpg, Photo2.jpg, Photo3.jpg, Photo4.jpg-re! (Ebben a folyamatban nem használjuk a Photo4.jpg-t, de majd a későbbiekben igen.) 5. Győződjünk meg róla, hogy a képek nem írásvédettek! 6. Cseréljük ki a meglévő kódot a következőre:
@{ 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> &nbsp; <input type="submit" value="Submit" /> </div> <div style="padding:10px;"> @if(imagePath != ""){ <img src="@imagePath" alt="Sample Image" width="300px" />

Honlapépítés a XXI. században 10. fejezet – Munka képekkel

170

) Ez egy relatív elérési utat ad. amivel képeket készíthetünk. Ez azt jelenti. mert a felhasználó nem választott ki semmit. A szövegtörzsben található egy <img> elem is. ha nem találja meg a képet). az imagePath tartalmazza az elérési utat. majd hozzáadja a . amit a böngésző akkor jelenít meg.} </div> </form> </body> </html> A weboldal szövegtörzse egy legördülő listát tartalmaz (egy <select> elemet). mint „Photo1”. hogy az src attribútum üres lesz. Ennek megakadályozására az <img> elemet egy if blokkba rakjuk. Honlapépítés a XXI.bmp fájlokat. amire később szükségünk lesz. Ehelyett a @imagePath-ra van állítva. Ha a felhasználó kiválaszt valamit. de csak olyan képekkel működött. ami a képeket tartalmazó mappának a nevéből és a felhasználó képének fájlnevéből áll. hogyan engedélyezhetjük a felhasználók számára egy kép feltöltését. és futtassuk az oldalt a böngészőben! (Mielőtt futtatjuk. hogyan jelenítsünk meg egy képet dinamikusan. de bármilyen képfájl típust használhatunk. Mentsük el a fájlt. Először láthatjuk. de semmi nincs a Request["photoChoice"]-ban. Az ASP. .jpg fájlokat fogunk használni. azaz az értékét a kódban beállított elérési útból kapja meg. nincs megjelenítendő kép. A WebImage helper az összes gyakori webes képfájl típust támogatja. Azonban amikor az oldal először fut. Ebben a fejezetben . amikor az oldalt elküldik. akkor az <img> elem nem lesz megjelenítve. létrehozunk egy elérési utat a képnek. hogy egyáltalán volt-e kiválasztva valami. melyek már a weboldalunkon voltak. ami olyan metódusokat tartalmaz. többek között a .) Kép feltöltése Az előző példában láthattuk. Lényegében a lista a felhasználó számára egy barátságos választható nevet biztosít. amit a felhasználó által kiválasztott kép megjelenítésére használunk. hogy az imagePath változó tartalmaz-e valamit. A kódban megkaphatjuk a felhasználó választását (más szóval a képfájl nevét) a listából a Request["photoChoice"] olvasásával. és minden opció value attribútuma az images mappában található képek neveit viseli. fejezet – Munka képekkel 171 . hogy az oldal ki van választva a Files munkaterületen.jpg. (Ha megpróbálnánk elérési utat készíteni. Ha a felhasználó nem választott ki képet.NET-ben menet közben szerkeszthetünk képeket a WebImage helperrel. ezt photoChoice-nak nevezzük. akkor hibaüzenetet kapnánk. Ha volt. Az src attribútum nincs fájlnévre vagy URL-re állítva. mintha egy statikus elemet szeretnénk megjeleníteni. vagy az oldal először fut. Ez az eljárás megmutatja. módosíthatunk és menthetünk. 7.jpg Az elérési út az imagePath változó alatt van tárolva.png és . ami utána megjelenik a weboldalon.jpg fájlnevet. században 10. A lista 3 opciót tartalmaz. így: images/Photo1. ami megnézi. és a kép helyén egy piros X jelenik meg (vagy bármi más. győződjünk meg róla.

fejezet – Munka képekkel 172 .GetFileName(photo. században 10.ToString() + "_" + Path. Cseréljük ki a meglévő kódot a következőre: @{ WebImage photo = null. if(IsPost){ photo = WebImage.FileName).Save(@"~\" + imagePath).GetImageFromRequest().1.cshtml-nek! 2. Hozzunk létre egy új oldalt. imagePath = @"images\" + newFileName.NewGuid(). és nevezzük el UploadImage. var newFileName = "". if(photo != null){ newFileName = Guid. } } } <!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" /> Honlapépítés a XXI. var imagePath = "". photo.

</div> } </body> </html>

A szöveg törzse tartalmaz egy <input type="file"> elemet, amivel a felhasználók kiválaszthatnak egy feltöltendő fájlt. Amikor a Submit-ra kattintanak, az űrlappal együtt a fájl, amit kiválasztottak is elküldésre kerül. A feltöltött kép megszerzéséhez a WebImage helpert használjuk, ami sok hasznos metódust tartalmaz a képekkel való munkához. Most a WebImage.GetImageFromRequest-et használjuk a feltöltött kép megszerzéséhez és a photo változó alatti tárolásához. Ebben a fejezetben sok munkánk lesz az elérési utak és fájlnevek megszerzésével és beállításával. A probléma az, hogy szeretnénk a felhasználó által feltöltött kép nevét (és csak a nevét) megszerezni, majd ezután egy új elérési utat készíteni neki oda, ahol tárolni fogjuk a képet. Mivel a felhasználók feltölthetnek esetleg több képet is ugyanolyan névvel, ezért egy kis extra kódot használunk az egyedi nevek létrehozásához, így biztosítva, hogy a felhasználók nem írnak felül meglévő képeket. Ha egy képet feltöltöttek (a teszt if (photo != null), akkor a kép nevét a FileName tulajdonságából megkapjuk. Amikor a felhasználó feltölti a képet, a FileName a felhasználó eredeti nevét tartalmazza, ami magában foglalja a felhasználó gépén lévő elérési utat. Így nézhet ki: C:\Users\Joe\Pictures\SamplePhoto1.jpg Azonban nincs szükségünk erre az elérési útra – csak az aktuális fájlnév (SamplePhoto1.jpg) kell nekünk. A fájlnevet kiszedhetjük ez elérési útból a Path.GetFileName metódussal, így:
Path.GetFileName(photo.FileName)

Ekkor létrehozunk egy egyedi fájlnevet az eredeti fájlnévből egy GUID hozzáadásával. (A GUID-okról több információt a fejezet későbbi részében olvashatunk.) Ezután készítünk egy komplett elérési utat, amit a kép mentéséhez használunk. A mentéshez szükséges elérési út az új fájlnévből, a mappából (images) és az aktuális weboldal helyéből áll. Megjegyzés: Ahhoz, hogy a kód az images mappába mentse a fájlokat, az alkalmazásnak írás-olvasási jogosultságra van szüksége erre a mappára. A fejlesztő számítógépen általában ez nem probléma. Azonban amikor egy hostolt webszerveren publikáljuk a weboldalunkat, kifejezetten szükség lehet az engedélyek beállítására. Ha ezt a kódot futtatjuk a webhosting szolgáltató szerverén, és hibaüzenetet kapunk, vegyük fel a kapcsolatot a szolgáltatóval, hogy hogyan állíthatók be ezek az engedélyek! Végül a mentéshez szükséges elérési utat a WebImage helper Save metódusához adjuk. Ez elmenti a feltöltött képet az új neve alatt. A Save metódus így néz ki: photo.Save(@”~\” + imagePath). A komplett elérési utat hozzáfűzi a @”~\”-hoz, ami az aktuális weboldal helye. (A ~ operátorról bővebbi információ a 3. fejezetben található.) Ahogy az előző példában, az oldal szövegtörzse egy <img> elemet tartalmaz a kép megjelenítéséhez. Ha az imagePath be lett állítva, az <img> elem megjelenik és az src attribútuma az imagePath értékre állítódik. 3. Futtassuk az oldalt a böngészőben!

Honlapépítés a XXI. században 10. fejezet – Munka képekkel

173

A GUID-okról A GUID (globally-unique ID) egy azonosító, ami hasonlóan néz ki: 936DA01F-9ABD-4d9d-80C702AF85C822A8. (Technikailag egy 16 byte/128-bites szám.) Amikor egy GUID-ra van szükségünk, egy speciális kódot hívhatunk meg, ami generál egy GUID-ot nekünk. A GUID lényege, hogy a szám hatalmas mérete (3,4 × 1038) és a generáló algoritmusa egy gyakorlatilag garantáltan egyedi számot hoz létre. Ezért a GUID-ok hasznosak olyan dolgok nevének generálására, ahol garantálni kell, hogy nem használjuk kétszer ugyanazt a nevet. A másik oldalról persze a GUID-ok nem éppen felhasználóbarátok, ezért csak akkor használjuk őket, amikor a neveket csak a kódban használjuk.

Kép átméretezése
Ha a weboldalunk képeket fogad egy felhasználótól, a mentése vagy a megjelenítése előtt szükségünk lehet a kép átméretezésére. Ehhez újra a WebImage helpert használhatjuk. Ez az eljárás megmutatja, hogyan méretezzük át a feltöltött képet miniatűr létrehozásához, majd hogyan mentsük a miniatűrt és az eredeti képet a weboldalon. A miniatűrt megjelenítjük a weboldalon, és hiperhivatkozással átirányítjuk a felhasználókat a teljes méretű képhez.

1. Hozzunk létre egy új oldalt Thumbnail.cshtml névvel! 2. Az images mappában készítsünk egy almappát thumbs névvel! 3. Cseréljük ki a meglévő kódot a következőre:
@{ 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,

Honlapépítés a XXI. században 10. fejezet – Munka képekkel

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 kód hasonló az előző példához. A különbség az, hogy ez a kód kétszer menti el a képet, egyszer normálisan és egyszer, miután egy bélyegképet készítettünk a képből. Először megkapjuk a feltöltött képet, és elmentjük az images mappába. Ezután létrehozunk egy új elérési utat a bélyegkép számára. A bélyegkép létrehozásához a WebImage helper Resize metódusát használjuk, hogy egy 60x60 pixeles képet készítsen. A példa megmutatja, hogyan tartsuk meg az oldalarányt, és hogyan akadályozzuk meg, hogy a képet kinagyítsa (abban az esetben, ha az új méret nagyobbá tenné a képet). Az átméretezett kép ezután a thumbs almappában kerül mentésre. A kód végén az <img> elemet használjuk a dinamikus src attribútummal, amit a korábbi példákban a képek feltételes megjelenítésénél láthattunk. Ebben az esetben a bélyegképet jelenítjük meg. Egy <a> elemet is használunk egy hiperhivatkozás létrehozásához, ami a kép nagy változatához kapcsolódik. Ahogy az src attribútumot az <img> elemhez, a href attribútumot az <a> elemhez állítjuk dinamikusan, ami az imagePath-ban van. Hogy megbizonyosodjuk arról, hogy az elérési út URL-ként működik, az imagePath-t a Html.AttributeEncode metódushoz adjuk, ami az elérési út korlátozott karaktereit átalakítja az URL-hez használható karakterekké. 4. Futtassuk az oldalt a böngészőben!

Kép forgatása és tükrözése
A WebImage helper segítségével tükrözhetjük és elforgathatjuk a képeket. Ez az eljárás bemutatja, hogyan kapjuk meg a képet a szerverről, hogyan tükrözzük függőlegesen, hogyan mentsük el, majd Honlapépítés a XXI. században 10. fejezet – Munka képekkel

175

hogyan jelenítsük meg a tükrözött képet az oldalon. Ebben a példában csak egy olyan képet használunk, ami már megtalálható a szerveren (Photo2.jpg). Valós felhasználásban valószínűleg egy olyan képet tükröznénk, aminek a nevét dinamikusan kapjuk meg, mint ahogy az előző példákban láthattuk.

1. Hozzunk létre egy új oldalt Flip.cshtml névvel! 2. Cseréljük ki a meglévő kódot a következőre:
@{ 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 kód a WebImage helpert használja, hogy megkapjuk a képet a szerverről. Mi készítjük el az elérési utat a képhez, ugyanazt a technikát alkalmazva, amit a korábbi példákban képek mentéséhez használtunk, és ezt az elérési utat a kép létrehozásánál a WebImage használatával átadjuk:
WebImage photo = Snew WebImage(@"~\Images\Photo2.jpg");

Honlapépítés a XXI. században 10. fejezet – Munka képekkel

176

Ha talál egy képet, létrehozunk egy új elérési utat és fájlnevet, mint ahogy a korábbi példákban tettük. A kép tükrözéséhez a FlipVertical metódust hívjuk, majd újra elmentjük a képet. A kép újra az <img> metódus használatával, az src attribútum imagePath-ra állításával jelenik meg az oldalon. 3. Futtassuk az oldalt a böngészőben! A Photo2.jpg képe fejjel lefele elenik meg. Ha újra lekérdezzük az oldalt, a kép újra felfelé tükrözve jelenik meg. Kép elforgatásához ugyanezt a kódot használjuk, kivéve, hogy a FlipVertical vagy FlipHorizontal hívása helyett a RotateLeft-et vagy a RotateRight-ot hívjuk.

Vízjel hozzáadása képhez
Ha a weboldalunkhoz képeket töltünk fel, szükségünk lehet vízjel hozzáadására a képek mentése és megjelenítése előtt. Gyakran azért használnak vízjelet, hogy szerzői jogokról szóló információkat rakjanak a képre, vagy hogy reklámozzák a márkanevüket.

1. Hozzunk létre egy új oldalt Watermark.cshtml névvel! 2. Cseréljük ki a meglévő kódot a következőre:
@{ 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" />

Honlapépítés a XXI. században 10. fejezet – Munka képekkel

177

cshtml névvel! 2.AddImageWatermark(WatermarkPhoto. fejezet – Munka képekkel 178 . amit logóként szeretnénk használni. században 10. width: 80. Honlapépítés a XXI. Az AddTextWatermark hívásához a „My Watermark” szöveget adjuk. 3. és a betűtípust Arialra állítjuk. Néha egy céglogót használnak vízjelként. hogy legyen. a kép az <img> elem src attribútumának @imagePath-ra állításával jelenik meg az oldalon. Vízjel hozzáadásához a WebImage helper AddTextWatermark metódusát használja mentés előtt.</div> } </body> </html> Ez a kód olyan. betűtípust. } } <!DOCTYPE html> 20. photo. ha 80 pixel széles és 20 pixel magasra van állítva.cshtml oldal kódja korábbról (bár most a Photo3. photo. if(photo != null){ imagePath = @"images\Photo4. Ahogy korábban láttuk. nem lehet írásvédett. padding:10).jpg"). ami tisztán látható akkor is.jpg").jpg-re! Ez egy olyan kép kell. betűméretet és a vízjel elhelyezkedését is beállíthatjuk. verticalAlign:"Bottom".jpg fájlt használja). 1. height: horizontalAlign:"Center". Hozzunk létre egy új oldalt ImageWatermark.Save(@"~\" + imagePath).(Bár itt nem mutatjuk be. de a WebImage segítségével az átlátszóságot.) Amikor mentjük a képet. Cseréljük ki a meglévő kódot a következőre: @{ var imagePath = "". Futtassuk az oldalt a böngészőben! Kép használata vízjelként Vízjelként használhatunk szöveg helyett másik képet is. WebImage WatermarkPhoto = new WebImage(@"~\" + @"\Images\MyCompanyLogo. 3. a betűszínt sárgára állítjuk. WebImage photo = new WebImage(@"~\Images\Photo4. vagy a szerzői jogokról szóló információknál is szöveg helyett képet használnak. és nevezzük át a képet MyCompanyLogo.jpg". opacity:100. Rakjunk egy olyan képet az images mappába. mint a Flip.

szélességét 80 pixelre. Mint korábban. mint a célkép. Ha a vízjel kép nagyobb. Futtassuk az oldalt a böngészőben! Honlapépítés a XXI. semmi sem történik. a padding pedig 10 pixelre. magasságát 20 pixelre állítjuk. Ebben az esetben az AddImageWatermark-ot hívjuk a vízjel célképhez (Photo3.jpg) való hozzáadásához. a képet az <img> elemmel és egy dinamikus src attribútummal jelenítjük meg. Az átlátszóság 100%-ra van állítva. A MyCompanyLogo. és a vízjel padding-ot nullára állítjuk. a vízjelet figyelmen kívül hagyja. 4. Ha a vízjel kép nagyobb. Amikor az AddImageWatermark-ot hívjuk. mint a célkép. században 10. mielőtt elmentenénk a képet.jpg a célkép aljára középre kerül elhelyezésre.<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 variációja a korábbi példákban látott kódoknak. fejezet – Munka képekkel 179 .

Lejátszáshoz szükségünk van a média fájl elérési útvonalára. Hogyha nem adunk meg semmit sem. a lejátszó az alapértelmezett értékeket használja. valamint MP3 (. A viedo automatikusan elindul. a lejátszó az alapértelmezett értékeket használja. 180 Honlapépítés a XXI. fejezet – Műveletek videókkal Van egy videónk? Ha igen. akkor könnyen megjeleníthetjük egy weboldalon. A video automatikusan elindul.NET segítségével képesek vagyunk lejátszani Flash (. Az útmutatóból megtudhatjuk:    Hogyan válasszunk videólejátszót? Hogyan adjunk egy weblaphoz videót? Hogyan állítsuk be a lejátszó tulajdonságait? Ezek a fejezetben bemutatott újdonságai az ASP. a többi paramétert nem kötelező megadnunk. melyet a Media Player aktuális verziója alapján fog beállítani. mint ezek:    A video az alapértelmezett szélességgel és magassággal fog megjelenni.wmv). háttérszín nélkül. A video úgy van méretezve.wmv fájlok). melyet a Flash aktuális verziója alapján fog beállítani.NET weboldalaknak:  A video helper. A video egy ablakban fog lejátszódni.swf). A video helper leegyszerűsíti a beágyazott videók folyamatait a weboldalon.NET weboldalakban le tudunk játszani egy videót a video helper használatával. Legalább a fájl elérési útját biztosítanunk kell. hogy a teljes videót megjelenítse. Az ASP. A video folyamatosan ismétlődik. és általában mindegyikhez különböző lejátszó szükségeltetik. valamint Silverlight (. A video helper a következő lejátszókat támogatja:    Adobe Flash Windows Media Player Microsoft Silverlight A Flash lejátszó A video helper flash lejátszója lehetővé teszi nekünk a Flash videók (. amelyeket általában a videók hozzáadásához használunk.xap) videókat. Tipikus beállítások:      A video az alapértelmezett szélességgel és magassággal fog megjelenni.mp3 fájlok) lejátszását.11. A MediaPlayer lejátszó A video helper MediaPlayer lejátszója lehetővé teszi nekünk a Windows Media Video (. fejezet – Műveletek videókkal . mikor az oldal betölt. különböző úton kell konfigurálni a lejátszót. csak az elérési utat.swf fájlok) lejátszását a weboldalon. csak az elérési utat.wma fájlok). Hogyha nem adunk meg semmit sem. nem pedig úgy. Windows Media Audio (. mikor az oldal betölt. hogy a szélek levágásával kitöltse a keretet. Videolejátszó kiválasztása Rengeteg video fájlformátum létezik. században 11. A video csak egyszer fog lejátszódni (nem ismétlődik). mivel automatikusan legenerálja az object és az embed HTML elemeket. Az ASP. Media Player (. míg azt le nem állítjuk.

wmv fájlok). a böngésző gondoskodik arról. Adjuk hozzá a következő kódot a laphoz: <!DOCTYPE html> <html> <head> <title>Flash Video</title> </head> <body> @Video.xap fájlokat a Visual Studióban.swf) lejátszása Az eljárás megmutatja nekünk. A többi paramétert nem kötelező megadnunk. hogy legyen egy Media nevű mappánk a webhelyen. Windows Media Audio (.swf nevű Flash videót. A feladathoz szükségünk van arra. és nevezzük el FlashVideo.Flash(path: "Media/sample. Be kell állítanunk az elérési út paramétereit. A video helper a következő MIME-típusokat használja:    application/x-shockwave-flash application/x-mplayer2 application/x-silverlight-2 Flash videók (. a részegységekben kezelt kódokat és tetszőleges erőforrásokat tartalmaz. A video egy ablakban fog lejátszódni.swf". akkor adjuk hozzá az ASP. Mikor a Silverlight lejátszót úgy használjuk. menu: false. században 11. play: true.xap fájlban tárolt beállításokat is. a Silverlight lejátszó háttérszín nélkül fogja megjeleníteni a videót. ami tartalmazza a . width: "400". scale: "exactfit".wma fájlok). ahogyan az a 2. A hozzunk létre egy új lapot. windowMode: "transparent") </body> </html> Honlapépítés a XXI.cshtml-nek! 3. A MIME-típus egy fájl tartalmi vagy média típusa. quality: "medium". amely az . height: "600". Megjegyzés: Ha még nem ismernénk a Silverlightot: a . Mint Silverlight application project. hogy a Silverlight alapú alkalmazáscsomagra mutasson.NET Web Helpers Libraryt a webhelyünkhöz. fejezet – Műveletek videókkal 181 . hogyan játsszunk le egy sample. MIME típusok Amikor a böngésző letölti a fájlt. bgColor: "red".  A lejátszó kijelzi a teljes kezelőfelületet a felhasználói felületen.mp3 fájlok) lejátszását. 1.swf fájlt. fejezetben le van írva! 2. A Silverlight lejátszó A video helper Silverlight lejátszója lehetővé teszi nekünk a Windows Media Video (. hogy csak a szükséges paramétereket adtuk meg.xap fájl egy tömörített állomány.xaml fájlban szerkezeti utasításokat. készíthetünk . valamint MP3 (. Ha még nem tettük volna meg. A Sliverlight lejátszó használja az általunk megadott beállításokat és a . A szélesség és magasság paramétereit is be kell állítanunk. loop: true. hogy a fájl típusa megegyezzen a megjeleníteni kívánt weboldal MIME típusával.

Beállíthatjuk a Flash video quality paraméterét low-ra. medium-ra. Alapértelmezés szerint a windowMode window-ra van állítva. fejezet – Műveletek videókkal 182 .scale: "exactfit") A Flash lejátszó támogatja a windowMode nevű video módot. hogyan használjuk a scale paramétereit: // Set the Flash video to an exact size @Video. hogy a széleken fekete sávok lesznek láthatók. height: "100". mielőtt futtatjuk. de lehet. autolow-ra. opaque-ra.swf".swf". Hogyha nem adjuk meg a méretezési paramétereket. megtartva az eredeti képarányt. valamint transparent-re állíthatjuk. hogy a Flash video a meghatározott méretekkel játszódjon le:    showall: Ez a teljes videót láthatóvá teszi. században 11. Futtassuk az oldalt egy böngészőben! ( Győződjünk meg arról. A következő példa mutatja. window-ra. high-ra és best-re.Flash(path: "Media/sample. width: "1000". // Set the Flash video quality @Video. Előfordulhat azonban. a teljes videó megjelenik az eredeti képaránnyal bármilyen vágás nélkül.4. miközben megőrzi az eredeti képarányt.) Az oldal és a video automatikusan meg fog jelenni. hogy levágja egy részét.Flash(path: "Media/sample. ami a videót egy Honlapépítés a XXI. hogy az oldal ki van választva a Files munkaterületen. noorder: Ez átméretezi a videót. exactfit: Ez a teljes videót láthatóvá teszi az eredeti képarány megtartása nélkül. quality: "autohigh") A következő módon beállíthatjuk. ekkor fennáll a torzulás veszélye.

Ha még nem tettük volna meg. fejezet – Műveletek videókkal 183 . volume: 75) </body> </html> 4. stretchToFit: true. hogy a weboldal háttere megjelenjen a videón keresztül. Készítsünk egy új. MediaPlayerVideo. században 11. feltételezve azt. Futtassuk az oldalt egy böngészőben! A video automatikusan be fog tölteni és le fog játszódni. Honlapépítés a XXI. Media Player (. A transparent beállítás hagyja.MediaPlayer( path: "Media/sample. enableContextMenu: true. height: "600".wmv". uiMode: "full".külön ablakban jeleníti meg a weboldalon. mute: false. 1. ahogy az a 2. akkor adjuk hozzá az ASP. playCount: 2. Adjuk hozzá a következő utasítást a laphoz: <!DOCTYPE html> <html> <head> <title>MediaPlayer Video</title> </head> <body> @Video.cshtml nevű lapot! 3. width: "400". amit a Media mappában találunk.wmv) videók lejátszása A következő feladat megmutatja nekünk. hogy van a videón átlátszó rész. Az opaque beállítás mindent a video mögé rejt a weboldalon. hogyan játsszunk le egy sample.wmv nevű Windows Media videót. autoStart: true. fejezetben le van írva! 2.NET Web Helpers Libraryt az oldalunkhoz.

században 11. uiMode: "mini") Alapértelmezetten a hang be van kapcsolva. ha a mute paramétert igazra állítjuk: // Play the MediaPlayer video without audio @Video. ha a volume paraméter értékét 0 és 100 között állítjuk. volume: 75) Silverlight videók lejátszása A következő feladat megmutatja nekünk.MediaPlayer(path: "Media/sample.swf". none-ra. hogyan használjuk az uiMode paramétert: // Set the MediaPlayer control UI @Video. Íme egy példa: // Play the MediaPlayer video without audio @Video. Ezek a kezelőszervek akkor is meg fognak jelenni.MediaPlayer(path: "Media/sample. hogy megszabjuk. valamint full-ra. amely azt jelzi. vezérlőgombokkal és hagerőszabályzóval fog megjelenni a video ablaka mellett. melyik irányítóeszközök jelenjenek meg a felhasználói felületen. hogy hányszor kell automatikusan lejátszania a videót: // Set the MediaPlayer video playCount @Video. Íme egy példa. fejezet – Műveletek videókkal 184 . a video az állapotablakkal.MediaPlayer(path: "Media/sample. Beállíthatjuk invisible-re. amelyet egy Media nevű mappában lévő Silverlight . Amikor nem határozzuk meg az uiMode paramétert.Megadhatunk a playCountnak valamilyen egész számot. Alapértelmezetten ez az érték 50.xap oldal tartalmaz.wmv".wmv". playCount: 2) Az uiMode paraméter lehetőséget ad arra.wmv". mute: true) A Media Player video hangerejét irányíthatjuk.Flash(path: "Media/sample. ha a lejátszót hangfájlok lejátszására használjuk. keresősávval. Honlapépítés a XXI. Lenémíthatjuk a hangot. hogyan játsszunk le videót. mini-re. mikor a video lejátszás alatt van.

ahogyan azt a 2. autoUpgrade: true) </body> </html> 4.1. fejezet – Műveletek videókkal 185 . fejezetben olvashattuk! 2. században 11. bgColor: "red". Futtassuk az oldalt egy böngészőben! További források angolul    Silverlight Overview Flash OBJECT and EMBED tag attributes Windows Media Player 11 SDK PARAM Tags Honlapépítés a XXI. Készítsünk egy új. akkor adjuk hozzá az ASP. Adjuk hozzá a következő utasítást a laphoz: <!DOCTYPE html> <html> <head> <title>Silverlight Video</title> </head> <body> @Video.Silverlight( path: "Media/sample.cshtml nevű oldalt! 3. Ha még nem tettük volna meg. width: "400".xap". height: "600". SilverlightVideo.NET Web Helpers Libraryt az oldalunkhoz.

jelszó). hogy egy új felhasználó regisztrált. A WebMail helper használatához hozzáférésre van szükségünk egy SMTP szerverhez. Megerősítő üzenetet küldhetünk a felhasználónak vagy értesítéseket magunknak (például. hogy ez a példa egyszerű maradjon. ami továbbítja az üzeneteket a címzett szerverére. A második lapon a kód értelmezi a felhasználó információit. hogy rendelkezünk náluk e-mail fiókkal. hogyan küldhetünk automatikus e-mail üzenetet webhelyünkről. Ez esetben kérjük a szolgáltató segítségét a beállítások elvégzéséhez. (Ez majdnem mindig 25. A port száma. ahol használni fogjuk. és küld egy e-mail üzenetet.Net szolgáltatást vezetjük be a fejezetben:  A WebMail helper. E-mail üzenet küldése a webhelyről Sokféle okból kellhet a webhelyünkről e-mailt küldeni. Amire általában szükségünk van:    Az SMTP szerver neve. mintha egy technikai támogatást kérő űrlapot töltene ki. a kód inicializálja a WebMail helpert közvetlenül azo az oldalon. Azonban lehetséges. Ez egy megerősítő üzenet a probléma bejelentésének fogadásáról. a rendszergazda. hogy a szolgáltatónk megköveteli az 587-es port használatát. fejezet – E-mail hozzáadása a webhelyünkhöz 186 .) A WebMail helper egyszerűvé teszi nekünk ezeket a műveleteket. Az első oldal egy űrlap. Ha saját vállalati rendszerünkön fut a webhely. Ha webhelyünk egy tárhely szolgáltatónál üzemel. amin a felhasználó egy leírást adhat. Ebben a feladatban két weboldalt készítünk.12. akkor lehetséges.(SMTP= Simple Mail Transfer Protocol) Az SMTP szerver egy e-mail szerver.hogy az inicializálja a WebMail helpert az Honlapépítés a XXI.) Azonosítók (felhasználónév. Az első oldal elküldi az információit a második lapnak. Otthoni futtatás során akár saját e-mail fiókunkkal is tesztelhetjük a rendszert. században 12. Ez a kimenő oldala az e-mailnek. vagy az IT részleg tud segíteni az SMTP szerver beállításaiban. Megjegyzés: Annak érdekében. fejezet – E-mail hozzáadása a webhelyünkhöz Ebben a fejezetben megtanuljuk. Ugyanakkor a valós webhelyen jobb ötlet az ehhez hasonló initializáló kódot beletenni egy globális fájlba . Amit megtanulunk:   Hogyan küldjünk egy e-mail üzenetet a weboldalról? Hogyan csatoljunk fájlt az e-mail üzenethez? Ezt az ASP.

fejezetet (A Site-Wide viselkedés testreszabása)! 1.cshtml van megadva.cshtml néven és írjuk be a következő kódot: <!DOCTYPE html> <html> <head> <title>Request for Assistance</title> </head> <body> <h2>Submit Email Request for Assistance</h2> <form method="post" action="ProcessRequest. hogy az űrlap elem action attribútumának a ProcessRequest. nem pedig az éppen megnyitottra.SmtpServer = "your-SMTP-host". WebMail. Adjuk hozzá a weboldalhoz az ASP.SmtpPort = 25. Adjunk hozzá egy új lapot a website-hoz ProcessRequest. Készítsünk egy új weboldalt! 2. WebMail." + customerName. var customerRequest = Request["customerRequest"]. és írjuk bele a következő kódot: @{ var customerName = Request["customerName"]. WebMail. WebMail. hogy az űrlapot a megadott helyre küldi az oldal. try { // Initialize WebMail helper WebMail. fejezetben leírtak szerint (ha még nem tettük volna meg)! 3.cshtml néven.összes fájlnak a weboldalon.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> Figyeljük meg. 4.NET Web Helpers Library-t a 2. WebMail. További információkért nézzük meg a 19.From = "your-email-address-here". fejezet – E-mail hozzáadása a webhelyünkhöz 187 . subject: "Help request from . Adjunk hozzá egy új weboldalt EmailRequest.UserName = "your-user-name-here". } catch (Exception ex ) { Honlapépítés a XXI.EnableSsl = true.Send(to: "target-email-address-here". Ez azt jelenti. body: customerRequest ). // Send email WebMail.Password = "your-account-password". században 12.

NET webszerkesztésbe Razor szintaxissal fejezetet. fejezet – E-mail hozzáadása a webhelyünkhöz 188 . Amikor futtatjuk az oldalt.  Állítsuk be a target-email-address-here-t annak a személynek az e-mail címére. ami megerősíti az üzenetet és elküldi az e-mail üzenetet. amiről az üzenetet elküldjük. (További információkért a try/catch blokkokkal vagy a <text> címkével kapcsolatban nézzük meg a 3. meg fogjuk kapni az üzenetet. században 12. Futtassuk az EmailRequest. <text> címkével jelölhetünk több sornyi szöveget a kódon belül. és kattintsunk a Submit gombra! Átirányít minket a ProcessRequest. a password. Adjuk meg a nevünket és a probléma leírást. hogy az oldal ki van választva a Files munaterületen!) 7.<text> <b>The email was <em>not</em> sent. Ez lesz az az e-mail cím. akinek el szeretnénk küldeni az üzenetet. Normálisan ez a címzett e-mail címe. az oldal feldob egy üzenetet.</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 kódban az űrlapmezők elküldött értékeivel dolgozunk. Ebben az esetben a szöveget alkotó értékeket összekapcsoljuk az űrlapból nyert értékekkel. 5. a user name.  Állítsuk be a your-account-password-öt az SMTP szerver felhasználói fiókjának jelszavára. Honlapépítés a XXI.cshtml oldalra. Ha az e-mail elküldésére tett kísérlet sikertelen (például helytelenek a beállítások). Ennek az oldalnak a belsejében van egy try/catch block. and a "from" address. Módosítsuk a következő e-mailhez kapcsolódó beállításokat a kódban:  Állítsuk be a your-SMTP-host-ot annak az SMTP szervernek a nevére. <b>@customerName</b>. amihez hozzáférésünk van!  Állítsuk be a your-user-name-here-t az SMTP szerverünk felhasználónevére!  Állítsuk be a your-email-address-here-t a saját e-mail címünkre. Ezután meghívjuk a Webmail helper Send metódusát az e-mail üzenet létrehozásához és elküldéséhez. </text> } } <!DOCTYPE html> <html> <head> <title>Request for Assistance</title> </head> <body> <p>Sorry to hear that you are having trouble.cshtml oldalt a böngészőnkben! (Futtatás előtt bizonyosodjunk meg arról. fejezet – Bevezetés az ASP. de a tesztelés érdekében a saját e-mail címünket adjuk meg. 6.</b> The code in the ProcessRequest page must provide an SMTP server name.

cshtml nevű oldalt és írjuk be a következő kódot: <!DOCTYPE html> <html> <head> <title>Attach File</title> </head> <body> <h2>Submit Email with Attachment</h2> <form method="post" action="ProcessFile. 1. consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ebben a feladatrészben készítünk egy szövegfájlt és két HTML oldalt. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. és lássuk el a következő kóddal: Honlapépítés a XXI. fejezet – E-mail hozzáadása a webhelyünkhöz 189 . Készítsünk egy ProcessFile. 3.cshtml nevű oldalt. Készítsünk egy SendFile. században 12. Ut enim ad minim veniam. A szövegfájlt fogjuk használni e-mail csatolmánynak. Hozzunk létre egy MyFile. Másoljuk ki a lenti szöveget és illesszük be a fájlba: Lorem ipsum dolor sit amet.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.Fájl küldése e-mail használatával Küldhetünk fájlokat is az e-mail üzenethez csatolva.txt nevű szöveges dokumentumot! 2.

században 12. WebMail. thank you for your interest. subject: subjectLine.From = "your-email-address-here". <br />From: " + customerName. var subjectLine = Request["subjectLine"]. // Create array containing file name var filesList = new string [] { fileAttachment }.EnableSsl = true. // Attach file and send email WebMail. de tesztelésre saját magunknak küldjük el!) 6.cshtml oldalt a böngészőben! Honlapépítés a XXI.Password = "your-account-password".SmtpServer = "your-SMTP-host".SmtpPort = 25. } catch (Exception ex) { <text> <b>The email was <em>not</em> sent. fejezet – E-mail hozzáadása a webhelyünkhöz 190 . WebMail. WebMail. Futtassuk a SendFile. WebMail. </text> } } <!DOCTYPE html> <html> <head> <title>Request for Assistance </title> </head> <body> <p><b>@customerName</b>. and a "from" address. amihez hozzáférésünk van!  Állítsuk be a your-user-name-here-t az SMTP szerverünk felhasználónevére!  Állítsuk be a your-email-address-here-t a saját e-mail címünkre! Ez lesz az az e-mail cím. WebMail. body: "File attached.Send(to: "target-email-address-here".@{ var customerName = Request["customerName"].UserName = "your-user-name-here". most is el tudnánk küldeni a levelet valaki másnak.</b> The code in the ProcessFile page must provide an SMTP server name. try { // Initialize WebMail helper WebMail. a user name.</p> <p>An email message has been sent to our customer service department with the <b>@fileAttachment</b> file attached. Módosítsuk a következő e-mailhez kapcsolódó beállításokat a példakódban:  Állítsuk be a your-SMTP-host-ot annak az SMTP szervernek a nevére.</p> </body> </html> 5. a password.  Állítsuk be a your-account-password-öt az SMTP szerver felhasználói fiókjának jelszavára!  Állítsuk be a target-email-address-here-t a saját címünkre! (Mint az előbb. filesToAttach: filesList). amiről az üzenetet elküldjük. var fileAttachment = Request["fileAttachment"].

Kattintsunk a Submit gombra! Mint korábban. most is át leszünk irányítva a ProcessFile. ami megerősíti az üzenetet.txt). hogy csatoljuk az e-mailhez! 8. fejezet – E-mail hozzáadása a webhelyünkhöz 191 . További forrás angolul  Simple Mail Tranfer Protocol Honlapépítés a XXI.7. században 12. a tárgyat és a szöveges dokumentum nevét (MyFile. Adjuk meg a nevünket. és elküldi az levelet a csatolt fájllal.cshtml oldalra.

Így biztosan megtalálják a webhelyünkön azt. a helper készít egy választógombot. Az egyszerű lehetőségben a helper készít egy szövegdobozt. Adjunk egy mezőt. használjuk a Bing helpert és (opcionálisan) adjuk meg a kereséshez webhely URL-jét! A Bing helper elkészít egy szövegdobozt. mintha a felhasználó a Bing főoldalán keresett volna: Honlapépítés a XXI. amivel a felhasználó a weben kereshet az oldal elhagyása vagy új lap nyitása nélkül!  Hogy keresővel lássuk el wehelyünket. Mit fogunk tanulni:  Hogyan tegyük lehetővé. ami tartalmazza a Bing kereső ikont. amivel a felhasználók az oldalon kereshetnek. a találatokat megjeleníthetjük a webhely elhagyása nélkül is. az iskola webhelyén kereső mezőt. hogy webhelyünkön kereshessenek a felhasználók? Ezt az ASP. Két módja van a keresés beállításának: az „egyszerű” és a „haladó” lehetőség. amivel a felhasználók egyszerűen kereshetnek kapcsolódó weboldalakon! Például ha a webhelyünk egy iskolai focicsapat oldala. A kereső hozzáadása a következő előnyökkel jár:   Adjunk hozzá egy „Search this site” gombot. Ha a felhasználó rákattint a keresésre. hogyan keressünk egy weboldalt a Bing keresőmotor használatával.bing.NET funkciót ismertetjük a fejezetben:  A Bing helper Keresés a webhelyünkön Ha keresőt adunk a webhelyünkhöz. A találatok egy új ablakban fognak megjelenni. amire rákattintva kereshetünk: Ha már megadtuk webhelyünk címét a kereséshez. amiben a felhasználó megadhatja a keresett kifejezést. hogy csak azon a lapon szeretne keresni. az egyszerű beállításnál a kereső csak átirányítja a keresést a Bing oldalára (http://www. században 13. fejezet – Kereső hozzáadása a webhelyünkhöz 192 . fejezet – Kereső hozzáadása a webhelyünkhöz Ebben a fejezetben megtudhatjuk. akkor hozzáadhatunk egy. Adjunk hozzá egy gombot.13. amivel a felhasználó megmondhatja. vagy az egész weben. amit szeretnének megnézni.com/).

1. a helper a keresési találatokat egyből az oldalon jeleníti meg: Részletesen beállíthatjuk a keresési találatok megjelenését. hogy csak továbbirányítana a Bing oldalára. a találatok két fülön jelennek meg (találatok az oldalon. Bing. fejezet – Kereső hozzáadása a webhelyünkhöz 193 . Készítsünk egy új weboldalt! 2. ha már meghatároztunk egy oldalt a kereséshez. így a felhasználó könnyedén tud váltani az oldalspecifikus és a webes keresés között.SiteTitle = "ASP.asp. Ebben a feladatban készítünk egy oldalt. illetve a weben). } <!DOCTYPE html> <html> <head> <title>Custom Bing Search Box</title> Honlapépítés a XXI. Adjunk hozzá egy Search. és írjuk meg a következő kódot: @{ Bing. Azonban ahelyett.NET Custom Search". ami bemutatja mindkét keresési opció használatát. században 13.net". Ahogyan a példa is mutatja.cshtml nevű oldalt.SiteUrl = "www.A haladó beállításoknál a keresődoboz rádiógombok nélkül kerül a lapra.

Kanada).cshtml oldalt a böngészőben! (Futtatás előtt bizonyosodjunk meg arról. fejezet – Kereső hozzáadása a webhelyünkhöz 194 . Honlapépítés a XXI. es-MX (spanyol. Írjunk be egy keresendő kifejezést az egyszerű keresőmezőbe.NET site: <br/> @Bing.</p> Search the ASP. fr-Ca(francia.AdvancedSearchBox( boxWidth: "300px".asp. Megjegyzés: A hely utal az ország/régió és nyelvi beállításokra. helyettesítsük annak az URLjével! Az AdvancedSearchBox metódusban a siteName paramétert használjuk arra.</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. en-GB (angol. A találati panel méreteit a resultWidth és a resultHeight paraméterek tartalmazzák. másodszorra az AdvencedSearchBox metódust (a „kiterjesztett” beállítást). Ez nem jelenti azt.net weboldalon keresünk. A „local codes” kulcsszóra rákeresve találhatunk még több országkódot. és így tovább. NagyBritannia). locale: "en-US") </div> </body> </html> A kódban kétszer hívjuk meg a Bing helpert. Most keressünk a haladó dobozzal! Egy panel fog megjelenni a keresés találataival. A helyek (locale) két részből állnak. A keresődoboz átméretezéséhez a boxWidth paramétert használhatjuk. 3. amit a keresési felületen és a találatoknál használ. mint például en-US (angol.NET site: <br/> @Bing. Ha a saját oldalunkon szeretnénk keresni. A magyar területi beállítások paramétere hu. amin keresni szeretnénk! (Ha nem tesszük meg. 5.) Ebben az esetben a www. hogy csak a megadott nyelvű találatokat listázza a helper. amerikai). a Bing a weben keres. Futtassuk a Search. amit a helper a keresési találatokhoz és a grafikus felülethez használ. hogy az oldal ki van választva a Files munkaterületen!) 4. resultWidth: 600. században 13. amin keresünk. Mindkettő metódusnál a siteUrl paramétert módosítsuk arra az oldalra. Először a SearchBox metódust (az „egyszerű” beállítás).</p> Search the ASP. resultHeight: 900.SearchBox() </div> <div> <h1>Advanced Search Option</h1> <p>The advanced option shows search results directly in this page. és kattintsunk a gombra! A találatok egy új böngészőablakban jelennek meg. hogy megmutassa a találatok panelen annak az oldalnak a nevét. You can specify options to format the results. Mexikó). a színének megadásához pedig állítsuk be a themeColor paramétert! A locale paraméter beállításával meg tudjuk határozni a nyelvet is. themeColor: "Green".

és beállítottuk a Bing helpert az oldalunkon való keresésre. fejezet – Kereső hozzáadása a webhelyünkhöz 195 . században 13. Ha „Keress ezen a lapon” gombot készítettünk. hogy a Bing helper kereshessen. hogy a keresőmotorok megtalálják. és annak tartalmát meg kell vizsgálnia („feltérképeznie”) a Bingnek. Más szóval. amíg az oldalunk elég idős nem lesz ahhoz. nem tudjuk tesztelni a keresési képességet közvetlenül a WebMatrixból.Megjegyzés: Annak érdekében. További források angolul   Make your Website SEO Friendly Locale ID (LCID) Chart Honlapépítés a XXI. addig nem tudjuk tesztelni. a keresett webhelyeknek nyilvánosan elérhetőnek kell lenniük.

században 14. hogyan adjunk Twitter hírfolyamokat az oldalhoz. Weboldalunk linkelése közösségi oldalakon Ha egy ember kedvel valamit az oldalunkon. A Facebook helper. Ezen ikonok megjelenítéséhez adjuk hozzá a LinkShare helpert az oldalunkhoz! A látogatók egyéni ikonokra kattinthatnak. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz 196 . a közösségi hálózatok szolgáltatásainak integrálása az oldalunkra. Készítsünk egy ListLinkShare. és adjuk hozzá a következő kódot: <!DOCTYPE html> <html> <head> <title>LinkShare Example</title> </head> <body> <h1>LinkShare Example</h1> Honlapépítés a XXI. A GamerCard helper. Twitteren vagy hasonló oldalakon. gyakran meg szeretné osztani a barátaival. A fejezetből megtudhatjuk:      Hogyan hivatkozhatnak a látogatók a webhelyünkre? Hogyan adjunk hozzá Twitter hírfolyamot? Hogyan jelenítsünk meg Gravatar.com képeket? Hogyan rakjunk Xbox Gamer kártyákat az oldalakra? Hogyan adjunk az oldalhoz Facebook-os Like gombot? A következő ASP. A Twitter helper. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz Az egyik legjobb módja. hogy olyan ikonokat jelenítünk meg. hogy weboldalunkat még népszerűbbé és közvetlenebbé tegyük. hogyan tudnak a webhelyünk látogatói hivatkozni oldalainkra a Facebook vagy a Digg hálózatában. akkor akkor közzétehetik oldalunk linkjét az adott hálózatban. amire rákattintva megoszthatja az oldalt a Diggen.14. Ebben a fejezetben megtanuljuk. Facebookon. és hogyan színesítsük webhelyünket Gravatar képekkel és Xbox Gamer kártyákkal. A Gravatar helper. Ezt a műveletet egyszerűvé tehetjük azzal. 1.cshtml nevű lapot. Ha van regisztrált felhasználójuk a közösségi oldalhoz.NET programozási koncepciókat ismertetjük a fejezetben:      A LinkShare helper.

Futtassuk a ListLinkShare.NET előre megírt helperje segít Twitter hírfolyam hozzáadásában. az oldal címét beilleszti paraméterként. kifejezésekre vagy bármilyen kereshető szövegre). hogy az oldal ki van jelölve a Files munkaterületen!) 3. Kattintsunk az ikonok valamelyikére.icio.Profile metódust használjuk a kódban. ha a LinkShare helper fut. Mindkét helpernek magassága.Search metódust használjuk. 2. amit a közösségi oldalra ki fog tenni. Ha a Twitter. Ezenkívül bármilyen szöveget beilleszthetünk mellé. Ha a Twitter. ahol megoszthatjuk a linket a kiválasztott közösségi oldalon. Twitter hírfolyam hozzáadása ASP.us linkre. akkor eljutunk a Save Bookmark oldalra a Delicious webhelyen. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz 197 . században 14. és megjeleníthetjük a találatokat az oldalunkon. Például ha rákattintunk a del. stílusa állítható. ahol van regisztrációnk! A link átirányít minket arra az oldalra. szélességa. akkor megjeleníthetjük a weboldalunkon a konkrét Twitter felhasználó bejegyzéseit. megadhatunk Twitter keresést ( szavakra.cshtml oldalt a böngészőben! (Futtatás előtt bizonyosodjunk meg arról. Honlapépítés a XXI.Share: @LinkShare.GetHtml("LinkShare Example") </body> </html> Ebben a példában.

NET Web Helpers Libraryt a weboldalunkhoz a 2. tehát nincs szükség Twitter felhasználóra a Twitter helperek oldalunkon történő használatához.Search kódrészlet <Insert search criteria here> részét cseréljük ki a keresendő szövegre! 6. Hozzunk létre egy új Twitter. Írjuk be a következő kódot: <!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.A Twitter információk nyilvánosak.Profile("<Insert User Name>")</td> <td>@Twitter.cshtml nevű lapot a webhelyünkön! 3. hogyan készítsünk olyan weboldalt. ha még nem tettük volna meg! 2. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz 198 . fejezetben leírtak szerint. A Twitter. Futtassuk a weboldalt a böngészőben! Honlapépítés a XXI.Profile kódrészben cseréljük ki a <Insert User Name> elemet a megjelenítendő Twitter felhasználónevünkkel! 5.Search("<Insert search criteria here>")</td> </tr> </table> </body> </html> 4. században 14. 1. Adjuk hozzá az ASP. ami mindkét helpert bemutatja. A következő feladat bemutatja. A Twitter.

egyszerűen megjeleníthetjük gravatarját a felhasználó neve mellett.) Amikor információkat jelenítünk meg a felhasználóról. Futtassuk a lapot a böngészőben! Két. Egy másik módja a gravatar használatának az. A Gravatar. nagyobb számok nagyobbra változtatják a képet. Adjuk hozzá a következő kódot: <!DOCTYPE html> <html> <head> <title>Gravatar Example</title> </head> <body> <h1>Gravatar Example</h1> @Gravatar. amikor regisztrálnak webhelyünkön. A második kép az első egy kicsinyített változata.GetHtml("<Your Gravatar account here>") &nbsp.cshtml nevű weblapot! 2. Készítsünk egy Gravatar. A kisebb számok a kisebbre.GetHtml metódus megjeleníti a Gravatar képet a lapon. Az alapméret 80. hogyan tudunk felhasználókat regisztrálni. században 14. hogy az emberek megadják gravatar címüket. ami minket ábrázol.) Ha meg szeretnénk jeleníteni az emberek neve vagy e-mail címe mellett a képüket is. Gravatar segítségével könnyen felismerhetők a felhasználók fórum hozzászólásaikban.Gravatar kép megjelenítése A Gravatar ( „globálisan elismert profilkép”) egy kép.) 4.GetHtml("<Your Gravatar account here>". amit több weboldalon is használhatunk avatarként – vagyis a teljesen publikus profilképünk. @Gravatar.&nbsp. blog kommentjeikben és így tovább. fejezetben megtudhatjuk.&nbsp. 40) </body> </html> A Gravatar. (A 17.com/. 3. akkor használjuk valaki más e-mail címét. az e-mail címünkhöz beállított Gravatar képet látunk az oldalon. (Regisztrálhatjuk a saját Gravatarunkat a gravatar weboldalán http://www. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz 199 . A kép méretének megváltoztatásához meg tudunk adni egy számot második paraméterként.GetHtml metódusban cseréljük ki a <Your Gravatar account here> részt a Gravatar felhasználónk e-mail címére. akkor használjuk a Gravatar helpert! Ebben a példában egy egyszerű gravatart használunk. Honlapépítés a XXI. (Ha nekünk nincs Gravatar accountunk.gravatar. 1. akinek van.

az úgynevezett Gamer Cardokon. században 14. Honlapépítés a XXI.Xbox Gamer kártya megjelenítése Minden online Microsoft Xbox játékos saját azonosítóval játszik. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz 200 . Készítsünk egy új. Futtassuk az oldalt a böngészőben! Az oldalon megjelenik a beállított Gamer kártya. Ha Xbox játékosok vagyunk. meg tudjuk mutatni Gamer kártyánkat a weboldalunkon a GamerCard helper használatával.GetHtml tulajdonságot a játékos kártya tulajdonságainak beállításához! 2. XboxGamer.GetHtml("major nelson") </body> </html> Használjuk a GamerCard.cshtml nevű oldalt és írjuk be a következő kódot! <!DOCTYPE html> <html> <head> <title>Xbox Gamer Card</title> </head> <body> <h1>Xbox Gamer Card</h1> @GamerCard. Az egyes játékosok statisztikái. 1. ezen kívül a játékeredményeik és a legutóbb játszott játékok is megjelennek személyes kártyájukon.

ha több hivatkozás listáját szeretnénk megjeleníteni oldalunkon. hogy azokra közvetlenül hivatkozhassanak a Like gombbal A LikeButton metódussal személyre szabható a Like gomb megjelenése. például:   A link a Like.Helper csomagban érhető el. A Like-oló emberek számának megjelenítése az oldalon: Honlapépítés a XXI. Ez a tipikus eset – a Like gomb megnyomásával arra az oldalra hivatkozunk. A Facebook helper készít egy Like gombot. ami számolja (a Facebookról olvassa). amit külön kell telepítenünk a Package Manager eszköz használatával. hogy mennyi ember kattintott már rá a Like (vagy Tetszik) gombra: Amikor a felhasználó rákattint a Like gombra.Facebook „Like” gomb megjelenítése Egyszerűen megoszthatunk tartalmakat a Facebook ismerőseinkkel a Facebook helper LikeButton metódusával. században 14. és szeretnénk. Lehetőségünk van azonban arra is. hogy a Facebook helper LikeButton metódusa egy általunk megadott linkre hivatkozzon. Megjegyzés: A The Facebook helper a Facebook. ami rámutat a jelenlegi oldalra. Ez akkor hasznos. hogy tetszik neki az oldalunk. egy link jelenik meg a Facebookos üzenőfalán. vagy Recommend linkre mutat. Alapbeállításként a Facebook helper LikeButton metódusa létrehoz egy Like gombot. ahol éppen járunk. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz 201 .

ha még nem tettük meg! 2. fejezetben írtak szerint. buttonLayout: "button_count". A példa teszteléséhez szükségünk van egy Facebook profilra.cshtml néven.font-size:9pt.NET Web site:</p> @Facebook.net/webmatrix". A második példa tartalmaz néhány módosítást. században 14. colorScheme: "dark") </body> </html> Az első Facebook. width: 250.}</style> </head> <body> <p>Points to the current page.LikeButton( href: "http://www. A Like gombra kattintók profilképei:  A Like gomb szélessége és színsémája (light vagy dark) A következő példában készítünk két Like gombot! Egy a jelenlegi oldalra mutat. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz 202 . A gomb stílusának módosításához állítsuk a layout paramétert „button_count”-ra ( a „standard” vagy „box_count” helyett)! A Facebook profilképek Like gomb alatti megjelenítéséhez állítsuk a showFaces paramétert igazra! Végül a színséma beállításához állítsuk a colorScheme paramétert „dark”-ra (alapértelmezetten „light”)! Honlapépítés a XXI. tehát a jelenlegi oldalunkra mutat. Készítsünk egy új weblapot FacebookLikeBtn.Helper könyvtárat a weboldalunkhoz a 2. uses default settings:</p> @Facebook. 1. showFaces: true.LikeButton() <p>Points to the ASP.NET WebMatrix webhelyre). és adjuk meg a következő kódot: <!DOCTYPE html> <html> <head> <title>Facebook 'Like' Button</title> <style>body {font-family:verdana. Használjuk az URL paramétert a Like URL-jének módosításához! A Like Recommend-re módosításához állítsuk be az action paramétert „recommend”-re (az alapértelmezett „like” helyett).asp. a másik pedig egy megadott URL-re (esetünkben az ASP. Adjuk hozzá a Facebook. action: "recommend".LikeButton metódus az alapértelmezett beállításokkal készült.

NET weboldalára mutat! Ha nem vagyunk bejelentkezve. 4. Amint az oldalunk nyilvános lesz. Ha beléptünk. nem fogjuk tudni tesztelni az első linket (amelyik a jelenlegi oldalra mutat). Honlapépítés a XXI. hogy ezt pótoljuk. ami az ASP. Futtassuk a weblapot a böngészőnkben! Az oldalon láthatjuk a módosított Facebook Like gombot. kéri. Kattintsunk a Recommend gombra. a Facebookra. században 14. láthatjuk a Recommend linket az üzenőfalunkon.3. mert a helyi számítógépen tárolt weboldalt a Facebook nem tudja elérni. Ha az oldal teszteléséhez a WebMatrixot használjuk. a link működésbe lép. fejezet – Közösségi hálózatok hozzáadása a weboldalunkhoz 203 .

ami különféle adatokat rögzít a lapról. bejelentkezünk az analizáló szolgáltató weboldalára.15. Több szolgáltató kínál analíziseszközöket. így megállapítva. hogyan böngésznek a felhasználók webhelyünkön. vagy a layout oldalba beilleszteni. Többféle jelentést láthatunk az oldalról. vagy egy olyan HTML kódhoz adni. (Érdemes ezt a kódot a láblécbe. Milyen oldalon voltak az emberek. Mikor látogatták meg a honlapot. a szkript információkat küld a lapról az analizáló szolgáltatónak. ilyen a Google. A fejezetből megtudhatju:  Hogyan küldjünk információkat a weboldalunkról egy analizáló szolgáltatóhoz? A következő ASP. ami tartalmazza a felhasználói fiókunk azonosítóját. a Yahoo. melyben a weboldal forgalmát vizsgáljuk. a StatCounter. mielőtt a miénkre látogattak? Ez segít kideríteni. a forgalom melyik linkekről. században 15. Amikor látni szeretnénk az oldalunk statisztikáit. A követzni kívánt weboldalhoz hozzáadjuk ezt a kódtöredéket. és még sok más. Látogatások információinak követése (Analízis) Analízisnek nevezzük azt a folyamatot. érdemes lehet követni annak forgalmát. keresőkről jött. fejezet – Forgalomanalízis 204 . és melyik lapok a legnépszerűbbek az oldalon. Ez elárulja.NET programozási funkciót ismerhetjük meg a fejezetben:  Az Analyitics helper. A szolgáltató küld nekünk egy rövid JavaScript kódot. fejezet – Forgalomanalízis Miután üzembe helyeztük webhelyünket. ami minden lapon megtalálható. Oldalunk forgalmának vizsgálatához először regisztrálnunk kell valamelyik szolgáltatónál. Mennyi ideig maradtak az emberek az egyes lapokon? Ebből kiderül. például:       Az egyes lapok nézettségét.) Amikor a felhasználó lekéri az oldalt. mennyire kötöttük le a látogató figyelmét. és meddig maradtak rajta? Melyik országokból látogattak a lapra? Milyen böngészőket és operációs rendszert használtak a látogatók? Honlapépítés a XXI. (nagyjából) hány ember látogatta az oldalt.

hova és hogyan illesszük be a JavaScript kódot.GetYahooHtml és Analytics. használhatjuk azt is. ( StatCounter-hez szükségünk lehet további értékek megadására is. a következő helpereket használjuk az előző helyett: Honlapépítés a XXI. ami a GetGoogleHtml helpert használja. Ha mindent a saját gépünkön tesztelünk. fejezet – Forgalomanalízis 205 . különben a böngésző nem fogja futtatni a scriptet. Készítsünk egy Analytics. Ha más szolgáltatót használunk.cshtml layout lapot és írjuk be a következő kódot: <!DOCTYPE html> <html> <head> <title>Analytics Test</title> </head> <body> <h1>Analytics Test Page</h1> <p>Lorem ipsum dolor sit amet.NET több analizáló helpert tartalmaz (Analytics. és rögzítsük a felhasználónevet! 2. Készítsünk fiókot a Google Analyticsnél. Analytics. Ha már regisztráltunk egy másik szolgáltatónál.GetStstCounterHtml). regisztráljuk a webhelyünk Url-jét. hogy kitaláljuk. hogy hozzáadjuk a helpert az oldalhoz. Az egyetlen szükséges információ a felhasználónevünk.Az ASP. Megjegyzés: Amikor elkészítjük az analízishez a felhasználónevet. az élesben futó webhely már fog információkat küldeni az analizáló szolgáltatónak. hogyan adjunk analizáló helpert az oldalunkhoz. tehát nem tudunk adatokat rögzíteni és statisztikákat nézni. 1. consectetur adipisicing elit. században 15. 2010 MySite </div> @Analytics. Ez az eljárás azonban megmutatja.GetGoogleHtml("myaccount") </body> </html> Megjegyzés: Az Analytics helper meghívását muszáj a weblap body részében megtenni (a </body> jel előtt). mindössze annyit kell tennünk. </p> <div id="footer"> &copy. amik egyszerűvé teszik az analizáláshoz használt JavaScript kódrészletek kezelését. Ahelyett.GetGoogleHtml. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. nem a valós forgalmat fogjuk analizálni. Amikor publikáljuk az oldalt.) Ebben az eljárásban készíteni fogunk egy layout oldalt.

js' type='text/javascript'%3E%3C/script%3E")). </script> <script type="text/javascript"> try{ var pageTracker = _gat. Lépjünk be a Google Analytics weboldalára. Futtassuk a lapot a böngészőben! (A futtatás előtt bizonyosodjunk meg arról. pageTracker. fejezet – Forgalomanalízis 206 .GetYahooHtml("myaccount") (StatCounter) @Analytics.com/ga.</p> <div id="footer"> &copy.location. } catch(err) {} </script> </body> </html> 6." : "http://www. document. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."). Honlapépítés a XXI. A böngészőben nézzük meg az oldal forráskódját! Így láthatjuk az elkészített analizáló kódot: <!DOCTYPE html> <html> <head> <title>Analytics Test</title> </head> <body> <h1>Analytics Test Page</h1> <p>Lorem ipsum dolor sit amet. és vizsgáljuk meg az oldalunk statisztikáit! Ha a webhely már élesben fut.GetStatCounterHtml("project". 2010 MySite </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.  (Yahoo) @Analytics. században 15.protocol) ? "https://ssl. Cseréljük ki a myaccount szöveget az első lépésben elkészített fióknévvel._getTracker("myaccount"). consectetur adipisicing elit. láthatjuk a bejegyzéseket a látogatásokról. "security") "partition"._trackPageview(). hogy az oldal ki van választva a Files munkaterületen!) 5. 4. 3.write(unescape("%3Cscript src='" + gaJsHost + "googleanalytics.

Ez nem egy való világban működő példa. ami egyszerűvé teszi a gyorsító tár hozzáadását az oldalhoz. a webszervernek van némi dolga a kérés teljesítéséhez. A fejezetből megtudhatjuk:  Hogyan használjuk a cache-t az oldal sebességének növeléséhez? Ezt az ASP. Amikor az adott idő letelt. Néhány oldalhoz a szervernek (viszonylag) időigényes feladatokat kell elvégeznie. Ha ugyanazt az adatot többen lekérik. hogy bemutassuk a gyorsító tárazást működés közben. A gyorsítótárazott információt eltároljuk a webszerver memóriájában. hanem akkor is. Azonban egy jó módja. században 16. elég csak egyszer legenerálni. Ebben az eljárásban készítünk egy oldalt. ASP. Mivel ezek az információk nem változnak gyakran (például két órás időtartamon belül) és a külső hívások sávszélességet és időt igényelnek. Hozzunk létre egy WebCache. } if (cacheHit == false) { Honlapépítés a XXI. érdemes ezt az információt gyorsítótárazni. 2.16.NET funkciókat ismerhetjük meg a fejezetben:  A WebCache helper. amikor valaki lekér egy oldalt a webhelyünkről. Írjuk meg a következő kódot: @{ var cacheItemKey = "Time". az információ automatikusan törlődik a cacheből. Még ha egy-egy ilyen feladat nem is tart sokáig. hogy a weboldalunkon megjelenítjük a jelenlegi hőmérsékletet és időjárást. A tárolás ideje másodpercektől napokig állítható. Cache-elés a weboldal sebességének növeléséhez Minden alkalommal. A ritkán változó információkat általában cache-eljük. ami gyorsító tárazza a jelenlegi időt. Ezen típusú információkért valószínűleg egy külső szolgáltató felé küldünk kérést. hogy eltároljuk azon adatok értékeit a gyorsítótárban (cacheben). A webhely teljesítménye javítható a gyorsítótár használatával. előállításuk pedig hosszú folyamat. fejezet – Gyorsítótárazás a webhely teljesítményének növeléséhez Fel tudjuk gyorsítani webhelyünket azzal. nagy forgalmú webhely esetén a rengeteg egyedi kérés kihathat az egész webhely teljesítményére. és az adatok cache-elését. majd eltárolni a cache-ben. if (time == null) { cacheHit = false. Képzeljük el. fejezet – Gyorsítótárazás a webhely teljesítményének növeléséhez 207 . var time = WebCache. melyek ritkán változnak. és azt nem kell változtatni a felhasználók és az idő függvényében. elég csak a gyorsítótárból újraküldeni azt.cshtml nevű lapot a webhelyünkön.Net tartalmazza a WebCache helpert. melyet a cache törlésével tud orvosolni. 1. hiszen gyakran változik és nem bonyolult a kiszámítása. Megjegyzés: A gyorsító tárazott bejegyzések nem csak az idő lejárta miatt törlődhetnek. var cacheHit = true. ha például a szervernek kevés szabad memóriája marad. például adatbázisokból kell lekérdezéseket végrehajtania.Get(cacheItemKey). Ha valaki újra lekéri az adott információt.

time. Ezt a cacheItemKey mutatja a példában. ha adatokat gyorsítótárazunk. WebCache. 3.) Ez a kód a mindig követendő példát mutatja.Get metódus nulla értéket ade.) Az oldal első lekérésénél nincsenek adatok a gyorsítótárban.Set(cacheItemKey. hogy az idő nem változott az előző látogatásunk óta. mindig ellenőrizzük. ezért a kód hozzáadja a time értéket a cache-hez. Ezúttal az idő értéke már gyorsítótárazva van.Now. false). a kód csak beállítja a time változót a cache-ből kiolvasott értékre. vagy bármilyen más okból eltávolításra kerülhet. } else { @:Did not find the time data in the cache. században 16. egy. 1. Ha egy értéket ad vissza (tehát a cache értéke nem nulla). hozzáadja a gyorsítótárhoz és beállítja a lejárati időt egy percre. Futtassuk a WebCache. ( A futtatás előtt bizonyosodjunk meg arról. } } <!DOCTYPE html> <html> <head> <title>WebCache Helper Sample</title> </head> <body> <div> @if (cacheHit) { @:Found the time data in the cache. Azonban.time = @DateTime. 4. ha a cache bejegyzés nem ad vissza értéket (tehát nulla). A kód először a Time cache bejegyzést olvassa.cshtml oldalt a böngészőben. hogy a gyorsítótár bejegyzés lejárhat. Frissítsük a WebCache. </div> </body> </html> Amikor adatokat cache-elünk. hogy a WebCache. a cache bejegyzés törlődik. } </div> <div> This page was cached at @time. a webhelyen egyedülálló név használatával tesszük be a gyorsító tárba. Honlapépítés a XXI. (A gyorsítótárazott elemek alapértelmezett lejárati ideje 20 perc. Ha az oldalt nem kérik egy percen belül.cshtml oldalt a böngészőben. Tartsuk szem előtt. Vegyük észre. hogy az oldal ki van jelölve a Files munkaterületen. hogy minden bejegyzés a cacheben van. Ebben az esetben mi a Time nevű cache bejegyzést használjuk. fejezet – Gyorsítótárazás a webhely teljesítményének növeléséhez 208 . Mielőtt valamit beteszünk a cache-be. a kód beállítja az idő értéket. tehát nem garantálható.

5. Várjunk egy percet a cache kiürüléséig. és utána frissítsük az oldalt. fejezet – Gyorsítótárazás a webhely teljesítményének növeléséhez 209 . Honlapépítés a XXI. és a frissített időt adja a cache-hez. században 16. Az oldal megint jelzi. hogy a time értékét nem találja a gyorsítótárban.

akinek állítja magát. hogy a felhasználók be tudnak jelentkezni – tehát az oldal támogatja a felhasználói fiókokat. amelyen regisztrációs és bejelentkező oldal van. Válasszuk a Starter Site-ot. ebben a fejezetben mi egy egyszerűsített változatot fogunk létrehozni annak érdekében. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása Ebben a fejezetben megtanulhatjuk. hogyan készítsünk olyan oldalt. Indítsuk el a WebMatrixot! 2. hogyan korlátozhatjuk a hozzáférést webhelyünkhöz úgy. így korlátozhatjuk az egyes oldalakhoz való hozzáférést? Hogyan hozzunk létre nyilvános vagy privát oldalakat? Hogyan használjuk a CAPTCHA-t. Bejelentkező és kijelentkező oldalt. Egyes esetekben szükség van a felhasználók azonosításárea. A SimpleMembership helper.NET biztonsági és felhasználói beállításainak alapjait megismerhessük. A WebMatrixban használhatjuk a Starter Site sablont. A nem bejelentkezett felhasználók anonymus (ismeretlen) felhasználóként jelennek meg. amiket csak a regisztrált felhasználók érhetnek el .) Az útmutatóból megtudhatjuk:    Hogyan hozzunk létre olyan weboldalt. hogy a felhasználó az. Egy regisztrációs oldalt. például az oldalunkon lehetnek olyan funkciók. majd bejelentkezhetnek a weboldalra. (Azt is megtudhatjuk. Annak ellenére. A weboldalaknak szükségük van egy felhasználónévre (általában egy e-mail cím) és egy jelszóra. Weboldal létrehozása regisztrációs és bejelentkező oldalakkal 1. hogy megerősítést kapjunk arról.17. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 210 . ami a következőket tartalmazza:     Egy adatbázist. hogy visszajelzést küldjenek vagy hozzászólhassanak valamihez. hogy létrehozzunk egy weboldalt. hogy egyes oldalak csak bejelentkezett felhasználók számára legyenek elérhetőek. hogy a weboldal támogatja a felhasználókat. nem feltétlenül szükséges. hogy megakadályozzuk az automatizált programokat (botokat) a felhasználói fiókok létrehozásában? Ebben a fejezetben bemutatott ASP. mielőtt használni tudják az oldal egyes részeit. hogy belépjenek. amihez akárki hozzáférhet. hogy a Start Site minta automatikusan létrehozza önnek ezeket az oldalakat. Bevezetés a felhasználói fiókokba A weboldalunkat beállíthatjuk úgy. A bejelentkezés és a megerősítés folyamatát azonosításnak nevezzük. században 17. A felhasználók regisztrálhatnak. Ez több okból is hasznos lehet. A Quick Start oldalon válasszuk a Site From Tamplate-et! 3. ahol az új felhasználók regisztrálhatnak. Egy jelszó visszanyerő és visszaállító oldalt. hogy az ASP. majd kattintsunk a OK gombra! Honlapépítés a XXI.NET funkciók:    A WebSecurityk helper. ami a felhasználói fiókok felhasználónevét és jelszavait tárolja. Megjegyzés: Annak ellenére. A ReCaptcha helper.

amik a // karakterekkel megjegyzésként viselkednek (így nem futnak le): @{ WebSecurity. de most egy központi fájlban fogjuk a beállításokat tárolni.UserName-et állítsuk be az SMTP szerverünkhöz tartozó felhasználónevünkre!  A WebMail. "UserProfile".4.SmtpServert a rendelkezésre álló SMTP szerver nevére állítsuk be! A WebMail.EnableSsl-t hagyjuk true beállításon! Ez a beállítás teszi biztonságosság az SMTP szervernek küldött azonosító adatokat azáltal. Mentsük és zárjuk be az _AppStart. // WebMail.cshtml fájlt . ahogyan azt a 12.Password = "your-password". században 17. 6. használhatjuk a WebMail helpert. // WebMail. amiről elküldjük az levelet! 8.From = "your-name-here@example. erre csak akkor van szükség. Távolítsuk el a // karaktereket mindegyik megjegyzés elejéről 7.cshtml-t! 9. Módosítjuk a következő e-mail-lel kapcsolatos beállításokat a kódban: A WebMail.example.SmtpServer = "mailserver. hogyan állítsunk be számos SMTP beállítást egy oldalon. Abban a fejezetben megtudhattuk. // WebMail. hogy kódolja őket.ez egy különleges fájl. // WebMail. Tartalmaz néhány parancsot. Ehhez viszont szükség lesz egy SMTP szerverhez való hozzáférésre.UserName = "username@example.From-ot állítsuk a saját e-mail címünkre! Ez az e-mail cím az. fejezetben megtanulhattuk. ami általában a teljes weboldalra vonatkozó beállításokat tartalmazza. Nyissuk meg a Default. ha megerősítő e-mailt szeretnénk küldeni a regisztrációhoz.EnableSsl = true. true).cshtml fájlt!   Honlapépítés a XXI.Password-t az SMTP szerverünkhöz tartozó jelszóra állítsuk be!  A WebMail.InitializeDatabaseConnection("StarterSite".com". "Email". fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 211 . Ebben a fejezetben ugyanezeket fogjuk használni. A baloldali panelon kattintsunk a Files workspace választógombra! 5. illetve e-mailben szeretnénk elküldeni az elfelejtetett jelszavakat. } Hogy e-mailt tudjunk küldeni. "UserId".com". (Egy regisztrációs adatbázis felállításához nem kell feltétlenül SMTP szervert konfigurálnunk.  A WebMail. // WebMail.com". így nem kell minden egyes oldalon külön elvégeznünk azokat. A weboldal gyökérmappájában nyissuk meg az _AppStart.

majd kattintsunk a Register gombra! Honlapépítés a XXI. Az oldal jobb felső sarkában kattintsunk a Register linkre! 12.cshtml oldalt egy böngészöben 11.10. Írjunk be egy felhasználónevet és egy jelszót. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 212 . Futtassuk a Default. században 17.

fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 213 .Amikor létrehoztuk a weboldalt a Starter Site sablonból. 13. Kattintsunk a hiperhivatkozásra. és egy hiperhivatkozást az oldalra! 14. egy StarterSite.sdf nevű adatbázis is létrejött az oldal App_Data mappájában. században 17. A regisztráció befejezéséhez a rendszer elküld egy levelet a megadott e-mail címre. hogy aktiváljuk a felhasználói fiókunkat! A hivatkozás egy regisztrációt megerősítő oldalt nyit meg. A regisztráció során a felhasználó adatai hozzáadódtak az adatbázishoz. Nyissuk meg a levezőprogramunkat és keressük meg a levelet. ami tartalmazza a megerősítő kódot. Honlapépítés a XXI.

16. Egy működő oldalhoz biztonságos HTTP-t (https://. melyeket csak a bejelentkezett falhasználók (tagok) érhetnek el.0. Kattintsunk az About linkre! Az About. Megjegyzés: Alapbeállításokkal az ASP. Most.EnableSsl=true beállításával. Ebben az eljárásban korlátozni fogjuk az About oldal (About. A bizalmas információkat kódolhatjuk a WebMail. ahogy az előző példában. Honlapépítés a XXI. Lehetséges.NET 2. hogy szeretnénk olyan oldalakat létrehozni. a Login és Register linkek helyett a Logout link jelenik meg.NET lehetővé teszi. továbbítjuk őket a bejelentkező oldalra.NET weboldalak egyszerű szövegként (emberek számára olvasható szöveg) küldik el a szervernek a hitelesítő adatokat. Az SSL-lel kapcsolatban további információért olvassuk el a követekező angol nyelvű oldalt: How To: Protect Forms Authentication in ASP. Az ASP. században 17. Kattintsunk a Login linkre.15. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 214 . hogy a szerverrel közölt bizalmas információkat kódolja. hogy csak a bejelentkezett felhasználók érhetik el. Általában ha ismeretlen felhasználók próbálják elérni az oldalt. hogy úgy konfiguráljuk a weboldalakat. más néven secure sickets layer vagy SSL) érdemes használni azért.cshtml oldal jelenik meg. így csak bejelentkezett felhasználók érhetik el. hogy bejelentkeztünk. Csak felhasználók számára elérhető oldal létrehozása Kezdetben akárki böngészheti a webhely akármelyik oldalát.cshtml) hozzáférését. az oldal tetején megjelent a Welcome Joe üzenet és a Logout hivatkozás. majd lépjünk be a regisztrált felhasználónévve! Miután beléptünk.

cshtml kiterjesztést. Ellenkező esetben a kód meghívja a Respone. A WebMatrixban kattintsunk a Databases workspace seletor-ra! A baloldali panelen nyissuk ki a SarterSite.cshtml oldalra küldi.net</a> </p> Ez a kód teszteli a WebSecurity objektum IsAuthenticated tulajdonságát. amik . Így a biztonsági ellenőrzéssel ellátott layout oldalra hivatkoznánk a többi oldalról ugyanúgy.IsAuthenticated) { Response. Ezek után ellenőrizhetjük a jogosultságokat a szerepek alapján. } @{ Layout = "/_SiteLayout. Page.Redict-et és a felhasználót az Account mappában lévő Login. For more information. fejezet – Egységes megjelenés kialakítása fejezetben tudhatunk meg) 2. ami tartalmazza a biztonsági ellenőrzést. ami a _SiteLayout.cshtml oldalra. fejezet – A Site-Wide viselkedés testreszabása. Kezdésként hozzá kell adnunk a csoport információit a felhasználói fiókok adatbázisához. ami igaz választ ad vissza. Nyissuk meg az About.NET környezetben nem szükséges a kiterjesztés azokban az URL-ekben.Title = "About My Site". Ahhoz.asp. kattintsunk a Logout linkre! 4. azon belül a Tables-t.sdf-ot. Megjegyzés: A példában szereplő URL-ek (mint az ~/Account/Login) nem tartalmazzák a . Az About. és hogyan hozzunk létre olyan oldalt. században 17. vagy létrehozhatunk egy _SiteLayout-hoz hasonló minta oldalt. Kattintsunk az About linkre! Most továbbított minket a Login. ahogy most a Default. Helyette létrehozhatunk csoportokat vagy szerepeket (roles).NET Web Pages.NET home page at <a href="http://www. Az ASP. hozzáadhatjuk minden egyes oldalhoz a biztonsági ellenőrzést.cshtml oldalra mutatnak. } <p> This web page was built using ASP. 1. hogyan készítsünk egy „rendszergazda” szerepet. mert nem vagyunk bejelentkezve.asp.cshtml hivatkozik a _SiteLayout-ra. mielőtt megnézhetnek egy oldalt.1.net" target="_blank">http://www. amik az egyes felhasználókhoz tartoznak.Redirect("/Account/Login"). ha a felhasználó be van jelentkezve. Futtassuk a Default.cshtml-t egy böngészőben! Ha be vagyunk jelentkezve. 3. majd dupla kattintással nyissuk meg a webpages_Role táblát! Honlapépítés a XXI. amihez csak ebben a szerepben (csoportban) lévő felhasználók férnek hozzá. hogy több oldal hozzáférését is korlátozzuk. További információért lásd: 19. Csoportok biztonsági beállításai (szerepek) Ha sok tagja van az oldalunknak.cshtml layout oldal szerint jelenik meg. visit the ASP. kényelmetlen minden egyes felhasználó engedélyeit külön ellenőrizni. (Többet az elrendezési oldalakról a 4.cshtml oldalban lévő kódot cseréljük le a következővel: @if (!WebSecurity. Ebben a fejezetben meg fogjuk tanulni. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 215 .cshtml".cshtml fájlt! Ez egy tartalmi oldal.

és egy azonosító mezőnek lett beállítva.) 3. hogy egy vagy több felhasználó UserId értéke már a táblában van. Nyissuk meg a UserProfiles táblát! 5. amit megadtunk. hogy a 3-as felhasználót („Keith” a fenti példában) „admin” szerepbe tegyük. Adjunk hozzá egy „admin” szerepet! A RoleId mező automatikusan kitöltődik. és írjunk be a táblába egy UserID és egy RoleID értéket! Például ahhoz. a következő adatokat adjuk meg: Honlapépítés a XXI. Figyeljük meg. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 216 . Nyissuk meg a webpages_UserInRoles táblát.2. (Ez az elsődleges kulcs. fejezetben tanultuk. Zárjuk be a webpages_Roles táblát! 4. majd zárjuk be a táblát! 6. században 17. hogy mi a RoleId mező értéke! (Ha ez az első. ahogya a 6. akkor 1 lesz.) Figyeljük meg.

akik a megfelelő szerepben vannak. A webhely gyökérmappájában hozzunk létre egy AdminError. PageData["Title"] = "Administrators only". Jelszót megváltoztató oldal létrehozása Lehetővé tehetjük a felhasználók számára jelszavaik megváltoztatását egy jelszó-megváltoztató oldal létrehozásával. Zárjuk be a webpages_UserInRoles táblát! Most. 12. és lépjünk be egy admin szerepű felhasználóval! 13. Nyissuk meg a Default. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 217 . A weboldal gyökérmappájában hozzunk létre egy AdminOnly.cshtml nevű oldalt és cseréljük ki a tartalmát a következőkre! (Azok a felhasználók. lépjünk ki!) 11.cshtml".cshtml-t egy böngészőben. ide kerülnek).cshtml nevű oldalt.7. } A Roles.cshtml fájl kifinomultabb hibaszűréssel rendelkezik. @{ Layout = "/_SiteLayout. A böngésző címsorában az URL-ben változtassuk meg a „Default”-ot „AdminOnly”-ra.cshtml".</p> 9. akiknek nincs joga az oldal megnyitásához. amihez csak azok a felhasználók férhetnek hozzá.cshtml oldalt! Ebben az esetben látni fogjuk az oldalt. (Más szóval töltsük be: az AdminOnly. Lépjünk vissza a Default. beállíthatunk egy oldalt.IsUserInRole metódus igaz értéket ad vissza. hogy meghatároztunk egy szerepet. és írjuk be a következő kódot: @{ Layout = "/_SiteLayout.) Honlapépítés a XXI. Ebben a példában csak alapszinten foglalkozunk a problémával. Nyissuk meg az AdminOnly. PageData["Title"] = "Admin-only Error".IsUserInRole("admin")) { <span> Welcome <b>@WebSecurity.Redirect("/AdminError"). 8. mert jelenleg nem admin jogú felhasználóval vagyunk belépve. (A Starter Site sablonban található ChangePassword.CurrentUserName</b>! </span> } else { Response. században 17. 10. de ne lépjünk be! (Ha be vagyunk jelentkezve. ha a jelenlegi felhasználó az admin csoport tagja.cshtml oldalra. } <p>You must log in as an admin to access that page.cshtml oldalra.cshtml fájlt!) Átirányít minket az AdminError. } @if ( Roles.

if(IsPost) { string username = Request["username"]. if(WebSecurity. PageData["Title"] = "Change Password".cshtml">Return to home page</a></div> </form> Ez az oldal olyan szövegdobozokat tartalmaz. } } } <style> . string oldPassword = Request["oldPassword"].1.cshtml". amik lehetővé teszik a felhasználónak. var message = "". Ebben a kódban meghívjuk a WebSecurity helper ChangePassword metódusát.} </style> <form method="post" action=""> Username: <input type="text" name="username" value="@WebSecurity. hogy beírja a felhasználónevét.message {font-weight:bold. jelszavát és az új jelszavát.". A weboldal Account mappájában hozzunk létre egy ChangePassword2. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 218 . Honlapépítés a XXI.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.ChangePassword(username. margin:10px. newPassword)) { message="Password changed successfully!". color:red. században 17. és a felhasználótól kapott adatokat közvetítjük neki. oldPassword. A tartalmát cseréljük le a következőkre: @{ Layout = "/_SiteLayout.cshtml-t! 2. string newPassword = Request["newPassword"]. } else { message="Password could not be changed.

hogy rosszul adjuk meg a régi jelszavunkat! Ha rossz jelszót adunk meg. a WebSecurity helper GeneratePasswordResetToken folyamatát használjuk.IsEmpty() ){ // The default SMTP configuration occurs in _start. mint a jelszó visszaállítása. Próbáljuk ki. } Honlapépítés a XXI.SmtpServer. (A Starter Site sablon ForgotPassword. hogy a felhasználó egy új jelszót kapjon.cshtml". és ez hoz létre egy tokent. 4.3. A tartalmát cseréljük le a következőkre: @{ Layout = "/_SiteLayout. var message = "". században 17.cshtml message = "Please configure the SMTP server.) 1. PageData["Title"] = "Forgot your password?". amely kiolvassa a tokent. Adjuk meg az érvényes adatokat. Ha már be vagyunk jelentkezve. és lehetővé teszi az új jelszó megadását. elküldjük a felhasználónak. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 219 . (A token egy kriptográfiailag biztonságos string. a WebSecurity. amit elküldünk a felhasználónak. hogy egy újat készítsenek. A webhely Account mappájában készítsünk egy új ForgotPassword2.cshtml nevű oldalt! 2. és próbáljuk ismét megváltoztatni a jelszavunkat. majd hivatkozunk arra az oldalra.) Ahhoz. és megjelenik egy üzenet.cshtml fájlja ennél némileg komplexebb. és egyedi azonosítóként szolgál olyan célokra. lehetővé tehetjük. if (WebMail.) Ezt az eljárás gyakran használják a gyakorlatban – elkészítjük a kulcsot. Nyissuk meg az oldalt egy böngészőben.ChangePassword meghívása sikertelen. Új jelszó létrehozásának lehetősége Ha a felhasználók elfelejtik a jelszavukat. A felhasználó postaládájába hasonló link érkezik: http://localhost:36916/Account/PasswordReset2?PasswordResetToken=08HZGH0ALZ3CGz3 A link végén található véletlenszerű karakterek sorozata a token. (Itt nem kell megadni a régi jelszót. a felhasználónevünk megjelenik az oldalon. var username = "".".

var confirmationUrl = Request.GeneratePasswordResetToken(username).message {font-weight:bold.Port. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 220 . A kód további része az e-mail elküldésére szolgál.Scheme + "://" + Request. subject: "Password Reset".Host + portPart + VirtualPathUtility. Nagy része a Register. margin:10px. hogy az SMTP beállításokat megtettük.Send( to: username.cshtml fájlból származik. amibe a felhasználó e-mail címét kell beírni. Honlapépítés a XXI. és a felhasználó által megadott e-mail címre (username) elküldjük. message = "An email has been sent to " + username + " with a password reset link. var portPart = ":" + Request. color:red. amit így készítünk. században 17. } } <style> .UrlEncode(resetToken)).Url. először meg kell győződnünk.ToAbsolute("/Account/PasswordReset2?PasswordResetT oken=" + Server.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 szövegdobozt. string resetToken = WebSecurity. Ha a felhasználó elküldi az űrlapot.if(IsPost) { username = Request["username"]. Az oldal lényege a jelszó-visszaállító token.Url.".GeneratePasswordResetToken(username). amely a sablon kiválasztásakor jött létre. hiszen az oldal célja. var resetToken = WebSecurity." ). body: @"Your reset token is:<br/><br/>" + resetToken + @"<br/><br/>Visit <a href=""" + confirmationUrl + @""">" + confirmationUrl + @"</a> to activate the new password.Url. hogy küldjön egy e-mail üzenetet.} </style> <form method="post" action=""> @if(!message. WebMail.

color:red.cshtml néven. var message = "". Az e-mail törzse szövegek és HTML elemeket tartalmazó változók és stringek összefűzésével jön létre. } else { message = "Password could not be reset. var confirmPassword = Request["confirmPassword"]. if( !newPassword. hogy megváltoztassa a jelszavát. Az Account mappában hozzunk létre még egy új oldalt PasswordReset2. az e-mail törzse körülbelül így fog kinézni: 3. } } } <style> . hogy a felhasználó megadhassa a jelszavát és megerősítse azt.". margin:10px.ResetPassword(passwordResetToken. meghívjuk a WebSecurity helper ResetPassword folyamatát az új jelszóval és a tokennel. Emlékezzünk.cshtml".IsEmpty() && newPassword == confirmPassword && WebSecurity. passwordResetToken = Request["passwordResetToken"]. A törzs tartalmaz szövegdobozokat.message {font-weight:bold. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 221 . és a tartalmát cseréljük le a következőre: @{ Layout = "/_SiteLayout. var passwordResetToken = "". Ha a token érvényes. akkor a segéd frissíti annak felhasználónak a Honlapépítés a XXI. newPassword)) { message = "Password changed!".Az e-mailt a WebMail helper Send parancsával küldjük el. hogy az URL valahogy így fog kinézni! http://localhost:36916/Account/PasswordReset2?PasswordResetToken=08HZGH0ALZ3CGz3 Amint megvan a token.} </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 nyílik meg. ha a felhasználó az e-mailben lévő linkre kattint. században 17. if(IsPost) { var newPassword = Request["newPassword"]. A jelszó tokent az URL-ből tudhatjuk meg a *„PasswordResetToken”+ olvasásával. Amikor a felhasználó megkapja. PageData["Title"] = "Password Reset".

A ReCaptcha helper megjelenít egy képet két elválasztott szóval. hogy regisztráljanak a weboldalra. A logika.net) segítségével.Net szolgáltatás ellenőrzi. Ebben a példában a ResetPassword meghívását kombináltuk néhány érvényességi vizsgálattal a && (logikai ÉS) operátorral. a ResetPassword metódus true értéket ad vissza. Nyissuk meg a ForgotPassword2. hogy készítsen egy CAPTCHA tesztet a reCAPTCHA szolgáltatás (http://recaptcha. A felhasználó válaszát a ReCaptcha.cshtml oldalra jutunk.jelszavát.) Az ASP. hogy megkülönböztesse a számítógépeket és az embereket.) 6. és a ResetPassword folyamat sikeres volt. hogy az eladásra tett termékek linkjét megszerezzék. Az e-mailben kattintsunk a linkre! A PasswordReset2. Ha a jelszó-visszaállítás sikeres. Ellenőrizzük a leveleinket. nem csak egy számítógépes program. hogy a jelszóváltoztatás sikeres.cshtml-t egy böngészőben! 5. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 222 . ha:    a newPassword szövegdoboz nem üres (a ! operátor jelentése not – nem). és a newPassword és a confirmPassword mező értéke megegyezik.NET oldalakon használhatjuk a ReCaptcha helpert. (Ez néhány pillanatot vehet igénybe. mielőtt az oldal érvényes lesz.) A CAPTCHA teszt használatával kideríthetjük. Adjunk meg egy új jelszót és kattintsunk a Submit gombra! Automatizált programok csatlakozásának megakadályozása A bejelentkező képernyő nem fogja megállítani az automatizált (néha web robot-okként vagy botokként említett) programokat abban. hogy a felhasználó valódi személy-e. (A botok csatlakozásának célja általában az. aminek az a feladata. Honlapépítés a XXI. aki az e-mailt kapta. amiket a felhasználóknak helyesen le kell írniuk. (A CAPTCHA a Completely Automated Public Turing teszt rövidítése. és keressünk egy „Password Reset” tárgyú levelet! 7. Írjuk be az e-mail címünket és kattintsunk a Get New Password gombra! Az oldal elküld egy emailt. 4. században 17.

Kattintsunk a Register linkre és teszteljük a regisztrációt a CAPTCHA teszt használatával! Honlapépítés a XXI. 2. Az Account mappában nyissuk meg a Register. században 17. Töröljük a // karaktereket abból a sorból. Regisztráljuk a weboldalt a ReCaptcha. Nyissuk meg a Default. ami tartalmazza a ReCaptcha.1.cshtml fájlt! 3. ami tartalmazza a ReCaptcha meghívását! A alábbi példa a kész kódot mutatja a kulcs helyével. isValid = false. @ReCaptcha. 8. Cseréljük le a PRIVATE_KEY stringet a saját privát kulcsunkkal! 5. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 223 . } 6.Validate("user-key-here")) { captchaMessage = "Response was not correct". kapunk egy nyilvános és egy privát kulcsot.Validate meghívását! A következő példa a kész kódot mutatja a kulcs helyével. A Register.net) oldalon! Amikor készen vagyunk a regisztrációval. Töröljük a // karaktereket abból a sorból. // Validate the user's response if (!ReCaptcha.Net (http://recaptcha.cshtml oldal alján cseréljük ki a PUBLIC_KEY stringet a nyilvános kulcsunkkal! 7.GetHtml("user-key-here". Töröljük a // karaktereket a captchaMessage változó elől! 4.cshtml oldalt egy böngészőben! Ha be vagyunk jelentkezve. theme: "white") A következő illusztráció a kész regisztrációs oldalt mutatja. kattintsunk a Logout llinkre! 9.

config fájl defaultproxy paraméterét.net> <defaultProxy> <proxy usesystemdefault = "false" proxyaddress="http://myProxy.MyDomain. Az alábbi példa egy olyan Web.com" bypassonlocal="true" autoDetect="False" /> </defaultProxy> </system.Megjegyzés: Ha a számítógépünk egy olyan tartomány tagja.config fájlt mutat. <?xml version="1. hogy a reCAPTCHA szolgáltatás működik. hogy konfigurálnunk kell a Web. ami proxy szervert használ. században 17.0" encoding="utf-8"?> <configuration> <system. lehet. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása 224 .net> </configuration> Honlapépítés a XXI. ahol a defaultproxy úgy van konfigurálva.

Az oldal végén. Nem szeretnénk. adjuk hozzá az @ServerInfo. amelyek a leginkább hibát szoktak okozni.cshtml nevű weblapot. Megmutatja emellett az oldal lehívásakor elküldött HTML kéréseket is. hogy az oldal ki legyen választva a Files munkaterületen!) Honlapépítés a XXI. Mentsük el az oldalt. fejezet – Bevezetés a hibakeresésbe 225 . 1. A ServerInfo helper kijelzi az aktuális felhasználó azonosítóját. Ez a fejezet megmutat néhány eszközt és technikát. Azonban ha a kód végéhez fűzzük. amely áttekintést nyújt a webszerver környezetéről.18. Készítsünk egy ServerInfo. felhasználónevekről. Az ObjectInfo helper. ha a weboldal látogatói bármilyen információt láthatnának a szerverünk nevéről.GetHtml() </body> </html> Az oldalon bárhol elhelyezhetjük a ServerInfo kódot. behelyezzük egy try/catch blokkba. Egy fontos szempont a hibák és a problémák elhárításában. amiről benyújtotta a kérelmet. szerveren lévő elérési utakról és hasonló részletekről. mint az Internet Explorer Developer Toolst és a Firebugot a webhely elemzéséhez? A fejezetben bemutatott ASP. fejezetben a hibák kezeléséről szóló részt! A ServerInfo helper használata a szerverinformációk megjelenítéséhez A ServerInfo helper egy olyan diagnosztikai eszköz. így kódunk áttekinthető marad. Ezen információk birtokában könnyebben kivédhetjük a gyakori problémákat. 3.NET funkciók és WebMatrix (valamint egyéb) eszközök:    A ServerInfo helper. Megjegyzés: Mielőtt éles üzembe állítjuk a webhelyet. Ezt úgy tehetjük meg. és így tovább. nem keveredik az oldal többi részével. mielőtt bezárnánk a </body> címkével. A fejezetből megtudhatjuk:   Hogyan jelenítsünk meg információkat. beleértve a ServerInfo helpert. hogy azokat a részeit a kódnak. mivel ezek hasznosak lehetnek rossz szándékú emberek számára. melyek elősegítik az oldal elemzését és a hibakeresést? Hogyan használjuk a hibakereső eszközöket. töröljük ki az összes diagnosztikával kapcsolatos kódot. majd futtassuk a böngészőben! (Futtatás előtt ügyeljünk arra. 2. Az Internet Explorer Developer Tools és a Firebug hibakereső eszközök. hogy először el kell kerülni őket. További információkért olvassuk el 3. hogyan használjuk a hibakeresést és elemezzük webhelyünket. fejezet – Bevezetés a hibakeresésbe A hibakeresés a hibák megállapításának és kijavításának folyamata a kódlapunkon.GetHtml() kódot: <!DOCTYPE html> <html> <head> <title></title> </head> <body> @ServerInfo. században 18. a böngésző típusát.

Cseréljük ki az oldal tartalmát a következőre: <!DOCTYPE html> <html> <head> <title></title> </head> <body> @{ var weekday = DateTime. hogy a ServerInfo helper számos diagnosztikai információt ad nekünk.NET weboldalak által használt Razor szintaxis a Microsoft ASP.) Environment Variables. részleteket a gyorsítótárról. Ez az eljárás bemutatja egy tipikus módját. Információkat ad a futtató webszerverről. Információkat ad számos HTTP protokoll részleteiről (melyeket HTTP változóknak nevezünk) és azokról az értékekről. és tartalmazza a számítógép nevét. a domain nevét. Egy listát ad a webszerver összes környezeti változójáról és azok értékeikről.cshtml nevű WebMatrix lapot! 2. OutputExpression. amely maga is egy . illetve a számítások eredményeit.Now. add 1 day to the current weekday. További információkért a ServerInfo által visszadobott értékekről látogassunk el a Recognized Enviromnent Variables oldalra a Microsoft TechNet weboldalon és az IIS Server Variables oldalra az MSDN weboldalon! Oldal értékek kijelzése kifejezések beágyazásával Kódunk működését egy másik eljárással is vizsgálhatjuk. // As a test. Mint tudjuk. A hibakereséshez jelenítsük meg a változókat a kód kritikus részeinél! Ez lehetővé teszi. az elérési útat. 1. de láthatjuk. ASP.NET Server Variables. Amikor végeztünk a hibakereséssel. if(weekday. mikor fut az oldal.A ServerInfo helper négy információs táblát jelez ki az oldalon:   Server Configuration.NET webszerver technológiájára épült.NET verzióját. Részleteket közöl a webhelyet futtató Microsoft . az ASP.ToString() != "Saturday") { Honlapépítés a XXI. Készítsünk egy új. HTTP Runtime Information. században 18. ( Ahogy az 3. hogy hogyan használjuk a beágyazást a hibakeresés elősegítéséhez. eltávolíthatjuk a kifejezéseket vagy megjegyzésbe tehetjük őket. az éppen futó ASP. fejezetben megtanultuk. és így tovább.   A szerver teljes leírása és a kérelmi információ már túlmutatnak ezen a fejezeten. . fejezet – Bevezetés a hibakeresésbe 226 . amelyek szerepelnek minden weboldal lekérésében. ha hozzáadunk az oldalhoz egy ehhez hasonlót: @myVariable or @(subTotal * 12).NET Framework verziójáról. valamint a szerveridőt.DayOfWeek. hogy lássuk a fontos változók értékét.NET Framework nevű kiterjedt szoftverfejlesztő könyvtárra épül. egy változó értékét közvetlenül is kijelezhetjük.

fejezet – Bevezetés a hibakeresésbe 227 . hogy miért a hibás üzenet jelent meg (mivel a kód szándékosan a nem megfelelő nap értékét állítja be). A hét bármely napja is legyen aktuális. hogy melyik napja az a hétnek. Mentsük el az oldalt. it's a marvelous Monday. } } <h2>@greeting</h2> </body> </html> Ez a példa egy switch utasítást használ annak érdekében. break. case "Saturday": greeting = "Another slow Saturday is here. weekday = weekday + 1. A hibakereséshez ki kell találnunk. or Sunday. Bár ebben az esetben tudjuk. case "Tuesday": greeting = "It's a tremendous Tuesday. default: break. break. egyet hozzáadva a hét jelenlegi napjának értékéhez.". break. simply add one day. A példában az if tömb az első kód blokkban önkényesen megváltoztatja a hét napját. it's thrifty Thursday. hogy hol van hiba a kódban.". case "Wednesday": greeting = "Wild Wednesday is here!". case "Sunday": greeting = "The best day of all: serene Sunday. mi is történik a kulcsobjektumok értékével és a változókkal. break. 3. reset the day to 0. case "Friday": greeting = "It's finally Friday!". és ezután megjelenítsen egy üzenetet. a valóságban sokszor nehéz megállapítani. var weekdayText = weekday. break. } // Convert weekday to a string value for the switch statement. case "Thursday": greeting = "All right. Íme egy hiba.// If weekday is not Saturday.". szemléltetés céljából.ToString(). hogy ellenőrizze a weekday értékét. break.". ami aszerint változik. weekday = 0. században 18. switch(weekdayText) { case "Monday": greeting = "Ok. Honlapépítés a XXI. var greeting = "". esetünkben a hét napjaival. } else { // If weekday is Saturday. break. az egy nappal későbbi üzenetet fogjuk látni.". és futtassuk egy böngészőben! Az oldalon az üzenet a hét nem megfelelő napjával fog megjelenni.

Honlapépítés a XXI. A két változó kifejezésből (@weekday) származó kimenet között nem lesz szóköz. 6. 5. if(weekday.Now. Ezek a kifejezések ki fogják jelezni a változók értékeit ezeken a pontokon. Mikor először jelenik meg a weekday változó a kódban. Ha ez egy valódi hiba lenne. or Sunday. fejezet – Bevezetés a hibakeresésbe 228 . teljes kódtömb ehhez így fog kinézni: @{ var weekday = DateTime. Adjunk hozzá egy kifejezést a @weekday beillesztésével két. weekday = weekday + 1. Mentsük el az oldalt. tehát beláthatjuk. Javítsuk ki a kódot az oldalon a két nemrég hozzáadott kifejezés törlésével. majd a frissített napot . a kifejezéseket most csak tesztelés céljából szúrtuk be.ToString().ToString() != "Saturday") { // If weekday is not Saturday. században 18. hogy valami történt a weekday változó első és második megjelenése között a. @weekday // As a test. A fennmaradó. a megfelelő napot mutatja. simply add one day. Most már láthatjuk. hol a hiba. majd a switch utasítástól kapott üzenetet.ami az egy nap hozzáadásának az eredménye -. Mikor második alkalommal jelenik meg az if tömb után.ToString().DayOfWeek. reset the day to 0. // Display the initial value of weekday. és a nap megváltozását okozó kód eltávolításával. } // Display the updated test value of weekday.Now. mivel semmilyen HTML <p> címkét nem adtunk hozzá. var weekday = DateTime. } else { // If weekday is Saturday. ezzel a megközelítéssel közelebb kerülünk a problémát okozó kódrészlethez.4. megjegyzésekkel jelölt helyre a kódban. var weekdayText = weekday. var weekdayText = weekday. add 1 day to the current weekday. majd futtassuk egy böngészőben! Az oldal először a hét valódi napját jelzi ki. weekday = 0. @weekday // Convert weekday to a string value for the switch statement.DayOfWeek. a nap eggyel későbbi a kelleténél.

} } 7. it's thrifty Thursday. fejezet – Bevezetés a hibakeresésbe 229 . case "Friday": greeting = "It's finally Friday!".var greeting = "". Helyettesítsük az összes kódot az oldalon a következő kódtömbbel: <!DOCTYPE html> <html> <head> <title></title> Honlapépítés a XXI. switch(weekdayText) { case "Monday": greeting = "Ok. break. században 18. valamint láthatunk a kiválasztott objektumok típusát is.cshtml fájlt! 2. break. Objektumértékek kijelzése az ObjectInfo helper használatával Az ObjectInfo helper az összes kívánt objektum típusát és értékét kijelzi. 1. break. Használhatjuk változók és objektumok értékeinek megtekintéséhez a kódban (mint ahogy azt az előző példában tettük a kifejezések segítségével).". Nyissuk meg a korábban elkészített OutputExpressions. it's a marvelous Monday. Futtassuk az oldalt egy böngészőben! Mostantól a megfelelő üzenet fog megjelenni a hét aktuális napjával. case "Tuesday": greeting = "It's a tremendous Tuesday. break. break. case "Saturday": greeting = "Another slow Saturday is here.". default: break.".". break. case "Wednesday": greeting = "Wild Wednesday is here!".". case "Thursday": greeting = "All right. break. case "Sunday": greeting = "The best day of all: serene Sunday.

században 18. A második változó egy string.". it's a marvelous Monday.Now. break. case "Saturday": greeting = "Another slow Saturday is here.Print(weekday) var weekdayText = weekday.</head> <body> @{ var weekday = DateTime. majd futtassuk az oldalt egy böngészőben! Ebben a példában az ObjectInfo két adatot jelenít meg:  A típust. } } @ObjectInfo.ToString(). case "Sunday": greeting = "The best day of all: serene Sunday. Az első változóban a típus a DayOfWeek. @ObjectInfo. case "Wednesday": greeting = "Wild Wednesday is here!". break. break. break. var greeting = "".". it's thrifty Thursday. case "Friday": greeting = "It's finally Friday!". Mentsük el. case "Tuesday": greeting = "It's a tremendous Tuesday. Honlapépítés a XXI. default: break.DayOfWeek.Print(greeting) <h2>@greeting</h2> </body> </html> 3. fejezet – Bevezetés a hibakeresésbe 230 . case "Thursday": greeting = "All right. break. switch(weekdayText) { case "Monday": greeting = "Ok. break.". break.".".

Ebben az esetben. melyek ugyancsak segítik az oldalon való hibakeresést. a változó eljut ObjectInfohoz.com! 2. hogyan működik az Internet Explorer Developer Tools. fejezet – Bevezetés a hibakeresésbe 231 . az érték ismét megjelenik. amelyek információt nyújtanak arról. 4. mint például a www. Internet Explorer Developer Tools Internet Explorer Developer Tools egy Internet Explorer 8-ba beépülő web eszköz csomag.) Ez az eszköz nem kifejezetten engedi az ASP. majd a <body> elemet is! Az ablak az összes címkét a body elemben mutatja meg. Hibakereső eszközök használata Amellett. A jobb oldali panelen kattintsunk az Attributes fülre. Ez azt feltételezteti. Ez a rész bemutatja. hogy láthassuk a <body> címke tulajdonságait: Honlapépítés a XXI. Kattintsunk a HTML fülre. Az Internet Explorerben nyissunk meg egy publikus weboldalt. hogy Internet Explorer 8-at használunk. mivel a kezdeti változó értéke már megjelent az oldalon. Az érték. században 18. nyissuk le a <html> elemet. A Tools menüben kattintsunk a Developer Toolsra! 3.NET weboldalakon dinamikusan létrejövő utasításokat és szkripteket. Ez az eljárás szemlélteti. 1. bonyolultabb objektumok esetén az ObjectInfo helper több információt is képes megjeleníteni – alapvetően minden típust és értéket ki tud jelezni az objektumok tulajdonságai közül.NET kódban való hibakeresést. (Az Internet Explorer korábbi verzióihoz telepíthetjük az eszközt az Internet Explorer Developer Toolbar oldalról a Microsoft Download Centerben. használhatunk eszközöket is. de igazán hasznos lehet a hibakereséshez a HTML-ben. és hogyan használjunk néhány eszközt a WebMatrixban. hogyan használjuk a legnépszerűbb diagnosztikai eszközöket a weboldalon. hogy az oldal a hibakeresés megkönnyítéséhez információkat jelenítsen meg. beleértve az ASP.microsoft. További. CSS-ben és szkriptekben. hogyan fut az oldal.

Ez a leírás megmutat nekünk néhányat a Firebug funkciói közül.NET generált dinamikusan. majd kattintsunk a Style fülre a jobb oldali panelon! A Firebug megjeleníti nekünk az információkat a Microsoft oldaláról. viszont hasznos lehet HTML és egyéb oldalelemek vizsgálatában. A Firebug fő ablakában kattintsunk a HTML fülre. hogy lássuk a CSS stílusokat. ezután nyissuk szét a <html> csomópontot a bal panelen! 4.com-ot! 2. Honlapépítés a XXI. században 18.microsoft. fejezet – Bevezetés a hibakeresésbe 232 .5. hogy lássuk a cookie-kat és egyéb információkat az oldalról. amelyeket az ASP. amivel ellenőrizni lehet a HTML kódokat és a CSS-t. Az Internet Explorer Developer Tools-ról látogassunk el a Discovering the Internet Explorer Developer Tools-ra az MSDN weboldalán! Firebug Firebug egy add-on a Mozilla Firefoxhoz. Válasszuk a <body> címkét. A Firefoxban nyissuk meg a www. hibákat lehet kerestetni a kliens szkriptben és lehetővé teszi. A jobb oldali panelon kattintsunk a Style-ra. beleértve azokat. Ahogyan az Internet Explorer hibakereső eszközeiv. A Firebugot telepíthetjük a Firebug weboldaláról. A Tools menüben kattintsunk a Firebugra. majd kattintsunk az Open Firebug in New Windowra! 3. amik a body szakaszhoz tartoznak az oldalon. ez az eszköz sem kimondottan alkalmas az ASP. 1.NET kódban való hibakeresésre.

A Firebug számos beállítást tartalmaz a HTML és CSS stílusok szerkesztéséhez és érvényesítéséhez. Például megvizsgálhatjuk hogy lássuk. A Net fülön lehet elemezni a szerverek és weboldalak közti hálózati forgalmat. valamint a szkriptekben lévő hibák kereséséhez és javításához. Ha többet szeretnénk megtudni a Firebugról. meddig tart letöltenie az összes tartalmat a böngészőnek. látogassunk el a Firebug főoldalára és a Firebug Documentation Wiki-re! További források angolul 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 Honlapépítés a XXI. fejezet – Bevezetés a hibakeresésbe 233 . században 18.

amiket az oldalunkon bárhol használhatunk (Globális értékek). hogyan hozzunk létre olyan beállításokat. Néhány helper kötelez különböző értékek/adatok megadására.NET először megvizsgálja. Ezt úgy tehetjük meg. amikor még egyetlen oldal sem töltődött be.(Mivel az _AppStart. Honlapépítés a XXI.cshtml. szóval hasznos lehet ezeket az adatokat globális változókban tárolni.) A következő diagram bemutatja. amiket használunk. Így beállíthatunk olyan értékeket.cshtml oldal. fejezet – A Site-Wide viselkedés testreszabása Ebben a fejezetben megtanuljuk. Amikor először kérelem érkezik egy oldalért.19. Az fejezetből megtudhatjuk:     Hogyan futtassunk olyan kódot.cshtml tartalmaz egy alulvonás előtagot.NET nem fogja elküldeni az oldalt a böngészőnek még akkor sem. amely egy weboldal összes oldalán tud értékeket beállítani? Hogyan futtassunk olyan kódot. mint például e-mail beállítások vagy account kulcsok. ha a felhasználó ezt szeretné.cshtml oldalt a honlap gyökerében.NET API referencia 234 .NET az útvonalkezelést. hogyan működik az _AppStart. mielőtt és miután az oldal betöltődött? Hogyan használja az ASP. ha igen. amelyek az egész weboldalra vagy egy mappára vannak hatással. hogy könnyebben olvasható és kereshető URL-eket használhassunk? Weboldal indulásakor lefutó kód hozzáadása Az általunk megírt kódok többsége és a beállítások. ha egy oldal e-mailt küld. hogy létrehozunk egy _AppStart. Azonban néhány esetben már akkor szeretnénk kódot futtatni. akkor általában az oldal tartalmazza az egész kódot. ami globális változókat állít be. mikor lekérnek egy oldalt a honlapról. Ha ez az oldal létezik. akkor az ebben található kód lefut. században Függelék – ASP. amely egy mappában található összes oldalon tud értékeket beállítani? Hogyan futtassunk kódot. Tehát ez jó hely olyan kód futtatására. hogy létezik-e egy _AppStart. nem csak egyetlen oldalra. csak egy-egy oldalra érvényesek. ami szükséges a beállítások inicializálásához (SMTP szerverhez) és az e-mail elküldéséhez. akkor először az abban található kód fut le és csak utána a kért oldal. az ASP. Például. az ASP.

akkor nem fog elindulni a honlap! 4. 3. ugyanis ha bármi hiba van a kódban. Ez a kód egy olyan értéket tárol az AppState szótárban. Hozzunk létre egy AppName.cshtml-ben állítottunk be. században Függelék – ASP.cshtml-t készítjük.cshtml fájlt! A fájlnak mindenképpen a honlap gyökerében kell lennie. Megjegyzés: Vigyázzunk.Globális értékek beállítása a weboldalon 1. A WebMatrix weboldal gyökérkönyvtárában hozzunk létre egy _AppStart. Cseréljük le az alapértelmezett kódot a következőre: @{ } AppState["customAppName"] = "Application Name".NET API referencia 235 . amikor az _AppStart.cshtml oldalt a gyökérkönyvtárban! 5. Cseréljük le az alapértelmezett markupot és a kódot a következőre: <!DOCTYPE html> <html> <head> <title>Show Application Name</title> </head> <body> <h1>@AppState["customAppName"]</h1> </body> </html> Ezzel a kóddal kiolvassuk azt az értéket az AppState-ből . ami automatikusan elérhető az összes oldal számára a webhelyen. amit az _AppStart. 2. Honlapépítés a XXI.

cshtml fájlunkat! 7.(Futtatás előtt bizonyosodjunk meg arról.PrivateKey = "". 5. hogy az oldal ki van választva a Files munkaterületen.cshtml oldalt! 8. A többi érték. Cseréljük le az alapértelmezett kódot a következőre: Honlapépítés a XXI.NET Web Helpers Libraryt a 2. Ha még nem tettük meg. 3.net)! A regisztráció után megkapjuk publikus és privát kulcsunkat. // (http://recaptcha. hogy ezeket az értékeket minden oldalon beállítanánk. században Függelék – ASP. Regisztráljuk weboldalunk a ReCaptcha.PublicKey = "". Értékadás helperek számára Az _AppStart. Lásd: 17. akkor most hozzunk létre egyet! 4.cshtml-t.) Az oldalon megjelenik a globális érték.cshtml-ből.3. Töltsük fel a PublicKey és PrivateKey tulajdonságainkat a saját publikus és privát kulcsainkkal! 6. e-mail küldésre szolgál SMTP szerver felhasználásával. Töröljünk ki mindent az _AppStart. // a ReCaptcha. és adjuk hozzá a következő kódot: @{ // Adjunk hozzá PublicKey és PrivateKey stringeket. hiszen ennek a használatához egy publikus és egy privát kulcs megadására van szükség a reCAPTCHA felhasználói fiók számára.NET API referencia 236 . hogyan állítsuk be globálisan a ReCaptcha kulcsokat. Erre tökéletes példa a ReCaptcha helper. Mentsük és zárjuk be az _AppStart. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása) 1. hogy az oldalunkon felhasznált helpereknek értéket adjunk. adjuk hozzá a weboldalunkhoz az ASP. Egy böngészővel nyissuk meg az AppName. amit beállíthatunk az _AppStart.Net-ről szerezhetünk publikus és privát kulcsokat. így a weblapunk minden oldalán előre beállítjuk őket.cshtml fájllal a weboldal gyökérkönyvtárában. ahol a ReCaptchat használjuk.cshtml-ben. Ha még nem rendelkezünk _AppStart. fejezet – Biztonsági elemek és felhasználói fiókok hozzáadása A következő példából megtudhatjuk. Ahelyett. ReCaptcha.(További információkért a ReCaptcha használatáról lásd: 17. A weboldal gyökerében hozzunk létre egy Recaptcha.Net-en (http://recaptcha. fejezetben leírtak alapján! 2. beállíthatjuk őket az _AppStart.net) ReCaptcha.cshtml-t jó ötlet arra felhasználni.cshtml-ben.

Validate()) { @:Your response passed! showRecaptcha = false. majd újra megjelenik a reCAPTCHA panel.cshtml-t! Ha a PrivateKey értékünk érvényes. akkor megjelenik egy beállított üzenet. ha mégsem. mielőtt a weboldal bármelyik oldala lefutna.NET API referencia 237 .cshtml file.net).cshtml-t arra. if (IsPost) { if (ReCaptcha. akkor az oldalon meg fog jelenni a reCAPTCHA panel és egy gomb.</p> } } </form> </body> </html> 9. hogy kódot futtassunk.PrivateKey != ""){ <p>@ReCaptcha. Egy böngészővel nyissuk meg a Recaptcha. században Függelék – ASP. ugyanúgy írhatunk olyan kódot. } 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. Tesztelés céljából írjuk be a szavakat! Ha megfelelünk a reCAPTCHA teszten.Net website (http://recaptcha. akkor az oldal hibát jelezne.GetHtml()</p> <input type="submit" value="Submit" /> } else { <p>You can get your public and private keys at the ReCaptcha. Then add the keys to the _AppStart. 10. ami egy bizonyos könyvtárban található fájlok előtt és Honlapépítés a XXI.cshtml-ben. Kód futtatása egy mappa fájljainak elindulása előtt és lefutása után Ahogy használhatjuk az _AppStart.@{ var showRecaptcha = true. akkor egy hibaüzenet jelenik meg. Ha a kulcsokat nem állítottuk volna be globálisan az _AppStart.

Ez azért hasznos.cshtml fut le.cshtml kombinációval rendelkezünk: @* /_PageStart. miután minden megfelelő _PageStart.cshtml fájlokból egy egész hierarchiát hozhatunk létre. Az ASP. ha igen. } @* /myfolder/_PageStart.csthml fájlt használunk. Ezek után ellenőrzi. hogyan működik a _PageStart.cshtml-be beleírt RunPage metódussal megadhatjuk. majd utána következő almappában található _PageStart.NET először megvizsgálja.cshtml fájl végrehajtódott. Ha kérelem érkezik egy oldalért. majd utána a lekért weboldal. mert így ugyanazt a layout oldalt használhatjuk a mappa összes oldalára.NET így megy végig a könyvtár struktúrán. hogy létezik-e egy _PageStart. Az ASP.cshtml *@ @{ PageData["Color1"] = "Red". hogy a következő _PageStart.után lefut. Ilyen típusú kódok létrehozására és futtatására egy _PageStart. és csak ezek után futtatja le a kért oldalt. Ha nem teszünk RunPage metódust a _PageStart.cshtml oldal. ha igen. ezzel lehetőségünk van kódot futtatni a lekért oldal előtt vagy akár utána. hogy létezik-e egy _AppStart.cshtml. Például lehetséges. A _PageStart. akkor előbb az fut le. Honlapépítés a XXI. Ha lekérnek egy oldalt. azt is lefuttatja.cshtml-be. A következő diagram bemutatja. akkor futtatja azt.cshtml *@ @{ PageData["Color2"] = "Yellow".cshtml.NET API referencia 238 .NET segítségével a _PageStart. akkor a legmagasabb szintű (legközelebbi a gyökérkönyvtárhoz) _PageStart. akkor az ASP. amíg el nem éri a kívánt oldalt tartalmazó mappát. vagy egy oldal megnyitása előtt ellenőrizhetjük. században Függelék – ASP.cshtml-t a weboldal gyökérkönyvtárába és minden alkönyvtárába.cshtml oldal. hogy a feldolgozás melyik pillanatában jelenjen meg a lekért weboldal. A kért oldal csak akkor következik. hogy a felhasználó be van-e jelentkezve.cshtml és default. Tehetünk egy _PageStart. PageData["Color2"] = "Blue".

majd cseréljük le az alapértelmezett kódot a következőre: @{ // Beállítjuk a szerkezeti oldalt az összes oldalra a mappában. // Beállítunk egy változót. Layout = "/Shared/_Layout1. 2010 Contoso. } @* /myfolder/default.css" rel="stylesheet" /> </head> <body> <div id="header"> Using the _PageStart.cshtml". a következőt látjuk: Red Yellow Green Inicializáló kód futtatása minden oldalra egy mappában Jó ötlet a _PageStart.cshtml *@ @PageData["Color1"] <br/> @PageData["Color2"] <br/> @PageData["Color3"] Amikor a default.cshtml fájlt. Hozzunk létre egy _PageStart. A Shared mappába hozzunk létre egy _Layout1. ami a mappa minden oldala számára elérhető.cshtml-t arra használni. században Függelék – ASP. hogy ugyanazt a szerkezeti oldalt inicializáljuk minden fájlra egy mappában.cshtml fájlt az InitPages könyvtárban. } <!DOCTYPE html> <html> <head> <title>Page Title</title> <link type="text/css" href="/Styles/Site.NET API referencia 239 . } 3. 1. A gyökérkönyvtárban hozzunk létre egy úgy mappát InitPages néven! 2.cshtml-t futtatjuk. A weboldal gyökerében hozzunk létre egy Shared mappát! 4. PageData["MyBackground"] = "Yellow". All rights reserved </div> </body> </html> Honlapépítés a XXI.PageData["Color3"] = "Green". majd cseréljük le az alapértelmezett kódot a következőre: @{ var backgroundColor = PageData["MyBackground"].cshtml file </div> <div id="main" style="background-color:@backgroundColor"> @RenderBody() </div> <div id="footer"> &copy.

cshtml néven. } } Ebben a kódban explicit módon hívjuk meg a kért oldalt a try blokkba zárt RunPage metódus segítségével.cshtml beállítja a Layoutot és a PageData["MyBackground"]-t beállítja egy színre.cshtml?source=" + HttpUtility.cshtml-nek.5. A gyökérkönyvtárban hozzunk létre egy InitCatch könyvtárat! 2.cshtml használata hibák kezelésére Másik jó felhasználási módja a _PageStart.cshtml elindul. Egy böngészővel nyissuk meg a Content1.UrlEncode(Request. Az InitPages könyvtárban hozzunk létre még egy fájlt Content2. Hozzunk létre egy _PageStart.cshtml). amin a hiba történt. A _PageStart.NET API referencia 240 . A következő példa erre mutat be egy módszert. hogy kezeljük a különböző hibákat és kivételeket. Az InitPages könyvtárban hozzunk létre egy Content1. 8. akkor a catch blokk fog lefutni. majd az alapértelmezett markupot cseréljük a következőre: <p>This is content page 1.cshtml-t az InitCatch könyvtárban. A mi esetünkben a kód egy másik oldalra irányít (Error. 1. } catch (Exception ex) { Response.</p> 6. és az URL részeként elküldi az oldal nevét.Redirect("/Error.AppRelativeCurrentExecution FilePath)). és cseréljük ki a létező kódot a következővel: @{ try { RunPage().cshtml-t! Mikor a Content1. században Függelék – ASP.</p> 7. mivel mind a kettő ugyanabból a _PageStart.cshtml-ből veszi az adatokat.cshtml fájlt. Egy böngészővel nyissuk meg a Content2.cshtml-t! A szerkezet és a színek ugyanazok lesznek a két oldalon. és cseréljük le az alapértelmezett markupot a következőre: <p>This is content page 2. amik felmerülhetnek bármilyen cshtml oldalon. Ha bármi programozási hiba van a kért honlapban.) Honlapépítés a XXI. akkor a _PageStart. (Hamarosan elkészítjük az oldalt.

2. 1. Nyissuk meg az Exception. Az InitCatch mappában hozzunk létre egy Exception. Hozzunk létre egy új weboldalt a Site From Template opcióval! A lehetséges sablonokból válasszuk ki a Starter Site-ot! A gyökérkönyvtárban hozzunk létre egy mappát AuthenticatedContent néven! Ebben a mappában hozzunk létre egy _PageStart.cshtml-t egy böngészőben! Mivel hiba történik az Exception. és cseréljük le a tartalmát a következőre: <!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-ből és jeleníti meg őket. ami nem létezik. A gyökérkönyvtárban hozzunk létre egy Error.cshtml átirányít minket az Error. és tartalmát cseréljük a következőre: Honlapépítés a XXI. ezért a _PageStart.cshtml-re. és a tartalmát cseréljük a következőre: @{ var db = Database. } A példa szemléltetése miatt most hibát generálunk úgy.cshtml-ben. században Függelék – ASP.Open("invalidDatabaseFile"). 4.cshtml-t. hogy korlátozzuk a mappában levő összes fájl elérését. 5. 4. hogy olyan adatbázis fájlt próbálunk megnyitni. További információért a kivételkezelésről lásd: 3.3.NET webszerkesztésbe Razor szintaxissal A _PageStart.cshtml-t.cshtml használata korlátozott mappaeléréshez Arra is használhatjuk a _PageStart.cshtml oldalt. 3. ami megjeleníti a hibaüzenetet.fejezet – Bevezetés az ASP. Mentsük a fájlt! 6.cshtml fájlt.NET API referencia 241 .

Cseréljük le az alapértelmezett kódot a következőre: @{ Layout = "/_SiteLayout. hogy a felhasználó belépett-e.CacheControl = "no-cache".Title = "Authenticated Content".NET weboldalak képesek automatikusan „barátságosabb” URL-eket használni. Az útvonalkezelésről Az ASP. Hasonlítsuk össze a következő URL-eket. Miután regisztráltunk és beléptünk. Egy URL.cshtml".cshtml oldalt az AuthenticatedContent mappába! 6.cshtml?categories=hardware http://www. Ha a felhasználó nincs bejelentkezve. Hozzunk létre egy Page. Először mindenképpen regisztrálnunk kell. Az ASP. ezek egy kitalált bloghoz tartoznak: http://www.NET API referencia 242 .@{ Response. if (!WebSecurity. már hozzáférünk az oldal tartalmához. } } A kód elején megakadályozzuk.com/Blog/blog.cshtml?startdate=2009-11-01&enddate=2009-11-30 http://www.Redirect("/Account/Login"). amik leírják a felhasználó tevékenységét.contoso. Könnyebben olvasható és kereshető URL-ek készítése Oldalaink működését az URL-jeikkel is befolyásolhatjuk. és persze segít a kereső optimalizálásban is.NET segítségével könnyebben értelmezhető URL-eket hozhatunk létre.IsAuthenticated) { Response.com/Blog/2009/November Honlapépítés a XXI.) Ezután meghatározzuk. hogy bármilyen fájl a mappából a gyorsítótárba mentődjön. mielőtt beléphetnénk. mielőtt a mappa bármilyen oldalát megnyithatná.com/Blog/blog. században Függelék – ASP. } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> Thank you for authenticating! </body> </html> 7. 5.com/Blog/categories/hardware/ http://www.(Ez például publikus gépeknél szükséges.cshtml-t egy böngészőben! A kód visszairányít minket a login oldalra. Page. ami „barátságosabb”.contoso. hogy csak egy fájlra mutatnának a szerveren. ahelyett.contoso. akkor a kód visszairányít minket a login oldalra. könnyebbé teszi az oldal használatát. hogy az egyik felhasználó gyorsítótárba mentett oldalait a következő felhasználó ne érje el.contoso. Nyissuk meg a Page.

milyen útvonalat használjon.cshtml elérési úttal és névvel? Ha igen. Hogy működik az útvonalkezelés? Amikor az ASP. Mivel logikai térképet hoz létre és nem fizikait (nem egy fájlra mutat). Az útvonal-kezelés segítségével egy olyan logikai térképet készíthetünk egy URL-ből. olyanokat. akkor megjelenik. továbbküld az oldalnak mint útvonal információ. Ha egyezést talál. Ellenkező esetben: Honlapépítés a XXI. Megpróbálja balról jobbra haladva párosítani az URL különböző szegmenseit a lemezen található fájlokhoz. Ezzel szemben a másik két példa sokkal könnyebben létrehozható és értelmezhető. Ez azért lehetséges. században Függelék – ASP.cshtml).com/a/b/c A keresés így megy végbe: 1. hogy megállapítsa. hogy blog a blog. a link akkor is érvényes maradna és működne. akkor mindent. mert az ASP. Az első két URL ráadásul egy fájlra mutat (blog.NET feldolgoz egy kérelmet.NET API referencia 243 . akkor a linkek nem működnének. Ha valamilyen okból a blogot eltávolítanánk vagy csak másik mappába helyeznénk át.Az első két példában a felhasználónak tudnia kellene. hogy hogyan definiáljuk az URL-jeinket. vagy csak egyszerűen másik fájlt használnánk.NET segítségével létrehozhatunk „barátságosabb” URL-eket. mint az előző példákban látottak. ami még megmaradt az Url-ben. Létezik-e egy fájl az /a/b/c.NET útvonalkezelést (routing) használ. az útvonalkezelés magas rugalmasságot biztosít abban. Az ASP.contoso. A másik két URL nem mutat semmilyen fájlra. és semmilyen információt nem küld tovább. ami megadja a megfelelő kategóriát. Erre jó példa a következő könyvtárstruktúra: Képzeljük el. akkor beolvassa az URL-t. így ha a blogon változtatnánk. vagy dátumot. hogy valaki a következő URL-t használja: http://www.cshtml oldalon jelenik meg. ami teljesíteni tud egy oldal kérelmet. És össze kell állítania hozzá egy lekérdező parancsot.

Egy oldalon belül az oldal útvonal információját az UrlData tulajdonságán keresztül érhetjük el (ez egy szótárérték). és az oldalunk ezt a kérelmet kapja meg: http://mysite. Megjegyzés: Természetesen azok az URL-ek is hibátlanul működni fognak. de más a kiterjesztésük (MyPage. /a/b/c/default. az ASP.cshtml fájlok között a meghatározott mappájukban. Létezik-e egy fájl az /a. Ennek elkerülése érdekében legjobb. Az oldalunkon a következőhöz hasonló kód segítségével megjeleníthetjük az útvonal információkat. hogy van egy ViewCustomers.2. Honlapépítés a XXI. akkor megjelenik és tovább küldi a „b/c”-t mint információt.(Ebben az esetben 1000): <!DOCTYPE html> <html> <head> <title>URLData</title> </head> <body> Customer ID: @UrlData[0]. 4.html). 5. ha nem használunk olyan oldalakat.cshtml elérési úttal és névvel? Ha igen. néha kétértelműség léphet fel. amik megadott oldalakra mutatnak (tartalmazzák a . amik csak a kiterjesztésükben térnek el. Képzeljük el.cshtml is működni fog.NET API referencia 244 .contoso.cshtml (Nincs útvonal információ). Ha a keresés eredménytelen és nem talál pontos egyezést .cshtml kiterjesztést). akkor megjelenik és továbbküldi a „c”-t mint információt.cshtml elérési úttal és névvel? Ha igen. Létezik-e egy fájl az /a/b.cshtml (Nincs útvonal információ).ToString() </body> </html> Megjegyzés: Mivel az útvonalkezelés nem használ teljes fájlneveket.com/a/b.NET sorban folytatja e fájlok keresését.cshtml és MyPage. például ha az oldalainknak ugyanaz a neve. /a/b/c/index. Tehát például a http://www.cshtml fájlunk.com/myWebSite/ViewCustomers/1000 Az előbbiekben leírt szabályok alapján a kérés eléri az oldalunkat. században Függelék – ASP. Ellenkező esetben: 3.

akkor a visszatérési értéke a DateTime.AsInt(). IsDateTime(). <a href="@Href ("~/Folder/File")">Link to My File</a> <a href="@Href ("~/Product". Ha a megadott érték nem felel meg egész számnak (integer). A teljes referencia majd a hivatalos megjelenéskor lesz elérhető.AsDecimal(). Ha a string nem felel meg a decimális (decimal) értékeknek.Függelék – ASP.AsBool(true|false) String értékből Booleant (igaz/hamis) konvertál.NET API referencia A könyv ezen oldalain megtalálhatjuk azokat az objektumokat. Ha a megadott string nem felel meg az igaz/hamis (true/false) értékeknek. amiket az ASP.AsInt(value) String értékből integert konvertál. akkor a visszatérési értéke 0. Ez nem egy teljes referencia dokumentum. ha a megadott érték stringből valamelyik kiválasztott típussá Honlapépítés a XXI. akkor a visszatérési értéke 0.0 vagy a megadott érték lesz. IsDecimal().MinValue vagy a megadott érték lesz.NET API referencia 245 . akkor visszatérési értéke 0 vagy a megadott érték lesz.Raw("<div>Hello <em>world</em>!</div>") IsBool(). században Függelék – ASP. tulajdonságokat.AsDecimal(value) String értékből decimal értéket konvertál. AsFloat(). int i = stringValue. akkor visszatérési értéke hamis vagy a megadott érték lesz. Ha a string nem felel meg decimális értékeknek. AsInt(). AsDecimal().AsFloat(). bool b = stringValue.AsBool(). IsFloat(). "Tea")">Link to Product</a> Html. DateTime dt = stringValue. IsInt() Visszatérési értéke igaz(true). Ha a string nem felel meg a dátum/idő (date/time) értékeknek.AsFloat(value) String értékből floatot konvertál. @* A string értékét behelyezi a markupba.0 vagy a megadott érték lesz. Ez a függelék a következő témákban nyújt információkat:    Osztályok Adatok Helperek Osztályok AsBool().param2]]) Egy böngésző kompatibilis és opcionális plusz elérési útrészekkel rendelkező URL-t hoz létre egy helyi elérési útból.Raw(value) Az értéket HTML kódolt kimenet helyett HTML markupként rendereli. decimal d = stringValue. *@ @Html. Href(path[.AsDateTime().NET Razor szintaxissal legtöbbször használunk. és metódusokat. float d = stringValue.AsDateTime(value) String értékből Date/Time értéket konvertál. AsDateTime().param1[.

MyGreetinghez tartozó értéket.MyGreeting RenderBody() (Szerkezeti oldalak) Lerendereli az oldal olyan tartalmait. } Layout Az oldalhoz használt layout oldal elérési útját adja meg. A required részt hamisra (false) kell állítanunk. IsEmpty() Visszatérési értéke igaz(true) ha a változó vagy objektum nem tartalmaz értéket.param1[.Cookies[key] Beolvassa vagy beállítja egy http cookie értékét. 123.cshtml". @RenderBody() RenderPage(path. szerkezeti oldalak és részleges oldalak között megosztott adatait tárolja.Cookies["myCookie"]. RenderPage("_MySubPage. Layout = "_MyLayout. PageData[1] = "apples".IsEmpty()) { @:Company name is required.Page Az aktuális lekérdezés oldalak. Használhatjuk a dinamikus Page tulajdonságot. var cookieValue = Request.PageData[index].Value. Request. "red". században Függelék – ASP. ha a renderelést opcionálisnak akarjuk hagyni. (A kezdeti lekérdezések általában GET-ek. PageData[key].IsInt().Redirect("Posted"). PageData["FavoriteColor"] = "red".konvertálható. @Page[1] // Megjeleníti a Page.Files[key] Honlapépítés a XXI. // Megjeleníti a PageData[1]-hez tartozó értéket. if (Request["companyname"]. Az adat paramétereket pozíció (példa 1) vagy kulcs (példa2) alapján a PageDataból olvashatjuk ki. akkor visszatérési értéke igaz (true) lesz.param2]]) Lerenderel egy tartalmi oldalt a megadott elérési utat és az opcionális extra adatparamétereket használva. Page. hogy ugyanezeket az adatokat elérjük. food = "apples" }) RenderSection(sectionName[.required=true|false]) (Szerkezeti oldalak) Lerenderel egy névvel ellátott tartalmi szekciót. new { color = "red".values) RenderPage(path[.NET API referencia 246 . "apples") RenderPage("_MySubPage.<br /> } IsPost Ha a lekérdezés POST típusú. @Page. @RenderSection("header") Request.MyGreeting = "Good morning". var isint = stringValue.cshtml". number = 123. amik nincsenek megnevezett szekciók között.cshtml".) if (IsPost) { Response.

Unvalidated().Form. // Ugyanazt az eredményt kapjuk. Response. hogy kikapcsoljuk a validációt valamelyik Request elemen.mimetype]) Honlapépítés a XXI.Unvalidated(key) Request. Response.QueryString gyűjteményt is.SaveAs(@"MyPostedFile"). hogy a lekérdezésekben minden egyes query string után más verziójú oldalt tároljunk el.QueryString|Form|Cookies|Headers[key] Egy kiválasztott űrlap elemnek.QueryString gyűjteményt is. Response. var queryValue = Request.Unvalidated(). Response.value) http szerver fejlécet ad a válaszba. Request. var cookie = Request.OutputCache(3600. Response. A rövidebb Request[key] megvizsgálja a Request.WriteBinary(data[.Unauthorized). // Közvetlenül hívjuk meg a metódust.SetStatus(401). Request. var formValue = Request.Files["postedFile"].QueryString[key] Beolvassa az adatot.AddHeader(name. Lehetőség van beállítani minden oldal időtúllépését és a varyByParams értéket. cookienak. vagy fejléc értéknek kikapcsolja a lekérdezés során történő validációját.SetStatus(httpStatusCode) Beállítja a böngészőnek küldendő http státusz kódot. Response. században Függelék – ASP. query-string értéknek.Redirect(path) Átirányítja a böngészőben tett lekérdezést egy másik helyre. Request. Request. esponse. var formValue = Request["myTextBox"]. // A fejlécben elküld egy egyszerű hitelesítést a böngészőnek. "BASIC").NET API referencia 247 . Response.OutputCache(60).sliding][.Unvalidated(). hogy az érték melyik gyűjteményből származik.varyByParams]) Egy megadott ideig elraktározza az oldal kimenetét. Response. valamint a Request.Cookies["mostRecentVisit"]. varyByParams : new[] {"category".AddHeader("WWW-Authenticate".OutputCache(seconds[.Redirect("~/Folder/File").Unvalidated("userText"). Response. Response.Form["myTextBox"]. // Megadhatjuk. var prodID = Request."sortOrder"}).Form valamint a Request.Form["richTextBox1"].QueryString["myTextBox"]. amit az URL query stringben adtunk meg.Az aktuális lekérdezésben feltöltött fájlokat olvassa be.OutputCache(10. Request.Unvalidated().QueryString["productID"]. true). var queryValue = Request["myTextBox"].SetStatus(HttpStatusCode. A rövidebb Request[key] megvizsgálja a Request. // Ugyanazt az eredményt kapjuk. Response.Form[key] Egy űrlapon beküldött adatokat olvassa be (stringként). var richtextValue = Request.

HtmlDecode(htmlText) Egy HTML kódolt stringet dekódol.QueryString["ConfirmationToken"].txt"). hogy beletehessük egy URL-be. ToString() Egy objektum értékét stringként jeleníti meg.currentPassword.newPassword) Egy megadott felhasználónak megváltoztatja a jelszavát.UrlDecode(urlText) Egy URL-ből dekódol szöveget.UrlEncode("url data").HtmlDecode("&lt. Response.password").ConfirmAccount(accountConfirmationToken) Az account confirmation token(megerősítő token) használatával megerősít egy felhasználói fiókot.ToString()</p> UrlData[index] Többletadatot olvas ki egy URL-ből(pl: /MyPage/ExtraData).UrlDecode("url%20data"). Response. var htmlDecoded = Server.WriteBinary(image. <p>It is now @DateTime. ami egészen addig létezik amíg be nem zárjuk a böngészőt.HtmlEncode("<html>"). var htmlEncoded = Server.NET API referencia 248 . Honlapépítés a XXI.WriteFile(file) Egy fájl tartalmát beleteszi a válaszba.UrlEncode(text) Lekódol egy szöveget. var confirmationToken = Request.A válaszba beleírja az adatokat opcionális MIMI típussal.html&gt. Session[key] Beállít vagy beolvas egy olyan értéket. var pathInfo = UrlData[0]. WebSecurity. WebSecurity. "new. században Függelék – ASP. Server.MapPath("~/App_Data/data. "image/jpeg").WriteFile("file. Server. var urlEncoded = Server.Now. @section header { <div>Header text</div> } Server.MapPath(virtualPath) A virtuális elérési utat fizikai elérési úttá alakítja. var urlDecoded = Server. @section(sectionName){content} (Szerkezeti oldalak) Meghatároz egy névvel ellátott tartalmi részt. Server. var dataFile = Server."currentpassword".ChangePassword(userName. Session["FavoriteColor"] = "red". var success = WebSecurity.ext"). Server.HtmlEncode(text) HTML markup rendereléséhez lekódol egy stringet. Response.ChangePassword("my-username".").

akkor szükség van még egy megerősítő tokenre (confirmation token) is.CurrentUserId Az éppen bejelentkezett felhasználó interger azonosítóját olvassa be.. "password")) { .CurrentUserName Az éppen bejelentkezett felhasználó nevét olvassa be. } WebSecurity.NET API referencia 249 . ha az aktuális felhasználó felhasználóneve megegyezik a megadott felhasználónévvel.IsCurrentUser("joe@contoso.if(WebSecurity.Logout() Honlapépítés a XXI. requireConfirmationToken=true|false]) A megadott felhasználónévvel és jelszóval létrehoz egy új felhasználói fiókot. megerősítő e-mail) if(WebSecurity.Login("username".(pl. if(WebSecurity.GetUserId(userName) A megadott felhasználói névből visszaadja a felhasználó ID-jét.password[.com/reset-password/" + resetToken + " to reset your password".. var userId = WebSecurity. WebSecurity.Login(userName...GetUserId(userName). WebSecurity.GeneratePasswordResetToken("myusername"). és belépteti a felhasználót. akkor visszatérési értéke igaz (true) lesz.CreateAccount("my-username".persistCookie]) Egy cookieba elhelyez egy hitelesítő token-t. WebSecurity. var userId = WebSecurity.. if(WebSecurity. akkor visszatérési értéke igaz (true) lesz.. "secretpassword").. var message = "Visit http://example.CreateAccount(userName. Ha a requireConfirmationToken paraméterét igazra(true) állítjuk. WebSecurity. WebMail.CurrentUserId.IsConfirmed("joe@contoso...IsConfirmed(userName) Ha a felhasználó meg van erősítve. amit el lehet küldeni a felhasználónak.. var welcome = "Hello " + WebSecurity. WebSecurity. } WebSecurity.. hogy átállíthassa a jelszavát. században Függelék – ASP. } WebSecurity.tokenExpirationInMin utesFromNow]) Létrehoz egy olyan jelszó-visszaállító tokent.CurrentUserName.com")) { .Send(.. password[.GeneratePasswordResetToken(username[. WebSecurity. } WebSecurity.ConfirmAccount(confirmationToken)) { //. var resetToken = WebSecurity.IsCurrentUser(userName) Igazat ad vissza. if(WebSecurity. message)..IsAuthenticated Ha az aktuális felhasználó be van jelentkezve.} WebSecurity.IsAuthenticated) {.com")) { .

DELETE vagy UPDATE. WebSecurity. var db = Database. Az utasítások lehetnek INSERT.Opentől. században Függelék – ASP.sdf"). hogy az egy elnevezett connection stringet használ.RequireAuthenticatedUser() A http státuszt 401-re (Jogosulatlan) állítja.Query(SQLstatement[. // Figyeljük. WebSecurity.RequireUser(userId) WebSecurity.Open("SmallBakery"). Database.RequireUser(userName) Ha az aktuális felhasználó nem egyezik meg a felhasználó által megadott felhasználónévvel. WebSecurity. ha a felhasználó nincs hitelesítve. meg hogy nincs kiterjesztés megadva. "new-password") Adatok Database.OpenConnectionString(connectionString) Megnyit egy connection stringgel meghatározott adatbázist.com"). Database.RequireUser("joe@contoso.Open("SmallBakeryConnectionString"). var db = Database. var id = db. WebSecurity. // Opens SmallBakery. akkor a HTML státuszkódot 401(Jogosulatlan)-re állítja.Open(connectionStringName) Megnyit egy megadott adatbázis fájlt. Database.Execute("INSERT INTO Data (Name) VALUES ('Smith')"). WebSecurity. vagy azt. Database. db.ResetPassword( "A0F36BFD9313".GetLastInsertId(). var db = Database.RequireRoles("Admin".Execute(SQLstatement[.NET API referencia 250 .parameters]) Honlapépítés a XXI. majd az érintett rekordok számát visszaadja. és ezzel együtt kilépteti a felhasználót. WebSecurity. "Smith").Execute("INSERT INTO Data (Name) VALUES (@0)".RequireAuthenticatedUser(). WebSecurity. WebSecurity. db.GetLastInsertId() Visszaadja a legutoljára beillesztett sorból az ID oszlopot.Logout().config fájlból vett elnevezett connection string ad meg.sdf in App_Data // Megnyitunk egy adatbázist egy elnevezett connection stringgel. Ez abban tér el a DataBase. db.RequireRoles(roles) Ha a felhasználó nem tagja valamelyik megadott csoportnak. newPassword) Ha a jelszó-visszaállító token(password reset token) érvényes.Execute("INSERT INTO Data (Name) VALUES ('Smith')"). amit a Web. akkor beállítja a http státuszt 401re(Jogosulatlan).parameters] Lefuttat egy SQL utasítást opcionális paraméterekkel együtt. WebSecurity.Eltávolítja a hitelesítő token sütit.OpenConnectionString("Data Source=|DataDirectory|\SmallBakery. "Power Users").ResetPassword(passwordResetToken.Open(filename) Database.megváltoztatja a felhasználó jelszavát a megadottra.

asp.QueryValue("SELECT COUNT(*) FROM Product WHERE Price > @0".asp.GetGoogleHtml("MyWebPropertyId") Analytics.parameters]) Lefuttat egy SQL utasítást (paraméterek átadásával).Query("SELECT * FROM PRODUCT WHERE Price > @0".GetStatCounterHtml(project.height[.QueryValue(SQLstatement[. Database.QuerySingle("SELECT * FROM Product WHERE Id = @0".Lekérdezi az adatbázist SQL utasítások használatával. 1). Helperek Analytics. themeColor: "Green".template][.AdvancedSearchBox( siteUrl: "www.templatePath]) Honlapépítés a XXI.security) Lerendereli a StatCounter Analytics JavaScriptet a megadott projektnek. majd visszaad egyetlen rekordot.net") @* Searches the www.locale]) Megjeleníti a Bing keresés eredményét a megadott formázással és URL-lel együtt. @Analytics. locale: "en-US") Chart(width. boxWidth: 300.AdvancedSearchBox([siteUrl][. resultHeight: 900. var count = db. var count = db. themeColor][.NET Custom Search". siteName: "ASP.SearchBox(siteUrl: "www. foreach (var result in db.GetStatCounterHtml(89. @Bing.resultWidth][. var product = db.NET API referencia 251 . században Függelék – ASP. 20).net site.parameters]) Lefuttat egy SQL utasítást(paraméterek átadásával).Name</p> } Database. resultWidth: 600.QuerySingle("SELECT * FROM Product WHERE Id = 1").SearchBox([siteUrl]) Elküld egy akár URL-t is tartalmazó keresést a Bingnek. "security") Analytics.asp.Query("SELECT * FROM PRODUCT")) {<p>@result. és visszaad egyetlen értéket. @Analytics.net".QueryValue("SELECT COUNT(*) FROM Product"). @Bing. *@ Bing. boxWidth][.*@ @Bing.GetYahooHtml(account) Lerendereli a Yahoo Analytics JavaScriptet a megadott felhasználói fióknak.QuerySingle(SQLstatement[. 20) { <p>@result.siteName][. majd a result változóba beletölti az eredményt. var product = db.GetYahooHtml("myaccount") Bing.Name</p>} foreach (var result = db.SearchBox() @* Searches the web.GetGoogleHtml(webPropertyId) Lerendereli a Google Analytics JavaScriptet a megadott ID-nek. @Analytics.resultHeight][.

xValue] [.Write(). legend] [.attributes]) Lerenderel egy Gravatar képet a megadott e-mail címnek. Az "sha256". height: 400). rating].action][.ASP. "5".Encode(object) Honlapépítés a XXI. yValues: new[] { "2". "3" }) . yValues: new[] { "2". height: 400) .net") FileUpload. @GamerCard. markerStep][.options]) Értékeket ad a grafikonhoz.AddLegend("Basic Chart") .[.LikeButton(url[.GetHtml("joe") Gravatar.GetHtml([initialNumberOfFiles][.GetHtml(email[. includeFormTag:true. xValue: new[] { "Peter".yValues][.AddLegend([title][. "Mary". "Julie".addText][.chartArea][. "4".chartType][.axisLabel][. "Andrew". "Dave" }.Inicializál egy grafikont. xValue: new[] { "Peter". @Facebook.defaultImage].[.name]) Magyarázó feliratot ad a grafikonhoz.Write().LikeButton("www. században Függelék – ASP. "3" }) . } Chart. @FileUpload. @{ var myChart = new Chart(width: 600.NET API referencia 252 . @Crypto.[. "5".GetHtml(initialNumberOfFiles:1. "6". "Dave" }. @Gravatar.uploadText]) Lerenderel egy felhasználói felületet fájlok feltöltéséhez. @{ var myChart = new Chart(width: 600.Hash(string[. includeFormTag] [.algorithm]) Crypto.GetHtml(gamerTag) Lerendereli a megadott Xbox játékos kártyát.algorithm]) Visszaadja a megadott adat hash-ét.xField][. } Crypto.az alapértelmezett algoritmus.AddSeries( name: "Employee". height: 400) . @{ var myChart = new Chart(width: 600.AddSeries([name][.Hash(bytes[. colorScheme]) A Facebook felhasználóknak enged kapcsolatot kiépíteni oldalakkal. } Chart. allowMoreFilesToBeAdded:false. uploadText:"Upload") GamerCard.Hash("data") Facebook. "6". "Julie".GetHtml("joe@contoso.AddSeries( name: "Employee". "Andrew". showFaces][.imageExtension] [. "4".yFields][.com") Json. "Mary".layout][. width][.imageSize].allowMoreFilesToBeAdded][.

Json.NET weboldalakról.Encode(dataObject). században Függelék – ASP.GetHtml("ASP.GetHtml() Státusz információt renderel ASP. Használjuk a ModelState helpert.IsValid) { // Save the form to the database } ObjectInfo. hogy elérjük ezt a tagot! ModelState. LinkShare.AddError("email".publicKey][.linkSites]) Lerenderel egy közösségi portál linket a megadott címből és Url-ből. theme][.PrivateKey = "your-private-recaptcha-key". ModelStateDictionary. var myJsonString = Json.").NET Web Pages Samples") @LinkShare.AddError(key. "http://www.additionalTweetText] [.Decode(string) Egy JSON kódolt stringet adat objektummá konvertál.Decode(jsonString). if (ReCaptcha. ReCaptcha. var myJsonObj = Json. akkor igazat ad vissza.errorMessage) Társít egy hibaüzenetet egy űrlap mezővel.IsValid Ha nincs semmilyen validációs hiba.GetHtml([. ReCaptcha.asp.PublicKey ReCaptcha. } ServerInfo.NET Web Pages Samples". @LinkShare.AddFormError(errorMessage) Társít egy hibaüzenetet egy űrlappal.GetHtml("ASP.GetHtml() Honlapépítés a XXI. Használjuk a ModelState helpert.privateKey]) Visszaadja a reCAPTCHA teszt eredményét. pageLinkBack][.Print(value[. Használjuk a ModelState helpert hogy elérjük ezt a tagot. @ReCaptcha.language][.GetHtml(pageTitle[.net") ModelStateDictionary. @ServerInfo.enumerationLength]) Lerendereli egy objektum tulajdonságait és értékeit egy objektumnak @ObjectInfo. ModelStateDictionary.depth][.PublicKey = "your-public-recaptcha-key". ModelState. "Enter an email address"). tabIndex]) Lerenderel egy reCAPTCHA verifikációs tesztet.AddFormError("Password and confirmation password do not match. hogy elérjük ezt a tagot! if (ModelState. Általában ezeket az _AppStart oldalon állítjuk be.twitterUserName][.PrivateKey Beállítja a publikus és privát kulcsokat a reCAPTCHA-hoz.Egy adat objektumból JavaScript Object Notation (JSON) formátumú stringet konvertál.Validate()){ // Sikeres teszt.Validate([. ReCaptcha.GetHtml() ReCaptcha.NET API referencia 253 .Print(person) Recaptcha.

Search("asp.Query("SELECT * FROM Product")). var username = WebCache. "100".Search(searchQuery) Egy Twitter csatornát renderel a megadott kereső szöveghez.Open("SmallBakery").xap".net") Video.NET API referencia 254 . "100".Pager() // A grid változó akkor jön létre. @Twitter. WebImage.height) Egy Silverlight lejátszót renderel a megadott .slidingExpiration]) A kulcs által meghatározott névvel egy értéket tesz a gyosítótárba. "joe@contoso. WebCache. WebGrid.Silverlight(filename. WebGrid. var grid = new WebGrid(db.minutesToCache][. "100") Video.height]) Egy Windows Media lejátszót renderel a megadott fájlhoz.Set(key.Get(key) Visszaadja a kulcs által meghatározott objektumot vagy null-t.GetHtml() Egy HTML táblázatokban adatok megjelenítésére szolgáló markupot renderel.GetHtml()// The 'grid' variable is set when WebGrid is created.Twitter.Silverlight("test.swf". században Függelék – ASP.Set("username". var db = Database.Pager() Lerenderel egy pager-t a WebGrid objektumnak. WebImage(path) Betölt egy képet a megadott útvonalról.com ") WebGrid(data) A lekérdezésből vett adatokkal egy új WebGrid objektumot hoz létre.Get("username") WebCache. Méreteit megszabhatjuk. @Video.height]) Egy Flash lejátszót renderel a megadott fájlhoz. @grid. "100") WebCache. ha az nem található. @Video.width. @Twitter.width.value[.Remove(key) A kulcs által meghatározott objektumot kiveszi a gyorsítótárból. amikor a WebGrid létrejön.xap fájlhoz.wmv". @ grid.png"). width.MediaPlayer("test.Flash("test.Profile("billgates") Twitter. "100". Méreteit megszabhatjuk. var image = new WebImage("test. Méreteit megszabhatjuk.Flash(filename[. WebCache. @Video. "100") Video.Profile(twitterUserName) Egy Twitter csatornát renderel a megadott felhasználóhoz.AddImagesWatermark(image) Honlapépítés a XXI.Remove("username") WebCache.MediaPlayer(filename[.

com").Send("touser@contoso.SmtpServer = "mailServer". image.FlipVertical().Save("test.FlipHorizontal().filesToAttach][. WebMail.FlipHorizontal() WebImage.additionalHeaders]) Elküld egy e-mail-t. Webmail.GetImageFromRequest() Betölti a feltöltött képet. image.GetImageFromRequest().png"). WebImage.UserName Beállítja az SMTP szerver felhasználó nevét. WebImage. image. WebMail. Ezt általában az _AppStart oldalon szoktuk megtenni. WebImage photo = new WebImage("test.AddTextWatermark("Copyright") WebImage. image.NET API referencia 255 .FlipVertical() Megfordítja a képet horizontálisan vagy vertikálisan.com". Honlapépítés a XXI. WebMail.png").height) Átméretez egy képet.A megadott képet vízjelként adja hozzá egy képhez. image. WebMail. WebImage watermarkImage = new WebImage("logo.Send(to. WebMail. "body of message". WebImage. WebMail.RotateLeft(). from][.png").RotateRight() Balra vagy jobbra forgatja a képet.AddTextWatermark(text) A megadott szöveget hozzáadja egy képhez.Password = „password”.subject.RotateRight().Resize(100.isBodyHtml] [. photo. image. 100). "subject". Ezt általában az _AppStart oldalon szoktuk megtenni.imageFormat]) A megadott elérési útra elmenti a képet. "fromuser@contoso.body[. században Függelék – ASP. WebImage.Resize(width. Ezt általában az _AppStart oldalon szoktuk megtenni. WebImage.Password Beállítja az SMTP szerver jelszavát.AddImageWatermark(watermarkImage).UserName = "Joe".RotateLeft() WebImage.SmtpServer Beállítja az SMTP szerver nevét. WebMail. var image = WebImage. image.Save(path[. cc][.

NET Razor syntax szerver kódot írni.Függelék – ASP. A 8 legjobb programozási tipp és trükk Ebből a részből megtudhatjuk azokat a dolgokat.NET Weboldalak Visual Basickel 256 . az ASP.Now.Beágyazott kifejezések --> <p>The value of your account is: @total </p> <p>The value of myMessage is: @myMessage</p> <!-.vbhtml a kiterjesztése. A fejezetből megismerhetjük:   A 8 legjobb programozási tippet és trükköt.NET Razor syntax kódok ebben a könyvben C#-on alapulnak.ToString() End Code <p>The greeting is: @greetingMessage</p> Az eredmény így jelenik meg a böngészőben: HTML kódolás Ahogy az előző példákban láthattuk.DayOfWeek Dim greetingMessage = greeting & " Today is: " & weekDay.Többsoros parancsblokk --> @Code Dim greeting = "Welcome to our site!" Dim weekDay = DateTime. hogyan használjuk a Visual Basic programozási nyelvet és annak szintaxisát. és ebbe írjuk bele a Visual Basic kódot.NET weblapot Visual Basicben hozzunk létre. Ahhoz hogy egy ASP. Ebben a függelékben áttekintjük. 1.NET HTML kódolja a kimenetet. Ugyanis felcseréli a lefoglalt HTML karaktereket (mint például a <.Egysoros parancsblokkok --> @Code Dim total = 7 End Code @Code Dim myMessage = "Hello World" End Code <!-. században Függelék – ASP.NET Weboldalak Visual Basickel Ahogy láthattuk. amiket muszáj tudnunk. ha a @ jelet használjuk az oldalon. De a Razor syntax Visual Basicet is támogat. Kódot a @ jel után adhatunk az oldalhoz.> és az &) Honlapépítés a XXI. A @ jel segítségével beágyazott kifejezéseket és egy vagy több soros parancsblokkok kezdetét jelezzük. hogy elkezdhessünk ASP. hogy ASP.NET weboldalakat hozzunk létre. <!-. egy olyan weboldalt készítünk aminek . akkor az ASP. A Visual Basic programozási nyelvet és annak szintaxisát.

Now.Többsoros parancsblokk. Markup és Kód a Kódblokkban. --> @Code Dim theMonth = DateTime. Egy kódblokkon belül az utasításokat egy sortöréssel zárjuk le Egy Visual Basic kódblokkban minden utasítást egy sortöréssel zárunk le. A kódblokk kezdetét jelölő Code kulcsszót használjuk közvetlenüla @ jel után.Now.) <!-. században Függelék – ASP. A HTML kódolásról bővebben lásd: 5 . melyek engedélyezik.Fejezet – Munka az űrlapokkal 2. it is " & outsideTemp & " degrees. Ha esetlegesen HTML kódot szeretnénk megjeleníteni (pl <p></p> a bekezdésekhez vagy <em></em> hogy kiemeljünk egy szöveget).Beágyazott kifejezés. illetve End Code kulcsszavakkal jelezzük őket.Egysoros parancsblokk. it is " & outsideTemp & " degrees. ha szükséges. nem pedig HTML címkeként vagy entitásként. (A későbbiekben megtanuljuk.Month End Code <!-. és az oldalunkat biztonsági kockázatoknak tehetjük ki.NET Weboldalak Visual Basickel 257 .Egysoros parancsblokk. ugyanis nem lehet üres hely közöttük! <!-. hogy nem fog jól megjelenni." End Code <p>Today's weather: @weatherMessage</p> Az eredmény így jelenik meg a böngészőben: 3.Month End Code <p>The numeric value of the current month: @theMonth</p> <!-. A kódblokkokat Code és End Code közé tegyük A kódblokkokban egy vagy több utasítást találunk és Code. ezért nem kell sortörés.Egysoros parancsblokk. lásd: Szöveg. hogy lehet egy hosszú utasítást több sorba írni." End Code <!-. hogy a karakterek normálisan jelenjenek meg. A HTML kódolás nélkül a kódunk kimenete lehet. --> <p>Today's weather: @weatherMessage</p> Honlapépítés a XXI. --> @Code Dim theMonth = DateTime. --> @Code Dim outsideTemp = 79 Dim weatherMessage = "Hello.olyan kódokkal. --> @Code Dim outsideTemp = 79 Dim weatherMessage = "Hello.

amit szövegként kezelünk.Egy változó megjelenítése --> <p>Welcome to our new members who joined in @year!</p> Az eredmény így jelenik meg a böngészőben: 5. <!-.Dátum tárolása --> @Code Dim year = DateTime. @Code Dim myString = "This is a string literal" End Code Hogy dupla idézőjelet tegyünk a stringünkbe. használjuk a @ jelet. Új változót a Dim kulcsszóval hozhatunk létre.4.Now. today is Monday. hogy a változókat közvetlenül beillesszük az oldalunkba. dátumok.""" End Code <p>@myQuote</p> Az eredmény így jelenik meg a böngészőben: Honlapépítés a XXI. használjunk két dupla idézőjelet! Ha azt szeretnénk. Hogy meghatározzunk egy stringet. Ezek lehetnek stringek.NET Weboldalak Visual Basickel 258 . számok. akkor """"-t használjunk! <!-.…stb. Ahhoz. században Függelék – ASP. hogy az idézőjelek megjelenjenek az oldalon. new members!" End Code <p>@welcomeMessage</p> <!-. ha esetleg dupla idézőjelet szeretnénk használni. Értékek tárolására használjunk változókat ! Értékeket változókban tárolhatunk. idézőjelek közé kell tegyük. Stringekhez a szöveget idézőjelek közé tegyük! A string olyan karaktersorozat. így használjuk őket: "" megjelenítendő szöveg"".Year End Code <!-.String tárolása --> @Code Dim welcomeMessage = "Welcome.Dupla idézőjel használata egy stringben --> @Code Dim myQuote = "The person said: ""Hello.

nem kell a kis. DIM someNumber = 7 End Code <p>The value of the <code>lastName</code> variable is: @LASTNAME</p> Az eredmény így jelenik meg a böngészőben. szövegdoboz. ami egy űrlap mezőiben található értékeket adja vissza (szövegdoboz…stb.True) és a változó nevek (myString) kis. (Pl: egy szövegdoboznak van egy Text tulajdonsága. A következő példában a lastname változót kisbetűsen deklaráljuk.) Egy objektum jellemzőit a tulajdonságain keresztül tudhatjuk meg. webes lekérés. 7. vagy esetleg azt. amiket a programozás során felhasználunk (oldal.és nagybetűvel is írhatóak.If. és még sok minden másra képes. Erre jó példa a fájl objektum Save metódusa. A programozási kulcsszavak (Dim.6.NET Weboldalak Visual Basickel 259 . Valószínűleg sűrűn fogunk dolgozni Request objektummal.). kép. vagy egy e-mail objektum Send metódusa. egy e-mailnek van From tulajdonsága. e-mail. században Függelék – ASP. hogy milyen típusú böngésző indította meg a lekérdezést. A következő példa bemutatja. Az oldalunk kódolása objektumokkal való munkát igényel Objektumnak nevezünk olyan dolgokat. vagy a lekért oldal URL-jét. egy adatbázis sor… stb.és nagybetűket. A Visual Basic programozási nyelv nem különbözteti meg a kis. egy lekérésnek van egy URL tulajdonsága. de az oldalunkon nagybetűvel használjuk. A Visual Basic kód nem case sensitive. ezeket „igékként” láthatjuk. hogyan érjük el a Request objektum Honlapépítés a XXI.esetlegesen azonosítja a felhasználót. Az objektumok természetesen rendelkeznek metódusokkal is. fájl. a Dim.és nagybetűkre figyelni. mint pl. egy kép objektum Rotate metódusa. az ügyfél objektumnak pedig FirstName tulajdonsága). @Code Dim lastName = "Smith" ' A kulcsszavaknál.

tulajdonságait és hogyan hívjuk meg a MapPath nevű metódusát.NET Weboldalak Visual Basickel 260 . <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.MapPath(Request." 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> Honlapépítés a XXI. században Függelék – ASP." Else result = "This was the first request for this page.Url</td> <td>@Request. Ezzel megismerhetjük egy oldal szerveroldali abszolút elérési útját.FilePath)</td> <td>@Request. @Code Dim result = "" If IsPost Then result = "This page was posted using the Submit button.FilePath</td> <td>@Request.RequestType</td> </tr> </table> Az eredmény így jelenik meg a böngészőben: 8. ami helyettünk dönt . Ennek a legáltalánosabb módja a ha (if) parancs (és az opcionális vagy (else) parancs). A dinamikus weboldalak egyik kulcstulajdonsága. hogy képesek vagyunk eldönteni. mi történjen különböző helyzetekben. Írhatunk olyan kódot.

A web programozásban nem árt tudnunk. ekkor megtehetünk olyan dolgokat.NET Weboldalak Visual Basickel 261 . hogy egy oldalt éppen GET vagy POST metódussal kérnek le. Az ASP. akkor az IsPost tulajdonság visszatérési értéke igaz (true) lesz. amivel beolvashatunk egy oldalt.Az If IsPost utasítás az If IsPost = True utasítás rövidítése.vbhtml fájlt! 2. ugyanis ha a lekérdezés POST típusú. mint például egy szövegdoboz értékének kiolvasása. Egyszerű példakódok A következő példákból megismerhetjük az alapszintű programozási technikákat. Ezekről a későbbiekben többet megtudhatunk: HTTP GET és POST metódusok és az IsPost tulajdonság A HTTP protokoll nagyon kevés olyan metódust támogat. amivel lekérdezünk a szerverről. Ha a felhasználó kitölt egy űrlapot és ráklikkel az elküldre. A két legtöbbször használt a GET.AsInt() + num2. ismételhetünk kódblokkokat. hogy megtudjuk a lekérdezés GET vagy POST típusú-e. században Függelék – ASP. Másoljuk bele a következő kódot és markupot. ami bemutatja. hogyan dolgozzuk fel az oldalt. total = num1. akkor a böngésző egy POST lekérdezést küld a szervernek. Dim num1 = Request("text1") Dim num2 = Request("text2") ' Convert the entered strings into integers numbers and add. majd az oldal összeadja és megjeleníti az eredményt. amit az oldal tartalmazott! @Code Dim total = 0 Dim totalMessage = "" if IsPost Then ' Retrieve the numbers that the user entered. akkor a lekérdezés a GET metódust használja. Az If utasítással sokféle módon tesztelhetünk különféle eseteket. Ebben a könyvben sok olyan példát találunk.NET weboldalaknál használhatjuk az IsPost tulajdonságot. felülírva bármit. amivel pedig elküldhetünk egy oldalt. amiben a felhasználó megad két számot.AsInt() totalMessage = "Total = " & total End If End Code Honlapépítés a XXI. Ebben a példában egy olyan weboldalt készítünk. 1. hogyan dolgozzunk fel egy weboldalt az IsPost tulajdonságtól függően. Általában amikor a felhasználó először lekér egy oldalt. ugyanis ebből tudhatjuk meg. Hozzunk létre egy AddNumbers. a másik pedig a POST.

Ariel.AsInt()+num2. font-family: Verdana. border-style: solid. Az oldal elején található kódblokk Code és End Code közé van zárva. num1. és az If IsPost visszatérési értéke igaz (true) lesz. és num2 változók különféle számokat tárolnak. mint ahogy az oldal elején deklaráltuk. Az AsInt metódus átalakítja a változókban található szöveg értéket számmá (intergerré). hogy a betűzése ugyanaz legyen. amit a totalMessage változóban tárolunk. Mentsük el az oldalt. hogyan dolgozzunk objektumokkal és metódusokkal. width: 250px. amikor az oldal vége felé használjuk a totalMessage változót.} </style> </head> <body> <p>Enter two whole numbers and click <strong>Add</strong> to display the result. } form {padding: 10px. és nyissuk meg egy böngészőben! (Bizonyosodjunk meg arról. A szövegérték. A total. akkor lefut az oldal kódja és megjeleníti az összeadott számokat. a totalMessage pedig szöveget tárol.NET Weboldalak Visual Basickel 262 . amiket ezek után össze lehet adni. idézőjelek közé van téve. Ha elküldtük az oldalt. amire figyelni kell:      A @ jel kezdi meg az oldalunk első kódblokkját.ekkor az oldalt elküldjük a szervernek a HTTP POST metódus segítségével.   3. A num1.AsInt() kifejezés bemutatja. A <form> címke tartalmaz egy method=”post” tulajdonságot. majd klikkeljünk az Add gombra! Honlapépítés a XXI.</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> Pár dolog. században Függelék – ASP. Ez határozza meg.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Adding Numbers</title> <style type="text/css"> body {background-color: beige. hogy az oldal ki van választva a Files névtérben!) Írjunk be két egész számot. mikor klikkel a felhasználó az Add(összeadás) gombra. Mivel a Visual Basic nem különböztet meg kis és nagy betűket. csak arra kell ügyelnünk. margin: 50px. de megtalálható a totalMessage beágyazott változónk előtt is.

vagy esetleg JavaScriptben). @<p>Hello. Visual Basicben. A @: segítségével egy sor szöveget vagy párosítatlan HTML címkéket írathatunk ki.NET-nek képesnek kell lennie megkülönböztetni a szöveget a kódtól. <em>Stranger!</em> today is: </p> @DateTime. A könyvnek ebben a részében megtanuljuk. fejezetben egyszerű példán keresztül láthattuk hogyan kell ASP. the time is @DateTime.NET weboldalt készíteni.Now and this page is a postback!</p> Else ' Itt a szövegek vannak címkék között. és elküldi a böngészőnek. Alap szintaxis Szöveg. markup és kód egyesítése kódblokkokban A szerver kódblokkokban sűrűn szeretnénk kiíratni az oldalra a szövegeinket és a markupot. A <text> elem segítségével több sort is Honlapépítés a XXI.Now End If Egy HTML elem tartalmazhat szöveget. ha már programoztunk C-ben. akkor azt is végrehajtja.NET érzékeli a kezdő HTML címkét. ha még tartalmaz kódot. Ha már van némi tapasztalatunk a programozás terén (főként. majd csak utána a szerver kód.  Tegyük a szöveget HTML elemek közé. akkor az itt olvasható anyag nagyrészt ismerős lehet. még több HTML elemet és kódot. akkor lekódol mindent.vbhtml fájloknál hogyan adjuk hozzá a markuphoz a WebMatrix kódot. században Függelék – ASP. hogy a . akkor valószínűleg csak azt kell megszoknunk. Ha így van.NET Weboldalak Visual Basickel 263 . Ezt különböző módokon érhetjük el. hogyan írjunk Razor szintaxist használó ASP. @<p>Hello.A Visual Basic programozási nyelv és szintaxisa A 2. mint például <p></p> vagy <em></em>: @If IsPost Then ' Ebben a sorban minden tartalom <p> címkék között van. akkor az ASP. amit szövegként szeretnénk megjeleníteni. és hogyan adhatunk hozzá szerver kódot a HTML markuphoz.NET szerver kódot Visual Basicben.(Természetesen. Ha az ASP. amit az elem tartalmaz.)  Használjuk a @: operátort vagy a <text> elemet. C++ban. C#-ban. Ha a kódblokkunk tartalmaz szöveget.

az ASP. hogy használjuk a sortörést. @If IsPost Then @<text> The time is: <br /> @DateTime. majd folytassuk a parancsot a következő sorban! Az olvashatóság érdekében a parancsokat annyi sorba tördelhetjük.</p></text> End Code Megjegyzés: Ha a szöveget HTML elemmel. @DateTime.kiírathatunk. kivételek az itt felsorolt speciális esetek. @If IsPost Then ' Sima szöveg párosítatlan HTML címkével és kóddal.ToString("MMMM"). párosítatlan HTML címkéket.) Üres helyek A plusz üres helyek a programkódban (stringen kívűl) nem változtatják annak lefutását. @Code Dim personName= "Smith" End Code Hosszú utasítások több sorba tördelése Egy hosszú parancsot a sor végére elhelyezett alulvonás _ karakterrel tudunk több sorba tördelni (Visual Basicben folytatás karakter). csak használni kellene a @ operátort minden sor előtt. az _ elé tegyünk egy szóközt. Ahhoz. </text> End If A következő példában használunk szöveget. Természetesen a sorokat külön-külön írva is működne a kód.Now @:is the <em>current</em> time. században Függelék – ASP. csak itt <text> címkét használunk.és még több szöveg.NET Weboldalak Visual Basickel 264 . End If A következő példa megegyezik az előzővel. Honlapépítés a XXI.NET a kód kifejezéseket és a @ után írt kód blokkokat lekódolja. @Code ' Doesn't work. amiket <text> és </text> közé zárunk. @ operátorral vagy <text> elemmel jelenítjük meg. Ezek a módszerek akkor hasznosak. @:The time is: <br /> @DateTime. @Code Dim familyName _ ="Smith" End Code @Code Dim _ theName _ = _ "Smith" End Code Arra vigyázzunk. hogy a string szövegeket nem tördelhetjük több sorba! A következő példa ezt a hibát mutatja be. amennyibe csak szeretnénk. (Természetesen ahogy már megjegyeztük. az ASP. ha egy HTML elemet a kimeneten nem akarunk megjeleníteni.Now ' Kód aztán sima szöveg.Now is the <em>current</em> time.NET nem HTML kódolja.Now @DateTime. and it's a <em>great</em> day! <p>You can go swimming if it's at least @minTemp degrees.Now. @Code dim minTemp = 75 @<text>It is the month of @DateTime. programkódot és párosított HTML címkéket. párosított címkék.

Egy változó neve akármi lehet. Megjegyzések a kódban A kódjainkban elhelyezhetünk megjegyzéseket magunknak vagy másoknak. *@ @* Ez egy többsoros megjegyzés. Változók és adattípusok A változóknak lehet egy megadott adattípusuk. hogy egy hosszú szöveget több sorba tördeljünk. Erről a fejezet egy későbbi részében olvashatunk. @* Ez egy egysoros megjegyzés. Ahhoz.vagy nagybetűsek. hogy kis. @Code ' Minden sor elejére tegyünk egy ’-t megjegyzés készítéséhez. Azonban egy változónak nem kötelező típust megadni. hogy betűvel kezdődjön. Természetesen még sokféle adattípust használhatunk. Honlapépítés a XXI. A string változók szövegesek (pl ’’Helló világ”). nem számít. (Esetenként meg kell adnunk egy típust. hogy milyen adatokat tartalmazhatnak. Dim monthlyTotal = theCount + 5 ' Dátumot adunk meg a változónak. hogy típussal rendelkező változót hozzunk létre használjuk a Dim kulcsszót és írjuk utána a változó nevét. End Code @Code ' A Visual Basicben nincs többsoros megjegyzés. ami egy szimpla idézőjel (’) minden sor elején. ' Ezért használunk minden megjegyzés előtt egy ’ jelet. amik megadják. Ahogy már az előzőekben láthattuk. Dim greeting = "Welcome" ' Számot adunk meg a változónak. A legtöbb esetben az ASP. az „és” (&) jelet kell használnunk. században Függelék – ASP. @Code ' Szöveget adunk meg a változónak.Dim test = "This is a long _ string" End Code Ha esetleg mégis szükség lenne arra. Dim theCount = 3 ' Egy kifejezést adunk meg a változónak.) Hogy deklaráljunk egy típus nélküli változót. használjuk a Dim kulcsszót és írjuk utána a változó nevét (Pl Dim myVar). *@ A kódblokkokban használhatjuk a Razor syntax megjegyzéseket vagy közönséges Visual Basic jelölést.NET Weboldalak Visual Basickel 265 . és nem tartalmazhat szóközt vagy előre lefoglalt karaktereket. mikor. csak arra kell figyelni. A sorok száma nincs megszabva. a date változókban pedig dátum értékeket tárolhatunk különböző formátumokban (pl 4/12/2010 vagy március 2009). a könyvben található példákból kiderül. az integer változókban egész számokat találhatunk (pl 3 vagy 79).NET kitalálja. End Code Változók A változó adatok/értékek tárolására alkalmas objektum. A Razor syntax megjegyzések @*-gal kezdődnek és *@-cal zárulnak. majd használjuk az As kulcsszót és utána írjuk a típus nevét (Pl Dim myVar As String). hogy a változó milyen adatként van használva.

Dim myPath = Request. Ilyenkor besegítünk egy explicit átkonvertálással. A legáltalánosabb eset. mert ez egy kódblokk.Today ' Az aktuális oldal URL-jét adjuk meg a változónak. friends!</p> End Code <!-. total = num1. amiben stringből számot csinálunk. --> <p>The URL to this page is: @myPath</p> Az eredmény így jelenik meg a böngészőben: Adattípusok konvertálása és tesztelése Annak ellenére. hogy az ASP.Változó használata beágyazott kifejezésben. hogy milyen típusú adatokkal dolgozunk. néha mégsem sikerül. amik felhasználják a weboldal változóit. @Code ' Változók értékeinek beágyazása a HTML markupba. hogy string-et konvertálunk át más típussá. ha nincs szükség átkonvertálásra. @<p>@greeting.NET általában automatikusan meg tudja határozni az adattípusokat. ' A markup elé tegyünk @-ot.AsInt() totalMessage = "Total = " & total Honlapépítés a XXI. Dim name as String = "Joe" Dim count as Integer = 5 Dim tomorrow as DateTime = DateTime. ha tudjuk.Url ' Változók deklarálása explicit adattípusokkal.Now. néha hasznos lehet. --> <p>The predicted annual total is: @( monthlyTotal * 12)</p> <!-.NET Weboldalak Visual Basickel 266 . században Függelék – ASP. A következő példa egy tipikus esetet mutat be.AddDays(1) End Code A következő példában olyan beágyazott kifejezéseket láthatunk. Még akkor is.Dim today = DateTime. @Code Dim total = 0 Dim totalMessage = "" if IsPost Then ' Retrieve the numbers that the user entered.AsInt() + num2. mint például integerre. vagy datere. Dim num1 = Request("text1") Dim num2 = Request("text2") ' Convert the entered strings into integers numbers and add.Az oldal URL-jének megjelenítése változóval.

az elküldött adat string lesz.AsDecimal() AsDateTime().End If End Code A felhasználó minden adatot stringként ad meg. ha a felhasználótól számot kérünk. Még akkor is.NET-ben a decimális szám pontosabb. hogy.425" Dim myDecNum = myStringDec. A következő táblázat tartalmazza a változók gyakori konvertálásait és tesztelési metódusait. században Függelék – ASP. IsInt() Leírás Egy stringet. Ha a konvertálás sikeres. IsFloat() AsDecimal().ToString() & num2. Egy string-ből.NET Weboldalak Visual Basickel 267 . átkonvertálnánk őket. és ők azt is írtak be.AsInt() End If Dim myStringBool = "True" Dim myVar = myStringBool. (Az ASP.AsDateTime() ToString() Dim num1 As Integer = 17 Dim num2 As Integer = 76 ' myString is set to 1776 Dim myString as String = num1.AsFloat() AsBool().IsInt() Then myIntNumber = myStringNum.432895" Dim myFloatNum = myStringFloat.3) float-ot (lebegőpontos) konvertál. aminek decimális értéke van (1. Átkonvertál egy decimális értékű stringet (1. Átkonvertál egy stringet ami dátum és idő értékű az ASP. Cannot implicitly convert type 'string' to 'int'. ami egy egész számnak felel meg átkonvertál integerré Átkonvertál egy igaz vagy hamis stringet boolean típussá. össze tudjuk adni a két számot.AsBool() Dim myStringFloat = "41. hogy azt számmá kell konvertálnunk.3) egy decimális számmá. ha a példánkban össze akarnánk adni az értékeinket anélkül. a következő hibaüzenetet kapnánk. Példa Dim myIntNumber = 0 Dim myStringNum = "539" If myStringNum. IsDecimal() Dim myStringDec = "10317.NET DateTime típussá. Metódus AsInt(). Mivel az ASP. IsDateTime() Dim myDateString = "12/27/2010" Dim newDate = myDateString.ToString() Honlapépítés a XXI. Bármilyen adatot stringgé konvertál.NET nem tud két stringet összeadni. mint a float. Az értékek integerré konvertálásához az AsInt metódust használjuk. Ebből adódik. IsBool() AsFloat().

listák. Általában gyors módszerként használjuk hamisság vizsgálatára (vagyis tagadva igaz). Leírás Pont. Operátor . Zárójelek. Egyenlőtlenség.AsInt() () @(3 + 7) @Request.FilePath) = Dim age = 17 Dim income = Request("AnnualIncome") Not Dim taskCompleted As Boolean = False ' Processing. Visszatérési értéke igaz(true). mint Példák Dim myUrl = Request. If Not taskCompleted Then ' Continue processing End If <> Dim theNum = 13 If theNum <> 15 Then ' Do something. Arra használjuk. Az igaz (true) értéket megfordítja hamisra (false) és fordítva.NET weboldalakat készíteni. Tagadás.Url Dim count = Request("Count"). End If If 2 < 3 Then < Honlapépítés a XXI. században Függelék – ASP.NET-nek. gyűjtemények elemeit érhetjük el. vagy egyenlőséget vizsgálunk közöttük. de csak párat kell ismernünk ahhoz. Kontextustól függően vagy a kifejezés jobb oldalán található értéket a kifejezés bal oldalán található objektumnak értékül adjuk. hogy milyen parancsot hajtson végre egy-egy kifejezésben. hogy megkülönböztessük az objektumokat és azok tulajdonságait. A Visual Basic sokféle operátort támogat. Kisebb.Operátorok Az operátor olyan kulcsszó vagy karakter. paramétereket adhatunk át metódusoknak.NET Weboldalak Visual Basickel 268 . A következő táblázatban megismerhetjük a leggyakoribb operátorokat. hogy elkezdhessünk ASP. és tömbök. Kifejezéseket csoportosíthatunk velük. Értékadás és egyenlőség.MapPath(Request. illetve metódusait. ha az értékek nem egyenlők. ami megmondja az ASP.

mint ahogy a számítógépünkön C: meghajtó gyökérkönyvtárát fordított perjel (\) jelöli. @("abc" & "def") Dim myTaskCompleted As Boolean = false Dim totalCount As Integer = 0 ' Processing.css Egy webszerveren.NET Weboldalak Visual Basickel 269 . pont úgy.   Fizikai elérési út: C:\WebSites\MyWebSiteFolder\styles\StyleSheet.css Honlapépítés a XXI.txt \images Logo. End If @(5 + 13) Dim netWorth = 150000 Dim newTotal = netWorth * 2 @(newTotal / 2) ' The displayed result is "abcdef". amikkel feltételeket kötünk össze. ami megfelel az oldalunk fizikai mappastruktúrájának. Alapértelmezetten a virtuális és a fizikai mappanevek megegyeznek. If (Not myTaskCompleted) AndAlso totalCount < 12 Then ' Continue processing. Nagyobb vagy egyenlő. Összeláncolás. Fájlok és mappák használata a kódban A kódjainkban sűrűn fogunk használni fájl és mappa elérési utakat.) A következő példában bemutatjuk a virtuális és fizikai elérési útját az előző példában látható StyleSheet.. Logikai ÉS és VAGY művelet.cshtml datafile. End If Dim currentCount = 12 If currentCount >= 12 Then ' Do something.css Virtuális elérési út (a virtuális gyökérkönyvtártól /): /styles/StyleSheet. minden weboldalnak van egy virtuális mappastruktúrája.> <= >= Nagyobb mint… Kisebb vagy egyenlő. ' Do something. számolásoknál használjuk őket. Hozzáadunk vagy kivonunk 1-et egy változó értékéből. Stringeket fűzünk össze vele. AndAlso OrElse += -= A növelés és csökkentés operátorok. Ebben a példában egy weboldal fizikai mappastruktúráját láthatjuk. End If Dim theCount As Integer = 0 theCount += 1 ' Adds 1 to count + * / & Matematikai operátorok. (A virtuális mappa elérési utakat mindig sima perjellel jelöljük. században Függelék – ASP. C:\WebSites\MyWebSite default. A virtuális gyökérkönyvtárat egy perjel (/) jelöli.css fájlnak.jpg \styles Styles. ahogy megjelenhet a weblapot fejlesztő számítógépen.

@Code Dim myImagesFolder = "/images" Dim myStyleSheet = "/styles/StyleSheet./images/Logo.Megjeleníti a fizikai elérési utat: C:\Websites\MyWebSite\datafile. --> <img src="@Href(myImagesFolder)/Logo.NET operátor. mint például egy a webszerverünkön található szövegfájl olvasása vagy írása. amiket a böngészőnk értelmezni tud.MapPath metódus: A virtuális elérési út fizikaivá konvertálása A Server.) A metódus úgy működik. Arra is használhatjuk még a Href metódust.txt" End Code <!-.cshtm) abszolút fizikai elérési utat (pl C:\WebSites\MyWebSiteFolder\default.NET-ben sokféle módszer áll rendelkezésünkre.MapPath(dataFilePath)</p> A Href metódus: Elérési utak létrehozása az oldal forrásaihoz A WebPage objektum Href metódusa átkonvertálja azokat az elérési utakat. olyan elérési utakká. A ~ operátor: a virtuális gyökérkönyvtár be olvasása Hogy kódunkban megadjuk a fájljaink és mappáink virtuális gyökerét. hogy a kódban szereplő elérési utakat megzavarnánk.MapPath metódus egy virtuális elérési útból (pl /default.MapPath metódus és a Href metódus. és egy <a> elemnek. @Code Dim dataFilePath = "/dataFile.Ezt az elérési utat hozza létre". Az ASP.<link>.css" End Code A Server. Például használhatjuk ezt a metódust arra.jpg" /> <!-.css" End Code <!-. használjuk a ~ operátort! Ez azért hasznos. hogy egy fájl vagy mappa virtuális elérési útját átadjuk neki.cshtml) konvertál. Ezt a metódust olyan feladatok elvégzésére használhatjuk. hogy egy HTML markupban attribútumokat adjuk egy <img>..jpg" az src attribútumban. az alkalmazott objektumtól függően néha virtuális.NET Weboldalak Visual Basickel 270 . hogy fájlokat és mappákat használjunk a kódunkban. csak itt ~-t használunk --> <img src="@Href("/images")/Logo.jpg" /> <!-.Ugyanaz. --> <link rel="stylesheet" type="text/css" href="@Href(myStyleSheet)" /> Logikai feltételek és ciklusok Honlapépítés a XXI. a Server. amik teljesítéséhez fizikai elérési útra van szükség. Ezek lehetnek: a ~ operátor.txt --> <p>@Server. és visszatérési értékként megadja a fizikai elérési utat.Amikor fájlokkal és mappákkal dolgozunk a kódunkban.(Egy kiszolgáló szerveren általában nem ismerjük weboldalunk fizikai elérési útját. @Code Dim myImagesFolder = "/images" Dim myStyleSheet = "/styles/StyleSheet. mint például képfájlok. században Függelék – ASP. mert így szabadon mozgathatjuk a weboldalunkat anélkül.CSS fájlhoz hoz létre egy linket. hogy elérési utakat készítsünk olyan forrásokhoz. és CSS fájlok. más weboldal. amiket a szerverkódunkban hozunk létre (tartalmazhat ~ operátort). (A böngésző nem tudja értelmezni a ~ operátort mivel az szigorúan ASP. néha fizikai elérési utakat használunk.

@Code Dim showToday = False If showToday Then DateTime. használjuk az If…Then parancsot! Ennek visszatérési érteke lehet igaz vagy hamis a feltételünktől függően. Ez a megoldás nemcsak az If-fel működik.Today End If End Code A teszt blokk az If kulcsszóval kezdődik.Today Else @<text>Sorry!</text> End If Egy vagy több ElseIf blokk használatával akár több feltételt is megadhatunk. hanem minden olyan Visual Basic programozási kulcsszóval. ennek lehet a visszatérési értéke igaz vagy hamis.ASP. Feltételek tesztelése Hogy egyszerű feltételeket teszteljünk. @<p>Your balance of $@theBalance is very low. For each. elég.99 If theBalance = 0 Then @<p>You have a zero balance. @Code Dim theBalance = 4. Sok feltétel esetén használjuk a Select Case blokkot: @Code Dim weekday = "Wednesday" Honlapépítés a XXI. Az If parancs egy Else ágat is tartalmazhat. arra az esetre. amik bizonyos feltételektől függenek. Do While…stb. amit kódblokk követ. az a lényeg. ha feltételünk visszatérési értéke hamis lenne. nincs szükség a megszokott Code…End Code páros használatára. ami lefut.) @If showToday Then DateTime. ugyanis ez felel meg a ’’bármi más’’ feltételnek. @Code Dim showToday = True If showToday Then DateTime. ami egy meghatározott alkalommal megismétli önmagát. században Függelék – ASP. Ha ez a feltétel teljesül. ha azonban egyik feltétel se teljesül.NET kódban írhatunk olyan parancsokat. Ezután következik a Then kulcsszó.(For. @<p>Your balance is: $@theBalance</p> End If End Code A következő példában láthatjuk. hogy egy Else ággal zárjuk le. az ElseIf ág fog lefutni. hogy ha az If águnk feltétele nem teljesül. vagy akár olyan kódot. ha a@ jelet használjuk. A valódi tesztelés (feltétel) az If kulcsszó után van. ez lesz az a rész. display this message.</p> ElseIf theBalance > 0 AndAlso theBalance <= 5 Then ' If the balance is above 0 but less than ' or equal to $5.</p> Else ' For balances greater than $5. akkor az ElseIf águnk feltételét vizsgáljuk meg. akkor az Else ág. ha a feltételünk (ami If és End if közé van zárva) visszatérési értéke igaz lesz. display balance.NET Weboldalak Visual Basickel 271 . Egy If ág mellé végtelen számú ElseIf ágat használhatunk.Today Else @<text>Sorry!</text> End If End Code Ha a kódblokkunkat az If utasítással kezdjük.

hogy hányszor szeretnénk ismételni. Ha tudjuk. hogy egy-egy parancsot többször is lefuttathassunk. amit a változó egy lehetséges értéke követ. Ezt ciklusok használatával érjük el. oh well. hogy az i változónk 10-től 20-ig fog elszámolni. Ez egy vagy több parancsot tartalmazhat. A For és a Next kulcsszavak között van a tartalmi rész. @For i = 10 To 20 @<p>Item #: @i</p> Next i A ciklus a For kulcsszóval kezdődik. majd három fontos rész követi. Például sokszor kell egy parancsot egy adattömb minden elemére lefuttatnunk. A Next i utasítás zárja le a ciklust. the message for today is: @greeting</p> Az ellenőrizendő változót időzőjelezni kell (A példánkban a weekday változó) Minden esetben egy Case parancsot használunk. majd megadjuk a számlálás keretét. Ha valamelyik érték megegyezik a letesztelt értékkel. században Függelék – ASP. mivel ez a ciklus nagyon hasznos ha előre vagy hátrafele szeretnénk számolni.  kulcsszó után deklarálunk egy számlálóként használatos változót (nincs szükség Dim-re). ami lefut minden egyes ismétléskor.NET Weboldalak Visual Basickel 272 . Megnöveli a számlálót és elindítja a ciklus következő iterációját." End Select End Code <p>Since it is @weekday. For   Honlapépítés a XXI. Az utolsó két példa így jelenik meg a böngészőben: Kód ismétlése (Ciklusok) Sűrűn van arra szükség. akkor használjuk a For ciklust." Case "Wednesday" greeting = "Wild Wednesday is here!" Case Else greeting = "It's some other day. akkor abban a Case ágban levő kód fut le. it's a marvelous Monday. például i=10 to 20." Case "Tuesday" greeting = "It's a tremendous Tuesday. Ez azt jelenti.Dim greeting = "" Select Case weekday Case "Monday" greeting = "Ok.

hogy a lista minden elemének a nevét megjelenítsük egy HTML listában egy új <li> elemként. amin a ciklusunkat le szeretnénk futtatni. Ha megnyitjuk ezt a példát. mint az előző. akkor sűrűn fogunk For Each ciklust használni. Honlapépítés a XXI.ServerVariables @<li>@myItem</li> Next myItem </ul> A For Each kulcsszót egy változó követi. A lista hasonló objektumok gyűjteménye. ezt követi az In kulcsszó. Arra használjuk a For Each ciklust. <ul> @For Each myItem In Request. ami a lista egy elemének felel meg (pl Myitem). mert nincs szükség számlálóra vagy beállított határra. A következő példa visszaadja a Request. A cikluson belül a lista változóval mindig az éppen aktuális listaelemet érhetjük el. akkor 11 sornyi szöveget fogunk látni.NET Weboldalak Visual Basickel 273 . Ehelyett a For Each végig megy a listán elejétől a végéig.ServerVariables lista elemeit (információk a webszerverről). és a For Each segítségével feladatokat hajthatunk végre minden elemén. Ha tömbökkel vagy listákkal dolgozunk. majd a lista. amiben minden sor egy számmal nagyobb. században Függelék – ASP.A For cikluson belül a markup minden egyes iterációkor létre hoz egy új bekezdést (<p> elem) és beállítja a betűméretet az i (a számláló) értékére. Ez a típusú ciklus azért hasznos a listáknál.

még maga a weboldal is. (Ha csökkenteni szeretnénk a változót. A ciklusok egy számolásra használt változót vagy objektumot tipikusan vagy növelnek.FilePath End Code A Page objektum tulajdonságaival sok információhoz juthatunk hozzá. A példánkban akárhányszor lefut a ciklus. a következő kód a Request objektum segítségével beolvassa az oldal elérési útját: @Code Dim path = Request. majd megadjuk a feltételt. Ebből a részből megismerhetjük a fontosabb objektumokat. a += operátor mindig hozzáad 1-et a változóhoz.A Do While utasítás segítségével sokkal általánosabb célú ciklusokat készíthetünk: @Code Dim countNum = 0 Do While countNum < 50 countNum += 1 @<p>Line #@countNum: </p> Loop End Code Ez a ciklus a Do While-lal kezdődik.NET –ben a legalapvetőbb objektum az oldal. mint példáult: Honlapépítés a XXI. Oldal objektumok Az ASP. anélkül. Egy oldal tulajdonságait közvetlenül elérhetjük. században Függelék – ASP. vagy csökkentenek.) Objektumok és gyűjtemények Az ASP. és ezt követi az ismételni akart blokk.NET Weboldalak Visual Basickel 274 .NET weboldalak szinte minden része objektum. hogy bármilyen más objektumot kellene használnunk. akkor a -= operátort kellene használni.

A tömbben tárolt elemeket az indexüket használva érhetjük el. "Joanne".IndexOf metódust használjuk. Dim myVar() as String).  (Kérelem). Integer vagy DateTime. ez a gyűjtemény információkat tárol az éppen aktuális lekérdezésről. hogy a változónk tömb (pl. <h3>Team Members</h3> @Code Dim teamMembers() As String = {"Matt".Sort metódus). hogy információkat helyezzünk el a válaszba. A lista akkor hasznos. amiket visszaküld az oldal a böngészőnknek. meg is fordíthatjuk a tömb tartalmát (Array. mi a megtekinteni kívánt oldal URL-je. vagyis a tömb első elemének az indexe 0. hogy milyen böngésző indította a lekérdezést. Request @Code ' Access the page's Request object to retrieve the URL. mint például String. a Length tulajdonságából tudhatjuk meg. és így tovább. Használhatjuk ezt a tulajdonságot például arra. Ez azoknak az információknak a gyűjteménye. A változó neve után írt zárójelekkel jelezzük. de nem akarunk minden elemhez külön változót létrehozni. vagyis hogy hány elemű. "Nancy"} @<p>The number of names in the teamMembers array: @teamMembers.IndexOf(teamMembers. amikor lefutott a szerveroldali kód. azt is beleértve. akkor az Array. "Nancy"} For Each name In teamMembers @<p>@name</p> Next name End Code Minden tömbnek van egy megadott adattípusa. században Függelék – ASP.Reverse(teamMembers) For Each reversedItem In teamMembers @<p>@reversedItem</p> Next reversedItem End Code Egy tömb hosszát. Dim pageUrl = Request. ki a felhasználó… stb. Erre tökéletes példa a Customer (vásárlók) objektumok gyűjteménye egy adatbázisból. tömbök) Az ugyanolyan típusú objektumok csoportját nevezzük gyűjteménynek. @Code Dim teamMembers() As String = {"Matt".Reverse metódus) vagy akár szét is válogathatjuk (Array. "Robert".Length </p> @<p>Robert is now in position: @Array. Ahogy már láthattuk. Honlapépítés a XXI. ha hasonló dolgokat akarunk együtt tárolni. mint például a Request. De ha úgy akarjuk. vagy egy For Each ciklussal. "Robert".Url End Code <a href="@pageUrl">My page</a> Gyűjtemény objektumok (Listák. "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. A tömbök indexei 0-val kezdődnek. a másodiknak 1. Két megszokott gyűjtemény típus a tömb és a ’’szótárérték’’.NET Weboldalak Visual Basickel 275 . Az ASP.NET-ben sok beépített gyűjtemény találhatunk.Files gyűjtemény. Response (Válasz). Ha szeretnénk egy megadott érték helyét meghatározni a tömbben. "Joanne".

ezekben elég megadni a kulcsot (vagy nevet).Add("test2". A Dim kulcsszóval egy változóhoz fűzhetjük a tárunkat. mint kulcs/érték párok gyűjteménye.A string tömbünk így jelenik meg a böngészőben: A tár (szótárérték) nem más.Add("test4". igazából egy metódus. ami egy új tárat hoz létre.Add("test3". században Függelék – ASP. mivel amit írtunk. A tárban használt adattípusokat zárójelek közé kell tennünk. 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 kulcsszóval jelezzük. hogy új Tár (szótárérték) objektumot akarunk létrehozni. és megadjuk hozzá a kulcs/érték párt. és a deklarálás végére még egy zárójel párt kell tenni. hogy új elemeket adjunk a tárunkhoz.Add("test1". A következő példában láthatjuk az értékadás egy alternatíváját: @Code myScores("test4") = 79 End Code Honlapépítés a XXI. Ahhoz. 71) myScores. Integer)() myScores. 100) myScores. hogy beállítsuk vagy beolvassuk a hozzátartozó értéket: @Code Dim myScores = New Dictionary(Of String.NET Weboldalak Visual Basickel 276 . meghívhatjuk a tár Add metódusát. 82) myScores.

baseVirtualDir és az allowCrossAppMapping. Hibák kezelése Try-Catch utasítások Lehetséges.) Az előző példában látható metódust most névszerinti paraméterekkel és eltérő sorrendben hívjuk meg: @Code ' Pass parameters to a method using named parameters. században Függelék – ASP. true) End Code <p>@myPathPositional</p> Amikor egy metódus sok paraméterrel rendelkezik. hogy akármilyen sorrendben megadhatjuk őket. hogy az sikeresen le tudjon futni. akkor null értéket vagy üres stringet ("") adjunk neki). Dim myPathNamed = Request. _ allowCrossAppMapping As Boolean) Ez a metódus visszaadja a megadott virtuális elérési útnak megfelelő fizikai elérési utat. Ehhez a sorrendhez mindenképp tartanunk kell magunkat. helyzeti és névszerinti paraméterekként. nem cserélhetjük fel a paramétereket. Hogy helyzeti paraméterek használatával hívjunk meg egy metódust. A paraméter olyan érték. Public Overridable Function MapPath (virtualPath As String. adjuk meg a paraméter nevét. hogy a kódunk tartalmaz olyan utasításokat.NET Weboldalak Visual Basickel 277 .(Hátránya hogy a metódushívás sokkal hosszabb lesz (méretben). kétféle módon adhatunk át paramétereket. A metódus három paramétere a virtualPath.MapPath("/scripts". A következő példa feltételezi. amiknek egy vagy több paramétere is van. "/". @Code ' Pass parameters to a method using positional parameters. Dim myPathPositional = Request. és átadja a három paramétert a megfelelő sorrendben. Például a DataBase objektum tartalmazhat egy DataBase. majd egy := jel után adjuk meg az értékét. ennek ellenére ha lefuttatjuk az előző két példát. A névszerinti paraméterek előnye.Hogy értéket olvassunk ki a tárunkból.MapPath(baseVirtualDir:= "/". amit azért adunk át egy metódusnak.MapPath metódust. név szerinti paraméterek használatával tisztábban és könnyen olvashatóbban tarthatjuk a kódunkat. mindhárom paraméterét meg kell adnunk. Például: Honlapépítés a XXI. A kód meghívja a Request. majd megjeleníti a végeredményt.Connect metódust. virtualPath:= "/scripts") End Code <p>@myPathNamed</p> Mint láthatjuk. ugyan azt az értéket fogják visszaadni. és nem hagyhatunk ki paramétereket (ha mégis szükséges. a paramétereket más sorrendben adtuk át. allowCrossAppMapping:= true.) Amikor meghívjuk ezt a metódust. amiket elfogadnak. Erre jó példa a Request. Léteznek olyan metódusok. a metódus deklarálásnál látható sorrendben kell megadni a paramétereket (a metódus dokumentációjából kiderül). hogy rendelkezünk a web oldalunkon egy script mappával. amik valamiféle hibát generálnak. _ baseVirtualDir As String. Amikor Razor szintaxissal használjuk a Visual Basicet. az objektumok metódusokkal rendelkezhetnek. Hogy név szerinti paraméterekkel hívjunk meg egy metódust. zárójelezzük az elérni kívánt kulcsot: @myScores("test4") Paraméterekkel ellátott metódusok hívása Ahogy a fejezet korábbi részeiben láthattuk. (Megjegyzés: a deklarálásnál a paraméterek azokkal az adattípusokkal jelennek meg.MapPath metódus. ami három paraméterrel is rendelkezik.

és így tovább. Hasonlóképpen lehetnek jogosultsági problémák. amikor az ASP.MapPath(dataFilePath) userMessage = "Hello world. de az is lehet.) Ha a kódunk esetlegesen nem kezelne egy kivételt. században Függelék – ASP. vagy egyszerűen csak nem megfelelő adatokat akarunk elmenteni. hogy létrehozzunk egy kivételt. akkor olyan hiba oldalt jelenítene meg. hogy lássuk. amivel a felhasználó megnyithatja azt.NET még a mappát sem tudja megtalálni. milyen. vagy csak el akarjuk kerülni az ilyen típusú hibaüzeneteket. A kódunk automatikusan generál (dob) egy hibaüzenetet. (Megszüntethetjük a megjegyzéseket az egyik utasításban. A példában szándékosan használunk rossz fájlnevet. amit ellenőrizni szeretnénk. Megjegyzés: Nem ajánlatos a Response.Redirect metódust használni egy Try/Catch utasításban. @Code Dim Dim Dim Dim Dim dataFilePath = "/dataFile. ami az első lekérdezéskor létrehoz egy szövegfájlt és megjelenít egy gombot. majd ehhez párosíthatunk egy vagy több Catch-t.  Sokféle hiba léphet fel. amikor minden jól működik. A következő példában megalkotunk egy oldalt. A kód két kivételt kezel: Az egyik a FileNotFoundException vagyis a nem létező fájl kivétel. ha egy adatbázis rekordjain szeretnénk változtatni.Now userErrMsg = "" Honlapépítés a XXI.NET Weboldalak Visual Basickel 278 . ahol különböző kivételeket kezelhetünk le. hogy elveszítjük a kapcsolatot az adatbázissal. ha a megadott fájlnév hibás vagy nem létezik. amit az előző képen láthattunk. A második a DirectoryNotFoundException vagyis a nem létező mappa kivétel. esetleg a kódunk nem tartalmazza a megfelelő jogosultságokat. ami akkor következik be. Használjuk Try/Catch utasításokat. ami akkor történik. A Try blokkba azt a kódot írjuk. amikor kivételekbe ütközünk. ha kivételbe ütközik. és így tovább. hogy a fájl nem is létezik vagy csak olvasható. Lehet. Azonban a Try/Catch részek segítenek megakadályozni az ilyen típusú hibaüzeneteket. Valójában annyi Catch blokkot használhatunk. the time is " + DateTime.txt" fileContents = "" physicalPath = Server. amikor egy fájlon valamiféle műveletet szeretnénk végrehajtani. ahány hibára számítunk. Ezeket a szituációkat programozási körökben kivételeknek (exception) hívjuk. mert alapból létrehozhat egy kivételt az oldalunkban.

században Függelék – ASP.Message userErrMsg = "The file could not be opened. mivel rossz az elérési út." End Try Else ' Létrehoz egy szöveg fájlt. errMsg = ex.NET Visual Basic programozási nyelv Honlapépítés a XXI. 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> További források angolul   ASP. File. fileContents = File.NET Weboldalak Visual Basickel 279 .WriteAllText(physicalPath.ReadAllText(physicalPath) Catch ex As FileNotFoundException ' A kivétel objektumot használhatjuk debuggolásra.ReadAllText("c:\batafile. Try ' Hibás kód. és ezt aktiváljuk: ' fileContents = File." Catch ex As DirectoryNotFoundException ' Hasonlít az előző kivételhez. errMsg = ex. ' Tegyük megjegyzéssé az előző sort.…stb.Dim errMsg = "" If IsPost Then ' A felhasználó ráklikkel a megnyitásra és elküldi az oldalt ' majd megpróbálja megnyitni a fájlt. amikor először lekérik az oldalt. please contact " _ & "your system administrator.txt") ' Ez a működő kód.Message ' Létrehoz egy felhasználóbarát hibaüzenetet. userErrMsg = "The file could not be opened. please contact " _ & "your system administrator. logolásra.

Az ASP. töltsük le a következő helyről: http://go.NETRazor weboldalakkal szeretnénk dolgozni.NET weboldalak programozása Visual Studióban A függelékben megtudhatjuk. Megtudhatjuk:   Hogyan telepítsük a Visual Web Developer 2010 Expresst és az ASP. így egyszerűen megtaláljuk.Függelék – ASP.NET weboldalak programozása Visual Studióban 280 . században Függelék – ASP. A program futtatás közben bárhol megállítható. hol hibás a kódunk. kilistázható az egyes változók értéke. Indítsuk el a Web Platform Installert. és kiegészíti a parancsokat is. Ha még nem rendelkezünk a Web Platform Installerrel.NET oldalak programozásakor:  IntelliSense. amelyeket használhatunk a szerkesztőben. vagy használhatjuk az ingyenes Visual Web Developer Express edition-t. megvásárolhatjuk a Visual Studio teljes verzióját. hogy egy-egy parancs begépelése közben automatikusan kilistázza azokat a lehetséges osztályokat és metódusokat.microsoft. válasszuk a Productsot. majd keressük meg az ASP.NET weboldalaknak a RazorSyntaxszal való programozására használhatjuk a WebMatrixot és sok más szerkesztőt. mely rengeteg hasznos eszközzel segít minket alkalmazásaink (nem csak weboldalak) fejlesztésében.NET Web PagesToolsfor Visual Studiót. Honlapépítés a XXI.NET MVC3 ReleaseCandidate-et! Kattintsunk az Add gombra! Ez a termék tartalmazza a Visual Studio eszközöket.NET-tel kapcsolatos funkcióit: az IntelliSense-t és a debuggert? Miért válasszuk a Visual Studiót? Az ASP. Használhatjuk a Microsoft Visual Studio 2010-et. Debugger. Ha ASP.NET MVC3 ReleaseCandidate-et is)? Hogyan használhatjuk a Visual StudioASP. és futtathatjuk a kódot sorról sorra.NETRazorTools telepítése Ebben a részben megtudhatjuk.com/fwlink/?LinkID=205867 2.NETRazorToolst (benne az ASP. amit a Visual Studio nyújthat nekünk ASP. melyekkel ASP.  Ezek a funkciók csak a Visual Studióban érhetők el. Két lényeges funkció. mely egy teljes funkcionalitással bíró integrált fejlesztőkörnyezet (integrateddevelopmentenvironment – IDE).NET Razor webhelyeket készíthetünk. Gyorsabbá teszi a kódok írását azáltal.NET weboldalak programozására a RazorSyntaxszal. A debugger lehetővé teszi a hibakeresést. 1. hogyan használhatjuk a Visual Studio 2010-et vagy a Visual Web Developer 2010 Expresst az ASP. hogyan telepítsük az ingyenes Visual Web Developer Express 2010-et és az ASP.

az elérési úthoz (path) pedig írjuk be egy mappa elérési útját a számítógépen! Honlapépítés a XXI. Kattintsunk az Install gombra a telepítéshez! Az ASP. Indítsuk el a Visual Studiót vagy a Visual Web Developert! 2.NET Razor Tools használata Visual Studioval Az IntelliSense és a debugger használatához készítsünk egy ASP. Válasszuk az ASP.NETRazorwebhelyet a Visual Studióban. A File menüben válasszuk a New Web Site lehetőséget! 3.NET Web Site (Razor) sablont! 5. Ha még nincs feltelepítve a Visual Studio vagy a Visual Studio Express. A megnyíló New Web Site ablakban válasszuk ki a használni kívánt nyelvet (C# vagy Visual Basic)! 4. században Függelék – ASP.3. keressük meg a Visual Web Developer Expresst.NET weboldalak programozása Visual Studióban 281 . A Web Locations felirat melletti legördülő menüben válasszuk a File System lehetőséget. majd kattintsunk az Add gombra! 4. 1.

A teljes kód a GetHtml parancshoz a következőképpen néz ki: @Server. és nyomjuk le az Enter gombot! Az IntelliSense automatikusan kiegészíti a parancsot. Amikor lezárjuk a </p>taget. (A C#-ban bármilyen metódus esetén oda kell írni a () karaktereket a metódus végére.GetHtml() Honlapépítés a XXI.cshtml oldalt! Győződjünk meg róla. hogy az ablak alján a Source fül van kiválasztva! 2. Válasszuk a GetHtml metódust a listából.NET weboldalak programozása Visual Studióban 282 . A frissen létrehozott webhelyen nyissuk meg a Default. hogyan működik az IntelliSense.6. században Függelék – ASP. 3. 1. amiket használhatunk a ServerInfohelperhez. Kattintsunk az OK gombra! Az IntelliSense használata Miután létrehoztunk egy webhelyet. láthatjuk. írjuk be: @ServerInfo. (a pontot is a végére)! Az IntelliSense megjeleníti a lehetséges metódusokat.

2.GetHtml parancsot. A megváltozott kód a két új sorral és a breakpointtal a következőképpen néz ki: 4. században Függelék – ASP. A következő képen láthatjuk. és írjunk a helyére egy meghívást a @myTime változóra! Ez a meghívás megjeleníti az aktuális időt az új sorban. Távolítsuk el a ServerInfo. így megvizsgálhatjuk a program adott részének működését.cshtml oldal tetején a Page. Láthatjuk továbbá a Debug eszköztárat. Nyomjuk le a Ctrl+F5-öt az oldal futtatásához! Az oldal így jelenik meg a böngészőben: 5. Zárjuk be a böngészőt. és mentsük a Default. 3.4. A szerkesztő bal oldalán lévő szürke területen kattintsunk a sor melletti részre.NET weboldalak programozása Visual Studióban 283 . hogyan jelenik meg az oldal a szerkesztőben a breakpointhoz (sárgával jelölt sor) érve. Honlapépítés a XXI.cshtmloldal változásait! A Debugger használata 1. hogy állítsa meg a programot az adott ponton. illetve a Step Into (sor futtatása) gombot. mely jelzi a debuggernek. Nyomjuk le az F5-öt az oldal debuggerben való futtatásához! A futtatás megáll az általunk beállított breakpointon.Title kezdetű sor után írjuk be a következő sort: Var myTime = DateTime. így létrehozva egy úgynevezett breakpointot! Ez egy olyan jelölő.TimeOfDay.Now. A Default.

Amikor végeztünk a változók vizsgálatával.NET weboldalak programozása Visual Studióban 284 . vagy nézzük meg a Locals és a CallStack ablakokban! 7. vagy nyomjuk le az F11 gombot! Ez futtatja a kód következő sorát. Az F11 gomb következő lenyomásával a következő sort futtatjuk. Kattintsunk a StepInto gombra. így soronként haladhatunk a kódban.5. nyomjuk meg az F5 gombot a kód megszakítás nélküli futtatásához! Az oldal így jelenik meg a böngészőben: Honlapépítés a XXI. században Függelék – ASP. és lépésenként végighaladtunk a programon. Vizsgáljuk meg a MyTime változó értékét! Tartsuk az egérmutatót a felirat fölött. 6.

NET weboldalak programozása Visual Studióban 285 . ahol angol nyelvű leírásokat találhatunk a debuggerről: http://msdn. látogassunk el a következő címre. vagy szeretnénk megtudni. hogyan használjuk a debuggert a Visual Studióban.com/en-us/library/z9e7w6cs.microsoft.aspx Honlapépítés a XXI. században Függelék – ASP.Ha szeretnénk részletesebben megismerkedni a debuggerrel.

A valósággal való bármilyen egyezés csupán a véletlen műve. A dokumentumot lemásolhatja és felhasználhatja belső. mely használható titoktartási szerződés értelmében is. Minden más védjegyről a saját tulajdonosa rendelkezik. században Nyilatkozat 286 . illetve referencia célokra. Bizonyos információk és funkciók.Nyilatkozat Ez a dokumentum egy fejlesztés alatt álló termékről szól. és csak kitalált adatokat tartalmaznak. Ez a dokumentum a Microsoft tulajdonát képezi. előzetes bejelentés nélkül megváltoztathatók. nem szándékos. © 2010 Microsoft. Minden jog fenntartva. beleértve a hivatkozásokat és egyéb internetes címeket. Honlapépítés a XXI. Jelen dokumentum nem ruházza fel Önt semmiféle joggal a Microsoft bármely szellemi termékével kapcsolatosan. A Microsoft a Microsoft group védjegye. Nyilvános dokumentum. Vegye figyelembe ezt a kockázatot! A dokumentumban szereplő példák csak illusztrációs példákat szolgálnak.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->