State & Dependency Injection

Dependency Injection i Blazor

Blazor använder samma DI-system som ASP.NET Core. Du registrerar tjänster i Program.cs och får ut dem i komponenter via @inject.

// Program.cs
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
                .AddInteractiveServerComponents();

// Egna tjänster
builder.Services.AddSingleton<IConfigService, ConfigService>();
builder.Services.AddScoped<CartService>();
builder.Services.AddTransient<EmailSender>();
builder.Services.AddHttpClient();

var app = builder.Build();

Livstider — viktigt att förstå

Använd en tjänst i en komponent

// Services/CartService.cs
public class CartService
{
    private readonly List<Product> _items = new();

    public IReadOnlyList<Product> Items => _items;
    public int Count => _items.Count;

    public event Action? OnChange;

    public void Add(Product p)
    {
        _items.Add(p);
        OnChange?.Invoke();
    }

    public void Remove(Product p)
    {
        _items.Remove(p);
        OnChange?.Invoke();
    }
}

@page "/cart"
@inject CartService Cart
@implements IDisposable

<h1>Kundvagn (@Cart.Count)</h1>

<ul>
    @foreach (var p in Cart.Items)
    {
        <li>@p.Name <button @onclick="() => Cart.Remove(p)">Ta bort</button></li>
    }
</ul>

@code {
    protected override void OnInitialized()
        => Cart.OnChange += StateHasChanged;

    public void Dispose()
        => Cart.OnChange -= StateHasChanged;
}

CascadingValue — skicka data ner i trädet

Ibland vill man att alla nestade komponenter ska kunna nå ett värde, utan att behöva skicka det som parameter på varje nivå.

@* App.razor eller en layout *@
<CascadingValue Value="currentUser" Name="User">
    <CascadingValue Value="theme">
        @Body
    </CascadingValue>
</CascadingValue>

@code {
    private User currentUser = new("Anna");
    private Theme theme = new("dark");
}

@* Vilken nestad komponent som helst *@
@code {
    [CascadingParameter(Name = "User")] public User CurrentUser { get; set; } = default!;
    [CascadingParameter] public Theme CurrentTheme { get; set; } = default!;
}

App-state-pattern

För större appar samla relaterad state i en tjänst som registreras som Scoped. Det är Blazors enklaste och mest robusta pattern för delad state.

public class AppState
{
    public UserSession? CurrentUser { get; private set; }
    public string Theme { get; private set; } = "light";

    public event Action? OnChange;

    public void SetUser(UserSession user)
    {
        CurrentUser = user;
        NotifyChanged();
    }

    public void ToggleTheme()
    {
        Theme = Theme == "light" ? "dark" : "light";
        NotifyChanged();
    }

    private void NotifyChanged() => OnChange?.Invoke();
}

// Program.cs
builder.Services.AddScoped<AppState>();

Konfiguration som tjänst

// appsettings.json
{
  "Api": { "BaseUrl": "https://localhost:5001/api" }
}

// Program.cs
builder.Services.Configure<ApiOptions>(builder.Configuration.GetSection("Api"));

// Komponent
@inject IOptions<ApiOptions> ApiOpts
<p>API: @ApiOpts.Value.BaseUrl</p>

OwningComponentBase — egen scope för en komponent

Om en komponent själv ska skapa en ny scope för sina tjänster (typiskt för DbContext):

@inherits OwningComponentBase<AppDbContext>

@code {
    protected override async Task OnInitializedAsync()
    {
        var products = await Service.Products.ToListAsync();
    }
}

← Föregående: Formulär Nästa: API & Auth →