Master/Detalj med ett valbart master GridView och ett detaljerat DetailView (C#)

2025-04-30

Denna handledning har en GridView med rader som innehåller namn och pris för varje produkt tillsammans med en Välj-knapp. Om du klickar på knappen Välj för en viss produkt visas fullständig information i en DetailsView-kontroll på samma sida.

Inledning

I den föregående självstudien såg vi hur du skapar en huvud-/detaljrapport med hjälp av två webbsidor: en "huvudwebbsida", från vilken vi visade listan över leverantörer; och en "informationssida" som listade de produkter som tillhandahålls av den valda leverantören. Det här tvåsidiga rapportformatet kan komprimeras till en sida. Denna handledning har en GridView med rader som innehåller namn och pris för varje produkt tillsammans med en Välj-knapp. Om du klickar på knappen Välj för en viss produkt visas fullständig information i en DetailsView-kontroll på samma sida.

Bild 1: Om du klickar på knappen Välj visas produktens information (klicka om du vill visa en bild i full storlek)

Steg 1: Skapa en valbar GridView

Kom ihåg att i den tvåsidiga huvud-/detaljrapporten innehöll varje huvudpost en hyperlänk som när den klickades skickade användaren till informationssidan och skickade den klickade radens SupplierID värde i frågesträngen. En sådan hyperlänk lades till i varje GridView-rad med hjälp av ett HyperLinkField. För huvud-/informationsrapporten för en sida behöver vi en knapp för varje GridView-rad som, när den klickas, visar informationen. GridView-kontrollen kan konfigureras så att den innehåller en Välj-knapp för varje rad som orsakar en postback och markerar raden som GridViews SelectedRow.

Börja med att lägga till en GridView-kontroll på DetailsBySelecting.aspx sidan i Filtering mappen och ange dess ID egenskap till ProductsGrid. Lägg sedan till en ny ObjectDataSource med namnet AllProductsDataSource som anropar ProductsBLL klassens GetProducts() -metod.

Bild 2: Skapa en ObjectDataSource med namnet AllProductsDataSource (Klicka om du vill visa en bild i full storlek)

Bild 3: Använd ProductsBLL klassen (Klicka om du vill visa en bild i full storlek)

Bild 4: Konfigurera ObjectDataSource för att anropa GetProducts() metoden (Klicka om du vill visa en bild i full storlek)

Redigera GridView-fälten genom att ta bort alla utom ProductName och UnitPrice BoundFields. Du kan också anpassa dessa BoundFields efter behov, till exempel formatera UnitPrice BoundField som en valuta och ändra HeaderText egenskaperna för BoundFields. De här stegen kan utföras grafiskt genom att klicka på länken Redigera kolumner från GridViews smarta tagg eller genom att manuellt konfigurera deklarativ syntax.

Bild 5: Ta bort alla utom ProductName och UnitPrice BoundFields (Klicka om du vill visa en bild i full storlek)

Den sista markeringen för GridView är:

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Sedan måste vi markera GridView som valbar, vilket lägger till knappen Välj i varje rad. Det gör du genom att markera kryssrutan Aktivera markering i GridViews smarta tagg.

Bild 6: Gör rutnätsvyns rader valbara (Klicka om du vill visa en bild i full storlek)

Om du kontrollerar alternativet Aktivera markering läggs ett Kommandofält till i ProductsGrid GridView med dess ShowSelectButton egenskap inställd på True. Detta resulterar i en Välj-knapp för varje rad i GridView, som bild 6 illustrerar. Som standard återges Select-knapparna som LinkButtons, men du kan använda Knappar eller ImageButtons i stället via egenskapen CommandField ButtonType .

<asp:GridView ID="ProductsGrid" runat="server"
    AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
          HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

När välj-knappen på en GridView-rad klickas startas en postback och GridView-egenskapen SelectedRow uppdateras. Förutom egenskapen SelectedRow tillhandahåller GridView egenskaperna SelectedIndex, SelectedValue och SelectedDataKey . Egenskapen SelectedIndex returnerar indexet för den valda raden, medan SelectedValue egenskaperna och SelectedDataKey returnerar värden baserat på egenskapen DataKeyNames i GridView.

Egenskapen DataKeyNames används för att associera ett eller flera datafältvärden med varje rad och används ofta för att tilldela unikt identifierande information från underliggande data med varje GridView-rad. Egenskapen SelectedValue returnerar värdet för det första DataKeyNames datafältet för den valda raden där som SelectedDataKey egenskapen returnerar den markerade radens DataKey objekt, som innehåller alla värden för de angivna datanyckelfälten för den raden.

Egenskapen DataKeyNames anges automatiskt till unikt identifierande datafält när du binder en datakälla till en GridView, DetailsView eller FormView via designern. Även om den här egenskapen har angetts för oss automatiskt i föregående självstudier, skulle exemplen ha fungerat utan att DataKeyNames-egenskapen var specificerad. Men för det valbara GridView i den här självstudien, samt för framtida självstudier där vi ska undersöka infogning, uppdatering och borttagning, DataKeyNames måste egenskapen vara korrekt inställd. Ta en stund att se till att din GridView-egenskap DataKeyNames är inställd på ProductID.

Nu ska vi visa våra framsteg hittills via en webbläsare. Observera att GridView listar namn och pris för alla produkter tillsammans med en Select LinkButton. Om du klickar på knappen Välj får du ett återanrop. I steg 2 får vi se hur du får en DetailsView att svara på det här inlägget genom att visa information om den valda produkten.

Bild 7: Varje produktrad innehåller en Select LinkButton (Klicka om du vill visa en bild i full storlek)

Framhäva den valda raden

ProductsGrid GridView har en SelectedRowStyle egenskap som kan användas för att diktera det visuella formatet för den valda raden. Detta kan förbättra användarens upplevelse genom att tydligare visa vilken rad i GridView som är vald. I den här självstudien ska vi låta den markerade raden vara markerad med en gul bakgrund.

Precis som med våra tidigare självstudier ska vi sträva efter att behålla de estetiska inställningar som definieras som CSS-klasser. Skapa därför en ny CSS-klass i Styles.css med namnet SelectedRowStyle.

.SelectedRowStyle
{
    background-color: Yellow;
}

Om du vill att den här CSS-klassen tillämpas på SelectedRowStyle egenskapen för alla GridViews i vår tutorialserie, redigerar du Skin i GridView.skin temat så att DataWebControls inställningarna inkluderas enligt nedan:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

Med det här tillägget är den markerade GridView-raden nu markerad med en gul bakgrundsfärg.

Bild 8: Anpassa den markerade radens utseende med hjälp av GridView-egenskapen SelectedRowStyle (Klicka om du vill visa en bild i full storlek)

Steg 2: Visa den valda produktens information i en DetailsView

ProductsGrid När GridView är klart är allt som återstår att lägga till en DetailsView som visar information om den valda produkten. Lägg till en DetailsView-kontroll ovanför GridView och skapa en ny ObjectDataSource med namnet ProductDetailsDataSource. Eftersom vi vill att den här DetailsView ska visa särskild information om den valda produkten konfigurerar du ProductDetailsDataSource att använda ProductsBLL klassens GetProductByProductID(productID) metod.

Bild 9: Anropa ProductsBLL klassens GetProductByProductID(productID) metod (Klicka om du vill visa en bild i full storlek)

productID Hämta parameterns värde från GridView-kontrollens SelectedValue egenskap. Som vi beskrev tidigare returnerar GridView-egenskapen SelectedValue det första datanyckelvärdet för den valda raden. Därför är det absolut nödvändigt att GridView-egenskapen DataKeyNames är inställd på ProductID, så att den valda radens värde returneras ProductID av SelectedValue.

Bild 10: Ange parametern productID till GridView-egenskapen SelectedValue (Klicka om du vill visa en bild i full storlek)

productDetailsDataSource När ObjectDataSource har konfigurerats korrekt och bundits till DetailsView är den här självstudien klar! När sidan först besöks är ingen rad markerad, så GridView-egenskapen SelectedValue returnerar null. Eftersom det inte finns några produkter med ett NULLProductID värde returneras inga poster av GetProductByProductID(productID)-metoden, vilket innebär att DetailsView inte visas (se Bild 11). När du klickar på Välj-knappen för en rad i GridView sker en postback och DetailsView uppdateras. Den här gången returnerar GridView-egenskapen SelectedValue den ProductID markerade raden, GetProductByProductID(productID) metoden returnerar en ProductsDataTable med information om den specifika produkten och DetailsView visar informationen (se bild 12).

Bild 11: När du först besökte visas endast GridView (Klicka om du vill visa en bild i full storlek)

Bild 12: När du väljer en rad visas produktens information (Klicka om du vill visa en bild i full storlek)

Sammanfattning

I den här och de föregående tre tutorialerna har vi sett flera tekniker som visar huvud-/detaljrapporterna. I den här självstudien undersökte vi hur du använder ett valbart GridView för att hysa huvudposterna och en DetailsView för att visa information om den valda huvudposten på samma sida. I de tidigare självstudierna tittade vi på hur man visar huvud-/detaljrapporter med hjälp av rullgardinsmenyer och visar huvudposter på en webbsida och detaljposter på en annan.

Den här handledningen avslutar vår genomgång av huvud-/detaljrapporter. Från och med nästa självstudie börjar vi utforska anpassad formatering med GridView, DetailsView och FormView. Vi får se hur du anpassar utseendet på dessa kontroller baserat på de data som är bundna till dem, hur du sammanfattar data i GridView-sidfoten och hur du använder mallar för att få en större kontroll över layouten.

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.

Föregående nästa

Feedback

Var den här sidan till hjälp?