Filtrování hlavních záznamů / podrobností dvou ovládacích prvků DropDownList (VB)

Scott Mitchell

Stáhnout PDF

Tento kurz rozšiřuje relaci předlohy a podrobností o přidání třetí vrstvy pomocí dvou ovládacích prvků DropDownList k výběru požadovaných záznamů rodiče a prarodiče.

Úvod

V předchozím kurzu jsme prozkoumali, jak zobrazit jednoduchou sestavu předlohy a podrobností pomocí jediného rozevíracího seznamu naplněného kategoriemi a zobrazením GridView zobrazující produkty, které patří do vybrané kategorie. Tento model sestavy funguje dobře při zobrazení záznamů, které mají relaci 1:N a lze ho snadno rozšířit tak, aby fungoval ve scénářích, které zahrnují více relací 1:N. Například systém zadávání objednávek by měl tabulky, které odpovídají zákazníkům, objednávkám a řádkovým položkám objednávky. Daný zákazník může mít více objednávek, přičemž každá objednávka se skládá z více položek. Taková data mohou být uživateli prezentována se dvěma rozevíracími seznamy a objektem GridView. První rozevírací seznam bude obsahovat položku seznamu pro každého zákazníka v databázi, přičemž druhým obsahem jsou objednávky zadané vybraným zákazníkem. Objekt GridView by vypisoval řádkové položky z vybrané objednávky.

I když databáze Northwind obsahuje v Customerstabulkách , Ordersa kanonické informace o zákazních, objednávkách a Order Details objednávkách, tyto tabulky se v naší architektuře nezachytí. Přesto však můžeme ilustrovat pomocí dvou závislých rozevíracích seznamů. První rozevírací seznam zobrazí seznam kategorií a druhý seznam produktů, které patří do vybrané kategorie. A DetailsView pak zobrazí seznam podrobností o vybraném produktu.

Krok 1: Vytvoření a naplnění rozevíracího seznamu kategorií

Naším prvním cílem je přidat rozevírací seznam, který obsahuje kategorie. Tyto kroky byly podrobně prozkoumány v předchozím kurzu, ale jsou zde shrnuty pro úplnost.

MasterDetailsDetails.aspx Otevřete stránku ve Filtering složce, přidejte na ni rozevírací seznam, nastavte její ID vlastnost na Categoriesa potom klikněte na odkaz Konfigurovat zdroj dat v inteligentní značce. V Průvodci konfigurací zdroje dat zvolte, jestli chcete přidat nový zdroj dat.

Obrázek 1: Přidání nového zdroje dat pro rozevírací seznam (kliknutím zobrazíte obrázek v plné velikosti)

Novým zdrojem dat by měl být samozřejmě ObjectDataSource. Pojmenujte tento nový ObjectDataSource CategoriesDataSource a nechte ho vyvolat metodu CategoriesBLL objektu GetCategories() .

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

Obrázek 3: 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, které pole zdroje dat se má zobrazit v rozevíracím Categories seznamu a které z nich má být nakonfigurováno jako hodnota pro položku seznamu. CategoryName Nastavte pole jako zobrazení a CategoryID jako hodnotu pro každou položku seznamu.

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

V tuto chvíli máme ovládací prvek DropDownList (Categories), který se naplní záznamy z Categories tabulky. Když uživatel zvolí novou kategorii z rozevíracího seznamu, budeme chtít, aby se provedlo zpětné odeslání, aby bylo možné aktualizovat rozevírací seznam produktu, který vytvoříme v kroku 2. Proto zaškrtněte možnost Povolit AutoPostBack v categories inteligentní značce DropDownList.

Obrázek 5: Povolení funkce AutoPostBack pro Categories rozevírací seznam (kliknutím zobrazíte obrázek v plné velikosti)

Krok 2: Zobrazení produktů vybrané kategorie v druhém rozevíracím seznamu

Po dokončení rozevíracího Categories seznamu je naším dalším krokem zobrazení rozevíracího seznamu produktů patřících do vybrané kategorie. Chcete-li toho dosáhnout, přidejte na stránku další rozevírací seznam s názvem ProductsByCategory. Stejně jako u rozevíracího Categories seznamu vytvořte nový ObjectDataSource pro ProductsByCategory rozevírací seznam s názvem ProductsByCategoryDataSource.

Obrázek 6: Přidání nového zdroje dat pro ProductsByCategory rozevírací seznam (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 7: Vytvoření nového objektuDataSource s názvem ProductsByCategoryDataSource (kliknutím zobrazíte obrázek v plné velikosti)

Vzhledem k tomu, ProductsByCategory že DropDownList musí zobrazit pouze ty produkty, které patří do vybrané kategorie, nechte ObjectDataSource vyvolat metodu GetProductsByCategoryID(categoryID) z objektu ProductsBLL .

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

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

V posledním kroku průvodce musíme zadat hodnotu parametru categoryID . Tento parametr přiřaďte vybrané položce z rozevíracího Categories seznamu.

Obrázek 10: Načtení hodnoty parametru categoryID z rozevíracího Categories seznamu (kliknutím zobrazíte obrázek v plné velikosti)

Při konfiguraci ObjectDataSource zbývá jen určit, která pole zdroje dat se použijí pro zobrazení a hodnotu položek DropDownList. ProductName Zobrazte pole a jako hodnotu použijte ProductID pole.

Obrázek 11: Určení polí zdroje dat použitých pro vlastnosti a Value vlastnosti rozevíracího seznamu ListItemText (kliknutím zobrazíte obrázek v plné velikosti)

Po nakonfigurování ObjectDataSource a ProductsByCategory DropDownList se na naší stránce zobrazí dva rozevírací seznamy: první zobrazí seznam všech kategorií, zatímco druhý bude seznam produktů patřících do vybrané kategorie. Když uživatel vybere novou kategorii z prvního rozevíracího seznamu, vytvoří se postback a druhý DropDownList se vrátí zpět a zobrazí produkty, které patří do nově vybrané kategorie. Obrázky 12 a 13 se zobrazují MasterDetailsDetails.aspx v akci při prohlížení přes prohlížeč.

Obrázek 12: Při první návštěvě stránky je vybraná kategorie Nápoje (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 13: Volba jiné kategorie: Zobrazí produkty nové kategorie (kliknutím zobrazíte obrázek v plné velikosti).

productsByCategory V současné době rozevírací seznam při změně nezpůsobí postback. Budeme ale chtít, aby se po přidání zobrazení DetailsView zobrazily podrobnosti o vybraném produktu (krok 3) došlo k zpětnému odeslání. Proto zaškrtněte políčko Povolit AutoPostBack u productsByCategory inteligentní značky DropDownList.

Obrázek 14: Povolení funkce AutoPostBack pro productsByCategory rozevírací seznam (kliknutím zobrazíte obrázek v plné velikosti)

Krok 3: Zobrazení podrobností vybraného produktu pomocí zobrazení DetailsView

Posledním krokem je zobrazení podrobností o vybraném produktu v zobrazení DetailsView. Chcete-li toho dosáhnout, přidejte na stránku DetailsView, nastavte jeho ID vlastnost na ProductDetailsa vytvořte pro něj nový ObjectDataSource. Nakonfigurujte tento ObjectDataSource tak, aby načítá data z ProductsBLL metody třídy GetProductByProductID(productID) pomocí vybrané hodnoty ProductsByCategory DropDownList pro hodnotu parametru productID .

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

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

Obrázek 17: Načtení hodnoty parametru productID z rozevíracího ProductsByCategory seznamu (kliknutím zobrazíte obrázek v plné velikosti)

Můžete zvolit zobrazení libovolného z dostupných polí v zobrazení ProductDetails DetailsView. Rozhodl(a) jsem se odebrat ProductIDpole , SupplierIDa a přeuspořádal(a CategoryID ) a naformátoval(a) zbývající pole. Kromě toho jsem vymazal Vlastnosti a Width DetailsViewHeight, což umožňuje DetailsView rozšířit na šířku potřebnou k co nejlepšímu zobrazení dat místo omezení na zadanou velikost. Úplná revize se zobrazí níže:

<asp:DetailsView ID="ProductDetails" runat="server"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName"
          HeaderText="Category" ReadOnly="True"
          SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
           HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice"
           DataFormatString="{0:c}" HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
            HeaderText="UnitsInStock"
            SortExpression="Units In Stock" />
        <asp:BoundField DataField="UnitsOnOrder"
            HeaderText="UnitsOnOrder"
            SortExpression="Units On Order" />
        <asp:BoundField DataField="ReorderLevel"
            HeaderText="ReorderLevel" SortExpression="Reorder Level" />
        <asp:CheckBoxField DataField="Discontinued"
            HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Chvíli si stránku vyzkoušejte MasterDetailsDetails.aspx v prohlížeči. Na první pohled se může zdát, že všechno funguje podle potřeby, ale je tu drobný problém. Když zvolíte novou kategorii ProductsByCategory , rozevírací seznam se aktualizuje tak, aby zahrnoval produkty pro vybranou kategorii, ale ProductDetails v zobrazení DetailsView se dál zobrazují předchozí informace o produktu. Zobrazení DetailsView se aktualizuje při výběru jiného produktu pro vybranou kategorii. Kromě toho, pokud testujete dostatečně důkladně, zjistíte, že pokud neustále vybíráte nové kategorie (například v rozevíracím seznamu zvolíte Nápoje Categories , pak Koření a pak Cukrovinky), každý druhý výběr kategorie způsobí ProductDetails , že se detailsView aktualizuje.

Abychom tento problém konkretizovali, podívejme se na konkrétní příklad. Při první návštěvě stránky je vybraná kategorie Nápoje a související produkty se načtou do rozevíracího ProductsByCategory seznamu. Chai je vybraný produkt a jeho podrobnosti jsou zobrazeny v ProductDetails zobrazení DetailsView, jak je znázorněno na obrázku 18.

Obrázek 18: Podrobnosti o vybraném produktu se zobrazí v zobrazení DetailsView (kliknutím zobrazíte obrázek v plné velikosti).

Pokud změníte výběr kategorie z Nápoje na Condiments, dojde k zpětnému odeslání a ProductsByCategory rozevírací seznam se odpovídajícím způsobem aktualizuje, ale DetailsView stále zobrazuje podrobnosti o Chai.

Obrázek 19: Podrobnosti o dříve vybraném produktu se stále zobrazují (kliknutím zobrazíte obrázek v plné velikosti).

Výběrem nového produktu ze seznamu se zobrazení DetailsView aktualizuje podle očekávání. Pokud po změně produktu vyberete novou kategorii, zobrazení DetailsView se znovu neaktualizuje. Pokud jste ale místo výběru nového produktu vybrali novou kategorii, zobrazení DetailsView by se aktualizovalo. Co se tady děje na světě?

Problém je problém s načasováním v životním cyklu stránky. Pokaždé, když je stránka požadována, prochází při vykreslování několika kroky. V jednom z těchto kroků ovládací prvky ObjectDataSource zkontrolují, jestli se některé z jejich SelectParameters hodnot nezměnily. Pokud ano, datový web ovládací prvek svázaný s ObjectDataSource ví, že potřebuje aktualizovat své zobrazení. Když je například vybrána nová kategorie, ObjectDataSource zjistí, ProductsByCategoryDataSource že se hodnoty parametrů změnily, a ProductsByCategory DropDownList se znovu připojí a získá produkty pro vybranou kategorii.

Problém, který vznikne v této situaci, spočívá v tom, že bod v životním cyklu stránky, který ObjectDataSources kontroluje pro změněné parametry, nastane před změnou vazby přidružených datových webových ovládacích prvků. Proto při výběru nové kategorie ProductsByCategoryDataSource ObjectDataSource zjistí změnu v hodnotě svého parametru. ObjectDataSource, který ProductDetails používá DetailsView, ale žádné takové změny nezaznamená, protože ProductsByCategory rozevírací seznam musí být ještě znovu doskok. Později v průběhu životního cyklu ProductsByCategory dropDownList znovu přidružuje svůj ObjectDataSource a vezme produkty pro nově vybranou kategorii. ProductsByCategory Zatímco hodnota DropDownList se změnila, ProductDetails ObjectDataSource DetailsView již provedl kontrolu hodnoty parametru, a proto DetailsView zobrazí předchozí výsledky. Tato interakce je znázorněna na obrázku 20.

Obrázek 20: Hodnota ProductsByCategory DropDownList se změní po kontrole změn ObjectDataSource objektu ProductDetails DetailsView (kliknutím zobrazíte obrázek v plné velikosti)

Abychom tento problém odstranili, musíme explicitně znovu vytvořit vazbu ProductDetails DetailsView po vázání rozevíracího ProductsByCategory seznamu. Toho můžeme dosáhnout voláním ProductDetails metody DetailsView DataBind() při ProductsByCategory spuštění události DropDownList DataBound . Přidejte následující kód obslužné rutiny události do MasterDetailsDetails.aspx třídy kódu na pozadí stránky (projděte si téma "Programově nastavení hodnot parametrů ObjectDataSource" pro diskuzi o tom, jak přidat obslužnou rutinu události):

Protected Sub ProductsByCategory_DataBound(sender As Object, e As EventArgs) _
    Handles ProductsByCategory.DataBound
        ProductDetails.DataBind()
End Sub

Po přidání tohoto explicitního ProductDetails volání metody DetailsView DataBind() kurz funguje podle očekávání. Obrázek 21 ukazuje, jak tato změna vyřešila náš dřívější problém.

Obrázek 21: Zobrazení ProductDetails DetailsView se explicitně aktualizuje při ProductsByCategory vyvolání události rozevíracího DataBound seznamu (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

DropDownList slouží jako ideální prvek uživatelského rozhraní pro hlavní a podrobné sestavy, kde existuje vztah 1:N mezi hlavním a podrobným záznamem. V předchozím kurzu jsme viděli, jak pomocí jednoho rozevíracího seznamu filtrovat produkty zobrazené podle vybrané kategorie. V tomto kurzu jsme nahradili GridView produktů rozevíracím seznamem a použili jsme DetailsView k zobrazení podrobností o vybraném produktu. Koncepty probírané v tomto kurzu lze snadno rozšířit na datové modely zahrnující více relací 1:N, jako jsou zákazníci, objednávky a položky objednávek. Obecně můžete vždy přidat rozevírací seznam pro každou entitu "1" v relacích 1:N.

Šť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 .

Zvláštní poděkování

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Hlavním recenzentem pro tento kurz byl Hilton Giesenow. Chcete si projít moje nadcházející články na WEBU MSDN? Pokud ano, dejte mi čáru na mitchell@4GuysFromRolla.comadresu .

PředchozíDalší