Övning – Anpassa projektet

Ditt team har delat upp arbetet för pizzainventeringshanteringsappen. Dina teammedlemmar har skapat ASP.NET Core-webbappen åt dig, och de har redan skapat en tjänst för att läsa och skriva pizzadata till en databas. Du har tilldelats att arbeta på sidan Pizzalista, som visar en lista över pizzor och gör att du kan lägga till nya pizzor i databasen. Vi börjar med att ta en rundtur i projektet för att förstå hur det organiseras.

Hämta projektfilerna

Om du använder GitHub Codespaces öppnar du bara lagringsplatsen i webbläsaren, väljer Kod och skapar sedan ett nytt kodområde på grenen main .

Om du inte använder GitHub Codespaces hämtar du projektfilerna och öppnar dem i Visual Studio Code med följande steg:

1. Öppna ett kommandogränssnitt och klona projektet från GitHub med hjälp av kommandoraden:

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

2. Gå till mslearn-create-razor-pages-aspnet-core katalogen och öppna projektet i Visual Studio Code:

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

Granska dina medarbetares arbete

Låt oss ta en stund att bekanta oss med den befintliga koden i mappen ContosoPizza. Projektet är en ASP.NET Core-webbapp som skapats med kommandot dotnet new webapp . De ändringar som dina teammedlemmar har gjort beskrivs nedan.

• En modellmapp har lagts till i projektet.
  • Modellmappen innehåller en Pizza klass som representerar en pizza.
• En datamapp har lagts till i projektet.
  • Datamappen innehåller en PizzaContext klass som representerar databaskontexten. Den ärver från DbContext klassen i Entity Framework Core. Entity Framework Core är en objektrelationsmappare (ORM) som gör det enklare att arbeta med databaser.
• En tjänstmapp har lagts till i projektet.
  • Mappen Services innehåller en PizzaService klass som visar metoder för att lista och lägga till pizzor.
  • Klassen PizzaService använder PizzaContext klassen för att läsa och skriva pizzor till databasen.
  • Klassen är registrerad för beroendeinmatning i Program.cs (rad 10).

Entity Framework Core genererade också några saker:

• En migreringsmapp genererades.
  • Migreringsmappen innehåller kod för att skapa databasschemat.
• SQLite-databasfilen ContosoPizza.db genererades.
  • Om du har SQLite-tillägget installerat (eller om du använder GitHub Codespaces) kan du visa databasen genom att högerklicka på filen och välja Öppna databas. Databasschemat visas på fliken SQLite Explorer i explorer-fönstret.

Granska projektstrukturen för Razor Pages

Allt annat i projektet är oförändrat från när projektet skapades. I följande tabell beskrivs projektstrukturen som genererades av dotnet new webapp kommandot.

Andra anmärkningsvärda observationer:

• Razor-sidfiler och deras kopplade PageModel klassfil

  Razor-sidor lagras i katalogen Pages . Som nämnts ovan har varje Razor-sida en .cshtml-fil och en .cshtml.csPageModel klassfil. Klassen PageModel tillåter separation av en Razor-sidas logik och presentation, definierar sidhanterare för begäranden och kapslar in dataegenskaper och logik som är begränsad till dess Razor-sida.

• Sidkatalogens struktur och routningsbegäranden

  Razor Pages använder katalogstrukturen Pages som konvention för routningsbegäranden. I följande tabell visas hur URL:er mappas till filnamn:

  webbadress	Mappa till Razor-sida
  www.domain.com	Sidor/Index.cshtml
  www.domain.com/Index	Sidor/Index.cshtml
  www.domain.com/Privacy	Sidor/Privacy.cshtml
  www.domain.com/Error	Sidor/Error.cshtml

  Undermappar i katalogen Pages används för att organisera Razor-sidor. Om det till exempel fanns en pages/products-katalog skulle URL:erna återspegla den strukturen:

  webbadress	Mappa till Razor-sida
  www.domain.com/Products	Sidor/produkter/Index.cshtml
  www.domain.com/Products/Index	Sidor/produkter/Index.cshtml
  www.domain.com/Products/Create	Sidor/produkter/Create.cshtml

• Layout och andra delade filer

  Det finns flera filer som delas på flera sidor. De här filerna bestämmer vanliga layoutelement och sidimporter. I följande tabell beskrivs syftet med varje fil.

  Fil	beskrivning
  _ViewImports.cshtml	Importerar namnrymder och klasser som används på flera sidor.
  _ViewStart.cshtml	Anger standardlayouten för alla Razor-sidor.
  Sidor/delad/_Layout.cshtml	Det här är den layout som anges av _ViewStart.cshtml filen. Implementerar vanliga layoutelement på flera sidor.
  Sidor/delad/_ValidationScriptsPartial.cshtml	Ger valideringsfunktioner till alla sidor.

Kör projektet för första gången

Nu ska vi köra projektet så att vi kan se det i praktiken.

1. Högerklicka på mappen ContosoPizza i Utforskaren och välj Öppna i integrerad terminal. Då öppnas ett terminalfönster i projektmappens kontext.

2. I terminalfönstret anger du följande kommando:

   dotnet watch
   

   Det här kommandot:

   • Skapar projektet.
   • Startar appen.
   • Söker efter filändringar och startar om appen när den identifierar en ändring.

3. IDE uppmanar dig att öppna appen i en webbläsare. Klicka på Öppna i webbläsare.

   Dricks

   Du kan också öppna appen genom att hitta URL:en i terminalfönstret. Håll ned Ctrl och klicka på URL:en för att öppna den i en webbläsare.

4. Jämför den renderade startsidan med Pages/Index.cshtml i IDE:

   • Observera kombinationen av HTML-, Razor-syntax och C#-kod i filen.
     • Razor-syntaxen betecknas med @ tecken.
     • C#-kod omges av @{ } block. Anteckna direktiven överst i filen:
     • Direktivet @page anger att den här filen är en Razor-sida.
     • Direktivet @model anger modelltypen för sidan (i det här fallet IndexModel, som definieras i Sidor/Index.cshtml.cs).
   • Granska C#-kodblocket.
     • Koden anger värdet för objektet i TitleViewData ordlistan till "Startsida".
     • Ordlistan ViewData används för att skicka data mellan Razor-sidan och IndexModel klassen.
     • Vid körning Title används värdet för att ange sidans <title> element.

Låt appen vara igång i terminalfönstret. Vi använder den i de kommande lektionerna. Lämna webbläsarfliken med contoso Pizza-appen som körs också. Du kommer att göra ändringar i appen och webbläsaren uppdateras automatiskt för att visa ändringarna.

Anpassa landningssidan

Låt oss göra några ändringar på landningssidan för att göra den mer relevant för pizzaappen.

1. I Pages/Index.cshtml ersätter du koden i C#-kodblocket med följande kod:

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

   Koden ovan:

   • Anger värdet Title för objektet i ViewData ordlistan till "The Home for Pizza Lovers".
   • Beräknar hur lång tid som har gått sedan verksamheten öppnades.

2. Ändra HTML enligt följande:

   • Ersätt elementet <h1> med följande kod:

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

   • Ersätt elementet <p> med följande kod:

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

   Koden ovan:

   • Ändrar rubriken till "Välkommen till Contoso Pizza".
   • Visar antalet dagar som har passerat sedan verksamheten öppnades.
     • Tecknet @ används för att växla från HTML till Razor-syntax.
     • Metoden Convert.ToInt32 används för att konvertera TotalDays egenskapen för variabeln timeInBusiness till ett heltal.
     • Klassen Convert är en del av System namnområdet, som importeras automatiskt av elementet <ImplicitUsings> i filen ContosoPizza.csproj .

3. Spara filen. Webbläsarfliken med appen uppdateras automatiskt för att visa ändringarna. Om du använder GitHub Codespaces sparas filen automatiskt, men du måste uppdatera webbläsarfliken manuellt.

Du har gjort dina första ändringar på en Razor-sida! I nästa lektion lägger du till en ny sida i appen för att visa en lista med pizzor.