I wrote this simple Todo list app to demonstrate how Blazor stores and manipulates component state.

Todo.razor

@using System.Collections.Generic;
@using System.ComponentModel.DataAnnotations;

@page "/todo"

<table>
    <tr>
        <th>Description</th>
        <th>Delete</th>
    </tr>
    @foreach (TodoItem t in todos){
        <tr>
            <td>@t.Description</td>
            <td><button @onclick="(()=>todos.Remove(t))">Delete</button></td>
        </tr>
    }
    <tr>
        <td>
            <EditForm Model="@todoModel" OnValidSubmit="@HandleSubmit">
                <DataAnnotationsValidator />
                <label for="description">Description</label>
                <InputText id="description" @bind-Value="todoModel.Description" class="form-control"/>
                <button type="submit" class="btn btn-primary">Add</button>
            </EditForm>
        </td>
    </tr>
</table>

@code {
    private List<TodoItem> todos = new List<TodoItem>();
    
    private TodoItem todoModel = new TodoItem();
    
    public class TodoItem {
        [Required]
        public string Description { get; set; }
    }
    
    private void HandleSubmit(){
        TodoItem t = new TodoItem();
        t.Description = todoModel.Description;
        todos.Add(t);
        todoModel.Description = "";
    }
}
Tags: projects