Razor syntaxisreferentie voor ASP.NET Core

Artikel
01/23/2025

Door Rick Anderson, Taylor Mullenen Dan Vicarel

Razor is een syntaxis voor markeringen voor het insluiten van .NET-code in webpagina's. De Razor syntaxis bestaat uit Razor markeringen, C# en HTML. Bestanden met Razor hebben over het algemeen een .cshtml bestandsextensie. Razor is ook te vinden in component Razor bestanden (.razor). Razor syntaxis is vergelijkbaar met de sjablonen van verschillende JavaScript SPA-frameworks (Single Page Application), zoals Angular, React, VueJs en Svelte. Zie De functies die in dit artikel worden beschreven, zijn verouderd vanaf ASP.NET Core 3.0voor meer informatie.

Inleiding tot ASP.NET webprogrammering met behulp van de Razor syntaxis biedt veel voorbeelden van programmeren met Razor syntaxis. Hoewel het onderwerp is geschreven voor ASP.NET in plaats van ASP.NET Core, zijn de meeste voorbeelden van toepassing op ASP.NET Core.

HTML weergeven

De standaardtaal Razor is HTML. Het weergeven van HTML vanuit Razor markeringen verschilt niet van het weergeven van HTML uit een HTML-bestand. HTML-opmaak in .cshtmlRazor bestanden wordt door de server ongewijzigd weergegeven.

Razor syntaxis

Razor ondersteunt C# en gebruikt het @ symbool om over te stappen van HTML naar C#. Razor C#-expressies evalueert en weergeeft in de HTML-uitvoer.

Wanneer een @ symbool wordt gevolgd door een Razor gereserveerd trefwoord, wordt het overgegaan naar Razor-specifieke markeringen. Anders wordt het omgezet in platte HTML.

Als u een @ symbool in Razor markeringen wilt escapen, gebruikt u een tweede @ symbool:

<p>@@Username</p>

De code wordt weergegeven in HTML met één @ symbool:

<p>@Username</p>

HTML-kenmerken en -inhoud met e-mailadressen behandelen het @ symbool niet als een overgangsteken. De e-mailadressen in het volgende voorbeeld blijven ongewijzigd tijdens de Razor-verwerking.

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

Scalable Vector Graphics (SVG)

SVG foreignObject-elementen worden ondersteund:

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

Impliciete Razor expressies

Impliciete Razor expressies beginnen met @ gevolgd door C#-code:

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

Met uitzondering van het sleutelwoord C# await mogen impliciete expressies geen spaties bevatten. Als de C#-instructie een duidelijk einde heeft, kunnen spaties worden afgewisseld.

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

Impliciete expressies kunnen geen C#-generics bevatten, omdat de tekens tussen de haken (<>) worden geïnterpreteerd als een HTML-tag. De volgende code is en niet geldig:

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

Met de voorgaande code wordt een compilerfout gegenereerd die vergelijkbaar is met een van de volgende:

Het element 'int' is niet gesloten. Alle elementen moeten zichzelf sluiten of een overeenkomende eindtag hebben.
Kan methodegroep GenericMethod niet converteren naar het type object dat niet is gedelegeerd. Wilde u de methode aanroepen?'

Algemene methodeaanroepen moeten worden verpakt in een expliciete Razor expressie of een Razor codeblok.

Expliciete Razor expressies

Expliciete Razor expressies bestaan uit een @ symbool met gelijke haakjes. De volgende Razor markeringen worden gebruikt om de tijd van vorige week weer te geven:

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

Alle inhoud binnen het @() haakje wordt geëvalueerd en weergegeven in de uitvoer.

Impliciete expressies, zoals beschreven in de vorige sectie, kunnen over het algemeen geen spaties bevatten. In de volgende code wordt één week niet afgetrokken van de huidige tijd:

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

De code geeft de volgende HTML weer:

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

Expliciete expressies kunnen worden gebruikt om tekst samen te voegen met een expressieresultaat:

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

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

Zonder de expliciete expressie wordt Age@joe.Age behandeld als een e-mailadres en wordt Age@joe.Age weergegeven. Wanneer deze is geschreven als een expliciete expressie, wordt Age33 weergegeven.

Expliciete expressies kunnen worden gebruikt om uitvoer van algemene methoden in .cshtml bestanden weer te geven. In de volgende opmaak ziet u hoe u de eerder weergegeven fout corrigeert die is veroorzaakt door de haken van een C#-generiek. De code wordt geschreven als een expliciete expressie:

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

Expressiecodering

C#-expressies die resulteren in een tekenreeks, zijn gecodeerd met HTML. C#-expressies die resulteren in IHtmlContent, worden rechtstreeks via IHtmlContent.WriteToweergegeven. C#-expressies die niet resulteren in IHtmlContent worden geconverteerd naar een tekenreeks door ToString en gecodeerd voordat ze worden weergegeven.

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

De voorgaande code geeft de volgende HTML weer:

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

De HTML wordt in de browser weergegeven als tekst zonder opmaak:

< >Hallo Wereld

De uitvoer van HtmlHelper.Raw is niet gecodeerd, maar wordt weergegeven als HTML-opmaak.

Waarschuwing

Het gebruik van HtmlHelper.Raw op niet-geschoonde gebruikersinvoer is een beveiligingsrisico. Gebruikersinvoer kan schadelijke JavaScript- of andere aanvallen bevatten. Het opschonen van gebruikersinvoer is moeilijk. Vermijd het gebruik van HtmlHelper.Raw met gebruikersinvoer.

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

De code geeft de volgende HTML weer:

<span>Hello World</span>

codeblokken Razor

Razor codeblokken beginnen met @ en worden tussen {}geplaatst. In tegenstelling tot expressies wordt C#-code in codeblokken niet weergegeven. Codeblokken en expressies in een weergave delen hetzelfde bereik en worden gedefinieerd in volgorde:

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

De code geeft de volgende HTML weer:

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

Declareer in codeblokken lokale functies met markup om te dienen als templatetekenmethoden.

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

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

De code geeft de volgende HTML weer:

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

Impliciete overgangen

De standaardtaal in een codeblok is C#, maar de Razor-pagina kan teruggaan naar HTML:

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

Expliciete afgebakende overgang

Als u een subsectie van een codeblok wilt definiëren dat HTML moet weergeven, plaatst u de tekens voor rendering met de tag Razor<text>:

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

Gebruik deze methode om HTML weer te geven die niet wordt omgeven door een HTML-tag. Zonder een HTML- of Razor-tag treedt er een Razor runtimefout op.

De <text>-tag is handig om witruimte te beheren bij het weergeven van inhoud:

Alleen de inhoud tussen de <text> tag wordt weergegeven.
Er wordt geen witruimte voor of na de <text> tag weergegeven in de HTML-uitvoer.

Expliciete lijnovergang

Als u de rest van een hele regel als HTML in een codeblok wilt weergeven, gebruikt u @: syntaxis:

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

Zonder de @: in de code wordt een Razor runtimefout gegenereerd.

Extra @ tekens in een Razor bestand kunnen compilerfouten veroorzaken bij instructies verderop in het blok. Deze extra @ compilerfouten:

Het kan lastig zijn om te begrijpen omdat de werkelijke fout zich voordoet vóór de gemelde fout.
Is gebruikelijk na het combineren van meerdere impliciete en expliciete expressies in één codeblok.

Rendering van voorwaardelijk kenmerk

Razor automatisch kenmerken weglaat die niet nodig zijn. Als de doorgegeven waarde null of falseis, wordt het kenmerk niet weergegeven.

Denk bijvoorbeeld aan het volgende scheermes:

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

Met de voorgaande Razor opmaak wordt de volgende HTML gegenereerd:

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

Besturingsstructuren

Besturingsstructuren zijn een uitbreiding van codeblokken. Alle aspecten van codeblokken (overgang naar markeringen, inline C#) zijn ook van toepassing op de volgende structuren:

Voorwaardelijk `@if, else if, else, and @switch`

@if bepaalt wanneer code wordt uitgevoerd:

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

else en else if het symbool @ niet nodig hebben:

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

In het volgende codevoorbeeld ziet u hoe u een switch-instructie gebruikt.

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

Herhaling van `@for, @foreach, @while, and @do while`

Geparametiseerde HTML kan worden gerenderd met lusbesturingsinstructies. Een lijst met personen weergeven:

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

De volgende lusverklaringen worden ondersteund:

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

Samengestelde `@using`

In C# wordt een using instructie gebruikt om ervoor te zorgen dat een object wordt verwijderd. In Razorwordt hetzelfde mechanisme gebruikt om HTML-Helpers te maken die aanvullende inhoud bevatten. In de volgende code geven HTML Helpers een <form>-tag weer met de @using-instructie:

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

`@try, catch, finally`

Afhandeling van uitzonderingen is vergelijkbaar met 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 beschikt over de mogelijkheid om kritieke secties te beveiligen met vergrendelingsinstructies:

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

Opmerkingen

Razor ondersteunt C#- en HTML-opmerkingen:

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

De code geeft de volgende HTML weer:

<!-- HTML comment -->

Razor opmerkingen worden verwijderd door de server voordat de webpagina wordt weergegeven. Razor gebruikt @* *@ om opmerkingen te scheiden. De volgende code wordt uitgecommentarieerd, zodat de server geen markeringen weergeeft:

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

Richtlijnen

Razor instructies worden vertegenwoordigd door impliciete expressies met gereserveerde trefwoorden na het @ symbool. Een richtlijn verandert doorgaans de manier waarop een weergave wordt gecompileerd of functies.

Als u begrijpt hoe Razor code voor een weergave genereert, is het eenvoudiger om te begrijpen hoe instructies werken.

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

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

De code genereert een klasse die vergelijkbaar is met de volgende:

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

Verderop in dit artikel wordt in de sectie de Razor C#-klasse gecontroleerd die is gegenereerd voor een weergave wordt uitgelegd hoe u deze gegenereerde klasse kunt weergeven.

`@attribute`

De @attribute-instructie voegt het opgegeven kenmerk toe aan de klasse van de gegenereerde pagina of weergave. In het volgende voorbeeld wordt het kenmerk [Authorize] toegevoegd:

@attribute [Authorize]

De @attribute-instructie kan ook worden gebruikt om een routesjabloon op basis van een constante te leveren in een Razor-component. In het volgende voorbeeld wordt de @page-instructie in een onderdeel vervangen door de @attribute-instructie en de routesjabloon op basis van constanten in Constants.CounterRoute, die elders in de app is ingesteld op '/counter':

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

`@code`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Met het @code-blok kan een Razor onderdeel C#-leden (velden, eigenschappen en methoden) toevoegen aan een onderdeel:

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

Voor Razor onderdelen is @code een alias van @functions en wordt aanbevolen voor @functions. Meer dan één @code blok is toegestaan.

`@functions`

Met de @functions-instructie kunt u C#-leden (velden, eigenschappen en methoden) toevoegen aan de gegenereerde klasse:

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

Gebruik in Razor componenten@code boven @functions om C#-leden toe te voegen.

Bijvoorbeeld:

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

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

De code genereert de volgende HTML-markeringen:

<div>From method: Hello</div>

De volgende code is de gegenereerde Razor C#-klasse:

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

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

@functions methoden dienen als sjabloonmethoden wanneer ze opmaak bevatten.

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

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

De code geeft de volgende HTML weer:

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

`@implements`

De @implements-instructie implementeert een interface voor de gegenereerde klasse.

In het volgende voorbeeld wordt System.IDisposable geïmplementeerd, zodat de methode Dispose kan worden aangeroepen:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

`@inherits`

De @inherits-instructie biedt volledige controle over de klasse die door de weergave wordt overgenomen:

@inherits TypeNameOfClassToInheritFrom

De volgende code is een aangepast Razor paginatype:

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

De CustomText wordt weergegeven in een weergave:

@inherits CustomRazorPage<TModel>

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

De code geeft de volgende HTML weer:

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

@model en @inherits kunnen in dezelfde weergave worden gebruikt. @inherits kan zich in een _ViewImports.cshtml-bestand bevinden dat door de weergave wordt geïmporteerd.

@inherits CustomRazorPage<TModel>

De volgende code is een voorbeeld van een sterk getypte weergave:

@inherits CustomRazorPage<TModel>

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

Als 'rick@contoso.com' wordt doorgegeven in het model, genereert de weergave de volgende HTML-markeringen:

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

Met de @inject-instructie kan de Razor-pagina een service vanuit de servicecontainer in een weergave invoegen. Zie Afhankelijkheidsinjectie in weergavenvoor meer informatie.

`@layout`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

De @layout-instructie geeft een indeling op voor routeerbare Razor onderdelen met een @page richtlijn. Indelingsonderdelen worden gebruikt om codeduplicatie en inconsistentie te voorkomen. Zie ASP.NET Core Blazor indelingenvoor meer informatie.

`@model`

Dit scenario is alleen van toepassing op MVC-weergaven en Razor Pagina's (.cshtml).

De @model-instructie geeft het type model aan dat is doorgegeven aan een weergave of pagina:

@model TypeNameOfModel

In een ASP.NET Core MVC- of Razor Pages-app die is gemaakt met afzonderlijke gebruikersaccounts, bevat Views/Account/Login.cshtml de volgende modeldeclaratie:

@model LoginViewModel

De gegenereerde klasse neemt over van RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor stelt een Model eigenschap bloot om toegang te krijgen tot het model dat aan de weergave is doorgegeven.

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

De @model-instructie geeft het type van de eigenschap Model aan. De richtlijn specificeert bij T in RazorPage<T> de gegenereerde klasse waarvan de weergave is afgeleid. Als de @model richtlijn niet is opgegeven, is de eigenschap Model van het type dynamic. Zie Strongly typed models and the @model keywordvoor meer informatie.

`@namespace`

De @namespace richtlijn:

Hiermee stelt u de naamruimte van de klasse van de gegenereerde Razor pagina, MVC-weergave of Razor onderdeel in.
Hiermee stelt u de hoofdnaamruimten van een pagina, weergave of onderdeelklasse in van het dichtstbijzijnde importbestand in de mapstructuur, _ViewImports.cshtml (weergaven of pagina's) of _Imports.razor (Razor onderdelen).

@namespace Your.Namespace.Here

Voor het voorbeeld van Razor Pagina's dat wordt weergegeven in de volgende tabel:

Elke pagina importeert Pages/_ViewImports.cshtml.
Pages/_ViewImports.cshtml bevat @namespace Hello.World.
Elke pagina heeft Hello.World als de wortel van de namespace.

Bladzijde	Namespace
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Hello.World.MorePages.EvenMorePages`

De voorgaande relaties zijn van toepassing op het importeren van bestanden die worden gebruikt met MVC-weergaven en Razor onderdelen.

Wanneer meerdere importbestanden een @namespace instructie hebben, wordt het bestand het dichtst bij de pagina, weergave of component in de mapstructuur gebruikt om de hoofdnaamruimte in te stellen.

Als de map EvenMorePages in het vorige voorbeeld een importbestand bevat met @namespace Another.Planet (of het Pages/MorePages/EvenMorePages/Page.cshtml-bestand @namespace Another.Planetbevat), wordt het resultaat weergegeven in de volgende tabel.

Bladzijde	Namespace
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Another.Planet`

`@page`

De @page richtlijn heeft verschillende effecten, afhankelijk van het type bestand waarin het wordt weergegeven. De richtlijn:

In een .cshtml-bestand wordt aangegeven dat het een Razor-pagina is. Zie Aangepaste routes en Inleiding tot Razor Pagina's in ASP.NET Corevoor meer informatie.
Hiermee geeft u op dat een Razor-onderdeel aanvragen rechtstreeks moet verwerken. Zie ASP.NET Core Blazor routering en navigatievoor meer informatie.

`@preservewhitespace`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Als deze optie is ingesteld op false (standaard), wordt witruimte in de weergegeven markeringen van Razor onderdelen (.razor) verwijderd als:

Voorloop of volging binnen een element.
Voorloopteken of achterloopteken binnen een RenderFragment parameter. Bijvoorbeeld, kindinhoud wordt doorgegeven aan een ander onderdeel.
Het wordt voorafgegaan aan of volgt een C#-codeblok, zoals @if of @foreach.

`@rendermode`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Hiermee stelt u de weergavemodus van een Razor-onderdeel in:

InteractiveServer: hiermee past u interactieve serverweergave toe met behulp van Blazor Server.
InteractiveWebAssembly: hiermee wordt interactieve WebAssembly-rendering toegepast met behulp van Blazor WebAssembly.
InteractiveAuto: past in eerste instantie interactieve WebAssembly-rendering toe met behulp van Blazor Serveren past vervolgens interactieve WebAssembly-rendering toe met behulp van WebAssembly bij volgende bezoeken nadat de Blazor bundel is gedownload.

Voor een onderdeelexemplaren:

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

In de onderdeeldefinitie:

@rendermode InteractiveServer

Notitie

Blazor sjablonen bevatten een statische using-instructie voor RenderMode in het _Imports-bestand van de app (Components/_Imports.razor) voor kortere @rendermode syntaxis:

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

Zonder de voorgaande instructie moeten onderdelen expliciet de statische RenderMode klasse in @rendermode syntaxis opgeven:

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

Zie ASP.NET Core Blazor rendermodivoor meer informatie, waaronder richtlijnen voor het uitschakelen van prerendering met het kenmerk directive/directive.

`@section`

Dit scenario is alleen van toepassing op MVC-weergaven en Razor Pagina's (.cshtml).

De @section instructie wordt gebruikt in combinatie met MVC- en Razor Pagina-indelingen om weergaven of pagina's in staat te stellen inhoud weer te geven in verschillende delen van de HTML-pagina. Zie Indeling in ASP.NET Corevoor meer informatie.

`@typeparam`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

De @typeparam-instructie declareert een algemene typeparameter voor de gegenereerde onderdeelklasse:

@typeparam TEntity

Algemene typen met where typebeperkingen worden ondersteund:

@typeparam TEntity where TEntity : IEntity

Zie de volgende artikelen voor meer informatie:

ondersteuning voor generieke typen in ASP.NET Core Razor componenten
ASP.NET Core Blazor sjabloononderdelen

`@using`

De @using richtlijn voegt de C#-using-instructie toe aan de gegenereerde weergave:

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

In Razor onderdelenbepaalt @using ook welke onderdelen binnen het bereik vallen.

Richtlijnkenmerken

Razor instructiekenmerken worden vertegenwoordigd door impliciete expressies met gereserveerde trefwoorden na het @ symbool. Een instructiekenmerk verandert doorgaans de manier waarop een element wordt gecompileerd of functioneert.

`@attributes`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

@attributes kan een onderdeel niet-gedeclareerde kenmerken weergeven. Voor meer informatie, zie ASP.NET Core Blazor attribute splatting en willekeurige parameters.

`@bind`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Gegevensbinding in onderdelen wordt bereikt met het kenmerk @bind. Zie ASP.NET Core Blazor-gegevensbindingvoor meer informatie.

`@bind:culture`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Gebruik het kenmerk @bind:culture met het kenmerk @bind om een System.Globalization.CultureInfo op te geven voor het parseren en opmaken van een waarde. Zie ASP.NET Core Blazor globalisatie en lokalisatievoor meer informatie.

`@formname`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

@formname wijst een formuliernaam toe aan het HTML-formulier van een Razor-onderdeel of een formulier op basis van EditForm (Editform documentatie). De waarde van @formname moet uniek zijn, waardoor formulierconflicten in de volgende situaties worden voorkomen:

Een formulier wordt in een onderdeel met meerdere formulieren geplaatst.
Een formulier is afkomstig uit een externe klassebibliotheek, meestal een NuGet-pakket, voor een onderdeel met meerdere formulieren en de auteur van de app bepaalt niet de broncode van de bibliotheek om een andere externe formuliernaam in te stellen dan een naam die door een ander formulier in het onderdeel wordt gebruikt.

Zie voor meer informatie en voorbeelden het ASP.NET Core overzicht Blazor van formulieren.

`@on{EVENT}`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Razor biedt functies voor gebeurtenisafhandeling voor onderdelen. Zie ASP.NET Core Blazor event handlingvoor meer informatie.

`@on{EVENT}:preventDefault`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Hiermee voorkomt u de standaardactie voor de gebeurtenis.

`@on{EVENT}:stopPropagation`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Stopt de propagatie voor de gebeurtenis.

`@key`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Het @key-richtlijnkenmerk zorgt ervoor dat het diffing-algoritme van componenten het behoud van elementen of componenten garandeert op basis van de waarde van de sleutel. Zie Element-, component- en modelrelaties behouden in ASP.NET Core Blazorvoor meer informatie.

`@ref`

Dit scenario is alleen van toepassing op Razor onderdelen (.razor).

Onderdeelverwijzingen (@ref) bieden een manier om te verwijzen naar het onderdeelexemplaar, zodat u opdrachten aan dat exemplaar kunt geven. Zie ASP.NET Core Razor-onderdelenvoor meer informatie.

Sjabloon Razor afgevaardigden

Dit scenario is alleen van toepassing op MVC-weergaven en Razor Pagina's (.cshtml).

Met Razor-sjablonen kunt u een UI-fragment definiëren met het volgende formaat:

@<tag>...</tag>

In het volgende voorbeeld wordt geïllustreerd hoe u een Razor sjabloon-gebaseerde gedelegeerde specificeert als een Func<T,TResult>. Het dynamische type wordt opgegeven voor de parameter van de methode die door de delegate wordt ingekapseld. Een objecttype wordt opgegeven als de retourwaarde van de gemachtigde. De sjabloon wordt gebruikt met een List<T> van Pet die een eigenschap Name heeft.

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

De sjabloon wordt weergegeven met pets geleverd door een foreach instructie:

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

Weergegeven uitvoer:

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

U kunt ook een inline-Razor-sjabloon opgeven als argument voor een methode. In het volgende voorbeeld ontvangt de methode Repeat een Razor sjabloon. De methode gebruikt de sjabloon om HTML-inhoud te produceren met herhalingen van items die zijn opgegeven in een lijst:

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

Met behulp van de lijst met huisdieren uit het vorige voorbeeld wordt de methode Repeat aangeroepen met:

List<T> van Pet.
Aantal keren dat elk huisdier moet worden herhaald.
Inlinesjabloon voor de lijstitems van een niet-geordende lijst.

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

Weergegeven uitvoer:

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

Taghelpers

Dit scenario is alleen van toepassing op MVC-weergaven en Razor Pagina's (.cshtml).

Er zijn drie richtlijnen met betrekking tot Tag Helpers.

Richtlijn	Functie
`@addTagHelper`	Tag Helpers voor een weergave beschikbaar maken.
`@removeTagHelper`	Hiermee verwijdert u Tag Helpers die eerder zijn toegevoegd uit een weergave.
`@tagHelperPrefix`	Hiermee geeft u een tagvoorvoegsel op om ondersteuning voor Tag Helper in te schakelen en tag Helper-gebruik expliciet te maken.

Razor gereserveerde trefwoorden

Razor trefwoorden

page
namespace
functions
inherits
model
section
helper (momenteel niet ondersteund door ASP.NET Core)

Razor trefwoorden worden geëscaped met @(Razor Keyword) (bijvoorbeeld @(functions)).

C# Razor Trefwoorden

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

C# Razor trefwoorden moeten dubbel-geëscaped worden met @(@C# Razor Keyword) (bijvoorbeeld @(@case)). De eerste @ ontsnapt aan de Razor parser. De tweede @ ontsnapt aan de C#-parser.

Gereserveerde trefwoorden die niet worden gebruikt door Razor

class

De gegenereerde Razor C# klasse voor een view controleren

De Razor SDK verwerkt de compilatie van Razor bestanden. Standaard worden de gegenereerde codebestanden niet verzonden. Als u het verzenden van de codebestanden wilt inschakelen, stelt u de EmitCompilerGeneratedFiles-instructie in het projectbestand (.csproj) in op true:

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

Bij het bouwen van een 6.0-project (net6.0) in de Debug buildconfiguratie genereert de Razor SDK een obj/Debug/net6.0/generated/ map in de hoofdmap van het project. De submap bevat de verzonden Razor paginacodebestanden.

De Razor SDK verwerkt de compilatie van Razor bestanden. Bij het bouwen van een project genereert de Razor SDK een obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor map in de hoofdmap van het project. De mapstructuur in de Razor map weerspiegelt de mapstructuur van het project.

Bekijk de volgende mapstructuur in een ASP.NET Core Razor Pages 2.1-project:

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

Het bouwen van het project in Debug configuratie levert de volgende obj map op:

 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

Als u de gegenereerde klasse voor Pages/Index.cshtmlwilt weergeven, opent u obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Opzoekopdrachten en hoofdlettergevoeligheid bekijken

De Razor weergave-engine voert hoofdlettergevoelige zoekopdrachten uit voor weergaven. De werkelijke zoekactie wordt echter bepaald door het onderliggende bestandssysteem:

Bron op basis van bestanden:
- Op besturingssystemen met niet-hoofdlettergevoelige bestandssystemen (bijvoorbeeld Windows), zijn zoekacties van fysieke bestandsproviders niet hoofdlettergevoelig. return View("Test") leidt bijvoorbeeld tot overeenkomsten voor /Views/Home/Test.cshtml, /Views/home/test.cshtmlen andere varianten van hoofdletters of kleine letters.
- Op hoofdlettergevoelige bestandssystemen (bijvoorbeeld Linux, OSX en met EmbeddedFileProvider), zijn zoekacties hoofdlettergevoelig. return View("Test") komt bijvoorbeeld specifiek overeen met /Views/Home/Test.cshtml.
Vooraf gecompileerde weergaven: Met ASP.NET Core 2.0 en hoger is het opzoeken van vooraf gecompileerde weergaven hoofdletterongevoelig op alle besturingssystemen. Het gedrag is identiek aan het gedrag van de fysieke bestandsprovider in Windows. Als twee vooraf gecompileerde weergaven alleen verschillen in hoofdlettergebruik, is het resultaat van de opzoekbewerking niet-deterministisch.

Ontwikkelaars worden aangemoedigd om de hoofdletters van bestands- en mapnamen te koppelen aan de behuizing van:

Gebieds-, controller- en actienamen.
Razor Pagina's.

Een overeenkomende case zorgt ervoor dat de implementaties hun weergaven vinden, ongeacht het onderliggende bestandssysteem.

Importen gebruikt door Razor

De volgende importbewerkingen worden gegenereerd door de ASP.NET Core-websjablonen ter ondersteuning van Razor-bestanden:

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;

Aanvullende informatiebronnen

Inleiding tot ASP.NET webprogrammering met behulp van de Razor syntaxis biedt veel voorbeelden van programmeren met Razor syntaxis.

Delen via

Razor syntaxisreferentie voor ASP.NET Core

HTML weergeven

Razor syntaxis

Scalable Vector Graphics (SVG)

Impliciete Razor expressies

Expliciete Razor expressies

Expressiecodering

codeblokken Razor

Impliciete overgangen

Expliciete afgebakende overgang

Expliciete lijnovergang

Rendering van voorwaardelijk kenmerk

Besturingsstructuren

Voorwaardelijk @if, else if, else, and @switch

Herhaling van @for, @foreach, @while, and @do while

Samengestelde @using

@try, catch, finally

@lock

Opmerkingen

Richtlijnen

@attribute

@code

@functions

@implements

@inherits

@inject

@layout

@model

@namespace

@page

@preservewhitespace

@rendermode

@section

@typeparam

@using

Richtlijnkenmerken

@attributes

@bind

@bind:culture

@formname

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

Sjabloon Razor afgevaardigden

Taghelpers

Razor gereserveerde trefwoorden

Razor trefwoorden

C# Razor Trefwoorden

Gereserveerde trefwoorden die niet worden gebruikt door Razor

De gegenereerde Razor C# klasse voor een view controleren

Opzoekopdrachten en hoofdlettergevoeligheid bekijken

Importen gebruikt door Razor

Aanvullende informatiebronnen

Aanvullende resources

Voorwaardelijk `@if, else if, else, and @switch`

Herhaling van `@for, @foreach, @while, and @do while`

Samengestelde `@using`

`@try, catch, finally`

`@lock`

`@attribute`

`@code`

`@functions`

`@implements`

`@inherits`

`@inject`

`@layout`

`@model`

`@namespace`

`@page`

`@preservewhitespace`

`@rendermode`

`@section`

`@typeparam`

`@using`

`@attributes`

`@bind`

`@bind:culture`

`@formname`

`@on{EVENT}`

`@on{EVENT}:preventDefault`

`@on{EVENT}:stopPropagation`

`@key`

`@ref`