Seitennummerierung und Sortieren von Berichtsdaten (C#)

von Scott Mitchell

PDF herunterladen

Paging und Sortierung sind zwei sehr häufige Features beim Anzeigen von Daten in einer Onlineanwendung. In diesem Tutorial werden wir einen ersten Blick auf das Hinzufügen von Sortierung und Seitennavigation zu unseren Berichten werfen, auf die wir dann in zukünftigen Tutorials 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 eine Vielzahl von Berichten erstellt werden kann, einschließlich Schnittstellen, die das Hinzufügen, Bearbeiten und Löschen von Daten ermöglichen, haben wir nicht betrachtet, wie man Daten sortiert, und die einzigen Beispiele für das Blättern, 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 weist diese vereinfachte Implementierung einige Nachteile auf. Die Sortierschnittstelle lässt etwas zu wünschen übrig, und die Paging-Routinen sind nicht für eine effiziente Verarbeitung großer Ergebnismengen konzipiert. In zukünftigen Lernprogrammen erfahren Sie, wie Sie die Einschränkungen der out-of-the-box Paging- und Sortierlösungen überwinden können.

Schritt 1: Hinzufügen der Lernprogrammseiten für 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

Erstellen Sie einen PagingAndSorting-Ordner und fügen Sie die ASP.NET-Lernprogrammseiten hinzu.

Abbildung 1: Erstellen eines PagingAndSorting-Ordners und Hinzufügen der ASP.NET-Tutorial-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 Masterseiten und Navigation der Website erstellt haben, durchläuft die Sitemap und zeigt diese Tutorials im aktuellen Abschnitt in einer Aufzählung an.

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

Damit die Liste die Paging- und Sortierprogramme anzeigt, die wir erstellen werden, müssen sie der Sitemap hinzugefügt werden. Öffnen Sie die Web.sitemap Datei, und fügen Sie das folgende Markup nach dem Markup "Bearbeiten", "Einfügen" und "Löschen von Websitezuordnungsknoten" 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 Paging- und Sortierfunktionen tatsächlich umsetzen, erstellen wir zunächst eine standardmäßige, nicht sortierbare und nicht paginierbare 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 werden die GridView-Felder so angepasst, 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" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            ReadOnly="True" SortExpression="SupplierName" />
        <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 Anzeigen aller Produkte auf einem Bildschirm kann zu einer Informationsüberflutung für den Benutzer führen, der die Daten durchsieht. 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 "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, da wir sie beim Hinzufügen der Pagingunterstützung zu den DetailsView- und FormView-Steuerelementen in früheren Tutorien 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 einen Wert von 10 festgelegt).

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 "Weiter" und "Vorherige" an, sodass der Benutzer jeweils eine Seite vorwärts oder rückwärts gehen 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 zusätzlich zu den Seitenzahlen enthält die Schaltflächen "Erster" und "Letzter", die dem Benutzer ermöglichen, schnell zur ersten oder letzten Seite der Daten zu wechseln. Die Schaltflächen "Erster/Letzter" werden nur angezeigt, wenn nicht alle numerischen Seitenzahlen passen.

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 das Zählen 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. Richten wir die Pagingschnittstelle rechtsbündig auf einem hellgrauen Hintergrund aus. Anstatt diese Eigenschaften direkt über die GridView-Eigenschaft PagerStyle festzulegen, erstellen wir eine CSS-Klasse in Styles.css namens PagerRowStyle und weisen dann die Eigenschaft PagerStyles 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 Lernprogramm "Masterseiten und Websitenavigation" erläutert, können Skin-Dateien verwendet werden, um die Standardwerte für ein Web-Element anzugeben. Erweitern Sie daher die vorhandenen Einstellungen, um die Eigenschaft PagerStyle auf CssClassPagerRowStyle 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 besucht wird, nachdem das Kontrollkästchen „Paging aktivieren für GridView“ aktiviert wurde und die PagerStyle und 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 werden nur eine Teilmenge der Datensätze gleichzeitig angezeigt (Klicken, um das Bild in voller Größe anzuzeigen)

Wenn der Benutzer auf eine der Seitenzahlen in der Paging-Schnittstelle klickt, erfolgt ein Postback, und die Seite wird neu geladen, um die Datensätze der angeforderten Seite anzuzeigen. Abbildung 9 zeigt die Ergebnisse nach der Entscheidung, die letzte Seite der Daten anzuzeigen. 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 Ereignis des GridView (oder des DetailsView oder des FormView) PageIndexChanging wird ausgelöst.
2. Die ObjectDataSource fordert alle Daten aus der BLL erneut an; die Eigenschaftswerte der GridView PageIndex und PageSize werden verwendet, um zu bestimmen, welche Datensätze von der BLL zurückgegeben und in der GridView angezeigt werden müssen.
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 Standard-Paging bezeichnet, da es sich um das standardmäßige Paging-Verhalten handelt, das beim Festlegen der AllowPaging Eigenschaft auf true verwendet wird. Bei der Standardseitenaufteilung des Daten-Web-Steuerelements werden einfach alle Datensätze für jede Datenseite abgerufen, obwohl tatsächlich nur eine Teilmenge dieser Datensätze in den HTML-Code gerendert wird, der an den Browser gesendet wird. Wenn die Datenbankdaten nicht von der BLL oder ObjectDataSource zwischengespeichert werden, ist die Standardpaginierung für ausreichend große Ergebnissets oder für Webanwendungen mit vielen gleichzeitigen Benutzern unbrauchbar.

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 des Pagings durch große Ergebnismengen erheblich.

Hinweis

Während das Standard-Paging nicht geeignet ist, wenn durch ausreichend große Resultsets geblättert wird oder für Websites mit vielen gleichzeitigen Benutzern, sollten Sie beachten, dass benutzerdefiniertes Paging mehr Änderungen und Aufwand erfordert und nicht so einfach ist wie das Aktivieren eines Kontrollkästchens (wie es beim Standard-Paging der Fall ist). Daher kann Standard-Paging die ideale Wahl für kleine Websites mit geringem Traffic oder beim Paging durch relativ kleine Ergebnismengen sein, da es 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 von benutzerdefiniertem Paging genossen wird, wahrscheinlich durch den für die Implementierung erforderlichen Aufwand ausgeglichen. Wenn wir jedoch eines Tages tausende oder zehntausende Produkte haben, würde die Entscheidung, die Implementierung von benutzerdefiniertem Paging nicht umzusetzen, die Skalierbarkeit unserer Anwendung erheblich beeinträchtigen.

Schritt 4: Anpassung des Seitenumblätterungserlebnisses

Die Datenwebsteuerelemente bieten eine Reihe von Eigenschaften, die verwendet werden können, um die Paging-Erfahrung des Benutzers 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 können, um die Erfahrung des Benutzers bei der Navigation zwischen den Seiten zu verbessern, fügen wir unserer Seite ein Label-Websteuermodul 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 Ihrer Seite zuerst ein Label-Steuerelement hinzu, legen Sie dessen ID-Eigenschaft auf PagingInformation fest und löschen Sie seine Text-Eigenschaft. Erstellen Sie als Nächstes einen Ereignishandler für das GridView-Ereignis DataBound , und fügen Sie den folgenden Code hinzu:

protected void Products_DataBound(object sender, EventArgs e)
{
    PagingInformation.Text = string.Format("You are viewing page {0} of {1}...",
        Products.PageIndex + 1, Products.PageCount);
}

Dieser Ereignishandler weist der Eigenschaft PagingInformation der Beschriftung Text eine Meldung zu, die den Benutzer darüber informiert, dass die Seite, die er gerade besucht, Seite Products.PageIndex + 1 von insgesamt Products.PageCount Seiten ist (wir addieren 1 zur Eigenschaft Products.PageIndex, da PageIndex ab 0 indiziert wird). Ich habe die Eigenschaft dieses Labels Text im DataBound Ereignishandler im Gegensatz zum PageIndexChanged Ereignishandler ausgewählt, da das DataBound Ereignis jedes Mal ausgelöst wird, wenn Daten an der GridView gebunden sind, während der PageIndexChanged Ereignishandler nur ausgelöst wird, wenn der Seitenindex gewechselt 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 eine DropDownList hinzu, setzen Sie die Eigenschaft ID auf PageList und aktivieren Sie die Option "Enable AutoPostBack" im Smarttag.

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 (int i = 0; i < Products.PageCount; i++)
{
    // Add the new ListItem
    ListItem pageListItem = new ListItem(string.Concat("Page ", i + 1), i.ToString());
    PageList.Items.Add(pageListItem);
    // select the current item, if needed
    if (i == Products.PageIndex)
        pageListItem.Selected = true;
}

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 diejenige, die der aktuellen GridView PageIndex standardmäßig zugeordnet ist, ausgewählt haben. Wir erreichen dies mit einer Schleife von 0 bis PageCount - 1, in der in jeder Iteration ein neues ListItem hinzugefügt wird und seine Selected-Eigenschaft auf "true" gesetzt wird, wenn der aktuelle Iterationsindex dem PageIndex-Wert der GridView-Eigenschaft 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 void PageList_SelectedIndexChanged(object sender, EventArgs e)
{
    // Jump to the specified page
    Products.PageIndex = Convert.ToInt32(PageList.SelectedValue);
}

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 Bi-Directional Sortierunterstü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 Datenquellen gebunden sind, welche die Sortierung nativ unterstützen, haben dieses Kontrollkästchen verfügbar. Das Typed DataSet bietet Unterstützung für die direkt einsatzbereite Sortierung, da die ADO.NET DataTable eine Sort-Methode bereitstellt, die beim Aufrufen die Datenreihen der DataTable 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 unbesuchten Link und dunkelrot für einen besuchten Link) mit der Hintergrundfarbe der Kopfzeile kollidieren. 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 hat ebenfalls eine SortExpression-Eigenschaft. Wenn auf einen Sortier-Header LinkButton geklickt wird, weist das GridView den 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 ablaufen, wenn ein Endbenutzer die Daten in einer GridView sortiert.

1. Das GridView-Sortierereignis wird ausgelöst.
2. Die GridView-EigenschaftSortExpression wird auf das Feld SortExpression festgelegt, dessen Sortierkopf-LinkButton angeklickt 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 PageIndex der GridView wird auf 0 zurückgesetzt, was bedeutet, dass der Benutzer beim Sortieren auf die erste Seite der Daten zurückkehrt (vorausgesetzt, die Seitenumbruch-Unterstützung wurde implementiert).
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 Seiteneinteilung oder beim Sortieren mit Standard-Seiteneinteilung verwenden, gibt es keine Möglichkeit, diese Leistungseinbuße zu umgehen, außer der Zwischenspeicherung der Datenbankdaten. Wie wir jedoch in einem zukünftigen Tutorial sehen werden, ist es möglich, Daten effizient zu sortieren, wenn wir benutzerdefiniertes Paging verwenden.

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

<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, dass der Grund, warum wir die Sortierung nach UnitPrice deaktiviert haben, darin bestand, dass wir uns Sorgen gemacht haben, 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 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 void SortPriceDescending_Click(object sender, EventArgs e)
{
    // Sort by UnitPrice in descending order
    Products.Sort("UnitPrice", SortDirection.Descending);
}

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 den Button werden die Produkte vom teuersten bis zum günstigsten geordnet (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 durchblättert, ergibt sich ein ähnlicher Workflow.

1. Ein Postback folgt
2. Das Vorebenen-Ereignis des Daten-Web-Steuerelements wird ausgelöst (PageIndexChanging oder Sorting)
3. Alle Daten werden von ObjectDataSource erneut abgerufen.
4. Das Web-Datensteuerelement-Ereignis auf Stufenebene wird ausgelöst (PageIndexChanged oder Sorted)

Während die Implementierung grundlegender Paging- und Sortierungsfunktionen ein Kinderspiel ist, müssen mehr Anstrengungen unternommen werden, um das effizientere benutzerdefinierte Paging 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.

Nächster