Webapplikationen mit C# und JavaScript

Duett der Sprachen (Teil 2)
Kommentare

Listing 3 zeigt die passende View, in der die statischen Elemente vorbereitet werden. Der Skriptteil wurde nicht vollständig generiert. Es verbleibt ein sehr einfacher Rahmen. Das hat den Vorteil, dass

Listing 3 zeigt die passende View, in der die statischen Elemente vorbereitet werden. Der Skriptteil wurde nicht vollständig generiert. Es verbleibt ein sehr einfacher Rahmen. Das hat den Vorteil, dass der Entwickler der Seite mehr Kontrolle hat, ohne mit unübersichtlich vielen Parametern hantieren zu müssen. JavaScript muss er trotzdem nur sehr wenig kennen. Der erste Aufruf $(function() { … }); sichert den Start des Skripts nach dem Laden der Seite. Dies ist ein mittels jQuery verkürzter Aufruf von document.ready. Hier wird die Funktion SelectData() aufgerufen, die auch manuell über die Schaltfläche des Formulars ausgelöst werden kann. Innerhalb dieser Methode steht der eigentlich AJAX-Aufruf, der komplett durch das Modell gekapselt ist. Der dynamische Teil ist hier auf die Rückrufmethode beschränkt, SetTableBehavior(). Dies ist eine Methode, die, wenn eine Tabelle zur Ausgabe benutzt wird, deren Verhalten mit weiteren Skripten verbessert. Nach dem (asynchronen) Laden der Daten wird dieses Skript aufgerufen. Das soll nur beispielhaft zeigen, wie sich das Modell an spezielle Ansprüche schnell anpassen lässt.

Listing 3: View und Partial View zum Nachladen

// View : Dies ist die Seite
@model DynamicScript.Code.ScriptModel
@{
    ViewBag.Title = "Home Page";
}


@* Ein Helper, der den callback bedient *@
@Script.SetTableBehavior()

@ViewBag.Message

Filter die Liste:

// PartialView : Dies wird in das DIV "ajaxzone" geladen @model List @foreach (var item in Model) { }
@item
Hilfe naht

Die bereits angedeuteten JavaScript-Funktionen wiederholen sich in Variationen innerhalb eines Projekts immer wieder. HTML-Helper lassen sich gut einsetzen, um die Erzeugung von Skriptfragmenten zu kapseln. Ein bisschen C#-Code erzeugt JavaScript, sodass der Entwickler sich nicht mehr um die Feinheiten der Skripte kümmern muss. Die Tabelle, die hier mit SetTableBehavior() interaktiv gemacht wurde, hat beispielsweise eine Struktur, wie sie im zweiten Teil von Listing 3 (unten, die Partial View) gezeigt wird. Jeder Eintrag in der Datenquelle erzeugt zwei Zeilen, eine mit Informationen zum Element und eine mit Optionen. Weil das irgendwann unübersichtlich wird, werden die Optionen nur eingeblendet, wenn der Mauszeiger irgendwo über einer der beiden Zeilen eines Eintrags schwebt. Die Steuerung übernimmt das mit SetTableBehavior() erzeugte Stück JavaScript, das sich selbst an jQuery bedient. Dies soll nun nicht immer wieder definiert und der Skriptcode selbst für den Entwickler der View verdeckt werden. Der in Listing 4 definierte Helper löst diese Aufgabenstellung. Er steckt in einer Datei mit dem Namen Script.cshtml. Der Aufruf in der Seite sieht dann folgendermaßen aus:

@Script.SetTableBehavior()  

Das erzeugt die umschließenden }

Cache-Fallen

Denken Sie daran, dass Skripte direkt in Seiten vom Browser nicht separat zwischengespeichert werden. Es sollten sich hier nur die individualisierten Teile befinden, der Rest muss in Bibliotheken ausgelagert werden, die in eigenen Dateien residieren. So kann der Browser diese Teile im Cache halten, und das Laden der Seiten verkürzt sich. Die geschickte Aufteilung von statischen und dynamischen Codes kann deutlich die Performance verbessern. Übersichtlicher wird es dabei nicht unbedingt, aber durch die Kapselung in Helper, Erweiterungsmethoden und Skriptmodelle kann wieder einiges an Übersicht gewonnen werden.

Fernhilfe

Komplexere Gebilde lassen sich auch mit Erweiterungsmethoden (Extension Methods) erzeugen, die direkt in den Views benutzt werden und fertige Aufrufe erzeugen. Ob @helper oder Erweiterungen der Klasse HtmlHelper eingesetzt werden, ist nicht leicht zu entscheiden. Hier ist auch der persönliche Stil ausschlaggebend. Allgemein bieten sich Erweiterungsmethoden immer dann an, wenn es aufwändiger wird, den Skriptcode zu erzeugen, vor allem, weil sich gut dynamisch Anpassungen vornehmen lassen. Ein noch skriptloses Beispiel zeigt Listing 5: den Pluralizer.

Listing 5: Der Pluralizer

public static class GrammerHtmlHelper {

  public static MvcHtmlString Pluralize(this HtmlHelper html, 
        int value, 
        string singular, 
        string plural) {
    return new MvcHtmlString(String.Format((value == 1) ? singular : plural, value));
  }

  public static MvcHtmlString Pluralize(this HtmlHelper html, 
        int value, 
        string singular, 
        string plural, 
        string nullWord) {
    string val = value == 0 ? nullWord : value.ToString();
    return new MvcHtmlString(String.Format((value == 1 || value == 0) ? singular : plural, val));
  }

}  
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -