Filtrování předlohy a podrobností pomocí ovládacího prvku DropDownList a GridView (VB)

Scott Mitchell

Stáhnout PDF

V tomto kurzu se dozvíte, jak zobrazit hlavní záznamy v ovládacím prvku DropDownList a podrobnosti o vybrané položce seznamu v GridView.

Úvod

Běžným typem sestavy je hlavní/podrobná sestava, ve které sestava začíná zobrazením určité sady "hlavních" záznamů. Uživatel pak může přejít k podrobnostem jednoho z hlavních záznamů a zobrazit tak podrobnosti o hlavním záznamu. Hlavní a podrobné sestavy jsou ideální volbou pro vizualizaci relací 1:N, například sestavy zobrazující všechny kategorie a následné umožnění uživateli vybrat určitou kategorii a zobrazit přidružené produkty. Kromě toho jsou hlavní a podrobné sestavy užitečné pro zobrazení podrobných informací z obzvláště "širokých" tabulek (těch, které mají hodně sloupců). Například úroveň "hlavní" sestavy hlavní/podrobná sestava může zobrazit pouze název produktu a jednotkovou cenu produktů v databázi a procházením podrobností o konkrétním produktu se zobrazí další pole produktů (kategorie, dodavatel, množství na jednotku atd.).

Existuje mnoho způsobů, jak lze hlavní nebo podrobnou sestavu implementovat. V tomto a dalších třech kurzech se podíváme na celou řadu hlavních a podrobných sestav. V tomto kurzu se dozvíte, jak zobrazit hlavní záznamy v ovládacím prvku DropDownList a podrobnosti o vybrané položce seznamu v GridView. Konkrétně hlavní/podrobná sestava tohoto kurzu obsahuje seznam kategorií a informací o produktech.

Krok 1: Zobrazení kategorií v rozevíracím seznamu

Naše hlavní/podrobná sestava zobrazí seznam kategorií v rozevíracím seznamu, přičemž produkty vybrané položky seznamu se zobrazí dále na stránce v zobrazení GridView. Prvním úkolem, který je před námi, je pak zobrazení kategorií v rozevíracím seznamu. FilterByDropDownList.aspx Otevřete stránku ve Filtering složce, přetáhněte rozevírací seznam z panelu nástrojů do návrháře stránky a nastavte její ID vlastnost na Categories. Potom klikněte na odkaz Zvolit zdroj dat z inteligentní značky DropDownList. Zobrazí se průvodce konfigurací zdroje dat.

Obrázek 1: Určení zdroje dat rozevíracího seznamu (kliknutím zobrazíte obrázek v plné velikosti)

Zvolte přidat nový ObjectDataSource s názvem CategoriesDataSource , který vyvolá metodu CategoriesBLLGetCategories() třídy.

Obrázek 2: Přidání nového objektuDataSource s názvem CategoriesDataSource (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 3: Volba použití CategoriesBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 4: Konfigurace objektu ObjectDataSource pro použití GetCategories() metody (kliknutím zobrazíte obrázek v plné velikosti)

Po konfiguraci ObjectDataSource stále musíme určit, jaké pole zdroje dat se má zobrazit v rozevíracím seznamu a které z nich má být přidruženo jako hodnota pro položku seznamu. Pole musí CategoryName být zobrazené a CategoryID jako hodnota pro každou položku seznamu.

Obrázek 5: Nechte rozevírací seznam zobrazit CategoryName pole a použít CategoryID jako hodnotu (kliknutím zobrazíte obrázek v plné velikosti).

V tomto okamžiku máme ovládací prvek DropDownList, který se naplní záznamy z Categories tabulky (to vše za šest sekund). Obrázek 6 ukazuje náš dosavadní pokrok při prohlížení přes prohlížeč.

Obrázek 6: Drop-Down Seznamy aktuálních kategorií (kliknutím zobrazíte obrázek v plné velikosti)

Krok 2: Přidání zobrazení GridView produktů

Posledním krokem v naší hlavní/podrobné sestavě je výpis produktů přidružených k vybrané kategorii. Chcete-li toho dosáhnout, přidejte na stránku Objekt GridView a vytvořte nový ObjectDataSource s názvem productsDataSource. Nechte ovládací prvek vychytát productsDataSource data z ProductsBLL metody třídy GetProductsByCategoryID(categoryID) .

Obrázek 7: Vyberte metodu GetProductsByCategoryID(categoryID) (kliknutím zobrazíte obrázek v plné velikosti)

Po výběru této metody nás průvodce ObjectDataSource vyzve k zadání hodnoty parametru metody categoryID . Pokud chcete použít hodnotu vybrané categories položky DropDownList, nastavte zdroj parametru na Control a ControlID na Categories.

Obrázek 8: Nastavení parametru categoryID na hodnotu rozevíracího Categories seznamu (kliknutím zobrazíte obrázek v plné velikosti)

Udělejte si chvilku a podívejte se na náš postup v prohlížeči. Při první návštěvě stránky se zobrazí tyto produkty do vybrané kategorie (Nápoje) (jak je znázorněno na obrázku 9), ale změnou rozevíracího seznamu se data neaktualizuje. Důvodem je to, že musí dojít k zpětnému odeslání, aby se objekt GridView aktualizoval. K tomu máme dvě možnosti (žádná z nich nevyžaduje psaní kódu):

• Nastavte vlastnost AutoPostBack kategorie DropDownListna Hodnotu True. (Toho dosáhnete zaškrtnutím možnosti Povolit AutoPostBack v inteligentní značce DropDownList.) Tím se aktivuje postback pokaždé, když uživatel změní vybranou položku DropDownList. Proto, když uživatel vybere novou kategorii z Rozevírací seznam bude postback a GridView bude aktualizován o produkty pro nově vybranou kategorii. (Toto je přístup, který jsem použil v tomto kurzu.)
• Přidejte ovládací prvek Button Web vedle rozevíracího seznamu. Nastavte jeho Text vlastnost na Refresh nebo něco podobného. Při tomto přístupu bude uživatel muset vybrat novou kategorii a kliknout na tlačítko. Kliknutí na tlačítko způsobí postback a aktualizace GridView tak, aby seznam produktů vybrané kategorie.

Hlavní a podrobnou zprávu v akci znázorňují obrázky 9 a 10.

Obrázek 9: Při první návštěvě stránky se zobrazí nápojové výrobky (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 10: Výběr nového produktu (produkce) automaticky způsobí postback, aktualizace GridView (kliknutím zobrazíte obrázek v plné velikosti)

Přidání položky seznamu "-- Zvolte kategorii --"

Při první návštěvě FilterByDropDownList.aspx stránky je ve výchozím nastavení vybrána první položka seznamu kategorií DropDownList (Nápoje), která zobrazuje nápojové produkty v GridView. Místo toho, aby se zobrazovaly produkty první kategorie, můžeme místo toho chtít vybrat položku Rozevírací seznam, která říká něco jako "-- Zvolte kategorii --".

Pokud chcete přidat novou položku seznamu do rozevíracího seznamu, přejděte na okno Vlastnosti a klikněte na tři tečky ve Items vlastnosti. Přidejte novou položku seznamu s Text "-- Zvolte kategorii --" a Value-1.

Obrázek 11: Přidání položky seznamu –- Zvolte kategorii -- Položka seznamu (kliknutím zobrazíte obrázek v plné velikosti)

Případně můžete přidat položku seznamu přidáním následujícího kódu do rozevíracího seznamu:

<asp:DropDownList ID="categories" runat="server"
    AutoPostBack="True" DataSourceID="categoriesDataSource"
    DataTextField="CategoryName" DataValueField="CategoryID"
    EnableViewState="False">
    <asp:ListItem Value="-1">
       -- Choose a Category --
    </asp:ListItem>
</asp:DropDownList>

Kromě toho musíme nastavit ovládací prvek AppendDataBoundItems DropDownList na Hodnotu True, protože když jsou kategorie vázány na DropDownList z ObjectDataSource, přepíšou všechny ručně přidané položky seznamu, pokud AppendDataBoundItems není pravda.

Obrázek 12: Nastavení AppendDataBoundItems vlastnosti na hodnotu True

Po těchto změnách je při první návštěvě stránky vybraná možnost "-- Zvolit kategorii --" a nezobrazí se žádné produkty.

Obrázek 13: Na počátečním načtení stránky se nezobrazují žádné produkty (kliknutím zobrazíte obrázek v plné velikosti)

Důvodem, proč se nezobrazují žádné produkty, když je vybrána položka seznamu "-- Zvolit kategorii --", je, že její hodnota je -1 a v databázi nejsou žádné produkty s hodnotou CategoryID-1. Pokud se jedná o chování, které chcete, pak jste v tomto okamžiku hotovi! Pokud ale chcete zobrazit všechny kategorie, když je vybraná položka seznamu "-- Zvolte kategorii --", vraťte se ke ProductsBLL třídě a přizpůsobte metodu GetProductsByCategoryID(categoryID) tak, aby v případě, že je předaný parametr menší categoryID než nula, vyvolá GetProducts() metodu:

Public Function GetProductsByCategoryID(categoryID As Integer) _
    As Northwind.ProductsDataTable
    If categoryID < 0 Then
        Return GetProducts()
    Else
        Return Adapter.GetProductsByCategoryID(categoryID)
    End If
End Function

Zde použitá technika je podobná přístupu, který jsme použili k zobrazení všech dodavatelů zpět v kurzu deklarativní parametry, i když v tomto příkladu používáme hodnotu -1 , která označuje, že by se měly načíst všechny záznamy, nikoli .Nothing Důvodem je to, že categoryID parametr GetProductsByCategoryID(categoryID) metody očekává jako celočíselnou hodnotu předanou v, zatímco v kurzu deklarativní parametry jsme předávali vstupní parametr řetězce.

Obrázek 14 ukazuje snímek FilterByDropDownList.aspx obrazovky, kdy je vybraná možnost -- Zvolit kategorii --. Tady se ve výchozím nastavení zobrazují všechny produkty a uživatel může zobrazení zúžit výběrem konkrétní kategorie.

Obrázek 14: Všechny produkty jsou nyní uvedeny ve výchozím nastavení (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

Při zobrazení hierarchicky souvisejících dat často pomáhá prezentovat data pomocí hlavních a podrobných sestav, ze kterých může uživatel začít procházet data z horní části hierarchie a přejít k podrobnostem. V tomto kurzu jsme prozkoumali vytvoření jednoduché hlavní/podrobné sestavy zobrazující produkty vybrané kategorie. Toho bylo dosaženo pomocí rozevíracího seznamu pro seznam kategorií a objektu GridView pro produkty, které patří do vybrané kategorie.

V dalším kurzu provedeme rozhraní DropDownList o jeden krok dál pomocí dvou DropDownLists.

Šťastné programování!

O autorovi

Scott Mitchell, autor sedmi knih o ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, školitel a spisovatel. Jeho nejnovější kniha je Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Můžete ho najít na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím jeho blogu, který najdete na http://ScottOnWriting.NETadrese .

PředchozíDalší