Umblättern und Sortieren von Berichtsdaten (VB)

von Scott Mitchell

PDF herunterladen

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 Paginierung zu unseren Berichten, auf denen wir in zukünftigen Tutorials weiter aufbauen werden.

Einleitung

Paging und Sortierung sind zwei sehr häufige Features beim Anzeigen von Daten in einer Onlineanwendung. Wenn Sie z. B. nach ASP.NET Büchern in einem Online-Bookstore suchen, gibt es möglicherweise Hunderte solcher Bücher, aber der Bericht, in dem die Suchergebnisse aufgelistet sind, listet nur zehn Übereinstimmungen pro Seite auf. Darüber hinaus können die Ergebnisse nach Titel, Preis, Seitenanzahl, Name des Autors usw. sortiert werden. Während die letzten 23 Tutorials untersucht haben, wie man eine Vielzahl von Berichten erstellt, einschließlich Schnittstellen, die das Hinzufügen, Bearbeiten und Löschen von Daten ermöglichen, haben wir uns bisher nicht damit beschäftigt, wie man Daten sortiert. Die einzigen Beispiele für die Seitennavigation, die wir gesehen haben, waren mit den DetailsView- und FormView-Steuerelementen.

In diesem Lernprogramm erfahren Sie, wie Sie unseren Berichten Sortier- und Pagingfunktionen hinzufügen, die durch einfaches Überprüfen einiger Kontrollkästchen erreicht werden können. Leider hat diese vereinfachte Implementierung ihre Nachteile: Die Sortierschnittstelle lässt ein bisschen zu wünschen übrig, und die Pagingroutinen sind nicht für das effiziente Blättern durch große Resultsets ausgelegt. In zukünftigen Tutorials erfahren Sie, wie Sie die Einschränkungen der standardmäßig bereitgestellten Paging- und Sortierlösungen überwinden können.

Schritt 1: Hinzufügen von Tutorialseiten zum Paging und Sortieren

Bevor wir dieses Lernprogramm starten, nehmen wir uns zunächst einen Moment Zeit, um die ASP.NET Seiten hinzuzufügen, die wir für dieses Lernprogramm und die nächsten drei 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 Gestaltungsvorlage Site.masterkonfiguriert sind:

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

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

Ö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 Sitemap auf und zeigt diese Tutorials im aktuellen Abschnitt in einer Aufzählung an.

Abbildung 2: Fügen Sie die User Control 'SectionLevelTutorialListing.ascx' zu 'Default.aspx' hinzu

Damit in der Aufzählungsliste die Paging- und Sortiertutorials angezeigt werden, die wir erstellen werden, müssen sie der Website-Übersicht hinzugefügt werden. Öffnen Sie die Web.sitemap Datei und fügen Sie das folgende Markup nach dem Markup für das Bearbeiten, Einfügen und Löschen von Sitemap-Knoten 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>

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

Schritt 2: Anzeigen von Produktinformationen in einer GridView

Bevor wir tatsächlich Paging- und Sortierfunktionen implementieren, erstellen wir zunächst eine standardmäßige, nicht sortierbare und nicht seitenweise darstellbare GridView, die die Produktinformationen auflistet. Dies ist eine Aufgabe, die wir in dieser Lernprogrammreihe mehrmals ausgeführt haben, damit diese Schritte vertraut sein sollten. Öffnen Sie zunächst die SimplePagingSorting.aspx Seite, und ziehen Sie ein GridView-Steuerelement aus der Toolbox auf den Designer, und legen Sie dessen ID Eigenschaft auf Products. Erstellen Sie als Nächstes eine neue ObjectDataSource, die die ProductsBLL-Klasse GetProducts() verwendet, um alle Produktinformationen zurückzugeben.

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 s Insert(), Update()oder Delete() Methoden nicht den entsprechenden ProductsBLL Methoden zugeordnet werden. Wählen Sie daher (Keine) aus der Dropdownliste für die Registerkarten UPDATE, INSERT und DELETE aus.

Abbildung 5: Auswählen der Option (Keine) in der Drop-Down Liste in den Registerkarten UPDATE, EINFÜGEN und LÖSCHEN

Als nächstes passen wir die GridView-Felder so an, dass nur die Produktnamen, Lieferanten, Kategorien, Preise und eingestellten Status angezeigt werden. Außerdem können Sie beliebige Formatierungsänderungen auf Feldebene vornehmen, z. B. die HeaderText Eigenschaften anpassen oder den Preis als Währung formatieren. 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 unsere Fortschritte bisher, wenn sie über einen Browser angezeigt werden. Beachten Sie, dass auf der Seite alle Produkte auf einem Bildschirm aufgelistet sind, wobei der Name, die Kategorie, der Lieferant, der Preis und der Status "Nicht mehr verfügbar" angezeigt werden.

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

Schritt 3: Hinzufügen der Pagingunterstützung

Das Auflisten aller Produkte auf einem Bildschirm kann zu einer Informationsüberladung für den Benutzer führen, der die Daten durchblättert. Um die Ergebnisse übersichtlicher zu gestalten, können wir die Daten in kleinere Datenseiten aufteilen und es dem Benutzer ermöglichen, die Daten jeweils auf einer Seite zu durchlaufen. Aktivieren Sie dazu einfach das Kontrollkästchen "Paging aktivieren" im Smarttag "GridView" (dadurch wird die Eigenschaft des GridView auf AllowPagingtrue festgelegt).

Abbildung 7: Aktivieren des Kontrollkästchens "Paging aktivieren" zum Hinzufügen der Pagingunterstützung (Klicken Sie hier, um das Bild mit voller Größe anzuzeigen)

Durch das Aktivieren von Paging wird die Anzahl der pro Seite angezeigten Datensätze begrenzt und der GridView eine Paging-Schnittstelle hinzugefügt. Die in Abbildung 7 dargestellte Standard-Paging-Schnittstelle ist eine Reihe von Seitenzahlen, sodass der Benutzer schnell von einer Seite mit Daten zu einer anderen navigieren kann. Diese Paging-Schnittstelle sollte vertraut aussehen, wie wir es beim Hinzufügen der Pagingunterstützung zu den DetailsView- und FormView-Steuerelementen in früheren Lernprogrammen gesehen haben.

Sowohl die Steuerelemente "DetailsView" als auch "FormView" zeigen nur einen einzelnen Datensatz pro Seite an. Das GridView-Objekt konsultiert jedoch seine PageSize Eigenschaft, um zu bestimmen, wie viele Datensätze pro Seite angezeigt werden sollen (diese Eigenschaft ist standardmäßig auf 10 gesetzt).

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

• PagerStyle gibt die Formatvorlageninformationen für die Pagingschnittstelle an; kann Einstellungen wie BackColor, ForeColor, , CssClass, HorizontalAlignusw. angeben.

• PagerSettings enthält eine Bevy von Eigenschaften, die die Funktionalität der Paging-Schnittstelle anpassen können; PageButtonCount gibt die maximale Anzahl numerischer Seitenzahlen an, die in der Paging-Schnittstelle angezeigt werden (der Standardwert ist 10); die Mode Eigenschaft gibt an, wie die Pagingschnittstelle funktioniert und auf folgendes festgelegt werden kann:

  • NextPrevious zeigt die Schaltflächen "Nächste" und "Vorherige" an, sodass der Benutzer jeweils eine Seite vor- oder zurückgehen kann.
  • NextPreviousFirstLast Zusätzlich zu den Schaltflächen "Weiter" und "Zurück" sind auch die Schaltflächen "Zuerst" und "Zuletzt" enthalten, sodass der Benutzer schnell zur ersten oder letzten Seite mit Daten wechseln kann.
  • Numeric zeigt eine Reihe von Seitenzahlen an, sodass der Benutzer sofort zu einer beliebigen Seite springen kann.
  • NumericFirstLast enthält zusätzlich zu den Seitenzahlen die Schaltflächen "Erster" und "Zuletzt", die es dem Benutzer ermöglichen, schnell zur ersten oder letzten Seite der Daten zu wechseln. Die Schaltflächen "Erster/Letzter" werden nur angezeigt, wenn alle numerischen Seitenzahlen nicht passen können.

Darüber hinaus bieten gridView, DetailsView und FormView alle die PageIndex Eigenschaften und PageCount Eigenschaften an, die die aktuelle Seite anzeigen, bzw. die Gesamtanzahl der Datenseiten. Die PageIndex Eigenschaft wird beginnend mit 0 indiziert, was bedeutet, dass beim Anzeigen der ersten Datenseite PageIndex 0 entspricht. PageCount, hingegen, beginnt die Zählung bei 1, was bedeutet, dass PageIndex auf die Werte zwischen 0 und PageCount - 1 beschränkt ist.

Nehmen wir uns einen Moment Zeit, um die Standarddarstellung unserer GridView-Paging-Schnittstelle zu verbessern. Lassen Sie uns insbesondere die Pagingschnittstelle rechtsbündig an einem hellgrauen Hintergrund ausrichten. Anstatt diese Eigenschaften direkt über die PagerStyle-Eigenschaft des GridView festzulegen, erstellen wir eine CSS-Klasse im Styles.css namens PagerRowStyle und weisen dann die PagerStyle-Eigenschaft von CssClass über unser Theme zu. Beginnen Sie, indem Sie die folgende CSS-Klassendefinition öffnen Styles.css und hinzufügen:

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

Öffnen Sie als Nächstes die GridView.skin Datei im DataWebControls Ordner innerhalb des App_Themes Ordners. Wie im Tutorial Gestaltungsvorlagen und Websitenavigation erläutert, können Skin-Dateien verwendet werden, um die Standardwerte für eine Websteuerung anzugeben. Erweitern Sie daher die vorhandenen Einstellungen, um die PagerStyle-Eigenschaft auf CssClass zu setzen. Lassen Sie uns außerdem die Paging-Schnittstelle so konfigurieren, dass mithilfe der NumericFirstLast Paging-Schnittstelle maximal fünf numerische Seitenschaltflächen 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 für das Paging

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

Abbildung 8: Bei aktivierter Seitenverwaltung wird nur eine Teilmenge der Datensätze auf einmal angezeigt (Klicken, um das Bild in voller Größe anzusehen)

Wenn der Benutzer auf eine der Seitenzahlen in der Paging-Schnittstelle klickt, erfolgt ein Postback, und die Seite wird neu geladen, wobei die Datensätze der angeforderten Seite angezeigt werden. Abbildung 9 zeigt die Ergebnisse, nachdem man sich entschieden hat, die letzte Seite der Daten anzusehen. Beachten Sie, dass die letzte Seite nur einen Datensatz hat; Dies liegt daran, dass insgesamt 81 Datensätze vorhanden sind, was zu acht Seiten von 10 Datensätzen pro Seite plus einer Seite mit einem einzigen Datensatz führt.

Abbildung 9: Durch Klicken auf eine Seitenzahl wird ein Postback verursacht und die entsprechende Teilmenge von Datensätzen angezeigt (Klicken, um das Bild in voller Größe anzuzeigen)

Paging s Server-Side Workflow

Wenn der Endbenutzer auf eine Schaltfläche in der Paging-Schnittstelle klickt, beginnt ein Postback und der folgende serverseitige Workflow:

1. Das GridView-Ereignis (oder DetailsView oder FormView) PageIndexChanging wird ausgelöst.
2. Die ObjectDataSource fordert alle Daten aus der BLL erneut an; Die Eigenschaftswerte PageIndex und PageSize der GridView werden verwendet, um zu bestimmen, welche von der BLL zurückgegebenen Datensätze in der GridView angezeigt werden sollen.
3. Das GridView-Ereignis PageIndexChanged wird ausgelöst.

In Schritt 2 fordert die ObjectDataSource alle Daten aus der Datenquelle erneut an. Diese Art von Paging wird häufig als Standardpaging bezeichnet, da es sich um das standardmäßige Pagingverhalten handelt, das beim Festlegen der AllowPagingEigenschaft auf true verwendet wird. Bei der standardmäßigen Paginierung des Web-Datenkontrollelements werden alle Datensätze für jede Datenseite unoptimiert abgerufen und verarbeitet, obwohl tatsächlich nur eine Teilmenge von Datensätzen in den HTML-Code gerendert wird, der an den Browser gesendet wird. Sofern die Datenbankdaten nicht von der BLL oder ObjectDataSource zwischengespeichert werden, ist das Standard-Paging für hinreichend große Resultsets oder für Webanwendungen mit vielen gleichzeitigen Benutzern nicht praktikabel.

Im nächsten Tutorial untersuchen wir, wie benutzerdefiniertes Paging implementiert wird. Mit benutzerdefiniertem Paging können Sie die 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 das benutzerdefinierte Paging die Effizienz beim Durchblättern großer Ergebnismengen erheblich.

Hinweis

Standardmäßige Seitennavigation ist nicht geeignet, wenn Sie durch ausreichend große Ergebnismengen blättern oder es gibt viele gleichzeitige Benutzer auf der Website. Beachten Sie jedoch, dass für eine benutzerdefinierte Seitennavigation mehr Anpassungen und Anstrengungen erforderlich sind und sie nicht so einfach ist wie das Aktivieren eines Kontrollkästchens (wie bei der Standardseitenverwaltung). Daher kann die Standard-Paginierung die ideale Wahl für kleine Websites mit geringem Datenverkehr oder beim Paging durch relativ kleine Ergebnismengen sein, da sie viel einfacher und schneller zu implementieren ist.

Wenn wir beispielsweise wissen, dass wir nie mehr als 100 Produkte in unserer Datenbank haben werden, wird die minimale Leistungssteigerung, die durch die benutzerdefinierte Seiteneinteilung erreicht wird, wahrscheinlich durch den Aufwand, der für die Implementierung erforderlich ist, ausgeglichen. Wenn wir jedoch eines Tages tausende oder zehntausende Produkte haben, würde die Nicht-Implementierung von benutzerdefiniertem Paging die Skalierbarkeit unserer Anwendung erheblich beeinträchtigen.

Schritt 4: Anpassen des Seitenumbrucherlebnisses

Die Daten-Websteuerelemente stellen eine Reihe von Eigenschaften bereit, die verwendet werden können, um das Blättererlebnis der Benutzer zu verbessern. Die PageCount Eigenschaft gibt z. B. an, wie viele Seiten insgesamt vorhanden sind, während die PageIndex Eigenschaft angibt, dass die aktuelle Seite besucht wird, und kann so festgelegt werden, dass ein Benutzer schnell zu einer bestimmten Seite verschoben wird. Um zu veranschaulichen, wie diese Eigenschaften verwendet werden, um die Benutzererfahrung beim Blättern zu verbessern, fügen wir unserer Seite ein Label-Web-Steuerelement hinzu, das den Benutzer darüber informiert, welche Seite er/sie gerade besucht, zusammen mit einer Dropdown-Listensteuerung, mit der er/sie schnell zu einer beliebigen Seite springen kann.

Fügen Sie Ihrer Seite zuerst ein Label-Webkontrolle hinzu, setzen Sie seine ID-Eigentum auf PagingInformation, und löschen Sie dessen Text-Eigentum. 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 der Eigenschaft PagingInformationText eine Meldung zu, die den Benutzer darüber informiert, welche Seite er gerade von insgesamt Products.PageIndex + 1 Seiten besucht Products.PageCount (wir addieren 1 zur Products.PageIndex Eigenschaft, da die Indizierung von PageIndex bei 0 beginnt). Ich habe mich entschieden, die Label-s-Text-Eigenschaft im DataBound-Ereignishandler zuzuweisen, anstatt im PageIndexChanged-Ereignishandler, da das DataBound-Ereignis jedes Mal ausgelöst wird, wenn Daten an die GridView gebunden werden, während der PageIndexChanged-Ereignishandler nur ausgelöst wird, wenn der Seitenindex geändert wird. Wenn die GridView anfänglich Daten enthält, die auf dem ersten Seitenbesuch gebunden sind, wird das PageIndexChanging Ereignis nicht ausgelöst (während das DataBound Ereignis der Fall ist).

Mit dieser Ergänzung wird dem Benutzer nun eine Meldung angezeigt, die angibt, welche Seite sie besucht, und wie viele Gesamtseiten von Daten vorhanden sind.

Abbildung 10: Die aktuelle Seitenzahl und die Gesamtanzahl der Seiten werden angezeigt (Zum Anzeigen des Bilds mit voller Größe klicken)

Zusätzlich zum Label-Steuerelement fügen wir auch ein DropDownList-Steuerelement hinzu, das die Seitenzahlen in der 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 ein DropDownList-Element hinzu, setzen Sie dessen ID-Eigenschaft auf PageList und aktivieren Sie die Option "AutoPostBack" im Smart-Tag.

Kehren Sie als Nächstes zum DataBound 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 verwenden das System möglicherweise gleichzeitig, hinzufügen oder entfernen Datensätze aus der Products Tabelle. Solche Einfügungen oder Löschungen könnten die Anzahl der Datenseiten ändern.

Als Nächstes müssen wir die Seitenzahlen erneut erstellen und die Seite, die standardmäßig ausgewählt ist und der aktuellen GridView PageIndex zugeordnet ist. Wir erreichen dies, indem wir eine Schleife von 0 bis PageCount - 1 verwenden und in jeder Iteration eine neue ListItem hinzufügen. Wir legen ihre Selected-Eigenschaft auf "true" fest, wenn der aktuelle Iterationsindex der PageIndex-Eigenschaft der GridView 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 die 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, bewirkt das bloße Ändern der GridView-Eigenschaft PageIndex , dass die Daten wieder an gridView gebunden werden. Im GridView s-Ereignishandler DataBound ist die entsprechende DropDownList ListItem ausgewählt.

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

Schritt 5: Hinzufügen der Bi-Directional-Sortier-Unterstützung

Das Hinzufügen bidirektionaler Sortierunterstützung ist so einfach wie das Hinzufügen der Pagingunterstützung, indem Sie einfach die Option "Sortierung aktivieren" aus dem Smarttag von GridView überprüfen (wodurch die GridView s-EigenschaftAllowSorting auf true) festgelegt wird. Dadurch werden alle Kopfzeilen der GridView-Felder als LinkButtons gerendert, die beim Klicken zu einem Postback führen und die Daten zurückgeben, die nach der geklickten Spalte in aufsteigender Reihenfolge sortiert sind. Wenn Sie erneut auf denselben Header linkButton klicken, werden die Daten in absteigender Reihenfolge neu sortiert.

Hinweis

Wenn Sie statt eines typierten DataSets eine benutzerdefinierte Datenzugriffsebene verwenden, verfügen Sie möglicherweise nicht über eine Option zum Aktivieren der Sortierung im Smarttag von GridView. Nur GridViews, die an den Datenquellen gebunden sind, welche die Sortierung nativ unterstützen, haben dieses Kontrollkästchen verfügbar. Das Typd DataSet bietet unterstützung für die out-of-the-box-Sortierung, da die ADO.NET DataTable eine Sort Methode bereitstellt, die beim Aufrufen die DataTable-Datenrows mithilfe der angegebenen Kriterien sortiert.

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

Die Sortier-LinkButtons werden als HTML-Hyperlinks gerendert, deren aktuelle Farben (blau für einen nicht besuchten Link und dunkelrot für einen besuchten Link) mit der Hintergrundfarbe der Kopfzeilenzeile konfliktieren. Stattdessen werden alle Kopfzeilenlinks in 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 weißer Text verwendet wird, wenn diese Hyperlinks in einem Element angezeigt werden, das die HeaderStyle-Klasse verwendet.

Nach dieser CSS-Ergänzung sollte ihr Bildschirm beim Aufrufen der Seite über einen Browser ähnlich aussehen wie in Abbildung 12. Insbesondere abbildung 12 zeigt die Ergebnisse, nachdem auf den Kopfzeilenlink des Felds "Preis" geklickt wurde.

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

Untersuchen des Sortierworkflows

Alle GridView-Felder "BoundField", "CheckBoxField", "TemplateField" usw. weisen eine SortExpression Eigenschaft auf, die den Ausdruck angibt, der zum Sortieren der Daten verwendet werden soll, wenn auf den Sortierkopflink dieses Felds geklickt wird. Die GridView verfügt auch über eine SortExpression Eigenschaft. Wenn auf einen Sortierkopf-LinkButton geklickt wird, weist das GridView diesen Feldwert SortExpression seiner SortExpression Eigenschaft zu. Als Nächstes werden die Daten aus der ObjectDataSource erneut abgerufen und entsprechend der GridView s-Eigenschaft SortExpression sortiert. In der folgenden Liste wird die Reihenfolge der Schritte beschrieben, die geschehen, wenn ein Endbenutzer die Daten in einer GridView sortiert.

1. Das GridView-Sortierereignis wird ausgelöst.
2. Die GridView s-EigenschaftSortExpression wird auf das SortExpression Feld festgelegt, auf dessen Sortierheader LinkButton geklickt wurde.
3. Die ObjectDataSource ruft alle Daten aus der BLL erneut ab und sortiert dann die Daten mithilfe der GridView s SortExpression
4. Die Eigenschaft von GridView PageIndex wird auf 0 zurückgesetzt, was bedeutet, dass der Benutzer beim Sortieren auf die erste Seite der Daten zurückkehrt, vorausgesetzt, dass die Unterstützung der Seitennummerierung implementiert wurde.
5. Das GridView-Ereignis Sorted wird ausgelöst.

Wie bei standardseitigem Paging ruft die Standardsortieroption alle Datensätze aus der BLL erneut ab. Wenn Sie Sortierung ohne Paginierung oder beim Sortieren mit Standardpaginierung verwenden, gibt es keine Möglichkeit, diese Leistungseinbußen zu umgehen (mit Ausnahme des Zwischenspeicherns der Datenbankdaten). Wie wir in einem zukünftigen Tutorial sehen werden, ist es möglich, Daten effizient zu sortieren, wenn benutzerdefiniertes Paging verwendet wird.

Wenn eine ObjectDataSource über die Dropdownliste im Smarttag "GridView" an "GridView" gebunden wird, weist jedes GridView-Feld automatisch seine SortExpression Eigenschaft dem Namen des Datenfelds in der ProductsRow Klasse zu. Der "ProductNameBoundField sSortExpression" wird auf ProductName festgelegt, wie im folgenden deklarativen Markup dargestellt:

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

Ein Feld kann so konfiguriert werden, dass es nicht sortiert werden kann, indem seine SortExpression Eigenschaft gelöscht wird (indem es einer leeren Zeichenfolge zugewiesen wird). Um dies zu veranschaulichen, stellen Sie sich vor, dass wir unseren Kunden nicht erlauben wollten, unsere Produkte nach Preis zu sortieren. 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 "GridView" zugegriffen werden kann).

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

Nachdem die Eigenschaft für das SortExpression BoundField entfernt wurde, wird die UnitPrice Kopfzeile als Text und nicht als Link 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 mit voller Größe anzuzeigen)

Programmgesteuertes Sortieren der GridView

Sie können den Inhalt des GridView-Steuerelements auch programmgesteuert mithilfe der GridView s-MethodeSort sortieren. Übergeben Sie einfach den SortExpression Wert, um nach dem SortDirection (Ascending oder Descending) zu sortieren, und die GridView-Daten werden neu sortiert.

Stellen Sie sich vor, der Grund, warum wir die Sortierung nach UnitPrice deaktiviert haben, war, dass wir besorgt waren, unsere Kunden könnten einfach nur die Produkte mit den niedrigsten Preisen kaufen. 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 von dem teuersten Preis bis zum geringsten Preis.

Um dies zu erreichen, fügen Sie der Seite ein Schaltflächen-Websteuerelement hinzu, legen Sie dessen ID Eigenschaft auf SortPriceDescendingund seine Text Eigenschaft auf "Nach Preis sortieren" fest. Erstellen Sie als Nächstes einen Ereignishandler für das Button-Ereignis Click , indem Sie im Designer auf das Schaltflächen-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

Wenn Sie auf diese Schaltfläche klicken, wird der Benutzer zur ersten Seite mit den nach Preis sortierten Produkten von den meisten Kosten bis zu den geringsten Kosten (siehe Abbildung 15) zurückgegeben.

Abbildung 15: Durch Klicken auf die Schaltfläche werden die Produkte vom teuersten zum günstigsten sortiert (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

In diesem Lernprogramm haben wir erfahren, wie Sie standardmäßige Paging- und Sortierfunktionen implementieren, die beide so einfach wie das Aktivieren eines Kontrollkästchens waren! Wenn ein Benutzer Daten sortiert oder Seiten durchblättert, spielt sich ein ähnlicher Workflow ab.

1. Ein Postback erfolgt
2. Das Ereignis vor der Ebene des Datenwebsteuerelements wird ausgelöst (PageIndexChanging oder Sorting)
3. Alle Daten werden von ObjectDataSource erneut abgerufen.
4. Das Ereignis auf Post-Level-Ebene des Daten-Web-Steuerelements wird ausgelöst (PageIndexChanged oder Sorted)

Während die Implementierung grundlegender Paging- und Sortierungsfunktionen ein Kinderspiel ist, müssen mehr Anstrengungen unternommen werden, um die effizientere benutzerdefinierte Seitenverwaltung zu nutzen oder die Paging- oder Sortierschnittstelle weiter zu verbessern. In zukünftigen Lernprogrammen werden diese Themen erläutert.

Glückliche Programmierung!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft Web Technologies zusammen. Scott arbeitet als unabhängiger Berater, Trainer und Schriftsteller. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann bei mitchell@4GuysFromRolla.comerreicht werden.

VorherigeNächstes