Razor Syntax Verweis für ASP.net CoreRazor syntax reference for ASP.NET Core

Von Rick Anderson, Taylor Mullenund Dan vicarelBy Rick Anderson, Taylor Mullen, and Dan Vicarel

Razor ist eine Markup Syntax zum Einbetten von Server basiertem Code in Webseiten.Razor is a markup syntax for embedding server-based code into webpages. Die Razor Syntax besteht aus Razor Markup, c# und HTML.The Razor syntax consists of Razor markup, C#, and HTML. Dateien mit Razor der Dateierweiterung " . cshtml ".Files containing Razor generally have a .cshtml file extension. Razorwird auch in Razor Komponenten Dateien (Razor-Dateien) gefunden.Razor is also found in Razor components files (.razor).

Rendern von HTMLRendering HTML

Die Standard Razor Sprache ist HTML.The default Razor language is HTML. Das Rendern von HTML aus Razor Markup unterscheidet sich nicht vom Rendern von HTML aus einer HTML-Datei.Rendering HTML from Razor markup is no different than rendering HTML from an HTML file. Das HTML-Markup in . cshtml - Razor Dateien wird vom Server unverändert gerendert.HTML markup in .cshtml Razor files is rendered by the server unchanged.

Syntax von RazorRazor syntax

Razor unterstützt c# und verwendet das @ Symbol für den Übergang von HTML zu c#.Razor supports C# and uses the @ symbol to transition from HTML to C#. Razor wertet c#-Ausdrücke aus und rendert Sie in der HTML-Ausgabe.Razor evaluates C# expressions and renders them in the HTML output.

Wenn auf ein @ Symbol ein Razor reserviertes Schlüsselwortfolgt, wechselt es in Razor -spezifisches Markup.When an @ symbol is followed by a Razor reserved keyword, it transitions into Razor-specific markup. Andernfalls erfolgt der Übergang in normales C#.Otherwise, it transitions into plain C#.

@ Razor Verwenden Sie ein zweites Symbol, um ein Symbol im Markup zu versehen @ :To escape an @ symbol in Razor markup, use a second @ symbol:

<p>@@Username</p>

Der Code wird in HTML mit einem einzelnen @-Symbol gerendert:The code is rendered in HTML with a single @ symbol:

<p>@Username</p>

Bei HTML-Attributen und Inhalt mit E-Mail-Adressen wird das @-Symbol nicht als ein Übergangszeichen behandelt.HTML attributes and content containing email addresses don't treat the @ symbol as a transition character. Die e-Mail-Adressen im folgenden Beispiel werden bei der folgenden Verarbeitung nicht untersucht Razor :The email addresses in the following example are untouched by Razor parsing:

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

Implizite Razor AusdrückeImplicit Razor expressions

Implizite Razor Ausdrücke beginnen mit, @ gefolgt von c#-Code:Implicit Razor expressions start with @ followed by 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.With the exception of the C# await keyword, implicit expressions must not contain spaces. Wird die C#-Anweisung eindeutig beendet, können auch Leerzeichen verwendet werden:If the C# statement has a clear ending, spaces can be intermingled:

<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.Implicit expressions cannot contain C# generics, as the characters inside the brackets (<>) are interpreted as an HTML tag. Der folgende Code ist ungültig:The following code is not valid:

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

Der vorhergehende Code erzeugt einen Compilerfehler, der folgendermaßen aussehen kann:The preceding code generates a compiler error similar to one of the following:

  • Das Element „int“ wurde nicht geschlossen.The "int" element wasn't closed. Alle Elemente müssen entweder selbstschließend sein oder ein zugehöriges Endtag besitzen.All elements must be either self-closing or have a matching end tag.
  • Die Methodengruppe „GenericMethod“ kann nicht in den Nichtdelegattyp „Objekt“ konvertiert werden.Cannot convert method group 'GenericMethod' to non-delegate type 'object'. Wollten Sie die Methode aufrufen?Did you intend to invoke the method?`

Generische Methodenaufrufe müssen in einen expliziten Razor Ausdruck oder einen Razor Codeblockumschließt werden.Generic method calls must be wrapped in an explicit Razor expression or a Razor code block.

Explizite Razor AusdrückeExplicit Razor expressions

Explizite Razor Ausdrücke bestehen aus einem @ Symbol mit einer ausgeglichenen Klammer.Explicit Razor expressions consist of an @ symbol with balanced parenthesis. Zum Rendering der letzten Woche wird das folgende Razor Markup verwendet:To render last week's time, the following Razor markup is used:

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

Jeglicher Inhalt innerhalb der @()-Klammer wird ausgewertet und in der Ausgabe gerendert.Any content within the @() parenthesis is evaluated and rendered to the output.

Die im vorherigen Abschnitt beschriebenen impliziten Ausdrücke dürfen grundsätzlich keine Leerzeichen enthalten.Implicit expressions, described in the previous section, generally can't contain spaces. Im folgenden Code wird eine Woche nicht von der aktuellen Uhrzeit abgezogen:In the following code, one week isn't subtracted from the current time:

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

Der Code rendert den folgenden HTML-Code:The code renders the following HTML:

<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:Explicit expressions can be used to concatenate text with an expression result:

@{
    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.Without the explicit expression, <p>Age@joe.Age</p> is treated as an email address, and <p>Age@joe.Age</p> is rendered. <p>Age33</p> wird gerendert, wenn es als expliziter Ausdruck geschrieben wird.When written as an explicit expression, <p>Age33</p> is rendered.

Explizite Ausdrücke können zum Rendern der Ausgabe von generischen Methoden in .cshtml-Dateien verwendet werden.Explicit expressions can be used to render output from generic methods in .cshtml files. Das folgende Markup zeigt, wie der weiter oben gezeigte Fehler behoben wird, der durch die Klammern einer generischen C#-Funktion verursacht wurde.The following markup shows how to correct the error shown earlier caused by the brackets of a C# generic. Der Code wird als expliziter Ausdruck geschrieben:The code is written as an explicit expression:

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

Codieren von AusdrückenExpression encoding

C#-Ausdrücke, die als Zeichenfolge ausgewertet werden, werden HTML-codiert.C# expressions that evaluate to a string are HTML encoded. C#-Ausdrücke, die als IHtmlContent ausgewertet werden, werden direkt durch IHtmlContent.WriteTo gerendert.C# expressions that evaluate to IHtmlContent are rendered directly through IHtmlContent.WriteTo. C#-Ausdrücke, die nicht als IHtmlContent ausgewertet werden, werden durch ToString in eine Zeichenfolge konvertiert und vor dem Rendern codiert.C# expressions that don't evaluate to IHtmlContent are converted to a string by ToString and encoded before they're rendered.

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

Der vorangehende Code rendert den folgenden HTML-Code:The preceding code renders the following HTML:

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

Der HTML-Code wird im Browser als nur-Text angezeigt:The HTML is shown in the browser as plain text:

<Span > Hallo Welt < /span><span>Hello World</span>

Die Ausgabe HtmlHelper.Raw wird nicht codiert, sondern als HTML-Markup gerendert.HtmlHelper.Raw output isn't encoded but rendered as HTML markup.

Warnung

Die Verwendung von HtmlHelper.Raw bei einer nicht bereinigten Benutzereingabe stellt ein Sicherheitsrisiko dar.Using HtmlHelper.Raw on unsanitized user input is a security risk. Benutzereingaben können schädlichen JavaScript-Code oder andere Sicherheitsrisiken enthalten.User input might contain malicious JavaScript or other exploits. Das Bereinigen von Benutzereingaben ist schwierig.Sanitizing user input is difficult. Vermeiden Sie daher die Verwendung von HtmlHelper.Raw bei Benutzereingaben.Avoid using HtmlHelper.Raw with user input.

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

Der Code rendert den folgenden HTML-Code:The code renders the following HTML:

<span>Hello World</span>

Razor Code BlöckeRazor code blocks

Razor Code Blöcke beginnen mit @ und werden von eingeschlossen {} .Razor code blocks start with @ and are enclosed by {}. Im Gegensatz zu Ausdrücken wird C#-Code in Codeblöcken nicht gerendert.Unlike expressions, C# code inside code blocks isn't rendered. Codeblöcke und Ausdrücke in einer Ansicht nutzen den gleichen Bereich und werden der Reihe nach definiert:Code blocks and expressions in a view share the same scope and are defined in order:

@{
    var quote = "The future depends on what you do today. - Mahatma Gandhi";
}

<p>@quote</p>

@{
    quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.";
}

<p>@quote</p>

Der Code rendert den folgenden HTML-Code:The code renders the following HTML:

<p>The future depends on what you do today. - Mahatma Gandhi</p>
<p>Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.</p>

Deklarieren Sie in Codeblöcken lokale Funktionen mit Markup als Vorlagenmethoden:In code blocks, declare local functions with markup to serve as templating methods:

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

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

Der Code rendert den folgenden HTML-Code:The code renders the following HTML:

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

Implizite ÜbergängeImplicit transitions

Die Standardsprache in einem Codeblock ist c#, aber die Razor Seite kann zurück in HTML wechseln:The default language in a code block is C#, but the Razor Page can transition back to HTML:

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

Durch Trennzeichen getrennte explizite ÜbergängeExplicit delimited transition

Um einen unter Abschnitt eines Code Blocks zu definieren, der HTML rendern soll, müssen Sie die Zeichen für das Rendering mit dem-Tag umschließen Razor <text> :To define a subsection of a code block that should render HTML, surround the characters for rendering with the Razor <text> tag:

@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.Use this approach to render HTML that isn't surrounded by an HTML tag. Ohne HTML oder Razor Tag Razor tritt ein Laufzeitfehler auf.Without an HTML or Razor tag, a Razor runtime error occurs.

Das <text>-Tag ist nützlich, wenn Sie beim Rendern von Inhalt Leerzeichen steuern möchten:The <text> tag is useful to control whitespace when rendering content:

  • Nur der Inhalt zwischen den <text>-Tags wird gerendert.Only the content between the <text> tag is rendered.
  • In der HTML-Ausgabe werden keine Leerzeichen vor oder nach dem <text>-Tag angezeigt.No whitespace before or after the <text> tag appears in the HTML output.

Explizite ZeilenübergängeExplicit line transition

Verwenden Sie die @:-Syntax, um den Rest einer kompletten Zeile als HTML-Code in einem Codeblock zu rendern:To render the rest of an entire line as HTML inside a code block, use @: syntax:

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

Ohne @: im Code Razor wird ein Laufzeitfehler generiert.Without the @: in the code, a Razor runtime error is generated.

Zusätzliche @ Zeichen in einer Razor Datei können zu Compilerfehlern bei Anweisungen später im-Block führen.Extra @ characters in a Razor file can cause compiler errors at statements later in the block. Diese Compilerfehler können dann schwer nachvollziehbar sein, da der tatsächliche vor dem gemeldeten Fehler auftritt.These compiler errors can be difficult to understand because the actual error occurs before the reported error. Dieser Fehler tritt häufig auf, wenn mehrere implizite/explizite Ausdrücke in einem einzigen Codeblock kombiniert werden.This error is common after combining multiple implicit/explicit expressions into a single code block.

SteuerungsstrukturenControl structures

Steuerungsstrukturen sind eine Erweiterung von Codeblöcken.Control structures are an extension of code blocks. Alle Aspekte von Codeblöcken (Übergang zu Markup, Inline-C#) gelten auch für die folgenden Strukturen:All aspects of code blocks (transitioning to markup, inline C#) also apply to the following structures:

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

@if steuert, wann der Code ausgeführt wird:@if controls when code runs:

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

else und else if erfordern kein @-Symbol:else and else if don't require the @ symbol:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
else if (value >= 1337)
{
    <p>The value is large.</p>
}
else
{
    <p>The value is odd and small.</p>
}

Im folgenden Markup wird die Verwendung einer switch-Anweisung veranschaulicht:The following markup shows how to use a switch statement:

@switch (value)
{
    case 1:
        <p>The value is 1!</p>
        break;
    case 1337:
        <p>Your number is 1337!</p>
        break;
    default:
        <p>Your number wasn't 1 or 1337.</p>
        break;
}

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

Auf Vorlagen basierender HTML-Code kann mit Anweisungen zur Steuerung von Schleifen gerendert werden.Templated HTML can be rendered with looping control statements. So rendern Sie eine Liste mit Personen.To render a list of people:

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

Die folgenden Schleifenanweisungen werden unterstützt:The following looping statements are supported:

@for

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

@foreach

@foreach (var person in people)
{
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@while

@{ var i = 0; }
@while (i < people.Length)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
}

@do while

@{ var i = 0; }
@do
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
} while (i < people.Length);

Zusammengesetztes @usingCompound @using

In C# kann mit einer using-Anweisung sichergestellt werden, dass ein Objekt freigegeben wurde.In C#, a using statement is used to ensure an object is disposed. In Razor wird derselbe Mechanismus zum Erstellen von HTML-Hilfsprogrammen verwendet, die zusätzlichen Inhalt enthalten.In Razor, the same mechanism is used to create HTML Helpers that contain additional content. Im folgenden Code wird ein <form>-Tag mit der @using-Anweisung durch HTML-Hilfsprogramme gerendert:In the following code, HTML Helpers render a <form> tag with the @using statement:

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

@try, catch, finally

Die Behandlung von Ausnahmen ist vergleichbar mit C#:Exception handling is similar to C#:

@try
{
    throw new InvalidOperationException("You did something invalid.");
}
catch (Exception ex)
{
    <p>The exception message: @ex.Message</p>
}
finally
{
    <p>The finally statement.</p>
}

@lock

Razor bietet die Möglichkeit, kritische Abschnitte mit Lock-Anweisungen zu schützen:Razor has the capability to protect critical sections with lock statements:

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

KommentareComments

Razor unterstützt c#-und HTML-Kommentare:Razor supports C# and HTML comments:

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

Der Code rendert den folgenden HTML-Code:The code renders the following HTML:

<!-- HTML comment -->

Razor Kommentare werden vom Server entfernt, bevor die Webseite gerendert wird.Razor comments are removed by the server before the webpage is rendered. Razor verwendet @* *@ , um Kommentare zu begrenzen.Razor uses @* *@ to delimit comments. Der folgende Code ist auskommentiert, damit vom Server kein Markup gerendert wird:The following code is commented out, so the server doesn't render any markup:

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

AnweisungenDirectives

Razor -Anweisungen werden durch implizite Ausdrücke mit reservierten Schlüsselwörtern nach dem- @ Symbol dargestellt.Razor directives are represented by implicit expressions with reserved keywords following the @ symbol. Eine Anweisung ändert in der Regel die Analyse einer Ansicht oder aktiviert unterschiedliche Funktionen.A directive typically changes the way a view is parsed or enables different functionality.

RazorWenn Sie verstehen, wie Code für eine Sicht generiert, ist es einfacher, die Funktionsweise von Anweisungen zu verstehen.Understanding how Razor generates code for a view makes it easier to understand how directives work.

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

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

Durch den Code wird eine Klasse ähnlich der folgenden generiert:The code generates a class similar to the following:

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

Weiter unten in diesem Artikel wird der Abschnitt unter Suchen der Razor c#-Klasse, die für eine Sicht generiert wurde erläutert, wie diese generierte Klasse angezeigt wird.Later in this article, the section Inspect the Razor C# class generated for a view explains how to view this generated class.

@attribute

Die @attribute-Anweisung fügt das angegebene Attribut zu der Klasse der generierten Seite oder Ansicht hinzu.The @attribute directive adds the given attribute to the class of the generated page or view. Im folgenden Beispiel wird das [Authorize]-Attribut hinzugefügt:The following example adds the [Authorize] attribute:

@attribute [Authorize]

@code

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Der- @code Block ermöglicht einer Razor Komponente das Hinzufügen von c#-Membern (Feldern, Eigenschaften und Methoden) zu einer Komponente:The @code block enables a Razor component to add C# members (fields, properties, and methods) to a component:

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

Für Razor -Komponenten @code ist ein Alias von @functions und wird für empfohlen @functions .For Razor components, @code is an alias of @functions and recommended over @functions. Mehrere @code-Blöcke sind zulässig.More than one @code block is permissible.

@functions

Die @functions-Anweisung ermöglicht das Hinzufügen von C#-Membern (Feldern, Eigenschaften und Methoden) zur generierten Klasse:The @functions directive enables adding C# members (fields, properties, and methods) to the generated class:

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

Verwenden Sie in- Razor Komponenten, @code @functions um c#-Member hinzuzufügen.In Razor components, use @code over @functions to add C# members.

Beispiel:For example:

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

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

Der Code generiert das folgende HTML-Markup:The code generates the following HTML markup:

<div>From method: Hello</div>

Der folgende Code ist die generierte Razor c#-Klasse:The following code is the generated Razor C# class:

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

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

@functions-Methoden dienen als Vorlagenmethoden, wenn sie Markup aufweisen:@functions methods serve as templating methods when they have markup:

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

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

Der Code rendert den folgenden HTML-Code:The code renders the following HTML:

<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.The @implements directive implements an interface for the generated class.

Im folgenden Beispiel wird System.IDisposable implementiert, sodass die Dispose-Methode aufgerufen werden kann:The following example implements System.IDisposable so that the Dispose method can be called:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

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

@inherits

Die @inherits-Anweisung bietet uneingeschränkten Zugriff auf die Klasse, die die Ansicht erbt:The @inherits directive provides full control of the class the view inherits:

@inherits TypeNameOfClassToInheritFrom

Der folgende Code ist ein benutzerdefinierter Razor Seitentyp:The following code is a custom Razor page type:

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:The CustomText is displayed in a view:

@inherits CustomRazorPage<TModel>

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

Der Code rendert den folgenden HTML-Code:The code renders the following HTML:

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

@model und @inherits können in derselben Ansicht verwendet werden.@model and @inherits can be used in the same view. @inherits kann in einer _ViewImports.cshtml-Datei verwendet werden, die von der Ansicht importiert wird:@inherits can be in a _ViewImports.cshtml file that the view imports:

@inherits CustomRazorPage<TModel>

Der folgende Code ist ein Beispiel für eine stark typisierte Ansicht:The following code is an example of a strongly-typed view:

@inherits CustomRazorPage<TModel>

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

Wird „rick@contoso.com“ im Modell übergeben, generiert die Ansicht das folgende HTML-Markup:If "rick@contoso.com" is passed in the model, the view generates the following HTML markup:

<div>The Login Email: rick@contoso.com</div>
<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

@inject

Die- @inject Direktive ermöglicht der Razor Seite, einen Dienst aus dem Dienst Container in eine Ansicht einzufügen.The @inject directive enables the Razor Page to inject a service from the service container into a view. Weitere Informationen finden Sie unter Dependency Injection in Ansichten.For more information, see Dependency injection into views.

@layout

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Die- @layout Anweisung gibt ein Layout für Routing fähige Razor Komponenten an, die über eine- @page Direktive verfügen.The @layout directive specifies a layout for routable Razor components that have an @page directive. Layoutkomponenten werden verwendet, um Codeduplizierung und Inkonsistenzen zu vermeiden.Layout components are used to avoid code duplication and inconsistency. Weitere Informationen finden Sie unter Blazor-Layouts in ASP.NET Core.For more information, see Blazor-Layouts in ASP.NET Core.

@model

Dieses Szenario gilt nur für MVC-Ansichten und- Razor Seiten (. cshtml).This scenario only applies to MVC views and Razor Pages (.cshtml).

Die @model-Anweisung gibt den Typ des Modells an, das an eine Ansicht oder Seite übergeben wird:The @model directive specifies the type of the model passed to a view or page:

@model TypeNameOfModel

In einer ASP.net Core MVC Razor -oder Pages-APP, die mit einzelnen Benutzerkonten erstellt wurde, enthält views/Account/Login. cshtml die folgende Modell Deklaration:In an ASP.NET Core MVC or Razor Pages app created with individual user accounts, Views/Account/Login.cshtml contains the following model declaration:

@model LoginViewModel

Die generierte Klasse erbt von RazorPage<dynamic>:The class generated inherits from RazorPage<dynamic>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor macht eine Model Eigenschaft für den Zugriff auf das an die Ansicht über gegebene Modell verfügbar:Razor exposes a Model property for accessing the model passed to the view:

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

Die @model-Anweisung gibt den Typ der Model-Eigenschaft an.The @model directive specifies the type of the Model property. Die Anweisung legt das T in RazorPage<T> der generierten Klasse fest, von der die Ansicht abgeleitet wird.The directive specifies the T in RazorPage<T> that the generated class that the view derives from. Wird die @model-Anweisung nicht angegeben, hat die Model-Eigenschaft den Typ dynamic.If the @model directive isn't specified, the Model property is of type dynamic. Weitere Informationen finden Sie unter stark typisierte Modelle und das @model Schlüsselwort.For more information, see Strongly typed models and the @model keyword.

@namespace

Die @namespace-Anweisung:The @namespace directive:

  • Legt den Namespace der Klasse der generierten Razor Seite, MVC-Ansicht oder Komponente fest Razor .Sets the namespace of the class of the generated Razor page, MVC view, or Razor component.
  • Legt die von der nächstgelegenen Import Datei in der Verzeichnisstruktur _ViewImports. cshtml (Views oder Pages) oder _Imports. Razor ( Razor Components) Stamm abgeleiteten Namespaces der Seiten, Sichten oder Komponenten Klassen fest.Sets the root derived namespaces of a pages, views, or components classes from the closest imports file in the directory tree, _ViewImports.cshtml (views or pages) or _Imports.razor (Razor components).
@namespace Your.Namespace.Here

Für das Razor Beispiel "Pages" in der folgenden Tabelle:For the Razor Pages example shown in the following table:

  • Jede Seite importiert Pages/_ViewImports.cshtml.Each page imports Pages/_ViewImports.cshtml.
  • Pages/_ViewImports.cshtml enthält @namespace Hello.World.Pages/_ViewImports.cshtml contains @namespace Hello.World.
  • Jede Seite weist Hello.World als Stamm ihres Namespace auf.Each page has Hello.World as the root of it's namespace.
erweitert?“Page NamespaceNamespace
Pages/index. cshtmlPages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtmlPages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtmlPages/MorePages/EvenMorePages/Page.cshtml Hello.World.MorePages.EvenMorePages

Die vorstehenden Beziehungen gelten für Import Dateien, die mit MVC-Ansichten und-Komponenten verwendet werden Razor .The preceding relationships apply to import files used with MVC views and Razor components.

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.When multiple import files have a @namespace directive, the file closest to the page, view, or component in the directory tree is used to set the root namespace.

Wenn der Ordner EvenMorePages im Beispiel oben eine Importdatei mit @namespace Another.Planet enthält (oder die Datei Pages/MorePages/EvenMorePages/Page.cshtml@namespace Another.Planet enthält), finden Sie das Ergebnis in der folgenden Tabelle.If the EvenMorePages folder in the preceding example has an imports file with @namespace Another.Planet (or the Pages/MorePages/EvenMorePages/Page.cshtml file contains @namespace Another.Planet), the result is shown in the following table.

erweitert?“Page NamespaceNamespace
Pages/index. cshtmlPages/Index.cshtml Hello.World
Pages/MorePages/Page.cshtmlPages/MorePages/Page.cshtml Hello.World.MorePages
Pages/MorePages/EvenMorePages/Page.cshtmlPages/MorePages/EvenMorePages/Page.cshtml Another.Planet

@page

Die @page-Anweisung hat abhängig vom Typ der Datei, in der Sie verwendet wird, unterschiedliche Auswirkungen.The @page directive has different effects depending on the type of the file where it appears. Für die Anweisung gilt:The directive:

Die- @page Direktive in der ersten Zeile einer cshtml -Datei gibt an, dass die Datei eine Razor Seite ist.The @page directive on the first line of a .cshtml file indicates that the file is a Razor Page. Weitere Informationen finden Sie unter Einführung in Razor Pages in ASP.NET Core.For more information, see Einführung in Razor Pages in ASP.NET Core.

@preservewhitespace

Dieses Szenario gilt nur für- Razor Komponenten ( .razor ).This scenario only applies to Razor components (.razor).

Wenn die Einstellung auf false (Standard) festgelegt ist, werden Leerzeichen im gerenderten Markup aus Razor Komponenten ( .razor ) entfernt, wenn Folgendes gilt:When set to false (default), whitespace in the rendered markup from Razor components (.razor) is removed if:

  • Sie stehen in einem Element am Anfang oder am Ende.Leading or trailing within an element.
  • Sie stehen in einem RenderFragment-Parameter am Anfang oder am Ende.Leading or trailing within a RenderFragment parameter. Ein Beispiel hierfür ist untergeordneter Inhalt, der an eine andere Komponente übergeben wirdFor example, child content passed to another component.
  • Sie stehen am Anfang oder Ende eines C#-Codeblocks wie @if oder @foreach.It precedes or follows a C# code block, such as @if or @foreach.

@section

Dieses Szenario gilt nur für MVC-Ansichten und- Razor Seiten (. cshtml).This scenario only applies to MVC views and Razor Pages (.cshtml).

Die @section -Direktive wird zusammen mit MVC-und Razor Seitenlayouts verwendet, um Ansichten oder Seiten zum Rendering von Inhalten in verschiedenen Teilen der HTML-Seite zu aktivieren.The @section directive is used in conjunction with MVC and Razor Pages layouts to enable views or pages to render content in different parts of the HTML page. Weitere Informationen finden Sie unter Layout in ASP.NET Core.For more information, see Layout in ASP.NET Core.

@using

Die @using-Anweisung fügt die C#-Anweisung usingder generierten Ansicht hinzu:The @using directive adds the C# using directive to the generated view:

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

In- Razor Komponenten @using steuert auch, welche Komponenten sich im Gültigkeitsbereich befinden.In Razor components, @using also controls which components are in scope.

DirektivenattributeDirective attributes

Razor Direktivenattribute werden durch implizite Ausdrücke mit reservierten Schlüsselwörtern nach dem- @ Symbol dargestellt.Razor directive attributes are represented by implicit expressions with reserved keywords following the @ symbol. Ein direktivenattribut ändert in der Regel die Art und Weise, in der ein Element analysiert wird, oder unterstütztA directive attribute typically changes the way an element is parsed or enables different functionality.

@attributes

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

@attributes ermöglicht es einer Komponente, nicht deklarierte Attribute zu rendern.@attributes allows a component to render non-declared attributes. Weitere Informationen finden Sie unter Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.For more information, see Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.

@bind

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Die Datenbindung in-Komponenten wird mit dem @bind-Attribut erreicht.Data binding in components is accomplished with the @bind attribute. Weitere Informationen finden Sie unter ASP.NET Core Blazor-Datenbindung.For more information, see ASP.NET Core Blazor-Datenbindung.

@on{EVENT}

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Razor stellt Funktionen für die Ereignis Behandlung für-Komponenten bereit.Razor provides event handling features for components. Weitere Informationen finden Sie unter ASP.NET Core Blazor-Ereignisbehandlung.For more information, see ASP.NET Core Blazor-Ereignisbehandlung.

@on{EVENT}:preventDefault

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Verhindert die Standardaktion für das Ereignis.Prevents the default action for the event.

@on{EVENT}:stopPropagation

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Beendet die Ereignisweitergabe für das Ereignis.Stops event propagation for the event.

@key

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Das Direktivenattribut @key bewirkt, dass der Komponentenvergleichsalgorithmus die Erhaltung von Elementen oder Komponenten basierend auf dem Wert des Schlüssels garantiert.The @key directive attribute causes the components diffing algorithm to guarantee preservation of elements or components based on the key's value. Weitere Informationen finden Sie unter Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.For more information, see Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.

@ref

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Komponentenverweise (@ref) bieten eine Möglichkeit, auf eine Komponenteninstanz zu verweisen, damit Sie Befehle für diese Instanz ausgeben können.Component references (@ref) provide a way to reference a component instance so that you can issue commands to that instance. Weitere Informationen finden Sie unter Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.For more information, see Erstellen und Verwenden von ASP.NET Core-Razor-Komponenten.

@typeparam

Dieses Szenario gilt nur für Razor Komponenten (Razor).This scenario only applies to Razor components (.razor).

Die @typeparam-Anweisung deklariert einen generischen Typparameter für die generierte Komponentenklasse.The @typeparam directive declares a generic type parameter for the generated component class. Weitere Informationen finden Sie unter ASP.NET Core-Komponentenvorlagen in Blazor.For more information, see ASP.NET Core-Komponentenvorlagen in Blazor.

Auf Vorlagen basierende Delegaten RazorTemplated Razor delegates

Razor mithilfe von Vorlagen können Sie einen UI-Code Ausschnitt im folgenden Format definieren:Razor templates allow you to define a UI snippet with the following format:

@<tag>...</tag>

Im folgenden Beispiel wird veranschaulicht, wie Sie einen Vorlagen basierten Delegaten Razor als angeben Func<T,TResult> .The following example illustrates how to specify a templated Razor delegate as a Func<T,TResult>. Der Typ dynamic wird für den Parameter der Methode angegeben, die der Delegat einkapselt.The dynamic type is specified for the parameter of the method that the delegate encapsulates. Ein object-Typ wird als Rückgabewert des Delegats angegeben.An object type is specified as the return value of the delegate. Die Vorlage wird mit List<T> von Pet mit einer Name-Eigenschaft verwendet.The template is used with a List<T> of Pet that has a Name property.

public class Pet
{
    public string Name { get; set; }
}
@{
    Func<dynamic, object> petTemplate = @<p>You have a pet named <strong>@item.Name</strong>.</p>;

    var pets = new List<Pet>
    {
        new Pet { Name = "Rin Tin Tin" },
        new Pet { Name = "Mr. Bigglesworth" },
        new Pet { Name = "K-9" }
    };
}

Die Vorlage wird mit pets in einer foreach-Anweisung gerendert:The template is rendered with pets supplied by a foreach statement:

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

Gerenderte Ausgabe:Rendered output:

<p>You have a pet named <strong>Rin Tin Tin</strong>.</p>
<p>You have a pet named <strong>Mr. Bigglesworth</strong>.</p>
<p>You have a pet named <strong>K-9</strong>.</p>

Sie können auch eine Inline Razor Vorlage als Argument für eine Methode bereitstellen.You can also supply an inline Razor template as an argument to a method. Im folgenden Beispiel empfängt die- Repeat Methode eine Razor Vorlage.In the following example, the Repeat method receives a Razor template. Die Methode verwendet die Vorlage dann zum Erstellen von HTML-Inhalten mit Wiederholungen von Elementen aus einer Liste:The method uses the template to produce HTML content with repeats of items supplied from a list:

@using Microsoft.AspNetCore.Html

@functions {
    public static IHtmlContent Repeat(IEnumerable<dynamic> items, int times,
        Func<dynamic, IHtmlContent> template)
    {
        var html = new HtmlContentBuilder();

        foreach (var item in items)
        {
            for (var i = 0; i < times; i++)
            {
                html.AppendHtml(template(item));
            }
        }

        return html;
    }
}

Wird die Liste mit Haustieren aus dem vorherigen Beispiel verwendet, wird die Repeat-Methode wie folgt aufgerufen:Using the list of pets from the prior example, the Repeat method is called with:

  • List<T> von PetList<T> of Pet.
  • Anzahl der Wiederholungen für jedes HaustierNumber of times to repeat each pet.
  • Inlinevorlage zur Verwendung für die Elemente einer unsortierten ListeInline template to use for the list items of an unordered list.
<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

Gerenderte Ausgabe:Rendered output:

<ul>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>K-9</li>
    <li>K-9</li>
    <li>K-9</li>
</ul>

TaghilfsprogrammeTag Helpers

Dieses Szenario gilt nur für MVC-Ansichten und- Razor Seiten (. cshtml).This scenario only applies to MVC views and Razor Pages (.cshtml).

Die folgenden drei Anweisungen gehören zu den Taghilfsprogrammen.There are three directives that pertain to Tag Helpers.

AnweisungDirective FunktionFunction
@addTagHelper Macht Taghilfsprogramme für eine Ansicht verfügbar.Makes Tag Helpers available to a view.
@removeTagHelper Entfernt zuvor hinzugefügte Taghilfsprogramme aus einer Ansicht.Removes Tag Helpers previously added from a view.
@tagHelperPrefix Gibt ein Tagpräfix an, um Unterstützung für Taghilfsprogramme zu aktivieren und ihre Verwendung explizit zu machen.Specifies a tag prefix to enable Tag Helper support and to make Tag Helper usage explicit.

Razor reservierte SchlüsselwörterRazor reserved keywords

Razor KeywordsRazor keywords

  • page (Erfordert ASP.net Core 2,1 oder höher)page (Requires ASP.NET Core 2.1 or later)
  • namespace
  • functions
  • inherits
  • model
  • section
  • helper (Wird zurzeit nicht von ASP.net Core unterstützt)helper (Not currently supported by ASP.NET Core)

Razor Schlüsselwörter werden mit Escapezeichen versehen @(Razor Keyword) (z @(functions) . b.).Razor keywords are escaped with @(Razor Keyword) (for example, @(functions)).

C#- Razor SchlüsselwörterC# Razor keywords

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

C# Razor -Schlüsselwörter müssen mit einem doppelten Escapezeichen versehen werden @(@C# Razor Keyword) (z @(@case) . b.).C# Razor keywords must be double-escaped with @(@C# Razor Keyword) (for example, @(@case)). Der erste schützt @ den Razor Parser.The first @ escapes the Razor parser. Das zweite @ dient als Escapezeichen für den C#-Parser.The second @ escapes the C# parser.

Reservierte Schlüsselwörter werden von nicht verwendet RazorReserved keywords not used by Razor

  • class

Überprüfen der Razor für eine Sicht generierten c#-KlasseInspect the Razor C# class generated for a view

Bei .net Core SDK 2,1 oder höher übernimmt das Razor SDK die Kompilierung von Razor Dateien.With .NET Core SDK 2.1 or later, the Razor SDK handles compilation of Razor files. Beim Entwickeln eines Projekts generiert das Razor SDK eine obj/<build_configuration>/<target_framework_moniker>/ Razor Verzeichnis im Stammverzeichnis des Projekts.When building a project, the Razor SDK generates an obj/<build_configuration>/<target_framework_moniker>/Razor directory in the project root. Die Verzeichnisstruktur im Razor Verzeichnis spiegelt die Verzeichnisstruktur des Projekts wider.The directory structure within the Razor directory mirrors the project's directory structure.

Sehen Sie sich die folgende Verzeichnisstruktur in einem ASP.net Core 2,1 pages-Projekt an, das auf Razor .net Core 2,1 abzielt:Consider the following directory structure in an ASP.NET Core 2.1 Razor Pages project targeting .NET Core 2.1:

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

Wenn Sie das Projekt mit der Konfiguration zum Debuggen erstellen, wird folgendes obj-Verzeichnis erstellt:Building the project in Debug configuration yields the following obj directory:

 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

Öffnen Sie obj/Debug/netcoreapp 2.1/ Razor /pages/index.g.cshtml.cs, um die generierte Klasse für pages/index. cshtml anzuzeigen.To view the generated class for Pages/Index.cshtml, open obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Fügen Sie dem ASP.NET Core MVC-Projekt die folgende Klasse hinzu:Add the following class to the ASP.NET Core MVC project:

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

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

        // Look at generatedCode

        return csharpDocument;
    }
}
#endif

Überschreiben Sie in Startup.ConfigureServices die von MVC hinzugefügte RazorTemplateEngine-Klasse mit der CustomTemplateEngine-Klasse:In Startup.ConfigureServices, override the RazorTemplateEngine added by MVC with the CustomTemplateEngine class:

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

Legen Sie auf der return csharpDocument;-Anweisung von CustomTemplateEngine einen Haltepunkt fest.Set a breakpoint on the return csharpDocument; statement of CustomTemplateEngine. Wenn die Ausführung des Programms am Haltepunkt angehalten wird, können Sie den Wert von generatedCode anzeigen.When program execution stops at the breakpoint, view the value of generatedCode.

Ansicht „Text-Schnellansicht“ von „generatedCode“

Ansicht der Suchvorgänge und Groß-/KleinschreibungView lookups and case sensitivity

Die Razor Ansichts-Engine führt Suchvorgänge bei der Suche nach Groß-und Kleinschreibung durch.The Razor view engine performs case-sensitive lookups for views. Der tatsächliche Suchvorgang wird jedoch vom zugrunde liegenden Dateisystem bestimmt:However, the actual lookup is determined by the underlying file system:

  • Dateibasierte Quelle:File based source:
    • 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.On operating systems with case insensitive file systems (for example, Windows), physical file provider lookups are case insensitive. return View("Test") liefert beispielsweise Treffer für /Views/Home/Test.cshtml, /Views/home/test.cshtml sowie für jede andere Schreibweise.For example, return View("Test") results in matches for /Views/Home/Test.cshtml, /Views/home/test.cshtml, and any other casing variant.
    • 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.On case-sensitive file systems (for example, Linux, OSX, and with EmbeddedFileProvider), lookups are case-sensitive. return View("Test") liefert beispielsweise ganz konkret Treffer für /Views/Home/Test.cshtml.For example, return View("Test") specifically matches /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.Precompiled views: With ASP.NET Core 2.0 and later, looking up precompiled views is case insensitive on all operating systems. Das Verhalten ist mit dem des physischen Dateianbieters unter Windows identisch.The behavior is identical to physical file provider's behavior on Windows. Unterscheiden sich zwei vorkompilierte Ansichten nur in der Groß-/Kleinschreibung, ist das Ergebnis der Suche nicht deterministisch.If two precompiled views differ only in case, the result of lookup is non-deterministic.

Entwicklern wird empfohlen, sich bei der Groß-/Kleinschreibung von Datei- und Verzeichnisnamen an der Schreibweise folgender Begriffe zu orientieren:Developers are encouraged to match the casing of file and directory names to the casing of:

  • Bereichs-, Controller- und AktionsnamenArea, controller, and action names.
  • Razor Seiten.Razor Pages.

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.Matching case ensures the deployments find their views regardless of the underlying file system.

Zusätzliche RessourcenAdditional resources

Einführung in ASP.net-Webprogrammierung mithilfe Razor von Die Syntax bietet viele Beispiele für die Programmierung mit Razor Syntax.Introduction to ASP.NET Web Programming Using the Razor Syntax provides many samples of programming with Razor syntax.