Data binding & händelser

En-vägs vs två-vägs binding

En-vägs binding är "läs från C# till UI" — vilket @variabel redan ger oss. Två-vägs binding går åt båda hållen och skrivs med @bind.

@page "/binding-demo"

<h1>Hej, @namn!</h1>

<input @bind="namn" />                          @* uppdaterar vid blur *@
<input @bind="namn" @bind:event="oninput" />    @* uppdaterar vid varje tangent *@

@code {
    private string namn = "Världen";
}

Formatering vid binding

<input type="date" @bind="birthDate" @bind:format="yyyy-MM-dd" />

@code {
    private DateTime birthDate = DateTime.Today;
}

Händelser — @onclick och vänner

<button @onclick="Increment">+1</button>
<button @onclick="@(() => count -= 1)">-1</button>
<button @onclick="Reset">Återställ</button>

<p>Antal: @count</p>

@code {
    private int count = 0;

    private void Increment() => count++;
    private void Reset()     => count  = 0;
}

@* @onchange — uppdateras vid blur (fokustapp) *@
<input @onchange="e => namn = e.Value?.ToString() ?? """ value="@namn" />

@* @oninput — uppdateras direkt vid varje tangenttryckning *@
<input @oninput="e => namn = e.Value?.ToString() ?? """ value="@namn" />

@* @bind är default onchange; @bind:event="oninput" ändrar till oninput *@
<input @bind="namn" />
<input @bind="namn" @bind:event="oninput" />

<p>Namn: @namn</p>

@code { private string namn = ""; }

Event-argument

<input @onkeydown="HandleKey" />
<div @onclick="HandleClick">Klicka var som helst</div>

@code {
    private void HandleKey(KeyboardEventArgs e)
    {
        if (e.Key == "Enter") Console.WriteLine("Enter trycktes");
    }

    private void HandleClick(MouseEventArgs e)
    {
        Console.WriteLine($"Klick på ({e.ClientX}, {e.ClientY})");
    }
}

Asynkrona händelsehanterare

<button @onclick="LoadData" disabled="@isLoading">
    @(isLoading ? "Laddar..." : "Hämta data")
</button>

@code {
    private bool isLoading;
    private List<Product> products = new();

    private async Task LoadData()
    {
        isLoading = true;
        products = await Http.GetFromJsonAsync<List<Product>>("api/products") ?? new();
        isLoading = false;
    }
}

EventCallback — barn till förälder

När en barnkomponent vill berätta något för sin förälder används EventCallback:

@* ProductCard.razor *@
<div class="card">
    <h3>@Product.Name</h3>
    <p>@Product.Price.ToString("C")</p>
    <button @onclick="HandleBuy">Lägg i kundvagn</button>
</div>

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

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

@* Förälder: Shop.razor *@
@foreach (var p in products)
{
    <ProductCard Product="p" OnBuy="AddToCart" />
}

<p>I kundvagn: @cart.Count</p>

@code {
    private List<Product> products = new();
    private List<Product> cart     = new();

    private void AddToCart(Product p) => cart.Add(p);
}

Två-vägs binding mellan komponenter

Ibland vill man @bind mot ett värde i en barnkomponent. Då behöver barnet både en Value-parameter och en ValueChanged EventCallback:

@* SearchBox.razor *@
<input value="@Value" @oninput="OnInput" placeholder="Sök..." />

@code {
    [Parameter] public string Value { get; set; } = "";
    [Parameter] public EventCallback<string> ValueChanged { get; set; }

    private Task OnInput(ChangeEventArgs e)
        => ValueChanged.InvokeAsync(e.Value?.ToString() ?? "");
}

@* Förälder *@
<SearchBox @bind-Value="searchTerm" />
<p>Du söker efter: @searchTerm</p>

@code { private string searchTerm = ""; }

StateHasChanged — det reaktiva hjärtat

Blazor renderar om en komponent när:

• En händelsehanterare körts klart (automatiskt)
• En parameter ändrats utifrån (automatiskt)
• Du anropar StateHasChanged() själv (manuellt)

private System.Threading.Timer? _timer;

protected override void OnInitialized()
{
    _timer = new System.Threading.Timer(_ =>
    {
        sekunder++;
        InvokeAsync(StateHasChanged);  // viktig — vi är på en annan tråd
    }, null, 0, 1000);
}

← Föregående: Komponenter Nästa: Routing & layout →