Informations de référence sur la syntaxe Razor pour ASP.NET Core

Article
02/23/2023
22 minutes de lecture

Par Rick Anderson, Taylor Mullen et Dan Vicarel

Razor est une syntaxe de balisage permettant d’incorporer du code .NET dans des pages web. La Razor syntaxe se compose de Razor balisage, C# et HTML. Les fichiers contenant ont Razor généralement une .cshtml extension de fichier. Razor se trouve également dans les Razor fichiers de composants (.razor). RazorLa syntaxe est similaire aux moteurs de création de modèles de différents frameworks d’application monopage (SPA) JavaScript, tels que Angular, React, VueJs et Svelte. Pour plus d’informations, consultez Les fonctionnalités décrites dans cet article sont obsolètes à partir de ASP.NET Core 3.0.

Présentation de la programmation web ASP.NET à l’aide de Razor La syntaxe fournit de nombreux exemples de programmation avec Razor la syntaxe. Bien que la rubrique ait été écrite pour ASP.NET plutôt que pour ASP.NET Core, la plupart des exemples s’appliquent à ASP.NET Core.

Rendu HTML

La langue par défaut Razor est HTML. Le rendu du CODE HTML à partir d’un Razor balisage n’est pas différent du rendu html à partir d’un fichier HTML. Le balisage HTML dans les .cshtmlRazor fichiers est rendu par le serveur inchangé.

Syntaxe de Razor

Razor prend en charge C# et utilise le @ symbole pour passer de HTML à C#. Razor évalue les expressions C# et les affiche dans la sortie HTML.

Lorsqu’un @ symbole est suivi d’un Razor mot clé réservé, il passe en Razorbalisage spécifique. Sinon, il effectue une transition en code HTML brut.

Pour échapper à un @ symbole dans le Razor balisage, utilisez un deuxième @ symbole :

<p>@@Username</p>

Le code est affiché en HTML avec un seul symbole @ :

<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. Les adresses e-mail de l’exemple suivant ne sont pas modifiées par Razor analyse :

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

SVG (Scalable Vector Graphics)

Les éléments SVG foreignObject sont pris en charge :

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

Expressions implicites Razor

Les expressions implicites Razor commencent @ par suivies du code C# :

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

<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. Le code suivant n’est pas valide :

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

Le code précédent génère l’un des types d’erreur de compilateur suivants :

L’élément « int » n’a pas été fermé. Tous les éléments doivent se fermer automatiquement ou contenir une balise de fin correspondante.
Impossible de convertir le groupe de méthodes 'GenericMethod' en type non-délégué 'object'. Souhaitiez-vous appeler la méthode ?

Les appels de méthode générique doivent être encapsulés dans une expression explicite Razor ou un Razor bloc de code.

Expressions explicites Razor

Les expressions explicites Razor se composent d’un @ symbole avec une parenthèse équilibrée. Pour afficher l’heure de la semaine dernière, le balisage suivant Razor est utilisé :

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

Les expressions implicites, décrites dans la section précédente, ne doivent généralement pas contenir d’espaces. Dans le code suivant, une semaine n’est pas déduite de l’heure actuelle :

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

Le code s’affiche en HTML de la façon suivante :

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

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

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

Sans l’expression explicite, Age@joe.Age est traité comme une adresse e-mail, et Age@joe.Age est affiché. Avec une expression explicite, Age33 est affiché.

Les expressions explicites peuvent être utilisées pour restituer la sortie à partir de méthodes génériques dans des .cshtml fichiers. Le balisage suivant montre comment corriger l’erreur affichée précédemment provoquée par les crochets d’un générique C#. Le code est écrit sous forme d’expression explicite :

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

Encodage des expressions

Les expressions C# évaluées qui correspondent à une chaîne sont encodées en HTML. Les expressions C# évaluées qui correspondent à IHtmlContent sont affichées directement par 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.

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

Le code précédent affiche le code HTML suivant :

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

Le code HTML s’affiche dans le navigateur sous forme de texte brut :

Hello World

La sortie HtmlHelper.Raw n’est pas encodée, mais elle est affichée sous forme de balisage HTML.

Avertissement

Utiliser HtmlHelper.Raw sur des entrées utilisateur non nettoyées présente un risque pour la sécurité. Les entrées utilisateur peuvent contenir du code malveillant JavaScript ou d’un autre type. Le nettoyage des entrées utilisateur est difficile. C’est pourquoi il est préférable de ne pas utiliser HtmlHelper.Raw sur des entrées utilisateur.

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

Le code s’affiche en HTML de la façon suivante :

<span>Hello World</span>

Razor blocs de code

Razor les blocs de code commencent @ par et sont placés par {}. Contrairement aux expressions, le code C# figurant dans des blocs de code n’est pas affiché. Les blocs de code et les expressions dans une vue ont la même étendue et sont définis dans l’ordre :

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

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

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

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

Transitions implicites

La langue par défaut d’un bloc de code est C#, mais la Razor page peut revenir au code HTML :

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

Conversion délimitée explicite

Pour définir une sous-section d’un bloc de code qui doit afficher du code HTML, entourez les caractères pour le rendu avec la Razor<text> balise :

@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. Sans code HTML ou Razor balise, une Razor erreur d’exécution se produit.

La balise <text> est utile pour contrôler les espaces blancs dans le contenu affiché :

Seul le contenu situé dans la balise <text> est affiché.
Aucun espace blanc avant ou après la balise <text> ne s’affiche dans la sortie HTML.

Transition de ligne explicite

Pour restituer le reste d’une ligne entière au format HTML à l’intérieur d’un bloc de code, utilisez @: la syntaxe :

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

Sans dans @: le code, une Razor erreur d’exécution est générée.

Des caractères supplémentaires @ dans un Razor fichier peuvent provoquer des erreurs de compilateur au niveau des instructions plus loin dans le bloc. Ces erreurs supplémentaires @ du compilateur :

Peut être difficile à comprendre, car l’erreur réelle se produit avant l’erreur signalée.
Est courant après la combinaison de plusieurs expressions implicites et explicites dans un seul bloc de code.

Rendu d’attribut conditionnel

Razor omet automatiquement les attributs qui ne sont pas nécessaires. Si la valeur passée est null ou false, l’attribut n’est pas rendu.

Par exemple, considérez le razor suivant :

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

Le balisage précédent Razor génère le code HTML suivant :

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

Structures de contrôle

Les structures de contrôle sont une extension des blocs de code. Toutes les caractéristiques des blocs de code (conversion de balisage, Inline C#) valent aussi pour les structures suivantes :

Conditionnels `@if, else if, else, and @switch`

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

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

else et else if ne nécessitent pas le symbole @ :

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

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

Boucle `@for, @foreach, @while, and @do while`

Le rendu HTML peut être réalisé à partir d'instructions de contrôle de boucle. Pour afficher une liste de personnes :

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

Les instructions de boucle suivantes sont prises en charge :

@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 `@using`

En C#, une instruction using est utilisée pour garantir la dispose d’un objet. Dans Razor, le même mécanisme est utilisé pour créer des helpers HTML qui contiennent du contenu supplémentaire. Dans le code suivant, les HTML Helpers affichent une balise <form> à l’aide de l’instruction @using :

@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# :

@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 a la capacité de protéger les sections critiques avec des instructions de verrouillage :

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

Commentaires

Razor prend en charge les commentaires C# et HTML :

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

Le code s’affiche en HTML de la façon suivante :

<!-- HTML comment -->

Razor les commentaires sont supprimés par le serveur avant le rendu de la page web. Razor utilise @* *@ pour délimiter les commentaires. Le code suivant est commenté pour indiquer au serveur de ne pas afficher le balisage :

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

Directives

Razor les directives sont représentées par des expressions implicites avec des mots clés réservés après le @ symbole. En règle générale, une directive change la manière dont une vue est analysée ou active une fonctionnalité différente.

La compréhension de la façon dont Razor génère le code pour une vue facilite la compréhension du fonctionnement des directives.

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

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

Plus loin dans cet article, la section Inspecter la Razor classe C# générée pour une vue explique comment afficher cette classe générée.

`@attribute`

La directive @attribute permet d’ajouter l’attribut donné à la classe de la page ou de la vue générée. L’exemple suivant ajoute l’attribut [Authorize] :

@attribute [Authorize]

La @attribute directive peut également être utilisée pour fournir un modèle d’itinéraire constant dans un Razor composant. Dans l’exemple suivant, la @page directive dans un composant est remplacée par la directive et le @attribute modèle d’itinéraire constant dans Constants.CounterRoute, qui est défini ailleurs dans l’application sur «/counter » :

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

`@code`

Ce scénario s’applique uniquement aux Razor composants (.razor).

Le @code bloc permet à un composant d’ajouter Razor des membres C# (champs, propriétés et méthodes) à un composant :

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

Pour Razor les composants, @code est un alias de @functions et recommandé sur @functions. Plus d’un bloc @code est autorisé.

`@functions`

La directive @functions permet d’ajouter des membres C# (champs, propriétés et méthodes) à la classe générée :

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

Dans Razor les composants, utilisez @code à pour @functions ajouter des membres C#.

Par exemple :

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

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

Le code génère le balisage HTML suivant :

<div>From method: Hello</div>

Le code suivant est la classe C# générée 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

Les méthodes @functions servent de méthodes de création de modèles lorsqu’elles comprennent des balises :

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

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

L’exemple suivant implémente System.IDisposable afin que la méthode Dispose puisse être appelée :

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

@inherits TypeNameOfClassToInheritFrom

Le code suivant est un type de page personnalisé 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.";
}

Le CustomText s’affiche dans une vue :

@inherits CustomRazorPage<TModel>

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

Le code s’affiche en HTML de la façon suivante :

<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. @inherits peut se trouver dans un _ViewImports.cshtml fichier que la vue importe :

@inherits CustomRazorPage<TModel>

Le code suivant est un exemple de vue fortement typée :

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

<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 à la Razor page d’injecter un service à partir du conteneur de service dans une vue. Pour plus d’informations, consultez Injection de dépendances dans les vues.

`@layout`

Ce scénario s’applique uniquement aux Razor composants (.razor).

La @layout directive spécifie une disposition pour les composants routables Razor qui ont une @page directive. Les composants de disposition sont utilisés pour éviter la duplication et l’incohérence de code. Pour plus d’informations, consultez dispositions ASP.NET CoreBlazor.

`@model`

Ce scénario s’applique uniquement aux vues et Razor pages MVC (.cshtml).

La directive @model spécifie le type du modèle passé à une vue ou une page :

@model TypeNameOfModel

Dans une ASP.NET Core application MVC ou Razor Pages créée avec des comptes d’utilisateur individuels, Views/Account/Login.cshtml contient la déclaration de modèle suivante :

@model LoginViewModel

La classe générée hérite de RazorPage<LoginViewModel> :

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor expose une propriété permettant d’accéder Model au modèle passé à la vue :

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

La directive @model spécifie le type de la propriété Model. La directive spécifie le type T dans RazorPage<T> pour la classe générée dont dérive la vue. Si la directive @model n’est pas spécifiée, la propriété Model est de type dynamic. Pour plus d’informations, consultez Strongly typed models and the @model keyword.

`@namespace`

La directive @namespace :

Définit l’espace de noms de la classe de la page, de la vue MVC ou Razor du composant généréRazor.
Définit les espaces de noms dérivés racine d’une page, d’une vue ou d’une classe de composants à partir du fichier d’importation le plus proche dans l’arborescence de répertoires ( _ViewImports.cshtml vues ou pages) ou _Imports.razor (Razor composants).

@namespace Your.Namespace.Here

Pour l’exemple Razor Pages indiqué dans le tableau suivant :

Chaque page importe Pages/_ViewImports.cshtml.
Pages/_ViewImports.cshtml contient @namespace Hello.World.
Chaque page a Hello.World comme racine de son espace de noms.

Page	Espace de noms
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Hello.World.MorePages.EvenMorePages`

Les relations précédentes s’appliquent à l’importation de fichiers utilisés avec des vues et Razor des composants MVC.

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.

Si le EvenMorePages dossier de l’exemple précédent contient un fichier d’importation avec @namespace Another.Planet (ou le Pages/MorePages/EvenMorePages/Page.cshtml fichier contient @namespace Another.Planet), le résultat s’affiche dans le tableau suivant.

Page	Espace de noms
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/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. La directive :

Dans un .cshtml fichier indique que le fichier est une Razor page. Pour plus d’informations, consultez Itinéraires personnalisés et Présentation des Razor pages dans ASP.NET Core.
Spécifie qu’un Razor composant doit gérer les requêtes directement. Pour plus d’informations, consultez routage et navigation ASP.NET CoreBlazor.

`@preservewhitespace`

Ce scénario s’applique uniquement aux Razor composants (.razor).

Lorsque la valeur est définie false sur (par défaut), les espaces blancs dans le balisage rendu des Razor composants (.razor) sont supprimés si :

Espace blanc de début ou de fin au sein d’un élément.
Début ou fin dans un RenderFragment paramètre. Par exemple, du contenu enfant passé à un autre composant.
Espace blanc précédant ou suivant un bloc de code C#, comme @if ou @foreach.

`@section`

Ce scénario s’applique uniquement aux vues et Razor pages MVC (.cshtml).

La @section directive est utilisée conjointement avec les mises en page MVC et Razor Pages pour permettre aux vues ou aux pages de restituer du contenu dans différentes parties de la page HTML. Pour plus d’informations, consultez Disposition dans ASP.NET Core.

`@using`

La directive @using ajoute la directive using C# à la vue générée :

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

Dans Razor les composants, @using contrôle également quels composants sont dans l’étendue.

Attributs de directive

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. Un attribut de directive change généralement la façon dont un élément est analysé ou active différentes fonctionnalités.

`@attributes`

Ce scénario s’applique uniquement aux Razor composants (.razor).

@attributes permet à un composant de restituer des attributs non déclarés. Pour plus d’informations, consultez composants ASP.NET CoreRazor.

`@bind`

Ce scénario s’applique uniquement aux Razor composants (.razor).

La liaison de données dans des composants s’effectue avec l’attribut @bind. Pour plus d’informations, consultez liaison de données ASP.NET CoreBlazor.

`@bind:culture`

Ce scénario s’applique uniquement aux Razor composants (.razor).

Utilisez l’attribut @bind:culture avec l’attribut @bind pour fournir un System.Globalization.CultureInfo pour l’analyse et la mise en forme d’une valeur. Pour plus d’informations, consultez ASP.NET Core Blazor la globalisation et la localisation.

`@on{EVENT}`

Ce scénario s’applique uniquement aux Razor composants (.razor).

Razor fournit des fonctionnalités de gestion des événements pour les composants. Pour plus d’informations, consultez gestion des événements ASP.NET CoreBlazor.

`@on{EVENT}:preventDefault`

Ce scénario s’applique uniquement aux Razor composants (.razor).

Empêche l’action par défaut pour l’événement.

`@on{EVENT}:stopPropagation`

Ce scénario s’applique uniquement aux Razor composants (.razor).

Arrête la propagation de l’événement.

`@key`

Ce scénario s’applique uniquement aux Razor composants (.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é. Pour plus d’informations, consultez composants ASP.NET CoreRazor.

`@ref`

Ce scénario s’applique uniquement aux Razor composants (.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. Pour plus d’informations, consultez composants ASP.NET CoreRazor.

`@typeparam`

Ce scénario s’applique uniquement aux Razor composants (.razor).

La directive @typeparam déclare un paramètre de type générique pour la classe de composant générée :

@typeparam TEntity

Les types génériques avec where des contraintes de type sont pris en charge :

@typeparam TEntity where TEntity : IEntity

Pour plus d’informations, consultez les articles suivants :

`@typeparam`

Ce scénario s’applique uniquement aux Razor composants (.razor).

La directive @typeparam déclare un paramètre de type générique pour la classe de composant générée :

@typeparam TEntity

Pour plus d’informations, consultez les articles suivants :

Délégués modèle Razor

Razor les modèles vous permettent de définir un extrait de code d’interface utilisateur au format suivant :

@<tag>...</tag>

L’exemple suivant montre comment spécifier un délégué avec Razor modèle en tant que Func<T,TResult>. Le type dynamique est spécifié pour le paramètre de la méthode encapsulée par le délégué. Un type objet est spécifié comme valeur de retour du délégué. Le modèle est utilisé avec une List<T> de Pet qui a une propriété 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" }
    };
}

Le modèle est rendu avec des éléments pets fournis par une instruction foreach :

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

Sortie rendue :

<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 Razor en tant qu’argument à une méthode. Dans l’exemple suivant, la Repeat méthode reçoit un Razor modèle. 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 :

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

List<T> de Pet.
Nombre de fois que chaque élément « pet » doit être répété.
Modèle inline à utiliser pour les éléments de liste d’une liste non triée.

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

Sortie rendue :

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

Ce scénario s’applique uniquement aux vues et Razor pages MVC (.cshtml).

Il existe trois directives spécifiques aux Tag Helpers.

Directive	Fonction
`@addTagHelper`	Rend les Tag Helpers disponibles dans une vue.
`@removeTagHelper`	Supprime les Tag Helpers précédemment ajoutés à une vue.
`@tagHelperPrefix`	Spécifie un préfixe de balise pour activer la prise en charge des Tag Helpers et rendre leur usage explicite.

Razor mots clés réservés

Razor Mots-clés

page
namespace
functions
inherits
model
section
helper(Actuellement non pris en charge par ASP.NET Core)

Razor les mots clés sont placés dans une séquence d’échappement avec @(Razor Keyword) (par exemple, @(functions)).

Mots clés C# Razor

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

Les mots clés C# Razor doivent être à double échappement avec @(@C# Razor Keyword) (par exemple, @(@case)). Le premier @ s’échappe de l’analyseur Razor . La seconde séquence d’échappement @ est pour l’analyseur C#.

Mots clés réservés non utilisés par Razor

class

Inspecter la Razor classe C# générée pour une vue

Le Razor Kit de développement logiciel (SDK) gère la compilation des Razor fichiers. Par défaut, les fichiers de code générés ne sont pas émis. Pour activer l’émission des fichiers de code, définissez la EmitCompilerGeneratedFiles directive dans le fichier projet (.csproj) sur true:

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

Lors de la génération d’un projet 6.0 (net6.0) dans la configuration de build Debug , le Razor KIT de développement logiciel (SDK) génère un obj/Debug/net6.0/generated/ répertoire à la racine du projet. Son sous-répertoire contient les fichiers de code de page émis Razor .

Le Razor Kit de développement logiciel (SDK) gère la compilation des Razor fichiers. Lors de la génération d’un projet, le Razor KIT de développement logiciel (SDK) génère un obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor répertoire à la racine du projet. La structure de répertoires dans le Razor répertoire reflète la structure de répertoires du projet.

Considérez la structure de répertoires suivante dans un projet 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

La génération du projet dans Debug la configuration génère le répertoire suivant obj :

 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

Pour afficher la classe générée pour Pages/Index.cshtml, ouvrez obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Recherches de vues et respect de la casse

Le Razor moteur d’affichage effectue des recherches respectant la casse pour les vues. Toutefois, la recherche réellement effectuée est déterminée par le système de fichiers sous-jacent :

Source basé sur un fichier :
- 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. Par exemple, return View("Test") génère des correspondances pour /Views/Home/Test.cshtml, /Views/home/test.cshtmlet toute autre variante de casse.
- Sur des systèmes de fichiers respectant la casse (par exemple, Linux, OSX, et avec EmbeddedFileProvider), les recherches respectent la casse. Par exemple, return View("Test") correspond spécifiquement à /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. Le comportement est le même que celui du fournisseur de fichiers physiques sur Windows. Si deux vues précompilées diffèrent seulement par leur casse, le résultat de la recherche est non déterministe.

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 :

Zone, contrôleur et action
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.

Importations utilisées par Razor

Les importations suivantes sont générées par les modèles web ASP.NET Core pour prendre en charge Razor les fichiers :

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;

Ressources supplémentaires

Présentation de la programmation web ASP.NET à l’aide de Razor La syntaxe fournit de nombreux exemples de programmation avec Razor la syntaxe.

Informations de référence sur la syntaxe Razor pour ASP.NET Core

Rendu HTML

Syntaxe de Razor

SVG (Scalable Vector Graphics)

Expressions implicites Razor

Expressions explicites Razor

Encodage des expressions

Razor blocs de code

Transitions implicites

Conversion délimitée explicite

Transition de ligne explicite

Rendu d’attribut conditionnel

Structures de contrôle

Conditionnels @if, else if, else, and @switch

Boucle @for, @foreach, @while, and @do while

Instruction composée @using

@try, catch, finally

@lock

Commentaires

Directives

@attribute

@code

@functions

@implements

@inherits

@inject

@layout

@model

@namespace

@page

@preservewhitespace

@section

@using

Attributs de directive

@attributes

@bind

@bind:culture

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

@typeparam

@typeparam

Délégués modèle Razor

Tag Helpers

Razor mots clés réservés

Razor Mots-clés

Mots clés C# Razor

Mots clés réservés non utilisés par Razor

Inspecter la Razor classe C# générée pour une vue

Recherches de vues et respect de la casse

Importations utilisées par Razor

Ressources supplémentaires

Ressources supplémentaires

Ressources supplémentaires

Conditionnels `@if, else if, else, and @switch`

Boucle `@for, @foreach, @while, and @do while`

Instruction composée `@using`

`@try, catch, finally`

`@lock`

`@attribute`

`@code`

`@functions`

`@implements`

`@inherits`

`@inject`

`@layout`

`@model`

`@namespace`

`@page`

`@preservewhitespace`

`@section`

`@using`

`@attributes`

`@bind`

`@bind:culture`

`@on{EVENT}`

`@on{EVENT}:preventDefault`

`@on{EVENT}:stopPropagation`

`@key`

`@ref`

`@typeparam`

`@typeparam`