Erstellen einer angepassten Benutzeroberfläche zum Sortieren (C#)

von Scott Mitchell

PDF herunterladen

Bei der Anzeige einer langen Liste sortierter Daten kann es sehr hilfreich sein, verwandte Daten zu gruppieren, indem Trennzeilen eingeführt werden. In diesem Tutorial erfahren Sie, wie Sie eine solche Sortier-Benutzeroberfläche erstellen.

Einführung

Wenn eine lange Liste sortierter Daten angezeigt wird, bei denen nur eine Handvoll unterschiedliche Werte in der sortierten Spalte vorhanden sind, fällt es einem Endbenutzer möglicherweise schwer, zu erkennen, wo genau die Differenzgrenzen auftreten. Beispielsweise gibt es 81 Produkte in der Datenbank, aber nur neun verschiedene Kategorieoptionen (acht eindeutige Kategorien plus option NULL ). Betrachten Sie den Fall eines Benutzers, der daran interessiert ist, die Produkte zu untersuchen, die unter die Kategorie Meeresfrüchte fallen. Auf einer Seite, die alle Produkte in einer einzelnen GridView listet, kann der Benutzer entscheiden, dass er die Ergebnisse am besten nach Kategorie sortiert, wodurch alle Seafood-Produkte gruppiert werden. Nach der Sortierung nach Kategorie muss der Benutzer dann die Liste durchsuchen und nach dem Ausgangspunkt und Ende der Meeresfrüchte gruppierten Produkte suchen. Da die Ergebnisse alphabetisch nach dem Kategorienamen sortiert sind, ist es nicht schwierig, die Meeresfrüchte-Produkte zu finden, aber es ist immer noch erforderlich, die Liste der Elemente im Raster genau zu überprüfen.

Um die Grenzen zwischen sortierten Gruppen hervorzuheben, verwenden viele Websites eine Benutzeroberfläche, die ein Trennzeichen zwischen diesen Gruppen hinzufügt. Trennzeichen wie die in Abbildung 1 gezeigten ermöglichen es einem Benutzer, eine bestimmte Gruppe schneller zu finden, ihre Grenzen zu identifizieren und zu ermitteln, welche verschiedenen Gruppen in den Daten vorhanden sind.

Abbildung 1: Jede Kategoriegruppe ist eindeutig identifiziert (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

In diesem Tutorial erfahren Sie, wie Sie eine solche Sortier-Benutzeroberfläche erstellen.

Schritt 1: Erstellen einer standardmäßigen, sortierbaren GridView

Bevor wir uns mit der Erweiterung der GridView befassen, um die erweiterte Sortierschnittstelle bereitzustellen, erstellen wir zunächst eine standardmäßige, sortierbare GridView, die die Produkte auflistet. Öffnen Sie zunächst die CustomSortingUI.aspx Seite im PagingAndSorting Ordner. Fügen Sie der Seite ein GridView-Element hinzu, legen Sie ihre ID Eigenschaft auf ProductListfest, und binden Sie sie an eine neue ObjectDataSource. Konfigurieren Sie objectDataSource so, dass die ProductsBLL Methode der Klasse s GetProducts() zum Auswählen von Datensätzen verwendet wird.

Konfigurieren Sie als Nächstes die GridView so, dass sie nur die ProductName, CategoryName, , SupplierNameund UnitPrice BoundFields und das Discontinued CheckBoxField enthält. Konfigurieren Sie schließlich die GridView so, dass die Sortierung unterstützt wird, indem Sie das Kontrollkästchen Sortierung aktivieren im Smarttag des GridView-Smarttags aktivieren (oder die -Eigenschaft auf truefestlegenAllowSorting). Nach dem Vornehmen dieser Ergänzungen zur CustomSortingUI.aspx Seite sollte das deklarative Markup wie folgt aussehen:

<asp:GridView ID="ProductList" runat="server" AllowSorting="True"
    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" DataFormatString="{0:C}"
            HeaderText="Price" HtmlEncode="False" SortExpression="UnitPrice" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}" SelectMethod="GetProducts"
    TypeName="ProductsBLL"></asp:ObjectDataSource>

Nehmen Sie sich einen Moment Zeit, um unsere bisherigen Fortschritte in einem Browser zu sehen. Abbildung 2 zeigt die sortierbare GridView, wenn die Daten nach Kategorie in alphabetischer Reihenfolge sortiert sind.

Abbildung 2: Die sortierbaren GridView-Daten sind nach Kategorie sortiert (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Schritt 2: Untersuchen von Techniken zum Hinzufügen der Trennzeilen

Wenn die generische, sortierbare GridView abgeschlossen ist, bleibt es nur noch möglich, die Trennzeilen in der GridView vor jeder eindeutig sortierten Gruppe hinzuzufügen. Aber wie können solche Zeilen in die GridView eingefügt werden? Im Wesentlichen müssen wir die GridView-Zeilen durchlaufen, bestimmen, wo die Unterschiede zwischen den Werten in der sortierten Spalte auftreten, und dann die entsprechende Trennzeile hinzufügen. Wenn Sie über dieses Problem nachdenken, scheint es natürlich, dass sich die Lösung im GridView-Ereignishandler RowDataBound befindet. Wie im Tutorial Benutzerdefinierte Formatierung basierend auf Daten erläutert, wird dieser Ereignishandler häufig verwendet, wenn Formatierungen auf Zeilenebene basierend auf den Daten der Zeile angewendet werden. RowDataBound Der Ereignishandler ist hier jedoch nicht die Lösung, da zeilen nicht programmgesteuert von diesem Ereignishandler zu GridView hinzugefügt werden können. Die GridView-Auflistung Rows ist in der Tat schreibgeschützt.

Um der GridView zusätzliche Zeilen hinzuzufügen, haben wir drei Möglichkeiten:

• Fügen Sie diese Metadatentrennzeilen den tatsächlichen Daten hinzu, die an gridView gebunden sind.
• Nachdem die GridView an die Daten gebunden wurde, fügen Sie der Steuerelementsammlung des GridView-Steuerelements zusätzliche TableRow Instanzen hinzu.
• Erstellen eines benutzerdefinierten Serversteuerelements, das das GridView-Steuerelement erweitert und die Methoden außer Kraft setzt, die für das Erstellen der GridView-Struktur verantwortlich sind

Das Erstellen eines benutzerdefinierten Serversteuerelements ist der beste Ansatz, wenn diese Funktionalität auf vielen Webseiten oder auf mehreren Websites erforderlich ist. Dies würde jedoch einiges an Code und eine gründliche Untersuchung der internen Funktionsweise von GridView mit sich bringen. Daher werden wir diese Option für dieses Tutorial nicht in Betracht ziehen.

Die beiden anderen Optionen zum Hinzufügen von Trennzeilen zu den tatsächlichen Daten, die an die GridView gebunden sind, und das Bearbeiten der GridView-Steuerelementsammlung nach ihrer Bindung – greifen das Problem anders an und verdienen eine Diskussion.

Hinzufügen von Zeilen zu den an gridView gebundenen Daten

Wenn gridView an eine Datenquelle gebunden ist, wird für jeden von der Datenquelle zurückgegebenen Datensatz ein GridViewRow erstellt. Daher können wir die erforderlichen Trennzeilen einfügen, indem wir der Datenquelle Trennzeichensätze hinzufügen, bevor sie an die GridView gebunden werden. Abbildung 3 veranschaulicht dieses Konzept.

Abbildung 3: Ein Verfahren umfasst das Hinzufügen von Trennzeilen zur Datenquelle

Ich verwende den Begriff Trennzeichendatensätze in Anführungszeichen, da es keinen speziellen Trennzeichensatz gibt. Stattdessen müssen wir irgendwie kennzeichnen, dass ein bestimmter Datensatz in der Datenquelle als Trennzeichen und nicht als normale Datenzeile dient. In unseren Beispielen binden wir eine ProductsDataTable instance an die GridView, die aus bestehtProductRows. Wir können einen Datensatz als Trennzeile kennzeichnen, indem wir seine CategoryID Eigenschaft auf -1 festlegen (da ein solcher Wert normalerweise nicht vorhanden war).

Um diese Technik zu verwenden, müssen Sie die folgenden Schritte ausführen:

1. Programmgesteuertes Abrufen der Daten zum Binden an gridView (ein ProductsDataTable instance)
2. Sortieren der Daten basierend auf den GridView-Eigenschaften SortExpressionSortDirection
3. Iterieren Sie durch die ProductsRows in, ProductsDataTablesuchen Sie, wo die Unterschiede in der sortierten Spalte liegen.
4. Führen Sie an jeder Gruppengrenze einen Trenndatensatz ProductsRow instance in die DataTable ein, auf das er CategoryID festgelegt -1 ist (oder eine beliebige Bezeichnung, um einen Datensatz als Trenndatensatz zu markieren)
5. Nach dem Einfügen der Trennzeilen binden Sie die Daten programmgesteuert an die GridView

Zusätzlich zu diesen fünf Schritten müssen wir auch einen Ereignishandler für das GridView-Ereignis RowDataBound bereitstellen. Hier überprüfen wir jeden DataRow und ermitteln, ob es sich um eine Trennzeile handelt, deren CategoryID Einstellung lautet -1. Wenn ja, sollten wir wahrscheinlich die Formatierung oder den text anpassen, der in den Zellen angezeigt wird.

Die Verwendung dieser Technik zum Einfügen der Sortiergruppengrenzen erfordert etwas mehr Arbeit als oben beschrieben, da Sie auch einen Ereignishandler für das GridView-Ereignis Sorting bereitstellen und die SortExpression Werte und SortDirection nachverfolgen müssen.

Bearbeiten der GridView-Steuerelementsammlung nach dem Datenfluss

Anstatt die Daten vor der Bindung an gridView zu senden, können wir die Trennzeilen hinzufügen, nachdem die Daten an gridView gebunden wurden. Der Prozess der Datenbindung baut die GridView-Steuerelementhierarchie auf, die in Wirklichkeit einfach eine Table instance ist, die aus einer Auflistung von Zeilen besteht, von denen jede aus einer Auflistung von Zellen besteht. Insbesondere enthält die GridView-Steuerelementauflistung ein Table -Objekt im Stammverzeichnis, ein GridViewRow -Objekt (das von der TableRow -Klasse abgeleitet wird) für jeden Datensatz in der DataSource an die GridView gebundenen Und ein TableCell -Objekt in jeder GridViewRow instance für jedes Datenfeld in der DataSource.

Um Trennzeilen zwischen den einzelnen Sortiergruppen hinzuzufügen, können wir diese Steuerelementhierarchie direkt bearbeiten, sobald sie erstellt wurde. Wir können sicher sein, dass die GridView-Steuerelementhierarchie zum letzten Mal erstellt wurde, wenn die Seite gerendert wird. Daher überschreibt dieser Ansatz die Methode s Render der Page Klasse, an der die endgültige Steuerungshierarchie der GridView aktualisiert wird, um die erforderlichen Trennzeilen einzuschließen. Abbildung 4 veranschaulicht diesen Prozess.

Abbildung 4: Eine alternative Technik bearbeitet die GridView-Steuerelementhierarchie (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

In diesem Tutorial verwenden wir diesen letztgenannten Ansatz, um die Benutzeroberfläche des Sortierens anzupassen.

Schritt 3: Hinzufügen der Trennzeilen zur Steuerungshierarchie von GridView

Da wir die Trennzeilen erst der GridView-Steuerelementhierarchie hinzufügen möchten, nachdem die Steuerelementhierarchie auf dieser Seite zum letzten Mal erstellt und erstellt wurde, möchten wir diese Ergänzung am Ende des Seitenlebenszyklus durchführen, aber bevor die eigentliche GridView-Steuerelementhierarchie in HTML gerendert wurde. Der letzte mögliche Punkt, an dem wir dies erreichen können, ist das Ereignis der PageRender Klasse, das wir in unserer CodeBehind-Klasse mit der folgenden Methodensignatur außer Kraft setzen können:

protected override void Render(HtmlTextWriter writer)
{
    // Add code to manipulate the GridView control hierarchy
    base.Render(writer);
}

Wenn die ursprüngliche Render Methode der Page Klasse aufgerufen base.Render(writer) wird, werden alle Steuerelemente auf der Seite gerendert, wodurch das Markup basierend auf ihrer Steuerelementhierarchie generiert wird. Daher ist es zwingend erforderlich, dass wir beide aufrufen base.Render(writer), damit die Seite gerendert wird, und dass wir die GridView-Steuerelementhierarchie bearbeiten, bevor sie aufgerufen base.Render(writer)werden, sodass die Trennzeilen der GridView-Steuerelementhierarchie hinzugefügt wurden, bevor sie gerendert wurden.

Zum Einfügen der Sortiergruppenheader müssen wir zunächst sicherstellen, dass der Benutzer die Sortierung der Daten angefordert hat. Standardmäßig sind die Inhalte von GridView nicht sortiert, sodass wir keine Gruppensortierheader eingeben müssen.

Vorausgesetzt, die Daten wurden sortiert, besteht unsere nächste Aufgabe darin, zu bestimmen, nach welcher Spalte die Daten sortiert wurden, und dann die Zeilen zu überprüfen, um nach Unterschieden in den Werten dieser Spalte zu suchen. Der folgende Code stellt sicher, dass die Daten sortiert wurden, und sucht die Spalte, nach der die Daten sortiert wurden:

protected override void Render(HtmlTextWriter writer)
{
    // Only add the sorting UI if the GridView is sorted
    if (!string.IsNullOrEmpty(ProductList.SortExpression))
    {
        // Determine the index and HeaderText of the column that
        //the data is sorted by
        int sortColumnIndex = -1;
        string sortColumnHeaderText = string.Empty;
        for (int i = 0; i < ProductList.Columns.Count; i++)
        {
            if (ProductList.Columns[i].SortExpression.CompareTo(ProductList.SortExpression)
                == 0)
            {
                sortColumnIndex = i;
                sortColumnHeaderText = ProductList.Columns[i].HeaderText;
                break;
            }
        }
        // TODO: Scan the rows for differences in the sorted column�s values
}

Wenn die GridView noch sortiert werden muss, wurde die GridView-Eigenschaft SortExpression nicht festgelegt. Daher möchten wir die Trennzeilen nur hinzufügen, wenn diese Eigenschaft einen Wert aufweist. Wenn dies der Fall ist, müssen wir als Nächstes den Index der Spalte ermitteln, nach der die Daten sortiert wurden. Dies wird erreicht, indem sie die GridView-Auflistung Columns durchläuft und nach der Spalte sucht, deren SortExpression Eigenschaft der GridView-Eigenschaft SortExpression entspricht. Zusätzlich zum Index der Spalte greifen wir auch die HeaderText -Eigenschaft ab, die beim Anzeigen der Trennzeilen verwendet wird.

Mit dem Index der Spalte, nach der die Daten sortiert werden, besteht der letzte Schritt darin, die Zeilen der GridView aufzulisten. Für jede Zeile müssen wir bestimmen, ob sich der Wert der sortierten Spalte vom Wert der sortierten Spalte der vorherigen Zeile unterscheidet. Wenn ja, müssen wir eine neue GridViewRow instance in die Steuerungshierarchie einfügen. Dies wird mit dem folgenden Code erreicht:

protected override void Render(HtmlTextWriter writer)
{
    // Only add the sorting UI if the GridView is sorted
    if (!string.IsNullOrEmpty(ProductList.SortExpression))
    {
        // ... Code for finding the sorted column index removed for brevity ...
        // Reference the Table the GridView has been rendered into
        Table gridTable = (Table)ProductList.Controls[0];
        // Enumerate each TableRow, adding a sorting UI header if
        // the sorted value has changed
        string lastValue = string.Empty;
        foreach (GridViewRow gvr in ProductList.Rows)
        {
            string currentValue = gvr.Cells[sortColumnIndex].Text;
            if (lastValue.CompareTo(currentValue) != 0)
            {
                // there's been a change in value in the sorted column
                int rowIndex = gridTable.Rows.GetRowIndex(gvr);
                // Add a new sort header row
                GridViewRow sortRow = new GridViewRow(rowIndex, rowIndex,
                    DataControlRowType.DataRow, DataControlRowState.Normal);
                TableCell sortCell = new TableCell();
                sortCell.ColumnSpan = ProductList.Columns.Count;
                sortCell.Text = string.Format("{0}: {1}",
                    sortColumnHeaderText, currentValue);
                sortCell.CssClass = "SortHeaderRowStyle";
                // Add sortCell to sortRow, and sortRow to gridTable
                sortRow.Cells.Add(sortCell);
                gridTable.Controls.AddAt(rowIndex, sortRow);
                // Update lastValue
                lastValue = currentValue;
            }
        }
    }
    base.Render(writer);
}

Dieser Code verweist zunächst programmgesteuert auf das Objekt, das Table sich im Stammverzeichnis der GridView-Steuerelementhierarchie befindet, und erstellt eine Zeichenfolgenvariable namens lastValue. lastValue wird verwendet, um den sortierten Spaltenwert der aktuellen Zeile mit dem Wert der vorherigen Zeile zu vergleichen. Als Nächstes wird die GridView-Auflistung Rows aufgelistet, und für jede Zeile wird der Wert der sortierten Spalte in der currentValue Variablen gespeichert.

Anschließend currentValue werden die Variablen und lastValue verglichen. Wenn sie sich unterscheiden, müssen wir der Steuerelementhierarchie eine neue Trennlinie hinzufügen. Dies wird erreicht, indem der Index von in der Auflistung des GridViewRow Objekts bestimmt wird, neue GridViewRow - und TableCell -Instanzen erstellt und anschließend der TableCell Steuerelementhierarchie hinzugefügt wirdGridViewRow.RowsTable

Beachten Sie, dass die Einzelne TableCell Trennlinie so formatiert ist, dass sie sich über die gesamte Breite des GridView erstreckt, mit der SortHeaderRowStyle CSS-Klasse formatiert ist und ihre Text -Eigenschaft so aufweist, dass sowohl der Name der Sortiergruppe (z. B. Kategorie ) als auch der Wert der Gruppe (z. B. Beverages ) angezeigt wird. lastValue Schließlich wird auf den Wert von currentValueaktualisiert.

Die CSS-Klasse, die zum Formatieren der Headerzeile SortHeaderRowStyle der Sortiergruppe verwendet wird, muss in der Styles.css Datei angegeben werden. Sie können alle Stileinstellungen verwenden, die Ihnen gefallen. Ich habe Folgendes verwendet:

.SortHeaderRowStyle
{
    background-color: #c00;
    text-align: left;
    font-weight: bold;
    color: White;
}

Mit dem aktuellen Code fügt die Sortierschnittstelle Sortiergruppenheader hinzu, wenn nach boundField sortiert wird (siehe Abbildung 5, die einen Screenshot beim Sortieren nach Lieferanten zeigt). Beim Sortieren nach einem anderen Feldtyp (z. B. checkBoxField oder TemplateField) sind die Sortiergruppenheader jedoch nirgends zu finden (siehe Abbildung 6).

Abbildung 5: Die Sortierschnittstelle enthält Beim Sortieren nach BoundFields Die Sortiergruppenüberschriften (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Abbildung 6: Die Sortiergruppenheader fehlen beim Sortieren eines CheckBoxField (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Der Grund, warum die Sortiergruppenheader beim Sortieren nach einem CheckBoxField fehlen, ist, dass der Code derzeit nur die TableCell s-Eigenschaft Text verwendet, um den Wert der sortierten Spalte für jede Zeile zu bestimmen. Für CheckBoxFields ist die TableCell s-Eigenschaft Text eine leere Zeichenfolge. Stattdessen ist der Wert über ein CheckBox-Websteuerelement verfügbar, das sich in der TableCell s-Auflistung Controls befindet.

Um andere Feldtypen als BoundFields zu behandeln, müssen wir den Code erweitern, dem die currentValue Variable zugewiesen ist, um zu überprüfen, ob ein CheckBox-Objekt in der TableCell s-Auflistung Controls vorhanden ist. Anstatt zu verwenden currentValue = gvr.Cells[sortColumnIndex].Text, ersetzen Sie diesen Code durch Folgendes:

string currentValue = string.Empty;
if (gvr.Cells[sortColumnIndex].Controls.Count > 0)
{
    if (gvr.Cells[sortColumnIndex].Controls[0] is CheckBox)
    {
        if (((CheckBox)gvr.Cells[sortColumnIndex].Controls[0]).Checked)
            currentValue = "Yes";
        else
            currentValue = "No";
    }
    // ... Add other checks here if using columns with other
    //      Web controls in them (Calendars, DropDownLists, etc.) ...
}
else
    currentValue = gvr.Cells[sortColumnIndex].Text;

Dieser Code untersucht die sortierte Spalte TableCell für die aktuelle Zeile, um zu ermitteln, ob in der Controls Auflistung Steuerelemente vorhanden sind. Wenn vorhanden ist und das erste Steuerelement ein CheckBox-Steuerelement ist, wird die currentValue Variable abhängig von der CheckBox-Eigenschaft Checked auf Ja oder Nein festgelegt. Andernfalls wird der Wert von der TableCell s-Eigenschaft Text übernommen. Diese Logik kann repliziert werden, um die Sortierung für alle TemplateFields zu verarbeiten, die möglicherweise in GridView vorhanden sind.

Mit der obigen Codezufügung sind die Sortiergruppenheader jetzt bei der Sortierung nach dem ausgelaufenen CheckBoxField vorhanden (siehe Abbildung 7).

Abbildung 7: Die Sortiergruppenheader sind jetzt vorhanden, wenn ein CheckBoxField sortiert wird (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Zusammenfassung

GridView enthält nicht viele integrierte Optionen zum Anpassen der Sortierschnittstelle. Mit ein wenig Code auf niedriger Ebene ist es jedoch möglich, die Steuerungshierarchie von GridView zu optimieren, um eine benutzerdefiniertere Schnittstelle zu erstellen. In diesem Tutorial haben wir erfahren, wie Sie eine Trennlinie für Sortiergruppen für ein sortierbares GridView-Objekt hinzufügen, das die unterschiedlichen Gruppen und die Begrenzungen dieser Gruppen einfacher identifiziert. Weitere Beispiele für angepasste Sortierschnittstellen finden Sie im Blogeintrag A Few ASP.NET 2.0 GridView Sorting Tips and Tricks von Scott Guthrie.

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.