ASP.NET Gridview sortieren und Bootstrap

Webforms macht mir Spaß und ist einfach zu lernen und schnell zu implementieren. Allerdings wird der HTML Code am Server gerendert und der Browser ist nur UI Interpreter. Eigentlich ohne Logik. Aber es gibt Fälle, da hinkt dieses Modell. Teilweise gewaltig. Sortieren ist so ein Beispiel.

Das ASP.NET Gridview erlaubt das sortieren nach Spalten durch Click auf den Header einer Tabelle. Allerdings wird dann die gesamte Page neu gerendert und von Server geladen. Single Page Applications mit Frameworks wie Angular.js oder Knockout haben dieses Problem nicht.

Allerdings lässt sich auch mit ASP.NET Web Server Controls einiges am Client mit JavaScript manipulieren. In diesem Falle eben client seitiges Sortieren einer HTML Tabelle, die per Gridview erzeugt wird.

Mehr oder weniger willkürlich fiel die Wahl auf Boostrap-sortable. Dies gibt es auch per Nuget. Erstes relevantes Manko des HTML Codes, ist das fehlende THEAD Element. Lässt sich aber im Gridview relativ einfach z.B. im Page Load per VB.NET Code erzeugen.

   1:   GridView1.UseAccessibleHeader = True
   2:   If GridView1.Rows.Count > 0 Then
   3:        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader
   4:   End If

Leider gibt es keine Möglichkeit dies per Deklaration in der ASPX Seite im Girdview Control zu lösen. Mad Christensen von Microsoft bezeichnet dies schon 2006 als Fehler.

Allerdings muss die CSS Klasse auch das Attribut sortable besitzen. Um nicht mit dem integrierten Sortiermechanismus zu kollidieren, am besten Allowsorting abschalten.

   1:    <asp:GridView EnableViewState="False" ItemType="ADRESSEN"
   2:              AllowSorting="false"
   3:              CssClass="table table-striped  table-borderd table-condensed sortable" 
   4:              Gridlines="None"
   5:              ID="GridView1" runat="server" SelectMethod="GridView1_GetData"

Als nächstes benötigt man die CSS Datei bootstrap-sortable. Um den HTTP Verkehr zu minimieren, wird hier das Bundle Optimizer Paket verwendet.

   1:  <bundles version="1.0">
   2:    <styleBundle path="~/Content/css">
   3:      <include path="~/Content/bootstrap.css" />
   4:      <include path="~/Content/Site.css" />
   5:      <include path="~/Content/bootstrap-sortable.css" />
   6:    </styleBundle>
   7:  </bundles>

Natürlich gehts auch per

   1:   <link rel="stylesheet" type="text/css" href="Contents/bootstrap-sortable.css">

Gleiche gilt für die beiden JavaScript Bibliotheken, moment.js die in bootstrap-sortable verwendet wird.

   1:  <script src="/Scripts/moment.js"></script>
   2:  <script src="/Scripts/bootstrap-sortable.js"></script>

Durch einen kleinen Pfeil, dessen Aussehen man im CSS auch ändern kann, wird dann die sortierreihenfolge angezeigt.

image

Kommentare sind geschlossen