Huvud-/detaljfiltrering över två sidor med en GridView (VB)

av Scott Mitchell

Ladda ned PDF

I den här självstudien implementerar vi det här mönstret med hjälp av en GridView för att lista leverantörerna i databasen. Varje leverantörsrad i GridView innehåller länken Visa produkter som när du klickar tar användaren till en separat sida som visar de produkterna för den valda leverantören.

Inledning

I de föregående två självstudierna såg vi hur man kan visa huvud-/detaljrapporter på en enda webbsida med hjälp av DropDownLists för att visa "huvudposterna" och en GridView eller DetailsView-kontroll för att visa "detaljerna." Ett annat vanligt mönster som används för huvud-/detaljrapporter är att ha huvudposterna på en webbsida och detaljerna som visas på en annan. Ett forum webbplats, som ASP.NET Forum, är ett bra exempel på detta mönster i praktiken. De ASP.NET forumen består av en mängd olika forum för att komma igång, webbformulär, datapresentationskontroller och så vidare. Varje forum består av många trådar och varje tråd består av ett antal inlägg. På startsidan för ASP.NET Forum visas forumen. När du klickar på ett forum tar det dig till en ShowForum.aspx sida, som listar trådarna för det forumet. På samma sätt tar ett klick på en tråd dig till ShowPost.aspx, som visar inläggen för den tråd som klickades.

I den här självstudien implementerar vi det här mönstret med hjälp av en GridView för att lista leverantörerna i databasen. Varje leverantörsrad i GridView innehåller länken Visa produkter som när du klickar tar användaren till en separat sida som visar de produkterna för den valda leverantören.

Steg 1: Lägga tillSupplierListMaster.aspxochProductsForSupplierDetails.aspxsidor i mappenFiltering

När vi definierade sidlayouten i den tredje självstudien lade vi till ett antal "starter"-sidor i mapparna BasicReporting, Filteringoch CustomFormatting . Vi lade dock inte till någon startsida för den här självstudien vid den tidpunkten, så ta en stund att lägga till två nya sidor i Filtering mappen: SupplierListMaster.aspx och ProductsForSupplierDetails.aspx. SupplierListMaster.aspx listar "huvudregister" (leverantörerna) medan ProductsForSupplierDetails.aspx visar produkterna för den valda leverantören.

När du skapar dessa två nya sidor ska du vara säker på Site.master att associera dem med huvudsidan.

Bild 1: Lägg till SupplierListMaster.aspx sidorna och ProductsForSupplierDetails.aspx i mappen Filtering

När du lägger till nya sidor i projektet måste du också uppdatera webbplatsmappningsfilen, Web.sitemap, i enlighet med detta. I den här handledningen lägger du helt enkelt till SupplierListMaster.aspx sidan på webbplatskartan genom att använda följande XML-innehåll som ett underordnat element till Filtering Reports <siteMapNode> elementet:

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

Steg 2: Visa leverantörslistan iSupplierListMaster.aspx

När sidorna SupplierListMaster.aspx och ProductsForSupplierDetails.aspx skapas är nästa steg att skapa GridView för leverantörer i SupplierListMaster.aspx. Lägg till en GridView på sidan och binda den till en ny ObjectDataSource. Den här ObjectDataSource ska använda SuppliersBLL klassens GetSuppliers() metod för att returnera alla leverantörer.

Bild 2: Välj SuppliersBLL klassen (Klicka om du vill visa en bild i full storlek)

Bild 3: Konfigurera ObjectDataSource att använda GetSuppliers() metoden (Klicka om du vill visa en bild i full storlek)

Vi måste inkludera en länk med titeln Visa produkter i varje GridView-rad som när den klickas tar användaren till att ProductsForSupplierDetails.aspx skicka in den valda radens SupplierID värde via frågesträngen. Om användaren till exempel klickar på länken Visa produkter för Tokyo Traders-leverantören (som har värdet SupplierID 4) bör de skickas till ProductsForSupplierDetails.aspx?SupplierID=4.

Det gör du genom att lägga till ett HyperLinkField i GridView, som lägger till en hyperlänk till varje GridView-rad. Börja med att klicka på länken Redigera kolumner från GridViews smarta tagg. Välj sedan HyperLinkField i listan längst upp till vänster och klicka på Lägg till för att inkludera HyperLinkField i GridViews fältlista.

Bild 4: Lägg till ett HyperLinkField i GridView (Klicka om du vill visa en bild i full storlek)

HyperLinkField kan konfigureras för att använda samma text- eller URL-värden som länken i varje GridView-rad, eller kan basera dessa värden på de datavärden som är bundna till varje viss rad. Om du vill ange ett statiskt värde för alla rader använder du HyperLinkFields Text eller NavigateUrl egenskaper. Eftersom vi vill att länktexten ska vara densamma för alla rader anger du Egenskapen HyperLinkField Text till Visa produkter.

Bild 5: Ange Egenskapen HyperLinkField Text till Visa produkter (Klicka om du vill visa en bild i full storlek)

Om du vill ange att text- eller URL-värden ska baseras på underliggande data som är bundna till GridView-raden anger du de datafält som text- eller URL-värdena ska hämtas från i DataTextField egenskaperna eller DataNavigateUrlFields . DataTextField kan bara anges till ett enda datafält. DataNavigateUrlFieldskan dock ställas in på en kommaavgränsad lista med datafält. Vi behöver ofta basera texten eller URL:en på en kombination av den aktuella radens datafältvärde och viss statisk markering. I den här självstudien vill vi till exempel att URL:en för HyperLinkFields länkar ska vara ProductsForSupplierDetails.aspx?SupplierID=supplierID, där supplierID är varje GridView-rads SupplierID värde. Observera att vi behöver både statiska och datadrivna värden här: ProductsForSupplierDetails.aspx?SupplierID= delen av länkens URL är statisk, medan supplierID delen är datadriven eftersom dess värde är varje rads eget SupplierID värde.

Om du vill ange en kombination av statiska och datadrivna värden använder du DataTextFormatString egenskaperna och DataNavigateUrlFormatString . I de här egenskaperna anger du den statiska markeringen efter behov och använder sedan markören {0} där du vill att värdet för fältet som anges i DataTextField egenskaperna eller DataNavigateUrlFields ska visas. Om egenskapen DataNavigateUrlFields har flera fält angivna använder {0} du där du vill infoga det första fältvärdet, {1} för det andra fältvärdet och så vidare.

Genom att tillämpa detta på vår handledning behöver vi använda egenskapen DataNavigateUrlFields till SupplierID, eftersom det är datafältet vars värde vi behöver anpassa för varje rad, och egenskapen DataNavigateUrlFormatString till ProductsForSupplierDetails.aspx?SupplierID={0}.

Bild 6: Konfigurera HyperLinkField så att den innehåller url:en för rätt länk baserat på SupplierID (Klicka om du vill visa en bild i full storlek)

När du har lagt till HyperLinkField kan du anpassa och ändra ordning på GridView-fälten. Följande markering visar GridView när jag har gjort några mindre anpassningar på fältnivå.

<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>

Ta en stund att visa sidan SupplierListMaster.aspx via en webbläsare. Som bild 7 visar visar sidan för närvarande alla leverantörer, inklusive länken Visa produkter. Om du klickar på länken Visa produkter kommer du till ProductsForSupplierDetails.aspxoch skickar leverantörens SupplierID i frågesträngen.

Bild 7: Varje leverantörsrad innehåller länken Visa produkter (Klicka om du vill visa en bild i full storlek)

Steg 3: Lista leverantörens produkter iProductsForSupplierDetails.aspx

Nu skickar sidan SupplierListMaster.aspx användare till ProductsForSupplierDetails.aspx, och skickar den valda leverantörens SupplierID i frågesträngen. Handledningens sista steg är att visa produkterna i en GridView i ProductsForSupplierDetails.aspx där SupplierID är lika med SupplierID som skickas genom frågesträngen. För att göra detta börjar du med att lägga till en GridView på ProductsForSupplierDetails.aspx sidan med hjälp av en ny ObjectDataSource-kontroll med namnet ProductsBySupplierDataSource som anropar GetProductsBySupplierID(supplierID) metoden från ProductsBLL klassen.

Bild 8: Lägg till ett nytt ObjectDataSource-namn ProductsBySupplierDataSource (Klicka om du vill visa en bild i full storlek)

Bild 9: Välj ProductsBLL klassen (Klicka om du vill visa en bild i full storlek)

Bild 10: Låt ObjectDataSource anropa GetProductsBySupplierID(supplierID) metoden (klicka om du vill visa en bild i full storlek)

Det sista steget i guiden Konfigurera datakälla ber oss att ange källan GetProductsBySupplierID(supplierID) till metodens supplierID parameter. Om du vill använda värdet querystring anger du Parameterkällan till QueryString och anger namnet på frågesträngsvärdet som ska användas i textrutan QueryStringField (SupplierID).

Bild 11: Fyll i supplierID parametervärdet från frågesträngsvärdet SupplierID (Klicka om du vill visa en bild i full storlek)

Det är allt! Bild 12 visar ProductsForSupplierDetails.aspx-sidan när du besöker den genom att klicka på länken från Tokyo Traders från SupplierListMaster.aspx.

Bild 12: De produkter som levereras av Tokyo Traders visas (Klicka om du vill visa en bild i full storlek)

Visa leverantörsinformation iProductsForSupplierDetails.aspx

Som bild 12 visar ProductsForSupplierDetails.aspx visar sidan helt enkelt de produkter som tillhandahålls av den SupplierID angivna i frågesträngen. Någon som skickas direkt till den här sidan skulle dock inte veta att bild 12 visar Tokyo Traders' produkter. För att åtgärda detta kan vi också visa leverantörsinformation på den här sidan.

Börja med att lägga till en FormView ovanför produkterna GridView. Skapa en ny ObjectDataSource-kontroll med namnet SuppliersDataSource som anropar SuppliersBLL klassens GetSupplierBySupplierID(supplierID) -metod.

Bild 13: Välj SuppliersBLL klassen (Klicka om du vill visa en bild i full storlek)

Bild 14: Låt ObjectDataSource anropa GetSupplierBySupplierID(supplierID) metoden (klicka om du vill visa en bild i full storlek)

Precis som ProductsBySupplierDataSource, har parametern supplierID tilldelats värdet för frågesträngen SupplierID.

Bild 15: Fyll i supplierID parametervärdet från frågesträngsvärdet SupplierID (Klicka om du vill visa en bild i full storlek)

När du binder FormView till ObjectDataSource i designvyn skapar Visual Studio automatiskt formulärvyns ItemTemplate, InsertItemTemplateoch EditItemTemplate med webbkontrollerna Etikett och Textbox för vart och ett av de datafält som returneras av ObjectDataSource. Eftersom vi bara vill visa leverantörsinformation kan du ta bort InsertItemTemplate och EditItemTemplate. Redigera sedan ItemTemplate så att leverantörens företagsnamn visas i ett element och adressen, orten <h3> , landet/regionen och telefonnumret under företagsnamnet. Du kan alternativt manuellt ställa in FormView DataSourceID och skapa ItemTemplate kod, som vi gjorde i självstudien "Visa data med ObjectDataSource".

När dessa har redigerats bör FormViews deklarativa markering se ut ungefär så här:

<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>

Bild 16 visar en skärmbild av ProductsForSupplierDetails.aspx sidan efter att leverantörsinformationen som beskrivs ovan har inkluderats.

Bild 16: Listan över produkter innehåller en sammanfattning om leverantören (klicka om du vill visa en bild i full storlek)

Tillämpa Final Touches för användargränssnittetProductsForSupplierDetails.aspx

För att förbättra användarupplevelsen för den här rapporten finns det ett par tillägg som vi bör göra på sidan ProductsForSupplierDetails.aspx . För närvarande är det enda sättet för en användare att gå från ProductsForSupplierDetails.aspx sidan tillbaka till listan över leverantörer att klicka på webbläsarens bakåtknapp. Nu ska vi lägga till en HyperLink-kontroll på sidan ProductsForSupplierDetails.aspx som länkar tillbaka till SupplierListMaster.aspx, vilket ger användaren ett annat sätt att återgå till huvudlistan.

Bild 17: Lägg till en HyperLink-kontroll för att ta användaren tillbaka till SupplierListMaster.aspx (Klicka om du vill visa en bild i full storlek)

Om användaren klickar på länken Visa produkter för en leverantör som inte har några produkter returnerar ProductsBySupplierDataSource ObjectDataSource i ProductsForSupplierDetails.aspx inga resultat. GridView som är bundet till ObjectDataSource renderar inga markeringar som resulterar i en tom region på sidan i användarens webbläsare. För att tydligare kommunicera med användaren om att det inte finns några produkter som är associerade med den valda leverantören kan vi ställa in GridView-egenskapen EmptyDataText på det meddelande som vi vill ska visas när en sådan situation uppstår. Jag har ställt in den här egenskapen på "Det finns inga produkter som tillhandahålls av den här leverantören"

Som standard tillhandahåller alla leverantörer i Northwinds-databasen minst en produkt. Men för den här självstudien har jag ändrat Products tabellen manuellt så att leverantören Escargots Nouveaux inte längre är associerad med några produkter. Bild 18 visar informationssidan för Escargots Nouveaux efter att ändringen har gjorts.

Bild 18: Användarna informeras om att leverantören inte tillhandahåller några produkter (klicka om du vill visa en bild i full storlek)

Sammanfattning

Huvud-/detaljrapporter kan visa både huvud- och detaljposter på en enda sida, men på många webbplatser är de avgränsade mellan två webbsidor. I den här handledningen tittade vi på hur du implementerar en sådan huvud-/detaljrapport genom att låta leverantörerna listas i en GridView på huvudsidan och de tillhörande produkterna listas på detaljsidan. Varje leverantörsrad på huvudwebbsidan innehöll en länk till informationssidan som inkluderade radens SupplierID-värde. Sådana radspecifika länkar kan enkelt läggas till med hjälp av GridViews HyperLinkField.

På informationssidan utfördes hämtningen av dessa produkter för den angivna leverantören genom att anropa metod från ProductsBLL klassen GetProductsBySupplierID(supplierID). Parametervärdet supplierID angavs deklarativt med frågesträngen som parameterkälla. Vi har också tittat på hur du visar leverantörsinformationen på informationssidan med hjälp av en FormView.

Nästa självstudie är den sista om huvud-/detaljrapporter. Vi tittar på hur du visar en lista över produkter i en GridView där varje rad har knappen Välj. Om du klickar på knappen Välj visas produktens information i en DetailsView-kontroll på samma sida.

Lycka till med programmerandet!

Om författaren

Scott Mitchell, författare till sju ASP/ASP.NET-böcker och grundare av 4GuysFromRolla.com, har arbetat med Microsofts webbtekniker sedan 1998. Scott arbetar som oberoende konsult, tränare och författare. Hans senaste bok är Sams Teach Yourself ASP.NET 2.0 på 24 timmar. Han kan nås på mitchell@4GuysFromRolla.com.

Särskilt tack till

Den här självstudieserien granskades av många användbara granskare. Ansvarig granskare för den här handledningen var Hilton Giesenow. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.