Adatok megjelenítése a DataList és az Ismétlő vezérlőkkel (VB)

által Scott Mitchell

PDF letöltése

Az előző oktatóanyagokban a GridView vezérlőt használtuk az adatok megjelenítéséhez. Ebből az oktatóanyagból kiindulva a DataList és az Repeater vezérlőkkel közös jelentési mintákat építünk ki, kezdve az adatok ezen vezérlőkkel való megjelenítésének alapjaival.

Bevezetés

Az elmúlt 28 oktatóanyag összes példájában, ha több rekordot kellett megjeleníteni egy adatforrásból, a GridView vezérlőhöz fordultunk. A GridView egy sort jelenít meg az adatforrás minden rekordja számára, és oszlopban jeleníti meg a rekord s adatmezőit. Bár a GridView lehetővé teszi az adatok megjelenítését, lapozását, rendezését, szerkesztését és törlését, a megjelenése kissé dobozos. Ezenkívül a GridView szerkezetéért felelős jelölés rögzített, amely magában foglal egy HTML <table> elemet, minden rekordhoz egy táblázatsort (<tr>) és minden mezőhöz egy táblacellát (<td>).

Ha több rekord megjelenítésekor nagyobb mértékű testreszabást és renderelt korrektúrát szeretne biztosítani, ASP.NET 2.0 a DataList és az Repeater vezérlőket kínálja (amelyek ASP.NET 1.x verzióban is elérhetők voltak). A DataList és az Repeater vezérlők a BoundFields, a CheckBoxFields, a ButtonFields stb. helyett sablonokkal jelenítik meg a tartalmakat. A GridView-hoz hasonlóan a DataList IS HTML-ként <table>jelenik meg, de táblasoronként több adatforrásrekordot is megjeleníthet. A Repeater viszont nem jelenít meg további jelölést, mint amit explicit módon megad, és ideális jelölt, ha pontosan szeretné vezérelni a kibocsátott jelölést.

A következő több tucat oktatóanyagban a DataList és az Repeater vezérlőkkel közös jelentési mintákat fogunk felépíteni, kezdve az adatok ezen vezérlősablonokkal való megjelenítésének alapjaival. Megtudhatja, hogyan formázhatja ezeket a vezérlőket, hogyan módosíthatja az adatforrásrekordok elrendezését a DataListben, gyakori fő-/részletes forgatókönyveket, az adatok szerkesztésének és törlésének módjait, a rekordokon keresztüli lapozást stb.

1. lépés: A DataList és az Repeater oktatóanyag weblapjainak hozzáadása

Mielőtt elkezdenénk ezt az oktatóanyagot, először szánjunk egy kis időt az oktatóanyaghoz szükséges ASP.NET lapok hozzáadására, valamint az adatok DataList és Repeater használatával való megjelenítésével foglalkozó következő néhány oktatóanyagra. Először hozzon létre egy új mappát a projektben.DataListRepeaterBasics Ezután adja hozzá a következő öt ASP.NET lapot ehhez a mappához, amelyek mindegyike a mesterlap Site.masterhasználatára van konfigurálva:

• Default.aspx
• Basics.aspx
• Formatting.aspx
• RepeatColumnAndDirection.aspx
• NestedControls.aspx

1. ábra: Mappa létrehozása DataListRepeaterBasics és az oktatóanyag ASP.NET lapok hozzáadása

Nyissa meg a Default.aspx lapot, és húzza a SectionLevelTutorialListing.ascx Felhasználói vezérlőt a UserControls mappából a Tervező felületre. Ez a Felhasználói vezérlő, amelyet a Mesterlapok és a Webhelynavigációs oktatóanyagban hoztunk létre, számba adja a webhelytérképet, és megjeleníti a listajeles lista aktuális szakaszának oktatóanyagait.

2. ábra: Adja hozzá a SectionLevelTutorialListing.ascx felhasználói vezérlőt Default.aspx (kattintson ide a teljes méretű kép megtekintéséhez)

Ahhoz, hogy a listajeles lista megjelenítse a létrehozandó DataList és Repeater oktatóanyagokat, fel kell venni őket a webhelytérképre. Nyissa meg a Web.sitemap fájlt, és adja hozzá a következő korrektúrát az Egyéni gombok hozzáadása helytérkép csomópont korrektúra után:

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

3. ábra: A webhelytérkép frissítése az új ASP.NET lapok belefoglalására

2. lépés: Termékadatok megjelenítése a DataList használatával

A FormView-hoz hasonlóan, a DataList vezérlő renderelt kimenete sablonoktól függ, és nem a BoundFields, CheckBoxFields és hasonló mezőktől. A FormView-val ellentétben a DataList úgy van kialakítva, hogy ne egy egyedülálló rekordot, hanem egy rekordhalmazt jelenítsen meg. Kezdjük ezt az oktatóanyagot a termékinformációk DataListhez való kötésével. Először nyissa meg a Basics.aspx lapot a DataListRepeaterBasics mappában. Ezután húzzon egy DataList-et az eszközkészletből a Tervezőbe. Ahogy a 4. ábra szemlélteti, a DataList-sablonok megadása előtt a Tervező szürke mezőként jeleníti meg.

4. ábra: Húzza az adatlistát az eszközkészletből a Tervezőre (kattintson ide a teljes méretű kép megtekintéséhez)

A DataList intelligens címkéje alapján adjon hozzá egy új ObjectDataSource-t, és konfigurálja az ProductsBLL osztály s GetProducts metódusának használatára. Mivel ebben az oktatóanyagban írásvédett adatlistát hozunk létre, állítsa a legördülő listát (None) értékre a varázsló INSERT, UPDATE és DELETE lapján.

5. ábra: Új ObjectDataSource létrehozása (kattintson ide a teljes méretű kép megtekintéséhez)

6. ábra: Az ObjectDataSource konfigurálása az ProductsBLL osztály használatára (kattintson ide a teljes méretű kép megtekintéséhez)

7. ábra: Információk lekérése az összes termékről a GetProducts metódus használatával (kattintson ide a teljes méretű kép megtekintéséhez)

Miután konfigurálta az ObjectDataSource-t, és az intelligens címkén keresztül társította a DataListtel, a Visual Studio automatikusan létrehoz egy ItemTemplate olyan adatlistát a DataListben, amely megjeleníti az adatforrás által visszaadott egyes adatmezők nevét és értékét (lásd az alábbi korrektúrát). Ez az alapértelmezett ItemTemplate megjelenés megegyezik az automatikusan létrehozott sablonokkal, amikor adatforrást köt a FormView-hoz a Tervezőn keresztül.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Megjegyzés:

Ne feledje, hogy amikor egy adatforrást a FormView-vezérlőhöz köt a FormView intelligens címkéjén keresztül, a Visual Studio létrehozott egy ItemTemplate, InsertItemTemplateés EditItemTemplate. A DataList használatával azonban csak egy ItemTemplate jön létre. Ennek az az oka, hogy a DataList nem rendelkezik a FormView által kínált beépített szerkesztési és beszúrási támogatással. A DataList szerkesztéssel és törléssel kapcsolatos eseményeket tartalmaz, és a szerkesztési és törlési támogatás egy kis kóddal hozzáadható, de a FormView-hoz hasonlóan nincs egyszerű, beépített támogatás. Egy későbbi oktatóanyagban látni fogjuk, hogyan lehet a DataList használatával szerkeszteni és törölni a támogatást.

Szánjunk egy kis időt a sablon megjelenésének javítására. Az összes adatmező megjelenítése helyett csak a termék nevét, szállítóját, kategóriáját, egységenkénti mennyiségét és egységárát jelenítsük meg. Ezenkívül jelenítsük meg a nevet egy <h4> címsorban, és a többi mezőt <table> a címsor alá helyezve helyezzük el.

A módosítások elvégzéséhez használhatja a Tervező sablonszerkesztési funkcióit a DataList intelligens címkéjén, kattintson a Sablonok szerkesztése hivatkozásra, vagy manuálisan módosíthatja a sablont a lap deklaratív szintaxisán keresztül. Ha a Sablon szerkesztése lehetőséget használja a Tervezőben, előfordulhat, hogy az eredményül kapott korrektúra nem felel meg pontosan az alábbi korrektúrának, de ha böngészőben tekinti meg, akkor a 8. ábrán látható képernyőfelvételhez hasonlóan kell kinéznie.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Megjegyzés:

A fenti példa címke webvezérlőket használ, amelyek Text tulajdonsága az adatkötési szintaxis értékéhez van rendelve. Azt is megteheti, hogy teljesen kihagyja a címkéket, és csak az adatkötési szintaxist írja be. Vagyis ahelyett, hogy <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' />-t használnánk, használhattuk volna a deklaratív szintaxist <%# Eval("CategoryName") %>.

A címke webes vezérlőinek elhagyása azonban két előnyt kínál. Először is egyszerűbb módot biztosít az adatok adatok alapján történő formázására, amint azt a következő oktatóanyagban is látni fogjuk. Másodszor, a Sablon szerkesztése lehetőség a Tervezőben nem jeleníti meg a webes vezérlőn kívül megjelenő deklaratív adatkötési szintaxist. Ehelyett a Sablonok szerkesztése felület úgy lett kialakítva, hogy megkönnyítse a statikus korrektúra és a webes vezérlők használatát, és feltételezi, hogy az adatkötések a DataBindings szerkesztése párbeszédpanelen keresztül lesznek végrehajtva, amely a webes vezérlők intelligens címkéiből érhető el.

Ezért a DataList használata esetén, amely lehetővé teszi a sablonok tervezőn keresztüli szerkesztését, inkább címke webvezérlőket használok, hogy a tartalom elérhető legyen a Sablonok szerkesztése felületen keresztül. Amint rövidesen látni fogjuk, az Ismétlő megköveteli, hogy a sablon tartalma a Forrás nézetben legyen szerkesztve. Ezért az Repeater-sablonok készítésekor gyakran kihagyom a Címke webvezérlőket, hacsak nem tudom, hogy programozott logika alapján kell formáznom az adatkötésű szöveg megjelenését.

8. ábra: Minden termék kimenete a DataList-ek ItemTemplate használatával jelenik meg (ide kattintva megtekintheti a teljes méretű képet)

3. lépés: A DataList megjelenésének javítása

A GridView-hoz hasonlóan a DataList is számos stílushoz kapcsolódó tulajdonságot kínál, példáulFont, , ForeColor, BackColorCssClass, ItemStyle, AlternatingItemStyle, SelectedItemStylestb. Amikor a GridView és a DetailsView vezérlőkkel dolgozunk, létrehoztunk skin fájlokat a DataWebControls témában, amelyek előre meghatározták ezen két vezérlő CssClass tulajdonságait, valamint számos altulajdonságuk CssClass tulajdonságát (RowStyle, HeaderStyle stb.). Tegyük ugyanezt a DataList esetében is.

Ahogy az ObjectDataSource oktatóanyagban az Adatok megjelenítése című oktatóanyagban is bemutattuk, a Skin-fájl megadja egy webvezérlő alapértelmezett megjelenéssel kapcsolatos tulajdonságait; A téma olyan Skin-, CSS-, kép- és JavaScript-fájlok gyűjteménye, amelyek meghatároznak egy adott megjelenést és hangulatot egy webhelyhez. Az Adatok megjelenítése az ObjectDataSource oktatóanyagban létrehoztunk egy DataWebControls témát (amely mappaként lett implementálva a App_Themes mappán belül), amely jelenleg két Skin-fájlt tartalmaz - GridView.skin és DetailsView.skin. Adjunk hozzá egy harmadik Skin-fájlt a DataList előre definiált stílusbeállításainak megadásához.

Bőrfájl hozzáadásához kattintson a jobb gombbal a mappára, válassza az App_Themes/DataWebControls Új elem hozzáadása lehetőséget, és válassza a Bőrfájl lehetőséget a listából. A fájl neve legyen DataList.skin.

9. ábra: Új bőrfájl létrehozása elnevezve DataList.skin (kattintson ide a teljes méretű kép megtekintéséhez)

Használja a következő korrektúrát a DataList.skin fájlhoz:

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

Ezek a beállítások ugyanazokat a CSS-osztályokat rendelik a megfelelő DataList-tulajdonságokhoz, mint amelyeket a GridView és a DetailsView vezérlők használnak. Az itt DataWebControlStyleAlternatingRowStyleRowStylehasznált CSS-osztályok, stb. a Styles.css fájlban vannak definiálva, és a korábbi oktatóanyagokban lettek hozzáadva.

A Skin-fájl hozzáadásával a DataList megjelenése frissül a Tervezőben (előfordulhat, hogy frissítenie kell a Tervező nézetet az új Bőrfájl hatásainak megtekintéséhez; a Nézet menüBen válassza a Frissítés lehetőséget). Ahogy a 10. ábra mutatja, minden váltakozó termék világos rózsaszín háttérszínnel rendelkezik.

10. ábra: Új bőrfájl létrehozása elnevezve DataList.skin (kattintson ide a teljes méretű kép megtekintéséhez)

4. lépés: A DataList egyéb sablonjainak felfedezése

A DataList a ItemTemplate mellett hat további választható sablont is támogat.

• HeaderTemplate ha meg van adva, hozzáad egy fejlécsort a kimenethez, és a sor megjelenítésére szolgál
• AlternatingItemTemplate váltakozó elemek megjelenítésére szolgál
• SelectedItemTemplatea kijelölt elem megjelenítésére szolgál; a kijelölt elem az az elem, amelynek indexe megfelel a DataList-tulajdonságnakSelectedIndex
• EditItemTemplate a szerkesztett elem megjelenítéséhez használatos
• SeparatorTemplate ha meg van adva, elválasztót ad hozzá az egyes elemekhez, és az elválasztó megjelenítésére szolgál
• FooterTemplate - ha meg van adva, egy láblécsort ad hozzá a kimenethez, és ennek a sornak a megjelenítésére szolgál

Amikor a HeaderTemplate vagy a FooterTemplate van megadva, a DataList egy további élőfej- vagy élőlábsort ad hozzá a renderelt kimenethez. A GridView fejléc- és lábléc soraihoz hasonlóan a DataList fejléc és lábléc sem nincsenek adatokhoz kötve. Ezért az HeaderTemplate vagy FooterTemplate adatközvetítési szintaxisok, amelyek megpróbálnak hozzáférni a kötött adatokhoz, üres karakterláncot adnak vissza.

Megjegyzés:

Ahogy a GridView láblécében történő összefoglaló adatok megjelenítése című oktatóanyagban láttuk, bár az élőfej- és élőlábsorok nem támogatják az adatkötési szintaxist, az adatspecifikus információk közvetlenül ezekbe a sorokba szúrhatók be a GridView eseménykezelő segítségével RowDataBound. Ez a technika használható a vezérlőhöz kötött adatokból származó futó összegek vagy egyéb információk kiszámítására, valamint az élőlábhoz való hozzárendelésére is. Ugyanez a fogalom alkalmazható a DataList és az Repeater vezérlőkre is; az egyetlen különbség az, hogy a DataList és az Repeater esetében egy eseménykezelőt hoz létre az ItemDataBound eseményhez (az RowDataBound esemény helyett).

Példánkban a Termékadatok cím jelenik meg a DataList s-eredmények tetején egy <h3> címsorban. Ehhez szúrjon be egy HeaderTemplate megfelelő jelöléssel. A Tervezőben ez úgy valósítható meg, hogy a DataList intelligens címkéjén a Sablonok szerkesztése hivatkozásra kattint, kiválasztja a fejlécsablont a legördülő listából, és beírja a szöveget, miután kiválasztotta a Címsor 3 lehetőséget a stílus legördülő listából (lásd a 11. ábrát).

11. ábra: Adjon hozzá egy HeaderTemplate szöveges termékinformációt (kattintson ide a teljes méretű kép megtekintéséhez)

Ezt deklaratív módon is hozzáadhatja, ha a következő jelölést beírja a <asp:DataList> címkék közé:

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

Adjuk hozzá a SeparatorTemplate elemet, amely egy sort tartalmaz minden terméklista szakasz közé, hogy egy kis helyet adjunk az egyes terméklisták közé. A vízszintes szabálycímke (<hr>) hozzáad egy ilyen elválasztót. Hozza létre a SeparatorTemplate, hogy a következő jelölést tartalmazza:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Megjegyzés:

A HeaderTemplate-hoz és a FooterTemplates-hez hasonlóan az SeparatorTemplate sincs kötve az adatforrásból származó rekordhoz, ezért nem fér hozzá közvetlenül a DataList-hez kötött adatforrás rekordjaihoz.

A hozzáadás után a lap böngészőn keresztüli megtekintésekor a 12. ábrához hasonlóan kell kinéznie. Figyelje meg a fejlécsort és az egyes terméklisták közötti vonalat.

12. ábra: A DataList tartalmaz egy fejlécsort és egy vízszintes szabályt az egyes terméklisták között (ide kattintva megtekintheti a teljes méretű képet)

5. lépés: Adott korrektúra megjelenítése az Ismétlő vezérlővel

Ha a 12. ábrán szereplő DataList-példa felkeresésekor a böngészőből végez nézetet/forrást, akkor látni fogja, hogy a DataList egy HTML-fájlt <table> bocsát ki, amely egy táblázatsort (<tr>) tartalmaz egyetlen táblázatcellával (<td>) a DataListhez kötött minden egyes elemhez. Ez a kimenet valójában megegyezik azzal, amit egy GridView-ból egyetlen TemplateField használatával bocsátanak ki. Ahogy egy későbbi oktatóanyagban látni fogjuk, a DataList lehetővé teszi a kimenet további testreszabását, lehetővé téve, hogy táblasoronként több adatforrásrekordot jelenítsünk meg.

Mi a teendő, ha nem szeretne HTML-t <table>kibocsátani? A data-webvezérlő által létrehozott jelölés teljes mértékű vezérléséhez a Repeater vezérlőt kell használnunk. A DataListhez hasonlóan az repeater is sablonok alapján készül. Az Repeater azonban csak a következő öt sablont kínálja:

• HeaderTemplate ha meg van adva, hozzáadja a megadott jelölést az elemek előtt
• ItemTemplate elemek megjelenítésére szolgál
• AlternatingItemTemplate ha meg van adva, váltakozó elemek megjelenítésére szolgál
• SeparatorTemplate ha meg van adva, akkor hozzáadja a megadott jelölést az egyes elemek közé
• FooterTemplate - ha meg van adva, hozzáadja a megadott jelölést az elemek után

ASP.NET 1.x-ben a Repeater vezérlőt gyakran használták egy felsorolásos lista megjelenítésére, amelynek adatai valamilyen adatforrásból származnak. Ilyen esetben az HeaderTemplate és FooterTemplates a nyitó és a záró <ul> címkét is tartalmazza, míg a ItemTemplate<li> databinding szintaxissal rendelkező elemeket. Ez a módszer továbbra is használható a ASP.NET 2.0-ban, amint azt a Mesterlapok és a Webhelynavigációs oktatóanyag két példájában láttuk:

• Site.master A mesterlapon a Repeater segítségével jeleníthető meg a legfelső szintű webhelytérkép tartalmának felsorolása (Alapszintű Jelentéskészítés, Szűrési Jelentések, Testreszabott Formázás stb.). Egy másik, beágyazott Repeater pedig a legfelső szintű szakaszok alárendelt szakaszait jeleníti meg.
• Ebben SectionLevelTutorialListing.ascxaz esetben egy repeaterrel jeleníthető meg az aktuális webhelytérkép szakasz gyermekszakaszainak listajeles listája

Megjegyzés:

ASP.NET 2.0 bemutatja az új ListajelesVezérlőt, amely adatforrás-vezérlőhöz köthető egyszerű listajelek megjelenítéséhez. A Listajeles lista vezérlővel nem kell megadni a listához kapcsolódó HTML-eket; ehelyett csak az egyes listaelemek szövegként megjelenítendő adatmezőjét jelöljük meg.

A Repeater általános adat Web vezérlőként szolgál. Ha nincs olyan vezérlő, amely létrehozza a szükséges korrektúrát, az Ismétlő vezérlő használható. Az Ismétlő használatának szemléltetéséhez jelenítse meg a kategóriák listáját a 2. lépésben létrehozott Termékinformációs adatlista felett. Tegyük fel, hogy a kategóriák egysoros HTML-ben <table> jelennek meg, és minden kategória oszlopként jelenik meg a táblázatban.

Ehhez először húzzon egy Repeater vezérlőt a Toolboxból a Tervezőre, a Termékinformációs adatlista fölé. A DataListhez hasonlóan az Ismétlő kezdetben szürke mezőként jelenik meg, amíg meg nem határozták a sablonjait.

13. ábra: Ismétlő hozzáadása a tervezőhöz (kattintson ide a teljes méretű kép megtekintéséhez)

Az Repeater intelligens címkéjében csak egy lehetőség van: Adatforrás kiválasztása. Döntsön úgy, hogy létrehoz egy új ObjectDataSource-t, és konfigurálja az CategoriesBLL osztály GetCategories metódusának használatára.

14. ábra: Új ObjectDataSource létrehozása (ide kattintva megtekintheti a teljes méretű képet)

15. ábra: Az ObjectDataSource konfigurálása az osztály használatára (CategoriesBLL teljes méretű kép megtekintéséhez)

16. ábra: Az összes kategória adatainak lekérése a GetCategories módszerrel (kattintson ide a teljes méretű kép megtekintéséhez)

A DataListtel ellentétben a Visual Studio nem hoz létre automatikusan ItemTemplate-et az ismétlőhöz, miután egy adatforráshoz kötötte. Ezenkívül az Repeater-sablonok nem konfigurálhatók a Tervezőn keresztül, és deklaratív módon kell megadni.

Ha a kategóriákat egysorosként <table> szeretné megjeleníteni az egyes kategóriákhoz tartozó oszlopokkal, akkor a repeaternek az alábbihoz hasonló korrektúrát kell kibocsátania:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

Mivel a <td>Category X</td> szöveg az ismétlődő rész, ez megjelenik az Repeater s ItemTemplate-ban. Az előtte megjelenő jelölés - <table><tr> - el lesz helyezve a HeaderTemplate-be, míg a záró jelölés - </tr></table> - a FooterTemplate-ba kerül. A sablonbeállítások megadásához nyissa meg a ASP.NET lap deklaratív részét a bal alsó sarokban található Forrás gombra kattintva, és írja be a következő szintaxist:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

A Repeater a sablonok által megadott pontos jelöléseket bocsátja ki, semmi több, semmi kevesebb. A 17. ábra az Repeater kimenetét jeleníti meg böngészőben való megtekintéskor.

17. ábra: Egy Single-Row HTML <table> külön oszlopban listázza az egyes kategóriákat (ide kattintva megtekintheti a teljes méretű képet)

6. lépés: Az ismétlő megjelenésének javítása

Mivel a Repeater pontosan a sablonjai által megadott jelölőnyelvet adja ki, nem meglepő, hogy a Repeaternek nincsenek stílushoz kapcsolódó jellemzői. Az ismétlő által létrehozott tartalom megjelenésének módosításához manuálisan kell hozzáadnunk a szükséges HTML- vagy CSS-tartalmat közvetlenül az Repeater-sablonokhoz.

Példánkban a kategóriaoszlopok háttérszínei váltakozó színekkel rendelkezzenek, hasonlóan a DataList váltakozó soraiban alkalmazotthoz. Ehhez a RowStyle CSS-osztályt minden Repeater-elemhez és a AlternatingRowStyle CSS-osztályhoz minden váltakozó ismétlőelemhez hozzá kell rendelnünk a ItemTemplate sablonokon AlternatingItemTemplate keresztül, például:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Adjon hozzá egy fejlécsort is a kimenethez a termékkategóriák szöveggel. Mivel nem tudjuk, hány oszlopból fog állni az eredmény <table> , a legegyszerűbben úgy hozhat létre fejlécsort, hogy garantáltan az összes oszlopot lefedi, ha két<table> s-t használ. Az első <table> két sort tartalmaz a fejlécsort és egy sort, amelyek a második, egysoros sort <table> tartalmazzák, amely a rendszer minden kategóriájához tartalmaz egy oszlopot. Vagyis a következő jelölést szeretnénk kibocsátani:

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

A következő HeaderTemplate és FooterTemplate a kívánt jelöléshez vezetnek:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

A 18. ábrán az Repeater látható a módosítások elvégzése után.

18. ábra: A kategóriaoszlopok háttérszínben váltakozva és fejlécsort tartalmaznak (ide kattintva megtekintheti a teljes méretű képet)

Összefoglalás

Bár a GridView vezérlő megkönnyíti az adatok megjelenítését, szerkesztését, törlését, rendezését és lapozását, a megjelenés nagyon dobozos és rácsszerű. A megjelenés további szabályozásához a DataList vagy az Repeater vezérlőket kell bekapcsolnunk. Mindkét vezérlő a BoundFields, a CheckBoxFields stb. helyett sablonokat használó rekordokat jelenít meg.

A DataList HTML-ként <table> jelenik meg, amely alapértelmezés szerint az egyes adatforrásrekordokat egyetlen táblázatsorban jeleníti meg, akárcsak az egyetlen TemplateFieldet tartalmazó GridView. Ahogy egy későbbi oktatóanyagban látni fogjuk, a DataList lehetővé teszi, hogy táblasoronként több rekord jelenjen meg. A Repeater viszont szigorúan kibocsátja a sablonjaiban megadott jelölőnyelvet; nem ad hozzá további jelölőnyelvet, ezért gyakran használják adatok megjelenítésére más HTML-elemekben, mint például egy <table> (például listajeles listában).

Bár a DataList és az Repeater nagyobb rugalmasságot biztosít a renderelt kimenetben, a GridView-ban található számos beépített funkció hiányzik belőlük. Ahogy a közelgő oktatóanyagokban is megvizsgáljuk, ezen funkciók némelyike túl sok erőfeszítés nélkül csatlakoztatható vissza, de ne feledje, hogy a DataList vagy az Repeater használata a GridView helyett korlátozza a használható funkciókat anélkül, hogy ezeket a funkciókat saját maga kellene implementálnia.

Boldog programozást!

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ői Yaakov Ellis, Liz Shulok, Randy Schmidt és Stacy Park voltak. Szeretné áttekinteni a közelgő MSDN-cikkeimet? Ha igen, írj egy sort a mitchell@4GuysFromRolla.com-ra.

ElőzőKövetkező