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. 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, jste byli požádáni o dokončení procesu rezervace za účelem zachycení adres zákazníků. Přidáte některá textová pole a vylepšíte 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

Poznámka:

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), Visual Studio pro Mac (macOS) nebo průběžného vývoje pomocí editoru Visual Studio Code (Windows, Linux a macOS).

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.

Pokud jste ještě nevytvořili aplikaci Blazor, nainstalujte správnou verzi .NET podle pokynů k instalaci Blazoru podle pokynů k nastavení a zkontrolujte, jestli je váš počítač správně nastavený. Zastavte krok Vytvoření aplikace.

  1. Otevřete Visual Studio Code.

  2. V editoru Visual Studio Code otevřete integrovaný terminál tak , že vyberete Zobrazení a pak v hlavní nabídce vyberete Terminál .

  3. V terminálu přejděte na místo, kde chcete projekt vytvořit.

  4. Naklonujte aplikaci z GitHubu.

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

  5. Vyberte Soubor a pak vyberte Otevřít složku....

  6. 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 vyzvat k nevyřešeným závislostem. Vyberte Obnovit.

  7. Spusťte aplikaci a zkontrolujte, jestli všechno funguje správně.

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

    Snímek obrazovky s aplikací Blazing Pizza po naklonování

    Zkuste nakonfigurovat pizzu a přidat je do objednávky. Vyberte Pořadí > v dolní části stránky. Zobrazí se aktuální stránka rezervace.

  9. Stisknutím kláves Shift + F5 zastavte spuštění aplikace.

Refaktoring stránky rezervace

  1. 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é jsou nakonfigurované. Byli jste požádáni, abyste stránku refaktorovali tak, aby obsahovala oddíl adresy.

  2. 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 OrderReview Blazor a AddressEditor. Přesunete starý kód pokladny, který obsahuje pizzy, do OrderReview komponenty.

  3. V Průzkumníku souborů klikněte pravým tlačítkem na Sdílené a pak vyberte Nový soubor.

  4. Jako název souboru zadejte OrderReview.razor .

  5. 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; }
}

  6. V Průzkumníku souborů klikněte pravým tlačítkem na Sdílené a pak vyberte Nový soubor.

  7. Jako název souboru zadejte AddressEditor.razor .

  8. 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

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

    Snímek obrazovky s novou stránkou rezervace

    Přidejte nějaké pizzy a vyberte Objednávku > , abyste viděli nový tok pokladny.

  2. 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 rezervace, první věc, kterou udělá, je jeho jméno. Blazor umožňuje nastavit fokus na elementy HTML na stránce. Pojďme aplikaci vylepšit přidáním této funkce.

  1. V AddressEditor.razor, změňte HTML pro name input element přidat @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 element pak můžete použít k volání FocusAsync po vykreslení stránky.

  2. Přidejte kód pro volání FocusAsync po načtení stránky do [Parameter] public Address Address { get; set; } deklarace.

    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.

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

    Snímek obrazovky s polem Název, které se zaměřuje na vykreslení stránky

    Přidejte nějaké pizzy a vyberte Objednávku > , abyste viděli, že na stránce rezervace je fokus na poli Formulář Název .

  4. Stisknutím kláves Shift + F5 zastavte spuštění aplikace.