Cvičení – zpracování odeslání formuláře pro pizzu

7 min

V této jednotce přidáte obslužnou rutinu stránky HTTP POST pro formulář stránky Pizza Razor. Nakonec si projdete model a jeho datové poznámky, které řídí ověřování na straně klienta i Pizza serveru.

Prozkoumání struktury Razor Pages `PageModel` třídy

Otevřete soubor třídy Pages/Pizza.cshtml.cs. PageModel Možná si pamatujete, že když jste vytvořili novou stránku Razor Page s názvem Pizza, vygeneroval se soubor třídy s názvem PageModel Pizza.cshtml.cs. Prozkoumejte jeho obsah. Obsahuje následující kód jazyka C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPagesPizza.Pages
{
    public class PizzaModel : PageModel
    {
        public void OnGet()
        {
        }
    }
}

Aktualizace obslužné rutiny stránky HTTP Get pro zobrazení seznamu pizz

V současné době PizzaModel třída zpracovává požadavek HTTP GET s prázdnou obslužnou OnGet rutinou stránky. Pojďme to aktualizovat tak, aby se v seznamu zobrazuje pizzy z PizzaService .

Aktualizace obslužné `OnGet` rutiny stránky

Aktualizujte OnGet metodu následujícím způsobem:

public void OnGet()
{
    pizzas = PizzaService.GetAll();
}

Do třídy List<Pizza> pizzas přidejte proměnnou PizzaModel s názvem :

public List<Pizza> pizzas;

Při volání metody se přiřadí výsledky OnGet metody do proměnné PizzaService.GetAll() pizzas . Tato proměnná bude přístupná pro šablonu stránky Razor Page, kde bude zapsána do tabulky se seznamem dostupných pizz.

Použití metody utility k formátování informací o edii 2016 free v seznamu

Naše IsGlutenFree vlastnost je logická hodnota. K formátování logické hodnoty jako řetězce můžeme použít metodu utility. Do třídy přidejte následující metodu PizzaModel nástroje:

public string GlutenFreeText(Pizza pizza)
{
    if (pizza.IsGlutenFree)
        return "Gluten Free";
    return "Not Gluten Free";
}

Přidání obslužné rutiny stránky HTTP POST do `PageModel`

Do třídy Pages/Pizza.cshtml.cs přidejte následující PageModel metodu. Uložte provedené změny.

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }
    PizzaService.Add(NewPizza);
    return RedirectToAction("Get");
}

Třída PizzaModel teď má asynchronní obslužnou OnPost rutinu stránky. OnPost spustí se, když uživatel odešle formulář stránky Pizza. Můžete také použít volitelnou asynchronní příponu pojmenování OnPostAsync .

Obslužná OnPost rutina stránky musí pro tuto aplikaci provést následující úlohy:

Ověří, že data odeslaná uživatelem a publikovaná ve třídě PageModel jsou platná.
Pokud jsou pokusy o změny neplatné, zobrazí se uživateli znovu stránka PageModel Pizza. Zobrazí se zpráva s vysvětlením požadavků na vstup.
Pokud je aktualizace PageModel platná, potom se změny dat předají službě s názvem PizzaService. PizzaService zpracuje oblasti zájmu požadavků HTTP a odpovědi ohledně webového rozhraní API.

Vytvoření vazby modelu

Třída PizzaModel potřebuje přístup k modelu Pizza. Ověří a předá Pizza položky z formuláře Pizza pomocí [BindProperty] atributu . Do třídy přidejte následující PizzaModel kód:

[BindProperty]
public Pizza NewPizza { get; set; }

Přidání obslužné rutiny HTTP POST pro tlačítka Odstranit

Stránka Razor Page může obsahovat více formulářů. Vzhledem k tomu, že tlačítka Odstranit v našem seznamu pizz upravuje data, post protokolu HTTP spíše vyžaduje HTTP GET.

Do třídy OnPostDelete přidejte následující PizzaModel metodu:

public IActionResult OnPostDelete(int id)
{
    PizzaService.Delete(id);
    return RedirectToAction("Get");
}

Odkaz na stránku Pizza

Stránka Pizza byla vytvořena a implementována. Pojďme uživatelům umožnit, aby na ni mohli přejít.

Přidání pomocné pomoci značky ukotvení na indexovou stránku

Do souboru .cshtml Pages/Shared/Layout přidejte následující kód do <nav> oddílu mezi odkazy a Home Privacy :

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

Výsledek se zobrazí takto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RazorPagesPizza</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">RazorPagesPizza</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Pizza">Pizza List</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - RazorPagesPizza - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

Uložte provedené změny.

Předchozí zvýrazněný kód používá pomocný prvek značky ukotvení. Pomocná funkce značky:

Přesměruje uživatele na stránku Razor Pages/Pizzas/Create.cshtml umístěnou ve stejném adresáři jako stránka indexu.
Vylepšuje standardní značku ukotvení HTML ( <a> ) přidáním vlastních atributů HTML, například asp-page-handler .

Atribut asp-page-handler slouží ke směrování na konkrétní obslužnou rutinu stránky pro stránku Razor Page definovanou v asp-page atributu . Atribut asp-page se používá k nastavení hodnoty atributu značky href ukotvení na konkrétní stránku Razor Page.

Pokračovat