ASP.NET MVC – Layouts

Während wir eine Webanwendung entwickeln, müssen wir auch den äußeren und ästhetischen Teil entwickeln, das heißt, was der Benutzer sieht. Dazu gehört, dass die Kopfzeile der Seite, das Menü, die Fußzeile usw. erstellt werden.

Was wir erwähnt haben, ist der statische Inhalt, der sich während der Laufzeit der Anwendung in der Regel nur geringfügig ändert. Er ändert sich normalerweise, wenn ein neues Look and Feel , dh eine Neugestaltung, erfolgt oder wenn neue Komponenten hinzugefügt werden, die berücksichtigt werden müssen.

Um mit dieser Art von Elementen arbeiten zu können, müssen wir die Layouts verwenden . Dies ermöglicht es uns, den Header zum Beispiel einmal zu schreiben, und wenn wir dies tun, können wir ihn in andere Teile einbinden, ohne ihn neu schreiben zu müssen.

Layouts

Mit Razor können wir Vorlagen schreiben, die sich wie Ansichtscontainer verhalten, das heißt, eine Ansicht, die andere enthält, wie wir erklärt haben. Ziel ist es, so wenig Code wie möglich zu schreiben und den Aspekt unserer Anwendung zu homogenisieren.

Warum Layouts verwenden?
Wenn wir zum Beispiel ein einfaches Web mit einer Kopfzeile haben, ist es am logischsten, dass verschiedene Ansichten diese Kopfzeile verwenden. Anstatt Ihren Code in jeder Ansicht mehrmals zu schreiben, erstellen wir ein Layout und fügen es in die verschiedenen Ansichten ein.

Inhalt der Datei _Layout.cshtml

Beim Generieren eines neuen Webprojekts in unserem Ansichtenordner haben wir eine Datei mit dem Namen _Layout.cshtml . In dieser Datei haben wir unsere Hauptvorlage, die als Container für Ansichten fungiert, die wir im vorherigen Punkt erklärt haben.

Sehen wir uns im folgenden Bild den Quellcode an, der diese Datei enthält:

See also  So installieren und konfigurieren Sie Monit unter Debian 9

asp_layouts.jpg

Wenn wir detailliert angeben , dass wir eine normale HTML-Datei haben , der Razor- Code uns jedoch interessiert, beginnen wir mit dem Title-Tag. Wenn Razor @ View.Title anzeigt , bedeutet dies, dass Sie einen Title- Parameter drucken müssen, der aus der Ansicht stammt Fahren Sie dann mit den anderen Abschnitten fort, in denen @RenderSection ([Name]) das Drucken von Inhalten ermöglicht, die in der Ansicht für jeden Abschnitt angegeben sind, und @RenderBody () schließlich den Inhalt des Körpers druckt.

Wie wir sehen, ist es etwas ziemlich Modulares. Wenn wir jetzt einen Code einer Ansicht sehen, können wir verstehen, wie sie direkt zusammenhängen:

 @ {Layout = "~ / _Layout.cshtml"; } @section Header { <h1> Inhalt der Kopfzeile der Ansicht <h1> } @section Footer { Copyright @ DateTime.Now.Year } <div class = "main"> Dies ist der Inhalt des Sichtkörpers </ div> 

In dieser Ansicht geben wir zunächst an, dass Sie die Datei _Layout.cshtml als Basis verwenden. Anschließend teilen wir Ihnen mit, was in den einzelnen Abschnitten enthalten ist, z. B. @section Header . In diesem Block wird gedruckt den @ RenderSection (“Header”) , den wir in der Datei _Layouts.cshtml gesehen haben .

Assoziation
Wir können dann sagen, dass dies wie ein Puzzle funktioniert und das Layout jedes Teil, das wir identifizieren, dort platziert, wo es hingehört.

Damit beenden wir dieses Tutorial und wie wir anhand der Layouts sehen können, können wir viel Code einsparen. Wenn wir eine einzige Quelle für diesen Inhalt haben, werden unsere Seiten viel homogener. Wenn wir verschiedene Abschnitte benötigen, können wir ein zweites oder drittes Layout schreiben , das uns alle Möglichkeiten bietet Elemente, die wir verwenden werden.

See also  Einführung in grafische Benutzeroberflächen in Python

administrator

Leave a Reply

Your email address will not be published. Required fields are marked *