Best practice: Razor helper

Um die Duplizierung von Code in Razor-Skripts zu vermeiden oder um den Code von Razor-Skripts schlanker und übersichtlicher zu halten kann man sogennante Helper-Methoden verwenden.


Helper-Methoden können wie folgt erstellt werden:

Am Ende der .cshtml-Datei, in welcher die Helper-Methode verwendet werden soll, wird außerhalb jedes Razor-Skript-Blocks die Methode erstellt:

@helper Name(Datentyp Parameter1, Datentyp Parameter2, ... , Datentyp Parameter X) {
       // Code
}

Die Helper-Methode wird anschließend innerhalb dieser .cshtml-Datei wie folgt aufgerufen:

@Name(Parameter1, Parameter 2, ... , Parameter X);

Beispiel:
Wir haben einen Content-Knoten, in welchem die untergeordneten Knoten jeweils über eine Dokumenteneigenschaft vom Datentyp "Digibiz Advanced Media Picker" verfügen. Wenn wir nun diese Content-Knoten durchlaufen möchten und in einer Liste die mit dem Mediapicker ausgewählten Bildnamen aus dem Mediabereich ausgeben möchten, schreiben wir in unserer Razor-Skriptdatei zunächst unsere foreach-Schleife.
Anstatt nun jedoch in dieser Schleife den Algorithmus zur Auswertung unseres Mediapickers zu implementieren, rufen wir in der Schleife nur unsere neu zu erstellende Helper-Methode namens GetImageName auf und übergeben als Parameter den aktuell durchlaufenden Knoten:

@{
    @Html.Raw("<ul>");
    foreach(var item in Model.Children.Where("Visible"))
    {
        <li>@GetImageName(@item)</li>
    }
    @Html.Raw("</ul");
 }

Außerhalb dieses Razor-Code-Blockes erstellen wir nun am Ende unserer .cshtml-Datei die neue Helper-Methode:

@helper GetImageName(dynamic item)
{
  if(item.HasValue("Image"))
  {
       dynamic mediaItems = item.Image.mediaItem;
        if (mediaItems.Count() != 0)
        {
            foreach (var item2 in mediaItems)
            {
                var image = item2.Image;
                @Html.Raw(@image.nodeName);
            }
        }
  }   
}

Dies funktioniert jedoch zunächst nur innerhalb der jeweiligen .cshtml-Datei. Wenn wir nun diesen Algorithmus, welchen wir in der Methode GetImageName ausgelagert haben, auch in anderen Razor-Skript-Dateien verwenden möchten wäre es umständlich diese Methode in jeder .cshmtl-Datei einzeln hinzuzufügen.


Hier gibt es nun zwei weitere Möglichkeiten:

Zum einen kann man die Helper-Methode in eine separate leere .cshtml-Datei speichern und entsprechend benennen. Diese Datei kann man nun mit Hilfe von @RenderPage anstelle unseres Methodenaufrufs einfügen:

@{
    @Html.Raw("<ul>");
    foreach(var item in Model.Children.Where("Visible"))
    {
        <li>@RenderPage("~/macroScripts/GetImageName.cshtml")</li>
    }
    @Html.Raw("</ul");
 }

Eine weitere sehr gute und empfehlenswerte Möglichkeit ist es, alle Helper-Methode in eine .cshtml-Datei zu speichern und diese Datei in das App_Code-Verzeichnis der Umbraco-Instanz auf dem Server zu kopieren.

Wenn diese Datei z.B. MyHelper.cshtml heißt und die Helper-Methoden GetImageName und GetImageUrl beinhaltet, kann man in jeder .cshtml-Datei mit folgendem Code diese beiden Helper-Methoden aufrufen:

@MyHelper.GetImageName;
@MyHelper.GetImageUrl;

Man sollte jedoch beachten, dass die Dateien in dem App_Code-Verzeichnis zur Laufzeit kompiliert werden. Befindet sich in den dort beinhalteten .cshtml-Dateien ein einziger Fehler wird die Webseite dies direkt global mit einer Serverfehlermeldung qutitieren. Sobald man die entsprechende .cshtml-Datei jedoch wieder entfernt hat, sollte die Fehlermeldung beim nächsten Seitenaufruf verschwinden und das Web wieder erreichbar sein.


Überladen von Helper-Methoden

Auch das Überladen von Helper-Methoden ist möglich. Dies funktioniert genauso wie das Überladen von normalen C#-Methoden:

@helper GetImage(dynamic item, string cropName, int altText)
{
        // code
}

@helper GetImage(dynamic item, string cropName, bool altText)
{
        // code
}

@helper GetImage(dynamic item, string cropName, int altText, string strClass)
{
       // code
}

Alle drei Methoden haben die gleiche Bezeichnung GetImage. Sie unterscheiden sich jedoch durch die Anzahl und/oder durch den Datentyp der Parameter. Je nachdem mit welchen Parametern nun die Helper-Methode GetImage aufgerufen wird, wird automatisch die richtige Methode ausgeführt.

Geschrieben von Sören Deger um 15:12 Uhr

0 Kommentare :

Kommentar