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

V minulé lekci, Úprava template Web Forms v ASP.NET, jsme si připravili a zprovoznili šablonu pro osobní blog.

V dnešním C# .NET tutoriá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.

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.

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.

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.

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.

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

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.

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

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

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.

Č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ě):

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.

Výsledek:

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

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:

To je o hodně lepší. Náš web umí vypisovat články z databáze.

V příští lekci, Zobrazování a administrace článků v ASP.NET, 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í.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.