Cvičení – Přidání stránky seznamu Pizza s formulářem

• 8 min

V této jednotce vytvoříte formulář v projektu RazorPagesPizza pomocí Razor Pages k oddělení logiky stránky od její prezentace.

Vytvoření stránky

Adresář projektu RazorPagesPizza je aktuálně otevřen v Visual Studio Code. V příkazovém prostředí spusťte následující příkaz .NET Core CLI:

dotnet new page --name Pizza --namespace RazorPagesPizza.Pages --output Pages

Předchozí příkaz:

• Vytvoří v oboru názvů následující soubory RazorPagesPizza.Pages :
  • Pizza. cshtml — Stránka Razor
  • Pizza. cshtml. cs — Doprovodná PageModel Třída
• Ukládá oba soubory do adresáře stránek projektu.

Všimněte si, že k vytvoření těchto souborů není nic Magical o použití rozhraní příkazového řádku. Soubory můžete také vytvořit ručně. příkaz rozhraní příkazového řádku je pouze zástupcem pro to.

Kontrola struktury stránky Razor

1. Otevřete stránku nové stránky/Pizza. cshtml Razor. Projděte si kód souboru:

   @page
   @model RazorPagesPizza.Pages.PizzaModel
   @{
   }
   

   Předchozí stránka Razor obsahuje vyhrazená klíčová slova Razor:

   • Tím, co z této stránky dělá stránku Razor Page, je direktiva @page. Indikuje, že stránka může zpracovávat požadavky HTTP. Direktiva @page musí být první direktivou na stránce Razor Page.
   • @modelDirektiva určuje typ modelu zpřístupněného pro stránku Razor. V tomto případě je typ PageModel název třídy odvozeného s předponou jeho oboru názvů. Při odvolání je tato třída definována na stránkách/Pizza. cshtml. cs.

Vykreslení HTML a přechod na C#

Následující kód je příkladem symbolu @ následovaného kódem C#. Kód nastaví ViewData Title hodnotu klíče kolekce na Create . Syntaxe Razor používá symbol @ k přechodu z HTML na C#. Pokud po symbolu @ následuje vyhrazené klíčové slovo Razor, převede se na kód Razor, jinak se převede na C#. Razor vyhodnocuje výrazy C# a vykresluje je ve výstupu HTML.

@{
    ViewData["Title"] = "Pizza";
}

Stránka Razor podporuje syntaxe Razor, což jsou kombinované jazyky HTML a C#. Kód jazyka C# definuje logiku dynamického vykreslování pro stránku na serveru. Výchozím jazykem pro Razor je HTML. Vykreslování HTML z kódu Razor se nijak neliší od vykreslování HTML ze souboru HTML. Kód HTML v souboru . cshtml Razor Pages je vykreslen serverem beze změny. V produktu Razor Pages můžete používat HTML, jak jste zvyklí. Ve stejnou chvíli můžete využít výkonné a časově náročné funkce Razor, jak se naučíte používat.

Přidat třídy Pizza a PizzaService

Než začneme implementovat náš formulář pro správu pizzas, musíme mít úložiště dat, na které můžeme provádět operace.

Třída modelu je nutná pro reprezentaci pizza v inventáři. Model obsahuje vlastnosti, které reprezentují vlastnosti Pizza. Model se používá k předávání dat do webové aplikace a k zachování možností pizza v úložišti dat. V této jednotce bude toto úložiště dat jednoduchou místní službou ukládání do mezipaměti v paměti. v reálné aplikaci byste měli zvážit použití databáze, jako je například SQL Server, s Entity Framework Core.

Vytvoření modelu Pizza

1. Spuštěním následujícího příkazu vytvořte Models složku:

   mkdir Models
   

   vyberte Models složku v Visual Studio Code a přidejte nový soubor s názvem Pizza.cs .

   Kořen projektu nyní obsahuje adresář modelů s prázdným souborem Pizza. cs . Název adresáře Models je konvence.

2. Přidejte následující kód do modelů/Pizza. cs pro definování Pizza. Uložte provedené změny.

   namespace RazorPagesPizza.Models
   {
       public class Pizza
       {
           public int Id { get; set; }
   
           [Required]
           public string Name { get; set; }
           public PizzaSize Size { get; set; }
           public bool IsGlutenFree { get; set; }
   
           [Range(0.01, 9999.99)]
           public decimal Price { get; set; }
       }
   
       public enum PizzaSize { Small, Medium, Large }
   }
   

   Tip

   V Cloud Shell Editoru jsou užitečné následující klávesové zkratky.

   Klávesová zkratka	Příkaz
   Ctrl+V (Windows) ⌘+V (macOS)	Vložit
   Ctrl+S (Windows) ⌘+S (macOS)	Uložit

Přidat datovou službu

1. Spuštěním následujícího příkazu vytvořte Services složku:

   mkdir Services
   

   vyberte složku v Visual Studio Code a přidejte nový soubor s názvem PizzaService.cs .

2. Přidejte následující kód do služby/PizzaService. cs a vytvořte Pizza datovou službu v paměti. Uložte provedené změny.

   using RazorPagesPizza.Models;
   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Threading.Tasks;
   
   namespace RazorPagesPizza.Services
   {
       public static class PizzaService
       {
           static List<Pizza> Pizzas { get; }
           static int nextId = 3;
           static PizzaService()
           {
               Pizzas = new List<Pizza>
               {
                   new Pizza { Id = 1, Name = "Classic Italian", Price=20.00M, Size=PizzaSize.Large, IsGlutenFree = false },
                   new Pizza { Id = 2, Name = "Veggie", Price=15.00M, Size=PizzaSize.Small, IsGlutenFree = true }
               };
           }
   
           public static List<Pizza> GetAll() => Pizzas;
   
           public static Pizza Get(int id) => Pizzas.FirstOrDefault(p => p.Id == id);
   
           public static void Add(Pizza pizza)
           {
               pizza.Id = nextId++;
               Pizzas.Add(pizza);
           }
   
           public static void Delete(int id)
           {
               var pizza = Get(id);
               if (pizza is null)
                   return;
   
               Pizzas.Remove(pizza);
           }
   
           public static void Update(Pizza pizza)
           {
               var index = Pizzas.FindIndex(p => p.Id == pizza.Id);
               if (index == -1)
                   return;
   
               Pizzas[index] = pizza;
   
           }
       }
   }
   

   Tato služba poskytuje jednoduchou službu ukládání dat do mezipaměti v paměti se dvěma pizzas ve výchozím nastavení, které bude webová aplikace používat pro demonstrační účely. Po zastavení a spuštění webové aplikace bude mezipaměť dat v paměti obnovena na dvě výchozí pizzas z konstruktoru PizzaService .

Přidat značku formuláře na stránku Pizza Razor

Obsah stránky/Pizza. cshtml nahraďte následujícím kódem. Uložte provedené změny.

@page
@using RazorPagesPizza.Models
@model RazorPagesPizza.Pages.PizzaModel
@{
    ViewData["Title"] = "Pizza List";
}

<h1>Pizza List 🍕</h1>
<form method="post" class="card p-3">
    <div class="row">
        <div asp-validation-summary="All"></div>
    </div>
    <div class="form-group mb-0 align-middle">
        <label asp-for="NewPizza.Name">Name</label>
        <input type="text" asp-for="NewPizza.Name" class="mr-5">
        <label asp-for="NewPizza.Size">Size</label>
        <select asp-for="NewPizza.Size" asp-items="Html.GetEnumSelectList<PizzaSize>()" class="mr-5"></select>
        <label asp-for="NewPizza.Price"></label>
        <input asp-for="NewPizza.Price" class="mr-5" />
        <label asp-for="NewPizza.IsGlutenFree">Gluten Free</label>
        <input type="checkbox" asp-for="NewPizza.IsGlutenFree" class="mr-5">
        <button class="btn btn-primary">Add</button>
    </div>
</form>
<table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    @foreach (var pizza in Model.pizzas)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@Model.GlutenFreeText(pizza)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
</table>

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

Stránka Pizza Razor používá HTML a Razor k podpoře formuláře pro vytváření produktů. Formulář přijímá název a cenové hodnoty pro produkt, který má být vytvořen. Dynamické funkce se poskytují prostřednictvím pomocných rutin značek Razor, a to s poměrně malým objemem kódu. Ověřování vstupu formuláře na straně klienta je povoleno prostřednictvím zahrnutí částečného zobrazení Page/Shared/_ValidationScriptsPartial. cshtml . Obsah částečného zobrazení je vložen do oddílu stránky rozložení Scripts .

Kontrola pomocníků se značkami Razor

Značky pomocníků řeší neefektivitu přepínání kontextu mezi HTML a C#. většina z vestavěných pomocníků značek ASP.NET Core rozšiřuje standardní prvky HTML. Pomocník značek poskytuje další atributy na straně serveru pro prvky jazyka HTML, což usnadňuje jejich prvky.

Na této stránce jsou čtyři helpdesky značek:

• Částečné
• Popisek
• Vstup
• Zpráva souhrnu ověření

Pomocná rutina částečné značky

Následující kód používá pomocníka částečné značky pro asynchronní vykreslování částečného zobrazení:

<partial name="_ValidationScriptsPartial" />

Atribut pomocníka částečné značky name přijímá název částečného zobrazení bez přípony souboru. Proces zjišťování zobrazení vyhledá částečné zobrazení v projektu.

Tato syntaxe pomocníka značek je alternativou k následující syntaxi pomocníka jazyka HTML:

@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

Pomocná rutina značky popisku

Následující kód používá pomocníka značky Label:

<label asp-for="NewPizza.Name" class="control-label"></label>

Pomocná funkce značky popisku rozšiřuje standardní element <label> HTML. Jak je u mnoha pomocníků značek běžné, používá asp-for atribut . Atribut přijímá zadanou PageModel vlastnost. V tomto případě se hodnota vlastnosti PageModel Name vykreslí jako obsah prvku <label> HTML. Atribut asp-for je vymezený na PageModel pro stránku Razor, takže symbol @ se nepoužije. Popisek je dynamický (jak je zde potřeba), zůstává ale kompaktní a lze ho snadno přidat do kódu.

Pomocná rutina značky vstupu

Následující kód používá pomocnou rutinu značky vstupu. Rozšiřuje standardní prvek HTML <input>. Používá také atribut asp-for k určení vlastnosti PageModel.

<input asp-for="NewPizza.Name" class="form-control" />

Pomocná funkce značky vstupu:

• Vyhodnotí NewPizza.Name vlastnost, jako je helper značky popisku.
• Přidá atribut id a HTML na základě této name vlastnosti.
• Odpovídajícím způsobem nastaví vstupní typ. Pokud je například zadaný typ vlastnosti , použije se ve vygenerované bool checkbox jazyce HTML typ vstupu . V tomto případě je NewPizza.Name typ vlastnosti string . Vlastnost NewPizza.Name nastavují atributy datových poznámek modelu, které si projdeme později v tomto modulu.
• Poskytuje ověřování na straně klienta pomocí jQuery na základě atributů datových poznámek modelu poskytovaných prostřednictvím PageModel .
• Pokud bylo ověření na straně klienta úspěšné, vyzve modul Razor, aby poskytl další a robustnější ověření na straně serveru. Životní cyklus události HTTP POST stránky Pizza Razor, který zahrnuje ověřování vstupu na straně klienta a serveru, najdete v další části tohoto modulu.

Následující výstup HTML se vygeneruje z pomocníka pro značky vstupu, který se nachází na stránce Pizza:

<input name="NewPizza.Name" class="form-control" id="NewPizza_Name" type="text" value="" data-val-required="The Name field is required." data-val="true">

Pomocná rutina značky souhrnu ověření

Následující kód používá pomocnou metodu značky Souhrn ověření. Zobrazuje ověřovací zprávu pro jednu vlastnost modelu.

<div asp-validation-summary="All"></div>

Pomocná metoda značky vstupu přidá k vstupním data- prvkům atributy HTML5. Atributy jsou založeny na vlastnostech v třídách modelu C#. Kromě ověřování responzivity na straně klienta se provádí také ověřování na serveru, což je bezpečnější.

Následující kód HTML se vykreslí pomocí pomocníka značky souhrnu ověření:

<input name="NewPizza.Price" class="form-control" id="NewPizza_Price" type="text" value="" data-val-required="The Price field is required." data-val="true" data-val-range-min="0.01" data-val-range-max="9999.99" data-val-range="The field Price must be between 0.01 and 9999.99." data-val-number="The field Price must be a number.">

type, data-val-range-min, data-val-range-max a chybová odpověď se dynamicky nastavují datovými poznámkami modelu pro vlastnost Product.Price modelu.

Vytvořila se stránka Razor Page pro vytvoření produktu. Abychom mohli zpracovávat interakce formulářů, budeme muset upravit třídu tak, aby zpracovávala požadavek PageModel HTTP POST formuláře. V dalším kroku PageModel prozkoumáme interakce.