Oefening: een nieuwe Razor-pagina toevoegen

10 minuten

In de vorige les hebt u de broncode voor het Contoso Pizza-project verkregen en vervolgens enkele eenvoudige wijzigingen aangebracht in de startpagina. In deze les voegt u een nieuwe Razor-pagina toe aan het project.

De pagina Pizzalijst maken

Als u een nieuwe Razor-pagina wilt maken, gebruikt u de .NET CLI.

Omdat de terminal wordt geblokkeerd door de dotnet watch opdracht, opent u een andere terminal door met de rechtermuisknop op de map ContosoPizza in de Verkenner te klikken en Openen in geïntegreerde terminal te selecteren.
Voer in het nieuwe terminalvenster de volgende opdracht in:
```
dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages
```
De bovenstaande opdracht:
- Hiermee maakt u deze twee bestanden in de ContosoPizza.Pages naamruimte:
  - PizzaList.cshtml - de Razor-pagina
  - PizzaList.cshtml.cs - de bijbehorende PageModel klas
- Slaat beide bestanden op in de submap Pagina's van het project.
Voeg in Pages/PizzaList.cshtml de volgende code toe in het @{ } codeblok:
```
ViewData["Title"] = "Pizza List 🍕";
```
Hiermee stelt u het <title> element voor de pagina in.
Voeg aan het einde van het bestand de volgende code toe:
```
<h1>Pizza List 🍕</h1>




```
Hiermee voegt u een kop toe aan de pagina, evenals twee tijdelijke aanduidingen voor HTML-opmerkingen voor functionaliteit die u later toevoegt.
Sla het bestand op. Als u GitHub Codespaces gebruikt, wordt het bestand automatisch opgeslagen.
Ga terug naar de terminal die wordt uitgevoerd dotnet watchen selecteer Ctrl+R om de app opnieuw te laden en de nieuwe bestanden te detecteren.

Dit is een goed moment om de pagina te testen, maar de pagina kan niet worden bereikt in de browser omdat deze nog niet is gekoppeld in het navigatiemenu. U koppelt het nu.

Open Pages/Shared/_Layout.cshtml.
In het <ul> element met de navbar-nav klasse (begint op regel 21), let op de <li> elementen die de koppelingen naar de startpagina's en privacy bevatten. Voeg de volgende code toe aan het einde van de lijst, na het <li> element met de privacykoppeling :
```
<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
</li>
```
Hiermee voegt u een koppeling naar de pagina PizzaList toe aan het navigatiemenu.
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.
Selecteer de koppeling Pizzalijst 🍕 in het navigatiemenu. De pagina Pizzalijst wordt weergegeven.

Registreer de Klasse PizzaService bij de afhankelijkheidsinjectiecontainer

De pagina Pizzalijst is afhankelijk van het PizzaService object om de lijst met pizza's op te halen. U gebruikt afhankelijkheidsinjectie om het PizzaService object aan de pagina te geven. Registreer eerst de PizzaService klasse bij de container.

Open Program.cs.
Voeg in de sectie waarmee services aan de container worden toegevoegd de volgende code toe:
```
builder.Services.AddScoped<PizzaService>();
```
Met deze code wordt de PizzaService klasse geregistreerd bij de container voor afhankelijkheidsinjectie. De AddScoped methode geeft aan dat er een nieuw PizzaService object moet worden gemaakt voor elke HTTP-aanvraag. Nu kan de PizzaService pagina worden geïnjecteerd in elke Razor-pagina.
Sla het bestand op. Als u GitHub Codespaces gebruikt, wordt het bestand automatisch opgeslagen.

Een lijst met pizza's weergeven

Laten we de PageModel klasse voor de pagina Pizzalijst wijzigen om de lijst met pizza's op te halen uit het PizzaService object en deze op te slaan in een eigenschap.

Open Pagina's/PizzaList.cshtml.cs.
Voeg de volgende using instructies toe aan het begin van het bestand:
```
using ContosoPizza.Models;
using ContosoPizza.Services;
```
Met deze instructies worden de Pizza typen geïmporteerd die PizzaService u op de pagina gaat gebruiken.
Vervang de hele ContosoPizza.Pages klasse in het PizzaListModel naamruimteblok door de volgende code:
```
public class PizzaListModel : PageModel
{
    private readonly PizzaService _service;
    public IList<Pizza> PizzaList { get;set; } = default!;

    public PizzaListModel(PizzaService service)
    {
        _service = service;
    }

    public void OnGet()
    {
        PizzaList = _service.GetPizzas();
    }
}
```
In de voorgaande code:
- Er wordt een persoonlijke alleen-lezen PizzaService naam _service gemaakt. Deze variabele bevat een verwijzing naar een PizzaService object.
  - Het readonly trefwoord geeft aan dat de waarde van de _service variabele niet kan worden gewijzigd nadat deze is ingesteld in de constructor.
- Er wordt een PizzaList eigenschap gedefinieerd voor het opslaan van de lijst met pizza's.
  - Het IList<Pizza> type geeft aan dat de PizzaList eigenschap een lijst Pizza met objecten bevat.
  - PizzaList wordt geïnitialiseerd om default! aan te geven aan de compiler dat deze later wordt geïnitialiseerd, zodat null-veiligheidscontroles niet vereist zijn.
- De constructor accepteert een PizzaService object.
  - Het PizzaService object wordt geleverd door afhankelijkheidsinjectie.
- Er OnGet wordt een methode gedefinieerd om de lijst met pizza's op te halen uit het PizzaService object en op te slaan in de PizzaList eigenschap.
Aanbeveling

Als u hulp nodig hebt bij het begrijpen van null-veiligheid, raadpleegt u Null-veiligheid in C#.
Sla het bestand op. Als u GitHub Codespaces gebruikt, wordt het bestand automatisch opgeslagen.
Ga terug naar de terminal die wordt uitgevoerd dotnet watch en druk op Ctrl+R om de app opnieuw te laden met de geregistreerde service en de nieuwe constructor voor PizzaListModel.

De lijst met pizza's weergeven

Nu de pagina toegang heeft tot de lijst met pizza's, gebruikt u die lijst om de pizza's op de pagina weer te geven.

Open Pages/PizzaList.cshtml.
Vervang de opmerking  door de volgende code:
```
<table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>
```
In de voorgaande code:
- Er wordt een <table> element gemaakt om de lijst met pizza's weer te geven.
- Er wordt een <thead> element gemaakt voor het opslaan van de tabelkoptekst.
- De @foreach instructie in de <tbody> itereert over de lijst met pizza's.
  - De Model eigenschap verwijst naar het PizzaListModel object dat is gemaakt in het code-behind-bestand.
  - De PizzaList eigenschap verwijst naar de PizzaList eigenschap die is gedefinieerd in het code-behind-bestand.
- Elke iteratie van de @foreach instructie maakt een <tr> element voor het opslaan van de pizzagegevens:
  - Razor-syntaxis wordt gebruikt om de pizzagegevens in de <td> elementen weer te geven. Deze syntaxis wordt gebruikt om de eigenschappen weer te geven van het Pizza object dat is opgeslagen in de pizza variabele.
  - Price is opgemaakt met behulp van C#-tekenreeksinterpolatie.
  - Een ternaire expressie wordt gebruikt om de waarde van de IsGlutenFree eigenschap weer te geven als '✔️' of een lege cel.
  - Er wordt een formulier gemaakt om de pizza te verwijderen.
    - Het asp-page-handler kenmerk geeft aan dat het formulier moet worden verzonden naar de Delete handler in het code-behind-bestand. U maakt die handler in een latere eenheid.
    - Het asp-route-id kenmerk geeft aan dat de Id eigenschap van het Pizza object moet worden doorgegeven aan de Delete handler.
Sla het bestand op. In de browser wordt de pagina Pizzalijst vernieuwd met de lijst met pizza's. Als u GitHub Codespaces gebruikt, wordt het bestand automatisch opgeslagen, maar moet u het browsertabblad handmatig vernieuwen.

Schermopname van de pagina Pizzalijst met de werklijst.

Goed gedaan! U hebt een Razor-pagina gemaakt waarin een lijst met pizza's wordt weergegeven. In de volgende les leert u meer over tag-helpers en pagina-handlers.

Feedback

Is deze pagina nuttig?