Több rekord megjelenítése soronként az Adatlista-vezérlővel (VB)

által Scott Mitchell

PDF letöltése

Ebben a rövid oktatóanyagban bemutatjuk, hogyan szabhatja testre a DataList elrendezését RepeatColumns és RepeatDirection tulajdonságaival.

Bevezetés

A DataList-példák, amelyeket az elmúlt két oktatóanyagban láthattunk, az adatforrás minden rekordját egy egyoszlopos HTML-fájl <table>soraként renderelték. Bár ez az alapértelmezett DataList-viselkedés, nagyon könnyen testre szabható a DataList-megjelenítés, hogy az adatforráselemek többoszlopos, többsoros táblákban legyenek elosztva. Emellett az összes adatforráselem megjeleníthető egysoros, többoszlopos DataListben.

Testre szabhatjuk a DataList elrendezését annak RepeatColumns és RepeatDirection tulajdonságainak köszönhetően, ami azt jelzi, hogy hány oszlop jelenik meg, és hogy ezek az elemek függőlegesen vagy vízszintesen vannak-e elhelyezve. Az 1. ábrán például egy dataList látható, amely egy három oszlopból álló táblában jeleníti meg a termékinformációkat.

1. ábra: A DataList soronként három terméket jelenít meg (ide kattintva megtekintheti a teljes méretű képet)

Ha soronként több adatforráselemet jelenít meg, a DataList hatékonyabban használhatja ki a vízszintes képernyőterületet. Ebben a rövid oktatóanyagban bemutatjuk ezt a két DataList-tulajdonságot.

1. lépés: Termékadatok megjelenítése adatlistán

Mielőtt megvizsgálnánk a RepeatColumns és RepeatDirection tulajdonságokat, először hozzunk létre egy DataListet az oldalunkon, amely a termékinformációkat a szabványos egyoszlopos, többsoros táblázatelrendezés alkalmazásával listázza. Ebben a példában a termék nevét, kategóriáját és árát a következő jelölőnyelv segítségével jelenítjük meg:

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

Az előző példákban láttuk, hogyan lehet adatokat kötni egy DataListhez, ezért gyorsan végighaladok ezen a lépésen. Először nyissa meg a RepeatColumnAndDirection.aspx lapot a DataListRepeaterBasics mappában, és húzzon egy DataList-et az Eszközkészletből a Tervezőbe. A DataList intelligens címkéjéből hozzon létre egy új ObjectDataSource-t, és konfigurálja úgy, hogy az adatokat az ProductsBLL osztály GetProducts metódusán keresztül kérje le, és válassza a (Nincs) lehetőséget a varázsló INSERT, UPDATE és DELETE lapjain.

Az új ObjectDataSource datalisthez való létrehozása és kötése után a Visual Studio automatikusan létrehoz egy ItemTemplate olyan objektumot, amely megjeleníti az egyes termékadatmezők nevét és értékét. Módosítsa a ItemTemplate jelölést közvetlenül a deklaratív jelölésen keresztül, vagy a DataList intelligens címkéjében található Sablonok szerkesztése opcióval úgy, hogy az itt bemutatott jelölést használja. Cserélje le a Terméknév, Kategórianév és Ár szövegeket címkevezérlőkre, amelyek a megfelelő adatkötési szintaxist alkalmazzák az értékek Text tulajdonságokhoz való hozzárendelésére. A frissítés után a ItemTemplatelap deklaratív korrektúrája az alábbihoz hasonlóan fog kinézni:

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

Figyelje meg, hogy a visszaadott érték pénznemként való formázásához a databinding szintaxisban EvalUnitPricetartalmaztam egy formátumkijelölőt - Eval("UnitPrice", "{0:C}").

Szánjon egy kis időt, hogy megtekintse a lapot egy böngészőben. A 2. ábrán látható, hogy a DataList egyoszlopos, többsoros terméktáblaként jelenik meg.

2. ábra: Alapértelmezés szerint a DataList egyoszlopos, többsoros táblázatként jelenik meg (ide kattintva megtekintheti a teljes méretű képet)

2. lépés: A DataList elrendezési irányának módosítása

Bár a DataList alapértelmezett viselkedése az elemek függőleges elrendezése egy egyoszlopos, többsoros táblázatban, ez a viselkedés egyszerűen módosítható a DataList tulajdonságánRepeatDirection keresztül. A RepeatDirection tulajdonság két lehetséges érték egyikét fogadhatja el: Horizontal vagy Vertical (az alapértelmezett érték).

A tulajdonság egyikről RepeatDirection a Vertical másikra Horizontaltörténő módosításával a DataList egyetlen sorban jeleníti meg a rekordjait, és adatforrás-elemenként egy oszlopot hoz létre. Az effektus szemléltetéséhez kattintson a Tervezőben az Adatlistára, majd a Tulajdonságok ablakban módosítsa a RepeatDirection tulajdonságot Vertical-ról Horizontal-ra. Ezt követően a Tervező azonnal módosítja a DataList elrendezését, és létrehoz egy egysoros, többoszlopos felületet (lásd a 3. ábrát).

3. ábra: A RepeatDirection tulajdonság azt diktálja, hogy a DataList-elemek iránya hogyan legyen elrendezve (kattintson ide a teljes méretű kép megtekintéséhez)

Kis mennyiségű adat megjelenítésekor egy egysoros, többoszlopos táblázat ideális módszer lehet a képernyő-ingatlanok maximalizálására. Nagyobb adatmennyiségek esetén azonban egyetlen sor több oszlopot igényel, ami leküldi azokat az elemeket, amelyek nem férnek el a képernyőn jobbra. A 4. ábra az egysoros DataListben megjelenített termékeket mutatja. Mivel számos termék létezik (több mint 80), a felhasználónak jobbra kell görgetnie az egyes termékekre vonatkozó információk megtekintéséhez.

4. ábra: Elég nagy adatforrások esetén egy oszlopos adatlista vízszintes görgetést igényel (kattintson ide a teljes méretű kép megtekintéséhez)

3. lépés: Adatok megjelenítése többoszlopos, többsoros táblában

Többoszlopos, többsoros DataList létrehozásához a tulajdonságot aRepeatColumns megjelenítendő oszlopok számára kell beállítani. Alapértelmezés szerint a RepeatColumns tulajdonság értéke 0, ami miatt a DataList az összes elemét egyetlen sorban vagy oszlopban jeleníti meg (a RepeatDirection tulajdonság értékétől függően).

Példánkban három terméket jelenítsünk meg táblázatonként. Ezért állítsa a RepeatColumns tulajdonságot 3 értékre. A módosítás elvégzése után szánjon egy kis időt az eredmények megtekintésére egy böngészőben. Ahogy az 5. ábrán látható, a termékek most egy háromoszlopos, többsoros táblázatban jelennek meg.

5. ábra: Soronként három termék jelenik meg (ide kattintva megtekintheti a teljes méretű képet)

A RepeatDirection tulajdonság hatással van a DataList elemeinek beállítására. Az 5. ábrán az eredmények láthatók, és a RepeatDirection tulajdonság értéke a következő.Horizontal Vegye figyelembe, hogy az első három termék Chai, Chang, és ánizs szirup van elhelyezve balról jobbra, felülről lefelé. A következő három termék (a Chef Anton s Cajun Seasoning-től kezdve) az első három alatt egy sorban jelenik meg. A RepeatDirection tulajdonság visszaállítása Vertical-ra azonban fentről lefelé, balról jobbra rendezi el ezeket a termékeket, ahogy a 6. ábra szemlélteti.

6. ábra: Itt a termékek függőlegesen vannak elhelyezve (ide kattintva megtekintheti a teljes méretű képet)

Az eredményként kapott táblában megjelenített sorok száma a DataListhez kötött összes rekord számától függ. Pontosan ez az adatforráselemek teljes számának felső határa a RepeatColumns tulajdonság értékével osztva. Mivel a Products táblázat jelenleg 84 terméket tartalmaz, amelyek 3-tal oszthatóak, 28 sor van. Ha az adatforrásban lévő elemek száma és a RepeatColumns tulajdonság értéke nem osztható, akkor az utolsó sor vagy oszlop üres cellákkal fog rendelkezni. Ha a RepeatDirection beállítás értéke Vertical, akkor az utolsó oszlopban üres cellák lesznek, ha RepeatDirection igen Horizontal, akkor az utolsó sor üres cellái lesznek.

Összefoglalás

A DataList alapértelmezés szerint egy egyoszlopos, többsoros táblában jeleníti meg az elemeit, amely egy GridView elrendezését utánozza egyetlen TemplateField mezővel. Bár ez az alapértelmezett elrendezés elfogadható, maximalizálhatjuk a képernyő területét, ha soronként több adatforrást jelenítünk meg. Ennek elvégzése egyszerűen csak a DataList-tulajdonság RepeatColumns soronként megjelenítendő oszlopok számának megadásán múlik. Emellett a DataList tulajdonsága RepeatDirection azt is jelzi, hogy a többoszlopos, többsoros táblázat tartalmát vízszintesen kell-e elhelyezni balról jobbra, felülről lefelé vagy függőlegesen felülről lefelé, balról jobbra.

Tudnivalók a szerzőről

Scott Mitchell, hét ASP/ASP.NET-könyv szerzője és a 4GuysFromRolla.com alapítója, 1998 óta dolgozik a Microsoft webtechnológiáival. Scott független tanácsadóként, edzőként és íróként dolgozik. Legújabb könyve Sams Tanuld meg ASP.NET 2.0 24 óra alatt. Ő itt elérhető mitchell@4GuysFromRolla.com.

Külön köszönet

Ezt az oktatóanyag-sorozatot sok hasznos véleményező áttekintette. Az oktatóanyag vezető véleményezője John Suru volt. Szeretné áttekinteni a közelgő MSDN-cikkeimet? Ha igen, írj egy sort a mitchell@4GuysFromRolla.com-ra.

ElőzőKövetkező