Začínáme s ASP.NET 2.0: 6. díl: práce s daty v ASP.NET I.

Pojem data-binding

Data-binding je princip, který umožňuje spojovat poskytovatele dat (typicky databázi) s konzumenty dat (typicky ovládacím prvky umístěné na formuláři). Důležité je, že při data-bindingu není nutné psát žádný kód. Data-binding je záležitost nastavení datového zdroje a konzumenta dat a typicky se provádí prostřednictvím pohodlného vizuálního rozhraní (odborným názvem – deklarativně).

Vytvoření zdroje dat

Zdrojem dat bude v prvním jednoduchém případě tabulka Kategorie z naší databáze KatalogZbozi. V ASP.NET je několik druhů zdrojů dat (Data Source), které si můžete prohlédnout v panelu nástrojů. V dnešním díle budeme používat datový zdroj SqlDataSource, který lze – navzdory poněkud zavádějícímu názvu – využít nejenom pro přístup k datům SQL serveru, ale i k dalším relačním datovým zdrojům přístupným přes OLEDB/ODBC rozhraní.

Pojďme na datový zdroj. Vytvoříme novou stránku a nazveme ji ProchazeniKatalogu.aspx. Z panelu nástrojů na ni myší přetáhneme prvek SqlDataSource. Jedná se o ovládací prvek jako každý jiný, takže jej můžeme přejmenovat – navolíme jej myší a v okně Properties změníme (ID) z původního SqlDataSource1 na ZdrojDatKategorie.

Jsme-li v pohledu Design a navolíme datový zdroj myší, zobrazí se malá šipka, pomocí které rozbalíme smart tag s nabídkou Configure Data Source (stejného efektu lze dosáhnout zobrazením kontextové nabídky na tomto prvku). Nejprve musíme vybrat datové spojení – v rozbalovacím seznamu bychom měli najít naši databázi KatalogZbozi.mdf. Na další stránce potvrdíme uložení připojovacího řetězce k databázi pro další použití – můžeme použít nějaké popisnější jméno, např. SpojeniKatalogZbozi a pokračujeme dále. Třetí stránka je nejdůležitější (viz obrázek).

Zkušenější uživatelé mohou napsat vlastní SQL dotaz do databáze, my si vybereme pohodlnější možnost – zvolíme tabulku Kategorie a sloupce IDKategorie a Jmeno a pokračujeme dále (volitelně můžete též nastavit třídění pomocí tlačítka ORDER BY). Na následující stránce si můžete zkontrolovat výsledek dotazu (Test Query) a po ukončení průvodce máme datový zdroj hotový.

Nastavení konzumenta dat

Datový zdroj máme hotový, zbývá vytvořit alespoň jednoho konzumenta. V našem případě to bude rozbalovací seznam. Napíšeme na stránku text Kategorie: a za tento text přetáhneme z panelu nástrojů prvek DropDownList. V okně Properties jej přejmenujeme změnou vlastnosti (ID) z DropDownList1 na DDLKategorie. Navolením prvku se zobrazí šipka zobrazující smart tag, v němž je i možnost Choose Data Source..., jednotlivá pole nastavíme podle následujícího obrázku:

A to je vše, co jsme museli udělat. Zobrazíme-li si nyní stránku v prohlížeči, měl by být rozbalovací seznam naplněn třemi kategoriemi jako na následujícím obrázku.

GridView

Ovládacích prvků, které lze použít pro data-binding, je celá řada. Nejpokročilejším z nich je GridView umožňující zobrazovat data v datové mřížce s možností výběru, třídění, mazání, upravování, stránkování apod.

Základní použití

Na stejné stránce ProchazeniKatalogu.aspx si vytvoříme druhý datový zdroj. Použijeme obdobný postup jako v předchozím případě. Z panelu nástrojů na ni myší přetáhneme druhý prvek SqlDataSource, navolíme jej myší a v okně Properties změníme (ID) z původního SqlDataSource1 na ZdrojDatProdukty. Opět přepneme do pohledu Design, zobrazíme smart tag a vybereme Configure Data Source. Při výběru datového spojení najdeme v seznamu již připravené spojení SpojeniKatalogZbozi. Jako tabulku vybereme tentokrát Produkty a pro urychlení můžeme vybrat všechna pole <). Pomocí tlačítka ORDER BY nastavíme pole pro třídění na Nazev a dokončíme průvodce.

Jak asi tušíte, přidáme nyní konzumenta dat v podobě prvku GridView. V kontextové nabídce uvidíme možnost Choose Data Source, kde ze seznamu vyberte ZdrojDatProdukty. V okně Properties přejmenujeme naši datovou mřížku změnou vlastnosti (ID) z GridView1 na GVProdukty. Pokud si zobrazíte stránku v prohlížeči, měla by nyní vypadat zhruba takto:

Zapnutí pokročilejších vlastností

Naše datová mřížka je sice funkční, ale dá se na ní ještě spousta věcí vylepšit – začneme vzhledem. V kontextové nabídce prvku je možnost Auto Format, ve které můžete zvolit z mnoha přednastavených barevných kombinací. Každému, co jeho jest – já jsem zvolil formát Professional. Vizuální nastavení lze měnit i jednotlivě – v okně Properties je sekce Styles, kde je nepřeberné množství formátovacích možností – např. můžeme změnit barvu pozadí nadpisů sloupců (položka BackColor v podsekci HeaderStyle) na zlatou (Gold).

Další zajímavá nastavení se týkají sloupců. Některé možnosti jsou přístupné přímo z kontextové nabídky, všechny možnosti si pak zobrazíme kliknutím na symbol ... v položce Columns v okně Properties – viz obrázek:

Začneme tím, že odstraníme nepotřebná pole IDProdukt, IDKategorie a DatumZarazeni. Stačí příslušná pole vybrat v seznamu Selected fields a použít tlačítko se symbolem X pro mazání. Můžeme též měnit formátování jednotlivých sloupců. Chceme-li např. mít název vypsaný tučnou kurzívou, vybereme pole Nazev v seznamu Selected fields a ve vlastnostech vpravo změníme v položce Styles/Item Style/Font hodnoty Bold a Italic na true. Názvy sloupečků můžeme počeštit jejich výběrem v seznamu Selected fields a opravením vlastnosti HeaderText v sekci Appearance. V dialogu lze rovněž vytvářet nová pole v datové mřížce, ale to zatím dělat nebudeme.

Posledním úkonem bude povolení třídění, stránkování a výběru konkrétního řádku. Zvolíme-li datovou mřížku a rozbalíme smart tag nahoře vpravo, stačí zaškrtnout možnosti Enable paging, Enable sorting a Enable selection (alternativně lze nastavit i v okně Properties). V okně Properties ještě zmenšíme velikost stránky na 5 řádků na stránku pomocí volby PageSize v sekci Paging. Pokud si nyní stránku zobrazíme, měla by vypadat zhruba takto:

Všimněme si, že vzhled je přesně podle našeho nastavení – aplikoval se auto formát, názvy jsou tučnou italikou, pozadí hlaviček sloupců má zlatavou barvu, zobrazeny jsou pouze relevantní sloupečky. Kliknutím na titulku sloupečku lze data řadit podle obsahu sloupce vzestupně i sestupně. V dolním řádku jsou odkazy na jednotlivé stránky mřížky. Kliknutím na odkaz Select v úvodu každého řádku lze daný řádek vybrat/zvýraznit (text Select lze změnit v dialogu pro editaci sloupců, na výběr řádku se lze navázat událostí SelectedIndexChanged anebo jej použít pro data binding dalšího prvku).

Pokud se chcete seznámit s dalšími možnostmi prvku GridView, doporučujeme pro další studium následující dva odkazy:

• http://msdn.microsoft.com/msdnmag/issues/04/08/GridView/default.aspx
• http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/GridViewEx.asp

DetailsView

Druhým důležitým prvkem je DetailsView. Mnohé jeho rysy jsou shodné s prvkem GridView, od něhož se však liší v jedné důležité věci – zatímco GridView zobrazuje více datových řádků najednou, DetailsView zobrazuje právě jeden řádek. Velmi často se proto používá k editaci dat (k čemuž lze ale použít i GridView) anebo ke vkládání dat. Podíváme se nyní na DetailsView prakticky.

Založíme novou stránku Produkt.aspx. Vytvoříme na ní nový zdroj dat ZdrojDatProdukty – použijeme velmi podobný postup jako při práci s datovou mřížkou. Z panelu nástrojů na plochu přetáhneme prvek SqlDataSource, navolíme jej myší a změníme (ID) z původního SqlDataSource1 na ZdrojDatProdukty. Opět přepneme do pohledu Design, zobrazíme nabídku a vybereme Configure Data Source.

Při výběru datového spojení najdeme v seznamu již připravené spojení SpojeniKatalogZbozi. Jako tabulku vybereme tentokrát Produkty a pro urychlení můžeme vybrat všechna pole <). Pomocí tlačítka ORDER BY nastavíme pole pro třídění na Nazev a dokončíme průvodce. A nyní rozdíl oproti předchozímu postupu – stiskneme tlačítko Advanced... a vybereme možnost Generate INSERT, UPDATE, and DELETE statements.

Na stránku přeneseme prvek DetailsView a přejmenujeme ho změnou vlastnosti (ID) z původního DetailsView1 na DVProdukty. Zobrazíme jeho smart tag a v rozbalovacím seznamu Choose Data Source zvolíme ZdrojDatProdukty. Rovněž zde povolíme stránkování, vkládání, úpravy a mazání dat zatržením Enable Paging, Inserting, Deleting, Updating.

Stejně jako v předchozím případě můžeme použít Auto Format pro rychlou a snadnou úpravu vzhledu. Místo číselného stránkování můžeme zvolit symboly šipek – ve vlastnostech nastavíme Paging/PagerSettings/Mode například na hodnotu NextPreviousFirstLast. Zobrazená stránka může vypadat například takto:

Můžeme si vyzkoušet funkci stránkování, editace, vkládání i mazání záznamů. Podobně jako v případě prvku GridView můžeme měnit popisy hlaviček, formáty apod.

Další prvky

K zobrazování dat lze použít i další prvky – DataList, Repeater a ListView. Na rozdíl od předchozích prvků jsou mnohem flexibilnější a lze s nimi dosáhnout mnohem více, ovšem na úkor poněkud větší složitosti. Pro experimentování s těmito prvky si založíme novou stránku OstatniPrvky.aspx a na ní vytvoříme a nakonfigurujeme zdroj dat ZdrojDatProdukty přesně stejným postupem jako u prvku DetailsView.

DataList

DataList je podobný prvku GridView, ale na rozdíl od něj vykresluje pouze pole tabulky, jejichž vnitřek se vykresluje tzv. šablonami. Šablona je při navázání na zdroj dat vygenerována ze zdroje dat a poté si ji můžeme sami upravovat. Přetáhneme na plochu prvek DataList a jako jeho zdroj dat vybereme ZdrojDatProdukty. Můžeme rovněž zkusit Auto Format, ale jeho možnosti jsou zde omezené. Na rozdíl od prvku GridView může DataList mít více položek v jednom řádku. V okně Properties nastavíme v sekci Layout vlastnost RepeatColumns na 3 a vlastnost RepeatDirection na Horizontal.

Podíváme se nyní na šablony. Ze smart tagu zvolíme možnost Edit Templates. Šablona je jakousi mini-stránkou – je na ní text a různé ovládací prvky, které můžeme libovolně měnit. Například můžeme opravit titulek DatumZarazeni, vymyslet mu divoké formátování apod. Výpis data zařazení můžeme nahradit kalendářem. Smažeme prvek DatumZarazeniLabel a na jeho místo přetáhneme z panelu nástrojů prvek Calendar, který musíme navázat na data. Zobrazíme jeho smart tag a zvolíme Edit Databindings.

V zobrazeném dialogu vybereme vlastnost SelectedDate a navážeme ji (Bound to:) na pole DatumZarazeni, totéž provedeme s vlastností VisibleDate. Na kalendář můžeme též použít Auto Format. Editování šablony ukončíme ve smart tagu pomocí volby End Template Editing. Podobně jako jsme editovali šablonu pro položku, můžeme editovat i šablonu pro záhlaví, zápatí anebo oddělovač položek. Stránka bude po zobrazení vypadat zhruba takto:

Jistě, výsledek oku příliš nelahodí, ale jako ukázka flexibility prvku DataList je snad dostatečný.

FormView

Prvek FormView má podobný vztah k prvku DetailsView, jako má prvek DataList k prvku GridView – viz tabulka:

FormView je prvku DataList v mnohém podobný, ale slouží pro práci pouze s jedním datovým záznamem. Je rovněž flexibilnější a lze s ním dosáhnout mnohem více. Ze stránky OstatniPrvky.aspx můžeme smazat DataList a místo něj přetáhnout na stránku FormView, jako jeho zdroj dat vybereme opět ZdrojDatProdukty a povolíme stránkování pomocí Enable Paging.

Šablony se editují obdobně jako u prvku ListView, ale jejich typy jsou jiné. FormView obsahuje šablony pro hlavičku, patičku, stránkovací oblast, zobrazení položky, editaci položky, vkládání položky a pro prázdný datový zdroj. Jejich úpravami lze dosáhnout opravdu neomezených možností. Pokud provedeme obdobné úpravy jako u prvku ListView můžeme dosáhnout následujícího vzhledu stránky:

Repeater

Prvek Repeater má ze všech datových prvků nejmenší funkčnost. Nabízí vlastně jedinou funkci – opakování fragmentů stránky pro každý řádek dat. Prvek Repeater nelze upravovat v režimu Design a tento prvek se nejvíce blíží tradičnímu způsobu vytváření webových stránek pomocí HTML značek protkaných kousky kódu, proto se mu dále nebudeme věnovat.

Závěrem

V dnešním díle jsme se naučili základním způsobům práce s daty na webových stránkách – jejich zobrazování a editaci. V příštím díle se podíváme na některé pokročilejší postupy, zejména vytváření master-detail zobrazení (dokončíme stránku ProchazeniKatalogu.aspx), použití vazeb mezi stránkami s daty a práci s hierarchickými ovládacími prvky a daty.

Tradiční připomínka – pokud něco nebude fungovat jak by mělo, zkuste využít možnosti podpory zmíněné ve druhé části, zejména diskusní skupinu microsoft.public.cs.developer.

Připraveno ve spolupráci s firmou Microsoft