Services

Learning objectives#

• Move business logic into services
• Design interfaces that work on server and WebAssembly
• Build a state container service
• Test services without a UI

Explanation#

A service is a plain C# class registered in DI. Components inject it and stay thin.

For apps that use both Interactive Server and WebAssembly, define an interface (IProductService) with two implementations: one that uses EF Core on the server, one that calls the API with HttpClient in the client.

A state container is a scoped service holding shared UI state (cart, filters) and raising an OnChange event.

Code example: A cart state container#

1public class CartState
2{
3    private readonly List<CartLine> lines = [];
4    public IReadOnlyList<CartLine> Lines => lines;
5    public decimal Total => lines.Sum(l => l.Price * l.Qty);
6    public event Action? OnChange;
7

8    public void Add(Product p)
9    {
10        var line = lines.FirstOrDefault(l => l.ProductId == p.Id);
11        if (line is null) lines.Add(new CartLine(p.Id, p.Name, p.Price, 1));
12        else line.Qty++;
13        OnChange?.Invoke();
14    }
15}
16public class CartLine(int productId, string name, decimal price, int qty)
17{
18    public int ProductId { get; } = productId; public string Name { get; } = name;
19    public decimal Price { get; } = price; public int Qty { get; set; } = qty;
20}
21

22// Program.cs: builder.Services.AddScoped<CartState>();
23// CartBadge.razor: @inject CartState Cart  →  subscribe in OnInitialized: Cart.OnChange += StateHasChanged;
24//                  and unsubscribe in Dispose: Cart.OnChange -= StateHasChanged;

Adding a laptop on the product page instantly updates the cart badge in the header to “1 · ₹55,000”.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. The service owns the cart lines and the total calculation.
2. Add raises OnChange after every change.
3. Any component can subscribe and call StateHasChanged.
4. Unsubscribing in Dispose prevents memory leaks.

Real-world use case#

Common mistakes#

Best practices#

• Thin components, rich services
• Interfaces for render-mode-specific implementations
• Unit test services directly
• Unsubscribe from events in Dispose

Remember this#

Practice exercise#

1public void Remove(int productId)
2{
3    lines.RemoveAll(l => l.ProductId == productId);
4    OnChange?.Invoke();
5}

Mini quiz#

Want more? Practise all Blazor MCQs · Blazor interview questions

Related topics#

My notes#

Saved in this browser.