Esercizio - Aggiungere un nuovo modulo pizza

• 10 minuti

In questa unità verrà completata la pagina Elenco pizza aggiungendo un modulo per creare nuove pizze. Si aggiungeranno anche gestori di pagine per gestire l'invio del modulo e l'eliminazione delle pizze.

Aggiungere un modulo per creare nuove pizze

Iniziamo aggiungendo proprietà alla classe PizzaListModel per rappresentare l'input dell'utente. Si aggiungerà anche il gestore di pagina appropriato.

1. Aprire Pages\PizzaList.cshtml.cs e aggiungere la seguente proprietà alla classe PizzaListModel:

   [BindProperty]
   public Pizza NewPizza { get; set; } = default!;
   

   Nel codice precedente:

   • Alla classe PizzaListModel viene aggiunta una proprietà denominata NewPizza.
     • NewPizza è un oggetto Pizza.
   • Viene applicato l'attributo BindProperty alla proprietà NewPizza.
     • L'attributo BindProperty è usato per associare la proprietà NewPizza alla pagina Razor. Quando viene effettuata una richiesta HTTP POST, la proprietà NewPizza viene popolata con l'input dell'utente.
   • La proprietà NewPizza viene inizializzata su default!.
     • La parola chiave default! viene usata per inizializzare la proprietà NewPizza in null. In questo modo si evita che il compilatore generi un avviso sull’inizializzazione annullata della proprietà NewPizza.

2. Ora aggiungere il gestore di pagina per HTTP POST. Nello stesso file, aggiungere il seguente metodo alla classe PizzaListModel:

   public IActionResult OnPost()
   {
       if (!ModelState.IsValid || NewPizza == null)
       {
           return Page();
       }
   
       _service.AddPizza(NewPizza);
   
       return RedirectToAction("Get");
   }
   

   Nel codice precedente:

   • La proprietà ModelState.IsValid viene usata per determinare se l'input dell'utente è valido.
     • Le regole di convalida sono dedotte dagli attributi (come Required e Range) della classe Pizza inModels\Pizza.cs.
     • Se l'input dell'utente non è valido, viene chiamato il metodo Page per eseguire di nuovo il rendering della pagina.
   • La proprietà NewPizza viene usata per aggiungere una nuova pizza all'oggetto _service.
   • Il metodo RedirectToAction è usato per reindirizzare l'utente al gestore di pagina Get, che eseguirà di nuovo il rendering della pagina con l'elenco aggiornato delle pizze.

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

4. Tornare al terminale che esegue dotnet watch e premere CTRL+R per ricaricare l'applicazione.

Ora che esiste un gestore di pagina per gestire l'invio del modulo, aggiungiamo il modulo alla pagina Razor.

1. Aprire Pages\PizzaList.cshtml e sostituire <!-- New Pizza form will go here --> con il codice seguente:

   <form method="post">
   <div asp-validation-summary="ModelOnly" class="text-danger"></div>
   <div class="form-group">
       <label asp-for="NewPizza.Name" class="control-label"></label>
       <input asp-for="NewPizza.Name" class="form-control" />
       <span asp-validation-for="NewPizza.Name" class="text-danger"></span>
   </div>
   <div class="form-group">
       <label asp-for="NewPizza.Size" class="control-label"></label>
       <select asp-for="NewPizza.Size" class="form-control" id="PizzaSize">
           <option value="">-- Select Size --</option>
           <option value="Small">Small</option>
           <option value="Medium">Medium</option>
           <option value="Large">Large</option>
       </select>
       <span asp-validation-for="NewPizza.Size" class="text-danger"></span>
   </div>
   <div class="form-group form-check">
       <label class="form-check-label">
           <input class="form-check-input" asp-for="NewPizza.IsGlutenFree" /> @Html.DisplayNameFor(model => model.NewPizza.IsGlutenFree)
       </label>
   </div>
   <div class="form-group">
       <label asp-for="NewPizza.Price" class="control-label"></label>
       <input asp-for="NewPizza.Price" class="form-control" />
       <span asp-validation-for="NewPizza.Price" class="text-danger"></span>
   </div>
   <div class="form-group">
       <input type="submit" value="Create" class="btn btn-primary" />
   </div>
   </form>
   

   Nel codice precedente:

   • L'attributo asp-validation-summary viene usato per mostrare gli errori di convalida per l'intero modello.
   • Ogni campo del modulo (elementi <input> e <select>) e ogni elemento <label> è associato alla proprietà NewPizza tramite l'attributo asp-for.
   • L'attributo asp-validation-for viene usato per visualizzare gli eventuali errori di convalida per ogni campo del modulo.
   • Il metodo @Html.DisplayNameFor viene usato per mostrare il nome visualizzato della proprietà IsGlutenFree. Si tratta di un metodo helper di Razor usato per mostrare il nome visualizzato di una proprietà. Questa scelta assicura che la casella di controllo sia selezionata quando l'utente fa clic sull'etichetta.
   • Al modulo viene aggiunto un pulsante di invio con etichetta Create per inviare i dati del modulo al server. In fase di esecuzione, quando l'utente seleziona questo pulsante Create, il browser invia il modulo come richiesta HTTP POST al server.

2. Nella parte inferiore della pagina, aggiungere il seguente codice:

   @section Scripts {
   <partial name="_ValidationScriptsPartial" />
   }
   

   Questa opzione inserisce gli script di convalida lato client nella pagina. Gli script di convalida lato client sono usati per convalidare l'input dell'utente prima che il modulo venga inviato al server.

3. Salvare il file. Nel browser, la pagina Elenco pizze viene aggiornata con il nuovo modulo. Se si usa GitHub Codespaces, il file viene salvato automaticamente, ma è necessario aggiornare manualmente la scheda del browser.

   

4. Inserire una nuova pizza e selezionare il pulsante Crea. La pagina si aggiorna la nuova pizza viene mostrata nell'elenco.

Aggiungere un gestore di pagina per eliminare le pizze

C'è un ultimo tassello da aggiungere alla pagina Elenco pizze: un gestore di pagina per eliminare le pizze. I pulsanti destinati all'eliminazione delle pizze sono già presenti nella pagina, ma al momento non sono associati a nessuna funzione.

1. In Pages\PizzaList.cshtml.cs, aggiungere il seguente metodo alla classe PizzaListModel:

   public IActionResult OnPostDelete(int id)
   {
       _service.DeletePizza(id);
   
       return RedirectToAction("Get");
   }
   

   Nel codice precedente:

   • Il metodo OnPostDelete viene chiamato quando l'utente fa clic sul pulsante Elimina per una pizza.
     • La pagina sa di dovere usare questo metodo perché l'attributo asp-page-handler del pulsante Elimina in Pages\PizzaList.cshtml è impostato su Delete.
   • Il parametro id viene usato per identificare la pizza da eliminare.
     • Il parametro id è associato al valore della route id nell'URL. Questa operazione viene eseguita con l'attributo asp-route-id del pulsante Elimina in Pages\PizzaList.cshtml.
   • Il metodo DeletePizza viene chiamato nell'oggetto _service per eliminare la pizza.
   • Il metodo RedirectToAction è usato per reindirizzare l'utente al gestore di pagina Get, che eseguirà di nuovo il rendering della pagina con l'elenco aggiornato delle pizze.

2. Salvare il file. Se si utilizza GitHub Codespaces, il file viene salvato automaticamente.

3. Testare il tasto Elimina per una pizza. La pagina si aggiorna e la pizza selezionata viene rimossa dall'elenco.

Congratulazioni! È stata creata con successo una pagina di Razor che visualizza un elenco di pizze e consente all'utente di aggiungere nuove pizze oltre che di eliminarle.

Verifica le tue conoscenze