:::no-loc(Razor)::: Référence de syntaxe pour ASP.NET Core:::no-loc(Razor)::: syntax reference for ASP.NET Core

Par Rick Anderson, Taylor Mullenet Dan VicarelBy Rick Anderson, Taylor Mullen, and Dan Vicarel

:::no-loc(Razor)::: est une syntaxe de balisage pour incorporer du code basé sur le serveur dans des pages Web.:::no-loc(Razor)::: is a markup syntax for embedding server-based code into webpages. La :::no-loc(Razor)::: syntaxe se compose du :::no-loc(Razor)::: balisage, de C# et du code html.The :::no-loc(Razor)::: syntax consists of :::no-loc(Razor)::: markup, C#, and HTML. Les fichiers contenant :::no-loc(Razor)::: ont généralement une extension de fichier . cshtml .Files containing :::no-loc(Razor)::: generally have a .cshtml file extension. :::no-loc(Razor):::se trouve également dans les fichiers de :::no-loc(Razor)::: composants ( . Razor ).:::no-loc(Razor)::: is also found in :::no-loc(Razor)::: components files ( .razor ).

Rendu HTMLRendering HTML

La langue par défaut :::no-loc(Razor)::: est html.The default :::no-loc(Razor)::: language is HTML. Le rendu HTML à partir du :::no-loc(Razor)::: balisage n’est pas différent du rendu HTML d’un fichier html.Rendering HTML from :::no-loc(Razor)::: markup is no different than rendering HTML from an HTML file. Le balisage HTML dans les fichiers . cshtml :::no-loc(Razor)::: est rendu par le serveur inchangé.HTML markup in .cshtml :::no-loc(Razor)::: files is rendered by the server unchanged.

Syntaxe de :::no-loc(Razor)::::::no-loc(Razor)::: syntax

:::no-loc(Razor)::: prend en charge C# et utilise le @ symbole pour passer du code HTML à c#.:::no-loc(Razor)::: supports C# and uses the @ symbol to transition from HTML to C#. :::no-loc(Razor)::: évalue les expressions C# et les restitue dans la sortie HTML.:::no-loc(Razor)::: evaluates C# expressions and renders them in the HTML output.

Quand un @ symbole est suivi d’un :::no-loc(Razor)::: mot clé réservé, il passe à un :::no-loc(Razor)::: balisage spécifique.When an @ symbol is followed by a :::no-loc(Razor)::: reserved keyword, it transitions into :::no-loc(Razor):::-specific markup. Sinon, il est converti en code C# brut.Otherwise, it transitions into plain C#.

Pour échapper un @ symbole dans :::no-loc(Razor)::: le balisage, utilisez un deuxième @ symbole :To escape an @ symbol in :::no-loc(Razor)::: markup, use a second @ symbol:

<p>@@Username</p>

Le code est affiché en HTML avec un seul symbole @ :The code is rendered in HTML with a single @ symbol:

<p>@Username</p>

Les attributs et le code HTML contenant des adresses e-mail ne traitent pas le symbole @ comme un caractère de conversion.HTML attributes and content containing email addresses don't treat the @ symbol as a transition character. Les adresses de messagerie de l’exemple suivant ne sont pas touchées par l' :::no-loc(Razor)::: analyse :The email addresses in the following example are untouched by :::no-loc(Razor)::: parsing:

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

Expressions implicites :::no-loc(Razor):::Implicit :::no-loc(Razor)::: expressions

:::no-loc(Razor):::Les expressions implicites commencent par @ suivies du code C# :Implicit :::no-loc(Razor)::: expressions start with @ followed by C# code:

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

À l’exception du mot clé await C#, les expressions implicites ne doivent pas contenir d’espaces.With the exception of the C# await keyword, implicit expressions must not contain spaces. Si l’instruction C# se termine de façon non ambigüe, il est possible d’insérer des espaces n’importe où dans la chaîne :If the C# statement has a clear ending, spaces can be intermingled:

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

Les expressions implicites ne doivent pas contenir de caractères génériques C#, car les caractères entre crochets (<>) sont interprétés comme une balise HTML.Implicit expressions cannot contain C# generics, as the characters inside the brackets (<>) are interpreted as an HTML tag. Le code suivant n’est pas valide :The following code is not valid:

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

Le code précédent génère l’un des types d’erreur de compilateur suivants :The preceding code generates a compiler error similar to one of the following:

  • L’élément « int » n’a pas été fermé.The "int" element wasn't closed. Tous les éléments doivent se fermer automatiquement ou contenir une balise de fin correspondante.All elements must be either self-closing or have a matching end tag.
  • Impossible de convertir le groupe de méthodes 'GenericMethod' en type non-délégué 'object'.Cannot convert method group 'GenericMethod' to non-delegate type 'object'. Souhaitiez-vous appeler la méthode ?Did you intend to invoke the method?`

Les appels de méthode génériques doivent être encapsulés dans une :::no-loc(Razor)::: expression explicite ou un :::no-loc(Razor)::: bloc de code.Generic method calls must be wrapped in an explicit :::no-loc(Razor)::: expression or a :::no-loc(Razor)::: code block.

Expressions explicites :::no-loc(Razor):::Explicit :::no-loc(Razor)::: expressions

:::no-loc(Razor):::Les expressions explicites se composent d’un @ symbole avec des parenthèses équilibrées.Explicit :::no-loc(Razor)::: expressions consist of an @ symbol with balanced parenthesis. Pour afficher l’heure de la semaine dernière, le :::no-loc(Razor)::: balisage suivant est utilisé :To render last week's time, the following :::no-loc(Razor)::: markup is used:

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

Le contenu situé entre les parenthèses @() est évalué et affiché dans la sortie.Any content within the @() parenthesis is evaluated and rendered to the output.

Les expressions implicites, décrites dans la section précédente, ne doivent généralement pas contenir d’espaces.Implicit expressions, described in the previous section, generally can't contain spaces. Dans le code suivant, une semaine n’est pas déduite de l’heure actuelle :In the following code, one week isn't subtracted from the current time:

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

Le code s’affiche en HTML de la façon suivante :The code renders the following HTML:

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

Les expressions explicites peuvent servir à concaténer du texte avec un résultat d’expression :Explicit expressions can be used to concatenate text with an expression result:

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

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

Sans l’expression explicite, <p>Age@joe.Age</p> est traité comme une adresse e-mail, et <p>Age@joe.Age</p> est affiché.Without the explicit expression, <p>Age@joe.Age</p> is treated as an email address, and <p>Age@joe.Age</p> is rendered. Avec une expression explicite, <p>Age33</p> est affiché.When written as an explicit expression, <p>Age33</p> is rendered.

Les expressions explicites peuvent être utilisées pour afficher la sortie de méthodes génériques dans les fichiers .cshtml .Explicit expressions can be used to render output from generic methods in .cshtml files. Le balisage suivant montre comment corriger l’erreur affichée précédemment provoquée par les crochets d’un générique C#.The following markup shows how to correct the error shown earlier caused by the brackets of a C# generic. Le code est écrit sous forme d’expression explicite :The code is written as an explicit expression:

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

Encodage des expressionsExpression encoding

Les expressions C# évaluées qui correspondent à une chaîne sont encodées en HTML.C# expressions that evaluate to a string are HTML encoded. Les expressions C# évaluées qui correspondent à IHtmlContent sont affichées directement par IHtmlContent.WriteTo.C# expressions that evaluate to IHtmlContent are rendered directly through IHtmlContent.WriteTo. Les expressions C# évaluées qui ne correspondent pas à IHtmlContent sont converties en chaîne par ToString et sont encodées avant d’être affichées.C# expressions that don't evaluate to IHtmlContent are converted to a string by ToString and encoded before they're rendered.

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

Le code précédent génère le code HTML suivant :The preceding code renders the following HTML:

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

Le code HTML est affiché sous forme de texte brut dans le navigateur :The HTML is shown in the browser as plain text:

<span > Hello World < /span><span>Hello World</span>

La sortie HtmlHelper.Raw n’est pas encodée, mais elle est affichée sous forme de balisage HTML.HtmlHelper.Raw output isn't encoded but rendered as HTML markup.

Avertissement

Utiliser HtmlHelper.Raw sur des entrées utilisateur non nettoyées présente un risque pour la sécurité.Using HtmlHelper.Raw on unsanitized user input is a security risk. Les entrées utilisateur peuvent contenir du code malveillant JavaScript ou d’un autre type.User input might contain malicious JavaScript or other exploits. Le nettoyage des entrées utilisateur est difficile.Sanitizing user input is difficult. C’est pourquoi il est préférable de ne pas utiliser HtmlHelper.Raw sur des entrées utilisateur.Avoid using HtmlHelper.Raw with user input.

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

Le code s’affiche en HTML de la façon suivante :The code renders the following HTML:

<span>Hello World</span>

:::no-loc(Razor)::: blocs de code:::no-loc(Razor)::: code blocks

:::no-loc(Razor)::: les blocs de code commencent par @ et sont encadrés par {} .:::no-loc(Razor)::: code blocks start with @ and are enclosed by {}. Contrairement aux expressions, le code C# figurant dans des blocs de code n’est pas affiché.Unlike expressions, C# code inside code blocks isn't rendered. Les blocs de code et les expressions dans une vue ont la même étendue et sont définis dans l’ordre :Code blocks and expressions in a view share the same scope and are defined in order:

@{
    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>

Le code s’affiche en HTML de la façon suivante :The code renders the following 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>

Dans des blocs de code, déclarez des fonctions locales avec des balises servant de méthodes de création de modèles :In code blocks, declare local functions with markup to serve as templating methods:

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

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

Le code s’affiche en HTML de la façon suivante :The code renders the following HTML:

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

Transitions implicitesImplicit transitions

La langue par défaut dans un bloc de code est C#, mais la :::no-loc(Razor)::: page peut passer au format HTML :The default language in a code block is C#, but the :::no-loc(Razor)::: Page can transition back to HTML:

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

Conversion délimitée expliciteExplicit delimited transition

Pour définir une sous-section d’un bloc de code qui doit restituer du code HTML, entourez les caractères du rendu à l’aide de la :::no-loc(Razor)::: <text> balise :To define a subsection of a code block that should render HTML, surround the characters for rendering with the :::no-loc(Razor)::: <text> tag:

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

Utilisez cette approche pour afficher du code HTML qui n’est pas entouré d’une balise HTML.Use this approach to render HTML that isn't surrounded by an HTML tag. Sans code HTML ou :::no-loc(Razor)::: balise, une :::no-loc(Razor)::: erreur d’exécution se produit.Without an HTML or :::no-loc(Razor)::: tag, a :::no-loc(Razor)::: runtime error occurs.

La balise <text> est utile pour contrôler les espaces blancs dans le contenu affiché :The <text> tag is useful to control whitespace when rendering content:

  • Seul le contenu situé dans la balise <text> est affiché.Only the content between the <text> tag is rendered.
  • Aucun espace blanc avant ou après la balise <text> ne s’affiche dans la sortie HTML.No whitespace before or after the <text> tag appears in the HTML output.

Transition de ligne expliciteExplicit line transition

Pour afficher le reste d’une ligne entière au format HTML à l’intérieur d’un bloc de code, utilisez la @: syntaxe suivante :To render the rest of an entire line as HTML inside a code block, use @: syntax:

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

Sans le @: dans le code, une :::no-loc(Razor)::: erreur d’exécution est générée.Without the @: in the code, a :::no-loc(Razor)::: runtime error is generated.

@Les caractères supplémentaires d’un :::no-loc(Razor)::: fichier peuvent provoquer des erreurs du compilateur dans des instructions plus loin dans le bloc.Extra @ characters in a :::no-loc(Razor)::: file can cause compiler errors at statements later in the block. Ces erreurs du compilateur peuvent être difficiles à comprendre, car elles se produisent en réalité avant les erreurs signalées.These compiler errors can be difficult to understand because the actual error occurs before the reported error. Ce type d’erreur est courant après la combinaison de plusieurs expressions implicites ou explicites dans un même bloc de code.This error is common after combining multiple implicit/explicit expressions into a single code block.

Structures de contrôleControl structures

Les structures de contrôle sont une extension des blocs de code.Control structures are an extension of code blocks. Toutes les caractéristiques des blocs de code (conversion de balisage, Inline C#) valent aussi pour les structures suivantes :All aspects of code blocks (transitioning to markup, inline C#) also apply to the following structures:

Conditions @if, else if, else, and @switchConditionals @if, else if, else, and @switch

@if contrôle l’exécution du code :@if controls when code runs:

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

else et else if ne nécessitent pas le symbole @ :else and else if don't require the @ symbol:

@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>
}

Le balisage suivant montre comment utiliser une instruction switch :The following markup shows how to use a switch statement:

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

Bouclage @for, @foreach, @while, and @do whileLooping @for, @foreach, @while, and @do while

Le rendu HTML peut être réalisé à partir d'instructions de contrôle de boucle.Templated HTML can be rendered with looping control statements. Pour afficher une liste de personnes :To render a list of people:

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

Les instructions de boucle suivantes sont prises en charge :The following looping statements are supported:

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

Instruction composée @usingCompound @using

En C#, une instruction using est utilisée pour garantir la dispose d’un objet.In C#, a using statement is used to ensure an object is disposed. Dans :::no-loc(Razor)::: , le même mécanisme est utilisé pour créer des applications auxiliaires HTML qui contiennent du contenu supplémentaire.In :::no-loc(Razor):::, the same mechanism is used to create HTML Helpers that contain additional content. Dans le code suivant, les HTML Helpers affichent une balise <form> à l’aide de l’instruction @using :In the following code, HTML Helpers render a <form> tag with the @using statement:

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

@try, catch, finally

La gestion des exceptions est similaire à C# :Exception handling is similar to 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

:::no-loc(Razor)::: a la possibilité de protéger des sections critiques avec des instructions Lock ::::no-loc(Razor)::: has the capability to protect critical sections with lock statements:

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

CommentairesComments

:::no-loc(Razor)::: prend en charge les commentaires HTML et C# ::::no-loc(Razor)::: supports C# and HTML comments:

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

Le code s’affiche en HTML de la façon suivante :The code renders the following HTML:

<!-- HTML comment -->

:::no-loc(Razor)::: Les commentaires sont supprimés par le serveur avant le rendu de la page Web.:::no-loc(Razor)::: comments are removed by the server before the webpage is rendered. :::no-loc(Razor)::: utilise @* *@ pour délimiter les commentaires.:::no-loc(Razor)::: uses @* *@ to delimit comments. Le code suivant est commenté pour indiquer au serveur de ne pas afficher le balisage :The following code is commented out, so the server doesn't render any markup:

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

DirectivesDirectives

:::no-loc(Razor)::: les directives sont représentées par des expressions implicites avec des mots clés réservés après le @ symbole.:::no-loc(Razor)::: directives are represented by implicit expressions with reserved keywords following the @ symbol. En règle générale, une directive change la manière dont une vue est analysée ou active une fonctionnalité différente.A directive typically changes the way a view is parsed or enables different functionality.

Comprendre comment :::no-loc(Razor)::: génère du code pour une vue facilite la compréhension du fonctionnement des directives.Understanding how :::no-loc(Razor)::: generates code for a view makes it easier to understand how directives work.

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

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

Le code génère une classe semblable à celle-ci :The code generates a class similar to the following:

public class _Views_Something_cshtml : :::no-loc(Razor):::Page<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>");
    }
}

Plus loin dans cet article, la section inspecter la :::no-loc(Razor)::: classe C# générée pour une vue explique comment afficher cette classe générée.Later in this article, the section Inspect the :::no-loc(Razor)::: C# class generated for a view explains how to view this generated class.

@attribute

La directive @attribute permet d’ajouter l’attribut donné à la classe de la page ou de la vue générée.The @attribute directive adds the given attribute to the class of the generated page or view. L’exemple suivant ajoute l’attribut [Authorize] :The following example adds the [Authorize] attribute:

@attribute [Authorize]

@code

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

Le @code bloc permet à un :::no-loc(Razor)::: composant d’ajouter des membres C# (champs, propriétés et méthodes) à un composant :The @code block enables a :::no-loc(Razor)::: component to add C# members (fields, properties, and methods) to a component:

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

Pour les :::no-loc(Razor)::: composants, @code est un alias de @functions et est recommandé sur @functions .For :::no-loc(Razor)::: components, @code is an alias of @functions and recommended over @functions. Plus d’un bloc @code est autorisé.More than one @code block is permissible.

@functions

La directive @functions permet d’ajouter des membres C# (champs, propriétés et méthodes) à la classe générée :The @functions directive enables adding C# members (fields, properties, and methods) to the generated class:

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

Dans :::no-loc(Razor)::: composants, utilisez @code sur @functions pour ajouter des membres C#.In :::no-loc(Razor)::: components, use @code over @functions to add C# members.

Exemple :For example:

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

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

Le code génère le balisage HTML suivant :The code generates the following HTML markup:

<div>From method: Hello</div>

Le code suivant est la :::no-loc(Razor)::: classe C# générée :The following code is the generated :::no-loc(Razor)::: C# class:

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

Les méthodes @functions servent de méthodes de création de modèles lorsqu’elles comprennent des balises :@functions methods serve as templating methods when they have markup:

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

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

Le code s’affiche en HTML de la façon suivante :The code renders the following HTML:

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

@implements

La directive @implements implémente une interface pour la classe générée.The @implements directive implements an interface for the generated class.

L’exemple suivant implémente System.IDisposable afin que la méthode Dispose puisse être appelée :The following example implements System.IDisposable so that the Dispose method can be called:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

@inherits

La directive @inherits fournit un contrôle complet de la classe héritée par la vue :The @inherits directive provides full control of the class the view inherits:

@inherits TypeNameOfClassToInheritFrom

Le code suivant est un :::no-loc(Razor)::: type de page personnalisé :The following code is a custom :::no-loc(Razor)::: page type:

Avertissement

Il semble que l’exemple que vous recherchez a été déplacé. Nous travaillons à la résolution de ce problème.

Le CustomText s’affiche dans une vue :The CustomText is displayed in a view:

@inherits CustomRazorPage<TModel>

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

Le code s’affiche en HTML de la façon suivante :The code renders the following HTML:

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

@model et @inherits peuvent s’utiliser dans la même vue.@model and @inherits can be used in the same view. @inherits peut être dans un fichier _ViewImports.cshtml importé par la vue :@inherits can be in a _ViewImports.cshtml file that the view imports:

@inherits CustomRazorPage<TModel>

Le code suivant est un exemple de vue fortement typée :The following code is an example of a strongly-typed view:

@inherits CustomRazorPage<TModel>

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

Si « rick@contoso.com » est passé au modèle, la vue génère le balisage HTML suivant :If "rick@contoso.com" is passed in the model, the view generates the following HTML markup:

<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

La @inject directive permet :::no-loc(Razor)::: à la page d’injecter un service à partir du conteneur de service dans une vue.The @inject directive enables the :::no-loc(Razor)::: Page to inject a service from the service container into a view. Pour plus d’informations, consultez Injection de dépendances dans les vues.For more information, see Dependency injection into views.

@layout

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

La @layout directive spécifie une disposition pour un :::no-loc(Razor)::: composant.The @layout directive specifies a layout for a :::no-loc(Razor)::: component. Les composants de disposition sont utilisés pour éviter la duplication et l’incohérence de code.Layout components are used to avoid code duplication and inconsistency. Pour plus d'informations, consultez Dispositions de ASP.NET Core :::no-loc(Blazor):::.For more information, see Dispositions de ASP.NET Core :::no-loc(Blazor):::.

@model

Ce scénario s’applique uniquement aux affichages et :::no-loc(Razor)::: pages MVC (. cshtml).This scenario only applies to MVC views and :::no-loc(Razor)::: Pages (.cshtml).

La directive @model spécifie le type du modèle passé à une vue ou une page :The @model directive specifies the type of the model passed to a view or page:

@model TypeNameOfModel

Dans une application ASP.NET Core MVC ou :::no-loc(Razor)::: pages créée avec des comptes d’utilisateur individuels, views/Account/login. cshtml contient la déclaration de modèle suivante :In an ASP.NET Core MVC or :::no-loc(Razor)::: Pages app created with individual user accounts, Views/Account/Login.cshtml contains the following model declaration:

@model LoginViewModel

La classe générée hérite de :::no-loc(Razor):::Page<dynamic> :The class generated inherits from :::no-loc(Razor):::Page<dynamic>:

public class _Views_Account_Login_cshtml : :::no-loc(Razor):::Page<LoginViewModel>

:::no-loc(Razor)::: expose une Model propriété pour accéder au modèle passé à la vue ::::no-loc(Razor)::: exposes a Model property for accessing the model passed to the view:

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

La directive @model spécifie le type de la propriété Model.The @model directive specifies the type of the Model property. La directive spécifie le type T dans :::no-loc(Razor):::Page<T> pour la classe générée dont dérive la vue.The directive specifies the T in :::no-loc(Razor):::Page<T> that the generated class that the view derives from. Si la directive @model n’est pas spécifiée, la propriété Model est de type dynamic.If the @model directive isn't specified, the Model property is of type dynamic. Pour plus d’informations, consultez modèles fortement typés et le @model mot clé.For more information, see Strongly typed models and the @model keyword.

@namespace

La directive @namespace :The @namespace directive:

  • Définit l’espace de noms de la classe de la page générée, de la :::no-loc(Razor)::: vue MVC ou du :::no-loc(Razor)::: composant.Sets the namespace of the class of the generated :::no-loc(Razor)::: page, MVC view, or :::no-loc(Razor)::: component.
  • Définit les espaces de noms dérivés racine d’une classe de pages, de vues ou de composants à partir du fichier d’importations le plus proche dans l’arborescence de répertoires, _ViewImports. cshtml (vues ou pages) ou _Imports. Razor ( :::no-loc(Razor)::: composants).Sets the root derived namespaces of a pages, views, or components classes from the closest imports file in the directory tree, _ViewImports.cshtml (views or pages) or _Imports.razor (:::no-loc(Razor)::: components).
@namespace Your.Namespace.Here

Pour l' :::no-loc(Razor)::: exemple de pages illustré dans le tableau suivant :For the :::no-loc(Razor)::: Pages example shown in the following table:

  • Chaque page importe Pages/_ViewImports.cshtml .Each page imports Pages/_ViewImports.cshtml .
  • Pages/_ViewImports.cshtml contient @namespace Hello.World.Pages/_ViewImports.cshtml contains @namespace Hello.World.
  • Chaque page a Hello.World comme racine de son espace de noms.Each page has Hello.World as the root of it's namespace.
PagePage Espace de nomsNamespace
Pages/Index.cshtmlPages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtmlPages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtmlPages/MorePages/EvenMorePages/Page.cshtml Hello.World.MorePages.EvenMorePages

Les relations précédentes s’appliquent aux fichiers d’importation utilisés avec les vues et les :::no-loc(Razor)::: composants Mvc.The preceding relationships apply to import files used with MVC views and :::no-loc(Razor)::: components.

Lorsque plusieurs fichiers d’importation ont une directive @namespace, le fichier le plus proche de la page, de la vue ou du composant dans l’arborescence de répertoires est utilisé pour définir l’espace de noms racine.When multiple import files have a @namespace directive, the file closest to the page, view, or component in the directory tree is used to set the root namespace.

Si le dossier EvenMorePages dans l’exemple précédent comprend un fichier d’importations avec @namespace Another.Planet (ou si le fichier Pages/MorePages/EvenMorePages/Page.cshtml contient @namespace Another.Planet), le résultat est indiqué dans le tableau suivant.If the EvenMorePages folder in the preceding example has an imports file with @namespace Another.Planet (or the Pages/MorePages/EvenMorePages/Page.cshtml file contains @namespace Another.Planet), the result is shown in the following table.

PagePage Espace de nomsNamespace
Pages/Index.cshtmlPages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtmlPages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtmlPages/MorePages/EvenMorePages/Page.cshtml Another.Planet

@page

La directive @page a des effets différents selon le type du fichier dans lequel elle apparaît.The @page directive has different effects depending on the type of the file where it appears. La directive :The directive:

La @page directive sur la première ligne d’un fichier . cshtml indique que le fichier est une :::no-loc(Razor)::: page.The @page directive on the first line of a .cshtml file indicates that the file is a :::no-loc(Razor)::: Page. Pour plus d'informations, consultez Présentation :::no-loc(Razor)::: des pages dans ASP.net Core.For more information, see Présentation :::no-loc(Razor)::: des pages dans ASP.net Core.

@section

Ce scénario s’applique uniquement aux affichages et :::no-loc(Razor)::: pages MVC (. cshtml).This scenario only applies to MVC views and :::no-loc(Razor)::: Pages (.cshtml).

La @section directive est utilisée conjointement avec MVC et les :::no-loc(Razor)::: mises en page de pages pour permettre aux vues ou aux pages de restituer le contenu dans différentes parties de la page html.The @section directive is used in conjunction with MVC and :::no-loc(Razor)::: Pages layouts to enable views or pages to render content in different parts of the HTML page. Pour plus d'informations, consultez Disposition dans ASP.NET Core.For more information, see Disposition dans ASP.NET Core.

@using

La directive @using ajoute la directive using C# à la vue générée :The @using directive adds the C# using directive to the generated view:

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

Dans :::no-loc(Razor)::: composants, @using contrôle également les composants qui sont dans la portée.In :::no-loc(Razor)::: components, @using also controls which components are in scope.

Attributs de directiveDirective attributes

:::no-loc(Razor)::: les attributs de directive sont représentés par des expressions implicites avec des mots clés réservés qui suivent le @ symbole.:::no-loc(Razor)::: directive attributes are represented by implicit expressions with reserved keywords following the @ symbol. Un attribut de directive change généralement la manière dont un élément est analysé ou active des fonctionnalités différentes.A directive attribute typically changes the way an element is parsed or enables different functionality.

@attributes

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

@attributes permet à un composant de restituer des attributs non déclarés.@attributes allows a component to render non-declared attributes. Pour plus d'informations, consultez Créer et utiliser des :::no-loc(Razor)::: composants ASP.net Core.For more information, see Créer et utiliser des :::no-loc(Razor)::: composants ASP.net Core.

@bind

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

La liaison de données dans des composants s’effectue avec l’attribut @bind.Data binding in components is accomplished with the @bind attribute. Pour plus d'informations, consultez :::no-loc(Blazor):::Liaison de données ASP.net Core.For more information, see :::no-loc(Blazor):::Liaison de données ASP.net Core.

@on{EVENT}

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

:::no-loc(Razor)::: fournit des fonctionnalités de gestion des événements pour les composants.:::no-loc(Razor)::: provides event handling features for components. Pour plus d'informations, consultez :::no-loc(Blazor):::Gestion des événements ASP.net Core.For more information, see :::no-loc(Blazor):::Gestion des événements ASP.net Core.

@on{EVENT}:preventDefault

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

Empêche l’action par défaut pour l’événement.Prevents the default action for the event.

@on{EVENT}:stopPropagation

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

Arrête la propagation d’événements pour l’événement.Stops event propagation for the event.

@key

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

L’attribut de directive @key amène les composants à comparer l’algorithme afin de garantir la préservation des éléments ou des composants en fonction de la valeur de la clé.The @key directive attribute causes the components diffing algorithm to guarantee preservation of elements or components based on the key's value. Pour plus d'informations, consultez Créer et utiliser des :::no-loc(Razor)::: composants ASP.net Core.For more information, see Créer et utiliser des :::no-loc(Razor)::: composants ASP.net Core.

@ref

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

Les références de composants (@ref) permettent de référencer une instance de composant afin que vous puissiez émettre des commandes vers cette instance.Component references (@ref) provide a way to reference a component instance so that you can issue commands to that instance. Pour plus d'informations, consultez Créer et utiliser des :::no-loc(Razor)::: composants ASP.net Core.For more information, see Créer et utiliser des :::no-loc(Razor)::: composants ASP.net Core.

@typeparam

Ce scénario s’applique uniquement aux :::no-loc(Razor)::: composants (. Razor).This scenario only applies to :::no-loc(Razor)::: components (.razor).

La @typeparam directive déclare un paramètre de type générique pour la classe de composant générée.The @typeparam directive declares a generic type parameter for the generated component class. Pour plus d'informations, consultez Composants ASP.NET Core basés sur un :::no-loc(Blazor)::: modèle.For more information, see Composants ASP.NET Core basés sur un :::no-loc(Blazor)::: modèle.

Délégués basés sur un modèle :::no-loc(Razor):::Templated :::no-loc(Razor)::: delegates

:::no-loc(Razor)::: les modèles vous permettent de définir un extrait de code d’interface utilisateur au format suivant ::::no-loc(Razor)::: templates allow you to define a UI snippet with the following format:

@<tag>...</tag>

L’exemple suivant montre comment spécifier un délégué basé sur :::no-loc(Razor)::: un modèle en tant que Func<T,TResult> .The following example illustrates how to specify a templated :::no-loc(Razor)::: delegate as a Func<T,TResult>. Le type dynamique est spécifié pour le paramètre de la méthode encapsulée par le délégué.The dynamic type is specified for the parameter of the method that the delegate encapsulates. Un type objet est spécifié comme valeur de retour du délégué.An object type is specified as the return value of the delegate. Le modèle est utilisé avec une List<T> de Pet qui a une propriété Name.The template is used with a List<T> of Pet that has a Name property.

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" }
    };
}

Le modèle est rendu avec des éléments pets fournis par une instruction foreach :The template is rendered with pets supplied by a foreach statement:

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

Sortie rendue :Rendered output:

<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>

Vous pouvez également fournir un modèle inline :::no-loc(Razor)::: en tant qu’argument à une méthode.You can also supply an inline :::no-loc(Razor)::: template as an argument to a method. Dans l’exemple suivant, la Repeat méthode reçoit un :::no-loc(Razor)::: modèle.In the following example, the Repeat method receives a :::no-loc(Razor)::: template. La méthode utilise le modèle pour produire du contenu HTML avec des répétitions d’éléments fournis à partir d’une liste :The method uses the template to produce HTML content with repeats of items supplied from a list:

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

En utilisant la liste d’éléments « pets » de l’exemple précédent, la méthode Repeat est appelée avec :Using the list of pets from the prior example, the Repeat method is called with:

  • List<T> de Pet.List<T> of Pet.
  • Nombre de fois que chaque élément « pet » doit être répété.Number of times to repeat each pet.
  • Modèle inline à utiliser pour les éléments de liste d’une liste non triée.Inline template to use for the list items of an unordered list.
<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

Sortie rendue :Rendered output:

<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>

Tag HelpersTag Helpers

Ce scénario s’applique uniquement aux affichages et :::no-loc(Razor)::: pages MVC (. cshtml).This scenario only applies to MVC views and :::no-loc(Razor)::: Pages (.cshtml).

Il existe trois directives spécifiques aux Tag Helpers.There are three directives that pertain to Tag Helpers.

DirectiveDirective FonctionFunction
@addTagHelper Rend les Tag Helpers disponibles dans une vue.Makes Tag Helpers available to a view.
@removeTagHelper Supprime les Tag Helpers précédemment ajoutés à une vue.Removes Tag Helpers previously added from a view.
@tagHelperPrefix Spécifie un préfixe de balise pour activer la prise en charge des Tag Helpers et rendre leur usage explicite.Specifies a tag prefix to enable Tag Helper support and to make Tag Helper usage explicit.

:::no-loc(Razor)::: Mots clés réservés:::no-loc(Razor)::: reserved keywords

:::no-loc(Razor)::: mot:::no-loc(Razor)::: keywords

  • page (Nécessite ASP.NET Core 2,1 ou version ultérieure)page (Requires ASP.NET Core 2.1 or later)
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper (Actuellement pris en charge par ASP.NET Core)helper (Not currently supported by ASP.NET Core)

:::no-loc(Razor)::: les mots clés sont placés dans une séquence d’échappement @(:::no-loc(Razor)::: Keyword) (par exemple, @(functions) ).:::no-loc(Razor)::: keywords are escaped with @(:::no-loc(Razor)::: Keyword) (for example, @(functions)).

:::no-loc(Razor):::Mots clés C#C# :::no-loc(Razor)::: keywords

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

Les :::no-loc(Razor)::: Mots clés C# doivent être double-échappés par @(@C# :::no-loc(Razor)::: Keyword) (par exemple, @(@case) ).C# :::no-loc(Razor)::: keywords must be double-escaped with @(@C# :::no-loc(Razor)::: Keyword) (for example, @(@case)). Le premier @ échappe l' :::no-loc(Razor)::: analyseur.The first @ escapes the :::no-loc(Razor)::: parser. La seconde séquence d’échappement @ est pour l’analyseur C#.The second @ escapes the C# parser.

Mots clés réservés non utilisés par :::no-loc(Razor):::Reserved keywords not used by :::no-loc(Razor):::

  • class

Inspecter la :::no-loc(Razor)::: classe C# générée pour une vueInspect the :::no-loc(Razor)::: C# class generated for a view

Avec kit SDK .NET Core 2,1 ou version ultérieure, le :::no-loc(Razor)::: Kit de développement logiciel (SDK) gère la compilation des :::no-loc(Razor)::: fichiers.With .NET Core SDK 2.1 or later, the :::no-loc(Razor)::: SDK handles compilation of :::no-loc(Razor)::: files. Lors de la génération d’un projet, le :::no-loc(Razor)::: Kit de développement logiciel (SDK) génère un répertoire obj/<build_configuration>/<target_framework_moniker>/ :::no-loc(Razor)::: dans la racine du projet.When building a project, the :::no-loc(Razor)::: SDK generates an obj/<build_configuration>/<target_framework_moniker>/:::no-loc(Razor)::: directory in the project root. La structure de répertoires dans le :::no-loc(Razor)::: répertoire reflète la structure de répertoire du projet.The directory structure within the :::no-loc(Razor)::: directory mirrors the project's directory structure.

Considérez la structure de répertoires suivante dans un projet ASP.NET Core 2,1 :::no-loc(Razor)::: pages ciblant .net Core 2,1 :Consider the following directory structure in an ASP.NET Core 2.1 :::no-loc(Razor)::: Pages project targeting .NET Core 2.1:

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

La création du projet dans la configuration Debug génère le répertoire obj suivant :Building the project in Debug configuration yields the following obj directory:

 obj/
   Debug/
     netcoreapp2.1/
       :::no-loc(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

Pour afficher la classe générée pour pages/index. cshtml , ouvrez obj/Debug/netcoreapp 2.1/ :::no-loc(Razor)::: /pages/index.g.cshtml.cs .To view the generated class for Pages/Index.cshtml , open obj/Debug/netcoreapp2.1/:::no-loc(Razor):::/Pages/Index.g.cshtml.cs .

Ajoutez la classe suivante au projet ASP.NET Core MVC :Add the following class to the ASP.NET Core MVC project:

#if V2
using Microsoft.AspNetCore.Mvc.Razor.Extensions;
using Microsoft.AspNetCore.Razor.Language;

public class CustomTemplateEngine : MvcRazorTemplateEngine
{
    public CustomTemplateEngine(RazorEngine engine, RazorProject project) 
        : base(engine, project)
    {
    }
        
    public override RazorCSharpDocument GenerateCode(RazorCodeDocument codeDocument)
    {
        var csharpDocument = base.GenerateCode(codeDocument);
        var generatedCode = csharpDocument.GeneratedCode;

        // Look at generatedCode

        return csharpDocument;
    }
}
#endif

Dans Startup.ConfigureServices, remplacez la classe :::no-loc(Razor):::TemplateEngine ajoutée par MVC par la classe CustomTemplateEngine :In Startup.ConfigureServices, override the :::no-loc(Razor):::TemplateEngine added by MVC with the CustomTemplateEngine class:

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();

Définissez un point d’arrêt sur l’instruction return csharpDocument; de CustomTemplateEngine.Set a breakpoint on the return csharpDocument; statement of CustomTemplateEngine. Quand l’exécution du programme s’arrête au point d’arrêt, affichez la valeur de generatedCode.When program execution stops at the breakpoint, view the value of generatedCode.

Vue Visualiseur de texte du code généré

Recherches de vues et respect de la casseView lookups and case sensitivity

Le :::no-loc(Razor)::: moteur d’affichage effectue des recherches respectant la casse pour les vues.The :::no-loc(Razor)::: view engine performs case-sensitive lookups for views. Toutefois, la recherche réellement effectuée est déterminée par le système de fichiers sous-jacent :However, the actual lookup is determined by the underlying file system:

  • Source basé sur un fichier :File based source:
    • Sur les systèmes d’exploitation avec des systèmes de fichiers qui ne respectent pas la casse (par exemple, Windows), les recherches de fournisseurs de fichiers physiques ne respectent pas la casse.On operating systems with case insensitive file systems (for example, Windows), physical file provider lookups are case insensitive. Par exemple, return View("Test") trouve les correspondances /Views/Home/Test.cshtml , /Views/home/test.cshtml et toutes les autres variantes de casse.For example, return View("Test") results in matches for /Views/Home/Test.cshtml , /Views/home/test.cshtml , and any other casing variant.
    • Sur des systèmes de fichiers respectant la casse (par exemple, Linux, OSX, et avec EmbeddedFileProvider), les recherches respectent la casse.On case-sensitive file systems (for example, Linux, OSX, and with EmbeddedFileProvider), lookups are case-sensitive. Par exemple, return View("Test") trouve uniquement la correspondance /Views/Home/Test.cshtml .For example, return View("Test") specifically matches /Views/Home/Test.cshtml .
  • Vues précompilées : Avec ASP.NET Core 2.0 et les versions ultérieures, les recherches de vues précompilées ne respectent pas la casse, quels que soient les systèmes d’exploitation.Precompiled views: With ASP.NET Core 2.0 and later, looking up precompiled views is case insensitive on all operating systems. Le comportement est le même que celui du fournisseur de fichiers physiques sur Windows.The behavior is identical to physical file provider's behavior on Windows. Si deux vues précompilées diffèrent seulement par leur casse, le résultat de la recherche est non déterministe.If two precompiled views differ only in case, the result of lookup is non-deterministic.

Les développeurs doivent s’efforcer d’utiliser la même casse pour les noms de fichiers et de répertoires que pour les noms des éléments suivants :Developers are encouraged to match the casing of file and directory names to the casing of:

  • Zone, contrôleur et actionArea, controller, and action names.
  • :::no-loc(Razor)::: Pages.:::no-loc(Razor)::: Pages.

L’utilisation d’une casse identique garantit que les déploiements trouvent toujours les vues associées, indépendamment du système de fichiers sous-jacent.Matching case ensures the deployments find their views regardless of the underlying file system.

Ressources supplémentairesAdditional resources

Présentation de la programmation Web ASP.net à l’aide de :::no-loc(Razor)::: La syntaxe fournit de nombreux exemples de programmation à l’aide de la :::no-loc(Razor)::: syntaxe.Introduction to ASP.NET Web Programming Using the :::no-loc(Razor)::: Syntax provides many samples of programming with :::no-loc(Razor)::: syntax.