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

• 10 min

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

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ředstavují vstup uživatele. Přidáte také příslušnou obslužnou rutinu stránky.

1. 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 se přidá PizzaListModel vlastnost s názvem NewPizza .
     • NewPizza Pizza je objekt.
   • Pro vlastnost NewPizza je použit atribut BindProperty.
     • Atribut BindProperty se používá k vytvoření vazby NewPizza vlastnosti na stránku Razor. Po vytvoření NewPizza požadavku HTTP POST se vlastnost naplní vstupem uživatele.
   • Vlastnost NewPizza je inicializována na default!.
     • Klíčové default! slovo se používá k inicializaci NewPizza vlastnosti na null. To brání kompilátoru v generování upozornění na NewPizza neinicializaci vlastnosti.

2. 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í, jestli je vstup uživatele platný.
     • Ověřovací pravidla jsou odvozena z atributů (například Required a Range) třídy Pizza v Models\Pizza.cs.
     • Pokud je vstup uživatele neplatný, Page je volána metoda pro opětovné vykreslení stránky.
   • Vlastnost NewPizza slouží k přidání nové pizzy k 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.

3. Soubor uložte. Pokud používáte GitHub Codespaces, soubor se automaticky uloží.

4. Vraťte se do spuštěného dotnet watch terminálu 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ář na stránku Razor Page.

1. Otevřete Pages\PizzaList.cshtml a nahraďte <!-- New Pizza form will go here --> 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 slouží k zobrazení chyb ověření pro celý model.
   • Každé pole formuláře (<input> a <select> elementy) a každý z nich <label> je vázán na odpovídající NewPizza vlastnost pomocí atributu asp-for .
   • Atribut asp-validation-for se používá k zobrazení chyb ověření pro každé pole formuláře.
   • Metoda @Html.DisplayNameFor se používá k zobrazení zobrazovaný název vlastnosti IsGlutenFree . Toto je pomocná metoda Razor, která se používá k zobrazení zobrazovaný název vlastnosti. Provedení popisku tímto způsobem zajistí, že bude políčko zaškrtnuté, když uživatel klikne na popisek.
   • Do formuláře se přidá tlačítko Odeslat s popiskem Create , které odešle data formuláře na server. Když uživatel za běhu vybere toto tlačítko Vytvořit , prohlížeč odešle formulář jako požadavek HTTP POST na server.

2. V 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 se používají k ověření vstupu uživatele před odesláním formuláře na server.

3. Soubor uložte. V prohlížeči se stránka Seznam pizzerií 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ě.

   

4. Zadejte novou pizzu a vyberte tlačítko Vytvořit . Stránka by se měla aktualizovat a zobrazit novou pizzu v seznamu.

Přidání obslužné rutiny stránky pro odstranění pizzy

Na stránku Seznam pizzy je potřeba přidat ještě jeden kus: obslužnou rutinu stránky pro odstranění pizzy. Tlačítka pro odstranění pizzy už jsou na stránce, ale zatím nic neudělají.

1. 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 se OnPostDelete volá, když uživatel klikne na tlačítko Odstranit u pizzy.
     • Stránka ví, že tuto metodu asp-page-handler používá, protože atribut na tlačítku Delete v pages\PizzaList.cshtml je nastaven na Delete.
   • Parametr id slouží k identifikaci pizzy, která se má odstranit.
     • Parametr id je vázán na id hodnotu trasy v adrese URL. K tomu slouží asp-route-id atribut na tlačítku Odstranit v pages\PizzaList.cshtml.
   • Metoda DeletePizza je volána u objektu _service k odstranění pizzy.
   • 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.

2. Soubor uložte. Pokud používáte GitHub Codespaces, soubor se automaticky uloží.

3. 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 odstraňovat pizzy.

Kontrola znalostí