(0) exportieren Drucken
Alle erweitern
Erweitern Minimieren

Erstellen eines navigierbaren und sortierbaren "DataGrid"-Steuerelements

Veröffentlicht: 08. Okt 2003 | Aktualisiert: 27. Jun 2004
Von Scott Mitchell

In diesem Artikel lernen Sie, wie Sie zunächst jeweils ein sortierbares und navigierbares DataGrid-Steuerelement erstellen. Anschließend werden die erforderlichen Schritte erläutert, um diese beiden Techniken für die Erstellung eines einzelnen sortierbaren und navigierbaren DataGrid-Steuerelements zu kombinieren. Das DataGrid-Websteuerelement ermöglicht ASP.NET-Entwicklern die schnelle und einfache Darstellung von Daten. Daneben kann das DataGrid-Steuerelement auch für die Sortierung, Navigation und Bearbeitung der Daten genutzt werden. Während Unterstützung für Sortierung und Navigation relativ einfach hinzugefügt werden kann, gestaltet sich die Erstellung eines DataGrid-Steuerelements, das sowohl navigierbar als auch sortierbar ist, etwas komplexer.

Dieser Artikel enthält auch Links zu englischsprachigen Seiten.

Auf dieser Seite

Einführung Einführung
Erstellen eines sortierbaren "DataGrid"-Steuerelements Erstellen eines sortierbaren "DataGrid"-Steuerelements
Erstellen eines navigierbaren "DataGrid"-Steuerelement Erstellen eines navigierbaren "DataGrid"-Steuerelement
Erstellen eines navigierbaren und sortierbaren "DataGrid"-Steuerelements Erstellen eines navigierbaren und sortierbaren "DataGrid"-Steuerelements
Schlussfolgerung Schlussfolgerung

Einführung

Mit Microsoft® ASP.NET lassen sich Daten auf einer Webseite einfach darstellen. ASP.NET enthält drei Websteuerelemente für Daten, DataGrid, DataList und Repeater, die alle den Zweck haben, die Darstellung von Daten zu verbessern. Am häufigsten von diesen drei datenspezifischen Websteuerelementen wird DataGrid verwendet, größtenteils wegen der bereits integrierten praktischen Funktionen. Insbesondere lässt sich durch die Festlegung von nur ein paar Eigenschaften und die Erstellung einiger Ereignishandler mit dem DataGrid-Steuerelement Unterstützung für Sortierung, Navigation und Bearbeitung implementieren. Weitere Informationen zu den Unterschieden zwischen den drei datenspezifischen Websteuerelementen und zu den verschiedenen Einsatzgebieten der einzelnen Steuerelemente finden Sie im Artikel Deciding When to Use the DataGrid, DataList or Repeater.

Während die separate Erstellung eines sortierbaren oder navigierbaren DataGrid-Steuerelements relativ einfach ist, gestaltet sich der Bau eines DataGrid-Steuerelements, das sowohl navigierbar als auch sortierbar ist, etwas komplexer. In diesem Artikel wird zunächst die Erstellung eines sortierbaren und eines navigierbaren Steuerelements untersucht, gefolgt von den erforderlichen Schritten, um diese beiden Funktionen in ein DataGrid-Steuerelement zu kombinieren. Die ersten beiden Abschnitte beschreiben, wie das DataGrid-Websteuerelement um Funktionen zum Sortieren und Navigieren erweitert wird. Wenn Sie auf diesem Gebiet bereits über Kenntnisse verfügen, können Sie ruhig mit dem letzten Abschnitt fortfahren, in dem diese beiden Funktionen zu einem einzelnen DataGrid-Steuerelement kombiniert werden.

Erstellen eines sortierbaren "DataGrid"-Steuerelements

Bevor wir mit der Erstellung eines sortierbaren DataGrid-Steuerelements beginnen, wird zunächst ein DataGrid-Steuerelement benötigt, das Daten anzeigt. Für die Zwecke dieses Artikels erstellen wir ein einfaches DataGrid-Steuerelement, das den Inhalt der Products-Tabelle in der Datenbank Northwind anzeigt.

Anmerkung Bei der Datenbank Northwind handelt es sich um eine Standarddatenbank, die im Lieferumfang von Microsoft-Datenbankprodukten wie Microsoft SQL Server(TM) und Microsoft Access enthalten ist.

Erstellen Sie im Anschluss eine neue ASP.NET-Webseite mit der Bezeichnung SortableDataGrid.aspx, und fügen Sie ein DataGrid-Steuerelement hinzu, für dessen ID-Eigenschaft der Wert dgProducts festgelegt ist. Legen Sie als Nächstes für die AutoGenerateColumns-Eigenschaft den Wert FALSE fest und konfigurieren Sie das DataGrid-Steuerelement so, dass es die drei BoundColumns für die Anzeige der Felder ProductName, UnitPrice und UnitsInStock verwendet. Anschließend müssen nur noch die Datenbank abgefragt und die Ergebnisse an das DataGrid-Steuerelement gebunden werden. Der folgende Code zeigt den Page Load-Ereignishandler und eine benutzerdefinierte Methode, BindData(), die der CodeBehind-Klasse hinzugefügt werden sollten, um die gewünschte Funktionalität zu erreichen.

private void Page_Load(object sender, System.EventArgs e) 
{ 
   BindData(); 
} 
private void BindData() 
{ 
   // Connect to the Database 
   SqlConnection myConnection = new SqlConnection(connection string); 
   // Retrieve the SQL query results and bind it to the Repeater 
   string SQL_QUERY = "SELECT ProductName, UnitPrice, UnitsInStock " + 
 "FROM Products"; 
   SqlCommand myCommand = new SqlCommand(SQL_QUERY, myConnection); 
   myConnection.Open(); 
   dgProducts.DataSource = myCommand.ExecuteReader(); 
   dgProducts.DataBind(); 
   myConnection.Close(); 
}

Damit dieser Code funktioniert, müssen Sie den System.Data.SqlClient-Namespace in Ihre CodeBehind-Klasse importieren. Sie müssen auch den Platzhalter connection string im SqlConnection-Konstruktor an die Verbindungszeichenfolge für Ihre Datenbank anpassen. Erstellen Sie nach Eingabe dieses Codes das Projekt, und testen Sie anschließend die Webseite, indem Sie diese über Ihren Webbrowser aufrufen. Abbildung 1 zeigt einen Screenshot der Seite SortableDataGrid.aspx (natürlich könnte die Darstellung des DataGrid-Steuerelements mit der automatischen Formatierungsfunktion in Microsoft Visual Studio® .NET problemlos ästhetisch ansprechender gestaltet werden).

Erstellen_eines_navigierbaren_und_sortierbaren_01.gif

Abbildung 1. "SortableDataGrid.aspx" in einer Browseranzeige

Um das DataGrid-Steuerelement in SortableDataGrid.aspx sortierbar zu machen, setzen Sie zunächst die AllowSorting-Eigenschaft des DataGrid-Steuerelements auf den Wert TRUE. Wenn für diese Eigenschaft der Wert TRUE festgelegt ist, gibt das DataGrid-Steuerelement den Header jeder Spalte als LinkButton wieder, was den Effekt hat, dass jeder Spaltenheader als Hyperlink dargestellt wird. Endbenutzer können festlegen, nach welcher Spalte die DataGrid-Ergebnisse sortiert werden sollen, indem sie einfach auf den Hyperlink des entsprechenden Spaltenheaders klicken.

Nach dem Klicken auf den Hyperlink eines Spaltenheaders wird die ASP.NET-Webseite zurückgesendet und das SortCommand-Ereignis des DataGrid-Steuerelements ausgelöst. Der Entwickler der ASP.NET-Webseite ist dafür verantwortlich, einen Ereignishandler für das SortCommand-Ereignis des DataGrid-Steuerelements zu erstellen und das SortCommand-Ereignis des DataGrid-Steuerelements mit diesem erstellten Ereignishandler zu verbinden. Es ist weiterhin die Aufgabe dieses Ereignishandlers, die Spalte zu ermitteln, nach der Endbenutzer die Daten sortieren möchten, und anschließend die zugrunde liegenden Daten neu zu sortieren und an das DataGrid-Steuerelement neu zu binden.

Vor der Erstellung des Codes für den SortCommand-Ereignishandler muss der Ereignishandler zunächst hinzugefügt werden. Die Verwendung eines Tools wie Visual Studio .NET macht diesen Schritt äußerst einfach. Klicken Sie einfach im Designer auf das DataGrid-Steuerelement dgProducts, um seine Eigenschaften zu bearbeiten. Klicken Sie anschließend am oberen Rand des Eigenschaftenfensters auf die Schaltfläche mit dem Blitzsymbol, um die Ereignisse des DataGrid-Steuerelements anzuzeigen. Gehen Sie zum SortCommand-Ereignis, und geben Sie den Namen des Ereignishandlers ein, den Sie mit diesem Ereignis verknüpfen möchten, Visual Studio .NET erledigt den Rest! Abbildung 2 zeigt die Liste der Ereignisse im Eigenschaftenfenster.

Erstellen_eines_navigierbaren_und_sortierbaren_02.gif

Abbildung 2. Erstellen eines Ereignishandlers für das "SortCommand"-Ereignis des "DataGrid"-Steuerelements

Wie aus Abbildung 2 ersichtlich, wurde dieses Ereignis dgProducts_Sort benannt, obwohl jeder gültige Funktionsname ebenfalls zulässig wäre. Sobald Sie den Namen eines Ereignishandlers in das entsprechende Ereignistextfeld eingegeben haben, erstellt Visual Studio .NET automatisch die Funktionsshell des Ereignishandlers in der CodeBehind-Klasse und verbindet dieses Ereignis mit dem Ereignishandler.

Wenn Sie Visual Studio .NET nicht verwenden, müssen Sie diese beiden Schritte manuell durchführen. Beginnen Sie mit der Erstellung der Shell des Ereignishandlers, die im Anschluss gezeigt wird:

private void dgProducts _Sort(object source, 
   DataGridSortCommandEventArgs e) 
{ 
  // we'll add the code here in a bit! 
}

Als Nächstes wird das SortCommand-Ereignis des DataGrid-Steuerelements an den Ereignishandler gebunden. Hierbei können Sie auf zwei verschiedene Arten vorgehen:

  • Durch Hinzufügen von OnSortCommand="dgProducts_Sort" in der Deklaration des DataGrid-Steuerelements (d.h. durch Hinzufügen dieser Information im <asp:DataGrid>-Starttag im HTML-Teil).

  • Durch programmtechnisches Zuweisen des Ereignisses des DataGrid-Steuerelement zum Ereignishandler in der InitializeComponent()-Methode in der CodeBehind-Klasse. In C# kann dafür die folgende Syntax verwendet werden:

    dgProducts.SortCommand +=  
     new DataGridSortCommandEventHandler(dgProducts_Sort);
    


Bei Microsoft Visual Basic® .NET sieht die Syntax wie folgt aus:

AddHandler dgProducts.SortCommand, AddressOf dgProducts_Sort

Sobald der Ereignishandler erstellt und mit dem SortCommand-Ereignis des DataGrid-Steuerelements verbunden wurde, kann der Code für den Ereignishandler hinzugefügt werden. Im Wesentlichen muss die Spalte ermittelt werden, nach der Endbenutzer die Ergebnisse sortieren möchten, und die Datenbank erneut abfragt werden, um die Ergebnisse in der gewünschten Reihenfolge abzurufen. Um zu ermitteln, auf welche Spalte Endbenutzer geklickt haben, die die Rückübertragung verursacht hat, kann die SortExpression-Eigenschaft des DataGridSortCommandEventArgs-Parameters untersucht werden, der an den dgProducts_Sort-Ereignishandler übergeben wurde.

Beachten Sie, dass mit jeder DataGrid-Spalte ein SortExpression-Wert verknüpft ist. Wenn für die AutoGenerateColumns-Eigenschaft des DataGrid-Steuerelements der Wert TRUE festgelegt ist, wird jeder Spalte automatisch ein SortExpression-Wert zugeordnet, der dem Namen des DataSource-Felds entspricht, das die Spalte anzeigt. Wenn für AutoGenerateColumns der Wert FALSE festgelegt ist, muss der Wert der SortExpression-Eigenschaft explizit angegeben werden. Falls für eine bestimmte Spalte die SortExpression-Eigenschaft nicht festgelegt ist, wird der Spaltenheader nicht als Hyperlink angezeigt, und Endbenutzer können somit das DataGrid-Steuerelement nicht nach dieser speziellen Spalte sortieren. Um dies zu demonstrieren, legen Sie nur die SortExpression-Eigenschaften für die ersten beiden BoundColumns fest. Wenn Sie auch für die SortExpression-Eigenschaft einen beliebigen Wert festlegen können, legen Sie für die SortExpression-Eigenschaft der ersten beiden BoundColumns denselben Wert wie für die DataField-Eigenschaft fest. Danach sollte Ihre DataGrid-Deklaration wie folgt aussehen:

<asp:DataGrid id="dgProducts" runat="server" AllowSorting="True" 
   AutoGenerateColumns="False" ...> 
   <Columns> 
   <asp:BoundColumn DataField="ProductName"  
 HeaderText="Product Name"   
 SortExpression="ProductName"></asp:BoundColumn> 
   <asp:BoundColumn DataField="UnitPrice" HeaderText="Unit Price"  
 DataFormatString="{0:c}"  
 SortExpression="UnitPrice"></asp:BoundColumn> 
   <asp:BoundColumn DataField="UnitsInStock"  
 HeaderText="Units In Stock" DataFormatString="{0:d}"> 
   </asp:BoundColumn> 
   </Columns> 
</asp:DataGrid>

Nun müssen im dgProducts_Sort-Ereignishandler der Wert der SortExpression-Eigenschaft ermittelt und anschließend die Daten an das DataGrid-Steuerelement in der korrekt sortierten Reihenfolge gebunden werden. Es gibt dafür eine Vielzahl von Möglichkeiten, wobei die einfachste darin besteht, die gesamten Daten sortiert nach dem Feld erneut abzufragen, das von der SortExpression-Eigenschaft festgelegt wurde. Dies ist nicht unbedingt die effizienteste Methode, aber sie ist für die Products-Tabelle, die nur 77 Datensätze enthält, ausreichend. Diese erneute Abfrage kann erreicht werden, indem die BindData()-Methode so geändert wird, dass sie einen Zeichenfolgenparameter akzeptiert, nämlich den Namen der Spalte, nach der die Ergebnisse sortiert werden sollen. Im Anschluss wird eine aktualisierte Version von BindData() gezeigt:

private void BindData(string orderBy) 
{ 
   // Connect to the Database 
   SqlConnection myConnection = new SqlConnection(connection string); 
   // Retrieve the SQL query results and bind it to the DataGrid 
   string SQL_QUERY = "SELECT ProductName, UnitPrice, UnitsInStock " + 
 "FROM Products ORDER BY " + orderBy; 
   SqlCommand myCommand = new SqlCommand(SQL_QUERY, myConnection); 
   myConnection.Open(); 
   dgProducts.DataSource = myCommand.ExecuteReader(); 
   dgProducts.DataBind(); 
   myConnection.Close(); 
}

Mit dieser neuen Version von BindData() benötigt unser dgProducts_Sort-Ereignishandler nur eine Codezeile, die im Anschluss gezeigt wird:

private void dgProducts_Sort(object source, 
 System.Web.UI.WebControls.DataGridSortCommandEventArgs e) 
{ 
   BindData(e.SortExpression); 
}

Nun muss nur noch der Page Load-Ereignishandler aktualisiert werden. Erstens soll die BindData()-Methode nur aufgerufen werden, wenn die Seite nicht zurückgesendet wird, da bei nachfolgenden Rückübertragungen der dgProducts_Sort event-Ereignishandler den BindData()-Aufruf durchführt. Zweitens verwendet der Page Load-Ereignishandler die alte Version der BindData()-Methode, die keine Eingabeparameter akzeptiert. Deshalb ist eine Aktualisierung erforderlich, damit der Feldname übergeben wird, nach dem das DataGrid-Steuerelement anfangs sortiert werden soll.

private void Page_Load(object sender, System.EventArgs e) 
{ 
   if (!Page.IsPostBack) 
   BindData("ProductName"); 
}

Nachdem alle diese Änderungen durchgeführt wurden, können Sie das Projekt erstellen und testen. Abbildung 3 zeigt Seite SortableDataGrid.aspx nach ihrem ersten Aufruf, und Abbildung 4 zeigt die Webseite, nachdem auf den Hyperlink des Spaltenheaders Unit Price geklickt wurde. Beachten Sie, dass in beiden Abbildungen das DataGrid-Steuerelement nicht nach der Spalte Units In Stock sortiert werden kann, da keine SortExpression-Eigenschaft für diese BoundColumn angegeben wurde.

Erstellen_eines_navigierbaren_und_sortierbaren_03.gif

Abbildung 3. Das "DataGrid"-Steuerelement, sortiert nach der Spalte "Product Name"

Erstellen_eines_navigierbaren_und_sortierbaren_04.gif

Abbildung 4. Das "DataGrid"-Steuerelement, sortiert nach der Spalte "Unit price"

Erstellen eines navigierbaren "DataGrid"-Steuerelement

s Wie beim sortierbaren DataGrid-Steuerelement ist der beste Ausgangspunkt für ein navigierbares Steuerelement die Erstellung eines DataGrid-Steuerelements, das einfach nur die Daten anzeigt. Da dies bereits im ersten Teil des vorangegangenen Abschnitts erreicht wurde, wird hier auf dieses Thema nicht weiter eingegangen. Nur soviel: Erstellen Sie eine ASP.NET-Webseite mit der Bezeichnung PageableDataGrid.aspx, und kopieren Sie sowohl die DataGrid-Deklaration in den HTML-Abschnitt als auch den Code aus den Methoden Page_Load und BindData() in die CodeBehind-Klasse aus der SortableDataGrid.aspx-Webseite bis zu dem Punkt, ab dem das Hinzufügen der Sortierfunktionen erläutert wurde.

Während Sie den Page Load-Ereignishandler wie vorliegend hineinkopieren können, müssen Sie eine kleine Änderung an der BindData()-Methode durchführen. Konkret: Anstatt ein SqlDataReader-Objekt an das DataGrid-Steuerelement zu binden, müssen Sie entweder ein DataTable- oder DataSet-Objekt verwenden. Der Grund dafür wird weiter unten erläutert.

Vor dem Hinzufügen der Navigationsunterstützung zu einem DataGrid-Steuerelement muss beachtet werden, dass das DataGrid-Steuerelement über zwei Formen von Navigationsunterstützung verfügt.

  • Standardnavigation

  • Benutzerdefinierte Navigation

Beide Navigationsmodelle besitzen Vor- und Nachteile: Die Standardnavigation ist einfacher zu implementieren, während die benutzerdefinierte Navigation gewisse Leistungsvorteile besitzt. Der Grund für diese Kompromisssituation basiert auf der Tatsache, dass bei der Standardnavigation immer die gesamte DataSource, in der navigiert werden soll, jedes Mal an das DataGrid-Steuerelement gebunden wird, wenn Benutzer von einer Seite zur anderen navigieren. Bei der Standardnavigation muss das DataGrid-Steuerelement selbst ermitteln, wie viele Datensätze und genau welche Datensätze in der DataSource angezeigt werden. Die benutzerdefinierte Navigation andererseits setzt voraus, dass exakt nur diejenigen Datensätze, die auf der aktuellen Seite mit Daten angezeigt werden sollen, in der DataSource vorhanden sind, die an das DataGrid-Steuerelement gebunden ist.

Die Standardnavigation ist deshalb einfacher zu implementieren, da keine besonderen Schritte unternommen werden müssen, wenn Benutzer von einer Seite mit Daten zur nächsten navigieren. Dies bedeutet, Sie binden nur die Ergebnisse einer SQL-Abfrage an das DataGrid-Steuerelement und überlassen diesem die Anzeige der Datensätze. Bei der benutzerdefinierten Navigation müssen Sie entweder schwierige SQL-Anweisungen oder komplizierte gespeicherte Prozeduren verwenden, um genau die Datensätze auszuwählen, die Sie für eine bestimmte Seite anzeigen möchten. Die benutzerdefinierte Navigation bietet eine verbessere Leistung gegenüber der Standardnavigation, da nur auf diejenigen Datensätze zugegriffen wird, die für eine bestimmte Seite mit Daten angezeigt werden müssen. Bei der Standardnavigation werden jedesmal alle Datensätze abgerufen, wenn ein Benutzer eine unterschiedliche Seite mit Daten abruft. Darüber hinaus setzt die Standardnavigation voraus, dass Sie entweder ein DataTable- oder DataSet-Objekt an das DataGrid-Steuerelement binden, d.h. Sie können keinDataReader-Objekt verwenden. Dies liegt daran, dass das DataGrid-Steuerelement die Anzahl der Datensätze in der DataSource kennen muss, um ermitteln zu können, wie viele Seiten mit Daten insgesamt existieren.

Dieser Artikel konzentriert sich auf die Standardnavigation, da diese einfacher zu implementieren ist. Durch diese strikte Konzentration auf die Standardnavigation gehen Ihnen jedoch keine Informationen verloren, da die Techniken zur Erstellung eines sortierbaren und navigierbaren DataGrid-Steuerelements, die im nächsten Abschnitt untersucht werden, gleichermaßen für die Standard- und die benutzerdefinierte Navigation funktionieren.

Um ein DataGrid-Steuerelement mit dem Standardnavigationsmodell navigierbar zu machen, muss zunächst für die AllowPaging-Eigenschaft des DataGrid-Steuerelements der Wert TRUE festgelegt werden. Wenn für diese Eigenschaft der Wert TRUE festgelegt ist, werden standardmäßig am unteren Rand des DataGrid-Steuerelements Navigationssteuerelemente angezeigt. Diese Navigationssteuerelemente ermöglichen Endbenutzern die Anzeige der einzelnen Seiten, die im DataGrid-Steuerelement angezeigt werden. Standardmäßig werden als Navigationssteuerelemente LinkButtons verwendet, um die vorangegangene und nächste Gruppe mit Hyperlinks darzustellen. Nachdem Benutzer auf einen dieser Hyperlinks klicken, wird die ASP.NET-Webseite zurückgesendet und das PageIndexChanged-Ereignis des DataGrid-Steuerelements ausgelöst. Unsere Aufgabe ist die Erstellung eines Ereignishandlers für dieses Ereignis, das die CurrentPageIndex-Eigenschaft der DataGrid-Steuerelements aktualisiert und die Daten erneut an das DataGrid-Steuerelement bindet.

Die CurrentPageIndex-Eigenschaft des DataGrid-Steuerelements gibt an, welche Seite mit Daten angezeigt werden soll. Neben dieser Eigenschaft gibt es eine Reihe anderer Eigenschaften, die für die Navigation relevant sind:

  • PageSize - Diese Eigenschaft gibt an, wie viele Datensätze pro Seite angezeigt werden sollen, wobei der Standardwert bei 10 liegt.

  • PageCount - Diese Eigenschaft gibt die Gesamtzahl der Seiten mit Daten an.


Auf diese Weise muss der PageIndexChanged-Ereignishandler lediglich für die CurrentPageIndex-Eigenschaft die vom Benutzer ausgewählte Seite festlegen und anschließend das DataGrid-Steuerelement (durch Aufruf von BindData()) erneut binden. Das war's schon. Der anzuzeigende Seitenindex lässt sich durch Referenzieren der NewPageIndex-Eigenschaft des DataGridPageChangedEventArgs-Objekts bestimmen, das an diesen Ereignishandler übergeben wird.

Sobald die DataBind()-Methode des DataGrid-Steuerelements in BindData() aufgerufen wird, ermittelt das DataGrid-Steuerelement anhand der CurrentPageIndex-Eigenschaft die anzuzeigende Seite mit Daten. Anschließend wird anhand der Anzahl der pro Seite anzuzeigenden Datensätze berechnet, welcher Datensatz als Erster auf der Seite angezeigt werden soll. Daraufhin navigiert das DataGrid-Steuerelement zu diesem Datensatz und zeigt diesen Datensatz und die nächsten PageSize-Datensätze an.

Nehmen Sie sich einen Augenblick Zeit, einen Ereignishandler mit der Bezeichnung dgProducts Page zum PageIndexChanged-Ereignis des DataGrid-Steuerelements mit den im vorherigen Abschnitt beschriebenen Methoden hinzuzufügen. Nachfolgend sehen Sie den Quellcode für diesen Ereignishandler:

private void dgProducts_Page(object source, 
 System.Web.UI.WebControls.DataGridPageChangedEventArgs e) 
{ 
   dgProducts.CurrentPageIndex = e.NewPageIndex; 
   BindData(); 
}

Wie bei der SortableDataGrid.aspx-Webseite soll wiederum der Page Load-Ereignishandler die Daten an das DataGrid-Steuerelement nur beim ersten Laden der Seite binden und nicht bei nachfolgenden Rückübertragungen. Der folgende Code zeigt den aktualisierten Page Load-Ereignishandler und die BindData()-Methode. Beachten Sie, dass die BindData()-Methode ein DataTable-Objekt an das DataGrid-Steuerelement anstatt eines SqlDataReader-Objekts bindet. Weiter oben wurde bereits erwähnt, dass bei der Standardnavigation kein DataReader verwendet werden kann. Stattdessen muss ein DataTable oder DataSet verwendet werden. Die Verwendung eines DataReader führt zu einer Ausnahme. Der Grund dafür, warum Sie keinen DataReader verwenden können, besteht darin, dass das DataGrid-Steuerelement ermitteln muss, wie viele Daten insgesamt in der DataSource vorhanden sind, damit wiederum die Gesamtzahl der Seiten festgestellt werden kann. Da der DataReader nur vorwärts gerichteten Zugriff unterstützt, kann das DataGrid-Steuerelement nicht ermitteln, wie viele Datensätze diese enthält. Aus diesem Grund muss bei der Standardnavigation dringend ein Objekt verwendet werden, dessen Anzahl von Datensätzen ermittelt werden kann, z.B. DataTable oder DataSet.

private void Page_Load(object sender, System.EventArgs e) 
{ 
   if (!Page.IsPostBack) 
   BindData(); 
} 
private void BindData() 
{ 
   // Connect to the Database 
   SqlConnection myConnection = new SqlConnection(connection string); 
   // Retrieve the SQL query results and bind it to the DataGrid 
   string SQL_QUERY = "SELECT ProductName, UnitPrice, UnitsInStock " + 
 "FROM Products"; 
   SqlCommand myCommand = new SqlCommand(SQL_QUERY, myConnection); 
   // Use a DataTable - required for default paging 
   SqlDataAdapter myAdapter = new SqlDataAdapter(myCommand); 
   DataTable myTable = new DataTable(); 
   myAdapter.Fill(myTable); 
   dgProducts.DataSource = myTable; 
   dgProducts.DataBind(); 
   myConnection.Close(); 
}

Abbildung 5 zeigt PageableDataGrid.aspx bei der ersten Anzeige mit den ersten zehn Datensätzen der Products-Tabelle. Abbildung 6 zeigt die zweite Seite mit Daten, die angezeigt wird, nachdem Benutzer auf den Hyperlink "> " in den Navigationssteuerelementen in Abbildung 5 klicken.

Erstellen_eines_navigierbaren_und_sortierbaren_05.gif

Abbildung 5. Die erste Seite mit Daten wird angezeigt.

Erstellen_eines_navigierbaren_und_sortierbaren_06.gif

Abbildung 6. Die zweite Seite mit Daten wird angezeigt.

Aus dieser Veranschaulichung wird nicht ersichtlich, wie die Navigationssteuerelemente des navigierbaren DataGrid-Steuerelements anzupassen sind. Es lassen sich jedoch problemlos Anpassungen vornehmen, z.B. für die Anzeige von alternativem Text für die Hyperlinks für Weiter und Zurück sowie für die Anzeige einer Liste mit Seitennummern anstelle der Links für Weiter und Zurück. Mit etwas zusätzlicher Codierung lassen sich sogar benutzerdefinierte Navigationssteuerelemente erstellen, die sowohl Links für Weiter und Zurückals auch eine Liste mit Seitennummern enthalten. Weitere Informationen zu diesen Themen finden Sie in den folgenden Artikeln:

Erstellen eines navigierbaren und sortierbaren "DataGrid"-Steuerelements

Bisher wurde die Erstellung von sortierbaren und navigierbaren DataGrid-Steuerelementen separat behandelt. Wenden wir uns nun der Verschmelzung beider Funktionen zu einem einzigen sortierbaren und navigierbaren DataGrid-Steuerelement zu. Die Schwierigkeit der Verknüpfung beider Funktionen in ein einziges DataGrid-Steuerelement basiert auf der Tatsache, dass jeder Ansatz eine unterschiedliche Form von BindData ()-Methode verwendet. Das sortierbare DataGrid-Steuerelement übergibt einen Zeichenfolgenparameter an BindData(), der angibt, nach welcher Spalte das DataGrid-Steuerelement sortiert werden soll. Das navigierbare DataGrid-Steuerelement andererseits tut dies nicht.

Ein erster Schritt zum Ausgleich dieses Unterschieds besteht in der Verwendung einer BindData()-Version, die den Zeichenfolgenparameter akzeptiert. Weiterhin wird veranlasst, dass der PageIndexChanged-Ereignishandler des DataGrid-Steuerelements immer einen bestimmten vordefinierten Zeichenfolgenwert übergibt. Da der PageIndexChanged-Ereignishandler BindData() aufrufen muss, wobei eine Zeichenfolge übergeben wird, könnte z.B. der folgende Code für diesen Ereignishandler verwendet werden:

private void dgProducts_Page(object source,  
 System.Web.UI.WebControls.DataGridPageChangedEventArgs e) 
{ 
   dgProducts.CurrentPageIndex = e.NewPageIndex; 
   BindData("ProductName"); 
}

Dieser Ansatz funktioniert jedoch nicht. Stellen Sie sich die folgende Abfolge von Ereignissen vor:

  1. Benutzer öffnen die Seite und erhalten die Anzeige der ersten Seite mit Daten, die nach dem ProductName-Feld sortiert sind.

  2. Benutzer klicken auf den Hyperlink des Spaltenheaders Unit Price, wodurch die erste Seite mit Daten, sortiert nach Unit Price, angezeigt wird.

  3. Benutzer klicken auf den Navigationshyperlink ">", wodurch die nächste Seite mit Daten angezeigt wird. Dies bewirkt, dass der PageIndexChanged-Ereignishandler bei der Rückübertragung ausgeführt wird, wodurch die Seiten abgerufen werden, die nach ProductName sortiert sind. Deshalb sehen Benutzer jetzt die zweite Seite mit Daten, die nach ProductName sortiert sind, anstatt die zweite Seite mit Daten, die nach UnitPrice sortiert sind.


Es muss eine Möglichkeit zur Beibehaltung des Feldes geben, nach dem sortiert werden soll, wenn BindData() über den PageIndexChanged-Ereignishandler aufgerufen wird. Es gibt verschiedene Möglichkeiten zur Speicherung des Status während Roundtrips auf dem Server bei ASP.NET. Da diese Information nur für die aktuelle Webseite gespeichert werden muss, und nicht für den aktuellen Benutzer, ist es am besten, die Spalte, nach der Benutzer sortieren möchten, im ViewState der Webseite zu speichern.

Eine ausführliche Beschreibung von ViewState übersteigt den Rahmen dieses Artikels bei weitem. Jedoch soll kurz auf seinen Nutzen für die Erstellung eines sortierbaren und navigierbaren DataGrid-Steuerelements eingegangen werden. Zunächst sollten Sie wissen, dass alle Steuerelemente auf einer ASP.NET-Webseite über einen ViewState verfügen, und dass beim Einfügen dieser Steuerelemente in ein Web Form (<form runat="server">) ihr ViewState in einem versteckten HTML-Formularfeld gespeichert wird. Objekte lassen sich programmtechnisch in den ViewState einfügen. Diese eingefügten Objekte werden dann zusammen mit dem Rest des ViewState-Inhalts gespeichert, was bedeutet, dass diese Werte bei Rückübertragungen beibehalten werden. Eine ausführlichere Beschreibung von ViewState finden Sie in Susan Warrens exzellentem Artikel Ein mundgerechtes Stück ASP.NET ViewState.

Die Syntax für das Einfügen und Abrufen von Elementen in den ViewState lautet wie folgt:

// C# 
object o = ViewState[key];   // retrieval 
ViewState[key] = o;   // assignment

' VB.NET 
Dim o as Object = ViewState(key)   ' retrieval 
ViewState(key) = o   'assignment

Bei key handelt es sich um einen Zeichenfolgenschlüssel, der den Namen des Objekts liefert, das im ViewState gespeichert wird.

Wenn Benutzer nun auf den Hyperlink eines Spaltenheaders des DataGrid-Steuerelements klicken, werden drei Aktionen ausgeführt:

  1. Zurücksetzen des CurrentPageIndex des DataGrid-Steuerelements auf 0.

  2. Speichern der SortExpression-Eigenschaft des DataGridSortCommandEventArgs-Parameters im ViewState mit dem Schlüsselwert SortExprValue.

  3. Aufrufen von BindData(), wobei der SortExpression-Wert übergeben wird.

Schritt 1 bewirkt, dass das DataGrid-Steuerelement die erste Seite mit Daten anzeigt, wenn Benutzer auf den Hyperlink des Spaltenheaders eines DataGrid-Steuerelements klicken. Dies ist aus folgendem Grund sinnvoll: Falls Benutzer z.B. Seite 3 der Ergebnisse, sortiert nach Product Name, anzeigen und anschließend die Ergebnisse sortiert nach Unit Price anzeigen möchten, sollten sie zur ersten Seite mit Ergebnissen gelangen, auf der die billigsten Artikel angezeigt werden. Falls CurrentPageIndex nicht im SortCommand-Ereignishandler auf 0 zurückgesetzt werden würde, würde bei einer Änderung der Sortierung nach dem Unit Price-Feld die dritte Seite mit Daten angezeigt werden, was wahrscheinlich etwas verwirrend wäre.

Dieser neue SortCommand-Ereignishandler wird im Anschluss gezeigt:

private void dgProducts_Sort(object source,  
 System.Web.UI.WebControls.DataGridSortCommandEventArgs e) 
{ 
   dgProducts.CurrentPageIndex = 0; 
   ViewState["SortExprValue"] = e.SortExpression; 
   BindData(e.SortExpression); 
}

Mit dieser ViewState-Variablen lässt sich der PageIndexChanged-Ereignishandler sehr einfach erstellen. Dabei wird einfach wie vorher für die PageIndexChanged-Eigenschaft der Wert der NewPageIndex-Eigenschaft von DataGridPageChangedEventArgs festgelegt und anschließend BindData() aufgerufen, wobei der Wert des ViewState-Objekts SortExprValue übergeben wird.

private void dgProducts_Page(object source,  
  System.Web.UI.WebControls.DataGridPageChangedEventArgs e) 
{ 
   dgProducts.CurrentPageIndex = e.NewPageIndex; 
   BindData(ViewState["SortExprValue"].ToString()); 
}

Ein letzter Schritt besteht in der Aktualisierung des Page_Load-Ereignishandlers, damit für das ViewState-Objekt SortExprValue die Spalte festgelegt wird, nach der das DataGrid-Steuerelement standardmäßig sortiert werden soll. Diese kleine Änderung ergibt den folgenden neuen Page_Load-Ereignishandler:

private void Page_Load(object sender, System.EventArgs e) 
{ 
   if (!Page.IsPostBack) 
   { 
   ViewState["SortExprValue"] = "ProductName"; 
   BindData(ViewState["SortExprValue"].ToString()); 
   } 
}

Und das ist schon alles. Im verbleibenden Teil des Artikels werden einige Screenshots gezeigt, die das sortierbare und navigierbare DataGrid-Steuerelement in Aktion demonstrieren. Beachten Sie, dass Sie den gesamten Quellcode für alle ASP.NET-Demos am Ende dieses Artikels downloaden können.

Abbildung 7 zeigt einen Screenshot des sortierbaren und navigierbaren DataGrid-Steuerelements bei der ersten Anzeige in einem Browser. Abbildung 8 zeigt einen Screenshot der zweiten Seite mit Daten, sortiert nach Product Name. Abbildung 9 zeigt die Ausgabe, unmittelbar nachdem die Ergebnisse nach Unit Price sortiert wurden, während Abbildung 10 einen Screenshot der zweiten Seite mit Daten, sortiert nach Unit Price, zeigt.

Erstellen_eines_navigierbaren_und_sortierbaren_07.gif

Abbildung 7. Das sortierbare und navigierbare "DataGrid"-Steuerelement bei seinem ersten Aufruf (sortiert nach "Product Name")

Erstellen_eines_navigierbaren_und_sortierbaren_08.gif

Abbildung 8. Die zweite Seite mit Daten, sortiert nach "Product Name"

Erstellen_eines_navigierbaren_und_sortierbaren_09.gif

Abbildung 9. Die erste Seite mit Daten, sortiert nach "Unit Price"

Erstellen_eines_navigierbaren_und_sortierbaren_10.gif

Abbildung 10. Die zweite Seite mit Daten, sortiert nach "Unit Price"

Schlussfolgerung

Die Erstellung eines nur navigierbaren oder nur sortierbaren DataGrid-Steuerelements ist relativ einfach. Die Kombination beider Aspekte in einem einzigen DataGrid-Steuerelement ist jedoch etwas komplizierter, da die Information, nach welcher Spalte das DataGrid-Steuerelement sortiert werden soll, beim Navigieren durch die Daten beibehalten werden muss. Wie in diesem Artikel ersichtlich wurde, lässt sich mithilfe des ViewState das DataSource-Feld beibehalten, nach dem das DataGrid-Steuerelement sortiert ist. Obwohl sich dieser Artikel auf die Standardnavigation konzentriert hat, sind die Verfahren auch auf die benutzerdefinierte Navigation anwendbar.

Falls Sie Fragen zu diesem Artikel, den beschriebenen Verfahren oder den untersuchten Codebeispielen haben, können Sie mich unter folgender E-Mail-Adresse erreichen: mitchell@4guysfromrolla.com.

Viel Spaß beim Programmieren!

Empfohlene Links


Microsoft führt eine Onlineumfrage durch, um Ihre Meinung zur MSDN-Website zu erfahren. Wenn Sie sich zur Teilnahme entscheiden, wird Ihnen die Onlineumfrage angezeigt, sobald Sie die MSDN-Website verlassen.

Möchten Sie an der Umfrage teilnehmen?
Anzeigen:
© 2014 Microsoft