ASP.NET WebForms – 3.díl – Lehký úvod do práce s daty
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

ASP.NET WebForms – 3.díl – Lehký úvod do práce s datyASP.NET WebForms – 3.díl – Lehký úvod do práce s daty

 

ASP.NET WebForms – 3.díl – Lehký úvod do práce s daty

Google       Google       15. 10. 2012       23 491×

V tomto článku se pustíme do práce s databází. Řekneme si něco málo o komponentách, které poskytují možnosti pro práci s daty, ukážeme si, jak data zobrazovat do formátu tabulky s pomocí komponenty GridView a jak lze v této komponentě data řadit. Nakonec opět uděláme ukázkovou aplikaci.

Reklama
Reklama

V prvním díle tohoto seriálu jsem se zmiňoval o nutnosti mít nainstalovaný Microsoft SQL Server. Pokud jste tak ještě neučinili, nainstalujte si ho.

Vytvoření databáze

Ze všeho nejdříve si samozřejmě vytvoříme nový projekt. Do projektu přidáme novou stránku Default.aspx a její obsah si rovnou otevřeme.

Novou databázi (resp. nový databázový soubor) si ve Visual Studiu vytvoříme stejně jednoduše, jako přidáme novou stránku aspx. Musíme tento soubor ale umístit někam, kde k němu má přístup jen naše aplikace, ale prohlížeč uživatele ne. Vytvoříme si proto novou složku s názvem App_Data, která je nastavená tak, aby do ní měla přístup skutečně jen naše aplikace a nikdo jiný. Tuto složku můžete vytvořit po kliknutí pravého tlačítka myši na název (cestu) projektu v Solution Explorer > Add ASP.NET Folder > App_Data.

Přidání tabulky ve Visual Studiu

Teď si přidáme soubor s databází. Klikněte pravým tlačítkem na naši složku App_Data, zvolte možnost Add New Item a zvolte položku SQL Server Compact 4.0 Local Database. Pojmenování nechte třeba na Database.sdf, název není v tuto chvíli důležitý. Teď budeme chtít v databázi vytvořit nějakou tabulku. Dvojklikem na soubor Database.sdf se přepneme na panel Database Explorer. Zde rozklikněte položku nesoucí název našeho databázového souboru, pravým tlačítkem klikněte na položku Tables a zvolte možnost Create New Table. Zobrazilo se nám okno s nastavením databáze.

Nastavení tabulky

Důležitá pro nás je tabulka, ve které specifikujeme jednotlivé sloupce. Podle obrázku výše si tedy nastavte vše potřebné. U sloupce ID nezapomeňte s pomocí tabulky, která je v dolní části okna, nastavit vlastnost Identity na True, čímž zajistíte automatické dosazování celočíselných hodnot do každého řádku tabulky.

Pokud máte tabulku správně nastavenou, klikněte na tlačítko OK a přidáme si do ní nějaká data. V panelu Database Explorer rozklikněte položku Tables a po kliknutí pravým tlačítkem myši na položku Pratele zvolte možnost Show Table Data. Zde si přidejte nějaké fiktivní přátele a jejich informace.

Fiktivní informace o přátelích v tabulce Pratele

Nyní tyto informace zpracujeme a zobrazíme ve stránce.

Komponenty pro práci s daty v ASP.NET

Pro práci s daty máme v ASP.NET bohatou paletu komponent, s nimiž můžeme zpracovávat a zobrazovat data nejen z databází, ale třeba z XML souborů apod. 

Pro nás nejdůležitější je v tuto chvíli komponenta GridView, která přijatá data zpracuje jako tabulku. Podobnou funkčnost má i komponenta DataList, zde ale máme větší svobodu při zobrazování záznamů a data nemusí být zobrazena jako tabulka. Pro práci s jedním záznamem slouží komponenta FormView a DetailsView, s jejichž pomocí můžeme záznam v databázi přidávat nebo upravovat (tedy, ony to umí i předešlé komponenty, ale nedovolují takovou svobodu) a samozřejmě i zobrazovat.

Další velmi důležitá komponenta je SQLDataSource, která "zprostředkuje" komunikaci s databází.

Na obrázku vlevo můžete vidět, že komponent, které dokáží s daty pracovat, je více. Nyní nás ovšem nemusí nikterak zajímat, ale za zmínku stojí říct, že např. komponenta DataPager dokáže zprovoznit stránkování dat, Chart umí data zobrazit v grafu a Repeater má funkčnost podobnou komponentám zmiňovaným výše, ale dává nám ještě větší svobodu při zobrazování výstupních dat.

Nutná dávka teorie za námi a teď se pusťme do práce.

Zobrazování dat s pomocí komponenty GridView

Visual Studio má příjemné prostředí pro práci s komponentami v režimu Design. V tomto díle toto prostředí díky jeho přijatelnosti pro začátečníky použijeme.

Do stránky si přidejte komponentu GridView a klikněte na malou šipku v jejím pravém horním rohu. Rozbalte seznam s popiskem Choose Data Source a klikněte na New Data Source. Po otevření okna zvolte položku Database a po kliknutí na tlačítko OK se do stránky přidá komponenta SQLDataSource. Hned nato se otevře okno s konfigurací komponenty SQLDataSource.

Nastavení komponenty SQLDataSource

V rozbalovacím seznamu vyberte naši databázi Database.sdf a klikněte na Next. Na další stránce se nás Visual Studio ptá, jestli chceme uložit ConnectionString. To je textový řetězec, který se uloží do souboru Web.config a nese informace o naší databázi. Pokud bychom chtěli na webové stránce přidat například druhý seznam, který bude pracovat s naší databází, vybereme pouze vytvořený ConnectionString a o další věci se starat nemusíme. V tomto projektu ConnectionString tedy nepotřebujeme, protože nepředpokládáme, že budeme s databází ještě pracovat, proto je jedno, jestli možnost necháte zaškrtnutou. Na další stránce je výběr samotné tabulky. My tabulku máme jen jednu a sloupce budeme chtít všechny, takže klikněte jen na Next a potom Finish.

Pokud v tomto bodě stránku uložíte a spustíte, už se vám ve stránce zobrazí požadované informace ve formě tabulky.

Výsledná aplikace v prohlížeči

Teď se trochu podíváme na zdrojový kód.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
DataKeyNames="ID" DataSourceID="SqlDataSource1">
	<Columns>
		<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
			ReadOnly="True" SortExpression="ID" />
		<asp:BoundField DataField="Jmeno" HeaderText="Jmeno" SortExpression="Jmeno" />
		<asp:BoundField DataField="Prijmeni" HeaderText="Prijmeni" 
			SortExpression="Prijmeni" />
		<asp:BoundField DataField="Bydliste" HeaderText="Bydliste" 
			SortExpression="Bydliste" />
		<asp:BoundField DataField="Vek" HeaderText="Vek" SortExpression="Vek" />
	</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
	ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
	ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" 
	SelectCommand="SELECT * FROM [Pratele]"></asp:SqlDataSource>

Za všeho nejdříve v komponentě GridView zredukujeme vlastnosti, které nepotřebujeme. Potom smažeme sloupec s hodnotou ID, která je uživateli také k ničemu. Změníme text v hlavičce každého sloupce. Nakonec ještě zkusíme upravit vzhled tabulky, protože aktuálně to není úplně ideální.

Ve všech sloupcích budeme potřebovat pouze titulek, který udává vlastnost HeaderText, a DataField, která nastavuje, jaký sloupec z databáze chceme vybrat.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" DataSourceID="SqlDataSource1">
	<Columns>
		<asp:BoundField DataField="Jmeno" HeaderText="Jméno" />
		<asp:BoundField DataField="Prijmeni" HeaderText="Příjmení" />
		<asp:BoundField DataField="Bydliste" HeaderText="Bydliště" />
		<asp:BoundField DataField="Vek" HeaderText="Věk" />
	</Columns>
</asp:GridView>

Vzhled tabulky

Visual Studio má předpřipravených několik málo stylů, které můžeme okamžitě využít, a to de facto jedním kliknutím. Přepněte si do Design režimu, klikněte na šipku v pravém horním rohu komponenty GridView a zvolte možnost Auto format... Zde si můžete vybrat vzhled, který vám vyhovuje.

Tuto možnost ale používejte jen v krajních případech, generuje totiž nehezké HTML, což uživateli sice většinou nevadí, ale zdrojový kód potom vypadá příšerně.

Řazení hodnot v tabulce podle klíčového slova

Poslední věc, kterou si v tomto díle uděláme, bude seřazení hodnot podle nějakého sloupce v tabulce.

Do stránky si přidejte seznam (DropDownList) a tlačítko (Button). Do seznamu předejte názvy sloupců (ID, Jmeno, Prijmeni...) a vytvořte událostní proceduru kliknutí na tlačítko.

<asp:DropDownList ID="DropDownList1" runat="server">
	<asp:ListItem>ID</asp:ListItem>
	<asp:ListItem>Jmeno</asp:ListItem>
	<asp:ListItem>Prijmeni</asp:ListItem>
	<asp:ListItem>Bydliste</asp:ListItem>
	<asp:ListItem>Vek</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Seřadit" />

Komponenta GridView má metodu Sort(), která přijímá dva parametry - první je hodnota typu string, podle které se bude řadit, a druhá je struktura SortDirection, která určuje, jestli se bude řadit sestupně (Ascending), nebo vzestupně (Descending). Do prvního parametru tedy dosadíme dynamicky to, co uživatel vybere ze seznamu (vlastnost SelectedValue komponenty DropDownList), a druhý necháme statický na SortDirection.Ascending.

Výsledný kód vypadá následovně:

protected void Button1_Click(object sender, EventArgs e)
{
    GridView1.Sort(DropDownList1.SelectedValue, SortDirection.Ascending);
}

a výsledek v prohlížeči takto:

Výsledná aplikace

Závěr

Touto aplikací je to ke článku vše. V dalším díle se můžete těšit na pokračování tématiky databází a ASP.NET. Podíváme se, jak lze v databázi s pomocí ASP.NET vyhledávat a jak záznamy přidávat.

Na procvičení - [1] V aplikaci z článku umožněte uživateli, aby si zvolil i to, jestli bude data třídit sestupně, nebo vzestupně. [2] Vytvořte si jinou a obsáhlejší databázi a proveďte stejné kroky jako v článku.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

4 názory  —  4 nové  
Hlasování bylo ukončeno    
5 hlasů
Google
(fotka) Milan SukMilan studuje 3. ročník obecného gymnázia. V současnosti pracuje jako PHP programátor. Mezi jeho záliby patří samozřejmě IT, dále moderní přírodní vědy a z kulturní stránky hra na kytaru/klavír. Věří v open source a svobodný software. Je uživatel linuxových distribucí.
Web     Twitter     Facebook    

Nové články

Reklama
Reklama
Obrázek ke článku Nový IT hráč na českém trhu

Nový IT hráč na českém trhu

V roce 2015 otevřela v Praze na Pankráci v budově City Tower své kanceláře společnost EPAM Systems (NYSE:EPAM), jejíž centrála se nachází v USA. Společnost byla založená v roce 1993 a od té doby prošla velkým vývojem a stále roste.

Obrázek ke článku České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace opět hledají nejlepší nápady pro internet věcí

České Radiokomunikace (CRA) pořádají druhý ročník CRA IoT Hackathonů. Zájemci z řad vývojářů a fanoušků moderních technologií mohou změřit své síly a během jediného dne sestrojit co nejzajímavější funkční prototyp zařízení, které bude komunikovat prostřednictvím sítě LoRa. CRA IoT Hackathony se letos uskuteční ve dvou fázích, na jaře a na podzim, v různých městech České republiky. Jarní běh se odstartuje 31. března v Brně a 7. dubna v Praze.

Obrázek ke článku Cloud computing je využíván stále intenzivněji

Cloud computing je využíván stále intenzivněji

Využívání cloud computingu nabývá na intenzitě. Jen v letošním roce vzroste podle analytiků trh se službami veřejného cloudu o 18 %, přičemž o téměř 37 % vzrostou služby typu IaaS. Růst o více než pětinu pak čeká služby poskytování softwaru formou služby, tedy SaaS. Aktuálním trendům v oblasti využívání cloudu se bude věnovat konference Cloud computing v praxi, která se koná 23. března. 2017 v pražském Kongresovém centru Vavruška na Karlově náměstí 5.

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý