Lärarguide · Lektion 3 av 8

Data binding & events

Här lär sig studenten hur Blazor reagerar på input. Mål: behärska @bind, event-handlers och EventCallback.

V3

Vecka

2,5 h

Total tid

~50 min

Teori

~70 min

Workshop

Studentmaterial 03-data-binding.html

Kompletterande resurser

MS Learn: aspnet/core/blazor/components/data-binding och event-handling
Pluralsight: Blazor Fundamentals — modulen om data binding

Lektionens mål

Studenten kan använda @bind med och utan :event och :format.
Studenten skriver event-handlers (sync och async) och förstår när de behöver Task.
Studenten kan skicka events upp i komponenthierarkin via EventCallback<T>.

Agenda (150 min)

0:00

Check-in + repetition av komponenter.

0:10

Teori: @bind i detalj — vad genereras under huven?

0:30

Teori: event-handlers, async, EventCallback vs Action.

0:55

Teori: StateHasChanged och InvokeAsync — när och varför.

1:05

Paus 15 min

1:20

Workshop: sökruta med live-filtrering + ProductCard med Buy-event.

2:20

Avrundning + hemuppgift.

2:30

Slut

Talartips per sektion

@bind under huven: visa explicit-varianten value="@x" @onchange="..." först. Då blir @bind bara "syntactic sugar för det här".

@bind:event="oninput": demo live i webbläsaren. Skriv i två rutor — en med default change, en med oninput. Skillnaden blir uppenbar.

EventCallback vs Action: EventCallback triggar automatisk re-render i förälderns komponent. Action gör det inte. Det är den centrala skillnaden — säg det rakt ut.

Workshop — guide för läraren

Bygg en sökruta med @bind:event="oninput" som filtrerar en lista av strängar.
Bryt ut en ProductCard-komponent med en Köp-knapp. Använd EventCallback<Product> för att meddela föräldern.
Föräldern visar en notis när köpet sker.
Lägg till en async handler som väntar 1 sekund (simulerat API-anrop) innan notisen visas. Visa att UI:t inte fryser.

// ProductCard.razor
<div class="card">
  <h4>@Product.Name — @Product.Price.ToString("C")</h4>
  <button @onclick="HandleBuy">Köp</button>
</div>

@code {
  [Parameter, EditorRequired] public Product Product { get; set; } = null!;
  [Parameter] public EventCallback<Product> OnBuy { get; set; }

  private Task HandleBuy() => OnBuy.InvokeAsync(Product);
}

För snabba

Lägg till debounce på sökrutan (vänta 300 ms efter sista knapptryck).
Två-vägs-bind mellan föräldern och en custom komponent med @bind-Value.

För dem som behöver stöd

Förbered en lista (10 strängar) som de bara behöver filtrera.
Visa en arbetsbild på whiteboard: input → bind → listfiltrering.

Vanliga frågor

Varför uppdateras inte UI:t när jag ändrar listan?

Du har sannolikt muterat en List i en bakgrundstråd eller timer. Lös med InvokeAsync(StateHasChanged).

När behöver jag anropa StateHasChanged manuellt?

Nästan aldrig efter en handler — Blazor anropar det automatiskt. Behövs när data ändras utanför en Blazor-event (timer, externt API-callback, message bus).

Min @bind sätter inte värdet förrän jag lämnar fältet — varför?

Default-eventet är onchange som triggas vid blur. Använd @bind:event="oninput" för instant.

Hemuppgift Övningar 1–4. Soloprojekt 1: bygg en TodoList-komponent där varje rad kan kryssas av och meddelar föräldern via EventCallback.

Förberedelse till nästa lektion Be studenterna ha minst 2 sidor i sin app som de vill kunna navigera mellan.

← L2 L4 — Routing →