Endless Paging mit ASP.NET Webforms Gridview

Datenmengen wachsen ungehindert, man möchte fast glauben exponentiell. Obwohl trotz Suche eingeschränkt, können sich noch immer beliebig viele Datensätze ergeben. Lösung scheint Paging zu sein. Das ASP.NET Gridview Control erlaubt dies sozusagen per Click mit den Attributen AllowPaging, PageSize und Pageindex. Auch das Modelbinding unterstüzt diese Funktion ohne Programmieraufwand.

Das altbewährte Paging mit vorwärts Rückwärts oder auch Seitennummern, erscheint mir dabei oftmals nicht passend. Eine neue Variante ist das Vorwärts Blättern, bei der die schon geladenen Daten erhalten bleiben. Gerne auch als Endlesspaging bezeichnet. Für Jquery Mobile habe ich dazu schon einen Blog Eintrag verfasst. Aufbauend darauf, die Idee, zwar die Page komplett zu laden, aber dann den HTML Code zu verwerfen um ihn an die bestehende Tabelle anhängen zu können. Einstiegspunkt ist die Northwind Datenbank.

   1:  <asp:GridViewID="GridView1"ItemType="endlesspaging.customers"

   2:  EnableViewState="false"

   3:  SelectMethod="GridView1_GetData"

   4:  runat="server"></asp:GridView>

Die Tabelle muss mit  THeader und TBODY Element gerendert werden, was im Pageload erzwungen wird.

Um den Status “aktuelle Seite” zu transportieren, verwende ich einen Querystring.

   1:  ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load

   2:          GridView1.UseAccessibleHeader = True

   3:          GridView1.HeaderRow.TableSection = TableRowSection.TableHeader

   4:  EndSub

   5:   

   6:  PublicFunction GridView1_GetData(<QueryString("p")> page AsInteger?) As
 IQueryable(Of endlesspaging.Customers)

   7:  If IsNothing(page) Then page = 0

   8:  Dim db = New NORTHWINDEntities

   9:  Dim query = (From c In db.Customers

  10:                     Order By c.CustomerID

  11:  Select c).Skip(page * 5).Take(5)

  12:  Return query

  13:  End Function

Am Ende der Liste, kann der Benutzer per Hyperlink noch mehr Daten laden. Technisch mit einem  XMLHTTPrequest. Der AJAX Funktionsaufruf verpackt in die Jquery Bibliothek. Der Trick ist, das aus dem Response der TBODY Teil der HTML Tabelle extrahiert wird. Nur die TR Elemente werden dann per append angehängt.

   1:  <a href="#" onclick="loadmeins()">mehr</a>

   2:  <script>

   3:       function loadmeins() {

   4:           $.ajax({

   5:               type: "GET",

   6:               url: "webform2/?p=" + page,

   7:               success: function (result) {

   8:                   var data = $(result).find("#GridView1 tbody");

   9:                   var rows = data.children();

  10:                   $('#GridView1 tbody').append(rows);

  11:                   page++;

  12:               }

  13:           });

  14:       }

  15:       var page = 0;

  16:  </script>

Für mobile Anwendungen würde ich diesen Weg nicht gehen, da Overhead im HTML über die Leitung geschickt wird. Die Daten sind in dem Falle gar nicht so groß, rund 2 KB pro Request (komprimiert). Auch der vielgescholtene Viewstate kommt bescheiden daher

   1:  <inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"value="RGVsKUC5aDojKAo+MAvO1sC4
+he8FAmy8rAr5pfNiWP0C0WWByaBH5lqwtu/2eCfHKBb00xpQPDFBa7LdMjCmNe

   2:  BcuhxAIYXLhMLGTwi7aqlqXI9q+FPoVfyPkNiEUnT"/>

   3:  </div>