Skip to content
Explain to Dev
Explain to Dev

Empowering developers with the knowledge to build, create, and innovate in the software world.

  • Home
  • About
  • Java
  • Python
  • PHP
  • .NET
  • Node.js
  • SQL
  • Privacy Policy
Explain to Dev

Empowering developers with the knowledge to build, create, and innovate in the software world.

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

etd_admin, May 10, 2025May 10, 2025

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.

.NET .NETAppsBlazor

Post navigation

Previous post
Next post

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

©2025 Explain to Dev | WordPress Theme by SuperbThemes