Esercizio - Aggiungere nuovo modulo Pizza

10 minuti

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

Aggiungere un modulo per creare nuove pizze

Per iniziare, aggiungere proprietà alla PizzaListModel classe per rappresentare l'input dell'utente. Si aggiungerà anche il gestore di pagina appropriato.

Aprire Pages\PizzaList.cshtml.cs e aggiungere la proprietà seguente alla PizzaListModel classe :
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
Nel codice precedente:
- Alla classe viene aggiunta una PizzaListModel proprietà denominata NewPizza .
  - NewPizza è un Pizza oggetto .
- L'attributo BindProperty viene applicato alla NewPizza proprietà .
  - L'attributo BindProperty viene usato per associare la NewPizza proprietà alla pagina Razor. Quando viene effettuata una richiesta HTTP POST, la NewPizza proprietà verrà popolata con l'input dell'utente.
- La proprietà NewPizza viene inizializzata su default!.
  - La default! parola chiave viene utilizzata per inizializzare la NewPizza proprietà in null. Ciò impedisce al compilatore di generare un avviso relativo alla NewPizza proprietà non inizializzata.
Aggiungere ora il gestore di pagine per HTTP POST. Nello stesso file aggiungere il metodo seguente alla PizzaListModel classe :
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
Nel codice precedente:
- La ModelState.IsValid proprietà viene utilizzata per determinare se l'input dell'utente è valido.
  - Le regole di convalida vengono dedotte dagli attributi (ad esempio Required e Range) nella Pizza classe in Models\Pizza.cs.
  - Se l'input dell'utente non è valido, viene chiamato il Page metodo per eseguire nuovamente il rendering della pagina.
- La NewPizza proprietà viene utilizzata per aggiungere una nuova pizza all'oggetto _service .
- Il RedirectToAction metodo viene usato per reindirizzare l'utente al Get gestore di pagine, che eseguirà nuovamente il rendering della pagina con l'elenco aggiornato di pizze.
Salva il file. Se si usa GitHub Codespaces, il file viene salvato automaticamente.
Tornare al terminale in esecuzione dotnet watch e premere CTRL+R per ricaricare l'app.

Ora che è presente un gestore di pagine per gestire l'invio del modulo, aggiungere il modulo alla pagina Razor.

Aprire Pages\PizzaList.cshtml e sostituire  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 visualizzare gli errori di convalida per l'intero modello.
Ogni campo modulo (<input> e elementi) e <select> ognuno <label> è associato alla proprietà corrispondente NewPizza usando l'attributo asp-for .
L'attributo asp-validation-for viene usato per visualizzare eventuali errori di convalida per ogni campo modulo.
Il @Html.DisplayNameFor metodo viene utilizzato per visualizzare il nome visualizzato per la IsGlutenFree proprietà . Si tratta di un metodo helper Razor usato per visualizzare il nome visualizzato per una proprietà. In questo modo l'etichetta garantisce 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 inserire i dati del modulo nel server. In fase di esecuzione, quando l'utente seleziona questo pulsante Crea , il browser invia il modulo come richiesta HTTP POST al server.

Nella parte inferiore della pagina aggiungere il codice seguente:
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
In questo modo gli script di convalida lato client vengono inseriti nella pagina. Gli script di convalida lato client vengono usati per convalidare l'input dell'utente prima che il modulo venga inviato al server.
Salva il file. Nel browser la pagina Elenco pizza viene aggiornata con il nuovo modulo. Se si usa GitHub Codespaces, il file viene salvato automaticamente, ma sarà necessario aggiornare manualmente la scheda del browser.
Immettere una nuova pizza e selezionare il pulsante Crea . La pagina deve aggiornare e visualizzare la nuova pizza nell'elenco.

Aggiungere un gestore di pagine per eliminare le pizze

C'è un ultimo pezzo da aggiungere alla pagina Pizza List: un gestore di pagina per eliminare le pizze. I pulsanti per eliminare le pizze sono già presenti nella pagina, ma non fanno ancora nulla.

Tornare a Pages\PizzaList.cshtml.cs, aggiungere il metodo seguente alla PizzaListModel classe :
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
Nel codice precedente:
- Il OnPostDelete metodo viene chiamato quando l'utente fa clic sul pulsante Elimina per una pizza.
  - La pagina sa di usare questo metodo perché l'attributo asp-page-handler nel pulsante Elimina in Pages\PizzaList.cshtml è impostato su Delete.
- Il id parametro viene usato per identificare la pizza da eliminare.
  - Il id parametro è associato al valore di id route nell'URL. Questa operazione viene eseguita con l'attributo asp-route-id sul pulsante Elimina in Pages\PizzaList.cshtml.
- Il DeletePizza metodo viene chiamato sull'oggetto _service per eliminare la pizza.
- Il RedirectToAction metodo viene usato per reindirizzare l'utente al Get gestore di pagine, che eseguirà nuovamente il rendering della pagina con l'elenco aggiornato di pizze.
Salva il file. Se si usa GitHub Codespaces, il file viene salvato automaticamente.
Testare il pulsante Elimina per una pizza. La pagina deve essere aggiornata e la pizza selezionata deve essere rimossa dall'elenco.

Congratulazioni! È stata creata correttamente una pagina Razor che visualizza un elenco di pizze, consente all'utente di aggiungere nuove pizze e consente anche all'utente di eliminare le pizze.

Commenti e suggerimenti

Questa pagina è stata utile?

Esercizio - Aggiungere nuovo modulo Pizza

Verificare le proprie conoscenze

Commenti e suggerimenti