Filtrování hlavních záznamů a podrobností pomocí rozevíracího seznamu a datového seznamu (VB)

Scott Mitchell

Stáhnout PDF

V tomto kurzu vidíme, jak zobrazit hlavní/podrobné sestavy na jedné webové stránce pomocí DropDownLists k zobrazení "master" záznamů a DataList k zobrazení "podrobností".

Úvod

Hlavní/podrobná sestava, kterou jsme poprvé vytvořili pomocí GridView v dřívějším kurzu Filtrování předlohy/podrobností pomocí rozevíracího seznamu , začíná zobrazením některých sad záznamů master. Uživatel pak může přejít k podrobnostem jednoho z hlavních záznamů, čímž zobrazí "podrobnosti" daného hlavního záznamu. Sestavy předlohy a podrobností jsou ideální volbou pro vizualizaci relací 1:N a pro zobrazení podrobných informací z zejména "širokých" tabulek (těch, které mají hodně sloupců). Prozkoumali jsme, jak implementovat hlavní/podrobné sestavy pomocí ovládacích prvků GridView a DetailsView v předchozích kurzech. V tomto kurzu a dalších dvou těchto konceptech znovu prozkoumáme, ale místo toho se zaměříme na použití ovládacích prvků DataList a Repeater.

V tomto kurzu se podíváme na použití rozevíracího seznamu, který bude obsahovat "hlavní" záznamy se záznamy "details" zobrazenými v seznamu DataList.

Krok 1: Přidání webových stránek předlohy/podrobností kurzu

Než začneme s tímto kurzem, zabereme chvilku, než přidáme složku a ASP.NET stránky, které budeme potřebovat pro tento kurz, a další dvě práce se sestavami předlohy a podrobností pomocí ovládacích prvků DataList a Repeater. Začněte vytvořením nové složky v projektu s názvem DataListRepeaterFiltering. Dále přidejte do této složky následující pět ASP.NET stránek, přičemž všechny z nich jsou nakonfigurované tak, aby používaly stránku Site.masterpředlohy:

• Default.aspx
• FilterByDropDownList.aspx
• CategoryListMaster.aspx
• ProductsForCategoryDetails.aspx
• CategoriesAndProducts.aspx

Obrázek 1: Vytvoření DataListRepeaterFiltering složky a přidání ASP.NET stránek kurzu

Dále otevřete Default.aspx stránku a přetáhněte SectionLevelTutorialListing.ascx uživatelský ovládací prvek ze UserControls složky na návrhovou plochu. Tento uživatelský ovládací prvek, který jsme vytvořili v kurzu Stránky předlohy a Navigace na webu, vytvoří výčet mapy webu a zobrazí kurzy z aktuálního oddílu v seznamu s odrážkami.

Obrázek 2: Přidání SectionLevelTutorialListing.ascx uživatelského ovládacího prvku do Default.aspx (kliknutím zobrazíte obrázek v plné velikosti)

Aby se v seznamu s odrážkami zobrazily kurzy předlohy a podrobností, které budeme vytvářet, musíme je přidat do mapy webu. Web.sitemap Otevřete soubor a za kód mapového uzlu mapy webu DataList a Repeater přidejte následující kód:

<siteMapNode
    title="Master/Detail Reports with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterFiltering/Default.aspx">
 
    <siteMapNode
        title="Filter by Drop-Down List"
        description="Filter results using a drop-down list."
        url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
 
    <siteMapNode
        title="Master/Detail Across Two Pages"
        description="Master records on one page, detail records on another."
        url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
 
    <siteMapNode
        title="Maser/Detail on One Page"
        description="Master records in the left column, details on the right,
                     both on the same page."
        url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
 
</siteMapNode>

Obrázek 3: Aktualizace mapy webu tak, aby zahrnovala nové stránky ASP.NET

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

Naše hlavní/podrobná sestava zobrazí seznam kategorií v rozevíracím seznamu s produkty vybrané položky seznamu, které jsou zobrazeny dále na stránce v seznamu DataList. První úkol před námi, pak je mít kategorie zobrazené v rozevíracím seznamu. Začněte otevřením FilterByDropDownList.aspx stránky ve DataListRepeaterFiltering složce a přetažením rozevíracího seznamu z panelu nástrojů do návrháře stránky. Dále nastavte vlastnost DropDownList ID na Categorieshodnotu . Klikněte na odkaz Zvolit zdroj dat z inteligentní značky DropDownList a vytvořte nový ObjectDataSource s názvem CategoriesDataSource.

Obrázek 4: Přidání nového objektu ObjectDataSource s názvem CategoriesDataSource (kliknutím zobrazíte obrázek s plnou velikostí)

Nakonfigurujte nový ObjectDataSource tak, aby vyvolal metodu CategoriesBLL GetCategories() třídy. Po dokončení konfigurace ObjectDataSource musíme stále zadat, jaké pole zdroje dat by se mělo zobrazit v rozevíracím seznamu a které pole by mělo být přidruženo jako hodnota pro každou položku seznamu. CategoryName Mít pole jako zobrazení a CategoryID jako hodnotu pro každou položku seznamu.

Obrázek 5: Zobrazení rozevíracího seznamu pole CategoryName a použití CategoryID jako hodnoty (kliknutím zobrazíte obrázek v plné velikosti)

V tuto chvíli máme ovládací prvek DropDownList naplněný záznamy z Categories tabulky (to vše bylo dosaženo asi za šest sekund). Obrázek 6 ukazuje náš postup, který jsme zatím viděli v prohlížeči.

Obrázek 6: Rozevírací seznam obsahuje aktuální kategorie (kliknutím zobrazíte obrázek v plné velikosti).

Krok 2: Přidání datového seznamu 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 dataList na stránku a vytvořte nový ObjectDataSource s názvem ProductsByCategoryDataSource. Ovládací prvek načte ProductsByCategoryDataSource data z ProductsBLL metody třídy GetProductsByCategoryID(categoryID) . Vzhledem k tomu, že tato hlavní/podrobná sestava je určená jen pro čtení, zvolte na kartách INSERT, UPDATE a DELETE možnost (Žádné).

Obrázek 7: Výběr GetProductsByCategoryID(categoryID) metody (kliknutím zobrazíte obrázek v plné velikosti)

Po kliknutí na Další nás průvodce ObjectDataSource vyzve k zadání zdroje hodnoty parametru GetProductsByCategoryID(categoryID) categoryID metody. Chcete-li použít hodnotu vybrané categories položky DropDownList nastavit 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 s plnou velikostí)

Po dokončení průvodce konfigurací zdroje dat sada Visual Studio automaticky vygeneruje ItemTemplate seznam dat, který zobrazí název a hodnotu každého datového pole. Pojďme dataList vylepšit tak, aby místo toho používal ItemTemplate pouze název produktu, kategorii, dodavatele, množství na jednotku a cenu spolu s SeparatorTemplate tím, že vloží <hr> prvek mezi každou položku. Budu používat ItemTemplate z příkladu v zobrazení dat s ovládacími prvky DataList a Repeater, ale neváhejte použít jakékoli šablony značky, které najdete nejvíce vizuálně atraktivní.

Po provedení těchto změn by měl kód DataList a jeho ObjectDataSource vypadat podobně jako následující:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ProductsByCategoryDataSource" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label ID="ProductNameLabel" runat="server"
                Text='<%# Eval("ProductName") %>' />
        </h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
</asp:DataList>
 
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:ControlParameter ControlID="Categories" Name="categoryID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

Chvíli se podívejte na náš postup v prohlížeči. Při první návštěvě stránky se zobrazí produkty patřící do vybrané kategorie (nápoje), jak je znázorněno na obrázku 9, ale změna rozevíracího seznamu neaktualizuje data. Důvodem je to, že pro aktualizaci dataListu musí dojít k zpětnému odeslání. Abychom toho dosáhli, můžeme vlastnost DropDownList AutoPostBack nastavit nebo true přidat na stránku ovládací prvek Web button. Pro účely tohoto kurzu jsem se rozhodl nastavit vlastnost DropDownList AutoPostBack na true.

Obrázky 9 a 10 znázorňují hlavní/podrobnou sestavu v akci.

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

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

Přidání položky seznamu "-- Choose a Category --"

Při první návštěvě FilterByDropDownList.aspx stránky kategorie DropDownList první položka seznamu (Nápoje) je ve výchozím nastavení vybrána, zobrazující nápojové výrobky v seznamu DataList. V kurzu Master/Detail Filtering With a DropDownList jsme přidali možnost -- Choose a Category - option to the DropDownList that was selected by default and, when selected, and, when selected, displayed all of the products in the database. Takový přístup byl spravovatelný při výpisu produktů v GridView, protože každý řádek produktu zabíral malé množství obrazovky nemovitostí. S dataList ale informace o jednotlivých produktech spotřebovávají mnohem větší část obrazovky. Pojďme přidat možnost "-- Choose a Category --" (Vybrat kategorii) a nechat ji ve výchozím nastavení vybranou, ale místo toho, aby zobrazovala všechny produkty při výběru, nakonfigurujeme ji tak, aby se zobrazovaly žádné produkty.

Chcete-li 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 pomocí Text "-- Choose a Category --" a the Value 0.

Obrázek 11: Přidání položky seznamu -- Volba kategorie --

Položku seznamu můžete také přidat 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="0">-- Choose a Category --</asp:ListItem>
 
</asp:DropDownList>

Kromě toho musíme ovládací prvek AppendDataBoundItems DropDownList nastavit na true to, že pokud je nastavená na false (výchozí), když jsou kategorie vázané na Rozevírací seznam z ObjectDataSource, přepíšou všechny ručně přidané položky seznamu.

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

Důvodem, proč jsme zvolili hodnotu 0 položky seznamu "-- Choose a Category --", je to, že v systému nejsou žádné kategorie s hodnotou 0, a proto nebudou vráceny žádné záznamy o produktech, když je vybrána položka seznamu -- Zvolit kategorii --. Potvrďte to tak, že stránku navštívíte v prohlížeči. Jak ukazuje obrázek 13, při počátečním zobrazení stránky je vybrána položka seznamu "-- Choose a Category --" (Vybrat kategorii) a nezobrazí se žádné produkty.

Obrázek 13: Když je vybrána položka seznamu "-- Choose a Category --", nezobrazí se žádné produkty (kliknutím zobrazíte obrázek v plné velikosti).

Pokud byste raději zobrazili všechny produkty, když je vybrána možnost -- Zvolit kategorii --, použijte místo toho hodnotu -1 . Čtenář astute si vzpomene, že zpět v kurzu Master/Detail Filtering With a DropDownList jsme aktualizovali ProductsBLL metodu třídy GetProductsByCategoryID(categoryID) tak, aby pokud categoryID byla předána hodnota -1 , byly vráceny všechny záznamy o produktech.

Shrnutí

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 prohlédnout 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 DataList pro produkty patřící do vybrané kategorie.

V dalším kurzu se podíváme na oddělení záznamů předlohy a podrobností na dvou stránkách. Na první stránce se zobrazí seznam hlavních záznamů s odkazem pro zobrazení podrobností. Kliknutím na odkaz uživatel přejde na druhou stránku, která zobrazí podrobnosti vybraného hlavního záznamu.

Šťastné programování!

O autorovi

Scott Mitchell, autor sedmi knih ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, trenér a spisovatel. Jeho nejnovější kniha je Sams Teach Yourself ASP.NET 2.0 za 24 hodin. Je dostupný na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím svého blogu, který lze najít na http://ScottOnWriting.NET.

Zvláštní díky...

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Vedoucí kontrolorem tohoto kurzu byl Randy Schmidt. Chcete si projít nadcházející články MSDN? Pokud ano, zahoďte mi řádek na mitchell@4GuysFromRolla.com.

PředchozíDalší