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:GridView ID="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: Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
2: GridView1.UseAccessibleHeader = True
3: GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
4: End Sub
5:
6: Public Function GridView1_GetData(<QueryString("p")> page As Integer?) 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: <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="RGVsKUC5aDojKAo+MAvO1sC4
+he8FAmy8rAr5pfNiWP0C0WWByaBH5lqwtu/2eCfHKBb00xpQPDFBa7LdMjCmNe
2: BcuhxAIYXLhMLGTwi7aqlqXI9q+FPoVfyPkNiEUnT" />
3: </div>