Frage an Web-Entwickler zur Erzeugung einer sortierbaren Tabelle

[GinoBambino]

Mein neues beruflichles Projekt basiert darauf, eine existierende ASP.NET-Anwendung zu erweitern. Da ich bisher keinerlei Erfahrungen mit Webentwicklung hatte, ist das mein erstes Projekt in dieser Richtung.

Nun besteht einer der Anforderungen darin, eine existerende Tabelle (nämlich eine Übersicht der Daten des jeweiligen Kunden) sortierbar zu machen. Was ich schlussendlich in der entsprechenden ASPX-Seite vorfand, ist ein äußerst interessantes Konstrukt:

Die Tabelle ist statisch im HTML-Code deklariert und macht zur Laufzeit einen Methodenaufruf, über den sie die einzelnen Zeilen generiert. Also praktisch wie folgt:

<table border="1">
<tr>
<th>Berlin</th>
<th>Hamburg</th>
<th>M&uuml;nchen</th>
</tr>
%GetZeilen()%
</table>

GetZeilen() wiederum erzeugt einzelne Table-Rows, konkateniert sie mit einer String-Builder-Instanz, und gibt sie dann zurück an den Aufrufer.

Auch wenn ich bisher Null Ahnung von Web-Entwicklung habe, so hat mich dieses Beispiel schwer geschockt. Als erfahrener Entwickler spüre ich einfach, dass das keine saubere Lösung sein kann.

Meine Frage ist nun: Ist das wirklich ein absolutes No-Go oder darf ein Web-Entwickler ruhig auf solche Konstrukte zugreifen?

Letztlich war es nämlich ein spezialisiertes Unternehmen, das die Seite für uns gebaut hat.

Ich war zunächst schon enttäuscht, als ich feststellen musste, dass kein bisschen MVC vorhanden war, sondern Bussiness-Logik einfach in die Code-Behind "geklatscht" wurde. Aber die Krücke zur Erzeugung der Tabelle ist die absolute Krönung

 

[liKe2k1]

Ist halt "Quick'n'Dirty" - Ich habe oft auch wenig Lust extra ein Table Modal zu erstellen, welches dann so unflexibel ist, dass ich effizienter und barrierefreier die Logic ins View rein schmeiße.

Andererseits ist in deinem Beispiel ist ja nur ein Placeholder welcher vermutlich von einer Template Engine geparst wird. Das ist wieder rum ein anderes paar Schuhe. Sobald die TableRows in einem Template sind, ist doch eigentlich der Sinn und Zweck eines MVC Prinzip wieder gedeckt. Die Datenverarbeitung machst du ja im Model.

 

[GinoBambino]

Was meinst du genau mit "Table Modal" und warum soll dieses ineffizient sein? Ich habe bei meinen ersten Experimenten ein Asp.NET-GridView benutzt und dieses über eine ObjectDataSource-Instanz an mein Model gebunden. Über BoundFields werden dann einzelne Properties gebunden.

Auf den ersten Blick sieht das für mich nach einer sehr flexiblen Lösung aus. Ich kann die Datenquelle relativ einfach auswechseln und habe viele Möglichkeiten, um die Tabelle zu stylen.

Eine Template-Engine verbirgt sich nicht hinter "GetZeilen()". Es werden in ein und derselben Methode zunächst die Daten beschafft und dann werden diese iteriert, um einzelne String-Ketten "hardcodet" zusammenzusetzen. Also praktisch wie folgt:

String s = "<tr>
<td>Model.Name</td>
<td>Model.ErstelltAm</td>
<td>Model.Firma</td>
</tr>"

Das hat doch nichts mit einer Template-Engine zu tun?

 

[Daaron]

Meine Frage ist nun: Ist das wirklich ein absolutes No-Go oder darf ein Web-Entwickler ruhig auf solche Konstrukte zugreifen?

Man sollte es vermeiden, aber im Endeffekt... frag dich immer, wie viel Schaden durch solche Lösungen entsteht. Wenn die Antwort "verbuchs unter Ulk" lautet, dann ist ein Quick&Dirty - Hack wirtschaftlich sinnvoll.
Es muss nicht immer alles hübsch sein, und erst recht nicht muss man sich strikt an dieses MVC-Monster halten. Im Zweifel verschlingt MVC nur Speicher und Rechenzeit. Wenn kein Mehrwert daraus entsteht: Scheiß drauf.

Außerdem:
Was du oben beschreibst sind tabellarische Daten, die gehören sich eh in ein <table>. Selbst wenn du jetzt monströs aufgeblasene MVC-Lösungen baust, am Ende kommt eben genau das Gleiche raus: eine Tabelle mit nem Kopf und vielen, vielen Zeilen/Zellen. Nur wer vollkommen auf Semantik scheißt baut so etwas in eine <div>-Suppe.

Und was die Sortierung angeht: Nach was sortieren? Innerhalb der Spalte? Zeilen-Reihenfolge? Was denn? Und stehen alle Spalten auf der ersten Seite, oder gibt es eine Pagination?
Wenn du innerhalb einer Spalte sortieren willst und keine Pagination läuft, dann lass die Sortierung client-seitig ablaufen, das ist n absoluter Nobrainer in den gängigen JS Frameworks.

 

[GinoBambino]

Ich habe da eine komplett andere Meinung zu solchen Konstrukten. Architektur-Muster mögen zwar mehr Aufwand machen, aber dieser Aufwand rentiert sich, sobald die ersten Anpassungen am Programm gemacht werden müssen. Ich kenne genug solcher Programme, die buchstäblich "auseinanderfliegen", sobald irgendwo eine Änderung gemacht werden muss. Und es gibt nur äußerst wenige Programme, die niemals in ihrem Leben angepasst werden.

Es geht bei der Implementierung von Architektur-Pattern nicht primär um Schönheit. Schönheit entsteht bei diesem Prozess oftmals als zusätzliches Nebenprodukt. Die wirklichen Vorteile sind eine starke Trennung von Abhängigkeiten, und damit gehen Wartbarkeit, Anpassbarkeit u. Testability einher.

Was die Tabelle angeht: Sie soll sortierbar hinsichtlich der Spalten sein. D.h. ich klicke auf einen Spalten-Header und die Tabelle wird entsprechend sortiert (aufsteigend). Ich klicke noch mal auf denselben Spalten-Header, und die Tabelle wird entsprechend absteigend sortiert. Und das für sämtliche Spalten. Paging-Funktionalität wird erst einmal nicht benötigt, aber wer weiß, was als nächstes kommt

Würde das mit Java-Script funktionieren? Ich habe noch nie mit Java Script gearbeitet, deshalb suche ich stets andere Lösungen.

 

[Daaron]

Würde das mit Java-Script funktionieren? Ich habe noch nie mit Java Script gearbeitet, deshalb suche ich stets andere Lösungen.

Das was du beschreibst ist pure Frontend-Logik, und da gewinnt JS eben jedes Rennen. Schließlich sparst du dir hier HTTP-Requests, zusätzliche DB-Queries,...
Sowohl Mootools als auch jQuery bieten einfache Plugins für sortierbare Tabellen.

 

[GinoBambino]

Um ehrlich zu sein, war das auch erst mein Gedanke. Ich war etwas verwundert, dass ich bei Verwendung des GridViews einen Teil der Sortierlogik serverseitig definieren musste.

Wie würde das denn grundsätzlich mit Java Script funktionieren? Würde ich irgendein Java Script-Statement auf die Table anwenden? Ist das für einen Noob locker zu schaffen?

 

[Daaron]

Um ehrlich zu sein, war das auch erst mein Gedanke. Ich war etwas verwundert, dass ich bei Verwendung des GridViews einen Teil der Sortierlogik serverseitig definieren musste.

Du musst serverseitig arbeiten, wenn du eine Pagination drin hast. Clientseitig würde nur der aktuelle Ausschnitt der Tabelle sortiert.

Beispiel: Du hast einen Shop mit 100 Artikeln. Du stellst, um Ladezeit beim Kunden zu sparen, nur 30 pro Seite dar. Jetzt willst du (bzw. der Kunde) nach Preis absteigend sortieren. Würdest du das jetzt clientseitig über JS machen, würde er Seite 1 sortiert haben, das teuerste Produkt würde aber weiter außerhalb seiner Sichtweite auf Seite 2 oder 3 rumliegen.

Merke: JavaScript manipuliert den DOM auf Client-Seite.

Wie würde das denn grundsätzlich mit Java Script funktionieren? Würde ich irgendein Java Script-Statement auf die Table anwenden? Ist das für einen Noob locker zu schaffen?

http://mootools.net/forge/p/tablesorter Analog gibts auch viele Plugins für jQuery. Nimm was dir besser gefällt.

Ob du das schaffst... Nun ja.
Kannst du ein paar Tutorials lesen und nachvollziehen? Kannst du im <head> der Seite das Framework einbetten? Weißt du, wann du wie JavaScript - Code definierst und ausführst? Weißt du zur Not, was DOM Elements sind? Hast du überhaupt freien Zugriff auf den Frontend-Code?

 

[GinoBambino]

Vielen Dank für deine Hilfe!

Du musst serverseitig arbeiten, wenn du eine Pagination drin hast. Clientseitig würde nur der aktuelle Ausschnitt der Tabelle sortiert.

Beispiel: Du hast einen Shop mit 100 Artikeln. Du stellst, um Ladezeit beim Kunden zu sparen, nur 30 pro Seite dar. Jetzt willst du (bzw. der Kunde) nach Preis absteigend sortieren. Würdest du das jetzt clientseitig über JS machen, würde er Seite 1 sortiert haben, das teuerste Produkt würde aber weiter außerhalb seiner Sichtweite auf Seite 2 oder 3 rumliegen.

Merke: JavaScript manipuliert den DOM auf Client-Seite.

Ja, das macht Sinn. Schließlich wird bei Verwendung von Pagination nur ein Ausschnitt aller Elemente angezeigt. Clientseitige Code kann daher überhaupt nicht wissen, dass es noch weitere Elemente gibt.

http://mootools.net/forge/p/tablesorter Analog gibts auch viele Plugins für jQuery. Nimm was dir besser gefällt.

Ob du das schaffst... Nun ja.
Kannst du ein paar Tutorials lesen und nachvollziehen? Kannst du im <head> der Seite das Framework einbetten? Weißt du, wann du wie JavaScript - Code definierst und ausführst? Weißt du zur Not, was DOM Elements sind? Hast du überhaupt freien Zugriff auf den Frontend-Code?

Ich weiß, was das Document Object Model ist. Aber ansonsten leider nichts von allem. Deshalb sollte die Lösung möglichst einfach sein. Im Moment reicht es mir, dass ich mich in ASP.NET einarbeiten muss. Aber aufgrund gewisser Ähnlichkeiten zur WPF ist das noch schaffbar.

Wenn das mit ein wenig Einlesen und einem simplen Statement machbar sein sollte, würde ich die Java Script-Lösung bevorzugen. Wenn ich aber erst Java Script und alles drumherum lernen müsste, wäre ich wohl mit meiner ASP.NET Lösung schneller. In einem kleinen Testprojekt ist es mir nämlich bereits gelungen, eine sortierbare Tabelle zu erzeugen.

 

[F_GXdx]

Ich finde die originale Lösung mit %GetZeilen()% ok. PHP oder JSP funktioniert genau so und hat sich auch durchgesetzt.

 

[GinoBambino]

und dort bastelt man sich dann auch aus verschiedenen HTML-Tags einzelne Zeilen zusammen?

 

[F_GXdx]

Ja.

Wobei man es nicht HTML-tags nennen kann (sondern JSP tags, ASP tags, etc.), da es ja nicht HTML ist, sondern HTML daraus erzeugt wird, bevor es der Server an den Client ausliefert.

Gemäß MVC Pattern, darf der View ja gewisse Elemente abfragen, das wird eben so implementiert.

 

[BlooDFreeZe]

Seh ich auch so. Wenns entsprechende Grid Komponenten gibt ist es meistens schon schöner diese zu verwenden, oder generell (übersichtshalber) den HTML Code entsprechend direkt in der Seite generieren. Beispiel: Ne Liste in ASP.NET MVC mit Razor Syntax:
http://i2.asp.net/media/3008223/Win...A_7002.intellesince.png?cdn_id=2014-05-05-001
oder

@for(var i = 0;i < Model.People.Count;i++)
{
    <tr>
        <td>@Html.TextBoxFor(m => Model.People[i].Name)</td>
        <td>@Html.TextBoxFor(m => Model.People[i].Age)</td>
    </tr>
}

Das ist meiner Meinung nach extrem gut lesbar.

 

[GinoBambino]

Danke für die Beispiele. Sieht sehr interessant aus.

Ich werde mich mal in den folgenden Tagen etwas mit MVC beschäftigen. Einfach nur, um es mal gesehen zu haben.

Ergänzung (19. Mai 2014)

Ich habe zwar eine sortierbare Tabelle realisieren können, aber jetzt müssen die einzelnen Zeilen als Hyperlink fungieren können.

Ich bin schon seit Stunden am Herumprobieren, kriege jedoch keine Lösung hin.

Mein GridView-Element erhält seine Zeilen von einer ObjectDataSource. Die einzelnen Model-Objekte besitzen eine ID, aus die ein Hyperlink zusammengesetzt werden kann.

Vor meinen Anpassungen wurden in der Code-Behind Table-Cells verknüpft, die jeweils einen Hyperlink als Inhalt besaßen:

<td style='width: 144px; padding-bottom: 6px;'><a href='Ticket.aspx?id=" + incident.IncidentId.ToString() + "' target='_self'><div style='height: 34px; cursor: hand;'>" + incident.TicketNumber + @"</div></a></td>

Da mein GridView mittels DataBinding (BoundFields) an die einzelnen Attribute gebunden ist, kann ich dieses Vorgehen nicht anwenden.

Ich habe es entsprech folgender Vorgehensweise versucht, aber auch das ohne Erfolg:

http://stackoverflow.com/questions/...w-selecting-in-gridview-without-select-button

Gibt es denn noch irgendetwas was ich machen könnte?