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í

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

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 36

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 141

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

** AMD uvedlo první tři procesory Ryzen 7 ** Všechny budou pracovat s osmi jádry a šestnácti vlákny ** Na pulty obchodů se dostanou už za týden

22.  2.  2017 | Stanislav Janů | 132

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

** Evropští úředníci chtějí, aby byly Desítky transparentnější ** Microsoft od jara skutečně chystá změny ** Ochráncům soukromí to ale nestačí

21.  2.  2017 | Jakub Čížek | 218

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

** Microsoft do svých telefonů integroval desktopové prostředí ** Moc to ale nevyšlo, chyběl pořádný výkon ** Teď to zkoušejí ex-googleři s Remix Singularity

23.  2.  2017 | Jakub Čížek | 74


Aktuální číslo časopisu Computer

Supertéma o počítačové bezpečnosti

AMD Ryzen přichází

Velké testy kinoprojektorů a levných špuntových sluchátek

Příslušenství do USB-C

reklama
reklama