Exemplo Prático Usando AspNet + Razor Pages + SQlite

O que é o Razor Pages? e Sua Estrutura

Esta seção introduz o conceito fundamental do Razor Pages e como ele organiza seus arquivos. O objetivo é compreender que, em vez de espalhar o código, o Razor Pages mantém a interface visual e a lógica de processamento unidas como um "par perfeito", facilitando a manutenção e o aprendizado para iniciantes.

O Razor Pages é uma estrutura do ASP.NET Core. Ele torna a criação de páginas web mais simples e organizada. Cada página é auto-contida, possuindo sua interface (HTML) e sua lógica (C#) trabalhando juntas.

Acompanhe o código no Gihub

https://github.com/w3aewander/ExerciciosAspNetCoreRazor

A Estrutura de Arquivos (O Par Perfeito)

.cshtml (A Vista)

É onde o HTML vive. Aqui usamos a sintaxe Razor (o símbolo @) para exibir dados do servidor no meio do seu código HTML.

<h1>Olá, @Model.NomeAluno</h1>

<form method="post"> 
    <input asp-for="Aluno.Nome" /> 
</form>

.cshtml.cs (O PageModel)

É o cérebro da página. Um arquivo C# onde você escreve a lógica, acessa o banco SQLite e processa os dados enviados pelo usuário.

public class IndexModel : PageModel { 
   public void OnGet() { 
   // Carrega dados 
  } 
}

Diretivas Essenciais & A Lógica do PageModel

Nesta seção, exploramos as regras de negócio e os comandos que fazem uma página Razor funcionar. Você entenderá as diretivas obrigatórias no topo do HTML e como o ciclo de vida da página é gerenciado através dos métodos OnGet e OnPost no C#.

Diretivas: O B-Á-BA

Para a página funcionar, ela precisa de três comandos no topo do arquivo .cshtml:

@page

Transforma o arquivo em uma página que o navegador consegue acessar via URL

@model

Diz à página qual é a classe C# (o PageModel) que cuidará dela.

@addTagHelper

Ativa os "superpoderes" do ASP.NET nas tags HTML comuns (como o asp-for).

Lógica: OnGet e OnPost

Entenda o fluxo básico de qualquer página web baseada em formulários.

1. O usuário pede a página

OnGet()

Disparado quando a página carrega. Usamos para buscar a lista de registros no SQLite e mostrar na tela.

2. O usuário preenche os dados

Nesta fase, a mágica do Data Binding acontece no navegador.

3. O usuário clica em "Enviar"

OnPost()

Disparado ao submeter. Aqui validamos se os dados estão corretos e salvamos no banco de dados.

O Poder do Data Binding

O Data Binding é o conceito mais importante do Razor Pages. É a sincronia automática entre a tela (HTML) e o código (C#). Interaja com o formulário abaixo para entender visualmente como o texto digitado no HTML é injetado automaticamente na variável C# sem precisar "caçar" os dados manualmente.

💻O Navegador (.cshtml)

Usamos o Tag Helper asp-for="Aluno.Nome"

Nome do AlunoIdade

➡️O Servidor (.cshtml.cs)

Variável decorada com [BindProperty]

publicAlunoAluno {get;set; }

// Estado Atual na Memória:
Aluno.Nome = "";
Aluno.Idade =0;

✨ A Mágica: Quando o formulário for enviado, o C# já terá esses valores prontos para salvar no SQLite!

Verbos HTTP & Experiência do Usuário (UX)

Por que os tutoriais básicos usam POST para tudo, mesmo para atualizar ou deletar? Aqui você visualizará as limitações nativas dos navegadores que justificam essa escolha didática. Além disso, testará como o JavaScript básico pode melhorar a experiência do usuário durante essas operações.

Por que não usamos PUT e DELETE?

Os navegadores padrão, através de formulários HTML simples (<form>), só suportam nativamente os métodos GET e POST. Para usar PUT/DELETE, precisaríamos de JavaScript complexo. O POST é o herói que resolve tudo de forma didática.

JavaScript e UX (Simulação)

Usamos JavaScript para tornar a aplicação mais "viva" e interativa antes mesmo de conversar com o servidor. Teste os conceitos abaixo:

🖱️ Evento Click

Mostra alertas de confirmação para prevenir erros.

⌨️ Evento Change

Valida campos assim que o usuário sai deles.

⌛ Estado de Loading

Avisa que o servidor está processando (salvando).