Todo List with server side blazor / balzor components

Todo.razor

@page "/todo"


<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<ul>
    @foreach (var todo in todos)
    {
        <li>
            <input type="checkbox" @bind="todo.IsDone" />
            <input @bind="todo.Title" />
            <label>label @(todo.Responsible)</label>
        </li>
    }
</ul>


<input placeholder="Something todo" @bind="newTodo" @onkeyup="AddTodoOnEnter" />
<select @bind="newPerson">
    @foreach (var person in people)
    {
    <option value="@person" >@person.name (@person.id)</option>
    }
    </select>

<button @onclick="AddTodo">Add todo</button>

@code {



    private  List<(int id, string name)> people = new List<(int id, string name)>() { (1, "Tom"), (2, "Luise"), (3,"Jane") };
    private IList<TodoItem> todos = new List<TodoItem>();
    private string newTodo;
    private string newPerson;

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo, Responsible = "who " + newPerson });

            newTodo = string.Empty;
        }
    }

    private void AddTodoOnEnter(UIKeyboardEventArgs eventArgs)
    {
        // fire on enter uIKeyboardEvent
        if (eventArgs.Key == "Enter")
        {
            AddTodo();
        }
        else
        {
            // throw new NotImplementedException();
        }

    }

}

This revision seems to work