ASP.NET ALAPOZÓ 2. gyak Fájl feltöltés, validálás 1. feladat
Á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ű), email 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.
ASP.NET ALAPOZÓ 2. gyak Fájl feltöltés, validálás 1. feladat
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). 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
[email protected] 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. 3. A vezérlők elhelyezése
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;} }
ASP.NET ALAPOZÓ 2. gyak Fájl feltöltés, validálás 1. feladat
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" %>
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
Megadja, hogy lett e fájl feltöltve.
SaveAs metódus
A feltöltött fájl elmentése, paraméterül a fájl nevét és útvonalát várja.
FileName tulajdonság
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
leírás
File.Exists/Directory.Exists tulajdonság
fájl vagy mappa létezését ellenőrzi.
Directory .CreateDirectory/ File .CreateFile
létrehozza a a mappát vagy fájlt
Directory.GetFiles metódus
visszaadja a megadott útvonalhoz tartozó fájlokat.
Directory.GetDirectories metódus
visszaadja az útvonalhoz tartozó almappákat.
ASP.NET ALAPOZÓ 2. gyak Fájl feltöltés, validálás 1. feladat 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.
ASP.NET ALAPOZÓ 2. gyak Fájl feltöltés, validálás 1. feladat 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.
