Building a Simple To-Do List Application with Blazor

Introduction

Blazor is an exciting web development framework that allows developers to build interactive web applications using C# and .NET instead of traditional JavaScript frameworks. In this tutorial, we will explore how to create a basic To-Do list application with Blazor, demonstrating the power and simplicity of this framework.

Prerequisites

Before getting started, make sure you have the following prerequisites:

1. Visual Studio or Visual Studio Code.
2. .NET Core SDK 3.1 or later.
3. Basic knowledge of C# and HTML.

Creating a New Blazor Application

To start our To-Do list project, let’s create a new Blazor application:

1. Open your development environment (Visual Studio or Visual Studio Code).
2. Create a new Blazor application using the following command:

dotnet new blazor -n ToDoList

3. Navigate to the project directory:

cd ToDoList

4. Open the project in your chosen development environment.

Creating the To-Do List Component

In Blazor, components are the building blocks of your application’s user interface. To create a To-Do list, we’ll build a custom component.

1. Create a new Razor component called “ToDoList.razor” in the “Pages” folder.
2. In the “ToDoList.razor” file, replace the default content with the following code:

@page "/todo"

<h3>To-Do List</h3>

<ul>
    @foreach (var item in toDoItems)
    {
        <li>@item</li>
    }
</ul>

<input @bind="newToDoItem" />
<button @onclick="AddToDoItem">Add</button>

@code {
    List<string> toDoItems = new List<string>();
    string newToDoItem;

    void AddToDoItem()
    {
        if (!string.IsNullOrWhiteSpace(newToDoItem))
        {
            toDoItems.Add(newToDoItem);
            newToDoItem = string.Empty;
        }
    }
}

This code defines a simple To-Do list component with an input field, a button to add items, and a list to display the items.

Integrating the ToDoList Component

Now that we have created the To-Do list component, let’s integrate it into the main layout of our application.

1. Open the “MainLayout.razor” file located in the “Shared” folder.
2. Update the content within the <div class="content"> element to include the <ToDoList /> component:

<div class="content">
    <RouteView RouteData="@routeData" DefaultLayout="typeof(MainLayout)" LayoutView="typeof(MainLayout)" />
    <ToDoList />
</div>

Running the Application

With the To-Do list component integrated, it’s time to run the application and see our simple To-Do list in action.

1. Use the following command to build and run the Blazor application:

dotnet watch run

2. Open a web browser and navigate to the URL displayed in your terminal (usually “https://localhost:5001/todo”).

You will now see your To-Do list, where you can add and remove items.

Conclusion

Blazor is a powerful web development framework that simplifies the process of creating interactive web applications using C# and .NET. In this tutorial, we built a basic To-Do list application, demonstrating the ease with which you can create dynamic web components. You can expand upon this project by adding features like task completion status, data persistence, and more. Blazor’s versatility and developer-friendly features make it an excellent choice for modern web development.