A full-featured Todo application demonstrates the core patterns used in real Blazor WASM projects.

Architecture

• Components: TodoList, TodoItem, AddTodoForm, FilterBar
• AppState service for shared state
• EditForm with validation for adding todos
• EventCallback for child-to-parent communication

Core AppState

public class TodoState
{
    public List<TodoItem> Items { get; private set; } = new();
    public event Action? OnChange;

    public void AddTodo(string title)
    {
        Items.Add(new TodoItem { Title = title, Id = Guid.NewGuid() });
        NotifyStateChanged();
    }

    public void ToggleComplete(Guid id)
    {
        var item = Items.FirstOrDefault(x => x.Id == id);
        if (item != null) { item.IsComplete = !item.IsComplete; NotifyStateChanged(); }
    }

    public void Delete(Guid id)
    {
        Items.RemoveAll(x => x.Id == id);
        NotifyStateChanged();
    }

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

Key Lessons

• Keep page components thin — delegate logic to services
• Always implement IDisposable when subscribing to events
• Validate all user input with EditForm and DataAnnotations

Reference:

Wikipedia: MVVM Pattern

https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel