Cvičení – vytvoření obslužné rutiny události Blazor pro události onclick

5 min

Blazor vám umožňuje připojit kód jazyka C# k událostem HTML DOM. V tomto cvičení tuto možnost použijete ke zlepšení stávající aplikace.

Jako součást vývojového týmu, který pracuje na vylepšení aplikace Blazing Pizza, budete požádáni o dokončení procesu rezervace za účelem zachycení adres zákazníků. Chcete přidat některá textová pole a vylepšit proces rezervace.

V tomto cvičení naklonujete existující aplikaci a vytvoříte novou komponentu adresy pro zachycení podrobností adresy. Když jsou pole na místě, nastavíte fokus na první pole ve formuláři.

Klonování existující aplikace vašeho týmu

Note

Tento modul používá rozhraní příkazového řádku .NET (rozhraní příkazového řádku) a Visual Studio Code pro místní vývoj. Po dokončení tohoto modulu můžete použít koncepty pomocí sady Visual Studio (Windows), sady Visual Studio pro Mac (macOS) nebo pokračovat ve vývoji pomocí editoru Visual Studio Code (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 instalaci Blazoru a zkontrolujte, jestli je počítač správně nastavený. Zastavte krok Vytvoření aplikace.

Otevřete Visual Studio Code.
V editoru Visual Studio Code otevřete integrovaný terminál zvolením možnosti Zobrazení a poté v hlavní nabídce zvolte Terminál.
V terminálu přejděte na místo, kde chcete projekt vytvořit.

Naklonujte aplikaci z GitHubu.

git clone https://github.com/MicrosoftDocs/mslearn-use-forms-in-blazor-web-apps.git BlazingPizza

Vyberte Soubor a pak vyberte Otevřít složku....
V dialogovém okně Otevřít přejděte do složky BlazingPizza a vyberte Vybrat složku.

Visual Studio Code vás může upozornit ohledně nevyřešených závislostí. Vyberte Obnovit.
Spusťte aplikaci a zkontrolujte, jestli všechno funguje správně.
V editoru Visual Studio Code stiskněte klávesu F5 nebo vyberte Spustit>ladění.

Zkuste nakonfigurovat pizzu a přidat je do objednávky. Vyberte Pořadí > v dolní části stránky. Měla by se zobrazit aktuální stránka pokladny.
Stisknutím kláves Shift + F5 zastavte spuštění aplikace.

Upravte stránku pokladny

V editoru Visual Studio Code v Průzkumníku souborů rozbalte stránky a pak vyberte Checkout.razor.

V tuto chvíli se na stránce pokladny zobrazí jenom seznam pizz, které byly nakonfigurované. Zobrazí se výzva k refaktoringu stránky tak, aby obsahovala oddíl adresy.

Nahraďte existující <div class="main"> blok HTML tak, aby měl dva sloupce pro data.

<div class="main">
    <div class="checkout-cols">
        <div class="checkout-order-details">
            <h4>Review order</h4>
            <OrderReview Order="Order" />
        </div>

        <div class="checkout-delivery-address">
            <h4>Deliver to...</h4>
            <AddressEditor Address="Order.DeliveryAddress" />
        </div>
    </div>

    <button class="checkout-button btn btn-warning" @onclick="PlaceOrder" disabled=@isSubmitting>
        Place order
    </button>
</div>

Předchozí kód připojí událost HTML onclick pro element button k PlaceOrder Blazor metodě v @code bloku.

Refaktoring odkazuje na dva nové ovládací prvky Blazor, OrderReview a AddressEditor. Přesuňte starý kód pokladny, který uvádí pizzy do OrderReview komponenty.

V Průzkumníku souborů klikněte pravým tlačítkem na Sdílené a pak vyberte Nový soubor.
Jako název souboru zadejte OrderReview.razor .

Přidejte smyčku foreach pro zobrazení pizzy v pořadí.

@foreach (var pizza in Order.Pizzas)
{
    <p>
        <strong>
            @(pizza.Size)"
            @pizza.Special.Name
            (£@pizza.GetFormattedTotalPrice())
        </strong>
    </p>
}

<p>
    <strong>
        Total price:
        £@Order.GetFormattedTotalPrice()
    </strong>
</p>

@code {
    [Parameter] public Order Order { get; set; }
}

V Průzkumníku souborů klikněte pravým tlačítkem na Sdílené a pak vyberte Nový soubor.
Jako název souboru zadejte AddressEditor.razor .

Přidejte kód, který používá input prvek pro každé pole v adrese. Třída Address ve složce Model zobrazuje všechna pole.

<div class="form-field">
    <label>Name:</label>
    <div>
        <input @bind="Address.Name" />
    </div>
</div>

<div class="form-field">
    <label>Line 1:</label>
    <div>
        <input @bind="Address.Line1" />
    </div>
</div>

<div class="form-field">
    <label>Line 2:</label>
    <div>
        <input @bind="Address.Line2" />
    </div>
</div>

<div class="form-field">
    <label>City:</label>
    <div>
        <input @bind="Address.City" />
    </div>
</div>

<div class="form-field">
    <label>Region:</label>
    <div>
        <input @bind="Address.Region" />
    </div>
</div>

<div class="form-field">
    <label>Postal code:</label>
    <div>
        <input @bind="Address.PostalCode" />
    </div>
</div>

@code {
    [Parameter] public Address Address { get; set; }
}

Otestování nové stránky rezervace

V editoru Visual Studio Code stiskněte klávesu F5 nebo vyberte Spustit>ladění.

Přidejte nějaké pizzy a vyberte Objednat>, abyste viděli nový proces platby.
Stisknutím kláves Shift + F5 zastavte spuštěnou aplikaci.

Zlepšení použitelnosti formuláře

Když se zákazník převeze na stránku pokladny, první věc, kterou udělá, je zadá své jméno. Blazor umožňuje nastavit fokus na elementy HTML na stránce. Pojďme aplikaci vylepšit přidáním tohoto chování.

Ve AddressEditor.razor změňte HTML pro prvek input, abyste přidali @ref="startName".
```
<input @ref="startName" @bind="Address.Name" />
```
Direktiva @ref="startName" Blazor umožňuje bloku kódu vytvořit ElementReference odkaz na vstupní prvek. Tento odkaz na prvek pak můžete použít k volání FocusAsync po vykreslení stránky.
Přidejte kód pro volání FocusAsync po načtení stránky pod deklarací [Parameter] public Address Address { get; set; }.
```
private ElementReference startName;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) {
        await startName.FocusAsync();
    }
}    
```
Tento kód vytvoří ElementReference a potom po vykreslení stránky nastaví fokus na Name pole.
V editoru Visual Studio Code stiskněte klávesu F5 nebo vyberte Spustit>ladění.

Přidejte nějaké pizzy a vyberte Objednávku > , abyste viděli, že na stránce rezervace je fokus na poli Formulář Název .
Stisknutím kláves Shift + F5 zastavte spuštění aplikace.

Váš názor

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