In meinen Überlegungen für “motivierende” Anwendung möchte ich Abstand von Tabellen nehmen. Der Anwendungsfall: Ein Datensatz kann mehrere Attribute enthalten. Die verwendeten Attribute und deren Häufigkeit sollen für eine Suche verwendet werden können.
Dabei bin ich bei der Tag Cloud gelandet, die eigentlich ein wenig aus der Mode gekommen ist. Eine echte Wolke lässt sich am Server nicht zeichnen. Das muss im Web Browser und per JavaScript erledigt werden. Da das berechnen des vorhandenen Platzes und Größe des einzelnen Elements mathematisch durchaus aufwand bedeutet, habe ich eine fertige JavaScript Library genommen. JQCloud hat wenige KB und hat einen sehr einfachen lesbaren JS und CSS Code.
Auch das einbinden ist sehr einfach. Ein DIV als Platzhalter, Referenzen auf CSS und JS und ein wenig Code um die Daten als Liste zu initialisieren.
1: var word_list = [
2: {text: "Lorem", weight: 13, link: "http://www.vsone.de"}, 3: ...
4: ];
5: $(function() { 6: $("#my_favorite_latin_words").jQCloud(word_list); 7: });
8: </script>
Nun stellt sich die Frage, wie kommen die Daten aus dem SQL Server zum Client. Reflexartig könnte man die ASP.NET Web Api bemühen und einen REST Service bauen, der dann per Jquery und XMLHTTPRequest den Load durchführt.
Oder man generiert den kompletten HMTL Code samt JavaScript am Server. Was eigentlich mal die Idee von ASP.NET war. Im Codebehind werden Daten per SQLCommand geladen. Ganz ohne Entity Framework, weil es hier keinerlei Vorteil bringt.
1: Public liste As New List(Of tagcloud)
2:
3: Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
4: Dim cmd As New SqlCommand
5: Dim conn As New SqlConnection(…)
6: cmd.CommandText = "select top 100 keywords, count(*) as summe from
tabelle group by keywords order by summe desc"
7: cmd.Connection = conn
8: conn.Open()
9: Dim dtr As SqlDataReader = cmd.ExecuteReader()
10: While dtr.Read
11: liste.Add(New tagcloud With {.keywords = dtr(0), .summe = dtr(1)}) 12: End While
13: conn.Close()
14: End Sub
15: End Class
16: Public Class tagcloud
17: Property summe As Integer
18: Property keywords As String
19: End Class
Im ASPX wird dann der HTML5 Code deklariert. Seit den Anfängen von Active Server Pages kann man dabei Server Code per <%%> “injizieren”.
1: <script type="text/javascript">
2: var word_list = [
3: <% For i = 1 To liste.Count%>
4: { text: "<%=liste(i - 1).keywords%>", weight: "<%=liste(i - 1).summe%>" }, 5: <% Next%>
6: ];
7: $(function () { 8: $("#my_favorite_latin_words").jQCloud(word_list); 9: });
10: </script>
11: <div id="my_favorite_latin_words" style="width: 800px; height: 700px;"></div>
Das ganze nicht unähnlich wie Scott Guthrie 2010 mit Razor eingeführt hat.
Wenn die Liste mehr als 50 Einträge hat, wird die Darstellung stückweise berechnet weil sonst der Benutzer zu lange gar nichts sieht. Kann man natürlich auch umstellen im JavaScript Code.
1: var default_options = { 2: width: $this.width(),
3: height: $this.height(),
4: center: { 5: x: ((options && options.width) ? options.width : $this.width()) / 2.0,
6: y: ((options && options.height) ? options.height : $this.height()) / 2.0
7: },
8: delayedMode: word_array.length > 50,
9: shape: false, // It defaults to elliptic shape
10: encodeURI: true,
11: removeOverflowing: true
12: };
Allerdings dauert es mit 200 Einträgen doch ein paar Sekunden. Das hat mich ein wenig erstaunt. Sowohl IE als auch Chrome schenken sich da nichts.