Razor Referência de sintaxe para ASP.NET Core

Por Rick Anderson, Taylor Mullen e Dan Vicarel

Razor é uma sintaxe de marcação para inserir código baseado em .NET em páginas da Web. A Razor sintaxe consiste em Razor marcação, C#e HTML. Os arquivos que contêm Razor geralmente têm uma .cshtml extensão de arquivo. Razortambém é encontrado em Razor arquivos de componente (.razor). RazorA sintaxe é semelhante aos mecanismos de modelagem de várias estruturas de SPA (aplicativo de página única) JavaScript, como Angular, React, VueJs e Svelte. Para obter mais informações, consulte Usar os Serviços JavaScript para criar aplicativos de página única no ASP.NET Core.

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

Renderização de HTML

O idioma padrão Razor é HTML. Renderizar HTML da Razor marcação não é diferente de renderizar HTML de um arquivo HTML. A marcação HTML em .cshtmlRazor arquivos é renderizada pelo servidor inalterado.

Sintaxe de Razor

Razor dá suporte a 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 é seguido por uma Razor palavra-chave reservada, ele faz a transição para Razoruma marcação específica. Caso contrário, ele faz a transição para HTML sem formatação.

Para escapar de um @ símbolo na 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>

Conteúdo e atributos HTML que contêm endereços de email não tratam o símbolo @ como um caractere de transição. Os endereços de email no exemplo a seguir são intocados pela Razor análise:

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

Scalable Vector Graphics (SVG)

Há suporte para elementos SVGforeignObject:

@{
    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 implícitas Razor

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

<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 uma terminação clara, espaços podem ser misturados:

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

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

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

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

  • O elemento "int" não foi fechado. Todos os elementos devem ter fechamento automático ou ter uma marca de fim correspondente.
  • Não é possível converter o grupo de métodos "GenericMethod" em um "object" de tipo não delegado. Você pretendia invocar o método?

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

Expressões explícitas Razor

Expressões explícitas Razor consistem em um @ símbolo com parênteses equilibrados. Para renderizar a hora da semana passada, a seguinte Razor marcação é usada:

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

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

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 renderiza o HTML a seguir:

<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 email 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 .cshtml arquivos. A marcação a seguir mostra como corrigir o erro mostrado anteriormente causado pelos colchetes de um C# genérico. O código é escrito como uma expressão explícita:

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

Codificação de expressão

Expressões em C# que são avaliadas como uma cadeia de caracteres estão codificadas em HTML. Expressões em C# que são avaliadas como IHtmlContent são renderizadas diretamente por meio IHtmlContent.WriteTo. Expressões em C# que não são avaliadas como IHtmlContent são convertidas em uma cadeia de caracteres por ToString e codificadas antes que sejam renderizadas.

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

O código anterior renderiza o seguinte HTML:

&lt;span&gt;Hello World&lt;/span&gt;

O HTML é mostrado no navegador como texto sem formatação:

<span> Olá, Mundo</span>

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

Aviso

Usar HtmlHelper.Raw em uma entrada do usuário que não está limpa é um risco de segurança. A entrada do usuário pode conter JavaScript mal-intencionado ou outras formas de exploração. Limpar a entrada do usuário é difícil. Evite usar HtmlHelper.Raw com a entrada do usuário.

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

O código renderiza o HTML a seguir:

<span>Hello World</span>

Razor blocos de código

Razor blocos de código começam com @ e são colocados por {}. Diferente das expressões, o código C# dentro de blocos de código não é renderizado. Blocos de código e expressões em uma 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 renderiza o HTML a seguir:

<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 uma 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 renderiza o HTML a seguir:

<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 pode fazer a Razor transição de volta para HTML:

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

Transição delimitada explícita

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

@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 está circundado por uma marca HTML. Sem um HTML ou Razor marca, ocorre um Razor erro de runtime.

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

  • Somente o conteúdo entre a marca <text> é renderizado.
  • Não aparece nenhum espaço em branco antes ou depois da marca <text> 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 @: a sintaxe:

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

Sem o @: código, um Razor erro de runtime é gerado.

Caracteres extras @ em um Razor arquivo podem causar erros de compilador em instruções posteriormente no bloco. Esses erros do compilador podem ser difíceis de entender porque o erro real ocorre antes do erro relatado. Esse erro é comum após combinar várias expressões implícitas/explícitas em um bloco de código único.

Estruturas de controle

Estruturas de controle são uma extensão dos blocos de código. Todos os aspectos 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>
}

A marcação 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 no modelo pode ser renderizado com instruções de controle em loop. Para renderizar uma lista de pessoas:

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

Há suporte para as seguintes instruções em loop:

@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);

@using composto

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

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

@try, catch, finally

O tratamento de exceções é semelhante ao de 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 seções críticas com instruções de bloqueio:

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

Comentários

Razor dá suporte a comentários em C# e HTML:

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

O código renderiza o HTML a seguir:

<!-- HTML comment -->

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

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

Diretivas

Razor as diretivas são representadas por expressões implícitas com palavras-chave reservadas após o @ símbolo. Uma diretiva geralmente altera o modo como uma exibição é analisada ou habilita uma funcionalidade diferente.

Entender como Razor gera código para uma exibição torna mais fácil entender 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>");
    }
}

Posteriormente neste artigo, a seção Inspecionar a Razor classe C# gerada para um modo de exibição explica como exibir essa classe gerada.

@attribute

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

@attribute [Authorize]

@code

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

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

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

Para Razor componentes, @code é um alias de @functions e recomendado sobre @functions. Mais de um bloco de @code é permitido.

@functions

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

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

Em Razor componentes, use @code mais @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 código a seguir é a classe C# gerada Razor :

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

Os métodos @functions servem como métodos de modelagem quando têm uma 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 renderiza o HTML a seguir:

<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 a exibição herda:

@inherits TypeNameOfClassToInheritFrom

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

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 exibição:

@inherits CustomRazorPage<TModel>

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

O código renderiza o HTML a seguir:

<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 exibição. @inherits pode estar em um _ViewImports.cshtml arquivo que o modo de exibição importa:

@inherits CustomRazorPage<TModel>

O código a seguir é um exemplo de exibição fortemente tipada:

@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 @inject diretiva permite que a Razor Página injete um serviço do contêiner de serviço em um modo de exibição. Para obter mais informações, consulte Injeção de dependência em exibições.

@layout

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

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

@model

Esse cenário só se aplica a exibições e Razor páginas do MVC (.cshtml).

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

@model TypeNameOfModel

Em um ASP.NET Core aplicativo 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 Model propriedade para acessar o modelo passado para o modo de exibição:

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

A diretiva @model especifica o tipo da propriedade Model. A diretiva especifica o T em RazorPage<T> da 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 gerada Razor , exibição MVC ou Razor componente.
  • Define os namespaces derivados raiz de uma página, exibições ou classes de componentes do arquivo de importações mais próximo na árvore de diretório, _ViewImports.cshtml (exibições ou páginas) ou _Imports.razor (Razor componentes).
@namespace Your.Namespace.Here

Para o Razor exemplo de Páginas 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 do namespace.
Página Namespace
Pages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtml Hello.World.MorePages.EvenMorePages

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

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 EvenMorePages pasta no exemplo anterior tiver um arquivo de importações com @namespace Another.Planet (ou o Pages/MorePages/EvenMorePages/Page.cshtml arquivo contiver @namespace Another.Planet), o resultado será mostrado na tabela a seguir.

Página Namespace
Pages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtml Another.Planet

@page

A diretiva @page tem efeitos diferentes dependendo do tipo do arquivo em que aparece. A diretiva:

@preservewhitespace

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

Quando definido como false (padrão), o espaço em branco na marcação renderizada dos Razor componentes (.razor) será removido se:

  • Estiver à esquerda ou à direita dentro de um elemento.
  • À esquerda ou à direita dentro de um RenderFragment parâmetro. Por exemplo, o conteúdo filho passado para outro componente.
  • Preceder ou seguir um bloco de código C#, como @if ou @foreach.

@section

Esse cenário só se aplica a exibições e Razor páginas do MVC (.cshtml).

A @section diretiva é usada em conjunto com layouts de MVC e Razor Páginas para permitir que exibições ou páginas renderizem conteúdo em diferentes partes da página HTML. Saiba mais em Layout no ASP.NET Core.

@using

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

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

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

Atributos de diretiva

Razor os atributos de diretiva são representados por expressões implícitas com palavras-chave reservadas após o @ símbolo. Normalmente, um atributo de diretiva altera a forma como um elemento é analisado ou habilita uma funcionalidade diferente.

@attributes

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

@attributes permite que um componente renderize atributos não declarados. Para obter mais informações, consulte ASP.NET Core Razor componentes.

@bind

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

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

@bind:culture

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

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

@on{EVENT}

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

Razor fornece recursos de tratamento de eventos para componentes. Para obter mais informações, consulte ASP.NET Core Blazor tratamento de eventos.

@on{EVENT}:preventDefault

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

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

@on{EVENT}:stopPropagation

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

Interrompe a propagação de eventos para o evento.

@key

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

O atributo da diretiva @key faz com que os componentes comparem o algoritmo para garantir a preservação de elementos ou componentes com base no valor da chave. Para obter mais informações, consulte ASP.NET Core Razor componentes.

@ref

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

Referências de componente (@ref) proporcionam 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 ASP.NET Core Razor componentes.

@typeparam

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

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

@typeparam TEntity

Há suporte para tipos genéricos com where restrições de tipo:

@typeparam TEntity where TEntity : IEntity

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

@typeparam

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

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

@typeparam TEntity

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

Delegados de modelo Razor

Razor os modelos permitem que você defina um snippet de interface do usuário com o seguinte formato:

@<tag>...</tag>

O exemplo a seguir ilustra como especificar um delegado modelo Razor como um Func<T,TResult>. O tipo dinâmico é especificado para o parâmetro do método encapsulado pelo delegado. Um tipo de objeto é especificado como o valor retornado do delegado. O modelo é usado com uma List<T> de Pet que tem uma 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 instruçã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 embutido Razor como um argumento para um método. No exemplo a seguir, o Repeat método recebe um Razor modelo. O método usa o modelo para produzir o conteúdo HTML com repetições de itens fornecidos em 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 deve ser repetido cada animal de estimação.
  • Modelo embutido a ser usado para os itens da 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>

Auxiliares de Marca

Esse cenário só se aplica a exibições de MVC e Razor páginas (.cshtml).

Há três diretivas que relacionadas aos Auxiliares de marca.

Diretiva Função
@addTagHelper Disponibiliza os Auxiliares de marca para uma exibição.
@removeTagHelper Remove os Auxiliares de marca adicionados anteriormente de uma exibição.
@tagHelperPrefix Especifica um prefixo de marca para habilitar o suporte do Auxiliar de marca e tornar explícito o uso do Auxiliar de marca.

Razor palavras-chave reservadas

Razor Keywords

  • page
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper(Atualmente não há suporte para ASP.NET Core)

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

Palavras-chave C# Razor

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

As palavras-chave C# Razor devem ser escapadas duas vezes ( @(@C# Razor Keyword) por exemplo, @(@case)). O primeiro @ escapa do Razor analisador. O segundo @ faz o escape do analisador C#.

Palavras-chave reservadas não usadas por Razor

  • class

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

O Razor SDK manipula a compilação de Razor arquivos. Por padrão, os arquivos de código gerados não são emitidos. Para habilitar a emissão dos arquivos de código, defina a EmitCompilerGeneratedFiles diretiva no arquivo de projeto (.csproj) como true:

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

Ao criar um projeto 6.0 (net6.0) na configuração de Debug build, o Razor SDK gera um obj/Debug/net6.0/generated/ diretório na raiz do projeto. Seu subdiretório contém os arquivos de código de página emitidos Razor .

O Razor SDK manipula a compilação de Razor arquivos. Ao criar um projeto, o Razor SDK gera um obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor diretório na raiz do projeto. A estrutura de diretório dentro do Razor diretório espelha a estrutura de diretório do projeto.

Considere a seguinte estrutura de diretório em um projeto ASP.NET Core Razor Pages 2.1:

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

A criação do projeto na Debug configuração gera o seguinte obj diretório:

 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

Para exibir a classe gerada para Pages/Index.cshtml, abra obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Pesquisas de exibição e diferenciação de maiúsculas e minúsculas

O Razor mecanismo de exibição executa pesquisas que diferenciam maiúsculas de minúsculas para exibições. No entanto, a pesquisa real é determinada pelo sistema de arquivos subjacente:

  • Origem baseada em arquivo:
    • Em sistemas operacionais com sistemas de arquivos que não diferenciam maiúsculas e minúsculas (por exemplo, Windows), pesquisas no provedor de arquivos físico 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 casing.
    • Em sistemas de arquivos que diferenciam maiúsculas de minúsculas (por exemplo, Linux, OSX e com EmbeddedFileProvider), as pesquisas diferenciam maiúsculas de minúsculas. Por exemplo, return View("Test") corresponde /Views/Home/Test.cshtmlespecificamente a .
  • Exibições pré-compiladas: com o ASP.NET Core 2.0 e posteriores, pesquisar em exibições pré-compiladas não diferencia maiúsculas de minúsculas em nenhum sistema operacional. O comportamento é idêntico ao comportamento do provedor de arquivos físico no Windows. Se duas exibições pré-compiladas diferirem apenas quanto ao padrão de maiúsculas e minúsculas, o resultado da pesquisa não será determinístico.

Os desenvolvedores são incentivados a fazer a correspondência entre as maiúsculas e minúsculas dos nomes dos arquivos e de diretórios com o uso de maiúsculas e minúsculas em:

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

Fazer essa correspondência garante que as implantações encontrem suas exibições, independentemente do sistema de arquivos subjacente.

Importações usadas por Razor

As seguintes importações são geradas pelos modelos web ASP.NET Core para dar suporte Razor a Arquivos:

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 da Web ASP.NET usando o Razor A sintaxe fornece muitos exemplos de programação com Razor sintaxe.