6. díl - Výpis článků z databáze v ASP.NET

C# .NET ASP.NET Web Forms Výpis článků z databáze v ASP.NET

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulém dílu našeho seriálu tutoriálů o tvorbě webových aplikací v ASP.NET jsme si připravili a zprovoznili šablonu pro osobní blog. V dnešním dílu se budeme věnovat databázi článků.

Založení databáze

Založení databáze provedeme přímo ve Visual Studiu, které obsahuje pokročilé administrační nástroje. Alternativou by bylo použít SQL Management Studio, které je však nutné zbytečně doinstalovat.

V Solution Exploreru přidáme do složky App_Data nový item. Bude se jednat o SQL Server Database z kategorie Data. Pojmenujeme ji BlogDB.mdf.

Tvorba databáze v ASP.NET WebForms

Když na databázi 2x klikneme, přeneseme se do Server Exploreru. Tam přidáme novou tabulku pravým kliknutím na složku Tables.

Přidání nové databázové tabulky v ASP.NET

Visual Studio nám již předgenerovalo sloupec Id typu int, na kterém je primární klíč. Sloupec označíme a v oknu Properties mu ještě nastavíme Is Identity na True (v Identity Specification). Id je tedy jednoznačný identifikátor článků a automaticky se zvyšuje o 1 s každým novým článkem. Toto byste již měli znát ze sekce Databáze v C# .NET.

Dále přidáme následující sloupce s těmito datovými typy:

  • Obsah (ntext) - Samotný obsah článku
  • Popis (nvarchar 150) - Krátký popis článku
  • Url (nvarchar 150) - URL článku
  • Titulek (nvarchar 150) - Titulek článku

Pozn. Ve webové sféře se popisu někdy říká perex a url slug.

Návrh databázové tabulky pro ASP.NET ve Visual Studio

V SQL kódu níže přepíšeme název tabulky z Table na Clanek a následně stiskneme tlačítko Update nad návrhářem sloupců. Akci potvrdíme tlačítkem Update Database.

Uložení databázové tabulky pro ASP.NET ve Visual Studio

Testovací data

Abychom si mohli aplikaci vyzkoušet, potřebujeme v databázi nějaká testovací data.

Když nyní klikneme na položku Tables v Server Exploreru a vybereme refresh, uvidíme zde naši novou tabulku. U té vybereme z kontextového menu Show Table Data.

ASP.NET – Editace dat tabulky ve Visul Studio

Do nového okna vložíme několik testovacích článků:

Testovací data v ASP.NET

Výpis seznamu článků

Nyní upravíme naši obsahovou stránku Clanky tak, aby zobrazovala seznam článků z databáze. Existuje hned několik způsobů jak toho docílit.

Chtěl bych vás varovat, že kvalita některých tutoriálů pro ASP.NET (zejména na youtube nebo w3schools) je opravdu žalostná. Asi nejhorší způsob, který můžete pro náš případ zvolit, je napsat C# kód k připojení k databázi a vypisování HTML kódu pro položky přímo do šablony Clanky.aspx. C# kód a kód šablony nikdy nemíchejte.

Dalším způsobem je připravit si data v Code Behind pomocí standardních tříd pro práci s databází z .NETu a tato data následně vypsat v šabloně pomocí tzv. Repeateru.

Mnohem lepší řešení je však použít předpřipravené kontrolky z Toolboxu, které jsou přímo určené pro zobrazování dat z databáze různým způsobem (např. jako tabulka). Toto řešení zvolíme my. Vždy byste si měli v ASP.NET zjistit, zda neexistuje nějaká komponenta nebo standardní cesta, než se uchýlíte svůj problém řešit klasickým vypisováním HTML kódu. Šetříte tak svůj čas a i čas toho, kdo bude kód dále udržovat, ať již to budete vy nebo někdo jiný.

DataList

Přepněte se do design módu obsahové stránky Clanky.aspx a V ToolBoxu vyberte DataList ze skupiny Data. Ten přetáhněte dovnitř stránky. Kontrolce musíme nastavit DataSource, dělá se to úplně stejně jako např. u Menu a to buď pomocí šipky vpravo nahoře u kontrolky nebo v její vlastnosti DataSource v oknu Property.

Zdroj dat vytvoříme nový, zvolíme tedy New Data Source. V následujícím dialogu vybereme, že se jedná o zdroj data z databáze a zdroj pojmenujeme ho clankySqlData­Source.

Přidání DataSource v ASP.NET Web Forms

V dalším oknu vybereme naší databázi.

Přidání DataSource v ASP.NET Web Forms

ConnectionString budeme chtít uložit, bude tak součástí konfiguračního souboru a nasazení aplikace na webhosting bude jednodušší.

Přidání DataSource v ASP.NET Web Forms

Nyní vybereme jaká data má kontrolka zobrazovat. Dialog je poměrně chytrý a vygeneruje nám rovnou SQL dotaz, nemusíme tedy nic psát. V seznamu článků nás bude zajímat tabulka Clanky, ze které vybereme sloupce Popis, Url a Titulek.

Přidání DataSource v ASP.NET Web Forms

Články budeme chtít řadit od nejnovějších po nejstarší. Proto klikneme na tlačítko Order By, kde zvolíme sloupec ID a možnost Descending (sestupně):

Přidání DataSource v ASP.NET Web Forms

V dalším okně si můžeme dotaz na data otestovat, stiskneme tlačítko test Query a přesvědčíme se, že jsou vybrané opravdu ty správné řádky a sloupce.

Přidání DataSource v ASP.NET Web Forms

Výsledek:

DataList v ASP.NET

Aplikaci si nyní můžeme vyzkoušet, projekt spustíme a přejdeme do záložky Články.

Neostylovaný DataList v ASP.NET

Ačkoli vše funguje perfektně, výpis není příliš uživatelsky přívětivý. Proto jej nyní upravíme do přehledné tabulky.

Přesuneme se do zdrojového kódu Clanky.aspx, kde nalezneme 2 nové elementy. Prvním je samotný DataList a druhým je SqlDataSource, tedy zdroj dat. V DataListu se nalézá element ItemTemplate. To je šablona jedné položky seznamu, ve které jsou zatím 3 labely pro každou vlastnost. DataList se později v prohlížeči vykreslí jako tabulka, která má 1 sloupec a každá buňka má tento obsah. Kód upravíme do následující podoby:

<asp:DataList ID="DataList1" runat="server" DataSourceID="clankySqlDataSource" CssClass="clanky">
        <ItemTemplate>
                <h2>
                        <asp:HyperLink ID="clanekHyperLink" runat="server" NavigateUrl='<%# "~/Clanek.aspx?clanek=" + Eval("Url") %>'><%# Eval("Titulek") %></asp:HyperLink>
                </h2>
                <p>
                        <%# Eval("Popis") %>
                </p>
        </ItemTemplate>
</asp:DataList>

Do šablony jsme přidali nadpis s odkazem a odstavec. Uvnitř těchto elementů je použit výraz Eval. Je to zkratka Evaluate data-binding expression. Jakmile ho někam zapíšeme, ASP.NET se pokusí získat z aktuálního zdroje dat vlastnost s tímto názvem a její hodnotu vloží do výsledného HTML kódu. Tímto způsobem na daná místa v HTML kódu vložíme hodnoty z databáze.

Pro zápis odkazů se v ASP.NET používá spíše kontrolka HyperLink než prostý element a. Každý článek bude nyní odkazovat na zatím neexistující stránku Clanek.aspx, které předá v parametru clanek název článku, který má stránka zobrazit. Těmto parametrům se říká QueryString. Jak asi tušíte, stránku Clanek.aspx si vytvoříme příště.

Celému DataListu jsem ještě nastavil vlastnost CssClass na clanky. Tuto třídu jsem následně v CSS nastyloval tak, aby měla tabulka tenký rámeček. Můžeme se podívat na výsledek:

Ostylovaný DataList v ASP.NET

To je o hodně lepší. Náš web umí vypisovat články z databáze, příště se naučíme zobrazit detail určitého článku. Zdrojové kódy webu jsou jako vždy přiloženy níže ke stažení.


 

Stáhnout

Staženo 280x (20.28 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
10 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Všechny články v sekci
ASP.NET Web Forms
Aktivity (1)

 

 

Komentáře
Zobrazit starší komentáře (4)

Avatar
info7060
Člen
Avatar
info7060:30.3.2014 17:02

A proč nemáš k dispozici Management Studio? SQL Server Express nabízí přece taky management studio. Nevynechal si něco při instalaci?

Editováno 30.3.2014 17:02
 
Odpovědět 30.3.2014 17:02
Avatar
Yahkem
Redaktor
Avatar
Yahkem:10.6.2014 11:54

co kdyz chci vypsat data z databaze jako tabulku? je nasledujici postup povolen?

<ItemTemplate>
    <asp:HyperLink...></asp:HyperLink>
    </td>
    <td>
    <%# Eval("Popis") %>
</ItemTemplate>
 
Odpovědět 10.6.2014 11:54
Avatar
Odpovídá na Yahkem
Michal Štěpánek:10.6.2014 13:29

Chybí ti tam začátek tabulky,řádku a buňky no a pak konec buňky, konec řádku a tabulky. Pokud chceš jednu tabulku a výpis dat do jednotlivých řádků, použil bych GridView, to je komponenta na to přímo dělaná, pokud chceš konkrétní záznam, je na to dobré FormView, nebo DetailsView...

Odpovědět 10.6.2014 13:29
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
trnkto
Člen
Avatar
trnkto:18.7.2015 11:04

Ahoj, mám takový problém se zakládáním nových tabulek.
Po kliknutí na tabulku nemám mezi možnostmi "Add New Table" (http://www.itnetwork.cz/…_tabulky.png). Mohl by mi někdo poradit jak tento problém opravit?

Odpovědět 18.7.2015 11:04
Nechci být nejlepší, abych se od těch nejlepších mohl učit
Avatar
andrej.misuta:2.3.2016 16:36

Zdravím, prosím Vás po dokončení tohto (6. tutoriálu) mi nefunguje zobrazenie stránky "Clanky.aspx" s touto hláškou. Vedeli by ste mi poradiť v čom môže byť chyba? Ďakujem :-)

 
Odpovědět 2.3.2016 16:36
Avatar
Odpovídá na andrej.misuta
Michal Štěpánek:2.3.2016 19:03

Nemáš správně nastaven DataBinding na "Titulek"

Editováno 2.3.2016 19:03
Odpovědět 2.3.2016 19:03
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Odpovídá na Michal Štěpánek
andrej.misuta:2.3.2016 19:24

Prosím ťa vieš mi bližšie popísať ako to opraviť? Nemôžem to nikde nájsť :-(

 
Odpovědět 2.3.2016 19:24
Avatar
Odpovídá na Michal Štěpánek
andrej.misuta:2.3.2016 19:37

OK, už to mám diky moc za radu :-) :-)

 
Odpovědět 2.3.2016 19:37
Avatar
Odpovídá na andrej.misuta
Michal Štěpánek:3.3.2016 9:21

Tam ani nebylo moc co radit, jen je třeba si pořádně přečíst, co mi vlastně ta chyba říká...

Odpovědět 3.3.2016 9:21
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Petr Stastny
Redaktor
Avatar
Petr Stastny:24. března 20:22

Ahoj, potřebuji radu. Před časem jsem programoval v ASPčku a fungovalo to. Teď jsem se k tomu vrátil a hned jsem začal s tím, že jsem potřeboval použít v projektu DB. Dřív jsem to dělal tak, že jsem si přes MS SQL Management Studio vytvořil DB a připojil jsem si ji k projektu. Teď jsem to zkusil a nepřipojilo se to, chyba 40. Zkoušel jsem to nějak vyřešit, ale nepovedlo se mi to. Poté jsem si SQL Studio updatnul, měl jsem starou verzi, ale pořád to nešlo. Takže teď jsem to zkusil udělat podle článku, tedy DB přímo ve VS. Všechno to šlo, vytvořil jsem si první tabulku. Potom jsem se chtěl na tu tabulku podívat a vytvořit si ještě jednu další. Ale to už nešlo. Když jsem zkoušel refreshnout složku s tabulkami, nešlo to. Tady je screenshot: http://prntscr.com/eo1lnf A ještě něco: Pokaždé, když spustím VS, mezi připojeními k DB se objeví mimo mé DB ještě Default Connection. Obě DB mají u sebe červený křížek, když je refreshnu, ikonka červeného křížku se změní na takový kabel. Ale pořád se, ani u jedné, nemůžu dostat do složky s tabulkami. Když zkusím znovu vytvořit DataList a přiřadit mu DB, vyskočí stejná chyba. Co mám dělat?

 
Odpovědět 24. března 20:22
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 14. Zobrazit vše