Grundlagen der Razor Syntax

In diesem Kapitel werden alle Grundprinzipien der Razor-Syntax behandelt.

Das Grundlegendste, was Sie mit der Razor-Syntax tun können, ist, auf etwas von der Serverseite aus zuzugreifen, indem Sie einem Variablen- oder Funktionsnamen ein @ (at-Zeichen) voranstellen. Wir haben im vorigen Kapitel einige Beispiele dafür gesehen, in denen wir einfach HTML-, Text- und serverseitige Variablen wie folgt zusammenmischen können:

<p>Hello, world - my name is @name and the current date is: @DateTime.Now.ToString()</p>

Der obige Ausdruck gibt Text aus, gemischt mit der Variablen name (diese muss an einer anderen Stelle deklariert werden), und greift dann über die Now -Eigenschaft der DateTime -Klasse auf das aktuelle Datum zu. Und dank der einfachen Syntax ist der Code eigentlich recht einfach zu lesen.

Mit dem @-Prefix kann jedoch nicht nur auf einfache Variablen oder Eigenschaften einer Klasse zugegriffen werden. Es wird für so ziemlich alles in Razor verwendet, einschließlich Inline-Steueranweisungen, Codeblöcken, Kommentaren und vielem mehr, wie Sie in den folgenden Beispielen sehen werden.

HTML-Codierung

Beachten Sie, dass bei Verwendung der oben gezeigten impliziten Razor-Ausdruckssyntax die Ausgabe automatisch HTML-codiert wird. Dies ist normalerweise das gewünschte Verhalten, aber in einigen Fällen möchten Sie in der Lage sein, HTML auszugeben und vom Browser interpretieren zu lassen, anstatt es als Ausgabe zu rendern. Hierfür können Sie die Methode Raw() für die Klasse Html verwenden. Hier ist ein Beispiel, in dem Sie den Unterschied sehen können:

@{
    var helloWorld = "<b>Hello, world!</b>";
}
<p>@helloWorld</p>
<p>@Html.Raw(helloWorld)</p>

Das Ergebnis sieht folgendermaßen aus: In der ersten Zeile wird der HTML-Code in der Zeichenfolge nur als Text gerendert (er wurde HTML-codiert), während die zweite Zeile interpretiert wird, wodurch der Text fett dargestellt wird:

<b>Hello, world!</b>

Hello, world!

Explizite Ausdrücke

Im obigen ersten Beispiel haben wir einen sogenannten impliziten Ausdruck verwendet. In einigen Situationen ist jedoch eine explizitere Variante erforderlich, um dem Parser genau zu zeigen, was Ihre Absichten sind. Razor enthält eine explizite Ausdruckssyntax für genau diese Situationen. Im Grunde geht es darum, Ihren Ausdruck in Klammern zu setzen. Auf diese Weise kann der Parser leichter verstehen, was Sie tun, und in einem Razor-Ausdruck können Berechnungen und Änderungen vorgenommen werden.

Hier ist ein Beispiel:

@{
    var name = "John Doe";
}
Hello, @(name.Substring(0,4)). Your age is: <b>@(37 + 5).</b>

Beachten Sie die Syntax, in der auf das @ -Zeichen ein Satz umgebener Klammern folgt. Wir verwenden es zweimal, um zuerst auf die Substring-Methode für die Zeichenfolgenvariable zuzugreifen und dann direkt im Razor-Ausdruck eine sehr einfache Mathematik durchzuführen. Die resultierende Ausgabe sieht folgendermaßen aus:

Hallo John. Dein Alter ist: 42.

Razor Blöcke mit mehreren Anweisungen

Wenn Sie mehr tun müssen als z.B.: nur auf eine Variable zuzugreifen, können Sie mit Razor auch mehrzeilige Codeblöcke eingeben, indem Sie nach dem @ -Operator eine geschweifte Startklammer eingeben. Hier ist ein Beispiel:

@{
    var sum = 32 + 10;
    var greeting = "Hello, world!";
    var text = "";
    for(int i = 0; i < 3; i++)
    { 
    text += greeting + " The result is: " + sum + "\n";
    }
}

<h2>CodeBlocks</h2>
Text: @text

Beachten Sie, wie ich regulären C# -Code in den Codeblock schreiben kann, einschließlich Schleifen, bedingter Anweisungen und allem anderen, was Sie aus der C# -Sprache gewohnt sind. Ein wichtiger Unterschied ist jedoch, dass Ihre Steueranweisungen in Codeblöcken geschweifte Klammern enthalten müssen, auch wenn sie nur eine Zeile umfassen - andernfalls können Sie den Parser verwirren.

Beachten Sie auch, wie ich eine Variable innerhalb des Codeblocks definieren, bei Bedarf ändern und dann außerhalb des Codeblocks verwenden kann!

HTML-Tags und einfacher Text in Codeblöcken

Wenn Sie sich also in einem Codeblock befinden, wie im obigen Beispiel gezeigt, müssen Sie möglicherweise noch Text ausgeben - in der Tat ist das ganz normal. Anstatt Sie zu zwingen, Codeblöcke ein- und auszublenden, können Sie mit Razor HTML-Tags wie folgt direkt in Ihre Codeblöcke mischen:

@{
    var helloWorld = "This is a code block...";
    
    <p>This is a tag with plain text and <b>markup</b> inside of it...</p>   
}

Razor erkennt einfach Ihre HTML-Tags und geht dann davon aus, dass Sie sie jetzt zur Ausgabe anstelle von Code zur Verarbeitung markieren. Aber was ist, wenn Sie Ihren Text nicht in Tags einschließen möchten? Razor bietet dazu auch die Möglichkeit, den @: -Operator zu verwenden:

@:This is plain text!

Wenn Sie mehr als eine Zeile einfachen Text benötigen, können Sie ihn mit einem Satz von <text> tags (Stichworte). Hier ist ein vollständigeres Beispiel, in dem ich Ihnen beide Syntaxen zeige:

@{
    var helloWorld = "This is a code block...";
    
 
    @:This is plain text!
    <br><br>
    <text>This is plain text as well, and we can
    even span multiple lines, if needed!</text>
}

Beachten Sie, wie wir jetzt ganz einfach Code, HTML und einfachen Text mischen können!

Serverseitige Kommentare mit Razor

Manchmal möchten Sie vielleicht Kommentare in Ihrem Code hinterlassen oder Codezeilen vorübergehend auskommentieren, um Dinge zu testen. Aus diesem Grund enthalten die meisten Programmiersprachen eine Syntax zum Kommentieren Ihres Codes, ebenso wie Razor. Sie könnten einfach HTML-Kommentare verwenden, aber wie wir alle wissen, werden diese im Browser gerendert und sind daher sichtbar, wenn die Option "Quelltext anzeigen" verwendet wird. Razorkommentare hingegen werden nie im Browser gerendert, sondern beim Parsen der Seite einfach ignoriert.

Hier ist ein Beispiel, wie ein Razorkommentar aussehen könnte:

@*
    Here's a Razor server-side comment
    It won't be rendered to the browser
    It can span multiple lines
*@

Wenn Sie sich in einem Razor-Codeblock befinden, können Sie sogar die regulären C#-Kommentare verwenden:

@{
    @*
    Here's a Razor server-side comment
    *@

    // C# style single-line comment

    /* 
    C# style multiline comment
    It can span multiple lines
    */    
}

Zusammenfassung

Dies war das grundlegendste Material, das Sie über Razor wissen müssen, und es sollte Ihnen den Einstieg erleichtern. Im nächsten Kapitel werden wir uns etwas weiter fortgeschrittenes ansehen.