Einrichten der Umgebung

In dieser Lerneinheit richten Sie die Entwicklungsumgebung für das Modul ein und machen sich mit dem Startprojekt ContosoPets.UI vertraut.

Einrichten der Entwicklungsumgebung

Führen Sie den folgenden Befehl in der Befehlsshell aus. Die Einrichtung kann einige Minuten dauern. Haben Sie daher etwas Geduld.

. <(wget -q -O - https://aka.ms/create-razor-pages-aspnet-core-setup)

Wenn die Einrichtung der Entwicklungsumgebung abgeschlossen ist, wird das Verzeichnis für das Projekt ContosoPets.UI im Azure Cloud Shell-Editor geöffnet.

Die folgenden Projektverzeichnisse und -dateien für ContosoPets.UI werden angezeigt:

  • bin
  • Extensions/
  • Models/
  • obj/
  • Pages/
  • Services/
  • wwwroot/
  • .gitignore
  • appsettings.Development.json
  • appsettings.json
  • ContosoPets.UI.csproj
  • Program.cs
  • Startup.cs

Auch eine Web-API für einen öffentlichen Endpunkt wurde bereitgestellt. Das Projekt ContosoPets.UI stellt ein Client-Front-End für die Web-API bereit. Dieser Endpunkt wird später aufgerufen.

Überblick über die Dateien und Verzeichnisse des Projekts ContosoPets.UI

Das Verzeichnis des Projekts ContosoPets.UI sollte im Azure Cloud Shell-Editor geöffnet sein. Wenn dies nicht der Fall ist, wiederholen Sie die Einrichtungsschritte in der vorherigen Lerneinheit.

Sehen Sie sich die folgenden Dateien und Verzeichnisse für ContosoPets.UI an, indem Sie auf diese im Azure Cloud Shell-Fenster auf der rechten Seite klicken:

Name Beschreibung
Pages/ Enthält die Razor-Seiten und Hilfsdateien. Jede Razor-Seite besteht aus zwei Dateien:
* einer .cshtml-Datei, die Markup und C#-Code enthält und die Razor-Syntax nutzt.
* einer .cshtml.cs PageModel-Klassendatei, in der Folgendes definiert wird:
* Seitenhandler für Anforderungen, die an die Seite gesendet werden.
* Daten, die zum Rendering der Seite verwendet werden.
wwwroot/ Enthält statische Ressourcen wie HTML-, JavaScript- und CSS-Dateien.
Models/ Enthält Modelldateien. Für dieses Projekt wird eine zentrale Modelldatei zur Modellvalidierung verwendet.
Program.cs Enthält eine Main-Methode, die den verwalteten Einstiegspunkt der App darstellt.
ContosoPets.UI.csproj Enthält Konfigurationsmetadaten wie Abhängigkeiten für das Projekt.
Startup.cs Konfiguriert das App-Verhalten und ist z. B. für das Routing zwischen Seiten verantwortlich.

Dateien für Razor-Seiten und zugehörige PageModel-Klassendatei

Im Verzeichnis Pages werden alle Razor-Seiten Ihrer ASP.NET Core-Anwendung gespeichert und verwaltet.

Als Erweiterung für Razor-Dateien wird .cshtml verwendet. Für die zugehörige C#-Klassendatei PageModel wird konventionsgemäß der gleiche Name verwendet, wobei jedoch .cs angefügt wird. Die Razor-Seite Index.cshtml verfügt beispielsweise über eine zugehörige PageModel-Klassendatei für Index.cshtml.cs.

Ein Modellobjekt definiert Dateneigenschaften und umfasst die Logik oder die Vorgänge, die mit diesen Dateneigenschaften in Verbindung stehen. Ein PageModel hat prinzipiell dieselbe Aufgabe. Der Gültigkeitsbereich der Dateneigenschaften und Logikvorgänge für das Modell beschränkt sich jedoch auf die zugehörige Razor-Seite. Mit einer PageModel-Klasse lässt sich die Logik einer Razor-Seite von ihrer Darstellung trennen. Definiert sind in dieser Klasse Seitenhandlermethoden für Anforderungen, die an die Seite gesendet werden, und für Daten, die zum Rendering der Seite genutzt werden. Eine Handlermethode wird als Ergebnis einer Anforderung ausgeführt. Eine OnGet-Methode in der PageModel-Klasse der Razor-Seite würde z. B. automatisch im Fall einer HTTP-GET-Anforderung ausgeführt.

Modelle und das Verzeichnis Models

Klassendateien für Modelle befinden sich konventionsgemäß im Verzeichnis Models/. Wie bereits erwähnt, definiert ein Modellobjekt Dateneigenschaften und umfasst die Logik oder die Vorgänge, die mit diesen Dateneigenschaften in Verbindung stehen.

Für das Projekt ContosoPets.UI ist die Klassendatei Product.cs für Modelle im Verzeichnis Models/ gespeichert. Die Product-Modellklasse definiert die Dateneigenschaften für ein Produkt. Dieses Product-Modell wird für alle in diesem Projekt enthaltenen PageModels verwendet, in denen überwiegend CRUD-Vorgänge für Produkte genutzt werden.

Datenanmerkungen

Für Modelle in ASP.NET Core werden häufig Datenanmerkungen eingesetzt, um Modelleigenschaften einzuschränken oder anzupassen. Datenanmerkungen sind Attribute, mit denen ein bestimmtes Verhalten festgelegt wird, das für Modelleigenschaften erzwungen werden soll. Ein Beispiel sind zulässige Mindest- und Höchstwerte eines bestimmten Bereichs. Das Projekt ContosoPets.UI verfügt über die Modellklassendatei Product.cs, in der mit Datenanmerkungen Einschränkungen für zugehörige Dateneigenschaften definiert werden. In diesem Beispiel ist eine Name-Eigenschaft immer erforderlich. Außerdem muss für eine Price-Eigenschaft ein Wert im Bereich zwischen 0.01 und 9999.99 vorliegen. Da in diesem Modul oft auf das Product-Modell und dessen Dateneigenschaften verwiesen wird, sollten Sie wissen, wo die Modellklasse gespeichert wird.

Das Verzeichnis Pages/Shared/

Markupteilelemente, die auf mehreren Razor-Seiten gemeinsam verwendet werden, befinden sich konventionsgemäß im Verzeichnis Pages/Shared.

In der ContosoPets.UI-Anwendung werden drei Razor-Teilseiten gemeinsam verwendet, die automatisch eingebunden werden, wenn Sie ein neues Projekt des Typs ASP.NET Core-Webanwendung erstellen:

  • _Layout.cshtml: Stellt allgemeine Layoutelemente für mehrere Razor-Seiten bereit.
  • _CookieConsentPartial.cshtml: Stellt eine Benachrichtigung zur Einwilligung in die Nutzung von Cookies und Features bereit, die alle Razor-Seiten in diesem Projekt enthalten.
  • _ValidationScriptsPartial.cshtml: Stellt für alle Razor-Seiten eines Projekts Validierungsfunktionen bereit, mit denen sich beispielsweise Formulareingaben clientseitig überprüfen oder CSRF-Angriffe abwehren lassen.

Dateien für Layouts und Teilansichten

  • Layouts: Diese bestehen in ASP.NET Core aus .cshtml-Dateien, in denen eine übergeordnete Vorlage für App-Ansichten definiert wird. Für Apps ist kein Layout erforderlich. Sie können allerdings mehrere Layouts mit unterschiedlichen Ansichten aufweisen. Die meisten Web-Apps verfügen über ein gemeinsames Layout, das eine einheitliche Benutzeroberfläche gewährleistet. Das Layout umfasst in der Regel gängige Benutzeroberflächenelemente wie die Kopf- und Fußzeile sowie Navigations- oder Menüelemente. Oft verwendete HTML-Strukturen wie Skripts und Stylesheets werden auch häufig von vielen Seiten in einer App genutzt. Alle diese gemeinsam verwendeten Elemente können in einer Layoutdatei definiert werden, auf die anschließend jede App-Ansicht verweisen kann. Layouts verringern Codeduplikate in Ansichten.

  • Teilansicht: Eine Teilansicht ist eine Razor-Markupdatei (.cshtml), die die HTML-Ausgabe innerhalb der gerenderten Ausgabe einer anderen Markupdatei rendert. Teilansichten werden verwendet, um große Markupdateien in kleinere Komponenten zu zerlegen. Außerdem werden durch sie Duplikate häufig verwendeter Markupinhalte in Markupdateien vermieden. Teilansichten werden nicht zur Verwaltung gemeinsam verwendeter Layoutelemente genutzt. Letztere werden stattdessen in der Datei Layout.cshtml festgelegt.

Layouts und Teilansichten werden in diesem Modul nicht behandelt. Am Ende des Moduls finden Sie jedoch Links zu Inhalten, die ausführlichere Informationen zu den hier genannten Features und Konzepten bereitstellen.

Die Struktur des Verzeichnisses Pages und Routing von Anforderungen

Razor Pages verwendet konventionsgemäß die Verzeichnisstruktur im Verzeichnis Pages für das Standardrouting von Anforderungen. Im Stammverzeichnis des Pages-Verzeichnisses befindet sich beispielsweise die Indexseite. Dabei handelt es sich um die Standardseite für die Website der App. Im Verzeichnis Pages/Products von ContosoPets.UI finden Sie eine Sammlung von Razor-Seiten und auch die Seite Index.cshtml. Für Anforderungen, die mittels Routing an /Product/ gesendet werden, wird beispielsweise die Standardseite index.cshtml verwendet, die sich physisch unter /Products/Index.cshtml befindet. Im Projekt ContosoPets.UI befinden sich alle Razor-Seiten (.cshtml) und die zugehörigen PageModel-Klassendateien (.cshtml.cs) praktischerweise unter /Pages/Products/. Alle übergebenen Parameterwerte für Routen werden über eine Eigenschaft zugänglich gemacht. ASP.NET Core stellt stabile Routingfeatures bereit. Für dieses Projekt verwenden Sie ein einfaches Projektverzeichnis für die Routenzuordnung.

Im Folgenden finden Sie einige Routingbeispiele für das abgeschlossene Projekt:

URL Zugeordnete Razor-Seite
www.domain.com /Pages/Index.cshtml
www.domain.com/index /Pages/Index.cshtml
www.domain.com/products /Pages/Products/Index.cshtml
www.domain.com/products/create /Pages/Products/Create.cshtml

Das Ziel des Projekts ContosoPets.UI besteht darin, einen einfachen Benutzeroberflächenclient zur Verfügung zu stellen, mit dem sich CRUD-Vorgänge über den Web-API-Endpunkt Ihres Unternehmens zur Verwaltung von Produkten nutzen lassen. Im Verzeichnis Pages/Product befinden sich alle Razor-Seiten, die die Benutzeroberfläche für diese CRUD-Vorgänge bereitstellen, und deren PageModel-Klassendateien. Für die Anwendung ContosoPets.UI wird dieselbe Modellvalidierung für mehrere Razor-Seiten verwendet. Die Validierung betrifft die HTTP-Anforderungen, die an die gehostete Web-API gesendet werden.

Der HTTP-Anforderungsdienst

Im Projekt ContosoPets.UI sind die HTTP-Anforderungslogik und die Eigenschaften für Product in einer Klasse gekapselt. Diese verarbeitet alle Product-bezogenen Anforderungen an den Web-API-Endpunkt und ist im gesamten Gültigkeitsbereich der Anwendung als Dienst verfügbar. Die Klassendatei für diesen Dienst wird konventionsgemäß im Verzeichnis Services/ gespeichert. Im weiteren Verlauf dieses Moduls werden Sie sich diesen Dienst noch genauer ansehen.