Razor referência de sintaxe para ASP.NET Core

Por Rick Anderson, Taylor Mullene Dan Vicarel

Razor é uma sintaxe de marcação para incorporar código baseado em .NET em páginas da Web. A sintaxe Razor consiste em marcação Razor, C# e HTML. Os arquivos que contêm Razor geralmente têm uma extensão de arquivo .cshtml. Razor também é encontrado nos arquivos do componente Razor (.razor). A sintaxe do Razor é semelhante aos mecanismos de templates de vários frameworks de aplicações de página única (SPA) JavaScript, como Angular, React, VueJs e Svelte. Para obter mais informações, consulte Os recursos descritos neste artigo estão obsoletos a partir do ASP.NET Core 3.0.

Introdução à programação Web ASP.NET usando a sintaxe Razor. fornece muitos exemplos de programação com a sintaxe Razor. Embora o tópico tenha sido escrito para ASP.NET em vez de ASP.NET Core, a maioria dos exemplos se aplica ao ASP.NET Core.

Renderização HTML

A linguagem Razor padrão é HTML. Renderizar HTML a partir de marcação Razor não é diferente de renderizar HTML a partir de um ficheiro HTML. A marcação HTML em arquivos .cshtmlRazor é processada pelo servidor inalterada.

Razor sintaxe

Razor suporta C# e usa o símbolo @ para fazer a transição de HTML para C#. Razor avalia expressões C# e as renderiza na saída HTML.

Quando um símbolo de @ é seguido por uma palavra-chave reservada Razor, ele transita para a marcação específica de Razor. Caso contrário, ele transita para HTML simples.

Para escapar de um símbolo @ em Razor marcação, use um segundo símbolo @:

<p>@@Username</p>

O código é renderizado em HTML com um único símbolo @:

<p>@Username</p>

Atributos HTML e conteúdo contendo endereços de e-mail não tratam o símbolo @ como um caractere de transição. Os endereços de e-mail no exemplo a seguir não são tocados pela análise Razor:

<a href="mailto:Support@contoso.com">Support@contoso.com</a>

@{
    string message = "foreignObject example with Scalable Vector Graphics (SVG)";
}

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black" 
        fill="none" />
    <foreignObject x="20" y="20" width="160" height="160">
        <p>@message</p>
    </foreignObject>
</svg>

Expressões Razor implícitas

As expressões Razor implícitas começam com @ seguidas pelo código C#:

<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2016)</p>

Com exceção da palavra-chave C# await, expressões implícitas não devem conter espaços. Se a instrução C# tiver um final claro, os espaços podem ser intercalados:

<p>@await DoSomething("hello", "world")</p>

Expressões implícitas não podem conter genéricos C#, pois os caracteres entre colchetes (<>) são interpretados como uma marca HTML. O código a seguir não é válido:

<p>@GenericMethod<int>()</p>

O código anterior gera um erro de compilador semelhante a um dos seguintes:

• O elemento "int" não estava fechado. Todos os elementos devem ser de fechamento automático ou ter uma tag final correspondente.
• Não é possível converter o grupo de métodos 'GenericMethod' para o tipo não delegado 'object'. Tencionava invocar o método?»

As chamadas de método genérico devem ser encapsuladas em uma expressão Razor explícita ou em um bloco de código Razor.

Expressões Razor explícitas

As expressões Razor explícitas consistem num símbolo @ com parênteses equilibrados. Para renderizar o tempo da semana passada, a seguinte marcação de Razor é usada:

<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>

Qualquer conteúdo dentro do parêntese @() é avaliado e renderizado para a saída.

As expressões implícitas, descritas na seção anterior, geralmente não podem conter espaços. No código a seguir, uma semana não é subtraída da hora atual:

<p>Last week: @DateTime.Now - TimeSpan.FromDays(7)</p>

O código processa o seguinte HTML:

<p>Last week: 7/7/2016 4:39:52 PM - TimeSpan.FromDays(7)</p>

Expressões explícitas podem ser usadas para concatenar texto com um resultado de expressão:

@{
    var joe = new Person("Joe", 33);
}

<p>Age@(joe.Age)</p>

Sem a expressão explícita, <p>Age@joe.Age</p> é tratado como um endereço de e-mail e <p>Age@joe.Age</p> é renderizado. Quando escrito como uma expressão explícita, <p>Age33</p> é renderizado.

Expressões explícitas podem ser usadas para renderizar a saída de métodos genéricos em arquivos .cshtml. A marcação a seguir mostra como corrigir o erro mostrado anteriormente causado pelos colchetes de um genérico C#. O código é escrito como uma expressão explícita:

<p>@(GenericMethod<int>())</p>

Codificação de expressões

As expressões C# que são avaliadas como uma cadeia de caracteres são codificadas em HTML. As expressões C# que resultam em IHtmlContent são renderizadas diretamente por meio de IHtmlContent.WriteTo. As expressões C# que não são avaliadas para IHtmlContent são convertidas em uma cadeia de caracteres por ToString e codificadas antes de serem renderizadas.

@("<span>Hello World</span>")

O código anterior processa o seguinte HTML:

<span>Hello World</span>

O HTML é mostrado no navegador como texto simples:

<span>Olá Mundo</span>

A saída HtmlHelper.Raw não é codificada, mas renderizada como marcação HTML.

@Html.Raw("<span>Hello World</span>")

O código processa o seguinte HTML:

<span>Hello World</span>

Razor blocos de código

Razor blocos de código começam com @ e são delimitados por {}. Ao contrário das expressões, o código C# dentro de blocos de código não é renderizado. Blocos de código e expressões em um modo de exibição compartilham o mesmo escopo e são definidos em ordem:

@{
    var quote = "The future depends on what you do today. - Mahatma Gandhi";
}

<p>@quote</p>

@{
    quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.";
}

<p>@quote</p>

O código processa o seguinte HTML:

<p>The future depends on what you do today. - Mahatma Gandhi</p>
<p>Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.</p>

Em blocos de código, declare funções locais com marcação para servir como métodos de modelagem:

@{
    void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }

    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

O código processa o seguinte HTML:

<p>Name: <strong>Mahatma Gandhi</strong></p>
<p>Name: <strong>Martin Luther King, Jr.</strong></p>

Transições implícitas

O idioma padrão em um bloco de código é C#, mas a página Razor pode fazer a transição de volta para HTML:

@{
    var inCSharp = true;
    <p>Now in HTML, was in C# @inCSharp</p>
}

Transição explícita delimitada

Para definir uma subseção de um bloco de código que deve renderizar HTML, envolva os caracteres para renderização com a marca Razor<text>:

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <text>Name: @person.Name</text>
}

Use essa abordagem para renderizar HTML que não esteja cercado por uma marca HTML. Na ausência de uma tag HTML ou Razor, ocorre um erro de tempo de execução Razor.

A tag <text> é útil para controlar o espaço em branco ao renderizar conteúdo:

• Somente o conteúdo entre a tag <text> é renderizado.
• Nenhum espaço em branco antes ou depois da marca <text> aparece na saída HTML.

Transição de linha explícita

Para renderizar o restante de uma linha inteira como HTML dentro de um bloco de código, use @: sintaxe:

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    @:Name: @person.Name
}

Sem o @: no código, um erro de tempo de execução Razor é gerado.

Caracteres @ extras em um ficheiro Razor podem causar erros do compilador em instruções mais tarde no bloco. Estes erros extra do compilador @:

• Pode ser difícil de entender porque o erro real ocorre antes do erro relatado.
• É comum depois de combinar várias expressões implícitas e explícitas em um único bloco de código.

Renderização de atributos condicionais

Razor omite automaticamente atributos que não são necessários. Se o valor passado for null ou false, o atributo não será renderizado.

Por exemplo, considere a seguinte navalha:

<div class="@false">False</div>
<div class="@null">Null</div>
<div class="@("")">Empty</div>
<div class="@("false")">False String</div>
<div class="@("active")">String</div>
<input type="checkbox" checked="@true" name="true" />
<input type="checkbox" checked="@false" name="false" />
<input type="checkbox" checked="@null" name="null" />

A marcação Razor anterior gera o seguinte HTML:

<div>False</div>
<div>Null</div>
<div class="">Empty</div>
<div class="false">False String</div>
<div class="active">String</div>
<input type="checkbox" checked="checked" name="true">
<input type="checkbox" name="false">
<input type="checkbox" name="null">

Estruturas de controlo

As estruturas de controlo são uma extensão dos blocos de código. Todos os aspetos dos blocos de código (transição para marcação, C# embutido) também se aplicam às seguintes estruturas:

Condicionais @if, else if, else, and @switch

@if controla quando o código é executado:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

else e else if não exigem o símbolo @:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
else if (value >= 1337)
{
    <p>The value is large.</p>
}
else
{
    <p>The value is odd and small.</p>
}

O exemplo de código a seguir mostra como usar uma instrução switch.

@switch (value)
{
    case 1:
        <p>The value is 1!</p>
        break;
    case 1337:
        <p>Your number is 1337!</p>
        break;
    default:
        <p>Your number wasn't 1 or 1337.</p>
        break;
}

Looping @for, @foreach, @while, and @do while

O HTML predefinido pode ser renderizado com instruções de controle de looping. Para renderizar uma lista de pessoas:

@{
    var people = new Person[]
    {
          new Person("Weston", 33),
          new Person("Johnathon", 41),
          ...
    };
}

As seguintes declarações de looping são suportadas:

@for

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@foreach

@foreach (var person in people)
{
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@while

@{ var i = 0; }
@while (i < people.Length)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
}

@do while

@{ var i = 0; }
@do
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
} while (i < people.Length);

Composto @using

Em C#, uma instrução using é usada para garantir que um objeto seja descartado. No Razor, o mesmo mecanismo é usado para criar HTML Helpers que contêm conteúdo adicional. No código a seguir, os HTML Helpers renderizam uma etiqueta <form> com a instrução @using.

@using (Html.BeginForm())
{
    <div>
        <label>Email: <input type="email" id="Email" value=""></label>
        <button>Register</button>
    </div>
}

@try, catch, finally

O tratamento de exceções é semelhante ao C#:

@try
{
    throw new InvalidOperationException("You did something invalid.");
}
catch (Exception ex)
{
    <p>The exception message: @ex.Message</p>
}
finally
{
    <p>The finally statement.</p>
}

@lock

Razor tem a capacidade de proteger secções críticas através de declarações de bloqueio:

@lock (SomeLock)
{
    // Do critical section work
}

Observações

Razor suporta comentários em C# e HTML:

@{
    /* C# comment */
    // Another C# comment
}
<!-- HTML comment -->

O código processa o seguinte HTML:

<!-- HTML comment -->

Razor comentários são removidos pelo servidor antes de a página web ser renderizada. Razor usa @* *@ para delimitar comentários. O código a seguir é comentado, para que o servidor não processe nenhuma marcação:

@*
    @{
        /* C# comment */
        // Another C# comment
    }
    <!-- HTML comment -->
*@

Diretivas

Razor diretivas são representadas por expressões implícitas com palavras-chave reservadas seguidas do símbolo @. Normalmente, uma diretiva altera a forma como uma vista é compilada ou funciona.

Compreender como Razor gera código para uma exibição facilita a compreensão de como as diretivas funcionam.

@{
    var quote = "Getting old ain't for wimps! - Anonymous";
}

<div>Quote of the Day: @quote</div>

O código gera uma classe semelhante à seguinte:

public class _Views_Something_cshtml : RazorPage<dynamic>
{
    public override async Task ExecuteAsync()
    {
        var output = "Getting old ain't for wimps! - Anonymous";

        WriteLiteral("/r/n<div>Quote of the Day: ");
        Write(output);
        WriteLiteral("</div>");
    }
}

Mais adiante neste artigo, a seção Inspecionar a classe C# Razor gerada para uma exibição explica como exibir essa classe gerada.

@attribute

A diretiva @attribute adiciona o atributo dado à classe da página ou exibição gerada. O exemplo a seguir adiciona o atributo [Authorize]:

@attribute [Authorize]

A diretiva @attribute também pode ser usada para fornecer um modelo de rota baseado em constante em um componente Razor. No exemplo a seguir, a diretiva @page em um componente é substituída pela diretiva @attribute e pelo modelo de rota baseado em constante no Constants.CounterRoute, que é definido em outro lugar do aplicativo como "/counter":

- @page "/counter"
+ @attribute [Route(Constants.CounterRoute)]

@code

Este cenário só se aplica a componentes Razor (.razor).

O bloco @code permite que um componente Razor adicione membros C# (campos, propriedades e métodos) a um componente:

@code {
    // C# members (fields, properties, and methods)
}

Para os componentes Razor, @code é um alias de @functions e recomendado em vez de @functions. Mais do que um bloqueio @code é permitido.

@functions

A diretiva @functions permite adicionar membros C# (campos, propriedades e métodos) à classe gerada:

@functions {
    // C# members (fields, properties, and methods)
}

Nos componentes Razor, use @code sobre @functions para adicionar membros C#.

Por exemplo:

@functions {
    public string GetHello()
    {
        return "Hello";
    }
}

<div>From method: @GetHello()</div> 

O código gera a seguinte marcação HTML:

<div>From method: Hello</div>

O seguinte código é a classe C# Razor gerada:

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.Razor;

public class _Views_Home_Test_cshtml : RazorPage<dynamic>
{
    // Functions placed between here 
    public string GetHello()
    {
        return "Hello";
    }
    // And here.
#pragma warning disable 1998
    public override async Task ExecuteAsync()
    {
        WriteLiteral("\r\n<div>From method: ");
        Write(GetHello());
        WriteLiteral("</div>\r\n");
    }
#pragma warning restore 1998

@functions métodos servem como métodos de modelagem quando têm marcação:

@{
    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

@functions {
    private void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }
}

O código processa o seguinte HTML:

<p>Name: <strong>Mahatma Gandhi</strong></p>
<p>Name: <strong>Martin Luther King, Jr.</strong></p>

@implements

A diretiva @implements implementa uma interface para a classe gerada.

O exemplo a seguir implementa System.IDisposable para que o método Dispose possa ser chamado:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

    public void Dispose() => _isDisposed = true;
}

@inherits

A diretiva @inherits fornece controle total da classe que o modo de exibição herda:

@inherits TypeNameOfClassToInheritFrom

O código a seguir é um tipo de página Razor personalizado:

using Microsoft.AspNetCore.Mvc.Razor;

public abstract class CustomRazorPage<TModel> : RazorPage<TModel>
{
    public string CustomText { get; } = 
        "Gardyloo! - A Scottish warning yelled from a window before dumping" +
        "a slop bucket on the street below.";
}

O CustomText é exibido em uma vista.

@inherits CustomRazorPage<TModel>

<div>Custom text: @CustomText</div>

O código processa o seguinte HTML:

<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

@model e @inherits podem ser usados na mesma visualização. @inherits pode estar num arquivo _ViewImports.cshtml que a vista importa:

@inherits CustomRazorPage<TModel>

O código a seguir é um exemplo de vista fortemente tipificada.

@inherits CustomRazorPage<TModel>

<div>The Login Email: @Model.Email</div>
<div>Custom text: @CustomText</div>

Se "rick@contoso.com" for passado no modelo, a exibição gerará a seguinte marcação HTML:

<div>The Login Email: rick@contoso.com</div>
<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

@inject

A diretiva @inject permite que a Página Razor injete um serviço do contêiner de serviço em uma vista. Para obter mais informações, consulte Injeção de dependência em modos de exibição.

@layout

Este cenário só se aplica a componentes Razor (.razor).

A diretiva @layout especifica um layout para componentes de Razor roteáveis que têm uma diretiva @page. Os componentes de layout são usados para evitar duplicação e inconsistência de código. Para obter mais informações, consulte os layouts do ASP.NET Core Blazor.

@model

Este cenário aplica-se apenas a vistas MVC e Razor Pages (.cshtml).

A diretiva @model especifica o tipo do modelo passado para uma vista ou página:

@model TypeNameOfModel

Em um aplicativo ASP.NET Core MVC ou Razor Pages criado com contas de usuário individuais, Views/Account/Login.cshtml contém a seguinte declaração de modelo:

@model LoginViewModel

A classe gerada herda de RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor expõe uma propriedade Model para acessar o modelo passado para a exibição:

<div>The Login Email: @Model.Email</div>

A diretiva @model especifica o tipo de propriedade Model. A diretiva especifica a T em RazorPage<T> que a classe gerada da qual a exibição deriva. Se a diretiva @model não for especificada, a propriedade Model será do tipo dynamic. Para obter mais informações, consulte Strongly typed models and the @model keyword.

@namespace

A diretiva @namespace:

• Define o namespace da classe da página de Razor gerada, da exibição MVC ou do componente Razor.
• Configura os namespaces derivados da raiz das classes de páginas, visualizações ou componentes a partir do arquivo de importações mais próximo na árvore de diretórios, _ViewImports.cshtml (visualizações ou páginas) ou _Imports.razor (componentesRazor).

@namespace Your.Namespace.Here

Para o exemplo Razor Pages mostrado na tabela a seguir:

• Cada página importa Pages/_ViewImports.cshtml.
• Pages/_ViewImports.cshtml contém @namespace Hello.World.
• Cada página tem Hello.World como a raiz de seu namespace.

As relações anteriores se aplicam à importação de arquivos usados com exibições MVC e componentes Razor.

Quando vários arquivos de importação têm uma diretiva @namespace, o arquivo mais próximo da página, exibição ou componente na árvore de diretórios é usado para definir o namespace raiz.

Se a pasta EvenMorePages no exemplo anterior tiver um arquivo de importação com @namespace Another.Planet (ou o arquivo Pages/MorePages/EvenMorePages/Page.cshtml contiver @namespace Another.Planet), o resultado será mostrado na tabela a seguir.

@page

A diretiva @page tem efeitos diferentes dependendo do tipo de arquivo onde aparece. A diretiva:

• Em um arquivo .cshtml indica que o arquivo é uma Página Razor. Para obter mais informações, consulte Rotas personalizadas e Introdução às páginas Razor no ASP.NET Core.
• Especifica que um componente Razor deve lidar diretamente com solicitações. Para obter mais informações, consulte ASP.NET Core Blazor roteamento e navegação.

<... @rendermode="InteractiveServer" />

@rendermode InteractiveServer

@using static Microsoft.AspNetCore.Components.Web.RenderMode

<Dialog @rendermode="RenderMode.InteractiveServer" />

@section

Este cenário aplica-se apenas a vistas MVC e Razor Pages (.cshtml).

A diretiva @section é usada em conjunto com layouts MVC e Razor Pages para permitir que visualizações ou páginas renderizem conteúdo em diferentes partes da página HTML. Para obter mais informações, consulte layout no ASP.NET Core.

@typeparam

Este cenário só se aplica a componentes Razor (.razor).

A diretiva @typeparam declara um parâmetro de tipo genérico para a classe de componente gerada:

@typeparam TEntity

@typeparam TEntity where TEntity : IEntity

Para obter mais informações, consulte os seguintes artigos:

• Suporte para tipo genérico de componente ASP.NET Core Razor
• ASP.NET componentes principais Blazor modelos

@using

A diretiva @using adiciona a diretiva using C# à exibição gerada:

@using System.IO
@{
    var dir = Directory.GetCurrentDirectory();
}
<p>@dir</p>

Nos componentes Razor, @using também controla quais componentes estão dentro do escopo.

Atributos da diretiva

Razor atributos de diretiva são representados por expressões implícitas com palavras-chave reservadas seguindo o símbolo @. Um atributo de diretiva normalmente altera a maneira como um elemento é compilado ou funciona.

@attributes

Este cenário só se aplica a componentes Razor (.razor).

@attributes permite que um componente renderize atributos não declarados. Para obter mais informações, consulte ASP.NET Core Blazor atributo splatting e parâmetros arbitrários.

@bind

Este cenário só se aplica a componentes Razor (.razor).

A vinculação de dados em componentes é realizada com o atributo @bind. Para obter mais informações, consulte ASP.NET Core Blazor data binding.

@bind:culture

Este cenário só se aplica a componentes Razor (.razor).

Use o atributo @bind:culture com o atributo @bind para fornecer um System.Globalization.CultureInfo para analisar e formatar um valor. Para obter mais informações, consulte ASP.NET Core Blazor globalização e localização.

@on{EVENT}

Este cenário só se aplica a componentes Razor (.razor).

Razor fornece recursos de manipulação de eventos para componentes. Para obter mais informações, consulte ASP.NETde manipulação de eventos do Core Blazor .

@on{EVENT}:preventDefault

Este cenário só se aplica a componentes Razor (.razor).

Impede a ação padrão para o evento.

@on{EVENT}:stopPropagation

Este cenário só se aplica a componentes Razor (.razor).

Interrompe a propagação do evento.

@key

Este cenário só se aplica a componentes Razor (.razor).

O atributo de diretiva @key faz com que o algoritmo de diferenciação de componentes garanta a preservação de elementos ou componentes com base no valor da chave. Para obter mais informações, consulte Reter relações de elemento, componente e modelo no ASP.NET Core Blazor.

@ref

Este cenário só se aplica a componentes Razor (.razor).

As referências de componente (@ref) fornecem uma maneira de fazer referência a uma instância de componente para que você possa emitir comandos para essa instância. Para obter mais informações, consulte componentes do ASP.NET Core Razor.

Delegados de Razor predefinidos

Este cenário aplica-se apenas a vistas MVC e Razor Pages (.cshtml).

Razor modelos permitem definir um trecho da interface do usuário com o seguinte formato:

@<tag>...</tag>

O exemplo a seguir ilustra como especificar um delegado Razor modelo como um Func<T,TResult>. O tipo dinâmico é especificado para o parâmetro do método que o delegado encapsula. Um tipo de objeto é especificado como o valor de retorno do delegado. O modelo é utilizado com um List<T> de Pet, o qual possui a propriedade Name.

public class Pet
{
    public string Name { get; set; }
}

@{
    Func<dynamic, object> petTemplate = @<p>You have a pet named <strong>@item.Name</strong>.</p>;

    var pets = new List<Pet>
    {
        new Pet { Name = "Rin Tin Tin" },
        new Pet { Name = "Mr. Bigglesworth" },
        new Pet { Name = "K-9" }
    };
}

O modelo é renderizado com pets fornecido por uma declaração foreach.

@foreach (var pet in pets)
{
    @petTemplate(pet)
}

Saída renderizada:

<p>You have a pet named <strong>Rin Tin Tin</strong>.</p>
<p>You have a pet named <strong>Mr. Bigglesworth</strong>.</p>
<p>You have a pet named <strong>K-9</strong>.</p>

Você também pode fornecer um modelo de Razor embutido como um argumento para um método. No exemplo a seguir, o método Repeat recebe um modelo Razor. O método usa o modelo para produzir conteúdo HTML com repetições de itens fornecidos de uma lista:

@using Microsoft.AspNetCore.Html

@functions {
    public static IHtmlContent Repeat(IEnumerable<dynamic> items, int times,
        Func<dynamic, IHtmlContent> template)
    {
        var html = new HtmlContentBuilder();

        foreach (var item in items)
        {
            for (var i = 0; i < times; i++)
            {
                html.AppendHtml(template(item));
            }
        }

        return html;
    }
}

Usando a lista de animais de estimação do exemplo anterior, o método Repeat é chamado com:

• List<T> de Pet.
• Número de vezes que se deve repetir cada animal de estimação.
• Modelo em linha a utilizar para os itens de lista de uma lista não ordenada.

<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

Saída renderizada:

<ul>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>K-9</li>
    <li>K-9</li>
    <li>K-9</li>
</ul>

Ajudantes de tags

Este cenário aplica-se apenas a vistas MVC e Razor Pages (.cshtml).

Existem três diretivas que dizem respeito a Tag Helpers.

Razor palavras-chave reservadas

Razor palavras-chave

• page
• namespace
• functions
• inherits
• model
• section
• helper (atualmente não suportado pelo ASP.NET Core)

Razor palavras-chave são protegidas com @(Razor Keyword) (por exemplo, @(functions)).

C# Razor palavras-chave

• case
• do
• default
• for
• foreach
• if
• else
• lock
• switch
• try
• catch
• finally
• using
• while

As palavras-chave Razor C# devem ter escape duplo com @(@C# Razor Keyword) (por exemplo, @(@case)). O primeiro @ escapa do analisador Razor. O segundo @ escapa ao parser C#.

Palavras-chave reservadas não utilizadas por Razor

• class

Inspecione a classe C# Razor gerada para uma exibição

<PropertyGroup>
  <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
</PropertyGroup>

 Areas/
   Admin/
     Pages/
       Index.cshtml
       Index.cshtml.cs
 Pages/
   Shared/
     _Layout.cshtml
   _ViewImports.cshtml
   _ViewStart.cshtml
   Index.cshtml
   Index.cshtml.cs

 obj/
   Debug/
     netcoreapp2.1/
       Razor/
         Areas/
           Admin/
             Pages/
               Index.g.cshtml.cs
         Pages/
           Shared/
             _Layout.g.cshtml.cs
           _ViewImports.g.cshtml.cs
           _ViewStart.g.cshtml.cs
           Index.g.cshtml.cs

Ver pesquisas e diferenciação de maiúsculas e minúsculas

O motor de visualização Razor executa buscas sensíveis a maiúsculas e minúsculas para visualizações. No entanto, a pesquisa real é determinada pelo sistema de arquivos subjacente:

• Fonte baseada em ficheiros:
  • Em sistemas operacionais com sistemas de arquivos que não diferenciam maiúsculas de minúsculas (por exemplo, Windows), as pesquisas de provedores de arquivos físicos não diferenciam maiúsculas de minúsculas. Por exemplo, return View("Test") resulta em correspondências para /Views/Home/Test.cshtml, /Views/home/test.cshtmle qualquer outra variante de invólucro.
  • Em sistemas de arquivos que são sensíveis a maiúsculas e minúsculas, por exemplo, Linux, OSX e com EmbeddedFileProvider, as pesquisas também são sensíveis a maiúsculas e minúsculas. Por exemplo, return View("Test") corresponde especificamente a /Views/Home/Test.cshtml.
• Visualizações pré-compiladas: com o ASP.NET Core 2.0 e versões posteriores, a pesquisa de visualizações pré-compiladas não diferencia maiúsculas de minúsculas em todos os sistemas operacionais. O comportamento é idêntico ao comportamento do provedor de arquivos físicos no Windows. Se duas visualizações pré-compiladas diferirem apenas em maiúsculas e minúsculas, o resultado da pesquisa não será determinístico.

Os desenvolvedores são encorajados a fazer corresponder o invólucro de nomes de arquivos e diretórios com o invólucro de:

• Nomes de área, controlador e ação.
• Razor páginas.

A correspondência de maiúsculas e minúsculas garante que as implementações encontrem as suas visualizações, independentemente do sistema de arquivos subjacente.

Importações utilizadas por Razor

As seguintes importações são geradas pelos modelos da Web ASP.NET Core para oferecer suporte a arquivos Razor:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;

Recursos adicionais

Introdução à programação Web ASP.NET usando a sintaxe Razor fornece muitos exemplos de programação com sintaxe Razor.