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 deze korte zelfstudie leert u hoe u de indeling van de DataList aanpast via de eigenschappen RepeatColumns en RepeatDirection.
Introductie
De DataList-voorbeelden die we in de laatste twee tutorials hebben gezien, hebben elke record uit de gegevensbron weergegeven als een rij in een HTML <table> met één kolom. Hoewel dit het standaardgedrag van DataList is, is het heel eenvoudig om de DataList-weergave aan te passen, zodat de gegevensbronitems worden verdeeld over een tabel met meerdere kolommen en meerdere rijen. Bovendien is het mogelijk om alle gegevensbronitems weer te geven in een DataList met één rij met meerdere kolommen.
We kunnen de indeling van DataList aanpassen via RepeatColumns de bijbehorende eigenschappen RepeatDirection , die respectievelijk aangeven hoeveel kolommen worden weergegeven en of deze items verticaal of horizontaal zijn ingedeeld. In afbeelding 1 wordt bijvoorbeeld een DataList weergegeven waarin productgegevens in een tabel met drie kolommen worden weergegeven.
Afbeelding 1: In de DataList worden drie producten per rij weergegeven (klik om de afbeelding op volledige grootte weer te geven)
Door meerdere gegevensbronitems per rij weer te geven, kan datalist effectiever horizontale schermruimte gebruiken. In deze korte zelfstudie verkennen we deze twee DataList-eigenschappen.
Stap 1: Productinformatie weergeven in een DataList
Voordat we de RepeatColumns en RepeatDirection eigenschappen bekijken, gaan we eerst een DataList maken op onze pagina met productgegevens met behulp van de standaardtabelindeling met één kolom en meerdere rijen. In dit voorbeeld laten we de naam, categorie en prijs van het product weergeven met behulp van de volgende markeringen:
<h4>Product Name</h4>
Available in the Category Name store for Price
We hebben gezien hoe we in eerdere voorbeelden gegevens kunnen binden aan een DataList, dus ik ga deze stappen snel doorlopen. Open eerst de RepeatColumnAndDirection.aspx pagina in de DataListRepeaterBasics map en sleep een DataList uit de Werkset naar de ontwerpfunctie. Kies vanuit de DataList-slimtag om een nieuwe ObjectDataSource te creëren en configureer deze om zijn gegevens op te halen uit de ProductsBLL klasse's GetProducts methode, waarbij u de optie (Geen) kiest in de INSERT-, UPDATE- en DELETE-tabbladen van de wizard.
Nadat u de nieuwe ObjectDataSource hebt gemaakt en gekoppeld aan de DataList, maakt Visual Studio automatisch een ItemTemplate dat de naam en waarde van elk van de productgegevensvelden weergeeft. Pas de ItemTemplate opmaak rechtstreeks aan via de declaratieve markeringen of via de optie Sjablonen bewerken in de infolabel van DataList, zodat deze gebruikmaakt van de bovenstaande markeringen, waarbij u de tekst Productnaam, Categorienaam en Prijs vervangt door labelbesturingselementen die de juiste syntaxis voor gegevensbinding gebruiken om waarden toe te wijzen aan hun Text eigenschappen. Na het bijwerken van de ItemTemplate zou de declaratieve markup er ongeveer als volgt uit moeten zien:
<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>
U ziet dat ik een formatspecificatie in de gegevensbindingssyntaxis heb toegevoegd voor de EvalUnitPrice, waarmee de geretourneerde waarde als valuta wordt opgemaakt - Eval("UnitPrice", "{0:C}").
Neem even de tijd om uw pagina in een browser te bezoeken. Zoals in afbeelding 2 wordt weergegeven, wordt de DataList weergegeven als een tabel met meerdere rijen met producten met één kolom.
Afbeelding 2: De DataList wordt standaard weergegeven als een tabel met één kolom, meerdere rijen (klik om de volledige afbeelding weer te geven)
Stap 2: de indelingsrichting van de gegevenslijst wijzigen
Hoewel het standaardgedrag voor de DataList is om de items verticaal in te delen in een tabel met één kolom, kan dit gedrag eenvoudig worden gewijzigd via de eigenschap DataListRepeatDirection. De RepeatDirection eigenschap kan een van de twee mogelijke waarden accepteren: Horizontal of Vertical (de standaardwaarde).
Als u de RepeatDirection eigenschap wijzigt van Vertical in Horizontal, worden de records in één rij weergegeven, waarbij één kolom per gegevensbronitem wordt gemaakt. Als u dit effect wilt illustreren, klikt u op DataList in de ontwerper en wijzigt u vervolgens in het venster Eigenschappen de eigenschap RepeatDirection van Vertical naar Horizontal. Als u dit meteen doet, past de ontwerpfunctie de indeling van DataList aan, waardoor er een interface met één rij met meerdere kolommen wordt gemaakt (zie afbeelding 3).
Afbeelding 3: De RepeatDirection eigenschap bepaalt hoe de gegevenslijstitems in de richting zijn ingedeeld (klik hier om de volledige afbeelding weer te geven)
Wanneer u kleine hoeveelheden gegevens weergeeft, kan een tabel met één rij en meerdere kolommen een ideale manier zijn om de schermruimte optimaal te benutten. Voor grotere hoeveelheden gegevens vereist één rij echter talloze kolommen, waardoor deze items die niet aan het scherm kunnen worden aangepast, naar rechts worden gepusht. In afbeelding 4 ziet u de producten wanneer ze worden weergegeven in een DataList met één rij. Omdat er veel producten (meer dan 80) zijn, moet de gebruiker ver naar rechts schuiven om informatie over elk van de producten weer te geven.
Afbeelding 4: Voor voldoende grote gegevensbronnen is horizontaal schuiven vereist voor een gegevenslijst met één kolom (klik om de volledige afbeelding weer te geven)
Stap 3: Gegevens weergeven in een tabel met meerdere kolommen, meerdere rijen
Als u een DataList met meerdere kolommen wilt maken, moet u de RepeatColumns eigenschap instellen op het aantal kolommen dat moet worden weergegeven. De eigenschap is standaard RepeatColumns ingesteld op 0, waardoor de DataList alle items in één rij of kolom weergeeft (afhankelijk van de waarde van de RepeatDirection eigenschap).
In ons voorbeeld laten we drie producten per tabelrij weergeven. Stel de RepeatColumns eigenschap daarom in op 3. Nadat u deze wijziging hebt aangebracht, kunt u de resultaten in een browser bekijken. Zoals in afbeelding 5 wordt weergegeven, worden de producten nu weergegeven in een tabel met drie kolommen met meerdere rijen.
Afbeelding 5: Er worden drie producten per rij weergegeven (klik om de afbeelding op volledige grootte weer te geven)
De RepeatDirection eigenschap is van invloed op de wijze waarop de items in de DataList worden ingedeeld. In afbeelding 5 ziet u de resultaten waarbij de RepeatDirection eigenschap is ingesteld op Horizontal. Houd er rekening mee dat de eerste drie producten Chai, Chang en Aniseed siroop van links naar rechts, van boven naar beneden worden gelegd. De volgende drie producten (beginnend met Chef Anton s Cajun Seasoning) verschijnen in een rij onder de eerste drie. Als u de RepeatDirection eigenschap weer wijzigt in Vertical, worden deze producten echter van boven naar beneden, van links naar rechts weergegeven, zoals in afbeelding 6 wordt geïllustreerd.
Afbeelding 6: Hier worden de producten verticaal ingedeeld (klik hier om de volledige afbeelding weer te geven)
Het aantal rijen dat in de resulterende tabel wordt weergegeven, is afhankelijk van het aantal records dat is gebonden aan de DataList. Precies, het is het plafond van het totale aantal gegevensbronitems gedeeld door de RepeatColumns eigenschapswaarde. Aangezien de Products tabel momenteel 84 producten heeft, die deelbaar is door 3, zijn er 28 rijen. Als het aantal items in de gegevensbron en de RepeatColumns eigenschapswaarde niet deelbaar zijn, bevat de laatste rij of kolom lege cellen. Als de RepeatDirection kolom is ingesteld op Vertical, bevat de laatste kolom lege cellen. RepeatDirection Als dat het is Horizontal, bevat de laatste rij de lege cellen.
Samenvatting
De DataList bevat standaard de items in een tabel met één kolom, met meerdere rijen, die de indeling van een GridView nabootst met één TemplateField. Hoewel deze standaardindeling acceptabel is, kunnen we het scherm maximaliseren door meerdere gegevensbronitems per rij weer te geven. Dit doet u door de eigenschap DataList RepeatColumns in te stellen op het aantal kolommen dat per rij moet worden weergegeven. Daarnaast kan de eigenschap DataList RepeatDirection worden gebruikt om aan te geven of de inhoud van de tabel met meerdere kolommen en rijen horizontaal moet worden uitgelijnd van links naar rechts, van boven naar beneden, of verticaal van boven naar beneden, links naar rechts.
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. Hoofdrecensent voor deze zelfstudie was John Suru. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.