Ajax Aspekte: Anzeigen von sehr großen Tabellen mit AJAX

Es gibt viele Implementierungen für das ASP.NET Framework mit denen tabellarische Daten dargestellt werden können. Die meisten davon senden den Inhalt der Tabelle zusammen mit dem mit den anderen Anteilen der Seite an den Browser.

Wenn es dazu kommt Massendaten anzuzeigen bieten die meisten Implementierungen einen Mechanismus zur seitenweisen Navigation durch kleinere Anteile von Datensätzen indem die ganze Seite immer wieder gesendet wird.

Hier wird ein anderer Ansatz vorgestellt, der es ermöglicht seitenweises Blättern oder nahtloses Scrollen ermöglicht, ohne dass die ganze Seite erneut geladen werden muss indem AJAX Aufrufe an einen WebServer zum Holen der Daten verwendet wird.

Wenn Sie die Information dieses Blogs oder der Dokumentation auf der Beispiel - WebSeite verfolgen können sie den AJAX Anteil im Beispiel identifizieren. Der meiste Teil des JavaScript auf dem Client wurde benötigt um die Anwender-Ereignisse zu behandeln und das HTML DOM aufzubauen.

In der Tat findet man hier ein 3-stufiges Vorgehen:

1. Wenn die Seite lädt, wird eine leere Tabelle an den Client gesendet, die als Vorlage für die Tabelle verwendet wird. Es wird keine Integration mit den Daten benötigt um diese Phase des Ladens anzuschließen.
2. Wenn eine Suche gestartet wird, indem die Suchparameter an einen WebService übergeben werden, ermittelt die Select Methode des WebServices eine Liste aller anzuzeigenden Datensätze und liefert eine Liste von eindeutigen IDs auf den Client zurück.
3. Jede Zeile, die darzustellen ist wird vom Server angefordert, indem ein die Fetch Methode des WebServices aufgerufen wird. Diese liefert ein XML Dokument mit dem Datensatz der Zeile zurück.

Der Umfang der Daten, die bis zur Darstellung der ersten Seite übertragen werden müssen ist etwas größer als bei den klassischen Realisierungen aber wenn man auf die nächste Seiten geht oder mit dem Scrollbalken nach untern scrollt, dann werden nur die neuen Datensätze vom Server geholt - deutlich weniger als ein erneutes Laden der ganzen Seite. Es wird noch besser, wenn man wieder zurück scrollt, denn bereits geladene Zeilen werden angezeigt ohne den Server überhaupt zu fragen.

Auch wenn man eine andere Suche mit einem anderen Suchkriterium ausführt werden die Zeilen, die bereits bekannt sind angezeigt ohne den Server zu fragen. Man kann sich leicht vorstellen, dass man mit diesem Verfahren sehr große Tabellen an den Client schicken kann ohne dass die umfangreichen Daten tatsächlich übertragen werden müssen.

Probieren Sie es aus auf der Beispiel Web Seite aus: http://www.mathertel.de/AjaxEngine/S03_AJAXControls/TableData.aspx

Zuerst selektieren Sie einige Daten mit der Hilfe einer der 3 Select Schaltflächen. Dann können Sie entweder seitenweise durch die Daten blättern oder (mein Favorit) Sie drücken die Schaltfläche [all] und scrollen durch die Tabelle. Jetzt können Sie das nachträgliche Laden der Datensätze beobachten.

Die Implementierung besteht aus einem WebService, 2 AJAX Controls und der AJAX Engine für die asynchrone Kommunikation und das Caching.

DataTablePager Control

Das DataTablePager Control implementiert den clientseitigen Controller des MVP Patterns und ist ein AJAX Controls das die AJAX Action implementiert mit der die Daten vom Server geholt werden.

Es sind einige Methoden verfügbar, mit denen bestimmte Ansichten geladen oder auch die Daten der Tabelle gelöscht werden können. Zusätzliche Schaltflächen können diese Methoden zum Suchen von Daten nutzen indem Filter und Sortierungskriterien mitgegeben werden.

Die Events, die durch das Scrollen der Tabelle entstehen können ebenfalls Methoden aufrufen um die notwendigen Daten vom Server zu holen.

DataTable Control

Das DataTable Control implementiert den clientseitigen View des MVC Patterns und ist dafür zuständig eine Tabelle dynamisch aufzubauen in der die Datensätze vom Server in der durch die Musterzeile vorgegeben Formatierung angezeigt werden.

Wenn die Seite geladen wird, wird das Muster gesichert und wenn neue Datensätze anzuzeigen sind wird dieses Muster für jede Zeile kopiert.

Aktuell ist nur eine sehr einfache Muster Funktionalität implementiert das Daten nur einfach als Text anzeigen kann. Das Muster wird auf dem Server aufgebaut indem das cols Attribut des Controls ausgewertet wird.

Jedes mal wenn eine neue Zeile sichtbar wird, wird die FetchRow Methode des DataTablePager Controls aufgerufen, damit die Daten vom Server geholt werden. Dieses ruft bei Verfügbarkeit von Daten die FillRow Methode des DataTable Controls auf um die Daten in die Zeile der Tabelle zu füllen.

Der TableData WebService

Der WebService der vom DataTablePager Control verwendet wird ist die serverseitige implementierung des model des MVP Patterns. Dieser WebService muss die Methoden implementieren die durch das Interface ITableData spezifiziert sind.

Um alle 3 Elemente zusammenzubinden sind nur einige Zeilen an Source Code in der HTML-Seite selbst notwendig, die nur die Controls und den Proxy zum WebService beinhaltet Nur einige spezifische Attribute sind zu setzen. - Schauen Sie mal rein.

Ich sehe noch Möglichkeiten der Optimierung indem die Daten der neu sichtbaren Zeilen gemeinsam vom Server geholt werden und dadurch die Anzahl der Aufrufe zum Server reduziert werden. - Stay connected.

posted by MatHertel @ 11/11/2005,