Como Criar um CRUD Web Usando C# e Blazor no .NET

Neste tutorial, vamos aprender a criar um aplicativo CRUD (Create, Read, Update, Delete) utilizando C# e Blazor no .NET. Vamos construir uma aplicação web simples que permite gerenciar uma lista de tarefas (To-Do list).

Sumário

1. Introdução ao Blazor
2. Configuração do Ambiente
3. Criando o Projeto Blazor
4. Configuração do Banco de Dados
5. Implementando o Modelo
6. Criando o Repositório
7. Construindo os Componentes Blazor
8. Configurando Rotas e Navegação
9. Testando a Aplicação
10. Conclusão

Introdução ao Blazor

Blazor é uma estrutura de interface do usuário para a criação de aplicações web interativas do lado do cliente usando C# em vez de JavaScript. Com Blazor, podemos construir componentes reutilizáveis e desenvolver aplicações web modernas de maneira mais simples e eficiente.

Configuração do Ambiente

Para começar, você precisa configurar seu ambiente de desenvolvimento:

1. Instale o .NET SDK: Certifique-se de ter a versão mais recente do .NET SDK instalada. Você pode baixar em dotnet.microsoft.com/download.
2. Visual Studio: Instale o Visual Studio 2019 ou superior com a carga de trabalho “ASP.NET e desenvolvimento web”.
3. Banco de Dados: Vamos usar o SQLite para simplicidade. Certifique-se de ter o SQLite instalado.

Criando o Projeto Blazor

Abra o Visual Studio e siga os seguintes passos para criar um novo projeto Blazor:

1. Novo Projeto: Selecione “Create a new project”.
2. Modelo de Projeto: Escolha “Blazor WebAssembly App” e clique em “Next”.
3. Configuração do Projeto: Nomeie seu projeto (por exemplo, BlazorTodoApp) e selecione a localização onde deseja salvar o projeto.
4. Configurações Adicionais: Selecione “.NET 6.0” como a versão do framework e marque a opção “ASP.NET Core hosted”.

Configuração do Banco de Dados

Vamos configurar o Entity Framework Core para usar o SQLite como nosso banco de dados.

1. Instale os pacotes NuGet:

• Microsoft.EntityFrameworkCore.Sqlite
• Microsoft.EntityFrameworkCore.Tools

1. Crie o contexto do banco de dados:

   using Microsoft.EntityFrameworkCore;

   namespace BlazorTodoApp.Data
   {
       public class TodoContext : DbContext
       {
           public TodoContext(DbContextOptions<TodoContext> options) : base(options) { }

           public DbSet<TodoItem> TodoItems { get; set; }
       }
   }

3. Modelo de dados:

   namespace BlazorTodoApp.Data
   {
       public class TodoItem
       {
           public int Id { get; set; }
           public string Title { get; set; }
           public bool IsCompleted { get; set; }
       }
   }

Criando o Repositório

Vamos criar um repositório para gerenciar as operações CRUD.

1. Interface do Repositório:

   using System.Collections.Generic;
   using System.Threading.Tasks;

   namespace BlazorTodoApp.Data
   {
       public interface ITodoRepository
       {
           Task<IEnumerable<TodoItem>> GetTodosAsync();
           Task<TodoItem> GetTodoByIdAsync(int id);
           Task AddTodoAsync(TodoItem todo);
           Task UpdateTodoAsync(TodoItem todo);
           Task DeleteTodoAsync(int id);
       }
   }

2. Implementação do Repositório:

   using Microsoft.EntityFrameworkCore;
   using System.Collections.Generic;
   using System.Threading.Tasks;

   namespace BlazorTodoApp.Data
   {
       public class TodoRepository : ITodoRepository
       {
           private readonly TodoContext _context;

           public TodoRepository(TodoContext context)
           {
               _context = context;
           }

           public async Task<IEnumerable<TodoItem>> GetTodosAsync()
           {
               return await _context.TodoItems.ToListAsync();
           }

           public async Task<TodoItem> GetTodoByIdAsync(int id)
           {
               return await _context.TodoItems.FindAsync(id);
           }

           public async Task AddTodoAsync(TodoItem todo)
           {
               _context.TodoItems.Add(todo);
               await _context.SaveChangesAsync();
           }

           public async Task UpdateTodoAsync(TodoItem todo)
           {
               _context.TodoItems.Update(todo);
               await _context.SaveChangesAsync();
           }

           public async Task DeleteTodoAsync(int id)
           {
               var todo = await _context.TodoItems.FindAsync(id);
               if (todo != null)
               {
                   _context.TodoItems.Remove(todo);
                   await _context.SaveChangesAsync();
               }
           }
       }
   }

Construindo os Componentes Blazor

Vamos criar componentes para listar, adicionar, editar e deletar tarefas.

1. Lista de Tarefas:

   @page "/todos"
   @inject ITodoRepository TodoRepository

   <h3>Lista de Tarefas</h3>

   <ul>
       @foreach (var todo in todos)
       {
           <li>@todo.Title - @(todo.IsCompleted ? "Completed" : "Pending")
               <button @onclick="() => DeleteTodoAsync(todo.Id)">Delete</button>
           </li>
       }
   </ul>

   <button @onclick="NavigateToAddTodo">Add Todo</button>

   @code {
       private IEnumerable<TodoItem> todos;

       protected override async Task OnInitializedAsync()
       {
           todos = await TodoRepository.GetTodosAsync();
       }

       private void NavigateToAddTodo()
       {
           NavigationManager.NavigateTo("/add-todo");
       }

       private async Task DeleteTodoAsync(int id)
       {
           await TodoRepository.DeleteTodoAsync(id);
           todos = await TodoRepository.GetTodosAsync();
       }
   }

2. Adicionar Tarefa:

   @page "/add-todo"
   @inject ITodoRepository TodoRepository

   <h3>Adicionar Tarefa</h3>

   <EditForm Model="newTodo" OnValidSubmit="HandleValidSubmit">
       <InputText @bind-Value="newTodo.Title" placeholder="Título" />
       <button type="submit">Adicionar</button>
   </EditForm>

   @code {
       private TodoItem newTodo = new TodoItem();

       private async Task HandleValidSubmit()
       {
           await TodoRepository.AddTodoAsync(newTodo);
           NavigationManager.NavigateTo("/todos");
       }
   }

Configurando Rotas e Navegação

Certifique-se de que suas rotas estão configuradas no App.razor e MainLayout.razor.

1. App.razor:

   <Router AppAssembly="@typeof(Program).Assembly">
       <Found Context="routeData">
           <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
           <FocusOnNavigate RouteData="@routeData" Selector="h1" />
       </Found>
       <NotFound>
           <LayoutView Layout="@typeof(MainLayout)">
               <p>Sorry, there's nothing at this address.</p>
           </LayoutView>
       </NotFound>
   </Router>

2. MainLayout.razor:

   <div class="sidebar">
       <NavMenu />
   </div>

   <div class="main">
       <div class="top-row px-4">
           <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
       </div>

       <div class="content px-4">
           @Body
       </div>
   </div>

Testando a Aplicação

Execute o projeto pressionando F5 no Visual Studio. Navegue até /todos para ver a lista de tarefas. Adicione, edite e delete tarefas para garantir que todas as operações CRUD estejam funcionando corretamente.

Conclusão

Neste tutorial, construímos um aplicativo CRUD básico utilizando C# e Blazor no .NET. Aprendemos a configurar o ambiente, criar um projeto Blazor, configurar o banco de dados, implementar o modelo de dados, criar repositórios e construir componentes Blazor para gerenciar nossas tarefas. Blazor oferece uma maneira poderosa e eficiente de desenvolver aplicações web interativas utilizando C#.