Visa flera poster per rad med kontrollen DataList (VB)

av Scott Mitchell

Ladda ned PDF

I den här korta självstudien utforskar vi hur du anpassar datalistans layout genom egenskaperna RepeatColumns och RepeatDirection.

Inledning

De DataList-exempel som vi har sett under de senaste två självstudierna har renderat varje post från dess datakälla som en rad i en HTML-tabell med en kolumn. Även om detta är standardbeteendet för DataList är det mycket enkelt att anpassa DataList-visningen så att datakällobjekten är spridda över en tabell med flera kolumner och flera rader. Dessutom är det möjligt att alla datakällobjekt visas i en datalista med en rad med flera kolumner.

Vi kan anpassa DataList-layouten via dess RepeatColumns egenskaper och RepeatDirection egenskaper, vilket anger hur många kolumner som återges och om dessa objekt är lodrätt eller vågrätt. Bild 1 visar till exempel en DataList som visar produktinformation i en tabell med tre kolumner.

Bild 1: Datalistan visar tre produkter per rad (klicka om du vill visa en bild i full storlek)

Genom att visa flera datakällobjekt per rad kan DataList mer effektivt använda vågrätt skärmutrymme. I den här korta tutorialen utforskar vi egenskaperna för DataList.

Steg 1: Visa produktinformation i en datalista

Innan vi undersöker RepeatColumns egenskaperna och RepeatDirection ska vi först skapa en DataList på vår sida som visar produktinformation med hjälp av standardtabelllayouten för en kolumn med flera rader. I det här exemplet ska vi visa produktens namn, kategori och pris med hjälp av följande markering:

<h4>Product Name</h4>
Available in the Category Name store for Price

Vi har sett hur du binder data till en datalista i tidigare exempel, så jag går igenom de här stegen snabbt. Börja med att RepeatColumnAndDirection.aspx öppna sidan i DataListRepeaterBasics mappen och dra en datalista från verktygslådan till designern. Från den smarta taggen DataList väljer du att skapa en ny ObjectDataSource och konfigurerar den för att hämta sina data från ProductsBLL klassens GetProducts -metod och väljer alternativet (Ingen) i guidens flikar INSERT, UPDATE och DELETE.

När du har skapat och bindt den nya ObjectDataSource till DataList skapar Visual Studio automatiskt ett ItemTemplate som visar namnet och värdet för var och en av produktdatafälten. ItemTemplate Justera antingen direkt via den deklarativa markeringen eller från alternativet Redigera mallar i datalistans smarta tagg så att den använder markering som visas ovan och ersätter produktnamn, kategorinamn och pristext med etikettkontroller som använder lämplig databindningssyntax för att tilldela värden till deras Text egenskaper. När du har uppdaterat ItemTemplatebör sidans deklarativa markering se ut ungefär så här:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h4>
        Available in the
            <asp:Label runat="server" ID="CategoryNameLabel"
                Text='<%# Eval("CategoryName") %>' />
        store for
            <asp:Label runat="server" ID="UnitPriceLabel"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Observera att jag har inkluderat en formatspecificerare i Eval databindningssyntaxen för UnitPrice, för att formatera det returnerade värdet som en valuta. Eval("UnitPrice", "{0:C}").

Ta en stund att besöka din sida i en webbläsare. Som bild 2 visar återges DataList som en tabell med en kolumn med flera rader med produkter.

Bild 2: Som standard återges datalistan som en tabell med en kolumn, flera rader (klicka om du vill visa en bild i full storlek)

Steg 2: Ändra layoutriktningen för datalistan

Även om standardbeteendet för DataList är att lägga ut sina objekt lodrätt i en tabell med en kolumn med flera rader, kan det här beteendet enkelt ändras via egenskapen DataList.RepeatDirection Egenskapen RepeatDirection kan acceptera något av två möjliga värden: Horizontal eller Vertical (standardvärdet).

Genom att ändra RepeatDirection egenskapen från Vertical till Horizontalrenderar DataList sina poster på en enda rad och skapar en kolumn per datakällobjekt. För att illustrera den här effekten klickar du på DataList i designern och ändrar RepeatDirection sedan egenskapen från Vertical till Horizontalfrån fönstret Egenskaper. Omedelbart när du gör det justerar designern DataList-layouten och skapar ett gränssnitt med en rad med flera kolumner (se bild 3).

Bild 3: Egenskapen RepeatDirection avgör hur riktningen datalistans objekt är utlagda (Klicka om du vill visa en bild i full storlek)

När du visar små mängder data kan en tabell med en rad med flera kolumner vara ett idealiskt sätt att maximera skärmfastigheter. För större datavolymer kräver dock en enskild rad flera kolumner, vilket flyttar de objekt som inte får plats på skärmen åt höger. Bild 4 visar produkterna när de återges i en datalista med en rad. Eftersom det finns många produkter (över 80) måste användaren rulla långt till höger för att visa information om var och en av produkterna.

Bild 4: För tillräckligt stora datakällor kräver en datalista med en kolumn vågrät rullning (klicka om du vill visa en bild i full storlek)

Steg 3: Visa data i en tabell med flera kolumner och flera rader

För att skapa en datalista med flera kolumner och flera rader måste vi ange RepeatColumns egenskapen till det antal kolumner som ska visas. Som standard RepeatColumns är egenskapen inställd på 0, vilket gör att DataList visar alla dess objekt på en enskild rad eller en kolumn (beroende på värdet för RepeatDirection egenskapen).

I vårt exempel ska vi visa tre produkter per tabellrad. Ange därför egenskapen RepeatColumns till 3. När du har gjort den här ändringen kan du ta en stund att visa resultatet i en webbläsare. Som bild 5 visar visas produkterna nu i en tabell med tre kolumner och flera rader.

Bild 5: Tre produkter visas per rad (klicka om du vill visa en bild i full storlek)

Egenskapen RepeatDirection påverkar hur objekten i DataList anges. Bild 5 visar resultatet med egenskapen inställd på RepeatDirectionHorizontal. Observera att de tre första produkterna Chai, Chang och Aniseed Syrup läggs ut från vänster till höger, uppifrån och ned. De följande tre produkterna (börjar med Chef Anton s Cajun Seasoning) visas i en rad under de tre första. Om du ändrar tillbaka egenskapen RepeatDirection till Verticallägger du dock ut dessa produkter uppifrån och ned, från vänster till höger, som bild 6 illustrerar.

Bild 6: Här visas produkterna lodrätt (klicka om du vill visa en bild i full storlek)

Antalet rader som visas i den resulterande tabellen beror på antalet totala poster som är bundna till datalistan. Det är exakt taket för det totala antalet objekt i datakällan dividerat med egenskapsvärdet RepeatColumns. Eftersom tabellen Products för närvarande har 84 produkter, vilket är delbart med 3, finns det 28 rader. Om antalet objekt i datakällan och egenskapsvärdet RepeatColumns inte är delbara kommer den sista raden eller kolumnen att ha tomma celler. RepeatDirection Om är inställt på Vertical, kommer den sista kolumnen att ha tomma celler. Om RepeatDirection är Horizontal, kommer den sista raden att ha de tomma cellerna.

Sammanfattning

DataList visar som standard sina objekt i en tabell med en kolumn med flera rader, som efterliknar layouten för en GridView med ett enda TemplateField. Även om den här standardlayouten är acceptabel kan vi maximera skärmfastigheter genom att visa flera datakällobjekt per rad. Att göra detta handlar helt enkelt om att ställa in egenskapen DataList till RepeatColumns antalet kolumner som ska visas per rad. Dessutom kan egenskapen DataLists RepeatDirection användas för att ange om innehållet i flerkolumnstabellen med flera rader ska läggas vågrätt från vänster till höger, uppifrån och ned eller lodrätt uppifrån och ned, från vänster till höger.

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. Huvudgranskare för denna handledning var John Suru. Vill du granska mina kommande MSDN-artiklar? Om så är fallet, hör av dig på mitchell@4GuysFromRolla.com.