Paging en sorteren van rapportgegevens (VB)

door Scott Mitchell

PDF downloaden

Paging en sortering zijn twee veelvoorkomende functies bij het weergeven van gegevens in een onlinetoepassing. In deze zelfstudie gaan we eerst kijken naar het toevoegen van sortering en paging aan onze rapporten, waar we vervolgens verder op gaan in toekomstige zelfstudies.

Introductie

Paging en sortering zijn twee veelvoorkomende functies bij het weergeven van gegevens in een onlinetoepassing. Wanneer u bijvoorbeeld zoekt naar ASP.NET boeken in een onlineboekwinkel, zijn er mogelijk honderden van dergelijke boeken, maar het rapport met de zoekresultaten bevat slechts tien overeenkomsten per pagina. Bovendien kunnen de resultaten worden gesorteerd op titel, prijs, paginaaantal, auteursnaam, enzovoort. Hoewel in de afgelopen 23 zelfstudies is onderzocht hoe u verschillende rapporten maakt, waaronder interfaces die het toevoegen, bewerken en verwijderen van gegevens toestaan, hebben we niet gekeken naar het sorteren van gegevens en de enige pagingvoorbeelden die we hebben gezien, zijn met de besturingselementen DetailsView en FormView.

In deze zelfstudie ziet u hoe u sortering en paging toevoegt aan onze rapporten, wat u kunt doen door een paar selectievakjes in te schakelen. Helaas heeft deze eenvoudige implementatie enkele nadelen; de sorteerinterface laat te wensen over en de pagingroutines zijn niet ontworpen om efficiënt door grote resultaatsets te bladeren. In toekomstige handleidingen wordt uitgelegd hoe je de beperkingen van de standaard paging- en sorteeroplossingen kunt overwinnen.

Stap 1: De webpagina's van de zelfstudie over paginering en sortering toevoegen

Voordat we aan deze zelfstudie beginnen, gaan we eerst even de ASP.NET pagina's toevoegen die we nodig hebben voor deze zelfstudie en de volgende drie. Begin met het maken van een nieuwe map in het project met de naam PagingAndSorting. 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.aspx
• SimplePagingSorting.aspx
• EfficientPaging.aspx
• SortParameter.aspx
• CustomSortingUI.aspx

Afbeelding 1: Een PagingAndSorting-map maken en de zelfstudie ASP.NET-pagina's toevoegen

Open vervolgens de Default.aspx pagina en sleep het SectionLevelTutorialListing.ascx gebruikersbeheer van de UserControls map naar het ontwerpoppervlak. Deze gebruikerscontrole, die we hebben gemaakt in de tutorial Basispagina's en Sitenavigatie, enumereert de sitemap en toont die tutorials in de huidige sectie in een lijst met opsommingstekens.

Afbeelding 2: Voeg de gebruikerscontrole SectionLevelTutorialListing.ascx toe aan Default.aspx

Om ervoor te zorgen dat de opsommingstekenlijst de pagineren- en sorterencursussen weergeeft die we gaan maken, moeten we ze toevoegen aan de sitemap. Open het Web.sitemap bestand en voeg de volgende markeringen toe na het bewerken, invoegen en verwijderen van siteoverzichtknooppuntmarkeringen:

<siteMapNode title="Paging and Sorting" url="~/PagingAndSorting/Default.aspx"
    description="Samples of Reports that Provide Paging and Sorting Capabilities">
    <siteMapNode url="~/PagingAndSorting/SimplePagingSorting.aspx"
        title="Simple Paging & Sorting Examples"
        description="Examines how to add simple paging and sorting support." />
    <siteMapNode url="~/PagingAndSorting/EfficientPaging.aspx"
        title="Efficiently Paging Through Large Result Sets"
        description="Learn how to efficiently page through large result sets." />
    <siteMapNode url="~/PagingAndSorting/SortParameter.aspx"
        title="Sorting Data at the BLL or DAL"
        description="Illustrates how to perform sorting logic in the Business Logic
        Layer or Data Access Layer." />
    <siteMapNode url="~/PagingAndSorting/CustomSortingUI.aspx"
        title="Customizing the Sorting User Interface"
        description="Learn how to customize and improve the sorting user interface." />
</siteMapNode>

Afbeelding 3: Het siteoverzicht bijwerken om de nieuwe ASP.NET-pagina's op te nemen

Stap 2: Productgegevens weergeven in een GridView

Voordat we pagina- en sorteermogelijkheden daadwerkelijk implementeren, gaan we eerst een standaard niet-sorteerbare, niet-paginabare GridView maken waarin de productgegevens worden vermeld. Dit is een taak die we eerder in deze reeks zelfstudies hebben uitgevoerd, zodat deze stappen vertrouwd moeten zijn. Open de SimplePagingSorting.aspx pagina en sleep een GridView-besturingselement van de Toolbox naar de ontwerpfunctie, waarbij u de eigenschap ID instelt op Products. Maak vervolgens een nieuwe ObjectDataSource die gebruikmaakt van de methode ProductsBLL-klasse GetProducts() om alle productgegevens te retourneren.

Afbeelding 4: Informatie ophalen over alle producten met behulp van de methode GetProducts()

Omdat dit rapport een alleen-lezenrapport is, hoeft u de ObjectDataSource-s Insert()of Update()Delete() methoden niet toe te wijzen aan bijbehorende ProductsBLL methoden. Kies daarom (Geen) in de vervolgkeuzelijst voor de tabbladen UPDATE, INSERT en DELETE.

Afbeelding 5: Kies de optie (Geen) in de Drop-Down Lijst in de tabbladen UPDATE, INSERT en DELETE

Vervolgens gaan we de velden van GridView aanpassen, zodat alleen de namen van producten, leveranciers, categorieën, prijzen en stopgezette statussen worden weergegeven. Bovendien kunt u alle opmaakwijzigingen op veldniveau aanbrengen, zoals het aanpassen van de HeaderText eigenschappen of het opmaken van de prijs als valuta. Na deze wijzigingen moet de declaratieve markering van GridView er ongeveer als volgt uitzien:

<asp:GridView ID="Products" AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            SortExpression="CategoryName" ReadOnly="True" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            SortExpression="SupplierName" ReadOnly="True" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

Afbeelding 6 toont onze voortgang tot nu toe wanneer deze wordt bekeken via een browser. Houd er rekening mee dat op de pagina alle producten in één scherm worden weergegeven, met de naam, categorie, leverancier, prijs en stopgezette status van elk product.

Afbeelding 6: Elk van de producten wordt vermeld (klik hier om de volledige afbeelding weer te geven)

Stap 3: Ondersteuning voor paging toevoegen

Het weergeven van alle producten op één scherm kan leiden tot informatie-overload voor de gebruiker die de gegevens doorneemt. Om de resultaten beter beheersbaar te maken, kunnen we de gegevens opsplitsen in kleinere pagina's met gegevens en de gebruiker in staat stellen om de gegevens één pagina tegelijk te doorlopen. Hiervoor vinkt u het selectievakje 'Paging inschakelen' aan in de smart tag van de GridView (hiermee wordt de eigenschap van de GridView, AllowPaging, ingesteld op true).

Afbeelding 7: Schakel het selectievakje Paging inschakelen in om ondersteuning voor paging toe te voegen (klik om de afbeelding op volledige grootte weer te geven)

Door paging in te schakelen, wordt het aantal records dat per pagina wordt weergegeven, beperkt en wordt een paging-interface toegevoegd aan de GridView. De standaard pagineringsinterface, weergegeven in afbeelding 7, is een reeks paginanummers, zodat de gebruiker snel van de ene pagina met gegevens naar de andere kan navigeren. Deze paginering-interface moet er bekend uitzien, zoals we hebben gezien bij het toevoegen van paginering-ondersteuning aan de DetailsView- en FormView-besturingselementen in eerdere tutorials.

Zowel de besturingselementen DetailsView als FormView geven slechts één record per pagina weer. GridView raadpleegt PageSize echter de eigenschap om te bepalen hoeveel records per pagina moeten worden weergegeven (deze eigenschap is standaard ingesteld op een waarde van 10).

Deze paginginterface van GridView, DetailsView en FormView kan worden aangepast met behulp van de volgende eigenschappen:

• PagerStyle geeft de stijlinformatie voor de pagineringinterface aan; kan instellingen opgeven, zoals BackColor, ForeColor, CssClass, HorizontalAlign enzoovoort.

• PagerSettings bevat een groot aantal eigenschappen die de functionaliteit van de paging-interface kunnen aanpassen; PageButtonCount geeft het maximum aantal numerieke paginanummers aan dat wordt weergegeven in de paging-interface (de standaardwaarde is 10); de Mode eigenschap geeft aan hoe de paging-interface werkt en kan worden ingesteld op:

  • NextPrevious toont de knoppen Volgende en Vorige, zodat de gebruiker één pagina tegelijk vooruit of achteruit kan gaan
  • NextPreviousFirstLast Naast de knoppen Volgende en Vorige zijn ook de knoppen Eerste en Laatste opgenomen, zodat de gebruiker snel naar de eerste of laatste pagina met gegevens kan gaan
  • Numeric toont een reeks paginanummers, zodat de gebruiker onmiddellijk naar een willekeurige pagina kan gaan
  • NumericFirstLast naast de paginanummers bevat de knoppen Eerste en Laatste, zodat de gebruiker snel naar de eerste of laatste pagina met gegevens kan gaan; de knoppen Eerste/Laatste worden alleen weergegeven als alle numerieke paginanummers niet passen

Bovendien bieden de GridView, DetailsView en FormView allemaal de eigenschappen PageIndex en PageCount, die respectievelijk aangeven welke pagina momenteel wordt bekeken en het totale aantal pagina's met gegevens. De PageIndex eigenschap wordt geïndexeerd vanaf 0, wat betekent dat bij het weergeven van de eerste pagina met gegevens PageIndex gelijk is aan 0. PageCount, daarentegen, begint te tellen bij 1, wat betekent dat dat PageIndex beperkt is tot de waarden tussen 0 en PageCount - 1.

Laten we even de tijd nemen om de standaardweergave van de paging-interface van GridView te verbeteren. Laten we met name de paging-interface rechts laten uitlijnen op een lichtgrijze achtergrond. In plaats van de eigenschappen direct in te stellen via de eigenschap van de GridView PagerStyle, laten we een CSS-klasse maken genaamd Styles.css in PagerRowStyle en vervolgens de eigenschap van PagerStyleCssClass toewijzen via ons thema. Begin met het openen Styles.css en toevoegen van de volgende CSS-klassedefinitie:

.PagerRowStyle
{
    background-color: #ddd;
    text-align: right;
}

Volgende, open het GridView.skin bestand in de DataWebControls map binnen de App_Themes map. Zoals we hebben besproken in de zelfstudie Basispagina's en Sitenavigatie , kunnen Skin-bestanden worden gebruikt om de standaardeigenschapswaarden voor een webbesturingselement op te geven. Vergroot daarom de bestaande instellingen om de PagerStyle eigenschap s CssClass in te stellen op PagerRowStyle. Laten we ook de paging-interface configureren om maximaal vijf numerieke paginaknoppen weer te geven met behulp van de NumericFirstLast paging-interface.

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
   <PagerStyle CssClass="PagerRowStyle" />
   <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

De gebruikerservaring met paginering

Afbeelding 8 toont de webpagina zoals deze verschijnt wanneer deze wordt bezocht via een browser, nadat het selectievakje 'Paging inschakelen' van de GridView is aangevinkt en de PagerStyle en PagerSettings configuraties zijn toegepast via het GridView.skin bestand. Let op hoe slechts tien records worden weergegeven en de paging-interface geeft aan dat we de eerste pagina met gegevens bekijken.

Afbeelding 8: Als paging is ingeschakeld, worden alleen een subset van de records tegelijk weergegeven (klik om de volledige afbeelding weer te geven)

Wanneer de gebruiker op een van de paginanummers in de pagineringsinterface klikt, volgt er een postback en wordt de pagina opnieuw geladen met de records van de aangevraagde pagina. In afbeelding 9 ziet u de resultaten nadat u hebt gekozen om de laatste pagina met gegevens weer te geven. U ziet dat de laatste pagina slechts één record heeft; dit komt doordat er in totaal 81 records zijn, wat resulteert in acht pagina's van 10 records per pagina plus één pagina met een eenzame record.

Afbeelding 9: Als u op een paginanummer klikt, wordt een terugdraaiactie veroorzaakt en wordt de juiste subset van records weergegeven (klik om de volledige afbeelding weer te geven)

Paging-Server-Side-werkstroom

Wanneer de eindgebruiker op een knop in de pagineringsinterface klikt, wordt een postback gevolgd en wordt de volgende werkstroom aan de serverzijde gestart:

1. De GridView-gebeurtenis (of DetailsView of FormView) PageIndexChanging wordt geactiveerd
2. ObjectDataSource vraagt alle gegevens van de BLL opnieuw aan; de rasterweergave- PageIndex en PageSize eigenschapswaarden worden gebruikt om te bepalen welke records die worden geretourneerd door de BLL moeten worden weergegeven in de GridView
3. De gebeurtenis van GridView wordt PageIndexChanged geactiveerd

In stap 2 vraagt ObjectDataSource alle gegevens opnieuw op uit de gegevensbron. Deze stijl van paging wordt meestal standaard paging genoemd, omdat dit het gedrag van paging is dat standaard wordt gebruikt bij het instellen van de AllowPaging eigenschap trueop . Met standaard paginering van de webcontroller voor gegevens worden alle records voor elke pagina met gegevens opgehaald, ook al wordt slechts een subset van records daadwerkelijk weergegeven in de HTML die naar de browser wordt verzonden. Tenzij de databasegegevens in de cache worden opgeslagen door de BLL of ObjectDataSource, is standaard paginering onwerkbaar voor voldoende grote resultatenverzamelingen of voor webtoepassingen met veel gelijktijdige gebruikers.

In de volgende zelfstudie bekijken we hoe u aangepaste paginering implementeert. Met aangepaste paging kunt u de ObjectDataSource specifiek instrueren om alleen de exacte set records op te halen die nodig zijn voor de aangevraagde pagina met gegevens. Zoals u zich kunt voorstellen, verbetert aangepaste paging de efficiëntie van paging via grote resultatensets aanzienlijk.

Opmerking

Hoewel standaard paginering niet geschikt is bij het pagineren via voldoende grote resultatensets of voor sites met veel gelijktijdige gebruikers, realiseert u zich dat voor aangepaste paginering meer wijzigingen en inspanningen nodig zijn om te implementeren en niet zo eenvoudig is als het inschakelen van een selectievakje (zoals standaard paginering). Daarom kan standaard paging de ideale keuze zijn voor kleine websites met weinig verkeer of bij het paglen van relatief kleine resultatensets, omdat het veel eenvoudiger en sneller te implementeren is.

Als we bijvoorbeeld weten dat we nooit meer dan 100 producten in onze database hebben, wordt de minimale prestatiewinst die wordt genoten door aangepaste paginering waarschijnlijk gecompenseerd door de inspanningen die nodig zijn om deze te implementeren. Als we echter op een dag duizenden of tienduizenden producten kunnen hebben, zou het niet implementeren van aangepaste paging de schaalbaarheid van onze toepassing aanzienlijk belemmeren.

Stap 4: De paging-ervaring aanpassen

De besturingselementen voor het gegevensweb bieden een aantal eigenschappen die kunnen worden gebruikt om de pagineringservaring van de gebruiker te verbeteren. De PageCount eigenschap geeft bijvoorbeeld aan hoeveel pagina's er zijn, terwijl de PageIndex eigenschap aangeeft dat de huidige pagina wordt bezocht en kan worden ingesteld om een gebruiker snel naar een specifieke pagina te verplaatsen. Om te laten zien hoe u deze eigenschappen kunt gebruiken om de pagineringservaring van de gebruiker te verbeteren, kunt u een labelwebbesturing toevoegen aan onze pagina waarmee de gebruiker op de hoogte wordt gesteld van de pagina die ze momenteel bezoeken, samen met een besturingselement DropDownList waarmee ze snel naar een bepaalde pagina kunnen springen.

Voeg eerst een Label-webcontrole toe aan uw pagina, stel de ID-eigenschap in op PagingInformation en wis de Text-eigenschap. Maak vervolgens een gebeurtenis-handler voor de GridView-gebeurtenis DataBound en voeg de volgende code toe:

Protected Sub Products_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Products.DataBound
    PagingInformation.Text = String.Format("You are viewing page {0} of {1}...", _
        Products.PageIndex + 1, Products.PageCount)
End Sub

Met deze gebeurtenis-handler wordt de PagingInformation eigenschap Label s Text toegewezen aan een bericht waarin de gebruiker wordt geïnformeerd welke pagina's ze momenteel bezoeken Products.PageIndex + 1 van het totale aantal pagina's Products.PageCount (we voegen 1 toe aan de Products.PageIndex eigenschap omdat PageIndex deze wordt geïndexeerd vanaf 0). Ik heb de eigenschap Label s Text toegewezen in de DataBound gebeurtenis-handler in plaats van de PageIndexChanged gebeurtenis-handler omdat de DataBound gebeurtenis wordt geactiveerd telkens wanneer gegevens aan GridView zijn gebonden, terwijl de PageIndexChanged gebeurtenis-handler alleen wordt geactiveerd wanneer de pagina-index wordt gewijzigd. Wanneer de GridView in eerste instantie afhankelijk is van het eerste paginabezoek, wordt de PageIndexChanging gebeurtenis niet geactiveerd (terwijl de DataBound gebeurtenis dat wel doet).

Met deze toevoeging wordt nu een bericht weergegeven dat aangeeft welke pagina ze bezoeken en hoeveel pagina's er zijn met gegevens.

Afbeelding 10: Het huidige paginanummer en het totale aantal pagina's worden weergegeven (klik om de volledige afbeelding weer te geven)

Naast het besturingselement Label voegen we ook een besturingselement Voor vervolgkeuzelijsten toe waarin de paginanummers in de GridView worden weergegeven, waarbij de momenteel bekeken pagina is geselecteerd. Het idee hier is dat de gebruiker snel van de huidige pagina naar een andere kan springen door simpelweg de nieuwe pagina-index te selecteren in de vervolgkeuzelijst. Begin met het toevoegen van een DropDownList aan de ontwerperinterface, stel vervolgens de eigenschap op ID in op PageList, en vink de optie Enable AutoPostBack aan vanuit het slimme label.

Ga vervolgens terug naar de DataBound gebeurtenis-handler en voeg de volgende code toe:

' Clear out all of the items in the DropDownList
PageList.Items.Clear()
' Add a ListItem for each page
For i As Integer = 0 To Products.PageCount - 1
    ' Add the new ListItem
    Dim pageListItem As New ListItem(String.Concat("Page ", i + 1), i.ToString())
    PageList.Items.Add(pageListItem)
    ' select the current item, if needed
    If i = Products.PageIndex Then
        pageListItem.Selected = True
    End If
Next

Deze code begint met het wissen van de items in de PageList vervolgkeuzelijst. Dit lijkt overbodig, omdat men niet verwacht dat het aantal pagina's wordt gewijzigd, maar andere gebruikers kunnen het systeem tegelijkertijd gebruiken, records toevoegen aan of verwijderen uit de Products tabel. Dergelijke invoegingen of verwijderingen kunnen het aantal pagina's met gegevens wijzigen.

Vervolgens moeten we de paginanummers opnieuw maken en de paginanummer selecteren die standaard gekoppeld is aan de huidige GridView PageIndex. We doen dit met een lus van 0 tot PageCount - 1, waarbij we bij elke iteratie een nieuwe ListItem toevoegen en de eigenschap Selected instellen op waar als de huidige iteratie-index gelijk is aan de eigenschap PageIndex van de GridView.

Ten slotte moeten we een gebeurtenis-handler maken voor de dropdownlist-gebeurtenis SelectedIndexChanged , die telkens wordt geactiveerd wanneer de gebruiker een ander item uit de lijst kiest. Als u deze gebeurtenis-handler wilt maken, dubbelklikt u op de vervolgkeuzelijst in de ontwerpfunctie en voegt u de volgende code toe:

Protected Sub PageList_SelectedIndexChanged(sender As Object, e As System.EventArgs) _
    Handles PageList.SelectedIndexChanged
        ' Jump to the specified page
        Products.PageIndex = Convert.ToInt32(PageList.SelectedValue)
End Sub

Zoals in afbeelding 11 wordt weergegeven, zorgt het wijzigen van de eigenschap GridView PageIndex ervoor dat de gegevens opnieuw worden hersteld naar de GridView. In de gebeurtenis-handler van DataBound GridView is de juiste DropDownList ListItem geselecteerd.

Afbeelding 11: De gebruiker wordt automatisch naar de zesde pagina geleid bij het selecteren van het lijstitem pagina 6 Drop-Down (klik om de volledige afbeelding weer te geven)

Stap 5: ondersteuning voor Bi-Directional sorteren toevoegen

Het toevoegen van ondersteuning voor bidirectionele sortering is net zo eenvoudig als het toevoegen van ondersteuning voor paginering. Selecteer de optie 'Sorteren inschakelen' vanuit de smart tag van GridView (waarmee de eigenschap van GridView wordt ingesteld op AllowSorting). Hiermee worden alle kopteksten van de GridView-velden weergegeven als LinkButtons die, wanneer erop wordt geklikt, een postback veroorzaken en de gegevens retourneren die zijn gesorteerd op de opgeslagen kolom in oplopende volgorde. Als u op dezelfde koptekst LinkButton klikt, worden de gegevens opnieuw in aflopende volgorde gesorteerd.

Opmerking

Als u een aangepaste Gegevenstoegangslaag gebruikt in plaats van een getypte gegevensset, hebt u mogelijk geen optie Sorteren inschakelen in de smart tag van GridView. Alleen GridViews die afhankelijk zijn van gegevensbronnen die systeemeigen ondersteuning bieden voor sorteren, hebben dit selectievakje beschikbaar. De Getypeerde DataSet biedt ondersteuning voor sorteren direct uit de doos, omdat de ADO.NET DataTable een Sort methode biedt waarmee de DataRows van de Gegevenstabel worden gesorteerd op basis van de opgegeven criteria.

Als uw DAL geen objecten retourneert die van nature ondersteuning bieden voor sorteren, moet u de ObjectDataSource configureren om sorteerinformatie door te geven aan de Businesslogicalaag, die vervolgens de gegevens kan sorteren of de gegevens kan laten sorteren door de DAL. In een toekomstige zelfstudie wordt uitgelegd hoe u gegevens kunt sorteren op de lagen bedrijfslogica en gegevenstoegang.

De sortering LinkButtons worden weergegeven als HTML-hyperlinks, waarvan de huidige kleuren (blauw voor een niet-bekeken koppeling en een donkerrood voor een bezochte koppeling) botsen met de achtergrondkleur van de veldnamenrij. Laten we in plaats daarvan alle kopregel links in het wit weergeven, ongeacht of ze al dan niet zijn bezocht. Dit kan worden bereikt door het volgende toe te voegen aan de Styles.css klasse:

.HeaderStyle a, .HeaderStyle a:visited
{
    color: White;
}

Deze syntaxis geeft aan dat witte tekst moet worden gebruikt bij het weergeven van deze hyperlinks in een element dat gebruikmaakt van de klasse HeaderStyle.

Na deze CSS-toevoeging moet uw scherm er bij het bezoeken van de pagina via een browser ongeveer uitzien als afbeelding 12. In afbeelding 12 worden met name de resultaten weergegeven nadat op de koptekstkoppeling van het veld Price is geklikt.

Afbeelding 12: De resultaten zijn gesorteerd op de prijs per eenheid in oplopende volgorde (klik om de afbeelding op volledige grootte weer te geven)

De sorteerwerkstroom onderzoeken

Alle GridView-velden het BoundField, CheckBoxField, TemplateField, enzovoort hebben een SortExpression eigenschap die de expressie aangeeft die moet worden gebruikt om de gegevens te sorteren wanneer op de koppeling voor de sorteerkoptekst van dat veld wordt geklikt. De GridView heeft ook een SortExpression eigenschap. Wanneer op een sorteerkop LinkButton wordt geklikt, wijst GridView de waarde van SortExpression dat veld toe aan de SortExpression eigenschap. Vervolgens worden de gegevens opnieuw opgehaald uit de ObjectDataSource en gesorteerd op basis van de eigenschap GridView SortExpression . In de volgende lijst worden de stappen opgesomd die gebeuren wanneer een eindgebruiker data sorteert in een GridView.

1. Het sorteringsevenement van de GridView wordt geactiveerd.
2. De eigenschap SortExpression van GridView wordt ingesteld op de waarde van het SortExpression veld waarvan de sorteerkop LinkButton is aangeklikt.
3. De ObjectDataSource haalt alle gegevens opnieuw op uit de BLL en sorteert vervolgens de gegevens met behulp van GridView s SortExpression
4. De eigenschap GridView PageIndex wordt opnieuw ingesteld op 0, wat betekent dat bij het sorteren van de gebruiker wordt geretourneerd naar de eerste pagina met gegevens (ervan uitgaande dat pagineringsondersteuning is geïmplementeerd)
5. De gebeurtenis GridView wordt Sorted geactiveerd

Net als bij standaard paging worden met de standaardsorteringsoptie alle records van de BLL opnieuw opgehaald. Bij het gebruik van sorteren zonder paginering of bij het gebruik van sorteren met standaard paginering is er geen manier om dit prestatieverlies te voorkomen, tenzij de databasegegevens worden opgeslagen in de cache. Zoals we in een toekomstige zelfstudie zien, is het echter mogelijk om gegevens efficiënt te sorteren bij het gebruik van aangepaste paging.

Wanneer een ObjectDataSource wordt gekoppeld aan de GridView via de vervolgkeuzelijst in de smart tag van de GridView, wordt automatisch de eigenschap van elk GridView-veld toegewezen aan de naam van het gegevensveld in de klasse. Bijvoorbeeld, de ProductName BoundField s SortExpression is ingesteld op ProductName, zoals wordt weergegeven in de volgende declaratieve markeringen.

<asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />

Een veld kan zodanig worden geconfigureerd dat het niet kan worden gesorteerd door de SortExpression eigenschap ervan te wissen (door het toe te wijzen aan een lege tekenreeks). Om dit te illustreren, stelt u zich voor dat we onze klanten onze producten niet op prijs wilden laten sorteren. De UnitPrice eigenschap BoundField SortExpression kan worden verwijderd uit de declaratieve markeringen of via het dialoogvenster Velden (die toegankelijk is door te klikken op de koppeling Kolommen bewerken in de smarttag van GridView).

Afbeelding 13: De resultaten zijn gesorteerd op de Prijs per eenheid in oplopende volgorde

Zodra de SortExpression eigenschap voor het UnitPrice BoundField is verwijderd, wordt de koptekst weergegeven als tekst in plaats van als koppeling, waardoor gebruikers de gegevens niet op prijs kunnen sorteren.

Afbeelding 14: Door de eigenschap SortExpression te verwijderen, kunnen gebruikers de producten niet meer sorteren op prijs (klik om de volledige afbeelding weer te geven)

De GridView programmatisch sorteren

U kunt de inhoud van de GridView ook programmatisch sorteren met behulp van de methode GridViewSort. Geef de SortExpression waarde door waarop u wilt sorteren, samen met de SortDirection (Ascending of Descending) en de GridView-gegevens worden opnieuw gesorteerd.

Stel dat de reden waarom we sorteren op de UnitPrice uitschakelden was omdat we ons zorgen maakten dat onze klanten alleen de laagstgeprijsde producten zouden kopen. We willen ze echter aanmoedigen om de duurste producten te kopen, dus willen we dat ze de producten op prijs kunnen sorteren, maar alleen van de duurste prijs naar het minst.

Als u dit wilt doen, voegt u een knop toe als webbesturingselement aan de pagina, stelt u de eigenschap ID in op SortPriceDescending en de eigenschap Text op Sorteren op prijs. Maak vervolgens een event handler voor de Button Click-gebeurtenis door te dubbelklikken op de Button in de Designer. Voeg de volgende code toe aan deze gebeurtenis-handler:

Protected Sub SortPriceDescending_Click(sender As Object, e As System.EventArgs) _
    Handles SortPriceDescending.Click
        'Sort by UnitPrice in descending order
        Products.Sort("UnitPrice", SortDirection.Descending)
End Sub

Als u op deze knop klikt, wordt de gebruiker teruggezet naar de eerste pagina met de producten gesorteerd op prijs, van duur naar minst duur (zie afbeelding 15).

Afbeelding 15: Door op de knop te klikken, worden de producten van de duurste naar het minst besteld (klik om de afbeelding op volledige grootte weer te geven)

Samenvatting

In deze zelfstudie hebben we gezien hoe u standaard paging- en sorteermogelijkheden kunt implementeren, die beide net zo eenvoudig waren als het inschakelen van een selectievakje. Wanneer een gebruiker gegevens sorteert of pagina's doorloopt, wordt een vergelijkbare werkstroom uitgevouwen:

1. Een postback volgt
2. De voorgebeurtenis van het gegevenswebbesturingselement triggert (PageIndexChanging of Sorting)
3. Alle gegevens worden opnieuw opgehaald door de ObjectDataSource
4. De gebeurtenis op het niveau van het gegevenswebbesturingselement wordt geactiveerd (PageIndexChanged of Sorted)

Hoewel het implementeren van eenvoudige paginering en sortering een fluitje van een cent is, moet er meer moeite worden gedaan om de efficiëntere aangepaste paginering te gebruiken of om de paginerings- of sorteerinterface verder te verbeteren. In toekomstige zelfstudies worden deze onderwerpen besproken.

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.

VorigeVolgende