1 Mintafeladat ASP.NET adatbázis elérésre Az ASP.NET 2.0 újításai közé tartozott a Master page és a Site Navigation bevezetése. A Master Pages alkalma...
Mintafeladat ASP.NET adatbázis elérésre Az ASP.NET 2.0 újításai közé tartozott a Master page és a Site Navigation bevezetése. A Master Pages alkalmazásával egységesebb felületet tudunk kialakítani. A mester oldal sablonként szolgál, bizonyos területei állandó tartalommal vannak feltöltve, bizonyos területek pedig más oldalak tartalmának megjelenítésére szolgálnak. A Site Navigation lehetővé teszi, hogy az oldalak között könnyebben navigáljunk, és az oldalak hierarchiáját menü vagy fa struktúrába rendezzük, valamint a felhasználó számára szemléltessük, melyik szinten járnak éppen. Hozzunk létre egy új WebSite-ot. Hozzunk létre egy mester oldalt, amely egy menüsort fog tartalmazni. Adjuk meg a stílusjegyeit. A menüpontok pedig valamilyen adatbázis műveletet valósítanak meg. 1. Lépés: Mester oldal létrehozása Jobb egér a Solution Explorerben, majd az Add New Item… menü kiválasztása:
Készítsük el a mester oldal formai beállításait! A mester oldal létrehozásakor automatikusan egy ContentPlaceHolder vezérlőelem megjelenik az oldalon. Ennek a pozícióját és egyéb tulajdonságait módosíthatjuk, és más statikus elemeket is elhelyezhetünk az oldalon. Ezt vagy Designer nézetben, vagy Source nézetben HTML elemek segítségével tehetjük meg. Az oldal stílusának kialakítását egy .css stílusfájl alkalmazásával is megoldhatjuk. Egy létező stílusfájlt fogunk hozzáadni az oldalunk stílusjegyeinek megadásához. (Egy könyv mellékletéből származik a fájl.) Stílusfájlokat magunk is létrehozhatunk.
Szendrői Etelka
1
ASP.NET
Visual Studio 2010 Jobbegér a Solution Explorerben a projekt nevén
Kiválasztjuk a stílusfájlt, majd az Add gombra kattintunk.
Miután bekerült a stílusfájl a projektünkbe, megtekinthetjük a tartalmát. AView/OtherWindows menü Dokument Outline menü kiválasztásával a szerkezetét megtekinthetjük.
A menüpont kiválasztása után megjelenik a CSS Outline ablak vagy a bal oldalán a képernyőnek a ToolBox mellett vagy a jobb oldalon, a Solution Explorer mellett.
Szendrői Etelka
2
ASP.NET
Visual Studio 2010
Egy kiválasztott elem (pl. body) stílusjegyeinek megadását teszi lehetővé. Style menüből is kiválasztható Add Style rule ikon, amely a Style menüből is kiválaszthatóLehetővé teszi, hogy Elemeket, Osztályokat stb. hozzunk létre.
Szendrői Etelka
3
ASP.NET
Visual Studio 2010
A mester oldalról hivatkoznunk kell a stílusfájlra, ezt link href elemmel tudjuk megtenni. Ehhez módosítanunk kell a mester oldal forráskódját. Az alábbiakban a forrás látható a módosításokkal együtt: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> Northwind adatbázis
Ugyanez Design nézetben.
Szendrői Etelka
4
ASP.NET
Visual Studio 2010
Adjunk egy Home lapot a projektünkhöz. Jobbegér a Projekten a Solution Explorerben, majd válasszuk az Add New Item menüt. Válasszunk az ablakból egy WebForm-ot. A fájlnév legyen HomeLap.aspx. Ne felejtsük el bejelölni a Select master page jelölőnégyzetet!!!
Miután az OK gombra kattintottunk, a képernyőn megjelenik az új lap forráskódja a page direktívával, melyben látható a mester oldalra való hivatkozás, valamint a ContentPlaceHolderre való hivatkozás.
Módosítsuk ennek is a tartalmát! Címsort és két bekezdést teszünk hozzá az oldalhoz. Az eredmény a következő: <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="HomeLap.aspx.cs" Inherits="HomeLap" Title="Untitled Page" %>
Üdvözöl a Northwind adatbázis
Ez a WebSite a Northwind adatbázishoz való hozzáférést mutatja be. Néhány alapművelettel táblákat mutatunk meg, szűréseket végzünk táblákon.
Az adatbázis műveleteket típusos DataSet használatával mutatjuk be.
Ugyanez a Design nézetben:
2. Lépés: Navigáció (menü) kialakítása Az ASP.NET 2.0 óta rendelkezésünkre áll egy Site Map provider, amely egy XML fájlból várja a Weblapok hierarchiáját. Mielőtt használjuk ezt a lehetőséget, hozzunk létre néhány további Weblapot. Legyen egy Termékek táblát, egy Szállítókat, valamint a Termékek kategóriák szerinti csoportosítását mutató Weboldalunk. Ezeket hozzunk létre a már jól ismert Add New Item menü segítségével! Hozzuk létre a SiteMap-et.: Jobbegér a Solution Explorerben, válasszuk az Add New Item menüt, majd a Site Map lehetőséget. Hagyjuk meg az alapértelmezett fájlnevet, a Web.sitemap-et.
Szendrői Etelka
6
ASP.NET
Visual Studio 2010
A SiteMap fájl egy XML fájl. Tartalmaznia kell egy <siteMap> csomópontot, amely a fastruktúra gyökere lesz. Ez pontosan egy <siteMapNode> gyerek elemet tartalmazhat. Azután az első <SiteMapNode> gyerek elem számtalan sok további leszármazottat tartalmazhat. A fájlba az url, title és description értékeket nekünk kell megadnunk. Az Intellisence segíti a fájl szerkesztését. A Web.sitemap tartalma: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMapFile-1.0" > <siteMapNode url="~/HomeLap.aspx" title="Home" description="Home"> <siteMapNode url="~/Termekek.aspx" title="Termékek" description="A teljes Termékek táblát mutatja" /> <siteMapNode url="~/Szallitok.aspx" title="Szállítók" description="A Szállítók tábla" /> <siteMapNode url="~/TermekKatSzerint.aspx" title="Termékek kategóriánként" description="Termékek csoportosítva"/> Az ASP.NET a site map struktúrát a .NET Framework SiteMap class osztály segítségével kezeli. Ennek az osztálynak van egy CurrentNode tulajdonsága, amely megmutatja, hogy a felhasználó éppen melyik csomópontot, azaz esetünkben Weblapot látogat. A RootNode tulajdonság a gyökér csomópontot, azaz a kiinduló lapot adja vissza. Szendrői Etelka
7
ASP.NET
Visual Studio 2010
3. lépés : Menü készítése a Site Map alapján. Tegyünk egy Menü vezérlőelemet a mester oldalra (Master Page), ahol korábban kijelöltük a helyét. A Source nézetben ellenőrizzük le! (TreeView vezérlőelem is használható) A DataSourceID tulajdonságnál válasszuk az új DataSource lehetőséget, és a megjelenő ablakban a SiteMap-et.
A Menu vezérlőelem StaticDisplayLevel tulajdonságát 2 értékre állítjuk, akkor a gyökér és az alatta lévő gyerek csomópontok mindig látszanak. 3. lépés: SiteMapPath vezérlő Adjunk egy SiteMapPath vezérlőelemet a Master Page-re, amely az aktuális tartózkodási helyet mutatja a lapok hierarchiájában. A Source nézetre váltva a Master Page tartalma a következő: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
Szendrői Etelka
8
ASP.NET
Visual Studio 2010
Northwind adatbázis
Indítsuk el a programunkat a HomeLap-al, az eredmény a következő lesz:
Rákattintva a Termékek menüpontra, az alábbi képet kapjuk. (Természetesen, ha lenne már valami a Termékek lapon, akkor az látszana. Figyeljük meg, hogy a jobb felső sarokban a SiteMapPath mutatja, hol tartózkodunk éppen. Szendrői Etelka
9
ASP.NET
Visual Studio 2010
A továbbiakban a három menüponthoz tartozó lapokat kell megszerkesztenünk és tartalommal feltöltenünk.
A Termékek tábla kezelése – Termékek menü A Termékek menü kiválasztásakor megjelenő weblapon egy GridView és egy DetailsView vezérlőelemet helyezünk el az adatok megjelenítésére. A termékek táblát egy GridView vezérlőelemben mutatjuk meg a felhasználóknak, amelyhez hozzárendeljük az adatforrást. A tábla egy során állva a GridView alatt elhelyezett DetailsView vezérlőelemben az adott sor részletes adatait látjuk. Lehetővé tesszük új adatok bevitelét, módosítást és törlést is. Lépések: 1. Nyissuk meg a Termekek.aspx lapot. Váltsunk Design nézetre. Húzzunk egy SqlDataSource vezérlőt az űrlapra. Legyen a neve (ID értéke) a vezérlőelemnek: TermekSource. A vezérlőelem jobb felső sarkában található SmartTag menüből válasszuk a Configure Data Source menüt.
2. A megjelenő Configure Data Source ablakban kattintsunk a New Connection… feliratú nyomógombra. Ekkor felbukkan egy új Add Connection nevű ablak, amelyben először az adatbázis szerver nevét kell megadnunk. Ez azonos a számítógépünk nevével. Ezután a hitelesítési módok egyikét kell megadnunk. Hagyjuk meg az alapértelmezést, a Windows Authentication (hitelesítést). A Select or Enter Database name mező legördítésével válasszuk ki a Northwind adatbázist. Ezután kattintsunk az OK gombra.
Szendrői Etelka
10
ASP.NET
Visual Studio 2010
3. A Configure Data Source ablakból a Next gombra kattintással lépjünk tovább. A megjelenő ablakban jelöljük be a Yes, save this connection as jelölőnégyzetet, s ha akarjuk az alapértelmezett név helyett saját nevet is adhatunk a kapcsolati stringnek. A kapcsolati string ekkor az alkalmazásunk web.config nevű fájljába kerül letárolásra. Ezután kattintsunk a Next gombra.
Szendrői Etelka
11
ASP.NET
Visual Studio 2010
4. A megjelenő ablakban a Select utasítást kell összeállítani, azaz itt adhatjuk meg azt az SQL utasítást, amelynek a segítségével meghatározhatjuk, hogy milyen adatok jelenjenek meg az adatbázis tábláiból. A legördülő mezőből válasszuk ki a Products táblát, majd a megfelelő jelölőnégyzetekre kattintva, jelöljük ki azokat az oszlopokat, amelyeket látni szeretnénk a weblap adatrácsában.(GridView). A Select statement mezőben láthatjuk a kiválasztásnak megfelelő SQl utasítást.
Szendrői Etelka
12
ASP.NET
Visual Studio 2010
5. Ezután a ToolBoxból tegyünk egy GridView vezérlőelemet az űrlaphoz. A Properties ablakban adjunk nevet a vezérlőelemnek (ID tulajdonság), a név legyen: GridTermek. A DataKeyNames tulajdonság értéke pedig legyen: ProductID. Adjuk meg a PageSize tulajdonságértéket is, az alapértelmezett 10 helyett legyen 5 az érték. Ezzel azt adjuk meg, hogy hány sor legyen a GridView vezérlőelemben. 6. Ezután a GridView vezérlőelem jobb felső sarkában található SmartTag-ben (Task menü) adjuk meg a Choose Data Source mező értékét. A legördülő listából válasszuk a TermekSource lehetőséget. Ezzel hozzákötöttük az előbb definiált adatforrást a GridView vezérlőhöz. Jelöljük be az Enable Paging, Enable Sorting és az Enable Selection jelölőnégyzeteket. Ezzel lehetővé tesszük, hogy lapozni lehessen a rekordok között, rendezni lehessen az adatokat a kiválasztott oszlop szerint, valamint lehetőséget biztosítunk egy-egy rekord kiválasztására. Az Auto Format menüből válasszuk a Professional értéket.
Mivel nem az összes mezőt mutatjuk egy rekordból, elhelyezünk egy DetailsView vezérlőelemet is az űrlapon, amelyben egy-egy rekord módosítását, új rekord bevitelét és a kiválasztott rekord törlését tesszük lehetővé. 7. Adjunk egy újabb SQLDataSource vezérlőelemet az űrlaphoz. Az ID (név) értéke legyen DetailsSource.
8. Ezután a SmartTag-ből kattintsunk a Configure DataSource menüre. Ekkor megjelenik a már korábban megismert Configure Data Source ablak, amelyben most nem kell a New Connection nyomógombot megnyomnunk, hiszen a legördülő mezőből kiválaszthatjuk a korábbi kapcsolati stringet, hiszen ugyanahhoz az adatbázishoz akarunk kapcsolódni. Az ablakból a NEXT gombra kattintással lépjünk tovább. 9. A következő ablakban a SELECT utasítást kell megadnunk, azaz meg kell adnunk, hogy melyik táblának, mely oszlopait kívánjuk megjeleníteni. Ismét a Products táblát kell választani, és az összes oszlop jelölőnégyzetet kapcsoljuk be, ahogy az ábrán is látható.
Szendrői Etelka
13
ASP.NET
Visual Studio 2010
10. Miután megadtuk az összes oszlopot, az ablak jobb szélén található nyomógombok közül kattintsunk a WHERE… nyomógombra. Az Add Where Clause ablakban van lehetőségünk a Where záradék megadására. Itt azt adjuk meg, hogy az adatforrás ProductID mezőjének értéke meg kell, hogy egyezzék az adatrács kijelölt sorának ProductID mezőjével. Hiszen az adatrácsban kiválasztott sort (amely csak 4 oszlopot tartalmaz) akarjuk megmutatni, csak most az adott rekord összes oszlopát kiírjuk a weblapra. A Column mezőben válasszuk a ProductID-t, majd az Operator mezőben válasszuk az egyenlőségi relációt (=).A Source: (forrás) mezőben válasszuk a Control lehetőséget, hiszen a GridView vezérlő egy mezője határozza meg, hogy melyik rekordot kell az adatforrásnak megtalálnia. Ezután a Parameter properties területen adjuk meg a vezérlőelem ID-jét, ez a GridTermek. A Default value mező maradjon üres, a Value mezőben adjuk meg a GridTermek.SelectedValue értéket. Ezután kattintsunk az Add gombra.
Szendrői Etelka
14
ASP.NET
Visual Studio 2010
11. Az eredmény az alábbi ábrán látható, sikeresen létrehoztuk a where záradékot. Az OK gombra kattintással csukjuk be az ablakot.
12. Visszajutunk a SELECT utasítást létrehozó ablakba. Ebben az ablakban kattintsunk az ADVANCED… gombra.
Szendrői Etelka
15
ASP.NET
Visual Studio 2010
A megjelenő ablakban jelöljük be a Generate Insert, Update, Delete statements jelölőnégyzetet. Ezzel tesszük lehetővé, hogy az adatforrásban lehetővé váljék a beszúrás, módosítás, valamint a törlés műveletének végrehajtása. 13. Ezután helyezzünk el egy DetailsView vezérlőelemet az űrlapon. Ebben fog megjelenni a GridView-ban kiválasztott rekord minden eleme. A DetailsView tulajdonságai közül a következő ábrán láthatókat állítsuk be:
Ezen kívül a Properties ablakban adjuk meg a DataSource (adatforrás) nevét: DetailsSource, valamint a DataKeyName tulajdonságértéket, ami legyen ProductID. Az AllowPaging tulajdonság értéke legyen false. 14. . Növeljük meg a DetailsView vezérlőelem szélességét, majd válasszuk az Auto Format menüből Professional lehetőséget.. A beállítások eredménye az ábrán látható.
15. Futtassuk le az alkalmazást. A megjelenő lapon válasszuk ki a Select gombra Kattíntással a 3-as kódszámú terméket. A táblázat alatt ekkor a 3-as termék minden mezője látható.
Szendrői Etelka
16
ASP.NET
Visual Studio 2010
16. Kattintsunk az Edit gombra. Ekkor jól láthatóan a DetailsView terület megváltozik, hozzáférünk az adatmezőkhöz, és most a mezők alján az Update és Cancel gombok jelennek meg. Módosítsuk az egységárat (UnitPrice) 10000-ről 12000-re!
A mező értékének módosítása után kattintsunk rá az Update gombra. Meglepődve tapasztaljuk, hogy míg a DetailsView nézetben módosult a UnitPrice érték, most 12000, addig a felső táblázatban, (GridView) változatlanul, a korábbi érték (10000) látható. Nyilvánvalóan nekünk kell gondoskodni arról, hogy a GridView-ban is módoslujon az érték, ha azt a DetailsView-ban megváltoztatjuk.
Szendrői Etelka
17
ASP.NET
Visual Studio 2010
17. Gondoskodnunk kell arról, hogyha a DetailsView vezérlőelemen bekövetkezik a ItemUpdated, ItemDeleted vagy ItemInserted események valamelyike, azaz módosítottuk az adatbázis táblát, akkor frissüljön a GridView vezérlőelem tartalma is, vagyis olvassa újból a rekordot az adatbázisból. Ezt az újraolvasást a DataBind() metódushívással tudjuk elérni. A DetailsView vezérlőelem Properties ablakában kattintsunk az Események (villám) ikonra. Ekkor a DetailsView vezérlőelem objektum eseményeinek listáját látjuk Egymás után álljunk az ItemUdated, majd az ItemDeleted, végül az ItemInserted mezőkbe, mindegyikből duppla kattintással a forráskód ablakba jutunk, ahol az események eseménykezelőjét meg tudjuk írni.
Futassuk ismét az alkalmazást, és próbáljuk ismét módosítani a mezők értékét. Most már a táblázatban is frissülnek az értékek. 18. Csinosítsuk az alkalmazást! Jó lenne, ha a DetailsView címsorában megjelenne a kiválasztott termék neve, ha viszont új terméket viszünk fel, akkor a címsorban az Új termék bevitele felirat jelenne meg. Ehhez a DetailsView SmartTag menüjének utolsó, Edit Templates menüpontjára van szükség. A menüpontból a Header Template –et kell kiválasztani.
Szendrői Etelka
19
ASP.NET
Visual Studio 2010
19. Az alábbi döntési kifejezést kell megadni. (Tipp: Design nézetben írjunk a Template területbe bele egy-két karaktert, majd Válasszuk az End Template Editing menüt. Ezután váltsunk Design nézetről Source nézetre, és az előre elkészített HTML tag-ek közé, kitörölve a beírt egy-két karaktert írjuk a döntési kifejezést.) <%#Eval("ProductName") == null ? "Új termék bevitele" : Eval("ProductName")%>
20. Futtassuk az alkalmazást. Az eredmény az alábbi képeken látható. A DetailsView címsorában jól látható a kiválasztott termék neve.
Szendrői Etelka
20
ASP.NET
Visual Studio 2010
Ha a New menüt választjuk, akkor a DetailsVIew címsorában az Új termék bevitele felirat látható.
21. Tegyünk egy Új termék bevitele nyomógombot a GridView fölé. Jelenleg csak úgy tudunk egy új terméket megadni, ha előbb kiválasztunk egyet a táblázatban, s ha megjelent a DetailsView vezérlőelem a megfelelő tartalommal, tudunk a New gombra kattintani, s új rekordot bevinni. Ha rákattint a felhasználó a nyomógombra, akkor a DetailsView rögtön Insert módba kell, hogy kerüljön. 22. Váltsunk át Design nézetről Source nézetre, s szúrjuk be az alábbi kódot a GridView vezérlőelem elé.
Az eredmény:
Ugyanez Design nézetben:
Szendrői Etelka
21
ASP.NET
Visual Studio 2010
23. Írjuk meg a nyomógomb eseménykezelőjét. Design nézetben kattintsunk duplán a nyomógombra! Gépeljük be a következő kódot: protected void AddTermek_Click(object sender, EventArgs e) { DetailsView1.ChangeMode(DetailsViewMode.Insert); }
A futási eredmény az alábbi képen látható:
Van még javítanivaló az alkalmazáson. Jól látható, hogy új rekord bevitelekor gondot jelent a SupplierID és a CategoryID (szállítókód és kategóriakód) értékének megadása. Az anyag második részében ezt fogjuk megoldani.
Szendrői Etelka
22
ASP.NET
Visual Studio 2010 A DetailsView módosítása a kényelmesebb adatbevitel biztosítása
Először tegyük lehetővé, hogy a Szállítók listájából, egy választással adja meg a felhasználó az adott terméket szállító kódját. Azután ugyanezt fogjuk biztosítani a Termék kategória megadásakor is. Lépések: 24. Adjunk hozzá a weblapunkhoz egy újabb SqlDataSource objektumot. A neve (ID) legyen SzallitoLista. Az SqlDataSource SmartTagjéből válasszuk a Configure DataSource menüt. Adjuk meg a már korábban létrehozott kapcsolati stringet, majd kattintsunk a NEXT gombra.
25. Adjuk meg a Supplier táblát, és annak oszlopait, majd kattintsunk az ORDER BY gombra.
Szendrői Etelka
23
ASP.NET
Visual Studio 2010
26. A Sort by mezőben válasszuk a CompanyName mezőt, így névsorba rendezve fogjuk látni a szállítókat.
27. Kattintsunk az OK gombra, majd Next és Finish gomb. Ha a weblap forrás nézetére váltunk, akkor a következő kódot kell látnunk, a most létrehozott SqlDataSource-ra vonatkozóan.
28. Ezután a DetailsView SmartTag-jében válasszuk az Edit Fields menüt. A megjelenő ablakban jelöljük ki a SupplierID (Bounded) mezőt, majd kattintsunk a Convert this field into a TemplateField menüre. Váltsunk forrás nézetre, nézzük meg, hogy alakította át az ASP.NET a Bounded mezőt Template mezővé.
Szendrői Etelka
24
ASP.NET
Visual Studio 2010
29. A kijelölt kódrészletben a TextBox mezőt cseréljük le DropDownList vezérlőelemre és konfiguráljuk úgy, hogy a Szállító nevét mutassa. Az alábbi kódrészletet kell átalakítani.
Szendrői Etelka
25
ASP.NET
Visual Studio 2010
30. A DropDownList megfelelő konfigurálásához, a forráskódban az alábbi módosításokat végezzük el! A TextBox vezérlőelem helyett legördülő listát (DropDownList) alkalmazunk. A DataTextField mező értéke a Szállító neve lesz, ez az, ami megjelenik a legördülő listában. A DataValueField pedig a Szállító kódja. A kiválasztott érték is a Szállító kódja lesz. <EditItemTemplate>
31. Futtassuk az alkalmazást. Amikor a kiválasztott rekordnál Edit módra váltunk, a legördülő lista hozzáférhetővé válik. Ugyanez történik bevitelkor is.
Szendrői Etelka
26
ASP.NET
Visual Studio 2010
32. Most tegyük meg ugyanezt a CategoryID mezővel is. Tegyünk a Weblapra egy újabb SqlDataSource vezérlőt, az ID-je legyen KategoriaLista, majd a SmartTagben válasszuk a Configure DataSource menüt. Válasszuk ki a kapcsolati stringet, majd a Next gombra kattintsunk. Ezután adjuk meg a Categories táblát és a CategoryID, valamint a CategoryName oszlopokat jelöljük ki. Az OrderBy gombra kattintva, állítsuk be, hogy a tábla a CategoryName mező szerint legyen rendezve. OK majd Finish gomb. 33. Ezután a DetailsView SmartTag menüjéből válasszuk az Edit Fields menüt, majd jelöljük ki a CategoryID mezőt, és kattintsunk a Convert this field into a Template Field gombra. Utána OK, majd az oldal forrás nézetében tegyük meg az alábbi módosításokat. Ismét a TextBox helyett DropDownList vezérlőt használunk.
34. Futtassuk az alkalmazást. Most már a Szállítókon kívül a termék kategóriát is egyszerű megadni.
