Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Umbraco 7 Grundkurs

Navigation erstellen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt die Programmierung des Grundgerüsts für die Navigation. Dieses gibt den kompletten Dokumentbaum wieder und wird im Menü der Website bereits mit den korrekten Stilen dargestellt.

Transkript

Ich bin jetzt hier in diesem Partial, das mir die Navigation darstellt. Dieses Partial ist ein Code-Snippet von Umbraco, das mir beim Anlegen des Partials eingefügt worden ist. Es gibt jetzt zwei Sachen, die mir nicht gefallen. Sagen wir drei Sachen. Die erste Sache sehen wir hier, dass Elemente dargestellt werden, wie diese "Metaseiten" und "seitenunabhängige-Elemente"-Ordner, die ich hier gar nicht sehen will. Ich möchte hier nur "Training und Beratung" sehen, also navigierbare Seiten. Das ist das Eine. Eine weitere Sache ist, dass mit "CurrentPage" gearbeitet wird und "CurrentPage", wie man in diesem Kästchen da unten sieht, ist ein Dynamic. Ab dem Punkt, wo ich so ein Dynamic benutze, wird der ganze Codetyp unsicher. Die Typprüfung von C# fällt weg und das ist eigentlich schade, denn wozu verwende ich eine typsichere Sprache, wie C#, wenn ich am Ende die Typprüfung durch den Compiler nicht habe. Ein Drittes ist, dass hier nämlich einfach nur eine einzige Schleife durchlaufen wird, das heißt, ich kann keine verschachtelte Navigation machen. Deshalb machen wir jetzt eines, wir werfen diesen Code weg. Jetzt fangen wir ganz von vorne an. Zunächst einmal ist es so, dass meine gegenwärtige Seite in "Model.Content" steckt. Dann muss ich mich von meiner gegenwärtigen Seite in der Hierarchie nach oben arbeiten, bis ich auf dem höchsten Level angekommen bin, das heißt, bei meiner "Home"-Seite. In Umbraco ist es so, dass wir ähnlich, wie bei XML in unserem Dokumentbaum navigieren können. Ich kann also so etwas schreiben, wie meine "Home"-Seite soll sein "currentPage" ".Ancestor" "OrSelf" mit dem Level "(1)". Damit bin ich ganz oben. Wenn jetzt die gegenwärtige Seite die "Home"-Seite ist, stellt dieses "OrSelf" sicher, dass praktisch die "Home"-Page gleich der "CurrentPage" ist. So und mit diesen beiden Informationen an der Hand kann ich jetzt hingehen und eine rekursive Funktion aufbauen. Dazu brauche ich jetzt eine sogenannte "Helper-Methode". Eine Helper-Methode ist im Razor-Code eine Methode, die ihrerseits selber HTML-Code generieren kann. Ich schreibe das nun einmal hin, das ist das Schlüsselwort "helper" und ich nenne es "MakeNav", also "Mache eine Navigation". So und die braucht jetzt zwei Parameter. Der erste Parameter ist ein "IPublishedContent", denn unsere Seiten hier in der Programmierung sind immer von diesem Typ. Das ist sozusagen meine gegenwärtige Ebene, von der aus ich die Navigation aufbauen möchte. Dann brauchen wir ja in dieser ganzen Hierarchie noch die "CurrentPage", also die Seite, die tatsächlich dargestellt wird. So. Jetzt besorge ich mir erst einmal die Kinder von meiner gegenwärtigen Seite. So. Wie wir in Umbraco mit "AncestorOrSelf" nach oben navigieren, können wir mit "Children" nach unten navigieren. Was dabei herauskommt ist "IEnumerable" von "IPublishedContent", welches ich mit der Link-Methode "ToList" in eine Liste umwandle. Wenn diese Liste jetzt leer ist, dann möchte ich hier zurückkehren. So brauche ich also die Navigation an der Stelle gar nicht mehr weiterführen. Dummerweise wirft es immer wieder die Formatierung durcheinander, das ist einfach eine alte Krankheit von Visual Studio beim Schreiben von Razor-Code. Gut, nachdem jetzt klar ist, dass wir Elemente darin haben, können wir jetzt eine unordered list starten und innerhalb dieser bauen wir jetzt die eigentlichen Items auf. Das lagere ich in eine weitere Helper-Methode aus, die dann "IterateItems" heißen soll. Der übergebe ich natürlich meine Items, und wieder die "CurrentPage". So, jetzt muss ich natürlich diese Helper-Methode schreiben, da kommt also wieder ein "IPublishedContent" und ein erneutes "IPublishedContent". Ach so, Moment, das ist natürlich Unsinn, das soll jetzt eine "List Das sind meine "items" und die "currentPage" übergeben wir hier auch. Gut. Jetzt kann ich in dieser Methode über alle Items iterieren und für jedes dieser Items ein "li"-Element, also ein "List-Item"-Element ausgeben. Dieses "List-Item"-Element enthält im simpelsten Falle einen Link, der jetzt eine URL hat und natürlich ein String, der angezeigt werden soll. Jetzt wird es interessant. Jedes dieser Items hier ist jetzt ein "IPublishedContent". Das kann man hier auch schön sehen. So ein "IPublishedContent" hat ein Property "URL", sodass ich jetzt einfach schreiben kann "item.url". Das ist die URL für meine Navigation. Jedes Dokument hat ja einen Namen, also kann ich hier den Namen ausgeben und habe damit meinen Link. Gut, dann geht es weiter. Wenn mein Item weitere Kinder hat, dann soll jetzt hier eine geschachtelte unordered list entstehen. Das Wunderbare ist, dass ich dazu eigentlich nur "MakeNav" aufrufen muss und diesem mein gegenwärtiges Item und die "currentPage" übergebe. Gut, damit sind wir eine Ebene weiter, das wieder getestet wird, ob überhaupt Items da sind. Wenn Items da sind, dann iterieren wir darüber wieder. Damit haben wir eine schöne Rekursion geschaffen. So, jetzt fragt sich natürlich, warum haben wir in der ganzen Logik hier immer diese "CurrentPage" mit hineingeschleppt? Die Seite, die im Augenblick gerade dargestellt wird? Das liegt daran, dass wir das Element, also den Link auf die gegenwärtige Seite oder sagen wir einmal, den Elternlink in der Navigation, von unserer gegenwärtigen Seite anders darstellen wollen. Das können wir mit einer CSS-Klasse machen. So eine CSS-Klasse, die zum Beispiel "Selected" heißen könnte, müssen wir jetzt mit einer bestimmten Logik einfügen. Um diese Aufgabe zu bewerkstelligen, kommt uns etwas zu Hilfe, was uns Umbraco zur Verfügung stellt, nämlich jeder solcher Items hat ein Property, das sich "Path" nennt. Dieser Path ist ein String, der ungefähr so aussieht. Also angenommen, mein Item hätte jetzt die ID "1233" und es hätte im Dokumentbaum ein Elternteil, das in dem Fall die "Home"-Seite wäre, die die ID "1050" hat. Die "-1" steht für den Content selber. Also bei der "-1" weiß man, dass das die Spitze des Berges ist, es wäre sozusagen das Level null, das ist das Level eins und das Level zwei. Gut, wenn also dem so wäre, dann wäre dieser String hier das, was das Property "Path" zurückgibt und ist also ein String. So und jetzt können wir Folgendes sagen: Wenn im Pfad der gegenwärtigen Page die gerade angezeigte Seite enthalten ist, dann soll ich sie als "Selected" markieren. Das ist eine etwas schwer zu verstehende Logik, aber es sieht so aus: ich kann eine Variable setzen, die ich "aClass" nenne und auf "null" setze. Dann muss ich einen Typ davor schreiben, so. Jetzt schreibe ich "if (currentPage)" im ".Path", den kann ich splitten, ".Split", und zwar mit dem Kennzeichen Komma "('.')", wie wir es hier haben, dann erhalte ich ein Array von Strings. Und wenn dieses Array die ID von meinem Item enthält, und zwar weil die ID ein Integer ist, weshalb ich es in einen String konvertieren muss, dann soll ich bitte schön diesen Link als "Selected" markieren. Das machen wir, "aClass = "selected"" So. Jetzt können wir hier "class=" "@aClass"" eintragen. So, kurze Zwischenfrage: Was passiert, wenn "aClass" ist gleich "null"? Wenn dieser Fall also nicht zutrifft, dann ist "aClass" null. Dann fällt dieser ganze Ausdruck hier heraus. Dann ist sozusagen die Klasse nicht gesetzt. In diesem Fall gibt es eine Klasse, die "selected" ist. So, das ist jetzt soweit unsere Navigation, das können wir jetzt ausprobieren. Ich drücke auf "F5", okay, etwas stimmt hier noch nicht. Was hier nicht stimmt, ist, dass wir zwar die Helper-Methoden geschrieben haben, aber wir haben sie nicht aufgerufen. Also rufe ich "MakeNav" auf mit "(home, )" als ersten Parameter und "currentPage)" als zweiten Parameter. So, jetzt gehe ich auf unsere Seite und starte sie neu. Jetzt haben wir wieder die gesamte Navigation und das Letzte, worum wir uns jetzt kümmern müssen, ist, dass wir nur navigierbare Typen anzeigen lassen.

Umbraco 7 Grundkurs

Lernen Sie das mächtige Content Management System zu bedienen und steigen Sie in die Entwicklung dafür ein.

3 Std. 16 min (32 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
Umbraco Umbraco 7
.NET .NET 4.6
Exklusiv für Abo-Kunden
Erscheinungsdatum:07.09.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!