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 poskytla aktuální šablony stylů CSS, obrázky a HTML ze svého starého webu, se kterými můžete pracovat.

Poznámka:

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.

Pokud jste ještě nevytvořili 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

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

dotnet --list-sdks

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

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

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

.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 blazorserver -o BlazingPizza --no-https true -f net6.0
```
Tento příkaz vytvoří nový projekt serveru Blazor ve složce s názvem BlazingPizza. Říká také projektu, aby zakázal PROTOKOL HTTPS.
Vyberte složku Otevřít soubor>.
V dialogovém okně Otevřít přejděte do složky BlazingPizza a zvolte Vybrat složku.
Visual Studio Code vás vyzve k přidání požadovaných prostředků pro sestavení a ladění projektu. Vyberte Ano.
Visual Studio Code přidá launch.json a tasks.json do složky .vscode projektu.

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.
Stisknutím klávesy Shift + F5 aplikaci zastavte.

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

Teď naklonujete 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.

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 editoru Visual Studio Code v Průzkumníku souborů 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í.

Aplikace by se měla zkompilovat a spustit a uvidíte, že se nic nezměnilo. 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í.

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

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

Vytvoření nové aplikace Blazor

Otestování nastavení

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

Udělejte si pizzu

Váš názor