Webapplikationen mit C# und JavaScript

Duett der Sprachen (Teil 3)
Kommentare

Hier können zu Zahlen passende Wörter angegeben werden, um die Ausgabe grammatikalisch korrekt darzustellen. Der Aufruf sieht dann folgendermaßen aus:
@Html.Pluralize(Model.Count(),“copy“), „copies“),

Hier können zu Zahlen passende Wörter angegeben werden, um die Ausgabe grammatikalisch korrekt darzustellen. Der Aufruf sieht dann folgendermaßen aus:

@Html.Pluralize(Model.Count(),"copy"), "copies"), "no"))  

Die Ausgabe zeigt dann „no copies“, „1 copy“ oder „2 copies“ usw. an. Auf Skripte ausgedehnt, ergeben sich spannende Anwendungsmöglichkeiten der Erweiterungsmethoden. Eine häufige Ausgabe ist eine Treeview. Idealerweise laufen alle Vorgänge clientseitig ab, wie beispielsweise Drag and Drop, Zweige öffnen und schließen. Manche Bäume haben Kontextmenüs, erlauben dynamisch das Herausnehmen und Hinzufügen von Elementen usw. Im Sinne des am Anfang diskutierten Applikationsdesigns sollte all dies im Browser ablaufen und nur durch AJAX-Aufrufe gestützt werden. Dazu bieten viele Rahmenwerke wie Ext JS oder jQuery gute Lösungen. Ein Beispielaufruf kann nun umfassende Skripte enthalten oder folgendermaßen entwicklerfreundlich gekapselt sein:

@Html.TreeView("forumtree",
  Model,
  n => n.Children,
  n => {
    return "" + n.Subject + "";
  }
)  

Das Model ist vom Basistyp IEnumerable, und der konkrete Typ liefert eine Eigenschaft Children, die die nächste Ebene enthält. Die Parameter nehmen zum einen das gesamte Objekt an, zum anderen die Eigenschaft, die die Kindelemente liefert, und zuletzt eine Anweisung zur Konstruktion der Kindelemente. Listing 6 zeigt, wie die Lösung aussieht.

Listing 6: Eine Erweiterungsmethode, die komplexen Skriptcode kapselt

public static class TreeViewHtmlHelper {

    public static MvcHtmlString TreeView(this HtmlHelper html, 
          string treeId, 
          IEnumerable rootItems, 
          Func> childrenProperty, 
          Func itemContent, 
          bool includeJavaScript = true, 
          string emptyContent = "") {
        StringBuilder sb = new StringBuilder();
        sb.AppendFormat("
    rn", treeId); if (rootItems.Count() == 0) { sb.AppendFormat("
  • {0}
  • ", emptyContent); } foreach (T item in rootItems) { RenderLi(sb, item, itemContent); AppendChildren(sb, item, childrenProperty, itemContent); } sb.AppendLine("
"); if (includeJavaScript) { sb.AppendFormat(@"", treeId); } return MvcHtmlString.Create(sb.ToString()); } private static void AppendChildren( StringBuilder sb, T root, Func> childrenProperty, Func itemContent) { AppendChildren(sb, root, childrenProperty, itemContent); } private static void AppendChildren( StringBuilder sb, T root, Func> childrenProperty, Func itemContent) { var children = childrenProperty(root); if (children == null || children.Count() == 0) { sb.AppendLine(""); return; } sb.AppendLine("rn
    "); foreach (T item in children) { RenderLi(sb, item, itemContent); AppendChildren(sb, item, childrenProperty, itemContent); } sb.AppendLine("
"); } private static void RenderLi( StringBuilder sb, T item, Func itemContent) { RenderLi(sb, item, itemContent); } private static void RenderLi( StringBuilder sb, T item, Func itemContent) { sb.AppendFormat("
  • {0}", itemContent(item)); } }
  • Dabei wird zum einen ein Baum aus

    -Elementen aufgebaut, versehen mit den passenden Id-Attributen und gegebenenfalls auch CSS-Anweisungen. Erzeugt wird auch der passende Skriptaufruf, damit die Baumansicht nach dem Laden der Seite entsteht. Der erzeugte Skriptcode ist optional, denn falls die Definition bereits woanders auf der Seite erfolgte, muss sie hier nicht noch einmal erzeugt werden. Der Entwickler der View muss lediglich dafür sorgen, dass die passende Skriptbibliothek oder Erweiterung geladen wird, die das Skript bedient. In diesem Fall sorgt der Aufruf Element.treeview() für die Aktivierung. Ist beides, Skriptbibliothek und Erweiterungsmethode, sauber implementiert, muss der Anwender über keinerlei JavaScript-Kenntnisse verfügen.

    Abb. 4: Das fertige Programm mit der gefilterten Ausgabe
    Abb. 4: Das fertige Programm mit der gefilterten Ausgabe
    Fazit

    Moderne Webapplikationen werden zwangsläufig mit einer Mischung aus serverseitigem Code, beispielsweise in C#, erstellt und clientseitig mit JavaScript ergänzt. Überdies bedienen sich beide Seiten umfassend der jeweiligen Bibliothekswelt, auf der Serverseite .NET und clientseitig meist jQuery. Das stellt höchste Ansprüche an die Entwickler. Die Kopplung ist einfacher, sicherer und zuverlässiger, wenn der clientseitige Teil generiert wird. Voraussetzung ist, dass JavaScript tatsächlich nur die Benutzerschnittstelle erzeugt und bedient und alles an „echter“ Logik auf dem Server abläuft. Das ist überdies auch sicherer und robuster, was letztlich der Applikation direkt zugutekommt.

    Jörg Krause arbeitet als freiberuflicher Trainer, Berater und Softwareentwickler im Expertennetzwerk IT-Visions.de mit Spezialisierung auf SharePoint-Programmierung, ASP.NET/MVC und SQL Server. Er spricht auf nationalen Konferenzen und hat mehrere Bücher, u.a. zu SQL Server, ASP.NET und WCF, veröffentlicht. Sie erreichen ihn unter www.joergkrause.de.
    Unsere Redaktion empfiehlt:

    Relevante Beiträge

    Meinungen zu diesem Beitrag

    X
    - Gib Deinen Standort ein -
    - or -