asp.net-mvc
Rasierer

Einführung

Syntax

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

Bemerkungen

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

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