asp.net-mvc
Scheermes

Invoering

Syntaxis

• @ {...}
• @variableName
• @ (VariableName)
• @voor(...){ }
• @ (Expliciete expressie)
• @ * reacties * @

Opmerkingen

Commentaar toevoegen

Razor heeft zijn eigen syntaxis van reacties, die begint met @* en eindigt met *@ .

Inline reactie:

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

Meerregelig commentaar:

@* Comments can spread
   over multiple
   lines *@

HTML-opmerking

U kunt ook de normale syntaxis van HTML-opmerkingen gebruiken, beginnend met <!-- en eindigend met --> in Razor-weergaven. Maar in tegenstelling tot andere opmerkingen, wordt de Razor-code in een HTML-opmerking nog steeds normaal uitgevoerd.

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

Het bovenstaande voorbeeld produceert de volgende HTML-uitvoer:

<!-- Hello World! -->

Opmerkingen binnen een codeblok:

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

HTML weergeven binnen Razor-codeblok

In een Razor-codeblok herkent de browser alleen HTML-code als de code is ontsnapt.

Gebruik @: voor een enkele regel:

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

Gebruik <text> ... </text> voor Multi-line:

@{
    var number = 1;

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

Merk op dat Razor HTML-tags begrijpt wanneer hij zich in een codeblok bevindt. Daarom is het toevoegen van de text tag rond HTML-tags is niet nodig (hoewel nog steeds correct), zoals:

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

Basissyntaxis

Scheercode kan overal in HTML-code worden ingevoegd. Scheermescodeblokken zijn opgenomen in @{ ... } . Inline variabele en functies beginnen met @ . Code tussen de scheermesjes volgt de normale C # of VB regels.

Verklaring van één regel:

@{ var firstNumber = 1; }

Meerregelig codeblok:

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

Gebruik een variabele inline:

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

Een variabele inline expliciet gebruiken :

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

Voor dit specifieke voorbeeld kunnen we de impliciete syntaxis niet gebruiken omdat [email protected] eruit ziet als een e-mail en als zodanig door Razor wordt weergegeven.

Voeg code toe binnen control flow-instructies:

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

Dezelfde syntaxis zou worden gebruikt voor alle uitspraken zoals for , foreach , while , if , switch , etc.

Code binnen code toevoegen:

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

Merk op dat u bij het tweede if @ niet hoeft te typen. Na code kun je gewoon andere code achter de bestaande code typen.

Als u code wilt toevoegen na een HTML-element, moet u een @ typen.

Ontsnappend @ karakter

In veel gevallen is de Razor-parser slim genoeg om erachter te komen wanneer het @ -teken moet worden gebruikt als onderdeel van de code, in tegenstelling tot onderdeel van zoiets als een e-mailadres. In het onderstaande voorbeeld is het niet nodig om aan het @ -teken te ontsnappen:

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

In sommige gevallen is het gebruik van het @ -teken echter meer dubbelzinnig en moet het expliciet worden weggelaten met @@ , zoals in het onderstaande voorbeeld:

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

Als alternatief kunnen we een HTML-gecodeerd @ -teken gebruiken

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

Maak inline klassen en methoden met behulp van @functions

Het gebruik van het Razor @functions trefwoord geeft de mogelijkheid om klassen en methoden voor inline gebruik in een Razor-bestand te introduceren:

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

Hetzelfde kan worden gedaan voor lessen:

@functions
{
    class Helpers
    {
        //implementation
    }
}

Een aangepast kenmerk toevoegen met - (koppelteken) in naam

Als u via het scheerapparaat een kenmerk moet toevoegen met een - (koppelteken) in de naam, kunt u dit niet eenvoudig doen

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

het zal niet compileren. data- * attributen zijn geldig en gebruikelijk in html5 voor het toevoegen van extra waarden aan elementen.

Het volgende zal echter werken

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

omdat "_" wordt vervangen door "-" wanneer deze wordt weergegeven.

Dit werkt prima omdat onderstrepingstekens niet acceptabel zijn in kenmerknamen in html.

Editor-sjablonen

Editor-sjablonen zijn een goede manier om Razor-code opnieuw te gebruiken. U kunt editor-sjablonen definiëren als gedeeltelijke weergaven van het scheerapparaat en deze vervolgens in andere weergaven gebruiken.

Editor-sjablonen bestaan meestal in de map Views/Shared/EditorTemplates/ , hoewel ze ook kunnen worden opgeslagen in de map Views/ControllerName/EditorTemplates/ . De naam van de weergave is meestal de naam van het object waarvoor u de sjabloon wilt gebruiken, zoals <type>.cshtml .

Hier is een eenvoudige editor-sjabloon voor DateTime:

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

Sla het bestand op als Views / Shared / EditorTemplate / DateTime.cshtml .

Gebruik vervolgens EditorFor om deze sjablooncode in een andere weergave aan te roepen:

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

Er is ook een UIHint-kenmerk om de bestandsnaam op te geven:

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

Definieer deze telefoonnummersjabloon in Views / Shared / EditorTemplates / PhoneNumber.cshtml .

Editor-sjablonen kunnen ook worden gedefinieerd voor aangepaste typen.

Hier is een aangepast type genaamd 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; }
}

Dit is de EditorTemplate voor 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>

Nu wordt de View for Model eenvoudig:

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

Geef Razor-inhoud door aan een @helper

Stuur een Razor-onderdeel naar een @helper, bijvoorbeeld een HTML-div.

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

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

Deel @helpers over verschillende weergaven

@Helpers kunnen worden gedeeld tussen weergaven.

Ze moeten worden gemaakt in de map App_Code

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

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

De @Url en @Html zijn standaard niet beschikbaar in de @Helper die is gedefinieerd in App_code. U kunt ze als volgt toevoegen (voor elke .cshtml in uw map App_code)

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