Filtrování předlohy a podrobností na dvou stránkách pomocí GridView (C#)

** od Scott Mitchell

Stáhnout PDF

V tomto kurzu tento vzor implementujeme pomocí GridView k výpisu dodavatelů v databázi. Každý řádek dodavatele v Objektu GridView bude obsahovat odkaz Zobrazit produkty, který po kliknutí přejde uživatele na samostatnou stránku se seznamem těchto produktů pro vybraného dodavatele.

Úvod

V předchozích dvou kurzech jsme viděli, jak zobrazit sestavy předlohy a podrobností na jedné webové stránce pomocí DropDownLists k zobrazení "master" záznamů a ovládacího prvku GridView nebo DetailsView pro zobrazení "podrobností". Dalším běžným vzorem používaným pro sestavy předlohy/podrobností je mít záznamy předlohy na jedné webové stránce a podrobnosti zobrazené na jiné. Web fóra, jako je ASP.NET fóra, je skvělým příkladem tohoto vzoru v praxi. Fóra ASP.NET se skládají z různých fór Začínáme, Webových formulářů, ovládacích prvků prezentace dat atd. Každé fórum se skládá z mnoha vláken a každé vlákno se skládá z řady příspěvků. Na domovské stránce fóra ASP.NET jsou uvedená fóra. Kliknutím na fórum budete přesměrováni na ShowForum.aspx stránku, která uvádí vlákna pro toto fórum. Stejně tak kliknutím na vlákno přejdete na ShowPost.aspx, který zobrazí příspěvky pro vlákno, na které bylo kliknuto.

V tomto kurzu tento vzor implementujeme pomocí GridView k výpisu dodavatelů v databázi. Každý řádek dodavatele v Objektu GridView bude obsahovat odkaz Zobrazit produkty, který po kliknutí přejde uživatele na samostatnou stránku se seznamem těchto produktů pro vybraného dodavatele.

Krok 1: Přidání SupplierListMaster.aspx a ProductsForSupplierDetails.aspx stránky do Filtering složky

Při definování rozložení stránky v třetím kurzu jsme přidali několik "úvodních" stránek do BasicReporting, Filteringa CustomFormatting složek. Zatím jsme ale nepřidali úvodní stránku pro tento kurz, takže chvíli trvá, než do složky přidáte dvě nové stránky Filtering : SupplierListMaster.aspx a ProductsForSupplierDetails.aspx. SupplierListMaster.aspx zobrazí seznam "master" záznamů (dodavatelů) a ProductsForSupplierDetails.aspx zobrazí produkty pro vybraného dodavatele.

Při vytváření těchto dvou nových stránek je nutné je přidružit k stránce předlohy Site.master .

Obrázek 1: Přidání stránek SupplierListMaster.aspxProductsForSupplierDetails.aspx do Filtering složky

Při přidávání nových stránek do projektu nezapomeňte odpovídajícím způsobem aktualizovat soubor Web.sitemapmapy webu. Pro účely tohoto kurzu jednoduše přidejte SupplierListMaster.aspx stránku na mapu webu pomocí následujícího xml obsahu jako podřízeného prvku Filtering Reports <siteMapNode> :

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another."
/>

Poznámka:

Když přidáváte nové stránky ASP.NET, můžete automatizovat proces aktualizace souboru mapy stránek pomocí bezplatného makra Site Map od K. Scotta Allena pro Visual Studio.

Krok 2: Zobrazení seznamu dodavatelů vSupplierListMaster.aspx

S vytvořenými stránkami SupplierListMaster.aspx a ProductsForSupplierDetails.aspx je naším dalším krokem vytvořit GridView dodavatelů v SupplierListMaster.aspx. Přidejte na stránku Objekt GridView a vytvořte vazbu na nový ObjectDataSource. Tento ObjectDataSource by měl použít třídu SuppliersBLL a její metodu GetSuppliers() k vrácení všech dodavatelů.

Obrázek 2: Výběr SuppliersBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 3: Konfigurace ObjectDataSource pro použití GetSuppliers() metody (kliknutím zobrazíte obrázek s plnou velikostí)

Do každého řádku GridView musíme zahrnout odkaz s názvem Zobrazit produkty, který po kliknutí přenese uživatele na ProductsForSupplierDetails.aspx a předá hodnotu vybraného řádku SupplierID pomocí parametru URL. Například pokud uživatel klikne na odkaz Zobrazit produkty pro dodavatele Tokyo Traders (který má SupplierID hodnotu 4), měl by být odeslán na ProductsForSupplierDetails.aspx?SupplierID=4.

Chcete-li toho dosáhnout, přidejte HyperLinkField do GridView, který přidá hypertextový odkaz na každý řádek GridView. Začněte kliknutím na odkaz "Upravit sloupce" z chytré značky GridView. Dále vyberte HyperLinkField ze seznamu v levém horním rohu a kliknutím na Přidat zahrňte HyperLinkField do seznamu polí GridView.

Obrázek 4: Přidání hyperlinkfieldu do objektu GridView (kliknutím zobrazíte obrázek s plnou velikostí)

HyperLinkField lze nakonfigurovat tak, aby používal stejný text nebo hodnoty URL, které odkaz v každém řádku GridView používá, nebo může tyto hodnoty založit na datových hodnotách vázaných na každý konkrétní řádek. Pokud chcete zadat statickou hodnotu ve všech řádcích, použijte vlastnost Text nebo NavigateUrl vlastností HyperLinkFieldu. Vzhledem k tomu, že chceme, aby text odkazu byl stejný pro všechny řádky, nastavte vlastnost HyperLinkField Text na Zobrazit produkty.

Obrázek 5: Nastavení vlastnosti HyperLinkField Text na zobrazení produktů (kliknutím zobrazíte obrázek v plné velikosti)

Chcete-li nastavit hodnoty textu nebo adresy URL, které mají být založeny na podkladových datech vázaných na řádek GridView, zadejte datová pole, ze které se mají načítat hodnoty textu nebo adresy URL v objektech DataTextField nebo DataNavigateUrlFields vlastnostech. DataTextField lze nastavit pouze na jedno datové pole; DataNavigateUrlFields, lze však nastavit na čárkami oddělený seznam datových polí. Často potřebujeme založit text nebo adresu URL na kombinaci hodnoty datového pole aktuálního řádku a některých statických značek. V tomto kurzu například chceme, aby adresa URL odkazů HyperLinkField byla ProductsForSupplierDetails.aspx?SupplierID=supplierID, kde supplierID je hodnota každého řádku SupplierID GridView. Všimněte si, že zde potřebujeme statické i datové hodnoty: ProductsForSupplierDetails.aspx?SupplierID= část adresy URL odkazu je statická, zatímco supplierID část je řízená daty, protože její hodnota je vlastní SupplierID hodnotou každého řádku.

K označení kombinace statických a datových hodnot použijte vlastnosti DataTextFormatString a DataNavigateUrlFormatString. V těchto vlastnostech zadejte statický kód podle potřeby a pak použijte značku{0}, ve které chcete zobrazit hodnotu pole zadaného ve vlastnostechDataTextField.DataNavigateUrlFields Pokud má vlastnost DataNavigateUrlFields zadáno více polí, použijte {0} tam, kde chcete vložit hodnotu prvního pole, {1} pro druhou hodnotu pole a tak dále.

Když to použijeme v našem kurzu, musíme nastavit DataNavigateUrlFields vlastnost na SupplierID, protože to je datové pole, jehož hodnotu potřebujeme přizpůsobit na základě řádku a DataNavigateUrlFormatString vlastnost na ProductsForSupplierDetails.aspx?SupplierID={0}.

Obrázek 6: Konfigurace pole HyperLink tak, aby obsahovalo správnou adresu URL na základě SupplierID (kliknutím zobrazíte obrázek v plné velikosti)

Po přidání HyperLinkFieldu můžete přizpůsobit a změnit pořadí polí GridView. Následující označení ukazuje GridView po provedení některých drobných přizpůsobení na úrovni pole.

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="SupplierID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Columns>
        <asp:HyperLinkField DataNavigateUrlFields="SupplierID"
            DataNavigateUrlFormatString=
            "ProductsForSupplierDetails.aspx?SupplierID={0}"
            Text="View Products" />
        <asp:BoundField DataField="CompanyName"
          HeaderText="Company" SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City"
          SortExpression="City" />
        <asp:BoundField DataField="Country" HeaderText="Country"
          SortExpression="Country" />
    </Columns>
</asp:GridView>

Vezměte si chvíli a prohlédněte si stránku SupplierListMaster.aspx v prohlížeči. Jak ukazuje obrázek 7, stránka aktuálně obsahuje seznam všech dodavatelů včetně odkazu Zobrazit produkty. Kliknutím na odkaz Zobrazit produkty přejdete na ProductsForSupplierDetails.aspx, přičemž do řetězce dotazu se předají informace dodavatele SupplierID.

Obrázek 7: Každý řádek dodavatele obsahuje odkaz Zobrazit produkty (kliknutím zobrazíte obrázek v plné velikosti)

Krok 3: Výpis výrobků dodavatele vProductsForSupplierDetails.aspx

V tomto okamžiku stránka SupplierListMaster.aspx odesílá uživatele na ProductsForSupplierDetails.aspx, přičemž předává vybraného dodavatele SupplierID v řetězci dotazu. Posledním krokem kurzu je zobrazení produktů v objektu GridView uvnitř ProductsForSupplierDetails.aspx, kde SupplierID odpovídá hodnotě SupplierID zadané v řetězci dotazu. Toho dosáhnete tak, že na ProductsForSupplierDetails.aspx stránku přidáte GridView pomocí nového ovládacího prvku ObjectDataSource s názvem ProductsBySupplierDataSource , který vyvolá metodu GetProductsBySupplierID(supplierID)ProductsBLL z třídy.

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

Obrázek 9: Výběr ProductsBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)

Obrázek 10: Volat Metodu GetProductsBySupplierID(supplierID) ObjectDataSource (kliknutím zobrazíte obrázek s plnou velikostí)

Poslední krok průvodce konfigurací zdroje dat nás požádá, abychom zadali zdroj parametru GetProductsBySupplierID(supplierID) metody supplierID . Pokud chcete použít hodnotu řetězce dotazu, nastavte zdroj parametru na QueryString a zadejte název hodnoty řetězce dotazu, který se má použít v textovém poli QueryStringField (SupplierID).

Obrázek 11: Naplnění hodnoty parametru supplierID z SupplierID hodnoty řetězce dotazu (kliknutím zobrazíte obrázek s plnou velikostí)

To je všechno! Obrázek 12 ukazuje stránku ProductsForSupplierDetails.aspx při kliknutí na odkaz Tokyo Traders z SupplierListMaster.aspx.

Obrázek 12: Zobrazí se produkty dodané společností Tokyo Traders (kliknutím zobrazíte obrázek s plnou velikostí)

Zobrazení informací o dodavateli vProductsForSupplierDetails.aspx

Jak je znázorněno na obrázku 12, ProductsForSupplierDetails.aspx stránka jednoduše uvádí seznam produktů, které jsou dodávány SupplierID uvedeným v řetězci dotazu. Kdokoli, kdo by byl poslán přímo na tuto stránku, by nevěděl, že obrázek 12 zobrazuje produkty společnosti Tokyo Traders. Abychom to mohli napravit, můžeme na této stránce zobrazit také informace o dodavateli.

Začněte přidáním Objektu FormView nad produkty GridView. Vytvořte nový ovládací prvek ObjectDataSource s názvem SuppliersDataSource , který vyvolá metodu SuppliersBLLGetSupplierBySupplierID(supplierID) třídy.

Obrázek 13: Výběr SuppliersBLL třídy (kliknutím zobrazíte obrázek s plnou velikostí)

Obrázek 14: Volat Metodu GetSupplierBySupplierID(supplierID) ObjectDataSource (kliknutím zobrazíte obrázek s plnou velikostí)

Stejně jako u ProductsBySupplierDataSource, přiřaďte parametru supplierID hodnotu z proměnné SupplierID řetězce dotazu.

Obrázek 15: Naplnění hodnoty parametru supplierID z SupplierID hodnoty řetězce dotazu (kliknutím zobrazíte obrázek s plnou velikostí)

Při vazbě ovládacího prvku FormView na ObjectDataSource ve vývojovém prostředí vytvoří Visual Studio automaticky ItemTemplate, InsertItemTemplate a EditItemTemplate s webovými ovládacími prvky Label a TextBox pro každé z datových polí vrácených ObjectDataSource. Jelikož pouze chceme zobrazit informace o dodavateli, klidně odstraňte InsertItemTemplate a EditItemTemplate. Dále upravte ItemTemplate tak, aby zobrazoval název společnosti dodavatele v <h3> prvku a adresu, město, zemi/oblast a telefonní číslo pod názvem společnosti. Alternativně můžete ručně nastavit FormView DataSourceID a vytvořit ItemTemplate markup, jak jsme to udělali zpět v kurzu "Zobrazení dat pomocí ObjectDataSource".

Po těchto úpravách deklarativního kódu FormView by měl vypadat podobně jako následující:

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
    DataSourceID="suppliersDataSource" EnableViewState="False">
    <ItemTemplate>
        <h3><%# Eval("CompanyName") %></h3>
        <p>
            <asp:Label ID="AddressLabel" runat="server"
                Text='<%# Bind("Address") %>'></asp:Label><br />
            <asp:Label ID="CityLabel" runat="server"
                Text='<%# Bind("City") %>'></asp:Label>,
            <asp:Label ID="CountryLabel" runat="server"
                Text='<%# Bind("Country") %>'></asp:Label><br />
            Phone:
            <asp:Label ID="PhoneLabel" runat="server"
                Text='<%# Bind("Phone") %>'></asp:Label>
        </p>
    </ItemTemplate>
</asp:FormView>

Obrázek 16 ukazuje snímek ProductsForSupplierDetails.aspx obrazovky stránky po zahrnutí informací o dodavateli uvedených výše.

Obrázek 16: Seznam produktů obsahuje souhrn o dodavateli (kliknutím zobrazíte obrázek v plné velikosti).

Použití konečnýchProductsForSupplierDetails.aspxdotyků pro uživatelské rozhraní

Abychom vylepšili uživatelské prostředí pro tuto sestavu, měli bychom na ProductsForSupplierDetails.aspx stránce udělat několik dalších. Jediným způsobem, jak uživatel může přejít ze ProductsForSupplierDetails.aspx stránky zpět na seznam dodavatelů, je kliknout na tlačítko Zpět prohlížeče. Pojďme přidat ovládací prvek HyperLink na ProductsForSupplierDetails.aspx stránku, na kterou se odkazuje zpět SupplierListMaster.aspx, a poskytneme uživateli další způsob, jak se vrátit do hlavního seznamu.

Obrázek 17: Přidání ovládacího prvku HyperLink pro převzetí uživatele zpět SupplierListMaster.aspx (kliknutím zobrazíte obrázek v plné velikosti)

Pokud uživatel klikne na odkaz Zobrazit produkty pro dodavatele, který nemá žádné produkty, ProductsBySupplierDataSource objekt ObjectDataSource ProductsForSupplierDetails.aspx nevrátí žádné výsledky. GridView vázaný na ObjectDataSource nevykreslí žádné značky, což vede k prázdné oblasti na stránce v prohlížeči uživatele. Abychom jasněji komunikovali s uživatelem, že neexistují žádné produkty přidružené k vybranému dodavateli, můžeme nastavit Vlastnost GridView EmptyDataText na zprávu, kterou chceme zobrazit, když taková situace nastane. Nastavil(a) jsem tuto vlastnost na "Neexistují žádné produkty poskytované tímto dodavatelem".

Ve výchozím nastavení poskytují všichni dodavatelé v databázi Northwinds alespoň jeden produkt. Avšak pro tento kurz jsem ručně upravil Products tabulku tak, aby dodavatel Escargots Nouveaux již nebyl přidružen k žádným produktům. Obrázek 18 ukazuje stránku podrobností pro Escargots Nouveaux po provedení této změny.

Obrázek 18: Uživatelé jsou informováni, že dodavatel neposkytuje žádné produkty (kliknutím zobrazíte obrázek plné velikosti)

Shrnutí

I když hlavní/podrobné reporty můžou zobrazovat záznamy hlavní a podrobné na jedné webové stránce, na mnoha webech jsou rozdělené na dvou stránkách. V tomto návodu jsme se zaměřili na způsob, jak implementovat sestavu typu master/detail, kdy jsou dodavatelé uvedeni v komponentě GridView na hlavní webové stránce a s tím související produkty jsou uvedeny na podrobné stránce. Každý řádek dodavatele na hlavní webové stránce obsahoval odkaz na stránku podrobností, který přenášel hodnotu řádku SupplierID. Tyto odkazy specifické pro řádky je možné snadno přidat pomocí hyperlinkfieldu GridView.

Na stránce podrobností byly produkty pro zadaného dodavatele načteny pomocí metody ProductsBLL třídy GetProductsBySupplierID(supplierID). Hodnota supplierID parametru byla zadána deklarativní pomocí řetězce dotazu jako zdroje parametrů. Podívali jsme se také na to, jak zobrazit podrobnosti o dodavateli na stránce podrobností pomocí FormView.

Náš další kurz je posledním kurzem o hlavních a podrobných sestavách. Podíváme se, jak zobrazit seznam produktů v objektu GridView, kde má každý řádek tlačítko Vybrat. Kliknutím na tlačítko Vybrat se zobrazí podrobnosti o produktu v ovládacím prvku DetailsView na stejné stránce.

Šť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 Naučte se ASP.NET 2.0 za 24 hodin. Může být dosažitelný na mitchell@4GuysFromRolla.comadrese .

Zvláštní díky

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Vedoucí recenzent pro tento kurz byl Hilton Giesenow. Chcete si projít nadcházející články MSDN? Pokud ano, napište mi zprávu na mitchell@4GuysFromRolla.com.

Předchozídalší