Blazor Implementing CRUD Operations: A Step-by-Step Guide

Introduction

Blazor is a versatile and powerful web framework that allows developers to build interactive web applications using C# and .NET. One of the fundamental operations in web development is CRUD (Create, Read, Update, Delete). In this article, we will explore how to implement CRUD operations in a Blazor application. By the end of this tutorial, you’ll have a clear understanding of how to create, read, update, and delete data in a Blazor application.

Prerequisites

Before diving into Blazor CRUD operations, make sure you have the following prerequisites:

1. Visual Studio or Visual Studio Code with .NET Core installed.
2. Basic knowledge of C# and HTML.
3. Familiarity with Blazor components and routing.

Setting Up the Blazor Application

Let’s start by creating a new Blazor application. Open your preferred development environment, and run the following commands in the terminal:

dotnet new blazor -n BlazorCRUD
cd BlazorCRUD

This will create a new Blazor application named “BlazorCRUD.”

Data Model

To implement CRUD operations, you need data to work with. In this example, we’ll create a simple “TodoItem” model to represent our data. In the Data folder, add a class called “TodoItem.cs”:

public class TodoItem
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsDone { get; set; }
}

Implementing the Data Service

To manage the CRUD operations, create a service to handle data operations. In the Services folder, add a class called “TodoDataService.cs”:

using System.Collections.Generic;

public class TodoDataService
{
    private List<TodoItem> todos = new List<TodoItem>();

    public List<TodoItem> GetAllTodos()
    {
        return todos;
    }

    public void AddTodo(TodoItem todo)
    {
        todo.Id = todos.Count + 1;
        todos.Add(todo);
    }

    public void UpdateTodo(TodoItem todo)
    {
        var existingTodo = todos.Find(t => t.Id == todo.Id);
        if (existingTodo != null)
        {
            existingTodo.Title = todo.Title;
            existingTodo.IsDone = todo.IsDone;
        }
    }

    public void DeleteTodo(int id)
    {
        todos.RemoveAll(t => t.Id == id);
    }
}

Creating Blazor Components

Now, let’s create Blazor components for each CRUD operation.

1. Create a Component for Listing Todos In the Pages folder, add a Blazor component called “TodoList.razor” to display the list of todos:

   @page "/todolist"

   <h3>Todo List</h3>

   <table class="table">
       <thead>
           <tr>
               <th>ID</th>
               <th>Title</th>
               <th>Is Done</th>
           </tr>
       </thead>
       <tbody>
           @foreach (var todo in todos)
           {
               <tr>
                   <td>@todo.Id</td>
                   <td>@todo.Title</td>
                   <td>@todo.IsDone</td>
               </tr>
           }
       </tbody>
   </table>

   @code {
       List<TodoItem> todos;

       protected override void OnInitialized()
       {
           todos = todoDataService.GetAllTodos();
       }
   }

2. Create a Component for Adding Todos Add another Blazor component called “AddTodo.razor” for creating new todos:

   @page "/addtodo"

   <h3>Add Todo</h3>

   <form>
       <div class="form-group">
           <label for="title">Title</label>
           <input type="text" id="title" class="form-control" @bind="todo.Title" />
       </div>
       <div class="form-group">
           <label for="isDone">Is Done</label>
           <input type="checkbox" id="isDone" class="form-check-input" @bind="todo.IsDone" />
       </div>
       <button type="submit" class="btn btn-primary" @onclick="AddTodo">Add Todo</button>
   </form>

   @code {
       TodoItem todo = new TodoItem();
       [Inject] private TodoDataService todoDataService { get; set; }

       private void AddTodo()
       {
           todoDataService.AddTodo(todo);
           NavigationManager.NavigateTo("/todolist");
       }
   }

3. Create a Component for Editing Todos Now, add a component for editing existing todos:

   @page "/edittodo/{id}"

   <h3>Edit Todo</h3>

   <form>
       <div class="form-group">
           <label for="title">Title</label>
           <input type="text" id="title" class="form-control" @bind="todo.Title" />
       </div>
       <div class="form-group">
           <label for="isDone">Is Done</label>
           <input type="checkbox" id="isDone" class="form-check-input" @bind="todo.IsDone" />
       </div>
       <button type="submit" class="btn btn-primary" @onclick="UpdateTodo">Update Todo</button>
   </form>

   @code {
       [Parameter] public int id { get; set; }
       TodoItem todo;
       [Inject] private TodoDataService todoDataService { get; set; }
       [Inject] private NavigationManager NavigationManager { get; set; }

       protected override void OnInitialized()
       {
           todo = todoDataService.GetAllTodos().Find(t => t.Id == id);
       }

       private void UpdateTodo()
       {
           todoDataService.UpdateTodo(todo);
           NavigationManager.NavigateTo("/todolist");
       }
   }

4. Create a Component for Deleting Todos Finally, create a component to handle todo deletion:

   @page "/deletetodo/{id}"

   <h3>Delete Todo</h3>

   <p>Are you sure you want to delete this todo?</p>
   <button class="btn btn-danger" @onclick="DeleteTodo">Delete</button>

   @code {
       [Parameter] public int id { get; set; }
       [Inject] private TodoDataService todoDataService { get; set; }
       [Inject] private NavigationManager NavigationManager { get; set; }

       private void DeleteTodo()
       {
           todoDataService.DeleteTodo(id);
           NavigationManager.NavigateTo("/todolist");
       }
   }

5. Update Navigation Menu Open the “MainLayout.razor” file in the Shared folder and update the navigation menu to include links to your CRUD components: “`html

BlazorCRUD