Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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.

Tvorba databázy v ASP.NET WebForms - ASP.NET Web Forms

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.

Pridanie novej databázovej tabuľky v ASP.NET - ASP.NET Web Forms

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.

Návrh databázovej tabuľky pre ASP.NET vo Visual Studio - ASP.NET Web Forms

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.

Uloženie databázovej tabuľky pre ASP.NET vo Visual Studio - ASP.NET Web Forms

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.

ASP.NET – Editácia dát tabuľky vo Visul Studio - ASP.NET Web Forms

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

Testovacie dáta v ASP.NET - ASP.NET Web Forms

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.

Pridanie DataSource v ASP.NET Web Forms - ASP.NET Web Forms

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

Pridanie DataSource v ASP.NET Web Forms - ASP.NET Web Forms

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

Pridanie DataSource v ASP.NET Web Forms - ASP.NET Web Forms

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.

Pridanie DataSource v ASP.NET Web Forms - ASP.NET Web Forms

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

Pridanie DataSource v ASP.NET Web Forms - ASP.NET Web Forms

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.

Pridanie DataSource v ASP.NET Web Forms - ASP.NET Web Forms

výsledok:

Datalist v ASP.NET - ASP.NET Web Forms

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

Neostylovaný datalist v ASP.NET - ASP.NET Web Forms

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:

Ostylovaný datalist v ASP.NET - ASP.NET Web Forms

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š.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 342x (20.28 MB)
Aplikácia je vrátane zdrojových kódov v jazyku C#

 

Predchádzajúci článok
Úprava template Web Forms v ASP.NET
Všetky články v sekcii
ASP.NET Web Forms
Preskočiť článok
(neodporúčame)
Zobrazovanie a administrácia článkov v ASP.NET
Článok pre vás napísal David Hartinger
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity