Módulo 3 · Arquitetura MVC — Capítulo 03

Views e Razor

Razor: como misturar C# e HTML na mesma página sem virar bagunça — sintaxe, layouts e partial views.

1. O que é Razor

Razor é a sintaxe de template do ASP.NET Core — arquivos .cshtml que misturam HTML normal com trechos de C#, prefixados por @. É conceitualmente parecido com qualquer template engine que você já tenha usado no Node (EJS, Handlebars, Pug), mas com C# completo disponível, não um subconjunto limitado de lógica.

Razor Views/Cliente/Detalhes.cshtml
@model Cliente

<h1>@Model.Nome</h1>
<p>E-mail: @Model.Email</p>

@if (Model.Ativo)
{
    <span class="badge">Ativo</span>
}
else
{
    <span class="badge inativo">Inativo</span>
}

<ul>
@foreach (var pedido in Model.Pedidos)
{
    <li>Pedido #@pedido.Id — @pedido.ValorTotal.ToString("C")</li>
}
</ul>
SintaxePapel
@model ClienteDeclara o tipo do modelo que a View espera receber
@Model.NomeInsere um valor C# direto no HTML
@if / @foreachControle de fluxo — idêntico ao C# normal, sem @ repetido dentro do bloco
Nota

Model (maiúsculo) dentro do .cshtml é a instância do tipo declarado em @model — exatamente o objeto passado pelo Controller em return View(cliente);, visto no capítulo anterior.

2. Layout — o "molde" compartilhado entre páginas

Assim como um template base.html em outros ecossistemas, um Layout Razor define a estrutura comum (cabeçalho, menu, rodapé) que todas as Views compartilham:

Razor Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - Meu Sistema</title>
</head>
<body>
    <nav>...</nav>

    <main>
        @RenderBody()
    </main>

    <footer>© 2026</footer>
</body>
</html>

@RenderBody() é onde o conteúdo específico de cada View entra. Uma View "assina" qual layout usar (ou herda o padrão configurado globalmente):

Razor _ViewStart.cshtml — layout padrão para todas as Views
@{
    Layout = "_Layout";
}

3. Partial Views — reaproveitando pedaços de HTML

Uma partial view é um fragmento de Razor reaproveitável entre páginas diferentes — o equivalente a um componente sem estado próprio:

Razor Views/Cliente/_CardCliente.cshtml
@model Cliente

<div class="card">
    <h3>@Model.Nome</h3>
    <p>@Model.Email</p>
</div>
Razor usando a partial dentro de outra View
@model List<Cliente>

<div class="grid">
@foreach (var cliente in Model)
{
    <partial name="_CardCliente" model="cliente" />
}
</div>

4. Tag Helpers — HTML com superpoderes de C#

Tag Helpers são atributos HTML especiais, processados pelo servidor, que geram marcação correta automaticamente — o exemplo mais comum é gerar URLs sem escrever a string manualmente:

Razor Tag Helpers comuns
<!-- gera <a href="/Cliente/Detalhes/42"> automaticamente -->
<a asp-controller="Cliente" asp-action="Detalhes" asp-route-id="42">Ver detalhes</a>

<form asp-controller="Cliente" asp-action="Novo" method="post">
    <input asp-for="Nome" />
    <span asp-validation-for="Nome"></span>
    <button type="submit">Salvar</button>
</form>
Dica

asp-for="Nome" gera automaticamente o name, id e valor atual do input com base na propriedade do modelo — e conecta com a validação do lado do servidor, assunto do capítulo 5.

5. Onde isso te leva

Com Views cobertas, o próximo capítulo trata do outro lado da comunicação: como os dados que o usuário envia (formulários, query strings) chegam de volta como objetos C# tipados — e a diferença entre um Model de domínio e um ViewModel feito sob medida para uma tela específica.

📌 Resumo do capítulo

  • Razor mistura C# (@) e HTML no mesmo arquivo .cshtml.
  • @model declara o tipo esperado; Model é a instância recebida do Controller.
  • Layouts (_Layout.cshtml + @RenderBody()) evitam repetir estrutura comum entre páginas.
  • Partial views reaproveitam fragmentos de HTML entre páginas diferentes.
  • Tag Helpers (asp-*) geram HTML correto automaticamente, ligado às rotas e ao modelo.

✏️ Praticando

  1. Crie um _Layout.cshtml com um menu simples e um _ViewStart.cshtml apontando para ele.
  2. Crie a View Detalhes.cshtml para o ClienteController do capítulo anterior, usando @model e exibindo os pedidos do cliente com @foreach.
  3. Extraia o card de cliente para uma partial view e reaproveite-a numa página de listagem.