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

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 277x (20.28 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
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.

Jak se ti líbí článek?
Celkem (10 hlasů) :
4.84.84.84.84.8


 


Miniatura
Všechny články v sekci
ASP.NET Web Forms

 

 

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

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

V článku se Management Studio nepoužívá, než něco okomentuješ, tak si to přečti.

Odpovědět 8.2.2014 19:13
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
info7060
Člen
Avatar
info7060:

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:

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:

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:

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:

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. března 16:36
Avatar
Odpovídá na andrej.misuta
Michal Štěpánek:

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

Editováno 2. března 19:03
Odpovědět 2. března 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:

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

 
Odpovědět 2. března 19:24
Avatar
Odpovídá na Michal Štěpánek
andrej.misuta:

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

 
Odpovědět 2. března 19:37
Avatar
Odpovídá na andrej.misuta
Michal Štěpánek:

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. března 9:21
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
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 13. Zobrazit vše