Suche…


Einführung

Was ist Rasiermesser?

Razor ist eine Markup-Syntax, mit der Sie serverbasierten Code (Visual Basic und C #) in Webseiten einbetten können.

Durch serverbasierten Code können dynamische Webinhalte dynamisch erstellt werden, während eine Webseite in den Browser geschrieben wird. Wenn eine Webseite aufgerufen wird, führt der Server den serverbasierten Code in der Seite aus, bevor er die Seite an den Browser zurücksendet. Durch die Ausführung auf dem Server kann der Code komplexe Aufgaben ausführen, beispielsweise den Zugriff auf Datenbanken.

Syntax

  • @ {...}
  • @Variablennamen
  • @(Variablennamen)
  • @zum(...){ }
  • @ (Expliziter Ausdruck)
  • @* Bemerkungen *@

Bemerkungen

ASP.NET Razor enthält View Engines für C # und VB.

Die C # -View-Engine verarbeitet Dateien mit der Erweiterung .cshtml , während die VB-View-Engine mit .vbhtml Dateien arbeitet.

Füge Kommentare hinzu

Razor hat eine eigene Kommentarsyntax, die mit @* beginnt und mit *@ endet.

Inline-Kommentar:

<h1>Comments can be @*hi!*@ inline</h1>

Mehrzeiliger Kommentar:

@* Comments can spread
   over multiple
   lines *@

HTML-Kommentar

Sie können auch die normale HTML-Kommentarsyntax verwenden, die in Razor-Ansichten mit <!-- beginnt und mit --> endet. Im Gegensatz zu anderen Kommentaren wird der Razor-Code in einem HTML-Kommentar dennoch normal ausgeführt.

@{
    var hello = "Hello World!"; 
} 
<!-- @hello -->

Das obige Beispiel erzeugt die folgende HTML-Ausgabe:

<!-- Hello World! -->

Kommentare innerhalb eines Codeblocks:

@{
    // This is a comment
    var Input = "test";
}

Anzeige von HTML innerhalb des Razor-Codeblocks

Innerhalb eines Razor-Codeblocks erkennt der Browser HTML-Code nur, wenn der Code Escape-Code enthält.

Verwenden Sie @: für eine einzelne Zeile:

@foreach(int number in Model.Numbers)
{
    @:<h1>Hello, I am a header!</h1>
}

Verwenden Sie <text> ... </text> für mehrzeilig:

@{
    var number = 1;

    <text>
        Hello, I am text
        <br / >
        Hello, I am more text!
    </text>
}

Beachten Sie, dass Razor HTML-Tags verstehen kann, wenn sie sich innerhalb eines Codeblocks befinden. Das Hinzufügen des text Tags um HTML-Tags ist daher nicht erforderlich (obwohl immer noch korrekt), z.

@{
    var number = 1;
    <text>
        <div>
            Hello, I am text
            <br / >
            Hello, I am more text!
        </div>
    </text>
}

Grundlegende Syntax

Rasierercode kann an beliebiger Stelle im HTML-Code eingefügt werden. Rasierercode-Blöcke sind in @{ ... } . Inline-Variable und -Funktionen beginnen mit @ . Code innerhalb der Razor-Klammern folgt den normalen C # - oder VB-Regeln.

Einzeilige Anweisung:

@{ var firstNumber = 1; }

Mehrzeiliger Code-Block:

@{
    var secondNumber = 2;
    var total = firstNumber + secondNumber;
}

Verwendung einer Variablen inline:

<h1>The total count is @total</h1>

Eine Inline-Variable explizit verwenden :

<h2>Item@(item.Id)</h2>

Für dieses spezielle Beispiel können wir die implizite Syntax nicht verwenden, da [email protected] wie eine E-Mail aussieht und von Razor als solche dargestellt wird.

Code in Steuerflussanweisungen einschließen:

<h1>Start with some HTML code</h1>

@for (int i = 0; i < total; i++){
    Console.Write(i);
}

<p>Mix in some HTML code for fun!</p>
<p>Add a second paragraph.</p>

@if (total > 3)
{
    Console.Write("The total is greater than 3");
}
else
{
    Console.Write("The total is less than 3");
}

Die gleiche Syntax würde für alle Anweisungen verwendet werden , wie for die , foreach , while , if , switch , usw.

Code innerhalb des Codes hinzufügen:

@if (total > 3)
{
    if(total == 10)
    {
        Console.Write("The total is 10")
    }
}

Beachten Sie, dass Sie das @ am zweiten Punkt nicht eingeben müssen, if . Nach dem Code können Sie einfach einen anderen Code hinter dem vorhandenen Code eingeben.

Wenn Sie Code nach einem HTML - Element hinzufügen möchten Sie brauchen eine eingeben @ .

@ -Zeichen fluchtet

In vielen Fällen ist der Razor-Parser intelligent genug, um herauszufinden, wann das @ -Zeichen als Teil des Codes verwendet werden soll, im Gegensatz zu einer E-Mail-Adresse. Im folgenden Beispiel ist ein @ Zeichen für das @ -Zeichen nicht erforderlich:

<p>Reach out to us at [email protected]</p>

In einigen Fällen ist die Verwendung des @ -Zeichen jedoch mehrdeutig, und es muss explizit mit @@ , wie im folgenden Beispiel gezeigt:

<p>Join us @@ Stack Overflow!</p>

Alternativ können wir ein HTML-codiertes @ -Zeichen verwenden

<p>Join us &#64; Stack Overflow!</p>

Erstellen Sie Inline-Klassen und -Methoden mit @functions

Mit dem Razor @functions Schlüsselwort können Klassen und Methoden für die Inline-Verwendung in einer Razor-Datei eingeführt werden:

@functions
{
    string GetCssClass(Status status)
    {
        switch (status)
        {
            case Status.Success:
                return "alert-success";
            case Status.Info:
                return "alert-info";
            case Status.Warning:
                return "alert-warning";
            case Status.Danger:
            default:
                return "alert-danger";
         }
     }
}


<label class="alert @GetCssClass(status)"></label>

Dasselbe kann für Klassen getan werden:

@functions
{
    class Helpers
    {
        //implementation
    }
}

Hinzufügen eines benutzerdefinierten Attributs mit - (Bindestrich) im Namen

Wenn Sie ein Attribut durch einen Rasierer hinzufügen müssen, der einen - (Bindestrich) im Namen enthält, können Sie dies nicht einfach tun

@Html.DropDownListFor(m => m.Id, Model.Values, new { @data-placeholder = "whatever" })

es wird nicht kompilieren. data- * -Attribute sind in html5 gültig und üblich, um Elementen zusätzliche Werte hinzuzufügen.

Folgendes wird jedoch funktionieren

@Html.DropDownListFor(m => m.Id, Model.Values, new { @data_placeholder = "whatever" })

da "_" beim Rendern durch "-" ersetzt wird.

Dies funktioniert gut, da Unterstriche in Attributnamen in HTML nicht akzeptabel sind.

Editor-Vorlagen

Editorvorlagen sind eine gute Möglichkeit, Razor-Code wiederzuverwenden. Sie können Editorvorlagen als Razor-Teilansichten definieren und diese dann in anderen Ansichten verwenden.

Views/Shared/EditorTemplates/ normalerweise im Ordner Views/Shared/EditorTemplates/ , sie können jedoch auch im Ordner Views/ControllerName/EditorTemplates/ . Der Name der Ansicht ist normalerweise der Name des Objekts, für das Sie die Vorlage verwenden möchten, wie <type>.cshtml .

Hier ist eine einfache Editorvorlage für DateTime:

@model DateTime
<div>
   <span>
      @Html.TextBox("", Model.ToShortDateString(), new { data_date_picker="true" })
   </span>
</div>

Speichern Sie die Datei als Views / Shared / EditorTemplate / DateTime.cshtml .

Verwenden Sie dann EditorFor , um diesen Vorlagencode in einer anderen Ansicht aufzurufen:

@Html.EditorFor(m => m.CreatedDate)

Es gibt auch ein UIHint-Attribut, um den Dateinamen anzugeben:

public class UiHintExampleClass
{
    [UIHint("PhoneNumber")]
    public string Phone { get; set; }
}

Definieren Sie diese Rufnummernvorlage in Ansichten / Freigegeben / EditorTemplates / PhoneNumber.cshtml .


Editorvorlagen können auch für benutzerdefinierte Typen definiert werden.

Hier ist ein benutzerdefinierter Typ namens SubModel :

public class SubModel
{
    public Guid Id { get; set;} 
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

public class Model
{
    public Guid Id { get; set; }
    public DateTime Created {get; set; }
    
    public SubModel SubModel{get; set; }
}

Dies ist das EditorTemplate für SubModel:

@model SubModel
<div class="form-group">
    @Html.LabelFor(m => m.FirstName)
    @Html.TextBoxFor(m => m.FirstName)
</div>
<div class="form-group">
    @Html.LabelFor(m => m.LastName)
    @Html.TextBoxFor(m => m.LastName)
</div>

Nun wird die Ansicht für Modell einfach:

@model Model
@Html.EditorFor(m => m.CreatedDate)
@Html.EditorFor(m => m.SubModel, new { @Prefix = "New"}) 
@* the second argument is how you can pass viewdata to your editor template*@

Übergeben Sie den Inhalt von Razor an einen @helper

Senden Sie einen Razor-Part an einen @helper, beispielsweise ein HTML-Div.

@helper WrapInBox(Func<Object, HelperResult> content)
{
    <div class="box">@content(null) </div>
}

//call 
@WrapInBox(@<div>
                I'm a inner div
            </div>)

@Helpers über Ansichten hinweg teilen

@ Helfer können zwischen Ansichten geteilt werden.

Sie sollten im Ordner App_Code erstellt werden

Geben Sie hier die Bildbeschreibung ein

@helper CreatePrimaryBootstrapButton(string label)
{
    <button type="button" class="btn btn-primary">@label</button>
}

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

Die Globals @Url und @Html sind standardmäßig nicht in dem in App_code definierten @ Helper verfügbar. Sie können sie wie folgt hinzufügen (für jede .cshtml in Ihrem App_code-Ordner)

@*  Make @Html and @Url available *@
@functions
{
    private new static HtmlHelper<object> Html
    {
        get { return ((WebViewPage)CurrentPage).Html; }
    }

    private static UrlHelper Url
    {
        get { return ((WebViewPage)CurrentPage).Url; }
    }
 }


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow