Tagclouds mit MVC

Tagclouds sind in Blogseiten nichts besonderes mehr. Aber es muss ja nicht immer ein Blog sein, in dem eine Tagcloud dargestellt werden soll. Was wäre z.B., wenn man eine Genreliste der Filme als Tagcloud darstellen möchte. Dazu passt eine Extension doch hervorragend.

[csharp]
public static MvcHtmlString TagCloud(this HtmlHelper helper
, IDictionary dictionary, Func urlSelector)
{
string[] fontsizes = { „0.8“, „0.95“, „1.1“, „1.25“, „1.35“, „1.5“, „1.7“ };
StringBuilder texter = new StringBuilder();

int min = dictionary.Min(x => x.Value);
int max = dictionary.Max(x => x.Value);

double range = (max – min)/(double)(fontsizes.Length-1);

foreach (var item in dictionary)
{

int pos = (int)Math.Round((double)item.Value / range);
var tag = new TagBuilder(„span“);
tag.Attributes.Add(„style“, string.Format(„font-size: {0}em“, fontsizes[pos]));
var link = new TagBuilder(„a“);
link.Attributes.Add(„href“, urlSelector(item.Key)); //call Func
link.Attributes.Add(„title“, string.Format(„{0} [{1}]“, item.Key, item.Value));
link.SetInnerText(item.Key);
tag.InnerHtml = link.ToString();
texter.Append(tag.ToString());
}
return MvcHtmlString.Create(texter.ToString());
}
[/csharp]
Die Werte für die Tagcloud übergebe ich als IDictionary, wobei der Name des Tags als Schlüssel und die Anzahl der Elemente des Tags als dazugehöriger Wert enthalten sind. Die URL zum Taglink übergebe ich als Delegate (Func). Diese wird bei Bedarf in der Schleife (s.u.) zusammengebaut. Sazu gleich mehr.
In Zeile 3 habe ich ein willkürliches Array aus Schriftgrößenangaben erstellt. Dieses kann natürlich in Länge und Werten angepasst werden. Hier verwendet ich sieben Abstufungen der Schriftgröße. In den darauffolgenden Zeilen (6-9) berechne ich die Schrittweite eines Bereiches. Danach wird in einer Schleife die eigentliche Cloud zusammengestellt.

In der Webseite muss dann nur noch folgender Code eingefügt werden.
[html]

Url.Action(„Index“, „Movie“, new {genre=x})) %>

[/html]

Wie man hier sieht, wird der URL des Links mit einer Lamda-Expression (Func) übergeben. Diese Funktion wird aus der Schleife aufgerufen. Somit kann man die Extension immer verwenden, da die URL extern erzeugt wird.

Die Darstellung ist dann nur etwas Geschick und Kreativität mit CSS.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s