Razor-Syntaxreferenz für ASP.NET Core

Von Rick Anderson, Taylor Mullen und Dan Vicarel

Razor ist eine Markupsyntax für das Einbetten von .NET-basierten Code in Webseiten. Die Razor Syntax besteht aus Razor Markup, C#und HTML. Dateien, die im Allgemeinen eine .cshtml Dateierweiterung enthaltenRazor. Razor wird auch in Razor Komponentendateien (.razor) gefunden. RazorDie Syntax ähnelt den Templating-Engines verschiedener JavaScript-Single-Page-Frameworks (SPA) wie Angular, React, VueJs und Svelte. Weitere Informationen finden Sie unter Verwendung von JavaScript-Diensten zum Erstellen von Einzelseitenanwendungen in ASP.NET Core.

Einführung in die ASP.NET Webprogrammierung mithilfe der Razor Syntax bietet viele Beispiele für die Programmierung mit Razor Syntax. Obwohl das Thema für ASP.NET statt für ASP.NET Core geschrieben wurde, gelten die meisten Beispiele für ASP.NET Core.

Rendern von HTML

Die Standardsprache Razor ist HTML. Das Rendern von HTML aus Markup unterscheidet sich nicht vom Rendern von HTML-Dateien Razor . HTML-Markup in .cshtmlRazor Dateien wird vom Server unverändert gerendert.

Razor-Syntax

Razor unterstützt C# und verwendet das @ Symbol zum Übergang von HTML zu C#. Razor wertet C#-Ausdrücke aus und rendert sie in der HTML-Ausgabe.

Wenn ein @Razor Symbol einem reservierten Schlüsselwort gefolgt wird, übergibt es sich in Razor-spezifisches Markup. Andernfalls wechselt es in einfache HTML.

Um ein Symbol in Razor Markup zu entwischen, verwenden Sie ein @ zweites @ Symbol:

<p>@@Username</p>

Der Code wird in HTML mit einem einzelnen @-Symbol gerendert:

<p>@Username</p>

Bei HTML-Attributen und Inhalt mit E-Mail-Adressen wird das @-Symbol nicht als ein Übergangszeichen behandelt. Die E-Mail-Adressen im folgenden Beispiel sind von Razor der Analyse unberührt:

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

Skalierbare Vektorgrafiken (SVG)

SVGforeignObject-Elemente werden unterstützt:

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

Implizite Razor Ausdrücke

Implizite Razor Ausdrücke beginnen mit dem C#-Code:@

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

Mit Ausnahme des C#-Schlüsselworts await dürfen implizite Ausdrücke keine Leerzeichen enthalten. Wird die C#-Anweisung eindeutig beendet, können auch Leerzeichen verwendet werden:

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

Implizite Ausdrücke dürfen keine C#-Generics enthalten, da die Zeichen innerhalb der Klammern (<>) als HTML-Tag interpretiert werden. Der folgende Code ist ungültig:

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

Der vorhergehende Code erzeugt einen Compilerfehler, der folgendermaßen aussehen kann:

  • Das Element „int“ wurde nicht geschlossen. Alle Elemente müssen entweder selbstschließend sein oder ein zugehöriges Endtag besitzen.
  • Die Methodengruppe „GenericMethod“ kann nicht in den Nichtdelegattyp „Objekt“ konvertiert werden. Wollten Sie die Methode aufrufen?

Generische Methodenaufrufe müssen in einen expliziten Razor Ausdruck oder einen Razor Codeblock umgebrochen werden.

Explizite Razor Ausdrücke

Explizite Razor Ausdrücke bestehen aus einem @ Symbol mit ausgewogener Klammer. Um die Zeit der letzten Woche zu rendern, wird das folgende Razor Markup verwendet:

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

Jeglicher Inhalt innerhalb der @()-Klammer wird ausgewertet und in der Ausgabe gerendert.

Die im vorherigen Abschnitt beschriebenen impliziten Ausdrücke dürfen grundsätzlich keine Leerzeichen enthalten. Im folgenden Code wird eine Woche nicht von der aktuellen Uhrzeit abgezogen:

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

Der Code rendert den folgenden HTML-Code:

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

Explizite Ausdrücke können zum Verketten von Text mit einem Ergebnis des Ausdrucks verwendet werden:

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

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

Ohne den expliziten Ausdruck wird <p>Age@joe.Age</p> als E-Mail-Adresse behandelt und <p>Age@joe.Age</p> gerendert. <p>Age33</p> wird gerendert, wenn es als expliziter Ausdruck geschrieben wird.

Explizite Ausdrücke können verwendet werden, um die Ausgabe von generischen Methoden in .cshtml Dateien zu rendern. Das folgende Markup zeigt, wie der weiter oben gezeigte Fehler behoben wird, der durch die Klammern einer generischen C#-Funktion verursacht wurde. Der Code wird als expliziter Ausdruck geschrieben:

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

Codieren von Ausdrücken

C#-Ausdrücke, die als Zeichenfolge ausgewertet werden, werden HTML-codiert. C#-Ausdrücke, die als IHtmlContent ausgewertet werden, werden direkt durch IHtmlContent.WriteTo gerendert. C#-Ausdrücke, die nicht als IHtmlContent ausgewertet werden, werden durch ToString in eine Zeichenfolge konvertiert und vor dem Rendern codiert.

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

Der vorherige Code rendert den folgenden HTML-Code:

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

Der HTML-Code wird im Browser als Nur-Text angezeigt:

<span> Hallo Welt</span>

Die Ausgabe HtmlHelper.Raw wird nicht codiert, sondern als HTML-Markup gerendert.

Warnung

Die Verwendung von HtmlHelper.Raw bei einer nicht bereinigten Benutzereingabe stellt ein Sicherheitsrisiko dar. Benutzereingaben können schädlichen JavaScript-Code oder andere Sicherheitsrisiken enthalten. Das Bereinigen von Benutzereingaben ist schwierig. Vermeiden Sie daher die Verwendung von HtmlHelper.Raw bei Benutzereingaben.

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

Der Code rendert den folgenden HTML-Code:

<span>Hello World</span>

Razor Codeblöcke

Razor Codeblöcke beginnen mit @ und werden durch {}eingeschlossen. Im Gegensatz zu Ausdrücken wird C#-Code in Codeblöcken nicht gerendert. Codeblöcke und Ausdrücke in einer Ansicht nutzen den gleichen Bereich und werden der Reihe nach definiert:

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

Der Code rendert den folgenden HTML-Code:

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

Deklarieren Sie in Codeblöcken lokale Funktionen mit Markup als Vorlagenmethoden:

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

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

Der Code rendert den folgenden HTML-Code:

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

Implizite Übergänge

Die Standardsprache in einem Codeblock ist C#, aber die Razor Seite kann zurück zu HTML wechseln:

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

Durch Trennzeichen getrennte explizite Übergänge

Um einen Teilabschnitt eines Codeblocks zu definieren, der HTML rendern soll, geben Sie die Zeichen für das Rendern mit dem Razor<text> Tag ein:

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

Verwenden Sie diese Methode zum Rendern von HTML-Code, der nicht von einem HTML-Tag umschlossen ist. Ohne HTML oder Razor Tag tritt ein Razor Laufzeitfehler auf.

Das <text>-Tag ist nützlich, wenn Sie beim Rendern von Inhalt Leerzeichen steuern möchten:

  • Nur der Inhalt zwischen den <text>-Tags wird gerendert.
  • In der HTML-Ausgabe werden keine Leerzeichen vor oder nach dem <text>-Tag angezeigt.

Explizite Zeilenübergänge

Verwenden Sie die @:-Syntax, um den Rest einer kompletten Zeile als HTML-Code in einem Codeblock zu rendern:

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

Ohne den @: Code wird ein Razor Laufzeitfehler generiert.

Zusätzliche @ Zeichen in einer Razor Datei können zu Compilerfehlern bei Anweisungen später im Block führen. Diese Compilerfehler können dann schwer nachvollziehbar sein, da der tatsächliche vor dem gemeldeten Fehler auftritt. Dieser Fehler tritt häufig auf, wenn mehrere implizite/explizite Ausdrücke in einem einzigen Codeblock kombiniert werden.

Steuerungsstrukturen

Steuerungsstrukturen sind eine Erweiterung von Codeblöcken. Alle Aspekte von Codeblöcken (Übergang zu Markup, Inline-C#) gelten auch für die folgenden Strukturen:

Bedingungen @if, else if, else, and @switch

@if steuert, wann der Code ausgeführt wird:

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

else und else if erfordern kein @-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>
}

Im folgenden Markup wird die Verwendung einer switch-Anweisung veranschaulicht:

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

Schleife @for, @foreach, @while, and @do while

Auf Vorlagen basierender HTML-Code kann mit Anweisungen zur Steuerung von Schleifen gerendert werden. So rendern Sie eine Liste mit Personen.

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

Die folgenden Schleifenanweisungen werden unterstützt:

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

Zusammengesetztes @using

In C# kann mit einer using-Anweisung sichergestellt werden, dass ein Objekt freigegeben wurde. In Razor, wird derselbe Mechanismus verwendet, um HTML-Hilfselemente zu erstellen, die zusätzliche Inhalte enthalten. Im folgenden Code wird ein <form>-Tag mit der @using-Anweisung durch HTML-Hilfsprogramme gerendert:

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

@try, catch, finally

Die Behandlung von Ausnahmen ist vergleichbar mit 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 bietet die Möglichkeit, kritische Abschnitte mit Sperranweisungen zu schützen:

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

Kommentare

Razor unterstützt C#- und HTML-Kommentare:

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

Der Code rendert den folgenden HTML-Code:

<!-- HTML comment -->

Razor Kommentare werden vom Server entfernt, bevor die Webseite gerendert wird. Razor wird verwendet @* *@ , um Kommentare zu trennen. Der folgende Code ist auskommentiert, damit vom Server kein Markup gerendert wird:

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

Anweisungen

Razor Direktiven werden durch implizite Ausdrücke mit reservierten Schlüsselwörtern nach dem @ Symbol dargestellt. Eine Anweisung ändert in der Regel die Analyse einer Ansicht oder aktiviert unterschiedliche Funktionen.

Das Verständnis, wie Razor Code für eine Ansicht generiert wird, erleichtert das Verständnis der Funktionsweise von Direktiven.

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

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

Durch den Code wird eine Klasse ähnlich der folgenden generiert:

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

Später in diesem Artikel wird im Abschnitt "Überprüfen der Razor für eine Ansicht generierten C#-Klasse " erläutert, wie diese generierte Klasse angezeigt wird.

@attribute

Die @attribute-Anweisung fügt das angegebene Attribut zu der Klasse der generierten Seite oder Ansicht hinzu. Im folgenden Beispiel wird das [Authorize]-Attribut hinzugefügt:

@attribute [Authorize]

@code

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Mit dem @code Block kann eine Razor Komponente C#-Member (Felder, Eigenschaften und Methoden) zu einer Komponente hinzufügen:

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

Für Razor Komponenten @code ist ein Alias von @functions und empfohlen über @functions. Mehrere @code-Blöcke sind zulässig.

@functions

Die @functions-Anweisung ermöglicht das Hinzufügen von C#-Membern (Feldern, Eigenschaften und Methoden) zur generierten Klasse:

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

Verwenden Sie @code@functions in Razor Komponenten das Hinzufügen von C#-Elementen.

Beispiel:

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

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

Der Code generiert das folgende HTML-Markup:

<div>From method: Hello</div>

Der folgende Code ist die generierte 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 Vorlagenmethoden, wenn sie Markup aufweisen:

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

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

Der Code rendert den folgenden HTML-Code:

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

@implements

Die @implements-Anweisung implementiert eine Schnittstelle für die generierte Klasse.

Im folgenden Beispiel wird System.IDisposable implementiert, sodass die Dispose-Methode aufgerufen werden kann:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

@inherits

Die @inherits-Anweisung bietet uneingeschränkten Zugriff auf die Klasse, die die Ansicht erbt:

@inherits TypeNameOfClassToInheritFrom

Der folgende Code ist ein benutzerdefinierter Razor Seitentyp:

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

CustomText wird in einer Ansicht angezeigt:

@inherits CustomRazorPage<TModel>

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

Der Code rendert den folgenden HTML-Code:

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

@model und @inherits können in derselben Ansicht verwendet werden. @inherits kann sich in einer _ViewImports.cshtml Datei befinden, die die Ansicht importiert:

@inherits CustomRazorPage<TModel>

Der folgende Code ist ein Beispiel für eine stark typisierte Ansicht:

@inherits CustomRazorPage<TModel>

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

Wird „rick@contoso.com“ im Modell übergeben, generiert die Ansicht das folgende 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

Mit der @inject Direktive kann die Razor Seite einen Dienst aus dem Dienstcontainer in eine Ansicht einfügen. Weitere Informationen finden Sie unter Dependency Injection in Ansichten.

@layout

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Die @layout Direktive gibt ein Layout für routingfähige Razor Komponenten mit einer @page Direktive an. Layoutkomponenten werden verwendet, um Codeduplizierung und Inkonsistenzen zu vermeiden. Weitere Informationen finden Sie unter ASP.NET Core Blazor Layouts.

@model

Dieses Szenario gilt nur für MVC-Ansichten und Razor -Seiten (.cshtml).

Die @model-Anweisung gibt den Typ des Modells an, das an eine Ansicht oder Seite übergeben wird:

@model TypeNameOfModel

Enthält in einer ASP.NET Core MVC- oder Razor Pages-App, die mit einzelnen Benutzerkonten erstellt wurde, Views/Account/Login.cshtml die folgende Modelldeklaration:

@model LoginViewModel

Die generierte Klasse erbt von RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor macht eine Model Eigenschaft für den Zugriff auf das an die Ansicht übergebene Modell verfügbar:

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

Die @model-Anweisung gibt den Typ der Model-Eigenschaft an. Die Anweisung legt das T in RazorPage<T> der generierten Klasse fest, von der die Ansicht abgeleitet wird. Wird die @model-Anweisung nicht angegeben, hat die Model-Eigenschaft den Typ dynamic. Weitere Informationen finden Sie unter Strongly typed models and the @model keyword.

@namespace

Die @namespace-Anweisung:

  • Legt den Namespace der Klasse der generierten Razor Seite, der MVC-Ansicht oder Razor der Komponente fest.
  • Legt die stamm abgeleiteten Namespaces einer Seiten, Ansichten oder Komponentenklassen aus der nächstgelegenen Importdatei in der Verzeichnisstruktur, _ViewImports.cshtml (Ansichten oder Seiten) oder _Imports.razor (Razor Komponenten) fest.
@namespace Your.Namespace.Here

Beispiel " Razor Pages" in der folgenden Tabelle:

  • Jede Seite importiert Pages/_ViewImports.cshtml.
  • Pages/_ViewImports.cshtml enthält @namespace Hello.World.
  • Jede Seite weist Hello.World als Stamm ihres Namespace auf.
Seite Namespace
Pages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtml Hello.World.MorePages.EvenMorePages

Die vorherigen Beziehungen gelten für den Import von Dateien, die mit MVC-Ansichten und Razor -Komponenten verwendet werden.

Wenn mehrere Importdateien über eine @namespace-Anweisung verfügen, wird die Datei verwendet, die der Seite, der Ansicht oder der Komponente in der Verzeichnisstruktur am nächsten ist, um den Stammnamespace festzulegen.

Wenn der EvenMorePages Ordner im vorherigen Beispiel über eine Importdatei mit @namespace Another.Planet (oder die Pages/MorePages/EvenMorePages/Page.cshtml Datei enthält) verfügt @namespace Another.Planet, wird das Ergebnis in der folgenden Tabelle angezeigt.

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

@page

Die @page-Anweisung hat abhängig vom Typ der Datei, in der Sie verwendet wird, unterschiedliche Auswirkungen. Für die Anweisung gilt:

@preservewhitespace

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Bei Festlegung auf false (Standard) wird Leerzeichen im gerenderten Markup aus Razor Komponenten (.razor) entfernt, wenn:

  • Sie stehen in einem Element am Anfang oder am Ende.
  • Sie stehen in einem RenderFragment-Parameter am Anfang oder am Ende. Ein Beispiel hierfür ist untergeordneter Inhalt, der an eine andere Komponente übergeben wird
  • Sie stehen am Anfang oder Ende eines C#-Codeblocks wie @if oder @foreach.

@section

Dieses Szenario gilt nur für MVC-Ansichten und Razor -Seiten (.cshtml).

Die @section Direktive wird in Verbindung mit MVC- und Razor Seitenlayouts verwendet, um Ansichten oder Seiten das Rendern von Inhalten in verschiedenen Teilen der HTML-Seite zu ermöglichen. Weitere Informationen finden Sie unter Layout in ASP.NET Core.

@using

Die @using-Anweisung fügt die C#-Anweisung usingder generierten Ansicht hinzu:

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

In Razor Komponenten steuert auch, @using welche Komponenten im Bereich sind.

Direktivenattribute

Razor Direktivenattribute werden durch implizite Ausdrücke mit reservierten Schlüsselwörtern nach dem @ Symbol dargestellt. Ein Direktivenatribut ändert in der Regel die Art und Weise, wie ein Element analysiert wird oder unterschiedliche Funktionen ermöglicht.

@attributes

Dieses Szenario gilt nur für Razor Komponenten (.razor).

@attributes ermöglicht es einer Komponente, nicht deklarierte Attribute zu rendern. Weitere Informationen finden Sie unter Razor-Komponenten in ASP.NET Core.

@bind

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Die Datenbindung in-Komponenten wird mit dem @bind-Attribut erreicht. Weitere Informationen finden Sie unter ASP.NET Core Blazor Datenbindung.

@bind:culture

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Verwenden Sie das @bind:culture Attribut mit dem @bind Attribut, um einen System.Globalization.CultureInfo Wert zum Analysieren und Formatieren eines Werts bereitzustellen. Weitere Informationen finden Sie unter Blazor in ASP.NET Core: Globalisierung und Lokalisierung.

@on{EVENT}

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Razor bietet Ereignisbehandlungsfeatures für Komponenten. Weitere Informationen finden Sie unter Ereignisbehandlung in Blazor in ASP.NET Core.

@on{EVENT}:preventDefault

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Verhindert die Standardaktion für das Ereignis.

@on{EVENT}:stopPropagation

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Beendet die Ereignisweitergabe für das Ereignis.

@key

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Das Direktivenattribut @key bewirkt, dass der Komponentenvergleichsalgorithmus die Erhaltung von Elementen oder Komponenten basierend auf dem Wert des Schlüssels garantiert. Weitere Informationen finden Sie unter Razor-Komponenten in ASP.NET Core.

@ref

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Komponentenverweise (@ref) bieten eine Möglichkeit, auf eine Komponenteninstanz zu verweisen, damit Sie Befehle für diese Instanz ausgeben können. Weitere Informationen finden Sie unter Razor-Komponenten in ASP.NET Core.

@typeparam

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Die @typeparam-Direktive deklariert einen generischen Typparameter für die generierte Komponentenklasse:

@typeparam TEntity

Folgende generische Typen mit den Typeinschränkungen where werden unterstützt:

@typeparam TEntity where TEntity : IEntity

Weitere Informationen finden Sie in den folgenden Artikeln:

@typeparam

Dieses Szenario gilt nur für Razor Komponenten (.razor).

Die @typeparam-Direktive deklariert einen generischen Typparameter für die generierte Komponentenklasse:

@typeparam TEntity

Weitere Informationen finden Sie in den folgenden Artikeln:

Vorlagendelegierten Stellvertretungen Razor

Razor Vorlagen ermöglichen es Ihnen, einen UI-Codeausschnitt mit dem folgenden Format zu definieren:

@<tag>...</tag>

Im folgenden Beispiel wird veranschaulicht, wie Sie eine vorlagenbasierte Razor Stellvertretung als Func<T,TResult>Stellvertretung angeben. Der Typ dynamic wird für den Parameter der Methode angegeben, die der Delegat einkapselt. Ein object-Typ wird als Rückgabewert des Delegats angegeben. Die Vorlage wird mit List<T> von Pet mit einer Name-Eigenschaft verwendet.

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

Die Vorlage wird mit pets in einer foreach-Anweisung gerendert:

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

Gerenderte Ausgabe:

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

Sie können auch eine Inlinevorlage Razor als Argument für eine Methode angeben. Im folgenden Beispiel erhält die Repeat Methode eine Razor Vorlage. Die Methode verwendet die Vorlage dann zum Erstellen von HTML-Inhalten mit Wiederholungen von Elementen aus einer 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;
    }
}

Wird die Liste mit Haustieren aus dem vorherigen Beispiel verwendet, wird die Repeat-Methode wie folgt aufgerufen:

  • List<T> von Pet
  • Anzahl der Wiederholungen für jedes Haustier
  • Inlinevorlage zur Verwendung für die Elemente einer unsortierten Liste
<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

Gerenderte Ausgabe:

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

Taghilfsprogramme

Dieses Szenario gilt nur für MVC-Ansichten und Razor -Seiten (.cshtml).

Die folgenden drei Anweisungen gehören zu den Taghilfsprogrammen.

Anweisung Funktion
@addTagHelper Macht Taghilfsprogramme für eine Ansicht verfügbar.
@removeTagHelper Entfernt zuvor hinzugefügte Taghilfsprogramme aus einer Ansicht.
@tagHelperPrefix Gibt ein Tagpräfix an, um Unterstützung für Taghilfsprogramme zu aktivieren und ihre Verwendung explizit zu machen.

Razor reservierte Schlüsselwörter

Razor Schlüsselwörter

  • page
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper(Derzeit nicht von ASP.NET Core unterstützt)

Razor Schlüsselwörter werden mit @(Razor Keyword) (z. B @(functions). ) escapet.

C# Razor -Schlüsselwörter

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

C# Razor -Schlüsselwörter müssen mit @(@C# Razor Keyword) (z. B @(@case). ) doppelt escapet werden. Der erste @ Entweicht den Razor Parser. Das zweite @ dient als Escapezeichen für den C#-Parser.

Reservierte Schlüsselwörter, die nicht von Razor

  • class

Überprüfen der Razor für eine Ansicht generierten C#-Klasse

Das Razor SDK behandelt die Kompilierung von Razor Dateien. Beim Erstellen eines Projekts generiert das Razor SDK ein obj/<build_configuration>/<target_framework_moniker>/Razor Verzeichnis im Projektstamm. Die Verzeichnisstruktur innerhalb des Razor Verzeichnisses spiegelt die Verzeichnisstruktur des Projekts.

Betrachten Sie die folgende Verzeichnisstruktur in einem ASP.NET Core Razor Pages-Projekt:

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

Das Erstellen des Projekts in der Debugkonfiguration führt zu dem folgenden obj Verzeichnis:

 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

Zum Anzeigen der generierten Klasse für Pages/Index.cshtml, öffnen obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.csSie .

Ansicht der Suchvorgänge und Groß-/Kleinschreibung

Das Razor Ansichtsmodul führt Nachschlagevorgänge bei Groß-/Kleinschreibung für Ansichten aus. Der tatsächliche Suchvorgang wird jedoch vom zugrunde liegenden Dateisystem bestimmt:

  • Dateibasierte Quelle:
    • Bei Betriebssystemen, die Dateisysteme ohne Berücksichtigung von Groß-/Kleinschreibung verwenden (z.B. Windows), wird bei Suchvorgängen nach physischen Dateianbietern die Groß- und Kleinschreibung nicht berücksichtigt. Führt beispielsweise return View("Test") zu Übereinstimmungen für /Views/Home/Test.cshtml, /Views/home/test.cshtmlund alle anderen Groß- und Kleinschreibungsvarianten.
    • Bei Dateisystemen, die die Groß-/Kleinschreibung berücksichtigen (z.B. Linux, OSX sowie mit EmbeddedFileProvider), wird die Groß-/Kleinschreibung auch bei Suchvorgängen berücksichtigt. Beispiel: return View("Test") Übereinstimmungen /Views/Home/Test.cshtml.
  • Vorkompilierte Ansichten: Ab ASP.NET Core 2.0 wird bei der Suche nach vorkompilierten Ansichten unter allen Betriebssystemen die Groß-/Kleinschreibung nicht berücksichtigt. Das Verhalten ist mit dem des physischen Dateianbieters unter Windows identisch. Unterscheiden sich zwei vorkompilierte Ansichten nur in der Groß-/Kleinschreibung, ist das Ergebnis der Suche nicht deterministisch.

Entwicklern wird empfohlen, sich bei der Groß-/Kleinschreibung von Datei- und Verzeichnisnamen an der Schreibweise folgender Begriffe zu orientieren:

  • Bereichs-, Controller- und Aktionsnamen
  • Razor Seiten.

Durch Überprüfung der Groß-/Kleinschreibung wird sichergestellt, dass die entsprechenden Ansichten für die Bereitstellungen unabhängig von dem zugrunde liegenden Dateisystem gefunden werden.

Importe, die von Razor

Die folgenden Importe werden von den ASP.NET Core Webvorlagen generiert, um Dateien zu unterstützenRazor:

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;

Zusätzliche Ressourcen

Einführung in ASP.NET Webprogrammierung mithilfe der Razor Syntax bietet viele Beispiele für die Programmierung mit Razor Syntax.