Cvičení – vytvoření uživatelského rozhraní s komponentami Blazor

5 min

V tomto cvičení začnete vytvářet novou aplikaci Blazing Pizza pro společnost pro doručování pizzy. Společnost vám poskytuje aktuální šablony stylů CSS, image a HTML ze starého webu, se kterými můžete pracovat.

Note

Tento modul používá rozhraní příkazového řádku .NET a Visual Studio Code pro místní vývoj. Po dokončení tohoto modulu můžete tyto koncepty použít pomocí sady Visual Studio pro Windows a Visual Studio pro Mac pro macOS. Pro pokračování vývoje můžete použít Visual Studio Code pro Windows, Linux a macOS.

Tento modul používá sadu .NET 9.0 SDK. Spuštěním následujícího příkazu v upřednostňovaném příkazovém terminálu se ujistěte, že máte nainstalované rozhraní .NET 9.0:

dotnet --list-sdks

Zobrazí se výstup podobný následujícímu příkladu:

8.0.100 [C:\Program Files\dotnet\sdk]
9.0.100 [C:\Program Files\dotnet\sdk]

Ujistěte se, že je uvedena verze, která začíná s 9. Pokud žádný není uvedený nebo příkaz nebyl nalezen, nainstalujte nejnovější sadu .NET 9.0 SDK.

Pokud vytváříte svou první aplikaci Blazor, nainstalujte správnou verzi rozhraní .NET podle pokynů k nastavení blazoru a zkontrolujte, jestli je váš počítač správně nastavený. Zastavte krok Vytvoření aplikace.

Vytvoření nové aplikace Blazor

.NET umožňuje vytvářet nové projekty s libovolnou verzí sady Visual Studio nebo příkazy terminálu. Následující cvičení ukazují postup pomocí terminálu a editoru Visual Studio Code.

Otevřete Visual Studio Code.
Výběrem možnosti Zobrazit otevřete integrovaný terminál v editoru Visual Studio Code. Pak v hlavní nabídce vyberte Terminál.
V terminálu přejděte na místo, kam chcete projekt vytvořit.
Spusťte příkaz terminálu dotnet:
```
dotnet new blazor -o BlazingPizza
```
Tento příkaz vytvoří nový projekt serveru Blazor ve složce s názvem BlazingPizza.
Vyberte složku Otevřít soubor>.
V dialogovém okně Otevřít přejděte do složky BlazingPizza a zvolte Vybrat složku.

Tyto soubory umožňují spouštět a ladit aplikaci Blazor pomocí nástrojů pro ladění editoru Visual Studio Code.

Otestování nastavení

Ke spuštění aplikace můžete použít terminál nebo Visual Studio Code.

V okně terminálu spusťte aplikaci Blazor pomocí:
```
dotnet watch
```
Tento příkaz se sestaví a spustí aplikaci. Příkaz kukátku říká dotnetu, aby sledoval všechny soubory projektu. Všechny změny, které provedete v souborech projektu, automaticky aktivují opětovné sestavení a pak restartujte aplikaci.

Výchozí prohlížeč vašeho počítače by měl otevřít novou stránku na http://localhost:5000adrese .
Aplikaci zastavíte tak, že v okně terminálu vyberete Ctrl + C.

Projekt můžete také spustit a ladit pomocí editoru Visual Studio Code.

V editoru Visual Studio Code vyberte F5. Nebo v nabídce Spustit vyberte Spustit ladění.

Aplikace by měla sestavit a otevřít novou stránku prohlížeče.
Visual Studio Code také přepne do okna Spustit a ladit , které umožňuje restartovat nebo zastavit aplikaci.

Snímek obrazovky s oknem ladění v editoru Visual Studio Code
Pokud chcete aplikaci zastavit, vyberte Shift + F5.

Stažení úvodních souborů a assetů Blazing Pizza

Naklonujte existující soubory projektu aplikace Blazor pro týmy z úložiště GitHub.

Odstraňte složku BlazingPizza pomocí průzkumníka souborů nebo v editoru Visual Studio Code.

V terminálu naklonujte aktuální pracovní soubory do nové složky BlazingPizza .

git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza

Spusťte aktuální verzi aplikace. Vyberte F5.

Snímek obrazovky s úvodní aplikací Blazing Pizza

Udělejte si pizzu

Komponenta Pages/Index.razor umožňuje zákazníkům vybrat a nakonfigurovat pizzy, které chtějí objednat. Komponenta reaguje na kořenovou adresu URL aplikace.

Tým také vytvořil třídy, které představují modely v aplikaci. Zkontrolujte aktuální PizzaSpecial model.

V Průzkumníku souborů editoru Visual Studio Code rozbalte složku Model . Pak vyberte PizzaSpecial.

namespace BlazingPizza;

/// <summary>
/// Represents a pre-configured template for a pizza a user can order
/// </summary>
public class PizzaSpecial
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal BasePrice { get; set; }

    public string Description { get; set; }

    public string ImageUrl { get; set; }

    public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
}

Všimněte si, že objednávka pizzy má Name, BasePriceDescription, a ImageUrl.

V Průzkumníku souborů rozbalte stránky a pak vyberte Index.razor.
```
@page "/"

<h1>Blazing Pizzas</h1>
```
V tuto chvíli existuje pouze jedna značka H1 pro název. Přidáte kód pro vytváření specialit pizzy.

<h1> Pod značku přidejte tento kód jazyka C#:

@code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
        });
    }
}

Blok @code vytvoří pole, které bude obsahovat speciality pizzy. Když se stránka inicializuje, přidá do pole šest pizz.

Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

Když se aplikace zkompiluje a spustí, nic se nezobrazí. Kód se v HTML na straně klienta nepoužívá. Pojďme to opravit.
Vyberte Shift + F5 nebo vyberte Zastavit ladění.

V souboru Index.razor nahraďte <h1>Blazing Pizzas</h1> tímto kódem:

<div class="main">
  <h1>Blazing Pizzas</h1>
  <ul class="pizza-cards">
    @if (specials != null)
    {
      @foreach (var special in specials)
      {
        <li style="background-image: url('@special.ImageUrl')">
          <div class="pizza-info">
              <span class="title">@special.Name</span>
                  @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
          </div>
        </li>
      }
    }
  </ul>
</div>

Tento kód kombinuje prostý kód HTML společně s direktivami pro smyčky a přístup členů. Smyčka @foreach vytvoří <li> značku pro každou pizzu specials v poli.

Ve smyčce se u každé speciální pizzy zobrazí název, popis, cena a obrázek s direktivami člena.

Vyberte F5 nebo vyberte Spustit. Pak vyberte Spustit ladění.

Snímek obrazovky se seznamem blýskajících pizz

Teď máte základní součást pizzy, která zákazníkům umožní objednat si pizzu. V následujících cvičeních tuto komponentu vylepšíte.

Váš názor

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