Cvičení – přidání nové stránky Razor Page

  • 10 min

V předchozí lekci jste získali zdrojový kód projektu Contoso Pizza a pak jste provedli několik jednoduchých změn na domovské stránce. V této lekci přidáte do projektu novou stránku Razor Page.

Stránka Vytvořit seznam pizzerií

K vytvoření nové stránky Razor Page použijete .NET CLI.

  1. Vzhledem k tomu, že příkaz zablokuje dotnet watch terminál, otevřete další terminál tak, že v Průzkumníku kliknete pravým tlačítkem na složku ContosoPizza a vyberete Otevřít v integrovaném terminálu.

  2. V novém okně terminálu zadejte následující příkaz:

    dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages

    Předchozí příkaz:

    • Vytvoří tyto dva soubory v ContosoPizza.Pages oboru názvů:
      • PizzaList.cshtml – stránka Razor
      • PizzaList.cshtml.cs – doprovodná PageModel třída
    • Ukládá oba soubory do podadresáře Stránky projektu.

  3. Do pages/PizzaList.cshtml přidejte do bloku kódu následující kód @{ } :

    ViewData["Title"] = "Pizza List 🍕";

    Tím se <title> nastaví prvek pro stránku.

  4. Na konec souboru přidejte následující kód:

    <h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

    Tím se na stránku přidá nadpis a také dva zástupné symboly komentářů HTML pro funkce, které přidáte později.

  5. Uložte soubor. Pokud používáte GitHub Codespaces, soubor se automaticky uloží.

  6. Vraťte se do terminálu spuštěného dotnet watcha stisknutím ctrl+R aplikaci znovu načtěte a detekujte nové soubory.

Přidání stránky Seznam pizzy do navigační nabídky

Je to vhodná doba k otestování stránky, ale stránku nelze v prohlížeči získat, protože ještě není propojená v navigační nabídce. Teď ho propojete.

  1. Otevřete stránky/ sdílené/_Layout.cshtml.

  2. V elementu s třídou (začíná na řádku 21) si všimněte <ul> prvků, které obsahují odkazy na navbar-nav a <li>. Za element obsahující <li> odkaz Privacy přidejte na konec seznamu následující kód:

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

    Tím přidáte odkaz na stránku PizzaList do navigační nabídky.

  3. Uložte soubor. Karta prohlížeče s aplikací se automaticky aktualizuje, aby se zobrazily změny. Pokud používáte GitHub Codespaces, soubor se uloží automaticky, ale budete muset kartu prohlížeče aktualizovat ručně.

  4. V navigační nabídce vyberte odkaz Seznam 🍕 pizzy . Zobrazí se stránka Seznam pizzy.

Registrace třídy PizzaService v kontejneru injektáž závislostí

Stránka Seznam pizzy závisí na objektu PizzaService , který má načíst seznam pizz. Injektáž závislostí použijete k poskytnutí PizzaService objektu na stránku. Nejprve zaregistrujte PizzaService třídu v kontejneru.

  1. Otevřete Program.cs.

  2. V části, která přidává služby do kontejneru, přidejte následující kód:

    builder.Services.AddScoped<PizzaService>();

    Tento kód zaregistruje PizzaService třídu do kontejneru injektáže závislostí. Tato AddScoped metoda označuje, že pro každý požadavek HTTP by se měl vytvořit nový PizzaService objekt. PizzaService Nyní se dá vložit na libovolnou stránku Razor Page.

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

Zobrazení seznamu pizz

Pojďme upravit PageModel třídu stránky Pizza List tak, aby načetla seznam pizz z objektu PizzaService a uložila ji do vlastnosti.

  1. Otevřete Pages/PizzaList.cshtml.cs.

  2. Na začátek souboru přidejte následující using příkazy:

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Tyto příkazy naimportují typy Pizza , PizzaService které použijete na stránce.

  3. ContosoPizza.Pages Uvnitř bloku oboru názvů nahraďte celou PizzaListModel třídu následujícím kódem:

    public class PizzaListModel : PageModel
{
    private readonly PizzaService _service;
    public IList<Pizza> PizzaList { get;set; } = default!;

    public PizzaListModel(PizzaService service)
    {
        _service = service;
    }

    public void OnGet()
    {
        PizzaList = _service.GetPizzas();
    }
}

    V předchozím kódu:

    • Vytvoří se soukromý název jen pro čtení PizzaService_service . Tato proměnná bude obsahovat odkaz na PizzaService objekt.
      • Klíčové readonly slovo označuje, že hodnotu _service proměnné nelze po nastavení v konstruktoru změnit.
    • Vlastnost PizzaList je definována tak, aby držela seznam pizz.
      • Typ IList<Pizza> označuje, že PizzaList vlastnost bude obsahovat seznam Pizza objektů.
      • PizzaList inicializuje se tak, aby default! indikoval kompilátoru, že bude inicializován později, takže nejsou vyžadovány bezpečnostní kontroly null.
    • Konstruktor přijímá PizzaService objekt.
      • Objekt PizzaService je poskytován injektáží závislostí.
    • Metoda OnGet je definována pro načtení seznamu pizz z objektu PizzaService a jeho uložení do PizzaList vlastnosti.

    Návod

    Pokud potřebujete pomoc s pochopením bezpečnosti null, přečtěte si téma Zabezpečení null v jazyce C#.

  4. Uložte soubor. Pokud používáte GitHub Codespaces, soubor se automaticky uloží.

  5. Vraťte se do terminálu spuštěného dotnet watch a stisknutím kombinace kláves Ctrl+R znovu načtěte aplikaci s zaregistrovanou službou a novým konstruktorem pro PizzaListModel.

Zobrazení seznamu pizz

Když teď má stránka přístup k seznamu pizz, použijete tento seznam k zobrazení pizz na stránce.

  1. Otevřete Pages/PizzaList.cshtml.

  2. Nahraďte komentář <!-- List of pizzas will go here --> následujícím kódem:

    <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>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>

    V předchozím kódu:

    • Vytvoří se <table> prvek pro zobrazení seznamu pizz.
    • Vytvoří <thead> se element, který bude obsahovat záhlaví tabulky.
    • Příkaz @foreach uvnitř <tbody> iteruje seznam pizz.
      • Vlastnost Model odkazuje na PizzaListModel objekt vytvořený v souboru kódu.
      • Vlastnost PizzaList odkazuje na PizzaList vlastnost definovanou v souboru kódu.
    • Každá iterace @foreach příkazu vytvoří <tr> prvek pro uložení dat pizzy:
      • Syntaxe Razor se používá k zobrazení dat pizzy v elementech <td> . Tato syntaxe slouží k zobrazení vlastností objektu Pizza , který je uložen v pizza proměnné.
      • Price je formátován pomocí interpolace řetězců jazyka C#.
      • Výraz ternární se používá k zobrazení hodnoty IsGlutenFree vlastnosti jako "✔️" nebo prázdná buňka.
      • Vytvoří se formulář pro odstranění pizzy.
        • Atribut asp-page-handler označuje, že formulář by měl být odeslán do Delete obslužné rutiny v souboru kódu za kódem. Tuto obslužnou rutinu vytvoříte v pozdější lekci.
        • Atribut asp-route-id označuje, že Id vlastnost objektu Pizza by měla být předána obslužné rutině Delete .

  3. Uložte soubor. V prohlížeči se stránka Seznam pizza aktualizuje seznamem pizz. Pokud používáte GitHub Codespaces, soubor se uloží automaticky, ale budete muset kartu prohlížeče aktualizovat ručně.

Snímek obrazovky stránky Seznam pizz s pracovním seznamem

Dobrá práce! Vytvořili jste stránku Razor Page, která zobrazuje seznam pizz. V další lekci se dozvíte o pomocných rutinách značek a obslužných rutinách stránek.