TodoApp/Pages/TodoList.razor

@page "/api/todo"
@using TodoApp.Models
@inject TodoApp.Service.ITodoService TodoService
@inject NavigationManager navigationManager

<PageTitle>TodoApp</PageTitle>

<h3>TODO List</h3>

@if (todoItems == null)
{
    <p>Loading...</p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Title</th>
                <th>Completed</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in todoItems)
            {
                <tr>
                    <td>@item.Id</td>
                    <td>@item.Title</td>
                    <td>@(item.IsCompleted ? "Yes" : "No")</td>
                    <td>
                        <button class="btn btn-primary" @onclick="() => EditTodoItem(item)">Edit</button>
                        <button class="btn btn-danger" @onclick="() => DeleteTodoItem(item.Id)">Delete</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

<button class="button" @onclick="AddTodoItem">Add New Item</button>

@code {
    private List<Models.TodoItem> todoItems = null!;
    protected override async Task OnInitializedAsync()
    {
        todoItems = await TodoService.GetTodoItems();
    }
    private void AddTodoItem()
    {
        navigationManager.NavigateTo("/api/todo/add");
    }

    private void EditTodoItem(Models.TodoItem item)
    {
        navigationManager.NavigateTo($"/api/todo/{item.Id}");
    }

    private async Task DeleteTodoItem(int id)
    {
        await TodoService.DeleteTodoItem(id);
        todoItems = await TodoService.GetTodoItems();
    }
}