Esercizio - Aggiungere una nuova pagina Razor

  • 10 minuti

Nell'unità precedente è stato ottenuto il codice sorgente per il progetto Contoso Pizza e sono state apportate alcune semplici modifiche alla home page. In questa unità si aggiungerà una nuova pagina Razor al progetto.

Creare la pagina Pizza List

Per creare una nuova pagina Razor, si userà l'interfaccia della riga di comando di .NET.

  1. Poiché il terminale è bloccato dal dotnet watch comando, aprire un altro terminale facendo clic con il pulsante destro del mouse sulla cartella ContosoPizza in Esplora risorse e scegliere Apri nel terminale integrato.

  2. Nella nuova finestra del terminale immettere il comando seguente:

    dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages

    Il comando precedente:

    • Crea questi due file nello spazio dei nomi ContosoPizza.Pages:
      • PizzaList.cshtml - la pagina di Razor
      • PizzaList.cshtml.cs : classe associata PageModel
    • Archivia entrambi i file nella sottodirectory Pages del progetto.

  3. In Pages/PizzaList.cshtml aggiungere il codice seguente all'interno del blocco di @{ } codice:

    ViewData["Title"] = "Pizza List 🍕";

    In questo modo viene impostato l'elemento <title> per la pagina.

  4. Alla fine del file aggiungere il codice seguente:

    <h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

    In questo modo viene aggiunta un'intestazione alla pagina, nonché due segnaposto di commento HTML per le funzionalità che verranno aggiunte in un secondo momento.

  5. Salvare il file. Se si usa GitHub Codespaces, il file viene salvato automaticamente.

  6. Tornare al terminale che esegue dotnet watche selezionare CTRL+R per ricaricare l'app e rilevare i nuovi file.

Aggiungere la pagina Pizza List al menu di spostamento

Questo sarebbe un buon momento per testare la pagina, ma la pagina non può essere raggiunta nel browser perché non è ancora collegata nel menu di spostamento. Verrà collegata ora.

  1. Aprire Pages/Shared/_Layout.cshtml.

  2. Nell'elemento <ul> con la navbar-nav classe (inizia alla riga 21), annotare gli <li> elementi che contengono i collegamenti alle pagine Home e Privacy . Aggiungere il codice seguente alla fine dell'elenco, dopo l'elemento contenente il <li> collegamento Privacy :

    <li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
</li>

    Verrà aggiunto un collegamento alla pagina PizzaList al menu di spostamento.

  3. Salvare il file. La scheda del browser con l'app viene aggiornata automaticamente per mostrare le modifiche. Se si usa GitHub Codespaces, il file viene salvato automaticamente, ma è necessario aggiornare manualmente la scheda del browser.

  4. Selezionare il collegamento Elenco Pizza 🍕 nel menu di navigazione. Viene visualizzata la pagina Pizza List.

Registrare la classe PizzaService con il contenitore di inserimento delle dipendenze

La pagina Pizza List dipende dall'oggetto PizzaService per recuperare l'elenco delle pizze. Si userà l'inserimento delle dipendenze per fornire l'oggetto PizzaService alla pagina. Registrare prima di tutto la classe PizzaService con il contenitore.

  1. Aprire Program.cs.

  2. Nella sezione che aggiunge servizi al contenitore aggiungere il codice seguente:

    builder.Services.AddScoped<PizzaService>();

    Questo codice registra la classe PizzaService con il contenitore di inserimento delle dipendenze. Il metodo AddScoped indica che deve essere creato un nuovo oggetto PizzaService per ogni richiesta HTTP. Ora l'oggetto PizzaService può essere inserito in qualsiasi pagina Razor.

  3. Salvare il file. Se si usa GitHub Codespaces, il file viene salvato automaticamente.

Visualizzare un elenco di pizze

Modificare la classe PageModel per la pagina Pizza List per recuperare l'elenco di pizze dall'oggetto PizzaService e archiviarlo in una proprietà.

  1. Aprire Pages/PizzaList.cshtml.cs.

  2. Aggiungere le istruzioni using seguenti all'inizio del file:

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Queste istruzioni importano i tipi Pizza e PizzaService che verranno usati nella pagina.

  3. All'interno del blocco dello spazio dei nomi ContosoPizza.Pages sostituire l'intera classe PizzaListModel con il codice seguente:

    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();
    }
}

    Nel codice precedente:

    • Viene creato un oggetto PizzaService privato di sola lettura denominato _service. Questa variabile conterrà un riferimento a un oggetto PizzaService.
      • La parola chiave readonly indica che il valore della variabile _service non può essere modificato dopo che è stato impostato nel costruttore.
    • Viene definita una proprietà PizzaList per contenere l'elenco delle pizze.
      • Il tipo IList<Pizza> indica che la proprietà PizzaList conterrà un elenco di oggetti Pizza.
      • PizzaList viene inizializzato con default! per indicare al compilatore che verrà inizializzato in un secondo momento, quindi non sono necessari controlli di sicurezza Null.
    • Il costruttore accetta un oggetto PizzaService.
      • L'oggetto PizzaService viene fornito dall'inserimento delle dipendenze.
    • Viene definito un metodo OnGet per recuperare l'elenco di pizze dall'oggetto PizzaService e archiviarlo nella proprietà PizzaList.

    Suggerimento

    Per informazioni sulla sicurezza dei valori Null, vedere Sicurezza Null in C#.

  4. Salvare il file. Se si usa GitHub Codespaces, il file viene salvato automaticamente.

  5. Tornare al terminale che esegue dotnet watch e premere CTRL+R per ricaricare l'app con il servizio registrato e il nuovo costruttore per PizzaListModel.

Visualizzare l'elenco delle pizze

Ora che la pagina ha accesso all'elenco delle pizze, si userà tale elenco per visualizzare le pizze nella pagina.

  1. Aprire Pages/PizzaList.cshtml.

  2. Sostituire il commento <!-- List of pizzas will go here --> con il codice seguente:

    <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>

    Nel codice precedente:

    • Viene creato un elemento <table> per visualizzare l'elenco delle pizze.
    • Viene creato un elemento <thead> per contenere l'intestazione della tabella.
    • L'istruzione @foreach all'interno dell'oggetto <tbody> scorre l'elenco delle pizze.
      • La proprietà Model fa riferimento all'oggetto PizzaListModel creato nel file code-behind.
      • La proprietà PizzaList fa riferimento alla proprietà PizzaList definita nel file code-behind.
    • Ogni iterazione dell'istruzione @foreach crea un elemento <tr> per contenere i dati della pizza:
      • La sintassi Razor viene usata per visualizzare i dati della pizza negli elementi <td>. Questa sintassi viene usata per visualizzare le proprietà dell'oggetto Pizza archiviato nella variabile pizza.
      • Price viene formattato usando l'interpolazione di stringhe C#.
      • Un'espressione ternaria viene usata per visualizzare il valore della proprietà IsGlutenFree come "✔️" o una cella vuota.
      • Viene creato un modulo per eliminare la pizza.
        • L'attributo asp-page-handler indica che il modulo deve essere inviato al gestore Delete nel file code-behind. Il gestore verrà creato in un'unità successiva.
        • L'attributo asp-route-id indica che la proprietà Id dell'oggetto Pizza deve essere passata al gestore Delete.

  3. Salvare il file. Nel browser, la pagina Pizza List viene aggiornata con l'elenco delle pizze. Se si usa GitHub Codespaces, il file viene salvato automaticamente, ma è necessario aggiornare manualmente la scheda del browser.

Screenshot della pagina Pizza List con l'elenco funzionante.

Ottimo lavoro. È stata creata una pagina Razor che visualizza un elenco di pizze. Nell'unità successiva verranno illustrati gli helper per i tag e i gestori di pagine.