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