Auslagern und Sortieren von Berichtsdaten (VB)

Artikel
07/13/2023

Paging und Sortierung sind zwei sehr häufige Features beim Anzeigen von Daten in einer Onlineanwendung. In diesem Tutorial werfen wir einen ersten Blick auf das Hinzufügen von Sortierung und Paging zu unseren Berichten, auf die wir dann in zukünftigen Tutorials aufbauen werden.

Einführung

Paging und Sortierung sind zwei sehr häufige Features beim Anzeigen von Daten in einer Onlineanwendung. Bei der Suche nach ASP.NET Büchern in einem Online-Buchhandel kann es hunderte solcher Bücher geben, aber der Bericht mit den Suchergebnissen listet nur zehn Übereinstimmungen pro Seite auf. Darüber hinaus können die Ergebnisse nach Titel, Preis, Seitenanzahl, Autorenname usw. sortiert werden. Während die letzten 23 Tutorials untersucht haben, wie eine Vielzahl von Berichten erstellt werden kann, einschließlich Schnittstellen, die das Hinzufügen, Bearbeiten und Löschen von Daten ermöglichen, haben wir uns nicht mit der Sortierung von Daten befasst, und die einzigen Pagingbeispiele, die wir gesehen haben, waren die Steuerelemente DetailsView und FormView.

In diesem Tutorial erfahren Sie, wie Sie unseren Berichten Sortierung und Paging hinzufügen, was durch einfaches Aktivieren einiger Kontrollkästchen erreicht werden kann. Leider hat diese einfache Implementierung ihre Nachteile, die die Sortierschnittstelle ein wenig zu wünschen übrig lässt, und die Pagingroutinen sind nicht für das effiziente Paging durch große Resultsets konzipiert. In zukünftigen Tutorials wird untersucht, wie sie die Einschränkungen der sofort einsatzbereiten Paging- und Sortierlösungen überwinden können.

Schritt 1: Hinzufügen der Tutorialwebseiten zum Paging und Sortieren

Bevor wir mit diesem Tutorial beginnen, nehmen wir uns zunächst einen Moment Zeit, um die ASP.NET Seiten hinzuzufügen, die wir für dieses Tutorial und die nächsten drei Seiten benötigen. Erstellen Sie zunächst einen neuen Ordner im Projekt mit dem Namen PagingAndSorting. Fügen Sie als Nächstes die folgenden fünf ASP.NET Seiten zu diesem Ordner hinzu, wobei alle für die Verwendung der master Seite Site.masterkonfiguriert sind:

Default.aspx
SimplePagingSorting.aspx
EfficientPaging.aspx
SortParameter.aspx
CustomSortingUI.aspx

Erstellen eines PagingAndSorting-Ordners und Hinzufügen des Tutorials ASP.NET Seiten

Abbildung 1: Erstellen eines PagingAndSorting-Ordners und Hinzufügen des Tutorials ASP.NET Seiten

Öffnen Sie als Nächstes die Default.aspx Seite, und ziehen Sie das SectionLevelTutorialListing.ascx Benutzersteuerelement aus dem UserControls Ordner auf die Entwurfsoberfläche. Dieses Benutzersteuerelement, das wir im Tutorial Gestaltungsvorlagen und Websitenavigation erstellt haben, listet die Websiteübersicht auf und zeigt diese Tutorials im aktuellen Abschnitt in einer Aufzählung an.

Hinzufügen des SectionLevelTutorialListing.ascx-Benutzersteuerelements zu Default.aspx

Abbildung 2: Hinzufügen des SectionLevelTutorialListing.ascx-Benutzersteuerelements zu Default.aspx

Damit die Aufzählungsliste die Tutorials zum Paging und Sortieren anzeigt, die wir erstellen, müssen sie der Websiteübersicht hinzugefügt werden. Öffnen Sie die Web.sitemap Datei, und fügen Sie nach dem Knotenmarkup Bearbeiten, Einfügen und Löschen der Siteübersicht das folgende Markup hinzu:

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

Aktualisieren der Websiteübersicht, um die neuen ASP.NET-Seiten einzuschließen

Abbildung 3: Aktualisieren der Websiteübersicht, um die neue ASP.NET-Seiten einzuschließen

Schritt 2: Anzeigen von Produktinformationen in einer GridView

Bevor wir Paging- und Sortierfunktionen implementieren, erstellen wir zunächst eine standardmäßige nicht sortierbare, nicht auslagerungsfähige GridView, die die Produktinformationen auflistet. Dies ist eine Aufgabe, die wir in dieser Tutorialreihe bereits viele Male ausgeführt haben, daher sollten diese Schritte vertraut sein. Öffnen Sie zunächst die SimplePagingSorting.aspx Seite, ziehen Sie ein GridView-Steuerelement aus der Toolbox auf die Designer, und legen Sie dessen ID Eigenschaft auf festProducts. Erstellen Sie als Nächstes eine neue ObjectDataSource, die die Methode der ProductsBLL-Klasse verwendet GetProducts() , um alle Produktinformationen zurückzugeben.

Abrufen von Informationen zu allen Produkten mithilfe der GetProducts()-Methode

Abbildung 4: Abrufen von Informationen zu allen Produkten mithilfe der GetProducts()-Methode

Da es sich bei diesem Bericht um einen schreibgeschützten Bericht handelt, müssen die ObjectDataSource-Methoden Insert(), Update()oder Delete() den entsprechenden ProductsBLL Methoden nicht zugeordnet werden. Wählen Sie daher in der Dropdownliste für die Registerkarten UPDATE, INSERT und DELETE die Option (Keine) aus.

Wählen Sie die Option (Keine) in der liste Drop-Down auf den Registerkarten UPDATE, INSERT und DELETE aus.

Abbildung 5: Auswählen der Option (Keine) in der Drop-Down-Liste auf den Registerkarten UPDATE, INSERT und DELETE

Als Nächstes passen wir die GridView-Felder so an, dass nur die Produktnamen, Lieferanten, Kategorien, Preise und nicht mehr eingestellten Status angezeigt werden. Darüber hinaus können Sie alle Formatierungsänderungen auf Feldebene vornehmen, z. B. das Anpassen der HeaderText Eigenschaften oder das Formatieren des Preises als Währung. Nach diesen Änderungen sollte ihr deklaratives GridView-Markup wie folgt aussehen:

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

Abbildung 6 zeigt unseren bisherigen Fortschritt, wenn wir über einen Browser angezeigt werden. Beachten Sie, dass auf der Seite alle Produkte in einem Bildschirm aufgelistet sind, auf dem Name, Kategorie, Lieferant, Preis und eingestellte status angezeigt werden.

Abbildung 6: Alle Produkte sind aufgelistet (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 3: Hinzufügen von Pagingunterstützung

Das Auflisten aller Produkte auf einem Bildschirm kann zu Einer Informationsüberladung für den Benutzer führen, der die Daten durchstöbert. Um die Ergebnisse besser verwaltbar zu machen, können wir die Daten in kleinere Datenseiten aufteilen und dem Benutzer ermöglichen, die Daten jeweils eine Seite nach der anderen zu durchlaufen. Aktivieren Sie dazu einfach das Kontrollkästchen Paging aktivieren im Smarttag des GridView-Tags (dadurch wird die GridView-Eigenschaft AllowPaging auf truefestgelegt).

Abbildung 7: Aktivieren Sie das Kontrollkästchen Paging aktivieren, um Pagingunterstützung hinzuzufügen (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Das Aktivieren des Pagings begrenzt die Anzahl der pro Seite angezeigten Datensätze und fügt der GridView eine Pagingschnittstelle hinzu. Die In Abbildung 7 gezeigte Standard-Pagingschnittstelle besteht aus einer Reihe von Seitenzahlen, die es dem Benutzer ermöglichen, schnell von einer Datenseite zur anderen zu navigieren. Diese Pagingschnittstelle sollte vertraut sein, wie wir beim Hinzufügen von Pagingunterstützung zu den DetailsView- und FormView-Steuerelementen in früheren Tutorials gesehen haben.

Sowohl das DetailsView- als auch das FormView-Steuerelement zeigen nur einen einzelnen Datensatz pro Seite an. Die GridView verwendet jedoch ihre PageSize Eigenschaft , um zu bestimmen, wie viele Datensätze pro Seite angezeigt werden sollen (diese Eigenschaft ist standardmäßig auf den Wert 10).

Diese GridView-, DetailsView- und FormView-Pagingschnittstelle kann mithilfe der folgenden Eigenschaften angepasst werden:

PagerStylegibt die Formatinformationen für die Pagingschnittstelle an; kann Einstellungen wie BackColor, , ForeColorCssClass, HorizontalAlign, usw. angeben.
PagerSettings enthält eine Reihe von Eigenschaften, die die Funktionalität der Pagingschnittstelle anpassen können; PageButtonCount gibt die maximale Anzahl numerischer Seitenzahlen an, die in der Pagingschnittstelle angezeigt werden (der Standardwert ist 10). Die Mode -Eigenschaft gibt an, wie die Pagingschnittstelle funktioniert und auf festgelegt werden kann:
- NextPrevious zeigt eine Schaltfläche "Weiter" und "Zurück" an, die es dem Benutzer ermöglicht, jeweils eine Seite vorwärts oder rückwärts zu treten.
- NextPreviousFirstLast zusätzlich zu den Schaltflächen "Weiter" und "Zurück" sind auch die Schaltflächen "First" und "Last" enthalten, sodass der Benutzer schnell zur ersten oder letzten Datenseite wechseln kann.
- Numeric zeigt eine Reihe von Seitenzahlen an, sodass der Benutzer sofort zu einer beliebigen Seite springen kann
- NumericFirstLast zusätzlich zu den Seitenzahlen, enthält die Schaltflächen First und Last, sodass der Benutzer schnell zur ersten oder letzten Datenseite wechseln kann; Die Schaltflächen "First/Last" werden nur angezeigt, wenn alle numerischen Seitenzahlen nicht passen.

Darüber hinaus bieten GridView, DetailsView und FormView alle die PageIndex Eigenschaften und PageCount , die die aktuelle Seite angeben, die angezeigt wird, bzw. die Gesamtanzahl der Datenseiten. Die PageIndex Eigenschaft wird ab 0 indiziert, was bedeutet, dass beim Anzeigen der ersten Datenseite PageIndex gleich 0 ist. PageCountbeginnt hingegen mit dem Zählen bei 1, was bedeutet, dass PageIndex auf die Werte zwischen 0 und PageCount - 1beschränkt ist.

Nehmen wir uns einen Moment Zeit, um die Standarddarstellung unserer GridView-Pagingschnittstelle zu verbessern. Insbesondere haben wir die Pagingschnittstelle rechtsbündig mit einem hellgrauen Hintergrund. Anstatt diese Eigenschaften direkt über die GridView-Eigenschaft PagerStyle festzulegen, erstellen Sie eine CSS-Klasse in Styles.css namens PagerRowStyle und weisen die PagerStyle Eigenschaft s CssClass dann über unser Design zu. Styles.css Öffnen und hinzufügen Sie zunächst die folgende CSS-Klassendefinition:

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

Öffnen Sie als Nächstes die GridView.skin Datei im DataWebControls Ordner innerhalb des Ordners App_Themes . Wie im Tutorial Gestaltungsvorlagen und Websitenavigation erläutert, können Skin-Dateien verwendet werden, um die Standardeigenschaftenwerte für ein Websteuerelement anzugeben. Erweitern Sie daher die vorhandenen Einstellungen, um die s-Eigenschaft PagerStyleCssClass auf festzulegen PagerRowStyle. Konfigurieren Sie außerdem die Pagingschnittstelle so, dass maximal fünf numerische Seitenschaltflächen mithilfe der NumericFirstLast Pagingschnittstelle angezeigt werden.

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

Die Benutzeroberfläche des Pagings

Abbildung 8 zeigt die Webseite, wenn sie über einen Browser aufgerufen wird, nachdem das Kontrollkästchen Paging aktivieren von GridView s aktiviert wurde und die PagerStyle Konfigurationen und PagerSettings über die GridView.skin Datei vorgenommen wurden. Beachten Sie, dass nur zehn Datensätze angezeigt werden, und die Pagingschnittstelle gibt an, dass die erste Seite der Daten angezeigt wird.

Abbildung 8: Wenn Paging aktiviert ist, wird nur eine Teilmenge der Datensätze gleichzeitig angezeigt (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Wenn der Benutzer auf eine der Seitenzahlen in der Paging-Schnittstelle klickt, wird ein Postback ausgeführt, und die Seite wird neu geladen, um die Datensätze der angeforderten Seite anzuzeigen. Abbildung 9 zeigt die Ergebnisse nach dem Anzeigen der letzten Datenseite. Beachten Sie, dass die letzte Seite nur einen Datensatz enthält. Dies liegt daran, dass es insgesamt 81 Datensätze gibt, was zu acht Seiten mit 10 Datensätzen pro Seite plus einer Seite mit einem einzelnen Datensatz führt.

Abbildung 9: Klicken auf eine Seitenzahl bewirkt ein Postback und zeigt die entsprechende Teilmenge von Datensätzen an (Klicken, um das bild in voller Größe anzuzeigen)

Paging s Server-Side Workflow

Wenn der Endbenutzer auf eine Schaltfläche in der Pagingschnittstelle klickt, wird ein Postback ausgeführt, und der folgende serverseitige Workflow beginnt:

Das GridView-Ereignis (oder DetailsView oder FormView) PageIndexChanging wird ausgelöst.
Die ObjectDataSource fordert alle Daten von der BLL erneut an. Die GridView-Werte PageIndex und PageSize -Eigenschaftswerte werden verwendet, um zu bestimmen, welche Datensätze, die von der BLL zurückgegeben werden, in gridView angezeigt werden müssen.
Das GridView-Ereignis PageIndexChanged wird ausgelöst.

In Schritt 2 fordert objectDataSource alle Daten aus der Datenquelle erneut an. Diese Art des Pagings wird häufig als Standardpa paging bezeichnet, da es sich um das Standardmäßige Pagingverhalten handelt, das beim Festlegen der AllowPaging -Eigenschaft auf trueverwendet wird. Beim Standardmäßigen Paging der Daten ruft das Websteuerelement naiv alle Datensätze für jede Datenseite ab, obwohl nur eine Teilmenge der Datensätze tatsächlich in den HTML-Code gerendert wird, der an den Browser gesendet wird. Sofern die Datenbankdaten nicht von BLL oder ObjectDataSource zwischengespeichert werden, ist die Standard paging für ausreichend große Resultsets oder für Webanwendungen mit vielen gleichzeitigen Benutzern nicht durchführbar.

Im nächsten Tutorial wird untersucht, wie benutzerdefiniertes Paging implementiert wird. Mit benutzerdefiniertem Paging können Sie objectDataSource speziell anweisen, nur den genauen Satz von Datensätzen abzurufen, die für die angeforderte Datenseite erforderlich sind. Wie Sie sich vorstellen können, verbessert benutzerdefiniertes Paging die Effizienz des Pagings durch große Resultsets erheblich.

Hinweis

Standard paging ist zwar nicht geeignet, wenn sie durch ausreichend große Resultsets oder für Websites mit vielen gleichzeitigen Benutzern pagingen, aber beachten Sie, dass benutzerdefinierte Paging mehr Änderungen und Aufwand erfordert und nicht so einfach ist wie das Aktivieren eines Kontrollkästchens (wie standard paging). Daher kann das Standard paging die ideale Wahl für kleine Websites mit geringem Datenverkehr oder beim Paging durch relativ kleine Resultsets sein, da es viel einfacher und schneller zu implementieren ist.

Wenn wir beispielsweise wissen, dass unsere Datenbank nie mehr als 100 Produkte enthält, wird der minimale Leistungsgewinn, den benutzerdefiniertes Paging erzielt, wahrscheinlich durch den aufwand ausgeglichen, der für die Implementierung erforderlich ist. Wenn wir jedoch eines Tages möglicherweise Tausende oder Zehntausende von Produkten haben, würde die Implementierung von benutzerdefiniertem Paging die Skalierbarkeit unserer Anwendung erheblich beeinträchtigen.

Schritt 4: Anpassen der Pagingerfahrung

Die Datenwebsteuerelemente stellen eine Reihe von Eigenschaften bereit, die verwendet werden können, um die Auslagerungserfahrung des Benutzers zu verbessern. Die PageCount -Eigenschaft gibt beispielsweise an, wie viele Seiten insgesamt vorhanden sind, während die PageIndex -Eigenschaft die aktuell besuchte Seite angibt und so festgelegt werden kann, dass ein Benutzer schnell zu einer bestimmten Seite verschoben wird. Um zu veranschaulichen, wie diese Eigenschaften verwendet werden können, um die Auslagerungserfahrung des Benutzers zu verbessern, fügen Sie unserer Seite ein Label Web-Steuerelement hinzu, das den Benutzer darüber informiert, welche Seite er gerade besucht, sowie ein DropDownList-Steuerelement, mit dem er schnell zu einer beliebigen Seite springen kann.

Fügen Sie zunächst ihrer Seite ein Label Web-Steuerelement hinzu, legen Sie dessen ID Eigenschaft auf fest PagingInformation, und löschen Sie dessen Text Eigenschaft. Erstellen Sie als Nächstes einen Ereignishandler für das GridView-Ereignis, DataBound und fügen Sie den folgenden Code hinzu:

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

Dieser Ereignishandler weist die PagingInformation Label s-Eigenschaft Text einer Nachricht zu, die den Benutzer darüber informiert, welche Seite er derzeit besucht Products.PageIndex + 1 , wie viele Seiten Products.PageCount insgesamt (wir fügen der Products.PageIndex Eigenschaft 1 hinzu, da PageIndex ab 0 indiziert wird). Ich habe die Zuweisen dieser Label-Eigenschaft Text im Ereignishandler anstelle des DataBoundPageIndexChanged Ereignishandlers ausgewählt, da das DataBound Ereignis jedes Mal ausgelöst wird, wenn Daten an gridView gebunden sind, während der PageIndexChanged Ereignishandler nur ausgelöst wird, wenn der Seitenindex geändert wird. Wenn gridView beim ersten Seitenbesuch datengebunden ist, wird das PageIndexChanging Ereignis nicht ausgelöst (das DataBound Ereignis hingegen).

Mit dieser Ergänzung wird dem Benutzer jetzt eine Meldung angezeigt, die angibt, welche Seite er besucht und wie viele Daten insgesamt vorhanden sind.

Abbildung 10: Die aktuelle Seitenzahl und die Gesamtanzahl der Seiten werden angezeigt (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusätzlich zum Label-Steuerelement fügen wir auch ein DropDownList-Steuerelement hinzu, das die Seitenzahlen in GridView auflistet, wobei die aktuell angezeigte Seite ausgewählt ist. Die Idee hier ist, dass der Benutzer schnell von der aktuellen Seite zu einer anderen springen kann, indem er einfach den neuen Seitenindex aus der DropDownList auswählt. Fügen Sie zunächst dem Designer eine DropDownList hinzu, legen Sie dessen ID Eigenschaft auf festPageList, und aktivieren Sie die Option AutoPostBack aktivieren über das Smarttag.

Kehren Sie als Nächstes DataBound zum Ereignishandler zurück, und fügen Sie den folgenden Code hinzu:

' 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

Dieser Code beginnt mit dem Löschen der Elemente in der PageList DropDownList. Dies mag überflüssig erscheinen, da man nicht erwarten würde, dass sich die Anzahl der Seiten ändert, aber andere Benutzer können das System gleichzeitig verwenden und Datensätze aus der Products Tabelle hinzufügen oder entfernen. Solche Einfügungen oder Löschungen können die Anzahl der Datenseiten ändern.

Als Nächstes müssen wir die Seitenzahlen erneut erstellen und standardmäßig die Seite auswählen, die der aktuellen GridView PageIndex zugeordnet ist. Dies erreichen wir mit einer Schleife von 0 bis PageCount - 1, fügen in jeder Iteration eine neue ListItem hinzu und legen die Selected -Eigenschaft auf TRUE fest, wenn der aktuelle Iterationsindex der Eigenschaft GridViews PageIndex entspricht.

Schließlich müssen wir einen Ereignishandler für das DropDownList-Ereignis SelectedIndexChanged erstellen, das jedes Mal ausgelöst wird, wenn der Benutzer ein anderes Element aus der Liste auswählt. Um diesen Ereignishandler zu erstellen, doppelklicken Sie einfach im Designer auf dropDownList, und fügen Sie dann den folgenden Code hinzu:

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

Wie in Abbildung 11 dargestellt, führt das bloße Ändern der GridView-Eigenschaft PageIndex dazu, dass die Daten an GridView zurückgebunden werden. Im GridView-Ereignishandler DataBound ist die entsprechende DropDownList ListItem ausgewählt.

Abbildung 11: Der Benutzer wird beim Auswählen der Seite 6 Drop-Down Listenelement automatisch auf die sechste Seite weitergeleitet (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Schritt 5: Hinzufügen Bi-Directional Sortierunterstützung

Das Hinzufügen bidirektionaler Sortierungsunterstützung ist so einfach wie das Hinzufügen von Pagingunterstützung, indem Sie einfach die Option Sortierung aktivieren aus dem Smarttag des GridView-Smarttags aktivieren (wodurch die GridView-Eigenschaft auf AllowSortingtruefestgelegt wird). Dadurch werden die Header der GridView-Felder als LinkButtons gerendert, die beim Klicken ein Postback verursachen und die Daten nach der geklickten Spalte sortiert in aufsteigender Reihenfolge zurückgeben. Wenn Sie auf die gleiche Kopfzeile LinkButton klicken, werden die Daten in absteigender Reihenfolge neu sortiert.

Hinweis

Wenn Sie eine benutzerdefinierte Datenzugriffsebene anstelle eines typisierten DataSets verwenden, verfügen Sie im Smarttag von GridView möglicherweise nicht über die Option Sortierung aktivieren. Dieses Kontrollkästchen ist nur für GridViews verfügbar, die an Datenquellen gebunden sind, die die Sortierung nativ unterstützen. Das typisierte DataSet bietet sofort einsatzbereite Sortierunterstützung, da die ADO.NET DataTable eine Sort Methode bereitstellt, die beim Aufrufen die DataRows von DataTable nach den angegebenen Kriterien sortiert.

Wenn Ihre DAL keine Objekte zurückgibt, die die Sortierung nativ unterstützen, müssen Sie objectDataSource so konfigurieren, dass Sortierinformationen an die Geschäftslogikebene übergeben werden, die entweder die Daten sortieren oder die Daten nach der DAL sortieren kann. In einem zukünftigen Tutorial erfahren Sie, wie Sie Daten auf den Geschäftslogik- und Datenzugriffsebenen sortieren.

Die SortierlinkButtons werden als HTML-Links gerendert, deren aktuelle Farben (blau für einen nicht besuchten Link und dunkelrot für einen besuchten Link) mit der Hintergrundfarbe der Kopfzeile kollidieren. Stattdessen werden alle Headerzeilenlinks weiß angezeigt, unabhängig davon, ob sie besucht wurden oder nicht. Dies kann erreicht werden, indem Sie der Styles.css -Klasse Folgendes hinzufügen:

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

Diese Syntax gibt an, dass beim Anzeigen dieser Hyperlinks in einem Element, das die HeaderStyle-Klasse verwendet, weißer Text verwendet wird.

Nach dieser CSS-Ergänzung sollte ihr Bildschirm ähnlich wie Abbildung 12 aussehen, wenn Sie die Seite über einen Browser besuchen. Abbildung 12 zeigt insbesondere die Ergebnisse, nachdem auf den Headerlink des Preisfelds geklickt wurde.

Abbildung 12: Die Ergebnisse wurden nach dem UnitPrice in aufsteigender Reihenfolge sortiert (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Untersuchen des Sortierworkflows

Alle GridView-Felder für BoundField, CheckBoxField, TemplateField usw. verfügen über eine SortExpression Eigenschaft, die den Ausdruck angibt, der zum Sortieren der Daten verwendet werden soll, wenn auf den Sortierheaderlink dieses Felds geklickt wird. Die GridView verfügt auch über eine SortExpression -Eigenschaft. Wenn auf einen Sortierheader LinkButton geklickt wird, weist gridView der Eigenschaft diesen Feldwert zu SortExpressionSortExpression . Als Nächstes werden die Daten aus objectDataSource erneut abgerufen und nach der GridView-Eigenschaft SortExpression sortiert. Die folgende Liste enthält die Abfolge der Schritte, die ausgeführt werden, wenn ein Endbenutzer die Daten in einer GridView sortiert:

Das Sortierungsereignis von GridView wird ausgelöst.
Die GridView-Eigenschaft SortExpression ist auf die SortExpression des Felds festgelegt, auf dessen Sortierheader LinkButton geklickt wurde.
ObjectDataSource ruft alle Daten aus der BLL neu ab und sortiert die Daten dann mithilfe der GridView-Werte. SortExpression
Die GridView-Eigenschaft PageIndex wird auf 0 zurückgesetzt, d. h. beim Sortieren wird der Benutzer zur ersten Seite der Daten zurückgegeben (vorausgesetzt, dass Pagingunterstützung implementiert wurde).
Das GridView-Ereignis Sorted wird ausgelöst.

Wie beim Standard paging ruft die Standardsortierungsoption alle Datensätze aus der BLL wieder ab. Wenn Sie die Sortierung ohne Paging oder die Sortierung mit Standard paging verwenden, gibt es keine Möglichkeit, diesen Leistungstreffer zu umgehen (ohne die Datenbankdaten zwischenzuspeichern). Wie wir jedoch in einem zukünftigen Tutorial sehen werden, ist es möglich, Daten effizient zu sortieren, wenn benutzerdefiniertes Paging verwendet wird.

Beim Binden einer ObjectDataSource an gridView über die Dropdownliste im GridView-Smarttag wird jedem GridView-Feld automatisch seine SortExpression Eigenschaft dem Namen des Datenfelds in der ProductsRow Klasse zugewiesen. Beispielsweise ist boundField ProductName s SortExpression auf ProductNamefestgelegt, wie im folgenden deklarativen Markup gezeigt:

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

Ein Feld kann so konfiguriert werden, dass es nicht sortiert werden kann, indem seine SortExpression Eigenschaft entfernt wird (indem es einer leeren Zeichenfolge zugewiesen wird). Um dies zu veranschaulichen, stellen Sie sich vor, dass wir unsere Kunden nicht nach Preis sortieren wollten. Die UnitPrice BoundField-Eigenschaft SortExpression kann entweder aus dem deklarativen Markup oder über das Dialogfeld Felder entfernt werden (auf das Durch Klicken auf den Link Spalten bearbeiten im Smarttag von GridView zugegriffen werden kann).

Screenshot des Fensters

Abbildung 13: Die Ergebnisse wurden nach dem UnitPrice in aufsteigender Reihenfolge sortiert.

Nachdem die SortExpression Eigenschaft für das UnitPrice BoundField entfernt wurde, wird der Header nicht mehr als Link, sondern als Text gerendert, wodurch Benutzer daran gehindert werden, die Daten nach Preis zu sortieren.

Abbildung 14: Durch Entfernen der SortExpression-Eigenschaft können Benutzer die Produkte nicht mehr nach Preis sortieren (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Programmgesteuertes Sortieren von GridView

Sie können den Inhalt von GridView auch programmgesteuert sortieren, indem Sie die GridView-Methode verwendenSort. Übergeben Sie einfach den SortExpression Wert, nach dem sortiert werden soll, zusammen mit dem SortDirection (Ascending oder Descending), und die GridView-Daten werden neu sortiert.

Stellen Sie sich vor, der Grund, warum wir die UnitPrice Sortierung nach deaktiviert haben, war, weil wir uns Sorgen gemacht hatten, dass unsere Kunden einfach nur die günstigsten Produkte kaufen würden. Wir möchten sie jedoch ermutigen, die teuersten Produkte zu kaufen, daher möchten wir, dass sie die Produkte nach Preis sortieren können, aber nur vom teuersten Preis bis zum niedrigsten Preis.

Um dies zu erreichen, fügen Sie der Seite ein Button-Websteuerelement hinzu, legen Sie dessen ID -Eigenschaft auf SortPriceDescendingund seine Text -Eigenschaft auf Sortieren nach Preis fest. Erstellen Sie als Nächstes einen Ereignishandler für das Button s-EreignisClick, indem Sie im Designer auf das Button-Steuerelement doppelklicken. Fügen Sie diesem Ereignishandler den folgenden Code hinzu:

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

Durch Klicken auf diese Schaltfläche kehrt der Benutzer zur ersten Seite zurück, auf der die Produkte nach Preis sortiert sind, von den teuersten bis zum günstigsten Preis (siehe Abbildung 15).

Abbildung 15: Klicken auf die Schaltfläche Bestellt die Produkte vom teuersten zum niedrigsten (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

In diesem Tutorial haben wir erfahren, wie Sie Standard-Paging- und Sortierfunktionen implementieren, die beide so einfach waren wie das Aktivieren eines Kontrollkästchens! Wenn ein Benutzer Daten sortiert oder Seiten durchläuft, wird ein ähnlicher Workflow angezeigt:

Es entsteht ein Postback
Das Ereignis des Datenwebsteuerelements vor der Ebene wird ausgelöst (PageIndexChanging oder Sorting).
Alle Daten werden von ObjectDataSource erneut abgerufen.
Das Ereignis des Datenwebsteuerelements nach der Ebene wird ausgelöst (PageIndexChanged oder Sorted).

Die Implementierung grundlegender Paging- und Sortiervorgänge ist zwar ein Kinderspiel, aber es muss mehr Aufwand unternommen werden, um das effizientere benutzerdefinierte Paging zu nutzen oder die Paging- oder Sortierschnittstelle weiter zu verbessern. In zukünftigen Tutorials werden diese Themen behandelt.

Viel Spaß beim Programmieren!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

Zurück Weiter

Freigeben über