Oefening: het project aanpassen

  • 12 minuten

Uw team heeft het werk voor de pizza-voorraadbeheer-app gesplitst. Uw teamleden hebben de ASP.NET Core-web-app voor u gemaakt en ze hebben al een service gemaakt voor het lezen en schrijven van pizzagegevens naar een database. U bent toegewezen om te werken op de pagina Pizzalijst, waarin een lijst met pizza's wordt weergegeven en waarmee u nieuwe pizza's kunt toevoegen aan de database. We beginnen met het volgen van een rondleiding door het project om te begrijpen hoe het is georganiseerd.

Notitie

Deze module maakt gebruik van de .NET CLI (Opdrachtregelinterface) en Visual Studio Code voor lokale ontwikkeling. Nadat u deze module hebt voltooid, kunt u de concepten toepassen met Behulp van Visual Studio (Windows) of verdere ontwikkeling met behulp van Visual Studio Code (Windows, Linux en macOS).

De projectbestanden verkrijgen

Als u GitHub Codespaces gebruikt, opent u de opslagplaats in de browser, selecteert u Code en maakt u vervolgens een nieuwe coderuimte op de main vertakking.

Als u GitHub Codespaces niet gebruikt, haalt u de projectbestanden op en opent u deze in Visual Studio Code met de volgende stappen:

  1. Open een opdrachtshell en kloon het project vanuit GitHub met behulp van de opdrachtregel:

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

  2. Navigeer naar de mslearn-create-razor-pages-aspnet-core map en open het project in Visual Studio Code:

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

Tip

Als u een compatibele containerruntime hebt geïnstalleerd, kunt u de extensie Dev Containers gebruiken om de opslagplaats te openen in een container waarop de hulpprogramma's vooraf zijn geïnstalleerd.

Het werk van uw teamleden beoordelen

Laten we even de tijd nemen om vertrouwd te raken met de bestaande code in de map ContosoPizza. Het project is een ASP.NET Core-web-app die is gemaakt met behulp van de dotnet new webapp opdracht. De wijzigingen die uw teamleden hebben aangebracht, worden hieronder beschreven.

Tip

Besteed niet te veel tijd aan het controleren van deze wijzigingen. Uw teamleden hebben het werk al gedaan om de database en de service te maken voor het lezen en schrijven van pizza's naar de database, maar ze hebben geen wijzigingen aangebracht in de gebruikersinterface. U gaat een gebruikersinterface bouwen die hun dienst in de volgende les gebruikt.

  • Er is een map Modellen toegevoegd aan het project.
    • De modelmap bevat een Pizza klasse die een pizza vertegenwoordigt.
  • Er is een gegevensmap toegevoegd aan het project.
    • De gegevensmap bevat een PizzaContext klasse die de databasecontext vertegenwoordigt. De klasse wordt overgenomen van de DbContext klasse in Entity Framework Core. Entity Framework Core is een object-relationele mapper (ORM) waarmee u gemakkelijker met databases kunt werken.
  • Er is een Servicesmap toegevoegd aan het project.
    • De map 'services' bevat een PizzaService klasse die methoden blootlegt om pizza's op te sommen en toe te voegen.
    • De PizzaService klasse gebruikt de PizzaContext klasse om pizza's naar de database te lezen en te schrijven.
    • De klasse is geregistreerd voor afhankelijkheidsinjectie in Program.cs (regel 10).

Entity Framework Core heeft ook enkele dingen gegenereerd:

  • Er is een map Migraties gegenereerd.
    • De map migraties bevat code voor het maken van het databaseschema.
  • Het SQLite-databasebestand ContosoPizza.db is gegenereerd.
    • Als u de SQLite-extensie hebt geïnstalleerd (of als u GitHub Codespaces gebruikt), kunt u de database weergeven door met de rechtermuisknop op het bestand te klikken en Open Database te selecteren. Het databaseschema wordt weergegeven op het tabblad SQLite Explorer van het deelvenster Explorer.

De Razor Pages-projectstructuur controleren

Al het andere in het project is ongewijzigd van het moment waarop het project is gemaakt. In de volgende tabel wordt de projectstructuur beschreven die is gegenereerd door de dotnet new webapp opdracht.

Name Beschrijving
Bladzijden/ Bevat Razor Pages en ondersteunende bestanden. Elke Razor-pagina heeft een .cshtml-bestand en een .cshtml.csPageModel klassebestand.
wwwroot/ Bevat statische assetbestanden zoals HTML, JavaScript en CSS.
ContosoPizza.csproj Bevat metagegevens van de projectconfiguratie, zoals afhankelijkheden.
Program.cs Fungeert als het toegangspunt van de app en configureert het app-gedrag, zoals routering.

Andere opmerkelijke waarnemingen:

  • Razor-paginabestanden en hun gekoppelde PageModel klassebestand

    Razor-pagina’s worden opgeslagen in map Pagina's. Zoals hierboven vermeld, heeft elke Razor-pagina een .cshtml-bestand en een .cshtml.csPageModel klassebestand. De PageModel-klasse maakt de scheiding tussen de logica en presentatie van een Razor-pagina mogelijk, kan paginahandlers definiëren voor aanvragen, en gegevens en logica encapsuleren die specifiek zijn voor de bijbehorende Razor-pagina.

  • De mapstructuur en routeringsaanvragen van Pagina's

    Razor Pages gebruikt de mapstructuur Pages als de conventie voor routeringsaanvragen. In de volgende tabel ziet u hoe URL's worden toegewezen aan bestandsnamen:

    URL Kaarten naar Razor-pagina
    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

    Submappen in de map Pagina's worden gebruikt om Razor-pagina's te organiseren. Als er bijvoorbeeld een map Pagina's/Producten is, zouden de URL's die structuur volgen.

    URL Kaarten naar Razor-pagina
    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

  • Indeling en andere gedeelde bestanden

    Er zijn verschillende bestanden die op meerdere pagina's worden gedeeld. Deze bestanden bepalen algemene indelingselementen en pagina-importbewerkingen. In de volgende tabel wordt het doel van elk bestand beschreven.

    Bestand Beschrijving
    _ViewImports.cshtml Hiermee importeert u naamruimten en klassen die op meerdere pagina's worden gebruikt.
    _ViewStart.cshtml Hiermee geeft u de standaardindeling voor alle Razor-pagina's.
    Pages/Shared/_Layout.cshtml Dit is de indeling die door het _ViewStart.cshtml bestand is opgegeven. Implementeert algemene indelingselementen op meerdere pagina's.
    Pages/Shared/_ValidationScriptsPartial.cshtml Biedt validatiefunctionaliteit voor alle pagina's.

Het project de eerste keer uitvoeren

We gaan het project uitvoeren, zodat we het in actie kunnen zien.

  1. Klik met de rechtermuisknop op de map ContosoPizza in de Verkenner en selecteer Openen in geïntegreerde terminal. Hiermee opent u een terminalvenster in de context van de projectmap.

  2. Voer in het terminalvenster de volgende opdracht in:

    dotnet watch

    Deze opdracht:

    • Bouwt het project.
    • Start de app.
    • Controleert op bestandswijzigingen en start de app opnieuw op wanneer er een wijziging wordt gedetecteerd.

  3. De IDE vraagt u om de app in een browser te openen. Klik op In browser openen.

    Tip

    U kunt de app ook openen door de URL in het terminalvenster te vinden. Houd Ctrl ingedrukt en klik op de URL om deze in een browser te openen.

  4. Vergelijk de weergegeven startpagina met Pages/Index.cshtml in de IDE:

    • Bekijk de combinatie van HTML-, Razor-syntaxis en C#-code in het bestand.
      • Razor-syntaxis wordt aangeduid met @ tekens.
      • C#-code wordt in @{ } blokken geplaatst. Noteer de instructies boven aan het bestand:
      • De @page richtlijn geeft aan dat dit bestand een Razor-pagina is.
      • In @model de richtlijn wordt het modeltype voor de pagina opgegeven (in dit geval, IndexModelwat is gedefinieerd in Pagina's/Index.cshtml.cs).
    • Controleer het C#-codeblok.
      • Met de code wordt de waarde van het Title item in de ViewData woordenlijst ingesteld op 'Startpagina'.
      • De ViewData woordenlijst wordt gebruikt om gegevens door te geven tussen de Razor-pagina en de IndexModel klasse.
      • Tijdens runtime wordt de Title waarde gebruikt om het element van <title> de pagina in te stellen.

Laat de app actief in het terminalvenster. We gebruiken deze in de komende lessen. Laat het browsertabblad met de actieve Contoso Pizza-app ook open staan. U brengt wijzigingen aan in de app en de browser wordt automatisch vernieuwd om de wijzigingen weer te geven.

De landingspagina aanpassen

Laten we een paar wijzigingen aanbrengen in de landingspagina om deze relevanter te maken voor de pizza-app.

  1. Vervang in Pages/Index.cshtml de code in het C#-codeblok door de volgende code:

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

    De voorgaande code:

    • Hiermee stelt u de waarde van het Title item in de ViewData woordenlijst in op 'The Home for Pizza Lovers'.
    • Berekent de hoeveelheid tijd die is verstreken sinds het bedrijf is geopend.

  2. Wijzig de HTML als volgt:

    • Vervang het <h1> element door de volgende code:

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

    • Vervang het <p> element door de volgende code:

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

    De voorgaande code:

    • Hiermee wijzigt u de kop in 'Welkom bij Contoso Pizza'.
    • Geeft het aantal dagen weer dat is verstreken sinds het bedrijf is geopend.
      • Het @ teken wordt gebruikt om over te schakelen van HTML naar Razor-syntaxis.
      • De Convert.ToInt32 methode wordt gebruikt om de TotalDays eigenschap van de timeInBusiness variabele te converteren naar een geheel getal.
      • De Convert klasse maakt deel uit van de System naamruimte, die automatisch wordt geïmporteerd door het <ImplicitUsings> element in het bestand ContosoPizza.csproj .

  3. Sla het bestand op. Het browsertabblad met de app wordt automatisch vernieuwd om de wijzigingen weer te geven. Als u GitHub Codespaces gebruikt, wordt het bestand automatisch opgeslagen, maar moet u het browsertabblad handmatig vernieuwen.

Belangrijk

Houd het terminalvenster goed in de gaten elke keer dat dotnet watch je het bestand opslaat. Het kan soms voorkomen dat uw code wat het een onbeleefde bewerking noemt, bevat. Dit betekent dat de code die u hebt gewijzigd, niet opnieuw kan worden gecompileerd zonder de toepassing opnieuw te starten. Als u wordt gevraagd de app opnieuw te starten, druk op y (ja) of a (altijd). U kunt de toepassing altijd stoppen door tweemaal op Ctrl+C te drukken

U hebt uw eerste wijzigingen aangebracht in een Razor-pagina. In de volgende les voegt u een nieuwe pagina toe aan de app om een lijst met pizza's weer te geven.