How to Build a To-Do App in Blazor from Scratch in .NET

Blazor is Microsoft’s framework for building interactive web apps using C# instead of JavaScript. In this article, you’ll learn how to build a To-Do App in Blazor from scratch in .NET using Blazor Server, step-by-step, with code samples included. The final result will let users add, complete, and remove tasks — all with live updates and zero JavaScript.

Prerequisites

Before we begin, make sure you have:

• .NET 8 SDK or later
• Visual Studio 2022+ (with ASP.NET and web development workloads)
• Basic knowledge of C# and Razor syntax

Create a Blazor Server Project

Open a terminal or Visual Studio and run:

dotnet new blazorserver -n BlazorTodoApp
cd BlazorTodoApp

This creates the base Blazor Server project. Now you’re ready to build a To-Do App in Blazor from scratch.

Create the To-Do Model

Add a simple model to represent tasks.

Create a new folder called Models and add a file named TodoItem.cs:

namespace BlazorTodoApp.Models
{
    public class TodoItem
    {
        public string Title { get; set; }
        public bool IsDone { get; set; }
    }
}

Add the To-Do Component

In the Pages folder, add a new Razor component: Todo.razor.

Here’s a simple UI and logic for adding and managing tasks:

@page "/todo"
@using BlazorTodoApp.Models

<h3>My To-Do List</h3>

<input @bind="newTodo" placeholder="Enter new task" @onkeypress="HandleKeyPress" />
<button @onclick="AddTodo">Add</button>

<ul>
    @foreach (var item in todos)
    {
        <li>
            <input type="checkbox" @bind="item.IsDone" />
            <span style="@(item.IsDone ? "text-decoration: line-through;" : "")">@item.Title</span>
            <button @onclick="@(() => RemoveTodo(item))">Remove</button>
        </li>
    }
</ul>

@code {
    private string newTodo = string.Empty;
    private List<TodoItem> todos = new();

    private void AddTodo()
    {
        if (!string.IsNullOrWhiteSpace(newTodo))
        {
            todos.Add(new TodoItem { Title = newTodo });
            newTodo = string.Empty;
        }
    }

    private void RemoveTodo(TodoItem item)
    {
        todos.Remove(item);
    }

    private void HandleKeyPress(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            AddTodo();
        }
    }
}

Make sure to add this route to the navigation.

Open Shared/NavMenu.razor and add:

<NavLink href="todo" Match="NavLinkMatch.All">
    <span class="oi oi-list-rich" aria-hidden="true"></span> To-Do
</NavLink>

Run the App

Now run your project:

dotnet run

Visit https://localhost:5001/todo in your browser. You should be able to add tasks, mark them done, and remove them — live and instant, thanks to Blazor’s real-time UI updates.

What’s Next?

Right now, the list resets when the page refreshes. For persistence, consider:

• Saving to local storage (via JS interop)
• Using a backend database (SQL Server, SQLite, etc.)
• Integrating Entity Framework Core

You just learned how to build a To-Do App in Blazor from scratch in .NET using Blazor Server. You created a simple model, added a UI component, and implemented interactive functionality — all without touching JavaScript.

This example gives you a great starting point to explore more advanced Blazor features like state management, forms, or database integration.