6. diel - Výpis článkov z databázy v ASP.NET

V minulej lekcii, Úprava template Web Forms v ASP.NET , sme si pripravili a sprevádzkovali šablónu pre osobný blog. V dnešnom C# .NET tutoriálu sa budeme venovať databázu článkov.

Založenie databázy

Založenie databázy vykonáme priamo vo Visual Studiu, ktoré obsahuje pokročilé administračné nástroje. Alternatívou by bolo použiť SQL Management Studio, ktoré je však nutné zbytočne doinštalovať.

V Solution Exploreri pridáme do zložky App_Data nový item. Bude sa jednať o SQL Server Database z kategórie Data. Pomenujeme ju BlogDB.mdf.

Keď na databázu 2x klikneme, prenesieme sa do Server Exploreru. Tam pridáme novú tabuľku pravým kliknutím na priečinok Tables.

Visual Studio nám už předgenerovalo stĺpec Id typu int, na ktorom je primárny kľúč. Stĺpec označíme a v oknu Properties mu ešte nastavíme Is Identity na True (v Identity Specification). Id je teda jednoznačný identifikátor článkov a automaticky sa zvyšuje o 1 s každým novým článkom. Toto by ste už mali poznať zo sekcie Databáza v C# .NET.

Ďalej pridáme nasledujúce stĺpce s týmito dátovými typy:

• Obsah (ntext) - Samotný obsah článku
• Popis (nvarchar 150) - Krátky popis článku
• Url (nvarchar 150) - URL článku
• Titulok (nvarchar 150) - Názov článku

Pozn. Vo webovej sfére sa popisu niekedy hovorí perex a url slug.

V SQL kóde nižšie prepíšeme názov tabuľky z Table na Clanok a následne stlačíme tlačidlo Update nad návrhárom stĺpcov. Akciu potvrdíme tlačidlom Update Database.

Testovacie dáta

Aby sme si mohli aplikáciu vyskúšať, potrebujeme v databáze nejaká testovacie dáta.

Keď teraz klikneme na položku Tables v Server Exploreri a vyberieme refresh, uvidíme tu našu novú tabuľku. U tej vyberieme z kontextového menu Show Table Data.

Do nového okna vložíme niekoľko testovacích článkov:

Výpis zoznamu článkov

Teraz upravíme našu obsahovú stránku články tak, aby zobrazovala zoznam článkov z databázy. Existuje hneď niekoľko spôsobov ako to docieliť.

Chcel by som vás varovať, že kvalita niektorých tutoriálov pre ASP.NET (najmä na youtube alebo W3Schools) je naozaj žalostná. Asi najhorší spôsob, ktorý môžete pre náš prípad zvoliť, je napísať C# kód na pripojenie k databáze a vypisovanie HTML kódu pre položky priamo do šablóny Clanky.aspx. C# kód a kód šablóny nikdy nemiešajte.

Ďalším spôsobom je pripraviť si dáta v Code Behind pomocou štandardných tried pre prácu s databázou z .NET a tieto dáta následne vypísať v šablóne pomocou tzv. Repeater.

Oveľa lepšie riešenie je však použiť predpripravené kontrolky z Toolbox, ktoré sú priamo určené pre zobrazovanie dát z databázy rôznym spôsobom (napr. Ako tabuľka). Toto riešenie zvolíme my. Vždy by ste si mali v ASP.NET zistiť, či neexistuje nejaká komponenta alebo štandardné cesta, než sa uchýlite svoj problém riešiť klasickým vypisovaním HTML kódu. Šetríte tak svoj čas a aj čas toho, kto bude kód ďalej udržiavať, či už to budete vy alebo niekto iný.

Datalist

Prepnite sa do design módu obsahovej stránky Clanky.aspx a V ToolBox vyberte datalist zo skupiny Data. Ten pretiahnite dovnútra stránky. Kontrolke musíme nastaviť DataSource, robí sa to úplne rovnako ako napr. U Menu a to buď pomocou šípky vpravo hore pri kontrolky alebo v jej vlastnosti DataSource v oknu Property.

Zdroj údajov vytvoríme nový, zvolíme teda New Data Source. V nasledujúcom dialógu vyberieme, že sa jedná o zdroj dáta z databázy a zdroj pomenujeme ho clankySqlData­Source.

V ďalšom oknu vyberieme našej databáze.

ConnectionString budeme chcieť uložiť, bude tak súčasťou konfiguračného súboru a nasadenie aplikácie na webhosting bude jednoduchšie.

Teraz vyberieme aké dáta má kontrolka zobrazovať. Dialóg je pomerne šikovný a vygeneruje nám rovno SQL dotaz, nemusíme teda nič písať. V zozname článkov nás bude zaujímať tabuľka článkov, z ktorej vyberieme stĺpce Opis, Url a Titulok.

Články budeme chcieť zoradiť od najnovších po najstaršie. Preto klikneme na tlačidlo Order By, kde zvolíme stĺpec ID a možnosť Descending (zostupne):

V ďalšom okne si môžeme dotaz na dáta otestovať, stlačíme tlačidlo test Query a presvedčíme sa, že sú vybrané naozaj tie správne riadky a stĺpce.

výsledok:

Aplikáciu si teraz môžeme vyskúšať, projekt spustíme a prejdeme do záložky Články.

Hoci všetko funguje perfektne, výpis nie je príliš užívateľsky prívetivý. Preto ho teraz upravíme do prehľadnej tabuľky.

Presunieme sa do zdrojového kódu Clanky.aspx, kde nájdeme 2 nové elementy. Prvým je samotný datalist a druhým je SqlDataSource, teda zdroj dát. V datalist sa nachádza element ItemTemplate. To je šablóna jednej položky zoznamu, v ktorej sú zatiaľ 3 labely pre každú vlastnosť. Datalist sa neskôr v prehliadači vykreslí ako tabuľka, ktorá má 1 stĺpec a každá bunka má tento obsah. Kód upravíme do nasledujúcej 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 šablóny sme pridali nadpis s odkazom a odsek. Vnútri týchto elementov je použitý výraz Eval. Je to skratka Evaluate data-binding expression. Akonáhle ho niekam zapíšeme, ASP.NET sa pokúsi získať z aktuálneho zdroja údajov vlastnosť s týmto názvom a jej hodnotu vloží do výsledného HTML kódu. Týmto spôsobom na dané miesta v HTML kóde vložíme hodnoty z databázy.

Pre zápis odkazov sa v ASP.NET používa skôr kontrolka HYPERLINK než prostý element a. Každý článok bude teraz odkazovať na zatiaľ neexistujúcu stránku Clanek.aspx, ktoré odovzdá v parametri clanek názov článku, ktorý má stránka zobraziť. Týmto parametrom sa hovorí QueryString. Ako asi tušíte, stránku Clanek.aspx si vytvoríme nabudúce.

Celému datalist som ešte nastavil vlastnosť CssClass na clanky. Túto triedu som následne v CSS nastyloval tak, aby mala tabuľka tenký rámik. Môžeme sa pozrieť na výsledok:

To je o veľa lepšie. Náš web vie vypisovať články z databázy, v budúcej lekcii, Zobrazovanie a administrácia článkov v ASP.NET , sa naučíme zobraziť detail určitého článku. Zdrojové kódy webu sú ako vždy priložené ďalej k stiahnutiu.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.