ASP-s alkalmazás készítés

Átírás

1 Áttekintés Megismerjük az ASP-s alkalmazások készítésének alapjait a Visual Studio 2010 környezetben. Megfigyeljük egy egyszerű Solution felépítését, a Web Form-okat, a Web.Config fájlt Először hagyományos HTML kontrolokat használunk, majd a HTML vezérlőket átalakítjuk szerveren futóra. Legvégül eljutunk az ASP.NET web szerver vezérlők használatáig. Eközben megismerkedünk a Request, Response és Page objektumokkal és a beépített Math és Convert osztályokkal. Kipróbáljuk a hibakeresési és nyomkövetési lehetőségeket. A gyakorlat feladata Készítsünk webes alkalmazást, mellyel egy felhasználó által megadott szám faktoriálisát számoljuk ki és jelenítjük meg. Készítsünk webes alkalmazást, mellyel egy felhasználó által megadott másodfokú egyenlet gyökeit határozhatjuk meg. 1. ábra Faktoriális számítása 2. ábra Másodfokú egyenlet megoldása Probléma Tervezés Dinamikus tartalom A HTML oldalak kezdetben statikusak voltak. Később azonban megjelentek a dinamikus weboldalak, amelyek már valamilyen interakcióra is képesek voltak a felhasználóval. A dinamikus weboldalak létrehozásához többféle technológia is rendelkezésre áll mind kliens, mind pedig szerver oldalon. Ilyen ma elterjedt megoldás például a Javascript, az AJAX, a PHP, vagy a most tárgyalandó ASP.NET. Út az ASP.NET-hez Kezdetben elegendő volt az egyszerű kérések feldolgozásához és megválaszolásához a Microsoft által nyújtott klasszikus ASP (Active Server Pages). Az idők során a kérések egyre összetettebbek lettek, így egyre bonyolultabb és nehézkesebb lett a feldolgozásuk. Felmerült az igény arra, hogy minél egyszerűbben és gyorsabban, akár előre elkészített elemekből lehessen dinamikus oldalakat létrehozni, ahogy az az asztali alkalmazások fejlesztésében már népszerűvé vált. Ennek az igénynek a figyelembe vételével alakította ki a Microsoft a.net keret-

2 rendszert és azon belül az ASP.NET-et. A fejlesztő szabadon választhat a felkínált programozási nyelvek, alkalmazási sablonok között, lehetősége van számos beépített megoldás felhasználására, miközben továbbra is élhet egyéni megoldásokkal. Tervezés A faktoriális számítás webes megvalósításán keresztül nézzük meg, hogyan is működik egy ASP.NET oldal. A feladatot először hagyományos HTML kontrolok és HTML szerver kontrolok segítségével oldjuk meg. Az első megoldáshoz felhasználjuk a Request objektumot is. A második feladatban, a másodfokú egyenlet gyökeinek meghatározásához web szerver vezérlőket használunk fel. A gyökök kiszámításához felhasználjuk a System névtér Math osztályát. A feladat közben megismerkedünk a Visual Studio 2010 (a továbbiakban röviden VS2010) fejlesztő környezettel. Megvalósítás Faktoriális Készítsünk egy új web alkalmazást. Válasszuk az ASP.NET Empty Web Site template-et (sablont) a megoldáshoz és a C#-ot, mint programozási nyelvet. Azért használunk egyelőre Empty Web Site sablont, mert lépésről lépésrekívánjuk megismerni a Solution-ök felépítését. 2. ábra Új web alkalmazás Az ASP.NET Empty Web Site létrehozása esetén a VS 2010 csak egy üres solution-t (megoldást hoz létre), amibe csak egy web.config fájl kerül. Ezt láthatjuk a Solution Explorer-ben. 1. ábra Üres Solution

3 Adjunk a solution-hoz egy ASP.NET oldalt, más néven egy Web Form-ot és nevezzük el Fakt_HTML_kliens-nek. 3. ábra Új Web Form hozzáadása Egy ASP.NET oldal két fájlból áll. Az oldal megjelenítését leíró állomány kiterjesztése aspx, tartalma az úgynevezett markup kód. A szerver oldali kódot a választott programozási nyelven (most C#) az aspx.cs kiterjesztésű fájlt tartalmazza. Az így kialakított CodeBehind megoldásnak további előnye, hogy a kliens (felhasználó) előtt rejtve marad a kód. Ne feledkezzünk el a markup kód szerkesztése során a különböző nézetekről. (Split, Design és Source nézet.) Az első feladatot oldjuk meg a klasszikus HTML vezérlőkkel. A ToolBox segítségével helyezzük el az oldalunkon egy Input (Text) vezérlőt melyben megadhatjuk a számot, aminek a faktoriálisát szeretnénk meghatározni. Adjunk a vezérlőnek nevet a Name attribútumában, hogy a későbbiekben egyértelműen hivatkozhassunk rá. 6. ábra HTML vezérlők a ToolBox-ban 7. ábra A HTML vezérlők megjelenése, Design nézet Tegyünk föl az oldalra még egy Input (Submit) gombot, ami arra való, hogy a felhasználó által megadott adatokat elküldje a szervernek. A szerver felé POST-tal küldjük az adatokat, ne felejtsük a formon ezt beállítani! A submit gomb megnyomása esetén az aktuális oldal újratöltődik. A nyomógomb feliratát a Value attribútum beállításával adhatjuk meg, ahogy az a markup kódban látszik.

4 <form id="form1" method="post" runat="server"> Készítsük <input el id="bemenet" a kódot az aspx.cs code-behind type="text" fájlban, name="bemenet" ami meghatározza /> a megadott szám faktoriálisát. Előtte azonban tegyünk egy kis kitérőt a kliens-szerver közötti kérés- válasz kezelésére <input szolgáló id="submit1" objektumok világában, type="submit" megemlítve a legfontosabb value="faktoriális" metódusaikat, tulajdonságaikat. /> Page objektum A Page objektumon keresztül érhetjük el a Request, Response és Server objektumokat. A szerverre érkező kérés esetén a Page osztály példányosul és a létrejött objektum elvégzi a szerverre kérés feldolgozását és legenerálja a választ. A kérések feldolgozása és a válasz küldése során számos esemény bekövetkezik, amelyből most a Page_Load eseményt használjuk fel. Request objektum. Egy HTTP kérés során a szerver a Request objektumon keresztül tud hozzáférni a kliens által elküldött adatokhoz. Request.BinaryRead Request metódus leírás A kliens által POST-tal küldött adatok beolvasására szolgál Request tulajdonság (Property) Request.Cookies Request.Form Request.QueryString leírás HTTP kérés során elküldésre került sütik gyűjteménye HTTP kérés során elküldésre kerülő Form elemek értékének gyűjteménye. HTTP query string változók értékének gyűjteménye Response objektum A Response objektum segítségével HTTP választ küldhetünk a felhasználó böngészője számára. Response.Write Response metódus leírás HTTP kimenetre való szöveges formátumú válasz küldése

5 Response tulajdonság (Property) Response.ContentType Response.CodePage Response.Expires Response.Cookies leírás A HTTP válasz tartalom típusát határozza meg. A szerver karakterkódolását állíthatjuk be. Az oldal cache -elés időtartamának beállítása a böngészőben. Sütik értékének beállítása. Server objektum A HTML kódok, elérési utak és URL-ek kezelésére alkalmas objektum. Server.MapPath Server tulajdonság leírás Megadja a szerveren a tényleges elérési útját a Web Site -nak Térjünk vissza a feladat megoldásához: A Page.isPostBack tulajdonsággal azt kérdezhetjük le, hogy az adott oldal első vagy újbóli letöltéséről van-e szó. Az oldal első letöltésénél az ispostback még hamis, a böngészőben megjelennek a markup kódban megadott vezérlők. Kitöltve az adatot majd a nyomógombra kattintva a nyomógomb újratöltést (PostBack-et) generál, ekkor az ispostback tulajdonság igazzá válik és a szerver ennek megfelelően tud válaszolni. A POST-olt adatok a Request objektum Form asszociatív tömbjén keresztül érhetőek el, melyben az egyes elemekre a Name attribútumban megadott nevükkel lehet hivatkozni (ezért kellett megadni). int fakt = Convert.ToInt16(Request.Form["bemenet"]); A System névtér Convert osztályára szükségünk van, hogy a Form asszociatív tömbben szövegként tárolt számot átalakítsuk egész típusúra. A konvertálások esetén felmerülő esetleges hibalehetőségek kiküszöbölésére érdemes kivételkezelést is használni. A Response objektum segítségével kiírhatjuk az eredményt, amelyet kiszámítás után az er Response.Write(Convert.ToString(er)); változóban tárolunk. A Response.Write metódussal akár egy Javascript kódot is elhelyezhetünk az oldalon, amely egy üzenetablakban jeleníti meg az eredményt. Response.Write("<script language= Javascript >alert(" + er + ");</script>");

6 Futtassuk az oldalt (CTRL + F5) és ellenőrizzük az eredmény helyességét. 8. ábra Szám megadása <input id="bemenet" type="text" runat="server"/> <input id="submit1" type="submit" value="faktoriális" runat="server"/> 9. ábra Adott szám faktoriálisa Látszik, hogy ez a megoldás nem elég gördülékeny. Készítsük el a feladatot szerver oldali HTML vezérlőkkel is. Az eredményt is az oldalon jelenítsük meg. Adjunk ugyanehhez a solution-höz még egy Web Form-ot (Fakt_HTML_szerver.aspx). Állítsuk be kezdő oldalnak (Solution Explorer, oldalhoz tartozó helyi menüben Set As StartPage menüpont). Helyezzük el az előbbi vezérlőket az oldalon kiegészítve még egy TextBox-szal, amiben majd az eredményt jelenítjük meg. Ahhoz, hogy szerver oldali vezérlőket készítsünk a HTML vezérlőkből, a runat attribútumukban a server értéket kell beállítanunk. (A későbbiekben ASP.NET web szerver vezérlőket fogunk használni ilyen esetekben.) <input id="eredmeny" type="text" runat="server"/> Ne felejtsünk el a vezérlők ID attribútumában az azonosítókat megadni, mert ezekkel az azonosítókkal hivatkozunk majd a megfelelő vezérlőkre a kódban. Az előző megoldáshoz hasonlóan készítsük el az aspx.cs fájlban a kódot. Most nincs szükségünk a Request objektumra. A bemeneti TextBox-ból való érték kiolvasása következőképpen történik: int fakt = Convert.ToInt16(Bemenet.Value); Az eredmény megjelenítése: Eredmeny.Value = Convert.ToString(er); A vezérlők az értéküket a Value attribútumban tárolják szövegként, ezért azt a megfelelő típusra át kell alakítanunk. Ehhez ismét a System névtér Convert osztályának ToInt16 metódusát használjuk. Amikor az eredmény értékét írjuk a megfelelő változóba ismét konvertálásra van szükségünk. A nem megfelelő bemenet miatt itt is érdemes kivételkezelést használni.

7 Futtassuk az oldalt (CTRL + F5) ellenőrizzük az eredmény helyességét. Másodfokú egyenlet. A HTML szerver komponensek hátrányai: 10. ábra Faktoriális számítás Kevesebb funkcionalitással bírnak, mint az ASP.NET web szerver vezérlők (továbbiakban röviden web szerver vezérlő). A HTML komponensek egyes tulajdonságainak elérése nincsen szinkronban a Windows-os Form-os alkalmazásoknál tanultakkal. A HTML szerver kontrol pontosan egy HTML tag-nek feleltethető meg. Ezen problémák kiküszöbölésére lettek létrehozva a web szerver vezérlők. Hozzunk létre egy új web alkalmazást. (ASP.NET Empty Web Site sablon alapján). Adjunk hozzá egy Web Form-ot. Helyezzünk el 3 Label, 3 TextBox vezérlőt, egy Button vezérlőt és még két darab Label és TextBox vezérlőt a ToolBox standard web szerver vezérlői közül a következőképpen: 11. Toolbox részlet 12. A vezérlők elhelyezése A Design nézetben állítsuk be a vezérlőket a megfelelő méretűre. Lehetőleg adjunk beszédes ID-kat, hogy a kódolásnál könnyebben kiigazodjunk. A markup kódban ez látjuk: <asp:textbox ID="a" /> uiuoigg>>:.>::runat="server" Width="30px"></asp:TextBox> 13. Design nézet

8 HTML kontrolok esetében még nem, de a web szerver vezérlők esetében a tulajdonságainak és eseményeinek beállítása a Properties ablak segítségével történik. Miután ez megvan már csak meg kell írnunk a kódot a másodfokú egyenlet gyökeinek kiszámolásához. Ezt többféleképpen megtehetjük. Script blokk, Inline (<% %>), code-behind/beside. Mi az utóbbit használjuk. { A)); 14. Properties ablak Rendeljünk a nyomógombunk Click eseményéhez (Properties >> >> Click) eseménykezelő függvényt. Ekkor elkészül az aspx.cs fájlban a hozzá tartozó megfelelő kód. A TextBox vezérlők Text tulajdonságából ki kell olvasnunk az egyenlet paramétereit. (Az egyes webszerver kontrolok elérése az ID attribútumukon keresztül történik.) Mivel a Text tulajdonságban szövegként tárolódnak a számok, ezért át kell őket konvertálnunk számmá. Gondoljunk arra is, hogy a mező tartalmától függően (pl. karakterek) a konvertálás nem biztos hogy sikerül és használjuk a try, catch szerkezetet. A determináns meghatározásához szükségünk van a Math osztály gyökvonás függvényére (sqrt()). Írjuk meg a másodfokú egyenlet gyökeinek kiszámításához szükséges teljes kódot. Érdemes az eredmények megjelenítésénél megkülönböztetni a különböző eseteket a megoldások száma szerint. protected void Button1_Click(object sender, EventArgs e) { } try int A = Convert.ToInt16(a.Text); double gyokd = Math.Sqrt((B * B) - (4 * A * C)); x1.text = Convert.ToString(((-B) + gyokd) / (2 * } catch { x1.text= Hiba ; }

9 Futtassuk az oldalt (CTRL + F5) ellenőrizzük az eredmény helyességét. 15. ábra Futtatásra példa Egy feladat megvalósítás közben szükségünk van hibáink megtalálására, illetve az oldal működésének nyomkövetésére. Trace (nyomkövetés) A Trace diagnosztikai információkat szolgáltat az oldalról. Ennek segítségével például könynyen kideríthető az, hogy miért lassú az oldal betöltés, mivel meg tudjuk nézni melyik függvény mennyi ideig futott. stb. (Document Properties/Trace=True) 16. Trace információk részlete A Trace tulajdonság engedélyezése az aspx direktívájában is megadható. Ha

10 engedélyezzük, akkor a nyomkövetési információk megjelennek a böngészőben közvetlenül az oldalak tartalma után. Az események nyomkövetésébe mi magunk is írhatunk információt a Trace objektum Trace.Warn() és Trace.Write() metódusainak segítségével. A kettő között a különbség, hogy a Warn pirossal írja ki az üzenetet. Események és sorrendjük A következő fontosabb események következnek be egy oldal betöltődése közben. megnevezés feladat Page_Init Page_Load Page_PreRender oldal inicializálása oldal betöltése A kontrolok elkészítése után az oldalon végzett utolsó simítások itt adhatóak meg. WEB.CONFIG A web.config fájl egy XML alapú fájl, mely hierarchikusan tárolja a web alkalmazásokra vonatkozó beállításokat. Különböző beállításokat adhatunk meg, például azt hogy engedélyezett-e debuggolás. A beállítások kategóriákba azon belül pedig szekciókba vannak rendszerezve. Minden szekciónak van egy sémája, mely meghatározza a szerkezetét. Többfajta konfigurációs fájlt különböztetünk meg hatáskörük alapján. <?xml version="1.0"?> <configuration> <system.web> <compilation debug="true" targetframework="4.0"/> </system.web> </configuration> Nézzünk egy példát a web alkalmazás-hoz tartozó konfigurációs fájlra. Ez egy VS 2010 által készített konfigurációs fájl, mely meghatározza, hogy.net Framework 4.0 keretrendszerben futtatjuk web alkalmazásunkat és a debuggolás engedélyezve van.