Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
door Scott Mitchell
In de voorgaande zelfstudies hebben we het besturingselement GridView gebruikt om gegevens weer te geven. Vanaf deze zelfstudie kijken we naar het bouwen van algemene rapportagepatronen met de besturingselementen DataList en Repeater, te beginnen met de basisprincipes van het weergeven van gegevens met deze besturingselementen.
Introductie
In alle voorbeelden in de afgelopen 28 zelfstudies, als we meerdere records uit een gegevensbron moesten weergeven, hebben we het rasterweergavebesturingselement ingeschakeld. In GridView wordt een rij weergegeven voor elke record in de gegevensbron, waarin de gegevensvelden van de records in kolommen worden weergegeven. Hoewel de GridView het eenvoudig maakt om gegevens weer te geven, te bladeren, te sorteren, te bewerken en te verwijderen, is het uiterlijk een beetje vierkant. Bovendien is de opmaak die verantwoordelijk is voor de structuur van GridView vast; het bevat een HTML <table> met een tabelrij (<tr>) voor elke record en een tabelcel (<td>) voor elk veld.
Als u een grotere mate van aanpassing wilt in het uiterlijk en de weergegeven markup voor het weergeven van meerdere records, biedt ASP.NET 2.0 de besturingselementen DataList en Repeater (beide zijn ook beschikbaar in ASP.NET versie 1.x). De besturingselementen DataList en Repeater geven hun inhoud weer met behulp van sjablonen in plaats van BoundFields, CheckBoxFields, ButtonFields, enzovoort. Net als bij GridView wordt de DataList weergegeven als HTML <table>, maar kan meerdere gegevensbronrecords per tabelrij worden weergegeven. De repeater geeft daarentegen geen extra markeringen weer dan wat u expliciet opgeeft en is een ideale kandidaat wanneer u nauwkeurige controle nodig hebt over de gegenereerde markeringen.
In de volgende dozijn zelfstudies kijken we naar het bouwen van algemene rapportagepatronen met de besturingselementen DataList en Repeater, te beginnen met de basisprincipes van het weergeven van gegevens met deze besturingselementensjablonen. We zien hoe u deze besturingselementen opmaakt, hoe u de indeling van gegevensbronrecords wijzigt in de DataList, algemene hoofd-/detailsscenario's, manieren om gegevens te bewerken en te verwijderen, hoe u door records bladert, enzovoort.
Stap 1: De webpagina's voor de DataList- en Repeater-zelfstudie toevoegen
Voordat we aan deze zelfstudie beginnen, gaan we eerst de ASP.NET pagina's toevoegen die we nodig hebben voor deze zelfstudie en de volgende zelfstudies die te maken hebben met het weergeven van gegevens met behulp van de DataList en Repeater. Begin met het maken van een nieuwe map in het project met de naam DataListRepeaterBasics. Voeg vervolgens de volgende vijf ASP.NET pagina's toe aan deze map, waarbij ze allemaal zijn geconfigureerd voor het gebruik van de basispagina Site.master:
Default.aspxBasics.aspxFormatting.aspxRepeatColumnAndDirection.aspxNestedControls.aspx
Afbeelding 1: Een map maken DataListRepeaterBasics en de ASP.NET-pagina's van de tutorial toevoegen
Open de Default.aspx pagina en sleep het SectionLevelTutorialListing.ascx gebruikersbeheer vanuit de UserControls map naar het ontwerpoppervlak. Dit gebruikerscontrole-element, dat we hebben gemaakt in de zelfstudie Basispagina's en Sitenavigatie, somt het siteoverzicht op en geeft de zelfstudies van het huidige gedeelte weer in een lijst met bulletpoints.
Afbeelding 2: Het gebruikersbesturingselement toevoegen SectionLevelTutorialListing.ascx aan Default.aspx (klik om de afbeelding op volledige grootte weer te geven)
Als u wilt dat de opsomming de handleidingen DataList en Repeater weergeeft die we zullen maken, moeten we ze toevoegen aan het siteoverzicht. Open het Web.sitemap bestand en voeg de volgende markeringen toe na de markup van het siteoverzichtsknooppunt Aangepaste Knoppen Toevoegen:
<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>
Afbeelding 3: Het siteoverzicht bijwerken om de nieuwe ASP.NET-pagina's op te nemen
Stap 2: Productinformatie weergeven met de DataList
Net als bij FormView is de weergegeven uitvoer van het DataList-besturingselement afhankelijk van sjablonen in plaats van BoundFields, CheckBoxFields, enzovoort. In tegenstelling tot de FormView is de DataList ontworpen om een set records weer te geven in plaats van slechts één. Laten we deze zelfstudie beginnen met het koppelen van productinformatie aan een DataList. Open eerst de Basics.aspx pagina in de DataListRepeaterBasics map. Versleep vervolgens een DataList uit de Toolbox naar de Ontwerper. Zoals geïllustreerd in afbeelding 4, wordt de DataList door de Ontwerper weergegeven als een grijs vak voordat u de DataList-sjablonen specificeert.
Afbeelding 4: Sleep de DataList van de werkset naar de ontwerpfunctie (klik om de afbeelding op volledige grootte weer te geven)
Voeg vanuit de slimme tag van DataList een nieuwe ObjectDataSource toe en configureer deze om de ProductsBLL methode van de GetProducts klasse te gebruiken. Omdat we in deze zelfstudie een alleen-lezen DataList maken, stelt u de vervolgkeuzelijst in op (Geen) in de tabbladen INSERT, UPDATE en DELETE van de wizard.
Afbeelding 5: Kies ervoor om een nieuwe ObjectDataSource te maken (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 6: De ObjectDataSource configureren om de ProductsBLL klasse te gebruiken (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 7: Informatie ophalen over alle producten met behulp van de GetProducts methode (klik om de afbeelding op volledige grootte weer te geven)
Nadat u de ObjectDataSource hebt geconfigureerd en deze hebt gekoppeld aan de DataList via de smart tag, maakt Visual Studio automatisch een ItemTemplate in de DataList die de naam en waarde weergeeft van elk gegevensveld dat door de gegevensbron wordt geretourneerd (zie de onderstaande markeringen). Deze standaardweergave ItemTemplate is identiek aan die van de sjablonen die automatisch worden gemaakt wanneer een gegevensbron via de ontwerpfunctie aan de FormView wordt gekoppeld.
<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>
Opmerking
Vergeet niet dat Visual Studio een ItemTemplate, InsertItemTemplate, en EditItemTemplate heeft aangemaakt toen u een gegevensbron aan een FormView-besturingselement bindt via de smarttag van FormView. Met de DataList wordt echter alleen een ItemTemplate gemaakt. Dit komt doordat de DataList niet beschikt over dezelfde ingebouwde ondersteuning voor bewerken en invoegen van de FormView. De DataList bevat bewerkings- en verwijdergebeurtenissen en ondersteuning voor bewerken en verwijderen kan worden toegevoegd met een beetje code, maar er is geen eenvoudige out-of-the-box-ondersteuning zoals bij de FormView. In een toekomstige zelfstudie ziet u hoe u ondersteuning voor bewerken en verwijderen van de DataList kunt opnemen.
Laten we even de tijd nemen om het uiterlijk van deze sjabloon te verbeteren. In plaats van alle gegevensvelden weer te geven, laten we alleen de productnaam, leverancier, categorie, hoeveelheid per eenheid en eenheidsprijs weergeven. Bovendien laten we de naam in een <h4> kop weergeven en de resterende velden met behulp van een <table> onder de kop indelen.
Als u deze wijzigingen wilt aanbrengen, kunt u de functies voor het bewerken van sjablonen in de ontwerpfunctie gebruiken vanuit de infotag van DataList op de koppeling Sjablonen bewerken of kunt u de sjabloon handmatig wijzigen via de declaratieve syntaxis van de pagina. Als u de optie Sjablonen bewerken in de ontwerpfunctie gebruikt, komen de resulterende markeringen mogelijk niet exact overeen met de volgende markeringen, maar als u deze in een browser bekijkt, moet dit er ongeveer uitzien als in afbeelding 8.
<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>
Opmerking
In het bovenstaande voorbeeld worden Label-webbesturingselementen gebruikt waarvan de eigenschap Text de waarde van de gegevensbindingssyntaxis toegewezen krijgt. U kunt de labels ook helemaal weglaten, waarbij alleen de syntaxis van de gegevensbinding wordt getypt. Dat wil zeggen, in plaats van <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> hadden we de declaratieve syntaxis <%# Eval("CategoryName") %> kunnen gebruiken.
Het verlaten van de labelwebbesturingselementen biedt echter twee voordelen. Ten eerste is het eenvoudiger om de gegevens op te maken op basis van de gegevens, zoals we in de volgende zelfstudie zullen zien. Ten tweede geeft de optie Sjablonen bewerken in de ontwerpfunctie geen declaratieve gegevensbindingsyntaxis weer die buiten een bepaald webbesturingselement wordt weergegeven. In plaats daarvan is de interface Sjablonen bewerken ontworpen om het werken met statische markeringen en webbesturingselementen te vergemakkelijken en ervan uit te gaan dat gegevensbindingen worden uitgevoerd via het dialoogvenster DataBindings bewerken, dat toegankelijk is via de infolabels voor webbesturingselementen.
Daarom gebruik ik bij het werken met de DataList, die de mogelijkheid biedt om de sjablonen te bewerken via de ontwerpfunctie, liever labelwebbesturingselementen zodat de inhoud toegankelijk is via de interface Sjablonen bewerken. Zoals we binnenkort zullen zien, moet de inhoud van de sjabloon worden bewerkt vanuit de bronweergave. Daarom laat ik bij het maken van de Repeater-sjablonen vaak de label-webbesturingselementen weg, tenzij ik weet dat ik de weergave van de gegevensgebonden tekst moet wijzigen op basis van programmatische logica.
Afbeelding 8: De uitvoer van elk product wordt weergegeven met behulp van de DataList s ItemTemplate (Klik hier om de volledige afbeelding weer te geven)
Stap 3: het uiterlijk van de DataList verbeteren
Net als bij GridView biedt de DataList een aantal stijlgerelateerde eigenschappen, zoals Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyle, enzovoort. Bij het werken met de besturingselementen GridView en DetailsView hebben we Skin-bestanden gemaakt in het DataWebControls thema dat de CssClass eigenschappen voor deze twee besturingselementen vooraf heeft gedefinieerd en de CssClass eigenschap voor verschillende subproperties (RowStyle, HeaderStyleenzovoort). Laten we hetzelfde doen voor de DataList.
Zoals besproken in de zelfstudie Gegevens weergeven met de ObjectDataSource-zelfstudie , geeft een Skin-bestand de standaardeigenschappen op die betrekking hebben op het uiterlijk van een webbesturingselement; een thema is een verzameling Skin-, CSS-, afbeeldings- en JavaScript-bestanden die een bepaald uiterlijk voor een website definiëren. In de zelfstudie Gegevens weergeven met de ObjectDataSource-zelfstudie hebben we een DataWebControls thema gemaakt (dat is geïmplementeerd als een map in de App_Themes map) met momenteel twee Skin-bestanden - GridView.skin en DetailsView.skin. Laten we een derde Skin-bestand toevoegen om de vooraf gedefinieerde stijlinstellingen voor de DataList op te geven.
Als u een Skin-bestand wilt toevoegen, klikt u met de rechtermuisknop op de App_Themes/DataWebControls map, kiest u Een nieuw item toevoegen en selecteert u de optie Huidbestand in de lijst. Geef het bestand de naam DataList.skin.
Afbeelding 9: Maak een nieuw skinbestand met de naam DataList.skin (klik hier om de volledige afbeelding weer te geven)
Gebruik de volgende markeringen voor het DataList.skin bestand:
<asp:DataList runat="server" CssClass="DataWebControlStyle">
<AlternatingItemStyle CssClass="AlternatingRowStyle" />
<ItemStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<FooterStyle CssClass="FooterStyle" />
<SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>
Met deze instellingen worden dezelfde CSS-klassen toegewezen aan de juiste DataList-eigenschappen als die zijn gebruikt met de besturingselementen GridView en DetailsView. De CSS-klassen die hier DataWebControlStyleworden gebruikt, AlternatingRowStyleenzovoort RowStyle, worden gedefinieerd in het Styles.css bestand en zijn toegevoegd in eerdere zelfstudies.
Met de toevoeging van dit Skin-bestand wordt het uiterlijk van de DataList bijgewerkt in de ontwerpfunctie (mogelijk moet u de ontwerpweergave vernieuwen om de effecten van het nieuwe Skin-bestand te zien; kies Vernieuwen in het menu Beeld). Zoals in afbeelding 10 wordt weergegeven, heeft elk afwisselend product een lichtroze achtergrondkleur.
Afbeelding 10: Maak een nieuw skinbestand met de naam DataList.skin (klik om de afbeelding op volledige grootte weer te geven)
Stap 4: De andere sjablonen van DataList verkennen
Naast de ItemTemplate, de DataList ondersteunt zes andere optionele sjablonen:
-
HeaderTemplateindien opgegeven, wordt een veldnamenrij aan de uitvoer toegevoegd en gebruikt om deze rij te renderen -
AlternatingItemTemplatewordt gebruikt om afwisselende items weer te geven -
SelectedItemTemplatewordt gebruikt om het geselecteerde item weer te geven; het geselecteerde item is het item waarvan de index overeenkomt met de eigenschap DataListSelectedIndex -
EditItemTemplatewordt gebruikt om het item weer te geven dat wordt bewerkt -
SeparatorTemplateals het is opgegeven, voegt het een scheidingsteken toe tussen elk item en wordt het gebruikt om het scheidingsteken weer te geven -
FooterTemplate- indien opgegeven, voegt een voettekstrij toe aan de output en wordt gebruikt om deze rij weer te geven
Wanneer u de HeaderTemplate of FooterTemplateopgeeft, voegt de DataList een extra kop- of voettekstrij toe aan de weergegeven uitvoer. Net als bij de kop- en voettekstrijen van GridView zijn de kop- en voettekst in een DataList niet gebonden aan gegevens. Daarom retourneert elke syntaxis voor gegevensbinding in de HeaderTemplate of FooterTemplate die probeert toegang te krijgen tot afhankelijke gegevens een lege tekenreeks.
Opmerking
Zoals we in de zelfstudie Overzichtsinformatie weergeven in de GridView-footer hebben behandeld, ondersteunen de kop- en voettekstrijen geen syntaxis voor gegevensbinding, maar gegevensspecifieke informatie kan rechtstreeks in deze rijen geïnjecteerd worden vanuit de GridView-evenementhandler RowDataBound. Deze techniek kan worden gebruikt om zowel lopende totalen als andere gegevens te berekenen van de gegevens die aan het besturingselement zijn gebonden en om die informatie toe te wijzen aan de voettekst. Hetzelfde concept kan worden toegepast op de besturingselementen DataList en Repeater; het enige verschil is dat voor de DataList en Repeater een gebeurtenis-handler voor de ItemDataBound gebeurtenis wordt gemaakt (in plaats van voor de RowDataBound gebeurtenis).
In ons voorbeeld laten we de titel Productinformatie bovenaan de Resultaten van de DataList weergeven in een <h3> kop. Voeg hiervoor een HeaderTemplate met de juiste opmaak toe. Vanuit de ontwerpfunctie kunt u dit doen door te klikken op de koppeling Sjablonen bewerken in de smarttag van DataList, de kopsjabloon te kiezen in de vervolgkeuzelijst en in de tekst te typen nadat u de optie Kop 3 hebt gekozen in de vervolgkeuzelijst stijl (zie afbeelding 11).
Afbeelding 11: Voeg een HeaderTemplate toe met de tekst Productinformatie (Klik hier om de afbeelding op volledige grootte weer te geven)
U kunt dit ook declaratief toevoegen door de volgende markeringen in de <asp:DataList> tags in te voeren:
<HeaderTemplate>
<h3>Product Information</h3>
</HeaderTemplate>
Als u een beetje ruimte wilt toevoegen tussen elke productvermelding, kunt u een SeparatorTemplate regel tussen elke sectie toevoegen. Met de horizontale regeltag (<hr>) wordt een dergelijke scheidingslijn toegevoegd. Maak de SeparatorTemplate notatie zodat deze de volgende markeringen heeft:
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
Opmerking
Net als de HeaderTemplate en FooterTemplates, is het SeparatorTemplate niet gebonden aan een record uit de gegevensbron en heeft daarom geen rechtstreeks toegang tot de gegevensbronrecords die zijn gebonden aan de DataList.
Nadat u deze toevoeging hebt gemaakt, moet de pagina er als volgt uitzien als in afbeelding 12 wanneer u de pagina bekijkt via een browser. Let op de kopregel en de lijn tussen elke productvermelding.
Afbeelding 12: De DataList bevat een veldnamenrij en een horizontale regel tussen elke productvermelding (klik om de volledige afbeelding weer te geven)
Stap 5: Specifieke markeringen weergeven met het besturingselement Repeater
Als u een weergave/bron vanuit uw browser uitvoert bij het bezoeken van het DataList-voorbeeld uit afbeelding 12, ziet u dat de DataList een HTML <table> verzendt die een tabelrij (<tr>) bevat met één tabelcel (<td>) voor elk item dat is gebonden aan de DataList. Deze uitvoer is in feite identiek aan wat zou worden verzonden vanuit een GridView met één TemplateField. Zoals we in een toekomstige zelfstudie zullen zien, staat DataList verdere aanpassing van de uitvoer toe, zodat we meerdere gegevensbronrecords per tabelrij kunnen weergeven.
Wat als u echter geen HTML <table>wilt verzenden? Voor het totale en volledige beheer van de markeringen die door een gegevenswebbesturing zijn gegenereerd, moeten we het besturingselement Repeater gebruiken. Net als de DataList wordt de Repeater samengesteld op basis van sjablonen. De Repeater biedt echter alleen de volgende vijf sjablonen:
-
HeaderTemplateindien opgegeven, voegt u de opgegeven markeringen toe vóór de items -
ItemTemplatewordt gebruikt om items weer te geven -
AlternatingItemTemplateindien opgegeven, gebruikt om afwisselende items weer te geven -
SeparatorTemplateindien opgegeven, voegt u de opgegeven markeringen toe tussen elk item -
FooterTemplate- indien opgegeven, voegt u de opgegeven markeringen toe na de items
In ASP.NET 1.x werd het besturingselement Repeater vaak gebruikt om een lijst met opsommingstekens weer te geven waarvan de gegevens afkomstig zijn uit een bepaalde gegevensbron. In dit geval zouden de HeaderTemplate en FooterTemplates respectievelijk de opening en sluiting van de <ul> tags bevatten, terwijl de ItemTemplate elementen met de syntaxis van gegevensbinding zouden bevatten <li>. Deze benadering kan nog steeds worden gebruikt in ASP.NET 2.0, zoals we hebben gezien in twee voorbeelden in de zelfstudie Basispagina's en Sitenavigatie :
- Op de
Site.masterhoofdpagina werd een repeater gebruikt om een lijst met opsommingstekens weer te geven van de inhoud van de sitemap op het hoogste niveau (Basisrapportage, Filterrapporten, Aangepaste opmaak, enzovoort); een andere geneste repeater werd gebruikt om de onderliggende secties van de hoofdniveausecties weer te geven - In
SectionLevelTutorialListing.ascx, is een Repeater gebruikt om een lijst met opsommingstekens weer te geven van de onderliggende secties van de huidige sitemapsectie.
Opmerking
ASP.NET 2.0 introduceert het nieuwe besturingselement BulletedList, dat kan worden gebonden aan een gegevensbronbesturingselement om een eenvoudige lijst met opsommingstekens weer te geven. Met het besturingselement Opsommingstekenlijst hoeven we geen van de lijstgerelateerde HTML-code op te geven; In plaats daarvan geven we gewoon het gegevensveld aan dat moet worden weergegeven als de tekst voor elk lijstitem.
De Repeater fungeert als een algemene gegevenswebcomponent. Als er geen bestaand besturingselement is dat de benodigde markeringen genereert, kan het besturingselement Repeater worden gebruikt. Ter illustratie van het gebruik van de Repeater, laten we de lijst met categorieën weergeven boven de productinformatiegegevenslijst die in stap 2 is gemaakt. Laten we met name de categorieën weergeven in html met één rij <table> , waarbij elke categorie wordt weergegeven als een kolom in de tabel.
Om dit te bereiken, sleep een Repeater-bedieningselement uit de Gereedschapskist naar de Ontwerper, boven de DataList Productinformatie. Net als bij de DataList wordt de repeater in eerste instantie weergegeven als een grijs vak totdat de sjablonen zijn gedefinieerd.
Afbeelding 13: Een repeater toevoegen aan de ontwerpfunctie (klik om de afbeelding op volledige grootte weer te geven)
Er is slechts één optie in de slimme label van de Repeater: Gegevensbron kiezen. Kies ervoor om een nieuwe ObjectDataSource te maken en deze te configureren voor het gebruik van de CategoriesBLL klasse GetCategories methode.
Afbeelding 14: Een nieuwe ObjectDataSource maken (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 15: De ObjectDataSource configureren om de CategoriesBLL klasse te gebruiken (klik om de afbeelding op volledige grootte weer te geven)
Afbeelding 16: Informatie ophalen over alle categorieën met behulp van de GetCategories methode (klik om de afbeelding op volledige grootte weer te geven)
In tegenstelling tot de DataList maakt Visual Studio niet automatisch een ItemTemplate voor de Repeater nadat deze is gekoppeld aan een gegevensbron. Bovendien kunnen de repeater-sjablonen niet worden geconfigureerd via de ontwerpfunctie en moeten ze declaratief worden opgegeven.
Als u de categorieën wilt weergeven als één rij <table> met een kolom voor elke categorie, moeten we de repeater gebruiken om markeringen te verzenden die vergelijkbaar zijn met de volgende:
<table>
<tr>
<td>Category 1</td>
<td>Category 2</td>
...
<td>Category N</td>
</tr>
</table>
Omdat de <td>Category X</td> tekst het gedeelte is dat wordt herhaald, wordt dit weergegeven in itemtemplate van Repeater. De markering die ervoor wordt weergegeven - <table><tr> - zal worden geplaatst in de HeaderTemplate, terwijl de eindmarkering - </tr></table> - zal worden geplaatst in de FooterTemplate. Als u deze sjablooninstellingen wilt invoeren, gaat u naar het declaratieve gedeelte van de pagina ASP.NET door op de knop Bron in de linkerbenedenhoek te klikken en de volgende syntaxis in te voeren:
<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>
De repeater verzendt de exacte markering zoals opgegeven door de sjablonen, niets meer, niets minder. Afbeelding 17 toont de uitvoer van de repeater wanneer deze wordt weergegeven via een browser.
Afbeelding 17: Een Single-Row HTML <table> bevat elke categorie in een afzonderlijke kolom (klik om de afbeelding op volledige grootte weer te geven)
Stap 6: het uiterlijk van de repeater verbeteren
Omdat de repeater precies de markering verzendt die door de sjablonen is opgegeven, zou het geen verrassing moeten zijn dat er geen stijlgerelateerde eigenschappen zijn voor de Repeater. Als u het uiterlijk van de inhoud wilt wijzigen die door de Repeater wordt gegenereerd, moet u handmatig de benodigde HTML- of CSS-inhoud rechtstreeks toevoegen aan de sjablonen van Repeater.
In ons voorbeeld laten we de categoriekolommen afwisselend achtergrondkleuren gebruiken, zoals met de afwisselende rijen in de DataList. Hiervoor moeten we de RowStyle CSS-klasse toewijzen aan elk Repeater-item en de AlternatingRowStyle CSS-klasse aan elk afwisselend repeater-item via de ItemTemplate en AlternatingItemTemplate sjablonen, zoals:
<ItemTemplate>
<td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
<td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>
Laten we ook een koprij toevoegen aan de uitvoer met de tekst Productcategorieën. Omdat we niet weten uit hoeveel kolommen onze resulterende <table> zal bestaan, is de eenvoudigste manier om een koprij te genereren die gegarandeerd alle kolommen overspant het gebruik van twee<table> s. De eerste <table> bevat twee rijen de veldnamenrij en een rij die de tweede, één rij <table> bevat met een kolom voor elke categorie in het systeem. Dat wil gezegd, we willen de volgende markeringen verzenden:
<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>
Het volgende HeaderTemplate en FooterTemplate resulteert in de gewenste markeringen:
<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>
In afbeelding 18 ziet u de repeater nadat deze wijzigingen zijn aangebracht.
Afbeelding 18: De categoriekolommen wisselen af in achtergrondkleur en bevat een veldnamenrij (klik om de afbeelding op volledige grootte weer te geven)
Samenvatting
Hoewel het rasterweergavebesturingselement het eenvoudig maakt om gegevens weer te geven, te bewerken, te verwijderen, te sorteren en door te bladeren, is het uiterlijk zeer boxy en rasterachtig. Voor meer controle over het uiterlijk moeten we kiezen voor de controls DataList of Repeater. Beide controles geven een set records weer met behulp van sjablonen in plaats van BoundFields, CheckBoxFields, enzovoort.
De DataList wordt weergegeven als een HTML <table> die standaard elke gegevensbronrecord in één tabelrij weergeeft, net als een GridView met één TemplateField. Zoals we in een toekomstige zelfstudie zullen zien, staat DataList echter toe dat meerdere records per tabelrij worden weergegeven. De Repeater verzendt daarentegen strikt de markeringen die in de sjablonen zijn opgegeven; er worden geen extra markeringen toegevoegd en daarom wordt vaak gebruikt voor het weergeven van gegevens in ANDERE HTML-elementen dan een <table> (zoals in een lijst met opsommingstekens).
Hoewel De DataList en Repeater meer flexibiliteit bieden in hun gerenderde uitvoer, ontbreken er veel van de ingebouwde functies in de GridView. Zoals we in toekomstige zelfstudies gaan onderzoeken, kunnen sommige van deze functies zonder te veel moeite weer worden aangesloten, maar houd er rekening mee dat het gebruik van de DataList of Repeater in plaats van de GridView de functies beperkt die u kunt gebruiken zonder dat u deze functies zelf hoeft te implementeren.
Veel plezier met programmeren!
Over de auteur
Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.
Speciale dank aan
Deze tutorialreeks is beoordeeld door veel behulpzame beoordelers. Hoofdrevisoren voor deze zelfstudie waren Yaakov Ellis, Liz Shulok, Randy Schmidt en Stacy Park. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.