Introdução às Vistas Razor em ASP.NET MVC

ASP.NET MVC continua sendo uma pedra angular do desenvolvimento web na pilha Microsoft, oferecendo uma separação limpa de preocupações e controle de grãos finos sobre as respostas HTTP. No coração de seu motor de visualização encontra-se Razor, uma sintaxe poderosa que permite que você misture código C# com HTML perfeitamente. Visualizações Razor (arquivos com a extensão ]) são a maneira padrão de gerar conteúdo HTML dinâmico em aplicações modernas ASP.NET MVC. Eles permitem transformar dados de controladores em páginas web ricas e interativas sem escrever controles de servidor-lado cúberso ou misturar lógica de negócios em camadas de apresentação.

Este guia expandido mergulha mais fundo em visões Razor, cobrindo sintaxe, recursos avançados como layouts e parciais, ligação a modelos, integração de validação e melhores práticas de desempenho. Se você está construindo uma pequena aplicação intranet ou um site público de grande escala, masterizar Razor irá ajudá-lo a entregar páginas mantendíveis, performantes e SEO-friendly.

O que são as visões de Razor?

As visões de Razor são modelos do lado do servidor que combinam a marcação HTML com o código C# incorporado. Quando um usuário solicita uma URL, o pipeline MVC encaminha a solicitação para uma ação do controlador. Essa ação normalmente retorna um chamando . O framework então localiza o arquivo correspondente , executa o código Razor para produzir uma string HTML, e envia essa string para o navegador do cliente.

O principal benefício é que Razor compila visualizações em classes .NET em tempo de execução ou tempo de compilação (dependendo da configuração do projeto), permitindo que você use o poder total do tempo de execução .NET, incluindo loops, condicionalismos, expressões complexas e até mesmo manipulação de exceções, diretamente dentro de sua marcação.

Por exemplo, uma simples visão Razor pode ser assim:

@{
 ViewBag.Title = "Home Page";
}

<h1>Welcome to @ViewBag.Title</h1>
<p>The current server time is @DateTime.Now.ToLongTimeString().</p>

Tudo prefixado com sinaliza uma transição de HTML para C#. O caractere é o núcleo da sintaxe Razor, e o motor é inteligente o suficiente para inferir onde o código C# termina e o HTML retoma, mesmo em espaços, parênteses ou limites de tags HTML.

Mergulho profundo da sintaxe da navalha

Para escrever visões Razor eficazes, você deve entender os vários estilos de bloco de código e modos de expressão disponíveis.

Expressões Incorporadas

A forma mais simples é uma expressão em linha, onde uma única seguida de uma expressão de C# produz o resultado como texto. Por exemplo:

<p>Your account balance is @balance.ToString("C2")</p>

Se a expressão devolve um ou implementa , Razor não irá codificar HTML a saída. Para todos os outros tipos, Razor automaticamente o HTML codifica o valor para evitar vulnerabilidades de scripts de sites cruzados (XSS).

Blocos de Código

Use seguido de um par de chaves cacheadas para escrever blocos C# multi- estados:

@{
 var greeting = "Hello";
 var name = "World";
 var message = greeting + ", " + name + "!";
}
<p>@message</p>

Dentro dos blocos de código, você pode declarar variáveis, métodos de chamada e executar lógica. O HTML fora dos chavetas ainda é renderizado em sequência.

Estruturas de Controlo

Razor suporta palavras-chave padrão de fluxo de controle C# como , , , , , , e . Cada uma deve ser prefixada com e seguida de um bloco de código ou uma instrução única. A melhor prática é usar sempre chaves para evitar ambiguidades:

@if (Model.IsAuthenticated)
{
 <span>Welcome back, @Model.UserName!</span>
}
else
{
 <a href="/Account/Login">Log in</a>
}

Da mesma forma, os laços se integram naturalmente:

<ul>
@foreach (var item in Model.Items)
{
 <li>@item.Name (@item.Price.ToString("C"))</li>
}
</ul>

Note que o é necessário apenas na palavra-chave de abertura. A chave de fechamento é simples C# e Razor retorna corretamente HTML ao encontrar a tag .

Observações

Razor fornece sua própria sintaxe de comentário que retira conteúdo do HTML renderizado inteiramente:

@* This is a Razor comment. It will not appear in the output. *@

Os comentários HTML () ainda são enviados para o navegador e estão visíveis na fonte. Use comentários Razor para notas de desenvolvedor ou para desativar temporariamente blocos de código.

Caracteres Especiais

Para exibir um símbolo literal , use . Para endereços de e-mail, Razor reconhece-os automaticamente e não requer fuga. Por exemplo, ] é tratado como texto simples.

Vistas e Modelos Fortemente Típados

Um dos padrões mais poderosos da ASP.NET MVC está usando visualizações fortemente digitadas. Em vez de confiar em ou , você declara o tipo de modelo no topo da visualização usando a diretiva (diretriz minúscula ‘m’). Isso lhe dá verificação de tempo de compilação e suporte IntelliSense para as propriedades do modelo.

@model IEnumerable<Product>

<h2>Product List</h2>
<table class="table">
 <thead>
 <tr>
 <th>Name</th>
 <th>Price</th>
 </tr>
 </thead>
 <tbody>
 @foreach (var product in Model)
 {
 <tr>
 <td>@product.Name</td>
 <td>@product.Price.ToString("C")</td>
 </tr>
 }
 </tbody>
</table>

O controlador passa o modelo pelo método :

public ActionResult Products()
{
 var products = db.Products.ToList();
 return View(products);
}

As visualizações com tipos fortes também simplificam as submissões de formulários com a vinculação de modelos. Quando um formulário é publicado, a plataforma MVC automaticamente mapeia a solicitação de dados para propriedades do parâmetro modelo na ação do controlador, desde que os nomes de entrada correspondam aos nomes das propriedades do modelo.

ViewBag, ViewData e TempData

Embora modelos fortemente digitados sejam preferidos, o framework também oferece recipientes não digitados para passar dados entre controladores e visualizações:

  • ViewBag: Um objeto dinâmico que permite definir propriedades arbitrárias. É um invólucro sobre . Exemplo: . Acesse-o na janela com .
  • ViewData: Um dicionário de pares de valores-chave ()]. Acesse-o como . Os valores devem ser lançados para o tipo apropriado, se precisar de digitação forte.
  • TempData: Semelhante ao ViewData, mas persiste em um único redirecionamento. Ele é armazenado em sessão e limpo após ser lido. Útil para exibir mensagens únicas como “Record salvo com sucesso”.

Use estes mecanismos com moderação. Overusing ViewBag pode levar a erros de execução e dificulta a manutenção das visualizações. Reserve- as para dados auxiliares raramente necessários que não se encaixam no modelo principal.

Disposição e VisualizaçãoIniciar

Os layouts dão ao seu aplicativo uma aparência consistente definindo uma página mestre comum. Um layout é um arquivo que contém a estrutura externa de uma página (cabeçalho, navegação, rodapé) e uma chamada onde o conteúdo de visualizações individuais é inserido.

Por exemplo, um típico pode parecer:

<!DOCTYPE html>
<html>
<head>
 <title>@ViewBag.Title - My App</title>
 @Styles.Render("~/Content/css")
</head>
<body>
 <nav>...</nav>
 <main>
 @RenderBody()
 </main>
 <footer>...</footer>
 @Scripts.Render("~/bundles/js")
 @RenderSection("Scripts", required: false)
</body>
</html>

As visões individuais podem especificar qual layout usar. Por convenção, o arquivo na pasta define o layout padrão para todas as visões nessa pasta:

@{
 Layout = "~/Views/Shared/_Layout.cshtml";
}

Você pode substituir o layout em qualquer visualização específica, reatribuindo a propriedade . Isto é especialmente útil para páginas que precisam de um layout completamente diferente, como páginas de login ou páginas de erro.

Visualização Parcial e Componentes de Visualização

As visualizações parciais são fragmentos reutilizáveis de UI que podem ser incorporados dentro de outras visões. Elas são especialmente úteis para formas complexas, itens de lista ou qualquer componente que apareça em vários lugares. Para criar uma visão parcial, simplesmente crie um arquivo ] convencionalmente nomeado com um sublinhado principal (por exemplo, ]).

Você renderiza uma visão parcial de outra visão usando ou :

@Html.Partial("_ProductCard", item)

A diferença é que retorna uma string HTML, enquanto escreve diretamente para o fluxo de resposta (ligeiramente mais rápido para parciais grandes, mas não pode ser usado dentro de um bloco de código).

Para componentes mais complexos e de lógica, reutilizáveis (como um resumo de carrinho de compras que requer acesso ao banco de dados), considere Ver Componentes. Ver Componentes são classes completas com o seu próprio método Invoke/InvokeAsync, permitindo a injeção de serviços e processamento complexo. Eles são o sucessor moderno das ações infantis:

public class CartSummaryViewComponent : ViewComponent
{
 public async Task<IViewComponentResult> InvokeAsync()
 {
 var cart = await GetCartAsync();
 return View(cart);
 }
}

Invocar de uma vista com .

Secções e RenderSecção

As secções permitem- lhe definir regiões num layout que as vistas individuais podem preencher. Os casos de uso comuns incluem a injecção de programas específicos de páginas, folhas de estilo ou conteúdo de barras laterais. No layout, declare uma secção com . Numa visualização, defina o conteúdo:

@section Scripts {
 <script src="~/Scripts/page-specific.js"></script>
}

Se uma seção estiver marcada conforme necessário (, todas as views que usam o layout devem defini-lo, ou uma exceção será lançada. Use seções necessárias para itens que são fundamentais para a página, como uma área de título ou conteúdo principal.

Você também pode verificar se uma seção foi definida na view usando dentro do layout, o que permite que você forneça conteúdo padrão.

Ajudadores HTML vs Ajudadores de Marcas

As visualizações Razor oferecem duas famílias de ferramentas do lado do servidor para gerar HTML: Helpers HTML e Ajudadores de tags.

  • HTML Helpers são métodos chamados na view, tais como ou . Eles retornam strings HTML e são familiares para desenvolvedores que trabalharam com versões anteriores do MVC.
  • Os assistentes de etiquetas foram introduzidos no ASP.NET Core, mas também estão disponíveis no ASP.NET MVC 5.x através de um pacote NuGet (). Eles permitem que você escreva tags tipo HTML que o servidor processa, por exemplo, . Os assistentes de etiquetas são mais naturais para desenvolvedores de front-end e permitem uma integração mais rica do Intellisense e validação.

Por exemplo, criar um formulário com os Ajudantes de Marcas se parece com:

<form asp-action="Submit" asp-controller="Home" method="post">
 <label asp-for="Email"></label>
 <input asp-for="Email" />
 <span asp-validation-for="Email"></span>
 <button type="submit">Submit</button>
</form>

Os Ajudadores de Etiquetas se ligam automaticamente às propriedades do modelo, renderizam atributos de validação e geram URLs corretas. Eles geralmente são preferidos para o novo desenvolvimento, porque se integram perfeitamente com validação discreta e são mais fáceis de manter.

Validação e Tratamento de Erros

As visualizações de Razor funcionam em conjunto com o sistema de validação em ASP.NET MVC. Você pode exibir erros de validação de nível de modelo e nível de propriedade usando Helpers HTML ou Ajudadores de tags. O mostra todos os erros de uma vez, e mostra erros para um campo específico.

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })

Quando você usa o Tag Helpers, o span de validação é automaticamente adicionado e preenchido durante a ligação ao modelo se a validação falhar. Esta marcação de validação do lado do cliente é gerada usando anotações de dados no seu modelo, tais como , , e .

Para ativar a validação não-obtrusiva do lado do cliente, certifique-se de que as bibliotecas JavaScript necessárias ( e ]) estão incluídas no seu layout, geralmente na seção .

Razor com AJAX e Rendering Parcial

As visualizações de Razor não se limitam a cargas de página inteira. Você pode usá- las para renderizar HTML parcial que é retornado via AJAX e inserido no DOM. Crie uma ação do controlador que retorna uma visão parcial:

public ActionResult ProductDetails(int id)
{
 var product = db.Products.Find(id);
 if (product == null) return HttpNotFound();
 return PartialView("_ProductDetails", product);
}

No lado do cliente, use jQuery ou o auxiliar incorporado para carregar o resultado parcial em um recipiente:

@Ajax.ActionLink("View Details", "ProductDetails", new { id = item.Id },
 new AjaxOptions { UpdateTargetId = "detailsContainer" })

Você deve incluir o script para os ajudantes trabalhar. Alternativamente, você pode escrever uma simples chamada jQuery que atualiza o recipiente manualmente. O benefício de usar parcial Razor para AJAX é que sua lógica e marcação do lado do servidor permanecem consistentes, evitando duplicações entre as respostas de página inteira e parcial.

Considerações de desempenho para vistas de Razor

Embora as visualizações Razor sejam compiladas, ainda há armadilhas de desempenho para evitar:

  • Evite lógica excessiva em visualizações. Mantenha as visualizações o mais simples possível; mova cálculos complexos, transformações de dados e regras de negócios para o controlador, camada de serviço ou modelo de visualização.
  • Use o cache judiciously. Para visualizações que raramente mudam (por exemplo, navegação estática), considere aplicar o cache de saída com o atributo na ação do controlador. Para visualizações parciais que são caras de renderizar, use com (extensão personalizada) ou uma estrutura de cache como .
  • Minimizar o número de visualizações parciais renderizadas por página. Cada chamada adiciona sobrecarga. Se uma parcial é usada muitas vezes em um loop, considere construir o HTML no controlador usando um StringBuilder ou um gerador HTML personalizado.
  • Use ações assync para operações de I/O-bound. Se sua visão depende de dados que envolvem consultas de banco de dados ou chamadas de API externas, defina a ação do controlador como e chame antes de passar o modelo. Isso libera threads durante espera de E/S.
  • Visualização Precompilada da Razor na produção utilizando ou a incorporada na ASP.NET MVC 5 (via ] definida como nas propriedades do projecto), o que elimina o atraso na compilação do primeiro pedido.

Melhores práticas para vistas de Razor Manteníveis

  • Sempre use modelos fortemente digitados e evite ViewBag para os dados principais. Isso melhora a verificação e legibilidade do tempo de compilação.
  • Siga convenções de nomenclatura: views devem corresponder aos nomes de ação do controlador, e parciais devem ser prefixados com sublinhado.
  • Use modelos de exibição e editor para exibição de tipo de dados reutilizáveis. Por exemplo, crie para formatar as datas de formatação de forma consistente.
  • Separar CSS e JavaScript a partir de visualizações. Coloque apenas estilos inline mínimos; use o agrupamento e a minificação para recursos externos.
  • Escreva testes unitários para controladores e modelos de visualização. Enquanto as visualizações são difíceis de testar, certifique-se de que os dados passados para eles estão corretos. Considere frameworks de teste de UI como Selenium ou Playwright para validação de nível de integração.
  • Mantenha os layouts focados. Não coloque lógica pesada ou recuperação de dados em um layout. Layouts devem conter somente HTML de andaimes e chamadas para e seções.

Conclusão

As visões de Razor são a espinha dorsal da geração dinâmica HTML na ASP.NET MVC. Sua sintaxe limpa, integração perfeita com C# e suporte para digitação forte, layouts, parciais e validação fazem delas uma poderosa ferramenta para a construção de aplicativos web mantendíveis. Ao dominar recursos avançados como Tag Helpers, View Components e AJAX renderização parcial, você pode criar experiências de usuário ricas sem sacrificar o desempenho ou qualidade de código. À medida que você continua desenvolvendo com ASP.NET MVC, continue explorando as capacidades do motor de visualização Razor – evolui com cada versão do framework .NET, trazendo ainda mais melhorias de produtividade para seu fluxo de desenvolvimento web.

Para mais informações, consulte a documentação oficial da Microsoft sobre Sintática do Razor, Visões parciais[, e Auxiliadores de tags no ASP.NET Core (que também se aplica ao MVC 5 com referências adequadas ao pacote).