Übung: Anpassen des Projekts

  • 12 Minuten

Ihr Team hat die Arbeit für die Pizzasortenverwaltungs-App aufgeteilt. Ihre Teamkolleg*innen haben bereits die ASP.NET Core-Web-App sowie einen Dienst zum Anzeigen von Pizzasorten sowie Hinzufügen neuer Daten zu einer Datenbank erstellt. Sie sollen sich um die Pizza List-Seite kümmern, auf der eine Liste der Pizzas angezeigt wird und die das Hinzufügen neuer Pizzas zur Datenbank ermöglicht. Wir machen uns zunächst mit dem Ablauf des Projekts vertraut.

Hinweis

In diesem Modul wird die .NET-CLI (Befehlszeilenschnittstelle) und Visual Studio Code für die lokale Entwicklung verwendet. Nach Abschluss dieses Moduls können Sie die Konzepte mit Visual Studio (Windows) oder bei der Weiterentwicklung mit Visual Studio Code (Windows, Linux und macOS) anwenden.

Abrufen der Projektdateien

Wenn Sie GitHub Codespaces verwenden, öffnen Sie einfach das Repository im Browser, wählen Sie Code aus, und erstellen Sie dann einen neuen Codespace im Branch main.

Wenn Sie GitHub Codespaces nicht verwenden, rufen Sie die Projektdateien ab, und öffnen Sie sie in Visual Studio Code mit den folgenden Schritten:

  1. Öffnen Sie eine Befehlsshell, und klonen Sie das Projekt aus GitHub mithilfe der Befehlszeile:

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. Navigieren Sie zum Verzeichnis mslearn-create-razor-pages-aspnet-core, und öffnen Sie das Projekt in Visual Studio Code:

    cd mslearn-create-razor-pages-aspnet-core
code .

Tipp

Wenn Sie eine kompatible Containerruntime installiert haben, können Sie die Erweiterung Dev Containers verwenden, um das Repository in einem Container mit vorinstallierten Tools zu öffnen.

Überprüfen der Arbeit Ihrer Teamkollegen

Nehmen Sie sich einen Moment Zeit, um sich mit dem vorhandenen Code im Ordner „ContosoPizza“ vertraut zu machen. Das Projekt ist eine ASP.NET Core-Web-App, die mit dem Befehl dotnet new webapp erstellt wurde. Die Änderungen Ihrer Teamkollegen werden unten beschrieben.

Tipp

Wenden Sie nicht zu viel Zeit für die Überprüfung dieser Änderungen auf. Ihre Teamkollegen haben bereits die Datenbank und den Dienst zum Anzeigen und Hinzufügen von Pizzasorten zur Datenbank erstellt, aber sie haben keine Änderungen an der Benutzeroberfläche vorgenommen. In der nächsten Lerneinheit erstellen Sie eine Benutzeroberfläche, die ihren Dienst nutzt.

  • Dem Projekt wurde der Ordner Models hinzugefügt.
    • Der Ordner „Models“ enthält eine Pizza-Klasse, die eine Pizza darstellt.
  • Dem Projekt wurde der Ordner Data hinzugefügt.
    • Der Ordner „Data“ enthält eine PizzaContext-Klasse, die den Datenbankkontext darstellt. Sie erbt von der DbContext-Klasse in Entity Framework Core. Entity Framework Core ist ein objektrelationaler Mapper (ORM), der die Arbeit mit Datenbanken vereinfacht.
  • Dem Projekt wurde der Ordner Services hinzugefügt.
    • Der Ordner „Services“ enthält eine PizzaService-Klasse, die Methoden zum Anzeigen und Hinzufügen von Pizzas verfügbar macht.
    • Die PizzaService-Klasse verwendet die PizzaContext-Klasse zum Anzeigen und Hinzufügen von Pizzasorten zur Datenbank.
    • Die Klasse wird für die Abhängigkeitsinjektion in Program.cs (Zeile 10) registriert.

Entity Framework Core hat auch einige Elemente generiert:

  • Der Ordner Migrations wurde generiert.
    • Der Ordner „Migrations“ enthält Code zum Erstellen des Datenbankschemas.
  • Die SQLite-Datenbankdatei ContosoPizza.db wurde generiert.
    • Wenn Sie die SQLite-Erweiterung installiert haben (oder GitHub Codespaces verwenden), können Sie die Datenbank anzeigen, indem Sie mit der rechten Maustaste auf die Datei klicken und Datenbank öffnen auswählen. Das Datenbankschema wird im Bereich „Explorer“ auf der Registerkarte SQLite Explorer angezeigt.

Überprüfen der Razor Pages-Projektstruktur

Alle anderen Komponenten des Projekts wurden seit der Erstellung nicht geändert. In der folgenden Tabelle wird die Projektstruktur beschrieben, die vom Befehl dotnet new webapp generiert wurde.

Name Beschreibung
Pages/ Enthält die Razor-Seiten und Hilfsdateien. Jede Razor-Seite umfasst eine .cshtml-Datei und eine .cshtml.cs-PageModel-Klassendatei.
wwwroot/ Dieses Element enthält statische Ressourcendateien (z. B. HTML, JavaScript und CSS).
ContosoPizza.csproj Dieses Element enthält Projektkonfigurationsmetadaten (z. B. Abhängigkeiten).
Program.cs Dieses Element dient als Einstiegspunkt der App und konfiguriert das App-Verhalten (z. B. Routing).

Weitere bemerkenswerte Beobachtungen:

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

    Razor-Seiten werden Pages-Verzeichnis gespeichert. Wie zuvor erwähnt umfasst jede Razor-Seite eine .cshtml-Datei und eine .cshtml.cs-PageModel-Klassendatei. Die PageModel-Klasse ermöglicht die Trennung von Logik und Darstellung einer Razor-Seite, definiert Seitenhandler für Anforderungen und kapselt Dateneigenschaften und Logik, die auf die Razor-Seite ausgerichtet sind.

  • Pages--Verzeichnisstruktur und Routinganforderungen

    Razor Pages verwendet die Pages-Verzeichnisstruktur als Konvention für Routinganforderungen. Die folgende Tabelle zeigt, wie URLs Dateinamen zugeordnet werden:

    URL Zuordnung zu Razor-Seite
    www.domain.com Pages/Index.cshtml
    www.domain.com/Index Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Unterordner im Pages-Verzeichnis werden verwendet, um Razor-Seiten zu organisieren. Wenn beispielsweise ein Pages/Products-Verzeichnis vorhanden ist, würden die URLs diese Struktur widerspiegeln:

    URL Zuordnung zu Razor-Seite
    www.domain.com/Products Pages/Products/Index.cshtml
    www.domain.com/Products/Index Pages/Products/Index.cshtml
    www.domain.com/Products/Create Pages/Products/Create.cshtml

  • Layout und andere freigegebene Dateien

    Es gibt einige Dateien, die auf mehreren Seiten verwendet werden. Diese Dateien bestimmen gängige Layoutelemente und Seitenimporte. In der folgenden Tabelle ist der Zweck der einzelnen Dateien beschrieben.

    Datei Beschreibung
    _ViewImports.cshtml Diese Datei importiert Namespaces und Klassen, die auf mehreren Seiten verwendet werden.
    _ViewStart.cshtml Hiermit wird das Standardlayout für alle Razor-Seiten angegeben.
    Pages/Shared/_Layout.cshtml Dies ist das Layout, das durch die _ViewStart.cshtml-Datei festgelegt wird. Diese Komponente implementiert allgemeine Layoutelemente für mehrere Seiten.
    Pages/Shared/_ValidationScriptsPartial.cshtml Diese Datei bietet Gültigkeitsprüfungsfunktionalität für alle Seiten.

Erstmaliges Ausführen des Projekts

Führen Sie das Projekt aus, um es in Aktion zu erleben.

  1. Klicken Sie im Explorer mit der rechten Maustaste auf den Ordner ContosoPizza, und wählen Sie In integriertem Terminal öffnen aus. Dadurch wird ein Terminalfenster im Kontext des Projektordners geöffnet.

  2. Geben Sie im Terminalfenster den folgenden Befehl ein:

    dotnet watch

    Dieser Befehl:

    • Erstellt das Projekt.
    • Starten der App
    • Überwachen auf Dateiänderungen und Neustarten der App beim Erkennen von Änderungen

  3. Die IDE fordert Sie auf, die App in einem Browser zu öffnen. Klicken Sie auf In Browser öffnen.

    Tipp

    Sie können die App auch öffnen, indem Sie die URL im Terminalfenster suchen. Halten Sie STRG gedrückt, und klicken Sie auf die URL, um sie in einem Browser zu öffnen.

  4. Vergleichen Sie die gerenderte Startseite mit Pages/Index.cshtml in der IDE:

    • Beachten Sie die Kombination von HTML-, Razor-Syntax- und C#-Code in der Datei.
      • Die Razor-Syntax wird durch @-Zeichen gekennzeichnet.
      • C#-Code ist in @{ }-Blöcken eingeschlossen. Beachten Sie die Anweisungen am Anfang der Datei:
      • Die @page-Anweisung gibt an, dass es sich bei dieser Datei um eine Razor-Seite handelt.
      • Die @model-Anweisung gibt den Modelltyp für die Seite an (in diesem Fall IndexModel, der in Pages/Index.cshtml.cs definiert ist).
    • Überprüfen Sie den C#-Codeblock.
      • Der Code legt den Wert des Title-Elements im ViewData-Wörterbuch auf „Home page“ fest.
      • Das ViewData-Wörterbuch wird verwendet, um Daten zwischen der Razor-Seite und der IndexModel-Klasse zu übergeben.
      • Zur Laufzeit wird der Title-Wert verwendet, um das <title>-Element der Seite festzulegen.

Führen Sie die App im Terminalfenster weiterhin aus. Sie werden sie in den kommenden Lerneinheiten verwenden. Lassen Sie zudem die Browserregisterkarte mit der ausgeführten Contoso Pizza-App geöffnet. Sie nehmen Änderungen an der App vor, und der Browser wird automatisch aktualisiert, um die Änderungen anzuzeigen.

Anpassen der Landing Page

Nehmen Sie einige Änderungen an der Landing Page vor, um sie für die Pizza-App relevanter zu machen.

  1. Ersetzen Sie in Pages/Index.cshtml den Code im C#-Codeblock durch den folgenden Code:

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    Der vorangehende Code:

    • Der Wert des Title-Elements im ViewData-Wörterbuch wird auf "The Home for Pizza Lovers" festgelegt.
    • Die Zeit wird berechnet, die seit der Eröffnung des Geschäfts verstrichen ist.

  2. Ändern Sie den HTML-Code wie folgt:

    • Ersetzen Sie das <h1>-Element durch den folgenden Code:

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • Ersetzen Sie das <p>-Element durch den folgenden Code:

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    Der vorangehende Code:

    • Die Überschrift wird in „Welcome to Contoso Pizza“ geändert.
    • Die Anzahl der Tage wird angezeigt, die seit der Eröffnung des Geschäfts vergangen sind.
      • Das @-Zeichen wird verwendet, um von HTML zur Razor-Syntax zu wechseln.
      • Die Methode Convert.ToInt32 wird verwendet, um die TotalDays-Eigenschaft der timeInBusiness-Variablen in eine ganze Zahl zu konvertieren.
      • Die Convert-Klasse ist Teil des System-Namespace, der automatisch vom <ImplicitUsings>-Element in der Datei ContosoPizza.csproj importiert wird.

  3. Speichern Sie die Datei . Die Browserregisterkarte mit der App wird automatisch aktualisiert, um die Änderungen anzuzeigen. Wenn Sie GitHub Codespaces verwenden, wird die Datei automatisch gespeichert, aber Sie müssen die Browserregisterkarte manuell aktualisieren.

Wichtig

Behalten Sie das Terminalfenster mit dotnet watch bei jedem Speichern Ihrer Datei genau im Auge. Manchmal enthält Ihr Code möglicherweise eine sogenannte nicht unterstützte Bearbeitung. Dies bedeutet, dass der geänderte Code nicht neu kompiliert werden kann, ohne die Anwendung neu zu starten. Wenn Sie zum Neustarten der App aufgefordert werden, drücken Sie y (ja) oder a (immer). Sie können die Anwendung immer durch Drücken von STRG+C im Terminalfenster beenden und dann neu starten, indem Sie dotnet watch erneut ausführen.

Sie haben Ihre ersten Änderungen an einer Razor-Seite vorgenommen. In der nächsten Lerneinheit fügen Sie der App eine neue Seite hinzu, um eine Liste mit Pizzas anzuzeigen.