Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
door Scott Mitchell
In deze zelfstudie implementeren we dit patroon met behulp van een GridView om de leveranciers in de database weer te geven. Elke leveranciersrij in de GridView bevat een koppeling Producten weergeven die, wanneer erop wordt geklikt, de gebruiker naar een afzonderlijke pagina brengt waarin deze producten voor de geselecteerde leverancier worden vermeld.
Introductie
In de vorige twee zelfstudies hebben we gezien hoe u hoofd-/detailrapporten op één webpagina weergeeft met behulp van DropDownLists om de masterrecords en een gridview- of DetailsView-besturingselement weer te geven om de 'details' weer te geven. Een ander veelvoorkomend patroon dat wordt gebruikt voor hoofd-/detailrapporten, is door de hoofdrecords op de ene webpagina en de details op de andere te laten zien. Een forumwebsite, zoals de ASP.NET Forums, is in de praktijk een goed voorbeeld van dit patroon. De ASP.NET Forums bestaan uit verschillende forums zoals 'Getting Started', 'Web Forms', 'Gegevenspresentatie' en andere. Elk forum bestaat uit veel threads en elke thread bestaat uit een aantal berichten. Op de startpagina van ASP.NET Forums worden de forums vermeld. Als u op een forum klikt, wordt u naar een ShowForum.aspx pagina geleid, waarin de threads voor dat forum worden vermeld. Als u op een thread klikt, gaat u naar ShowPost.aspx, waarin de berichten worden weergegeven voor de thread waarop is geklikt.
In deze zelfstudie implementeren we dit patroon met behulp van een GridView om de leveranciers in de database weer te geven. Elke leveranciersrij in de GridView bevat een koppeling Producten weergeven die, wanneer erop wordt geklikt, de gebruiker naar een afzonderlijke pagina brengt waarin deze producten voor de geselecteerde leverancier worden vermeld.
Stap 1: SupplierListMaster.aspxItem en pagina's toevoegenProductsForSupplierDetails.aspx aan de Filteringmap
Bij het definiëren van de pagina-indeling in de derde zelfstudie hebben we een aantal 'starterspagina's' toegevoegd in de BasicReporting, Filteringen CustomFormatting mappen. We hebben echter op dat moment geen starterspagina toegevoegd voor deze zelfstudie, dus neem even de tijd om twee nieuwe pagina's toe te voegen aan de Filtering map: SupplierListMaster.aspx en ProductsForSupplierDetails.aspx.
SupplierListMaster.aspx geeft de masterrecords (de leveranciers) weer, terwijl ProductsForSupplierDetails.aspx de producten voor de geselecteerde leverancier worden weergegeven.
Wanneer u deze twee nieuwe pagina's maakt, moet u deze koppelen aan de Site.master basispagina.
Afbeelding 1: De SupplierListMaster.aspx en ProductsForSupplierDetails.aspx Pagina's toevoegen aan de Filtering map
Wanneer u nieuwe pagina's aan het project toevoegt, moet u daarbij ook het siteoverzichtsbestand bijwerken, Web.sitemap. Voor deze zelfstudie voegt u de SupplierListMaster.aspx pagina aan het siteoverzicht toe met behulp van de volgende XML-inhoud als onderliggend element van het element Filterrapporten <siteMapNode> :
<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
title="Master/Detail Across Two Pages"
description="Master records on one page, detail records on another."
/>
Opmerking
U kunt het proces voor het bijwerken van het siteoverzichtbestand automatiseren bij het toevoegen van nieuwe ASP.NET pagina's met behulp van de gratis Visual Studio Site Map Macro van K. Scott Allen.
Stap 2: de leverancierslijst weergeven inSupplierListMaster.aspx
Nu de SupplierListMaster.aspx en ProductsForSupplierDetails.aspx pagina's zijn gemaakt, is de volgende stap het maken van de GridView van leveranciers in SupplierListMaster.aspx. Voeg een GridView toe aan de pagina en koppel deze aan een nieuwe ObjectDataSource. Deze ObjectDataSource moet de methode van de klasse SuppliersBLL gebruiken om alle leveranciers te retourneren.
Afbeelding 2: Selecteer de SuppliersBLL klasse (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 3: De ObjectDataSource configureren om de GetSuppliers() methode te gebruiken (klik om de afbeelding op volledige grootte weer te geven)
We moeten een koppeling met de titel Producten bekijken opnemen in elke GridView-rij die de gebruiker naar ProductsForSupplierDetails.aspx leidt wanneer erop wordt geklikt, en de waarde van SupplierID van de geselecteerde rij doorgeeft via de querystring. Als de gebruiker bijvoorbeeld op de koppeling Producten weergeven klikt voor de leverancier van Tokyo Traders (met een SupplierID waarde van 4), moet deze worden verzonden naar ProductsForSupplierDetails.aspx?SupplierID=4.
Als u dit wilt doen, voegt u een HyperLinkField toe aan de GridView, waarmee een hyperlink wordt toegevoegd aan elke GridView-rij. Klik eerst op de link Kolommen bewerken vanuit de smart tag van GridView. Selecteer vervolgens het HyperLinkField in de lijst in de linkerbovenhoek en klik op Toevoegen om het HyperLinkField op te nemen in de lijst met velden van GridView.
Afbeelding 4: Een HyperLinkField toevoegen aan de GridView (klik om de volledige afbeelding weer te geven)
Het HyperLinkField kan worden geconfigureerd voor het gebruik van dezelfde tekst- of URL-waarden als de koppeling in elke GridView-rij, of kan deze waarden baseren op de gegevenswaarden die aan elke bepaalde rij zijn gebonden. Als u een statische waarde voor alle rijen wilt opgeven, gebruikt u de Text of NavigateUrl eigenschappen van HyperLinkField. Omdat we willen dat de koppelingstekst voor alle rijen hetzelfde is, stelt u de eigenschap HyperLinkField Text in op Producten weergeven.
Afbeelding 5: Stel de eigenschap van Text HyperLinkField in op Producten weergeven (klik hier om de volledige afbeelding weer te geven)
Als u de tekst- of URL-waarden wilt instellen op basis van de onderliggende gegevens die zijn gebonden aan de rij GridView, geeft u de gegevensvelden op waaruit de tekst- of URL-waarden moeten worden opgehaald in de DataTextField of DataNavigateUrlFields eigenschappen.
DataTextField kan alleen worden ingesteld op één gegevensveld; DataNavigateUrlFieldskan echter worden ingesteld op een door komma's gescheiden lijst met gegevensvelden. We moeten vaak de tekst of URL baseren op een combinatie van de gegevensveldwaarde van de huidige rij en een aantal statische markeringen. In deze handleiding willen we bijvoorbeeld dat de URL van de koppelingen van HyperLinkField ProductsForSupplierDetails.aspx?SupplierID=supplierID is, waarbij supplierID de waarde van SupplierID in elke rij van de GridView is. U ziet dat we hier zowel statische als gegevensgestuurde waarden nodig hebben: het ProductsForSupplierDetails.aspx?SupplierID= gedeelte van de URL van de koppeling is statisch, terwijl het gedeelte gegevensgestuurd is omdat de supplierID waarde van elke rij de eigen SupplierID waarde is.
Als u een combinatie van statische en gegevensgestuurde waarden wilt aangeven, gebruikt u de DataTextFormatString en DataNavigateUrlFormatString eigenschappen. Voer in deze eigenschappen indien nodig de statische markering in en gebruik vervolgens de markering {0} waar u de waarde van het veld wilt weergeven dat is opgegeven in de DataTextField of DataNavigateUrlFields eigenschappen. Als voor de DataNavigateUrlFields eigenschap meerdere velden zijn opgegeven, gebruikt {0} u waar u de eerste veldwaarde wilt invoegen, {1} voor de tweede veldwaarde, enzovoort.
Als u dit toepast op onze tutorial, moeten we de DataNavigateUrlFields eigenschap instellen op SupplierID, omdat dat het veld is waarvan we de waarde per rij moeten aanpassen, en de DataNavigateUrlFormatString eigenschap instellen op ProductsForSupplierDetails.aspx?SupplierID={0}.
Afbeelding 6: Het HyperLinkField zo configureren dat de juiste koppelings-URL wordt opgenomen op basis van de SupplierID (klik om de volledige afbeelding weer te geven)
Nadat u het HyperLinkField hebt toegevoegd, kunt u de velden van GridView aanpassen en opnieuw ordenen. In de volgende markeringen ziet u de GridView nadat ik enkele kleine aanpassingen op veldniveau heb aangebracht.
<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>
Neem even de tijd om de SupplierListMaster.aspx pagina via een browser weer te geven. Zoals in Afbeelding 7 wordt weergegeven, bevat de pagina momenteel een lijst met alle leveranciers, inclusief een koppeling om producten te bekijken. Als u op de koppeling Producten bekijken klikt, wordt u doorgestuurd naar ProductsForSupplierDetails.aspx, waarbij de gegevens van de leverancier SupplierID in de querystring worden meegegeven.
Afbeelding 7: Elke leveranciersrij bevat een koppeling Producten weergeven (klik hier om de volledige afbeelding weer te geven)
Stap 3: de producten van de leverancier vermelden inProductsForSupplierDetails.aspx
Momenteel stuurt de SupplierListMaster.aspx pagina gebruikers naar ProductsForSupplierDetails.aspx, waarbij de geselecteerde leverancier SupplierID wordt doorgegeven aan de querystring. De laatste stap van de zelfstudie is om de producten weer te geven in een GridView waarbij ProductsForSupplierDetails.aspxSupplierID gelijk is aan de SupplierID doorgegeven via de querystring. Als u dit wilt doen door een GridView toe te voegen aan de ProductsForSupplierDetails.aspx pagina, gebruikt u een nieuw ObjectDataSource-besturingselement met de naam ProductsBySupplierDataSource waarmee de GetProductsBySupplierID(supplierID) methode van de ProductsBLL klasse wordt aangeroepen.
Afbeelding 8: Een nieuwe ObjectDataSource met de naam ProductsBySupplierDataSource toevoegen (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 9: Selecteer de ProductsBLL klasse (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 10: Laat de ObjectDataSource de GetProductsBySupplierID(supplierID) methode aanroepen (klik om de afbeelding op volledige grootte weer te geven)
De laatste stap van de wizard Gegevensbron configureren vraagt ons om de bron van de parameter van de GetProductsBySupplierID(supplierID) methode supplierID op te geven. Als u de querytekenreekswaarde wilt gebruiken, stelt u de parameterbron in op QueryString en voert u de naam in van de querytekenreekswaarde die u wilt gebruiken in het tekstvak QueryStringField (SupplierID).
Afbeelding 11: Vul de supplierID parameterwaarde uit de SupplierID querytekenreekswaarde in (klik om de afbeelding op volledige grootte weer te geven)
Dat is alles! Afbeelding 12 toont de ProductsForSupplierDetails.aspx pagina wanneer deze wordt bezocht door te klikken op de koppeling Tokyo Traders van SupplierListMaster.aspx.
Afbeelding 12: De producten die door Tokyo Traders worden geleverd, worden weergegeven (klik om de afbeelding op volledige grootte weer te geven)
Leveranciersinformatie weergeven inProductsForSupplierDetails.aspx
Zoals in afbeelding 12 wordt weergegeven, worden op de ProductsForSupplierDetails.aspx pagina alleen de producten vermeld die worden geleverd door de SupplierID opgegeven in de querytekenreeks. Iemand die rechtstreeks naar deze pagina is verzonden, weet echter niet dat in afbeelding 12 producten van Tokyo Traders worden weergegeven. Om dit te verhelpen kunnen we ook leveranciersinformatie op deze pagina weergeven.
Begin met het toevoegen van een FormView boven de producten GridView. Maak een nieuw ObjectDataSource-besturingselement met de naam SuppliersDataSource waarmee de methode van SuppliersBLL de GetSupplierBySupplierID(supplierID) klasse wordt aangeroepen.
Afbeelding 13: Selecteer de SuppliersBLL klasse (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 14: Laat de ObjectDataSource de GetSupplierBySupplierID(supplierID) methode aanroepen (klik om de volledige afbeelding weer te geven)
Net als bij de ProductsBySupplierDataSource, moet de supplierID-parameter de waarde van de SupplierID-querytekenreeks hebben toegewezen gekregen.
Afbeelding 15: Vul de supplierID parameterwaarde uit de SupplierID querytekenreekswaarde in (klik om de afbeelding op volledige grootte weer te geven)
Wanneer u de FormView aan de ObjectDataSource bindt in de ontwerpweergave, zal Visual Studio automatisch de ItemTemplate, InsertItemTemplate, en EditItemTemplate van de FormView maken met Label- en TextBox-webbesturingselementen voor elk van de gegevensvelden die door de ObjectDataSource worden geretourneerd. Omdat we alleen leveranciersinformatie willen weergeven, kunt u gerust de InsertItemTemplate en EditItemTemplate verwijderen. Bewerk vervolgens de ItemTemplate zodat de bedrijfsnaam van de leverancier wordt weergegeven in een <h3> element en het adres, de plaats, het land/de regio en het telefoonnummer onder de bedrijfsnaam. U kunt ook handmatig de FormView's DataSourceID instellen en de ItemTemplate opmaak maken, zoals we hebben gedaan in de zelfstudie 'Gegevens weergeven met de ObjectDataSource'.
Nadat de declaratieve markeringen van FormView zijn bewerkt, moet deze er ongeveer als volgt uitzien:
<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>
Afbeelding 16 toont een schermafbeelding van de ProductsForSupplierDetails.aspx pagina nadat de hierboven beschreven leveranciersinformatie is opgenomen.
Afbeelding 16: De lijst met producten bevat een samenvatting over de leverancier (klik hier om de volledige afbeelding weer te geven)
De laatste aanrakingen aanbrengen voor deProductsForSupplierDetails.aspxgebruikersinterface
Om de gebruikerservaring voor dit rapport te verbeteren, zijn er een aantal toevoegingen die we aan de ProductsForSupplierDetails.aspx pagina moeten toevoegen. Op dit moment kan een gebruiker alleen van de ProductsForSupplierDetails.aspx pagina teruggaan naar de lijst met leveranciers door op de knop Terug van hun browser te klikken. Laten we een HyperLink aan de ProductsForSupplierDetails.aspx pagina toevoegen die terugverwijst naar SupplierListMaster.aspx, zodat de gebruiker op een andere manier terug kan keren naar de hoofdlijst.
Afbeelding 17: Een HyperLink-besturingselement toevoegen om de gebruiker terug te brengen naar SupplierListMaster.aspx (klik om de afbeelding op volledige grootte weer te geven)
Als de gebruiker op de koppeling Producten weergeven klikt voor een leverancier die geen producten heeft, retourneert de ProductsBySupplierDataSource ObjectDataSource ProductsForSupplierDetails.aspx geen resultaten. De GridView die is gebonden aan ObjectDataSource, geeft geen markeringen weer, wat resulteert in een lege regio op de pagina in de browser van de gebruiker. Om duidelijk te communiceren met de gebruiker dat er geen producten zijn gekoppeld aan de geselecteerde leverancier, kunnen we de eigenschap van GridView EmptyDataText instellen op het bericht dat we willen weergeven wanneer een dergelijke situatie zich voordoet. Ik heb deze eigenschap ingesteld op 'Er zijn geen producten geleverd door deze leverancier'.
Standaard bieden alle leveranciers in de Database Northwinds ten minste één product. Voor deze zelfstudie heb ik de Products tabel echter handmatig gewijzigd, zodat de leverancier Escargots Nouveaux niet meer aan producten is gekoppeld. Afbeelding 18 toont de detailpagina voor Escargots Nouveaux nadat deze wijziging is aangebracht.
Afbeelding 18: Gebruikers worden geïnformeerd dat de leverancier geen producten levert (klik hier om de volledige afbeelding weer te geven)
Samenvatting
Hoewel hoofd-/detailrapporten zowel de hoofd- als detailrecords op één pagina kunnen weergeven, worden ze in veel websites gescheiden door twee webpagina's. In deze zelfstudie hebben we gekeken naar het implementeren van een dergelijk master-/detailrapport door de leveranciers te laten vermelden in een GridView op de basiswebpagina en de bijbehorende producten die worden vermeld op de pagina Details. Elke leveranciersrij op de basiswebpagina bevatte een koppeling naar de detailpagina die de waarde van de rij SupplierID doorgaf. Dergelijke rijspecifieke koppelingen kunnen eenvoudig worden toegevoegd met behulp van het HyperLinkField van GridView.
Op de detailpagina werd het ophalen van deze producten voor de opgegeven leverancier uitgevoerd door de methode van de klasse ProductsBLL aan te roepen. De supplierID parameterwaarde is declaratief opgegeven met behulp van de queryreeks als parameterbron. We hebben ook gekeken naar het weergeven van de gegevens van de leverancier op de detailpagina met behulp van een FormView.
De volgende tutorial is de laatste over master/detail-rapporten. We bekijken hoe u een lijst met producten weergeeft in een GridView waar elke rij een knop Selecteren heeft. Als u op de knop Selecteren klikt, worden de details van dat product weergegeven in een DetailView-besturingselement op dezelfde pagina.
Veel plezier met programmeren!
Over de auteur
Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.
Speciale dank aan
Deze tutorialreeks is beoordeeld door veel behulpzame beoordelers. Hoofdrecensent voor deze zelfstudie was Hilton Giesenow. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.