Razor-syntax & komponenter

Razor-syntax i ett notskal

Razor är ett sätt att blanda HTML och C# i samma fil. Allting som börjar med @ är C#; resten är HTML.

<h1>Välkommen, @anvandarnamn</h1>

<p>Klockan är @DateTime.Now.ToString("HH:mm")</p>

@if (loggedIn)
{
    <p>Du är inloggad.</p>
}
else
{
    <a href="/login">Logga in</a>
}

<ul>
    @foreach (var item in items)
    {
        <li>@item.Namn — @item.Pris.ToString("C")</li>
    }
</ul>

En komponent — anatomi

En komponent är en .razor-fil. Den består typiskt av tre delar:

@* Components/UserCard.razor *@

@* 1. Direktiv — @page, @inject, @using *@
@using BlazorApp.Models

@* 2. Markup med inbäddad C# *@
<div class="card">
    <h3>@User.FullName</h3>
    <p>@User.Email</p>
    <button @onclick="ShowDetails">Visa mer</button>
</div>

@* 3. Code block — fält, parametrar, metoder *@
@code {
    [Parameter, EditorRequired] public User User { get; set; } = default!;
    [Parameter] public EventCallback<User> OnDetailsRequested { get; set; }

    private Task ShowDetails() => OnDetailsRequested.InvokeAsync(User);
}

Parametrar — skicka data in

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public int Count { get; set; }
    [Parameter, EditorRequired] public User User { get; set; } = default!;
    [Parameter(CaptureUnmatchedValues = true)]
    public IDictionary<string, object>? Extra { get; set; }
}

Användning i förälder:

<UserCard User="aktivAnvandare" Title="VIP-kund" Count="3" />

ChildContent — skicka markup in

@* Card.razor *@
<div class="card">
    <div class="card-header">@Header</div>
    <div class="card-body">@ChildContent</div>
</div>

@code {
    [Parameter] public RenderFragment? Header { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

Använd komponenten med innehåll mellan taggarna:

<Card>
    <Header><h2>Min titel</h2></Header>
    <ChildContent>
        <p>Här är innehållet i kortet.</p>
        <button>Klick</button>
    </ChildContent>
</Card>

Komponentens livscykel

Blazor anropar speciella metoder vid bestämda tidpunkter. De viktigaste:

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

    protected override async Task OnInitializedAsync()
    {
        products = await Http.GetFromJsonAsync<List<Product>>("api/products")
                   ?? new();
    }

    protected override void OnParametersSet()
    {
        // Körs varje gång CategoryId ändras utifrån
        FilterProducts();
    }
}

Code-behind — separera C# från markup

För större komponenter kan koden flyttas till en partial class i en separat .razor.cs-fil:

// Components/UserCard.razor.cs
namespace BlazorApp.Components;

public partial class UserCard
{
    [Parameter, EditorRequired] public User User { get; set; } = default!;

    private async Task ShowDetails()
    {
        // logik här
    }
}

I UserCard.razor behövs då bara markup. Detta gör större komponenter mer lättlästa och underlättar enhetstester.

← Föregående: Intro Nästa: Data binding & händelser →