Cvičení – vytvoření formuláře adresy s komponentami Blazor

4 min

V tuto chvíli aplikace Blazing Pizza používá elementy HTML k zachycení dat a tlačítek. Architektura Blazor má vylepšenou podporu formulářů, které jim umožňují používat komponenty, které lze svázat s modelem jazyka C#.

Tým by chtěl nahradit aktuální prvky HTML komponentami Blazor. Tým by vám chtěl odeslat objednávky jenom v případě, že adresa a jméno nejsou prázdné.

V tomto cvičení nahradíte aktuální pole HTML komponentou Blazor a změníte způsob odeslání objednávek zákazníkem. Uvidíte, jak použít EditContext k zápisu ručních ověření formuláře.

Přidání komponenty Blazor EditForm

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

<div class="main"> Pod blok přidejte novou EditForm komponentu.

<div class="main">
    <EditForm Model=Order.DeliveryAddress OnSubmit=CheckSubmission>

Pod elementem </button> zavřete komponentu EditForm.
```
        </button>
    </EditForm>
</div>
```

@onclick Odeberte událost na kartě </button>.

<button class="checkout-button btn btn-warning" disabled=@isSubmitting>

@code Do bloku přidejte kód pro zpracování odeslání formuláře nad existující PlaceOrder metodu.

private async Task CheckSubmission()
{
    isSubmitting = true;
    await PlaceOrder();
    isSubmitting = false;
}

isSubmitting = true; Odstraňte řádek kódu z PlaceOrder() metody.

Nahrazení elementů HTML komponentami Blazor

V Průzkumníku souborů rozbalte položku Sdílené a pak vyberte AddressEditor.razor.
Vyberte nabídku Upravit a pak vyberte Nahradit.
Do prvního pole zadejte <input do pole nahradit a <InputTextvyberte nahradit vše.
Vyberte nabídku Upravit a pak vyberte Nahradit.
Do prvního pole zadejte @bind= do pole nahradit a @bind-Value=vyberte nahradit vše.
@ref="startName" Odeberte kód v poli Název.
Odeberte veškerý kód pod deklarací parametru @code v bloku. Blok by teď měl vypadat takto.
```
@code {
    [Parameter] public Address Address { get; set; }
}
```
FocusAsync je v současné době podporován pouze u elementů HTML.

Kontrola prázdných polí před odesláním formuláře

Pojďme přidat chybovou zprávu, kterou může aplikace zobrazit zákazníkovi, pokud nezadá svoje jméno nebo adresu.

V Průzkumníku souborů rozbalte stránky a pak vyberte Checkout.razor.

Přidejte pod prvek chybovou h4>Deliver to...</h4> zprávu.

<div class="checkout-delivery-address">
  <h4>Deliver to...</h4>
  @if (isError) {
    <div class="alert alert-danger">Please enter a name and address.</div>
  }
  <AddressEditor Address="Order.DeliveryAddress" />
</div>

@code Do bloku přidejte deklaraci logické hodnotyisError.
```
bool isError = false;
```

Vylepšete metodu CheckSubmission() tak, aby se objednávka umístila pouze v případě, že pole psč obsahují data.

private async Task CheckSubmission(EditContext editContext)
{
    isSubmitting = true;
    var model = editContext.Model as Address;
    isError = string.IsNullOrWhiteSpace(model?.Name)
        || string.IsNullOrWhiteSpace(model?.Line1)
        || string.IsNullOrWhiteSpace(model?.PostalCode);
    if (!isError)
    {
        await PlaceOrder();
    }
    isSubmitting = false;
}

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

Zkuste si objednat pizzu, aniž byste museli zadávat žádné informace. Měla by se zobrazit chybová zpráva.
Stisknutím kláves Shift + F5 zastavte spuštění aplikace.

Cvičení – vytvoření formuláře adresy s komponentami Blazor

Přidání komponenty Blazor EditForm

Nahrazení elementů HTML komponentami Blazor

Kontrola prázdných polí před odesláním formuláře

Váš názor