reklama

Začínáme s ASP.NET 2.0 – 7. díl: práce s daty v ASP.NET II.

V sedmém díle budeme pokračovat v práci s daty na webových stránkách. Vyzkoušíme si některé pokročilejší postupy, a to master-detail zobrazení, omezení zobrazovaných dat s použitím vazby mezi stránkami a práci s hierarchickými ovládacími prvky a daty.

Master-detail zobrazení na stránce

Master-detail je zaběhnutý termín pro princip běžně používaný při vytváření uživatelského rozhraní. Jeden ovládací prvek se nazývá master a slouží k výběru určité hodnoty. Na základě tohoto výběru se potom v jiném prvku (zvaném detail) zobrazí hodnoty vztahující se k vybrané položce. V našem příkladě provedeme úpravu stránky ProchazeniKatalogu.aspx tak, aby se při výběru kategorie v rozbalovacím seznamu (master), objevily v datové mřížce (detail) pouze produkty, které do této kategorie patří.

Stačí jeden úkon...

Vytváření vazeb master-detail je v ASP.NET 2.0 překvapivě jednoduché, postačí nám k tomu jediný úkon. Tímto úkonem je úprava datového zdroje pro prvek detail tak, aby tento prvek nezobrazoval všechny hodnoty, ale pouze hodnoty vyfiltrované na základě výběrové podmínky (příslušnost do určité kategorie).

Provedení je jednoduché. Navolíme myší datový zdroj prvku detail ZdrojDatProdukty na stránce ProchazeniKatalogu.aspx vytvořené v minulém díle a zvolíme možnost Configure Data Source... První stránce průvodce přejdeme a na druhé stránce specifikujeme výběrovou podmínku stiskem tlačítka WHERE... Filtrovaný sloupeček bude IDKategorie, operátor bude =, zdroj hodnoty, podle které se filtruje bude jiný ovládací prvek (Control), konkrétně rozbalovací seznam jménem DDLKategorie – jako na následujícím obrázku:

Klepněte pro větší obrázek

Nezapomeneme stisknout tlačítko Add, tento dialog je trochu matoucí a pouhé stisknutí OK podmínku nepřidá! Potvrdíme OK a přejdeme na další stránku průvodce, kde si můžeme prohlédnout nově vygenerovaný dotaz a vyzkoušet jeho funkci (zkoušejte hodnotu IDKategorie buď 1, 2 nebo 3).

Pokud jste si již nedočkavě stránku vyzkoušeli, budete zklamáni – zobrazuje seznam produktů z první kategorie (v mém případě Drogerie), ale při výběru jiné kategorie se seznam produktů nepřekreslí. Důvod je jednoduchý a pro vysvětlení můžete znovu nahlédnout do čtvrtého dílu.

Rozbalovací seznam DDLKategorie nemá standardně zapnuté vyvolání akce PostBack, tudíž se při výběru hodnoty stránka nepřekresluje a seznam produktů neaktualizuje. Náprava je snadná, rozbalovací seznam navolíme a v okně Properties nastavíme jeho vlastnost AutoPostBack na true (případně zobrazit jeho smart tag a zaškrtnout Enable AutoPostBack). Nyní si již můžeme stránku zobrazit v prohlížeči a vyzkoušet její funkci – při výběru kategorie se v mřížce zobrazí pouze produkty v příslušné kategorii.

Omezení zobrazovaných záznamů parametrem

V předchozím příkladě jsme provazovali datové zdroje na jedné stránce. Často se setkáváme s požadavkem provázat následující stránky mezi sebou, což bude naším úkolem i v této sekci. Cílem bude upravit stránku ProchazeniKatalogu.aspx tak, aby se při kliknutí na produkt zobrazený v datové mřížce zobrazila v novém okně prohlížeče stránka Produkt.aspx, ale právě s tímto jediným vybraným produktem.

Jediným rozhodnutím je, jak přenést číslo vybraného produktu mezi oběma stránkami. Z možných řešení se nejčastěji používá přenos přímo v hyperlinku pomocí tzv. query string řetězce, např. pro produktu číslo 10 pak může být odkaz Produkt.aspx?Cislo=10.

Úprava prvku generujícího odkaz

Začneme úpravou stránky ProchazeniKatalogu.aspx, kde do GridView jménem GVProdukty přidáme nový sloupeček s textem Detaily..., který bude obsahovat odkaz na stránku s detailem produktu a příslušným číslem např. Produkt.aspx?Cislo=10.

Navolíme tedy GVProdukty, zobrazíme si smart tag a vybereme možnost Edit Columns... V horním okně Available fields... vybereme typ HyperLinkField a stiskneme Add. Přidá se nový sloupec, jehož vlastnosti musíme upravit. Jako popisek (Text) vepíšeme „Detaily...“. Jako Target zadáme _blank, čímž docílíme otevření odkazu v novém okně. Jako DataNavigateUrlField doplníme pole, které se bude v hyperlinku přenášet – v našem případě tedy IDProdukt.

A konečně, místo DataNavigateUrlFormat vepíšeme formátovací řetězec produkt.aspx?Cislo={0} – za nulu ve složených závorkách se dosadí první datové pole uvedené v DataNavigateUrlField (IDProdukt, čísluje se od 0).Pokud jsme vše provedli správně, po uložení a zobrazení stránky byste měli vidět následující (povšimněte si dvou červených elips):

Klepněte pro větší obrázek

Při přemístění kurzoru myši nad nový sloupeček Detaily... se dole v prohlížeči zobrazí odkaz s příslušným číslem produktu, které je pro každý řádek jiné. Při kliknutí na odkaz by se mělo otevřít nové okno se správnou adresou včetně parametru v adresové řádce prohlížeče, ovšem zatím s prvním produktem (v závislosti na setřídění) namísto námi vybraného produktu.

Úprava stránky zobrazující výsledek

Druhým krokem bude filtrování datového zdroje ZdrojDatProdukty na stránce Produkt.aspx tak, aby zobrazoval pouze vybraný záznam produktu.

Postup je velmi podobný jako v předchozí úloze. Navolíme myší zmíněný datový zdroj a z kontextové nabídky nebo smart tagu zvolíme možnost Configure Data Source... První stránce průvodce přejdeme a na druhé stránce specifikujeme výběrovou podmínku stiskem tlačítka WHERE... Filtrovaný sloupeček bude IDProdukt, operátor bude =, zdroj hodnoty, podle které se filtruje bude URL požadavku (QueryString) a jako QueryString field zvolíme jméno parametru v adresní řádce, tedy Cislo (viz obrázek).

Klepněte pro větší obrázek

Opět nezapomeneme stisknout tlačítko Add, potvrdíme OK a přejdeme na další stránku průvodce, kde si můžeme prohlédnout nově vygenerovaný dotaz a vyzkoušet jeho funkci pro některá zadaná platná čísla produktu.

Pokud si nyní znovu zobrazíme stránku ProchazeniKatalogu.aspx a pokusíme se zobrazit detail některého z produktů, měli by se nám otevřít nové okno, ale nyní již s detailem správného produktu. Puntičkáři si ještě mohou nechat zobrazit smart tag prvku DetailsView se jménem DVProdukty a zrušit možnosti Enable Paging a Enable Inserting.

Práce s hierarchickými daty

Dosud jsme se zabývali pouze plochými nebo chcete-li pravoúhlými daty – byla uspořádána do řádků a sloupečků. V praxi se však často setkáme se stromovým uspořádáním, např. při hledání v dokumentaci nebo v katalozích produktů, kde jsou produkty ve skupinách, podskupinách a někdy i podpodskupinách. Ve webových aplikacích se často setkáváme s hierarchickou navigací pomocí mapy webu, zobrazené jako rozbalovací strom nebo hierarchická nabídka menu.

Pro tyto účely můžeme v ASP.NET 2.0 použít datový zdroj typu XmlDataSource, kde jako zdroj dat může sloužit libovolný XML soubor, z nějž provádíme výběr pomocí XPath výrazů. Druhou možností je použít SiteMapDataSource, kde má XML soubor s hierarchickými daty pevně danou strukturu – není tedy tak flexibilní, ale pro začátečníky je vhodnější, neboť se s ním snadněji pracuje.

Vytvoření mapy webu

První úlohou je vytvoření XML souboru s mapou webu. Pokud si zvolíme možnost Add New Item... z kontextové nabídky našeho webového projektu, je jednou z možností položka Site Map jménem Web.sitemap. Automaticky se nám otevře editor XML souboru, který podle pevného schématu kontroluje správnost našeho XML dokumentu. Práce s XML dokumentem předpokládá alespoň minimální znalost XML, výuka XML není součástí našeho mini kurzu. XML soubor upravte na následující text (samozřejmě můžete text též zkopírovat):

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="
http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="default.aspx" title="Klepněte pro větší obrázek"  description="Firma X je nejlepší na světě">
        <siteMapNode url="" title="Klepněte pro větší obrázek"  description="">
          <siteMapNode url="ProchazeniKatalogu.aspx" title="Klepněte pro větší obrázek" description="Projděte si katalog"/>
          <siteMapNode url="Produkt.aspx" title="Klepněte pro větší obrázek" description="Do posledního detailu..."/>
        </siteMapNode>
      <siteMapNode url="" title="Klepněte pro větší obrázek"  description="Technologická dema">
        <siteMapNode url="UkazkaNavigace.aspx" title="Klepněte pro větší obrázek" description="Navigace na webu"/>
        <siteMapNode url="Ukazka2.aspx" title="Klepněte pro větší obrázek" description="Podívejte se na ukázku 2"/>
        <siteMapNode url="Ukazka3.aspx" title="Klepněte pro větší obrázek" description="Podívejte se na ukázku 3"/>
        <siteMapNode url="Ukazka4.aspx" title="Klepněte pro větší obrázek" description="Podívejte se na ukázku 4"/>
      </siteMapNode>
    </siteMapNode>
</siteMap>

Každý prvek siteMapNode v XML dokumentu má několik atributů – url je nepovinné a určuje adresu stránky, title je povinný (silně doporučený) titulek a description je nepovinný doplňující popis, který se zobrazí krátkým podržením kurzoru myši nad příslušným uzlem. Soubor uložte a zavřete. Tím máme připravenou stromovou strukturu dat pro naše ovládací prvky.

Použití hierarchických navigačních prvků

Nyní si můžeme vyzkoušet ovládací prvky Menu, TreeView a SiteMapPath, které všechny pracují právě s hierarchickými daty. Založíme si novou webovou stránku a nazveme ji UkazkaNavigace.aspx. Na stránku přetáhneme z panelu nástrojů zdroj dat SiteMapDataSource a přejmenujeme ho nastavením vlastnosti (ID) z původního SiteMapDataSource1 na ZdrojDatNavigace. Datový zdroj není třeba konfigurovat, neboť bude automaticky používat soubor Web.sitemap.

Z panelu nástrojů na plochu přetáhneme ovládací prvky SiteMapPath, Menu a TreeView, které pro přehlednost oddělíme prázdnými řádky. U prvku Menu1 a TreeView1 si postupně zobrazíme smart tag a nastavíme u nich zdroj dat (Choose Data Source:) na ZdrojDatNavigace. Tím je vše hotové, stránku si můžeme zobrazit v prohlížeči a měla by vypadat o něco hůře než následující obrázek:

Klepněte pro větší obrázek

Prvek SiteMapPath1 ukazuje polohu současné adresy ve stromu položek. Vyzkoušíme si zbylé dva prvky – nabídku Menu1 a rozbalovací strom TreeView1:

  • jednotlivé uzly se rozbalují a sbalují
  • položky s atributem url fungují jako odkazy (vyzkoušejte volbu položky Procházení katalogu)
  • položka, u níž url odpovídá současné adrese (Ukázka navigace), je barevně odlišena
  • krátkým podržením kurzoru myši nad uzlem zobrazíte popisný text description jako tzv. tooltip

Jistě jste si povšimli, že na obrázku jsou jednotlivé prvky vizuálně vylepšené. Toho dosáhneme experimentováním s úpravou vlastností jednotlivých prvků. Pomocí funkce AutoFormat z nabídky smart tag lze rychle vylepšit jejich vzhled. U prvku Menu1 je zajímavá volba Views ve smart tagu (možnosti jsou Static a lepší Dynamic), vlastnost StaticDisplayLevels pro počáteční zobrazení statických úrovní a řada dalších zajímavých vlastností ovlivňujících vzhled. U prvku TreeView1 jsou příklady zajímavých vizuálních vlastností ExpandDepth anebo ShowCheckBoxes.

Závěrem

Dnešní kapitolou jsme ukončili práci s daty. Příště se budeme věnovat jednotnému vzhledu aplikace. Přestože ASP.NET nám nijak nepomůže s našim estetickým cítěním, umožní nám dosáhnout jednotného vzhledu stránek pomocí témat (skinování) a používání tzv. master stránek, které můžeme například vhodně zkombinovat s dnes použitými navigačními prvky.

A opět 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.

Témata článku: Software, Prohlížeče, Programování, Detail, Master, Enable, Strom

2 komentáře

Nejnovější komentáře

  • jab 18. 5. 2006 19:33:45


  • Vebloud, Vebloud 11. 11. 2005 15:59:18
    Zkouším naplnit treeView z databáze, pomocí Crystak Reports, ale...
reklama
Určitě si přečtěte

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

UPC překopli páteřní kabel. V Brně i druhý den nejede internet ani kabelovka

** V Brně byl velký výpadek služeb UPC ** Důvodem je překopnutý páteřní kabel ** V některých lokalitách služby stále nefungují

5.  12.  2016 | Jakub Čížek | 102

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

17 expertek Microsoftu předpovědělo rok 2027. Splní se alespoň něco?

** Zmizí klasické vyhledávače ** Budeme programovat buňky ** Kvantové počítače překonají šifry

6.  12.  2016 | Jakub Čížek | 36

11 tipů na dobrý stolní počítač: od základu po herní mašiny

11 tipů na dobrý stolní počítač: od základu po herní mašiny

** Postavte si stolní počítač! Máme pro vás 11 vzorových sestav s rozpisem komponent ** Většina tipů cílí na hráče, věnujeme se ale i základnímu PC a počítačům na střih videa ** Nadělte si nový počítač třeba pod stromeček

5.  12.  2016 | Adam Kahánek | 74

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

Nejlepší notebooky nad 20 tisíc: poradíme, které teď chcete

** V notebooku s cenou nad 20 tisíc nesmí chybět kvalitní displej a rychlé úložiště ** Za dalších deset tisíc můžete dostat navíc styl nebo výkonnější komponenty ** Vybírat můžete z různých velikostí i konstrukcí

8.  12.  2016 | Stanislav Janů | 82


reklama