Övning – Skapa en Blazor-händelsehanterare för onclick-händelser

5 minuter

Med Blazor kan du ansluta C#-kod till HTML DOM-händelser. I den här övningen använder du den här möjligheten för att förbättra en befintlig app.

Som en del av ett utvecklingsteam som arbetar med att förbättra en Blazing Pizza-app uppmanas du att slutföra utcheckningsprocessen för att samla in kundernas adresser. Du vill lägga till några textfält och förbättra utcheckningsprocessen.

I den här övningen klonar du en befintlig app och skapar en ny adresskomponent för att samla in adressinformation. När fälten är på plats ställer du in fokus på det första fältet i formuläret.

Klona teamets befintliga app

Note

Den här modulen använder .NET CLI (Kommandoradsgränssnitt) och Visual Studio Code för lokal utveckling. När du har slutfört den här modulen kan du använda begreppen med Visual Studio (Windows), Visual Studio för Mac (macOS) eller fortsätta utvecklingen med Hjälp av Visual Studio Code (Windows, Linux och macOS).

I den här modulen används .NET 9.0 SDK. Kontrollera att du har .NET 9.0 installerat genom att köra följande kommando i önskad kommandoterminal:

dotnet --list-sdks

Utdata som liknar följande exempel visas:

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

Kontrollera att en version som börjar med 9 visas. Om inget visas eller om kommandot inte hittas installerar du den senaste .NET 9.0 SDK:t.

Om du skapar din första Blazor-app följer du installationsanvisningarna för Blazor för att installera rätt version av .NET och kontrollera att datorn är korrekt konfigurerad. Stanna vid steget Skapa din app .

Öppna Visual Studio Code.
Öppna den integrerade terminalen från Visual Studio Code genom att välja Visa och välj sedan Terminal på huvudmenyn.
I terminalen navigerar du till den plats där du vill att projektet ska skapas.

Klona appen från GitHub.

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

Välj Arkiv och välj sedan Öppna mapp....
I dialogrutan Öppna går du till mappen BlazingPizza och väljer Välj mapp.

Visual Studio Code kan fråga dig om olösta beroenden. Välj Återställ.
Kör appen för att kontrollera att allt fungerar korrekt.
Tryck på F5 i Visual Studio Code eller välj Kör>starta felsökning.

Prova att konfigurera några pizzor och lägga till dem i din beställning. Välj Order > längst ned på sidan. Du bör se den aktuella utcheckningssidan.
Tryck på Skift + F5 för att stoppa appen från att köras.

Omstrukturera utcheckningssidan

I Utforskaren i Visual Studio Code expanderar du Sidor, och sedan väljer du Checkout.razor.

För närvarande visar utcheckningssidan bara listan över pizzor som har konfigurerats. Du uppmanas att omstrukturera sidan så att den innehåller ett adressavsnitt.

Ersätt det befintliga <div class="main"> HTML-blocket för att ha två kolumner för 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>

Föregående kod ansluter HTML-händelsen onclick för knappelementet till PlaceOrder Blazor-metoden i @code blocket.

Refaktoreringen refererar till två nya Blazor-kontroller OrderReview och AddressEditor. Flytta den gamla utcheckningskoden som listade pizzan till komponenten OrderReview .

Högerklicka på Delad i utforskaren och välj sedan Ny fil.
Ange OrderReview.razor som filnamn.

Lägg till en foreach loop för att visa pizzorna i en ordning.

@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; }
}

Högerklicka på Delad i utforskaren och välj sedan Ny fil.
Ange AddressEditor.razor som filnamn.

Lägg till kod som använder ett input element för varje fält i en adress. Klassen Address i mappen Modell visar alla fält.

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

Testa den nya utcheckningssidan

Tryck på F5 i Visual Studio Code eller välj Kör>starta felsökning.

Lägg till några pizzor och välj Beställ > för att se det nya utcheckningsflödet.
Tryck på Skift + F5 för att stoppa körningen av appen.

Förbättra formulärets användbarhet

När kunden tas till kassasidan är det första de gör att ange sitt namn. Med Blazor kan du ange fokus på HTML-element på en sida. Nu ska vi göra appen bättre genom att lägga till det här beteendet.

I AddressEditor.razor ändrar du HTML för namnelementet input för att lägga till @ref="startName".
```
<input @ref="startName" @bind="Address.Name" />
```
Med Blazor-direktivet @ref="startName" kan kodblocket skapa en ElementReference för att referera till indataelementet. Du kan sedan använda den här elementreferensen för att anropa FocusAsync när en sida återges.
Lägg till kod för att anropa FocusAsync när en sida har lästs in under [Parameter] public Address Address { get; set; }-deklarationen.
```
private ElementReference startName;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) {
        await startName.FocusAsync();
    }
}    
```
Den här koden skapar ElementReference och när en sida återges ställs fokus till fältet Name .
Tryck på F5 i Visual Studio Code eller välj Kör>starta felsökning.

Lägg till några pizzor och välj Ordning > för att se att fältet Namnformulär har fokus på utcheckningssidan.
Tryck på Skift + F5 för att stoppa appen från att köras.

Feedback

Var den här sidan till hjälp?