WebElektronika

Adatok megjelenítése a felhőből

person access_time 2016.10.11.
Sorozatunk vége felé közeledünk, de egy fontos részhez érkeztünk. Szeretnénk megjeleníteni azokat az adatokat, amelyek a TCP protokoll segítségével érkeztek meg a szenzorunktól (vagy a C#-ban írt klienstől). Most két lehetőséget tekintünk át alapszinten. Előszőr megjelenítjük az adatbázis rekordjait (kapott érték, dátum) táblázatos formában, majd azután egy chart-on. Használhatnánk különböző API-kat is (pl.: Google), de ez a cikk egy ASP.NET-es webfejlesztés részleteit mutatja be.


Indítsuk el a Visual Studio 2015 Community-t és hozzunk létre egy új webes projektet (1. ábra). Nyugodtan választhatjuk az "ASP.NET Empty Web Site" templete-et is.

kep
1. ábra   Egy "ASP.NET Empty Web Site" projekt létrehozása
 

A projektünk üres, csak egy "web.config" file-unk van. Adjunk a Solution Explorerben egy Default.aspx nevű webformot a projektünkhöz.
Ezután a Toolbox-ból vegyünk fel egy SqlDataSource vezérlőt, amelynek segítségével kapcsolatot tudunk létesíteni az adatbázisunk és a webformunk között. Ez a vezérlő nem jelenik majd meg a honlapunkon (2. ábra).

kep
2. ábra   Adatbázis használatának előkészítése
 

A vezérlőnk már a webformon van, de még nem konfiguráltuk fel. Ennek a beállítása nagyon kényelmes, szinte csak a "Next"-et kell nyomni. 
Először az adatbázisunk elérhetőségét kell megadni. Ha a legördülő listában nem látjuk, akkor a "New Connection"-ra kattintva megadhatjuk az elérhetőséget. Ez a Connection string bekerül a web.config file-ba (3. ábra).


3. ábra   Az adatbázis elérhetőségének megadása
 

Ha az adatbázis elérhetőségét helyesen adtuk meg, akkor ki tudjuk választani azt az adattáblát (Eredmeny), amelynek a tartalmát szeretnénk megjeleníteni (4. ábra). Itt tudjuk azt is beállítani, hogy szeretnénk-e újabb rekordokat hozzáadni, módosítani vagy törölni.

kep
4. ábra   Adattábla kiválasztása
 

Ezután kérhetünk egy tesztlekérést (5. ábra).

kep
5. ábra   Tesztlekérés az adattáblából
 

Az adatbázisunk adattáblája most már elérhető ezen a Default.aspx-es oldalon. 

Jelenítsük meg az adatainkat először táblázatos formában. Ehhez a Toolbox-ból hozzá kell adnunk a formunkhoz a GridView vezérlőt. Ha ezzel megvagyunk, akkor ki tudjuk választani az adatbázisunkat (SqlDataSource1). Itt tudjuk megadni, hogy az Insert műveleten kívül milyen lehetőségeket szeretnénk még (6. ábra, pl.: lapozás, törlés, stb).

kep
6. ábra   GridView vezérlő beállítása
 

A 6. ábrán látjuk, hogy a GridView vezérlőt úgy állítottuk be, hogy tudjunk lapozni (alapbeállításnál 10 soronként van a lapozás), illetve sorrendbe állítani az adatokat.

Indítsuk el debug módban (F5) a website-unkat, és localhostban látni fogjuk a táblázatban az adatainkat (7. ábra).

kep
7. ábra   Táblázatban a véletlenszámok és a hozzájuk tartozó dátumok
 

Most ne táblázatban jelenítsük meg a TCP-n keresztül érkezett adatokat, hanem egy chart-on. A .NET4-től a chart vezérlőt már használhatjuk, a Toolbox-ból vegyük fel a honlapunkra. Ezután állítsuk be adatforrásnak az SqlDataSource1 nevű vezérlőnket (8. ábra).

kep
8. ábra   A Chart vezérlő beállítása
 

Ezután indítsuk el debug módban a website-unkat és a következő kép (9. ábra) fogad minket. A Chart vezérlőnél az adatok megjelenítési lehetősége eléggé széles körben változtatható.

kep
9. ábra   A Chart vezérlőn a pontokkal ábrázolt adatok
 

A TCP protokoll segítségével átküldött adatok megjelenítése széles körben változtatható, akár összekötött vonalakkal is ábrázolhatók az adatok (10. ábra).

kep
10. ábra   A klienstől kapott véletlenszámok ábrázolása vonalak segítségével