Filtrování předlohy a podrobností na dvou stránkách pomocí GridView (C#)
V tomto kurzu tento model implementujeme pomocí objektu GridView, který vypíše dodavatele v databázi. Každý řádek dodavatele v Zobrazení GridView bude obsahovat odkaz Zobrazit produkty, který po kliknutí přemístit uživatele na samostatnou stránku se seznamem těchto výrobků pro vybraného dodavatele.
Úvod
V předchozích dvou kurzech jsme viděli, jak zobrazit hlavní/podrobné sestavy na jedné webové stránce pomocí DropDownLists k zobrazení "hlavních" záznamů a ovládacího prvku GridView nebo DetailsView pro zobrazení "podrobnosti". Dalším běžným vzorem používaným pro hlavní sestavy a sestavy podrobností je zobrazení hlavních záznamů na jedné webové stránce a zobrazení podrobností na jiné. Skvělým příkladem tohoto modelu v praxi je web fóra, jako jsou fóra ASP.NET. Fóra ASP.NET se skládají z různých fór Začínáme, Web Forms, 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 ASP.NET fóra jsou uvedená fóra. Kliknutím na fórum se zobrazí ShowForum.aspx stránka, která obsahuje vlákna pro dané fórum. Podobně kliknutím na vlákno přejdete na ShowPost.aspx, kde se zobrazí příspěvky pro vlákno, na které jste klikli.
V tomto kurzu tento model implementujeme pomocí objektu GridView, který vypíše dodavatele v databázi. Každý řádek dodavatele v Zobrazení GridView bude obsahovat odkaz Zobrazit produkty, který po kliknutí přemístit uživatele na samostatnou stránku se seznamem těchto výrobků pro vybraného dodavatele.
Krok 1: PřidáníSupplierListMaster.aspxstránek aProductsForSupplierDetails.aspxdoFilteringsložky
Při definování rozložení stránky ve třetím kurzu jsme do složek , Filteringa CustomFormatting přidali několik "úvodních" stránekBasicReporting. V té době jsme ale nepřidali úvodní stránku pro tento kurz, takže chvíli počkejte, než do Filtering složky přidáte dvě nové stránky: SupplierListMaster.aspx a ProductsForSupplierDetails.aspx. SupplierListMaster.aspx zobrazí seznam "hlavních" záznamů (dodavatelů), zatímco ProductsForSupplierDetails.aspx zobrazí výrobky pro vybraného dodavatele.
Při vytváření těchto dvou nových stránek nezapomeňte je přidružit ke Site.master stránce předlohy.
Obrázek 1: Přidání SupplierListMaster.aspx stránek a ProductsForSupplierDetails.aspx do Filtering složky
Při přidávání nových stránek do projektu nezapomeňte také odpovídajícím způsobem aktualizovat soubor Web.sitemapmapy webu . Pro účely tohoto kurzu jednoduše přidejte SupplierListMaster.aspx stránku do mapy webu pomocí následujícího obsahu XML jako podřízeného prvku Filtrování sestav <siteMapNode> :
<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another."
/>
Poznámka
Proces aktualizace souboru mapy webu při přidávání nových ASP.NET stránek můžete automatizovat pomocí bezplatného makra mapy webu sady Visual Studio Scotta Allena.
Krok 2: Zobrazení seznamu dodavatelů vSupplierListMaster.aspx
SupplierListMaster.aspx Po vytvoření stránek a ProductsForSupplierDetails.aspx je naším dalším krokem vytvoření GridView dodavatelů v SupplierListMaster.aspxnástroji . Přidejte objekt GridView na stránku a vytvořte vazbu s novým objektem ObjectDataSource. Tento ObjectDataSource by měl používat metodu SuppliersBLL třídy GetSuppliers() vrátit všechny dodavatele.
Obrázek 2: Výběr SuppliersBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 3: Konfigurace objektu ObjectDataSource pro použití GetSuppliers() metody (kliknutím zobrazíte obrázek v plné velikosti)
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 předání hodnoty vybraného SupplierID řádku přes řetězec dotazu. Pokud například uživatel klikne na odkaz Zobrazit produkty u dodavatele Tokyo Traders (který má SupplierID hodnotu 4), měl by být odeslán na adresu ProductsForSupplierDetails.aspx?SupplierID=4.
Chcete-li to provést, přidejte HyperLinkField do GridView, který přidá hypertextový odkaz na každý GridView řádek. Začněte kliknutím na odkaz Upravit sloupce z inteligentní 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í HyperLinkField do GridView (kliknutím zobrazíte obrázek v plné velikosti)
Pole HyperLinkField lze nakonfigurovat tak, aby používalo stejné hodnoty textu nebo adresy URL jako odkaz v každém řádku GridView, nebo může tyto hodnoty založit na datových hodnotách svázaných s každým konkrétním řádkem. Chcete-li zadat statickou hodnotu napříč všemi řádky, použijte hyperlinkfield nebo TextNavigateUrl vlastnosti. Vzhledem k tomu, že chceme, aby byl text odkazu 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 textové nebo url hodnoty, které mají být založeny na podkladových datech vázaných na řádek GridView, zadejte datová pole, ze které se mají hodnoty textu nebo adresy URL načítat ve DataTextField vlastnostech nebo DataNavigateUrlFields . DataTextField lze nastavit pouze na jedno datové pole; DataNavigateUrlFields, lze však nastavit na seznam datových polí oddělených čárkami. Často potřebujeme text nebo adresu URL založit 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é hodnoty i hodnoty řízené daty: 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.
Pokud chcete označit kombinaci statických hodnot a hodnot řízených daty, použijte DataTextFormatString vlastnosti a DataNavigateUrlFormatString . V těchto vlastnostech zadejte podle potřeby statický kód a pak použijte značku {0} tam, kde se má zobrazit hodnota pole zadaná ve DataTextField vlastnostech nebo DataNavigateUrlFields . DataNavigateUrlFields Pokud má vlastnost zadaných více polí, použijte {0} místo, kam chcete vložit první hodnotu pole, {1} hodnotu druhého pole atd.
Když použijeme tuto možnost v našem kurzu, musíme vlastnost nastavit DataNavigateUrlFields na SupplierID, protože se jedná o datové pole, jehož hodnotu musíme přizpůsobit pro jednotlivé řádky, a DataNavigateUrlFormatString vlastnost na ProductsForSupplierDetails.aspx?SupplierID={0}.
Obrázek 6: Konfigurace pole HyperLinkField tak, aby zahrnovalo správnou adresu URL odkazu na SupplierID základě (kliknutím zobrazíte obrázek v plné velikosti)
Po přidání Pole HyperLinkField můžete přizpůsobit pole GridView a změnit jejich pořadí. Následující kód ukazuje GridView po několika menších přizpůsobeních 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>
Chvíli si stránku prohlédněte SupplierListMaster.aspx v prohlížeči. Jak je znázorněno na obrázku 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.aspxadresu a v řetězci dotazu se předá dodavatel SupplierID .
Obrázek 7: Každý řádek dodavatele obsahuje odkaz Zobrazit produkty (kliknutím zobrazíte obrázek v plné velikosti)
Krok 3: Uvedení produktů dodavatele do seznamuProductsForSupplierDetails.aspx
V tomto okamžiku SupplierListMaster.aspx stránka odesílá uživatele do ProductsForSupplierDetails.aspxa předává vybraného dodavatele SupplierID v řetězci dotazu. Posledním krokem kurzu je zobrazení produktů v objektu GridView, SupplierID jehož ProductsForSupplierDetails.aspx hodnota se rovná SupplierID hodnotě předané prostřednictvím řetězce dotazu. Chcete-li toho dosáhnout, začněte přidáním objektu GridView na ProductsForSupplierDetails.aspx stránku pomocí nového ovládacího prvku ObjectDataSource s názvem ProductsBySupplierDataSource , který vyvolá metodu ProductsBLLGetProductsBySupplierID(supplierID) z třídy .
Obrázek 8: Přidání nového objektuDataSource s názvem ProductsBySupplierDataSource (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 9: Výběr ProductsBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 10: Nechte ObjectDataSource vyvolat metodu GetProductsBySupplierID(supplierID) (kliknutím zobrazíte obrázek v plné velikosti)
Poslední krok průvodce Konfigurací zdroje dat nás vyzve k zadání zdroje 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 supplierIDSupplierID z hodnoty řetězce dotazu (kliknutím zobrazíte obrázek v plné velikosti)
A je to! Obrázek 12 znázorňuje ProductsForSupplierDetails.aspx stránku při návštěvě kliknutím na odkaz Tokyo Traders z SupplierListMaster.aspx.
Obrázek 12: Zobrazují se produkty dodané tokijskými obchodníky (kliknutím zobrazíte obrázek v plné velikosti)
Zobrazení informací o dodavateli vProductsForSupplierDetails.aspx
Jak je znázorněno na obrázku ProductsForSupplierDetails.aspx 12, stránka jednoduše uvádí seznam produktů, které jsou dodány pomocí SupplierID zadaného v řetězci dotazu. Někdo odeslaný přímo na tuto stránku by však nevěděl, že Obrázek 12 zobrazuje produkty Tokyo Traders. Abychom tento problém napravili, můžeme na této stránce zobrazit také informace o dodavatelích.
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 SuppliersBLL třídy GetSupplierBySupplierID(supplierID) .
Obrázek 13: Výběr SuppliersBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)
Obrázek 14: Nechte objekt ObjectDataSource vyvolat metodu GetSupplierBySupplierID(supplierID) (kliknutím zobrazíte obrázek v plné velikosti)
Stejně jako u parametru ProductsBySupplierDataSourcesupplierID mají parametr přiřazenou hodnotu SupplierID řetězce dotazu.
Obrázek 15: Naplnění hodnoty parametru supplierIDSupplierID z hodnoty řetězce dotazu (kliknutím zobrazíte obrázek v plné velikosti)
Při vytváření vazby objektu FormView na ObjectDataSource v návrhovém zobrazení visual Studio automaticky vytvoří ovládací prvky , InsertItemTemplatea EditItemTemplate objektu FormView ItemTemplates webovými ovládacími prvky Label a TextBox pro každé z datových polí vrácených objektem ObjectDataSource. Vzhledem k tomu, že chceme jenom zobrazit informace o dodavateli, můžete odebrat InsertItemTemplate a EditItemTemplate. Dále upravte itemTemplate tak, aby zobrazoval název společnosti dodavatele v prvku <h3> a adresu, město, zemi/oblast a telefonní číslo pod názvem společnosti. Alternativně můžete ručně nastavit objekty FormView DataSourceID a vytvořit značky ItemTemplate , jako jsme to udělali v kurzu "Displaying Data With the ObjectDataSource".
Po těchto úpravách by deklarativní kód FormView měl vypadat nějak takto:
<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, které jsou podrobně popsané výše.
Obrázek 16: Seznam produktů obsahuje souhrn o dodavateli (kliknutím zobrazíte obrázek v plné velikosti)
Použití konečných úprav uživatelskéhoProductsForSupplierDetails.aspxrozhraní
Abychom zlepšili uživatelské prostředí pro tuto sestavu, měli bychom na ProductsForSupplierDetails.aspx stránce provést několik doplňků. V současné době může uživatel přejít ze ProductsForSupplierDetails.aspx stránky zpět na seznam dodavatelů tak, že v prohlížeči klikne na tlačítko Zpět. Pojďme na ProductsForSupplierDetails.aspx stránku přidat ovládací prvek HyperLink, který odkazuje zpět na SupplierListMaster.aspx, což uživateli poskytne další způsob, jak se může vrátit do hlavního seznamu.
Obrázek 17: Přidání ovládacího prvku HyperLink pro návrat uživatele zpět (SupplierListMaster.aspxkliknutím zobrazíte obrázek v plné velikosti)
Pokud uživatel klikne na odkaz Zobrazit produkty u dodavatele, který nemá žádné produkty, ProductsBySupplierDataSource objekt ObjectDataSource v ProductsForSupplierDetails.aspx souboru nevrátí žádné výsledky. Objekt GridView vázaný na ObjectDataSource nevykreslí žádné značky, jejichž výsledkem je prázdná oblast na stránce v prohlížeči uživatele. Abychom uživateli jasněji sdělili, že k vybranému dodavateli nejsou přidruženy žádné produkty, můžeme nastavit vlastnost GridView EmptyDataText na zprávu, kterou chceme zobrazit, když taková situace nastane. Nastavil(a) jsem tuto vlastnost na hodnotu "Tento dodavatel neposkytuje žádné produkty".
Ve výchozím nastavení poskytují všichni dodavatelé v databázi Northwinds alespoň jeden produkt. Nicméně, pro tento kurz jsem ručně upravil Products tabulku tak, aby dodavatel Escargots Nouveaux již není spojen s žádnými produkty. Obrázek 18 ukazuje stránku podrobností o 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 v plné velikosti).
Souhrn
I když sestavy hlavní a podrobné sestavy můžou zobrazit hlavní i podrobné záznamy na jedné stránce, na mnoha webech jsou rozdělené na dvě webové stránky. V tomto kurzu jsme se podívali na to, jak implementovat takovou hlavní/podrobnou sestavu tím, že na webové stránce "předlohy" budou dodavatelé uvedení v Zobrazení GridView a související produkty uvedené na stránce "podrobnosti". Každý řádek dodavatele na webové stránce předlohy obsahoval odkaz na stránku podrobností, který se předával podél hodnoty řádku SupplierID . Takové odkazy specifické pro řádky lze snadno přidat pomocí HyperLinkField GridView.
Na stránce podrobností bylo načtení těchto produktů pro zadaného dodavatele provedeno vyvoláním ProductsBLL metody třídy GetProductsBySupplierID(supplierID) . Hodnota supplierID parametru byla zadána deklarativně pomocí řetězce dotazu jako zdroje parametru. Podívali jsme se také na to, jak zobrazit podrobnosti o dodavateli na stránce podrobností pomocí objektu FormView.
Náš další kurz je posledním kurzem o hlavních/podrobných sestavách. Podíváme se na to, jak zobrazit seznam produktů v zobrazení GridView, kde každý řádek obsahuje tlačítko Vybrat. Kliknutím na tlačítko Vybrat zobrazíte podrobnosti o produktu v ovládacím prvku DetailsView na stejné stránce.
Všechno nejlepší na 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 zastihnout na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím jeho blogu, který najdete na adrese http://ScottOnWriting.NET.
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. Chtěli byste si projít své nadcházející články na webu MSDN? Pokud ano, dejte mi řádek na mitchell@4GuysFromRolla.com.