Listview forward Paging für mobile

In mobilen Clients wird gerne eine Scrollbare Liste angezeigt, die der Benutzer mit einem Button am Boden erweitern kann. Bei jedem Click wird die Liste länger und länger. Als Beispiel die Suche nach Bahn oder Flug. Alle Flüge ab 08:00, dann werden 10  angezeigt. Mit click auf [weitere] kommen dann noch 10 hinzu usw.

Um das Layout zu erstellen, wird eine entkernte ASPX (kunden.aspx) Seite erstellt, die dann einfach die TR und TDs liefert passend zum Paging.

Dies ist damit die Layout Template Page für  die Liste.

   1:  <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="kunden.aspx.vb" 
Inherits="Webproject.kunden" %>
   2:  <asp:listview id="ListView1" runat="server"
   3:       selectmethod="loadData"
   4:       itemtype="WebApplication3Wien.Customers">
   5:        <ItemTemplate>
   6:            <tr>
   7:              <td><%#Item.CustomerID%></td>
   8:              <td><%#Item.CompanyName%></td>
   9:              <td><%#Item.Country%></td>
  10:              <td><%#Item.Address%></td>
  11:            </tr>
  12:        </ItemTemplate>
  13:  </asp:listview>

Für das Paging wird ein Querystring verwendet und dann per LINQ gefiltert und per ASP.NET Model binding (ab 4.5) gebunden.

   1:  Public Function loadData(<QueryString> ByVal p As String) As IQueryable(Of Customers)
   2:          Dim nw As New NorthwindEntities
   3:          Dim query = nw.Customers.OrderBy(Function(c) c.CustomerID).Skip(p * 5).Take(5)
   4:          Return query.AsQueryable
   5:  End Function

Nun wird die eigentliche ASPX Seite erstellt. In dieser wird dann der HTMLTable Kopf Bereich angelegt. Das ganze ist JQuery Mobile ready, so das man auch responsive mobile Web Pages erstellen kann um verschiedene Devices zu adressieren.

   1:  <form id="form1" runat="server" data-role="page">
   2:          <table id="GridView1" >
   3:              <thead>
   4:                  <tr>
   5:                      <th data-priority="4">Customer_ID</th>
   6:                      <th data-priority="1">Company_Name</th>
   7:                      <th data-priority="2">Country</th>
   8:                      <th data-priority="3">Adress</th>
   9:                  </tr>
  10:              </thead>
  11:              <tbody>
  12:              </tbody>
  13:          </table>
  14:          <a href="#" onclick="loadmeins()" data-role="button">mehr</a>

Per Ajax Callback wird die Template Page aufgerufen und der erhaltene TR String an die bestehende Tabelle angefügt

   1:     function loadmeins() {
   2:              $.ajax({
   3:                  type: "GET",
   4:                  url: "kunden.aspx?p=" + page,
   5:                  success: function (result) {
   6:                      $('#GridView1 tbody').append(result);
   7:                      page++;
   8:                  }
   9:              });
  10:          }
  11:          var page = 0;
  12:          loadmeins();

Der Benutzer kann nun mehr drücken, bis das LINQ Statement keine Daten mehr liefert (und darüber hinaus)

image

Im Vergleich zu meiner anderen Lösungwerden nun weniger als die Hälfte an Daten übertragen. Dazu kommt, man auch das ASP.NET Page Caching Feature verwenden kann.

Kommentare sind geschlossen