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

ASP.NET MVC 5 Grundkurs

Templates

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Sollen Webseiten ein einheitliches Layout haben, ist ein Template-System eine gute Lösung. ASP.NET MVC lässt Sie dafür Vorlagen erstellen und erlaubt, einzelne Bereiche an bestimmten Stellen zu platzieren.
10:32

Transkript

Praktisch alle Websites haben ein einheitliches Layout, das heißt auch, dass jede einzelne Seite zumindest einen sehr sehr ähnlichen, wenn nicht gar identischen Rahmen hat, zumindest in sehr vielen Fällen. Da gibt es jetzt prinzipiell zwei Möglichkeiten wie man das macht. Entweder copy-paste, man macht also einmal das Layout und erstellt dann alle anderen Seiten als Kopie. für uns in ASP.NET MVC würde das bedeuten wir haben News und den stehen alle durch Steuerung+C, Steuerung+V, ist keine so gute Idee natürlich, denn wir mal etwas ändern müssen an dem Layout, dann müssen wir alle Dateien einzeln anfassen. Viel besser ist es natürlich wenn wir eine Art von Vorlage haben und es gibt Layout-Vorlagen die mir ASP.NET MVC möglich sind und diese wollen wir einsetzen. So eine Layout-Vorlage enthält quasi einen HTML-Rahmen oder allgemein HTML-Markup, sowie Platzhalter für den eigentlichen Inhalt. Die tatsächlichen Views, die geben dann nur noch diese Inhaltsbereiche an aber nicht mehr das Außenrum. Wenn sie mal mit ASP.NET Webforms gearbeitet haben, dann ist eine ganz praktische Analogie, dass Sie diese Layout-Template wie Masterseiten ansehen und unsere eigentliche News wie Kontentseiten. Legen wir mal so eine Layout-Datei an, eine klassische View ist es, das heißt, wir machen eine CSHTML-Datei. Jetzt hat sich es so ein bisschen eingebürgert, dass man wenn man so eine Art globale Layout-Datei hat, dass man die in dem Ordner "Shared" anlegt, also legen wir einen neuen Ordner an, Shared, und für die zentrale Layout-Datei, nämlich jetzt neues Element und als neues Element brauche ich eigentlich eine CSHTML-Datei, also eine Ansichtsseite und ich nenn das jetzt _Layout, auch so ein Name, das sich quasi eingebürgert hat. So und das ist unsere Layout-Seite, das hier oben entferne ich mal und jetzt würden wir den Rahmen angeben. Also Sie hätten jetzt vielleicht einen entsprechenden Header und nehme gleich die HTML5 Elemente dafür und dann haben wir hier vielleicht den Namen unserer Firma oder den Namen der Website, also "Unsere Website" und vielleicht haben wir auch noch ein Footer und in dem Footer kommt dann irgendein Copyright-Hinweis und DateTime.Now.Year Wir, also, Copyright 2014 Wir. So, das ist also prinzipiell der Rahmen der Seite und irgendwo kommt dann noch der Inhalt hin und das läuft dann wie folgt: an der Stelle an der, der eigentliche Inhalt der Seite kommen soll, bauen wir einen Aufruf ein, und zwar von einer Methode namens @RenderBody. Durch den Aufruf von @RenderBody, instruieren wie ASP.NET MVC, wenn die entsprechende View angezeigt werden soll und die View sagt ich hätte gerne diese Layout-Datei als Basis, dann an der Stelle den Inhalt der View ausgeben. Am besten machen uns das an einem konkreten Beispiel klar, wir haben ja noch den Controller, und ich erstelle mal eine Seite, beziehungsweise eine Action-Methode zuerst und ich nenne das einfach mal Layout oder Template, dann wissen wir genau was da gemeint ist und sagen gut, hier bitte einfach die View zurückgeben und diese View fügen wir jetzt hinzu. Leere View, aber wir verwenden eine Layout-Seite und diese Layout-Seite wählen wir aus, ViewsShared_Layout.cshtml, wir sagen also jetzt, okay, diese neue Template-View, die soll bitte diese gerade erstellte _Layout.cshtml verwenden als Basis. Was passiert jetzt? Es passiert folgendes: Also zum einen wird die Eigenschaft Layout gesetzt auf den Namen der Layout-Datei, des heißt durch diese Angabe, geben wir spezifisch das Template an. Wir haben ja gesehen bei den anderen Views steht hier teilweise Layout=Null. Hängt nämlich damit zusammen, man kann auch global einstellen, dass jede Seite ein Layout verwendet, ein bestimmtes und wenn wir dann eine Seite haben, die sich daran eben nicht halten sollen, müssen wir sagen, nein nein, in diesem spezifischen Fall ist die Layout-Datei gar keine, wir wollen keine Layout-Datei. Was auch noch passiert ist, dass wir in den @ViewBag eine Eigenschaft setzen oder Eigenschaft schreiben, nämlich "Title". Warum? Jetzt können wir nämlich zum Beispiel in der Layout-Datei, hier bei @ViewBag.Title ausgeben. Das heißt, jetzt weiß auch die Layout-Datei, wie ist denn der Titel der eigentlichen Seite? Weiß die Layout-Datei nicht, die Layout-Datei ist sehr global, aber diese Layout-Datei kann jetzt diese @ViewBag Information verwenden. Relativ praktischer Trick, ja und jetzt kommt hier der eigentliche Inhalt, also der eigentliche Inhalt.... So, dann würde ich sagen, probieren wir das gleich mal aus. Starten Google Chrome, der lädt auch entsprechend schon / Home/ Templates, also die Template Action-Methode im Home Controller und tatsächlich, das kommt aus dem Layout, das kommt aus dem Layout und das ist das, was eigentlich in der View steht, und dieses -Element und das schließende-Element, das steht noch in schaue im Template und das ist der eigentliche Inhalt unserer View, das ist also das, was durch RenderBody entsprechend ausgegeben worden ist. Das ist schonmal ein guter Anfang, aber das lässt sich noch etwas weiter anpassen. Bis jetzt ist es ja trotzdem ziemlich statisch. Wir haben also eine View und diese View hat einen Inhalt und dieser eine Inhalt wird an einer Stelle ausgegeben. Aber vielleicht wollen wir das Ganze ja noch ein bisschen weiter steuern, es könnte ja sein, dass wir zum Beispiel mehrere Bereiche auf der Seite haben, also in unserem Template und in jedem dieser Bereiche wollen wir irgendeine Form von Inhalt angeben. Kann doch etwa sein, dass wir im Footer auf manchen Seiten einfach noch bestimmte zusätzliche Informationen angeben müssen, zum Beispiel Link auf die AGB, linke auf das Impressum, solche Sachen. Wie machen wir das jetzt? Nun, es gibt Folgendes: Außer @RederBody haben wir noch die Funktion oder Methode @RederSection. @RederSection rendert einen Bereich, zum Beispiel den Bereich, ich sage mal, "agb". Das bedeutet jetzt folgendes, wenn ich eine View habe und diese View hat die _Layout.cshtml als Basis. dann wird diese _Layout.cshtml genommen, hier wird der eigentliche Inhalt aus der View eingefügt, und wenn jetzt die Section oder der Abschnitt AGB in der View angegeben ist, ist dann kommt der hierin. wie gebe ich jetzt so einen Abschnitt an, na ja, es gibt hier ein Befehl in Razor und zwar @section. So und innerhalb dieses Sections-Bereichs gebe ich jetzt den Inhalt an, muss nur noch die Section benamen, also "agb". Tja, was ist jetzt ein typischer Fall für die AGB, na ja vielleicht zum Beispiel ein Link wäre vielleicht eine gute Idee, also @Html.ActionLink ("AGB", "AGB"). Wir haben diese Action jetzt nicht, aber der Link wird zunächst mal ausgegeben. So, das heißt also, wir haben hier einen Abschnitt AGB, wir können irgendwo stehen, und in der Layout-Datei sagen wir, der Inhalt der Section("agb"), der kommt hier hin nach dem Copyright-Hinweis. Schauen wir es uns an, laden das ins Browser, auch wieder /Home/Template, Seite wird zusammengesetzt und letzten Endes tatsächlich haben wir hier den Link auf die AGB. also genau dort, wo wir es haben wollten und so können wir natürlich beliebig viele von diesen Aktionen und beliebig viele von diesen Sectionen erstellen und die dann entsprechend so einbauen, ist also ganz flexibel. Ein letztes kleines Detail sollten wir jetzt noch beheben, weil wir haben noch eine gewisse Schwäche in unserem Setup, nämlich was ist, wenn diese Section nicht vorhanden ist. Ich meine irgendein Inhalt ist immer vorhanden und wenn es nur eine leere HTML-Seite ist, aber diese Aktionen nicht notwendigerweise vorhanden. Wir würden dann entsprechend ein Fehler bekommen, aber auch dafür gibt es einen Ausweg, und zwar es gibt IsSectionDefined und als Parameter geben wir an den Namen der Section, also in unseren Fall "agb". Und nur wenn die Sektion definiert ist, also wenn die eigentliche View diese Section enthält, nur dann wird sie gerendert. Ansonsten könnten wir noch irgendeinen Ersatzinhalt angeben. Also Hier wären die AGB gewesen. Beispielsweise könnte man sich ja auch vorstellen, dass Sie irgendeine Art von Hinweiskasten auf vielen Seiten haben, der kontextsensitive Informationen enthält und Sie können dann auf den Seiten, die den Hinweiskasten haben sollen, den angeben in den Views und die Seiten, die keinen Hinweiskasten haben und da kommt dann halt gar nichts oder irgendein Platzhalter. Kann man also sehr sehr flexibel handhaben. Führen wir das nochmal aus und weiterhin ist es so, die Seite sieht aus wie zuvor. Der Link erscheint und wie gesagt, hätten wir diese AGB Section nicht angegeben, dann wäre jetzt hier der Ersatzinhalt gekommen. Und das sind Templates oder Layout-Templates in ASP.NET MVC. Einzelne CSHTML-Dateien, einzelne Views, die aber nicht direkt aufgerufen werden, gibt nämlich auch keinen Controller dazu, sondern die einfach eine Art von Rahmen enthalten, die natürlich auch die Razor-Syntax unterstützen und die dann den Inhalt der eigentlichen Views ausgeben und sofern vorhanden, auch den Inhalt individueller Sections. Die Views selber enthalten ganz normales Markup, Programmierungen geben an, welche Layout-Datei verwendet werden soll und letztendlich können auch Sections angelegt werden, die dann an den entsprechenden Stellen zur Ausgabe kommen.

ASP.NET MVC 5 Grundkurs

Machen Sie sich mit den Grundlagen von ASP.NET MVC 5 vertraut und lassen Sie sich in dieser anspruchsvollen Einführung diesen Architekturansatz von Microsoft erläutern.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!