Ü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 in der main Verzweigung.

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 Containerlaufzeit installiert haben, können Sie die Dev Containers-Erweiterung verwenden, um das Repository in einem Container mit vorinstallierten Tools zu öffnen.

Überprüfen der Arbeit Ihrer Teamkolleg*innen

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 Teamkolleg*innen werden unten beschrieben.

Tipp

Wenden Sie nicht zu viel Zeit für die Überprüfung dieser Änderungen auf. Ihre Teamkolleg*innen 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 ein Ordner "Models" hinzugefügt.
    • Der Ordner „Models“ enthält eine Pizza-Klasse, die eine Pizza darstellt.
  • Dem Projekt wurde ein Datenordner 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 ein Dienstordner 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 registriert (Zeile 10).

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 die SQLite-Erweiterung installiert ist (oder Sie 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 auf der Registerkarte SQLite-Explorer im Explorer-Bereich 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
Seiten/ Enthält die Razor-Seiten und Hilfsdateien. Jede Razor-Seite verfügt über eine CSHTML-Datei und eine .cshtml.csPageModel 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:

  • Razor Pages-Dateien und zugehörige PageModel-Klassendatei

    Razor-Seiten werden im Verzeichnis "Pages" gespeichert. Wie oben erwähnt, verfügt jede Razor-Seite über eine CSHTML-Datei und eine .cshtml.csPageModel 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.

  • Verzeichnisstruktur und Routinganforderungen für Seiten

    Razor Pages verwendet die Verzeichnisstruktur "Pages" 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 Verzeichnis "Seiten " werden verwendet, um Razor-Seiten zu organisieren. Wenn beispielsweise ein Verzeichnis "Pages/Products " 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

    Mit diesem Befehl wird Folgendes erreicht:

    • 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. Wählen Sie "Im Browser öffnen" aus.

    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 Direktive gibt den Modelltyp für die Seite an (in diesem Fall , IndexModelder 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 obige 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 obige 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 Namespaces, 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 das, was man eine grobe Änderung nennt. 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 jederzeit beenden, indem Sie im Terminalfenster zweimal STRG+C drücken und dann erneut starten, indem Sie sie erneut ausführen dotnet watch .

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.