Cvičení – přidání nového druhu pizzy

10 min

V této lekci dokončíte stránku Seznam pizzy tak, že přidáte formulář pro vytvoření nových pizz. Přidáte také obslužné rutiny stránek pro zpracování odeslání formuláře a odstranění pizz.

Přidání formuláře pro vytvoření nových pizz

Začněme přidáním vlastností do PizzaListModel třídy, která představuje vstup uživatele. Přidáte také vhodný obslužný modul stránky.

Otevřete Pages\PizzaList.cshtml.cs a přidejte do PizzaListModel třídy následující vlastnost:
```
[BindProperty]
public Pizza NewPizza { get; set; } = default!;
```
V předchozím kódu:
- Do třídy NewPizza se přidá vlastnost s názvem PizzaListModel.
  - NewPizza Pizza je objekt.
- Atribut BindProperty se použije na NewPizza vlastnost.
  - Atribut BindProperty se používá pro svázání vlastnosti NewPizza na stránku Razor. Při vytvoření NewPizza požadavku HTTP POST se vlastnost naplní vstupem uživatele.
- Vlastnost NewPizza je inicializována na default!.
  - Klíčové default! slovo slouží k inicializaci NewPizza vlastnosti na null. Tím zabráníte kompilátoru vygenerovat upozornění na NewPizza vlastnost, která není inicializována.
Teď přidejte obslužnou rutinu stránky pro HTTP POST. Do stejného souboru přidejte do třídy následující metodu PizzaListModel :
```
public IActionResult OnPost()
{
    if (!ModelState.IsValid || NewPizza == null)
    {
        return Page();
    }

    _service.AddPizza(NewPizza);

    return RedirectToAction("Get");
}
```
V předchozím kódu:
- Vlastnost ModelState.IsValid slouží k určení, zda je vstup uživatele platný.
  - Ověřovací pravidla se odvozují z atributů (například Required a Range) třídy Pizza v Models\Pizza.cs.
  - Pokud je vstup uživatele neplatný, metoda Page je volána pro znovuvykreslení stránky.
- Tato NewPizza vlastnost slouží k přidání nové pizzy do objektu _service .
- Metoda RedirectToAction se používá k přesměrování uživatele na obslužnou rutinu Get stránky, která znovu vykreslí stránku s aktualizovaným seznamem pizz.
Uložte soubor. Pokud používáte GitHub Codespaces, soubor se automaticky uloží.
Vraťte se do terminálu spuštěného dotnet watch a stisknutím Ctrl+R aplikaci znovu načtěte.

Teď, když je k dispozici obslužná rutina stránky pro zpracování odeslání formuláře, přidáme formulář do stránky Razor Page.

Otevřete Pages\PizzaList.cshtml a nahraďte  ho následujícím kódem:

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

V předchozím kódu:

Atribut asp-validation-summary se používá k zobrazení chyb ověřování pro celý model.
Každé pole formuláře (<input> a <select> prvky) a každý <label> je vázán na odpovídající NewPizza vlastnost pomocí atributu asp-for .
Atribut asp-validation-for slouží k zobrazení všech chyb ověření pro každé pole formuláře.
Metoda @Html.DisplayNameFor slouží k zobrazení zobrazovaného názvu vlastnosti IsGlutenFree . Toto je pomocná metoda Razor, která se používá k zobrazení zobrazovaného názvu vlastnosti. Tímto způsobem zajistíte, že je zaškrtávací políčko zaškrtnuté, když uživatel klikne na štítek.
Do formuláře se přidá tlačítko pro odeslání s Create popiskem pro odeslání dat formuláře na server. Když uživatel vybere toto tlačítko Vytvořit za běhu, prohlížeč odešle formulář jako požadavek HTTP POST na server.

Do dolní části stránky přidejte následující kód:
```
@section Scripts {
<partial name="_ValidationScriptsPartial" />
}
```
Tím se na stránku vloží ověřovací skripty na straně klienta. Ověřovací skripty na straně klienta slouží k ověření vstupu uživatele před odesláním formuláře na server.
Uložte soubor. V prohlížeči se stránka Seznam pizzy aktualizuje novým formulářem. Pokud používáte GitHub Codespaces, soubor se uloží automaticky, ale budete muset kartu prohlížeče aktualizovat ručně.
Zadejte novou pizzu a vyberte tlačítko Vytvořit . Stránka by se měla aktualizovat a zobrazit novou pizzu v seznamu.

Přidejte obslužnou rutinu stránky pro smazání pizz

Je třeba přidat na stránku Seznamu pizz ještě jednu poslední část: obslužnou rutinu pro odstranění pizz. Tlačítka pro odstranění pizz už jsou na stránce, ale zatím nic nedělají.

Zpět v Pages\PizzaList.cshtml.cs přidejte do třídy následující metodu PizzaListModel :
```
public IActionResult OnPostDelete(int id)
{
    _service.DeletePizza(id);

    return RedirectToAction("Get");
}
```
V předchozím kódu:
- Metoda OnPostDelete se volá, když uživatel klikne na tlačítko Odstranit pro pizzu.
  - Stránka ví, že tuto metodu použije, protože atribut na tlačítku asp-page-handler v Pages\PizzaList.cshtml je nastaven na .
- Parametr id slouží k identifikaci pizzy, která se má odstranit.
  - Parametr id je vázán na id hodnotu trasy v adrese URL. To se provádí s atributem asp-route-id na tlačítku Odstranit v Pages\PizzaList.cshtml.
- Metoda DeletePizza je volána v _service objektu, aby se odstranila pizza.
- Metoda RedirectToAction se používá k přesměrování uživatele na obslužnou rutinu Get stránky, která znovu vykreslí stránku s aktualizovaným seznamem pizz.
Uložte soubor. Pokud používáte GitHub Codespaces, soubor se automaticky uloží.
Otestujte tlačítko Odstranit pro pizzu. Stránka by se měla aktualizovat a vybraná pizza by se měla ze seznamu odebrat.

Gratulujeme! Úspěšně jste vytvořili stránku Razor Page, která zobrazuje seznam pizz, umožňuje uživateli přidávat nové pizzy a také umožňuje uživateli odstranit pizzy.

Váš názor

Byla tato stránka užitečná?

Cvičení – přidání nového druhu pizzy

Kontrola znalostí

Váš názor