Áttekintés A feladat során egy User control-t (felhasználói vezérlőt) készítünk. A bekért adatok ellenőrzéséhez Validátor vezérlőket használunk. Megismerjük a következő összetett vezérlőket FileUpload, TreeView. Használjuk a File, Directory objektumot. Az oldalak közötti átirányítást egyfelől a HyperLink vezérlővel, másfelől a Response.Redirect segítségével oldjuk meg. A gyakorlat feladata Készítsünk egy ASP.NET webes alkalmazást, mellyel fájlokat tölthetünk föl a webszerverre a saját könyvtárunkba, illetve egy másik oldalon megtekinthetjük a feltöltött fájljainkat. A föltöltéshez meg kell adnunk nevünket, azonosítónkat, e-mail címünket és születési évünket. (ezen adatok érvényességét ellenőriznünk is kell) 1. ábra Fájl feltöltése 2. ábra Megtekintés Probléma Tervezés A felhasználónak meg kell adni a szükséges adatokat, a nevét, az ETR azonosítóját (7 nagy betű), e- mail címét (megfelelő e-mail formátum), születési évét (4 szám). Másrészt ki kell választani azt, hogy melyik fájlt szeretné föltölteni. A felhasználó adatok ellenőrzésére használjuk az előadáson megismert vezérlőket. Minden mező kitöltése kötelező ennek ellenőrzésére érdemes RequiredFieldValidator-t használni. Az egyes mezők pl.: e-mail cím formátumának ellenőrzésére használjunk RegularExpressionValidator-t. Mint látjuk az adatok megadásához és validálásához több vezérlőre is szükségünk van. Látható azonban, hogy ezen vezérlők együttese szoros egységet alkot. Az is előfordulhat, hogy ezeket a feltöltéshez szükséges adatokat ugyanebben a formában újra meg kellene adnunk akár ebben a web alkalmazásban, akár másikban. Erre ad lehetőséget a felhasználói vezérlő készítése.
Megvalósítás Először készítsük el egy User control-t. Ehhez a web alkalmazásunkhoz hozzá kell adni egy új elemet, amelyet a Web User Control sablon alapján hozunk létre. A User Control részben hasonlít egy Web Form-hoz. A Web User Control elkészítése után a web alkalmazás része lesz egy ascx kiterjesztésű fájl és a hozzá tartozó Code Behind. Az ascx fájl felel a kinézetért, itt kell elhelyeznünk a szükséges vezérlőket. Az ascx.cs fájlban pedig a felhasználói vezérlőhöz kapcsolódó kódokat ugyanúgy, mintha egy Web Form-ot készítenénk el. Amennyiben máshol is szeretnénk fölhasználni az elkészült vezérlőt, akkor az ascx és a hozzá tartozó ascx.cs fájlokra lesz szükségünk. A felhasználónak a következő adatokat kell megadnia: neve, ETR azonosítója, e-mail címe, születési éve. Adjuk a User Control-hoz a megfelelő vezérlőket (Label, TextBox). 3. A vezérlők elhelyezése Miután elhelyeztük a vezérlőket kössünk hozzájuk az érvényességüket ellenőrző vezérlőket. A következőknek kell teljesülnie. A nevet kötelező kitölteni, az ETR azonosítónak 7 karakterből kell állnia (csak nagybetű), az e-mail címnek examle@example.com a formátuma, míg a születési évnek 4 számjegyű egészet szabad tartalmaznia. A vezérlők kötelező kitöltésének ellenőrzéséhez használjunk RequiredFieldValidator vezérlőket. Az ellenőrző vezérlők (ControlToValidate tulajdonságában meg kell adnunk, melyik vezérlőt ellenőrzi, az ErrorMessage tulajdonságában pedig a hibaüzenetet adjuk meg. Ellenőrizzük le a bevitt adatok formai helyességét a név megadására szolgáló vezérlő kivételével. Kössünk a vezérlőkhöz RegularExpressionValidator vezérlőket. A reguláris kifejezéseket az ellenőrző vezérlők ValidationExpression tulajdonságában adhatjuk meg. Figyeljünk a helyes reguláris kifejezések megadására a ValidationExpression tulajdonságban. pl.: A 7 nagybetűt tartalmazó ETR azonosító esetében [A-Z]7 A User Control-ban elhelyezett vezérlőkhöz nem férhetünk hozzá közvetlenül, hiszen azok a User Control objektum protected részéhez tartoznak. Ezért az egyes vezérlők eléréséhez public hozzáférésű property-ket készítünk. Nézzünk egy példát: a User Control ETRAzon TextBox vezérlője Text tulajdonságának beállításához és lekérdezéséhez írjunk tulajdonságot (később használjuk), amit az ascx.cs fájlban adunk meg. public string EtrAzonosito get return EtrAzon.Text; set EtrAzon.Text = value;
A felhasználói vezérlő elkészítése után hozzunk létre egy új Web Form-ot. A Solution Explorer-ből vonszolással húzzuk rá az oldalra az általunk létrehozott User Control-t. Nézzük meg, hogy az aspx oldalon hogyan jelenik meg: <%@ Register src="felhadatok.ascx" tagname="felhadatok" tagprefix="uc1" %> <form id="form1" runat="server"> <uc1:felhadatok ID="FelhAdatok1" runat="server" /> </form> A fájl kiválasztásához használjuk a FileUpload vezérlőt, mely a kiválasztott fájl-t föltölti és segítségével elmenthetjük a webszerveren (most a lokális gép). A FileUpload vezérlő fontosabb tulajdonságai és metódusai. FileUpload tulajdonság/metódus leírás HasFile tulajdonság SaveAs metódus FileName tulajdonság Megadja, hogy lett e fájl feltöltve. A feltöltött fájl elmentése, paraméterül a fájl nevét és útvonalát várja. A feltöltött fájl neve Már csak egy Button vezérlőre van szükségünk, melynek Click eseményéhez rendelt eseménykezelő valósítja meg a fájl elmentését. A megoldáshoz szükségünk van a már korábban tanult Server objektum MapPath metódusára, mely megadja az ASP.NET oldal relatív elérési útját. (Itt fogjuk létrehozni az egyes felhasználók ETR azonosítójának megfelelő könyvtárat.) string utvonal = Server.MapPath("~"); A fájlműveletekhez szükségünk van még a System. IO névtér File és Directory osztályaira. Fontosabb tulajdonságaik és metódusaik. File, Directory tulajdonság/metódus File.Exists/Directory.Exists tulajdonság Directory.CreateDirectory/ File.CreateFile Directory.GetFiles metódus Directory.GetDirectories metódus leírás fájl vagy mappa létezését ellenőrzi. létrehozza a a mappát vagy fájlt visszaadja a megadott útvonalhoz tartozó fájlokat. visszaadja az útvonalhoz tartozó almappákat.
Az eseménykezelő függvényben ellenőrizzük le, hogy megtörtént-e a fájl kiválasztása és feltöltése. Amennyiben igen, ellenőrizzük a felhasználó ETR azonosítójához tartozó mappa létezését, ha nincs akkor hozzuk létre a mappát. Mentsük el a fájlt. Ha sikertelen a mentés vagy létezik a fájl, azt jelezzük a felhasználónak egy hiba oldalra való átirányítással a Response.Redirect segítségével. protected void Fltlt_Click(object sender, EventArgs e) string etrazon = FelhAdatok1.EtrAzonosito; //általunk írt tulajdonság string utvonal = Server.MapPath("~"); if (FileFeltolto.HasFile) //ha volt föltöltés // írjuk meg a mappa ellenőrzését, létrehozását utvonal += "\\" + etrazon; if (!File.Exists(utvonal + "\\" + FileFeltolto.FileName)) FileFeltolto.SaveAs(utvonal + "\\" + FileFeltolto.FileName); else Response.Redirect("Hiba.aspx"); Próbáljuk ki a program működését és ellenőrizzük, hogy sikerült-e a megfelelő helyre föltölteni a fájlt. 5. ábra A feltöltött fájlok a web helyen belül az ETR azonosítóval megjelölt almappába kerülnek 4. ábra Fájl feltöltése A feladat második részben egy olyan oldalt fogunk létrehozni, amelyik megjeleníti a feltöltött fájlokat, mappákat. Készítsünk hozzá egy új Web Form-ot, melyet az előzőleg elkészített oldalról tudunk elérni. Használjuk föl, a korábban már elkészített felhasználói vezérlőt. A megadott ETR azonosítóhoz tartozó fájlokat jelenítsük meg gombnyomásra.
A megjelenítendő mappaszerkezethez TreeView vezérlőt használunk. A TreeView, ahogy a nevében is benne van, egy fa megjelenítésére szolgáló vezérlő. A fa csomópontokból (TreeNode) épül fel, minden csomópont egy további fát tartalmazhat. Nézzünk egy példát egy csomópont létrehozására: TreeNode fo = new TreeNode("beadandok"); TreeView1.Nodes.Add(fo); Egy csomóponthoz tartozó alcsomópontok a ChildNodes tulajdonsággal érhetők el. FONTOS! A TreeView csomópontjait a megjelenítés előtt mindig töröljük. Egy mappán belül a fájlnevek bejárásához a Directories objektum GetFiles metódusát használjuk. Ahhoz, hogy egy fájlt a kiterjesztésével együtt írjunk ki a Path.GetFileName metódusra van szükségünk, mely a paraméterben megadott fájl elérési útjához megadja a fájlnevét és kiterjesztését is. protected void Button1_Click(object sender, EventArgs e) TreeView1.Nodes.Clear(); //utvonal, etrazon megadása lásd feltöltésnél TreeNode gyökérelem = new TreeNode(etrazon+" fajlok"); TreeView1.Nodes.Add(gyökérElem); foreach (string fnev in Directory.GetFiles(utvonal)) TreeNode levélelem = new TreeNode(Path.GetFileName(fnev)); gyökérelem.childnodes.add(levélelem); Nézzük meg az elkészült weboldalunkon keresztül is az előbb feltöltött fájlokat. 6. A feltöltött fájlok megtekintése Miután ezzel végeztünk, fejlesszük tovább a feladatot és ne csak a fájlokat, hanem rekurzívan az almappák fájljait is írassuk ki. Ehhez értelemszerűen az adott mappában minden almappát végig kell járni. A mappák almappáinak bejárásához használjuk a Directory osztály GetDirectories metódusát.