asp.net-mvc
Rasoio

introduzione

Sintassi

• @ {...}
• @variableName
• @ (VariableName)
• @for (...) {}
• @ (Espressione esplicita)
• @* Commenti *@

Osservazioni

Aggiungi commenti

Razor ha la sua sintassi di commento che inizia con @* e termina con *@ .

Commento in linea:

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

Commento a più righe:

@* Comments can spread
   over multiple
   lines *@

Commento HTML

Puoi anche utilizzare la normale sintassi dei commenti HTML che inizia con <!-- e termina con --> nelle visualizzazioni Razor. Ma a differenza di altri commenti, il codice Razor all'interno di un commento HTML viene ancora eseguito normalmente.

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

L'esempio precedente produce il seguente output HTML:

<!-- Hello World! -->

Commenti all'interno di un blocco di codice:

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

Visualizza HTML all'interno del blocco di codice Razor

Mentre si trova all'interno di un blocco di codice Razor, il browser riconoscerà il codice HTML solo se il codice è in escape.

Usa @: per una linea singola:

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

Utilizza <text> ... </text> per multilinea:

@{
    var number = 1;

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

Nota che Razor, quando si trova all'interno di un blocco di codice, capirà i tag HTML. Pertanto, l'aggiunta del tag di text attorno ai tag HTML non è necessaria (sebbene sia ancora corretta), ad esempio:

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

Sintassi di base

Il codice rasoio può essere inserito ovunque all'interno del codice HTML. I blocchi di codice del rasoio sono racchiusi in @{ ... } . La variabile inline e le funzioni iniziano con @ . Il codice all'interno delle parentesi del rasoio segue le normali regole C # o VB.

Dichiarazione di riga singola:

@{ var firstNumber = 1; }

Blocco di codice multilinea:

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

Utilizzando una variabile in linea:

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

Utilizzando una variabile inline esplicitamente :

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

Per questo particolare esempio non saremo in grado di utilizzare la sintassi implicita perché [email protected] aspetto di una e-mail e sarà reso come tale da Razor.

Racchiudere il codice all'interno delle dichiarazioni di flusso di controllo:

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

Questa stessa sintassi verrebbe utilizzato per tutte le istruzioni come for , foreach , while , if , switch , etc.

Aggiunta di codice all'interno del codice:

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

Si noti che non è necessario digitare @ alla seconda if . Dopo il codice puoi semplicemente digitare altro codice dietro il codice esistente.

Se si desidera aggiungere il codice dopo un elemento HTML si ha bisogno di digitare una @ .

Escaping @ personaggio

In molti casi, il parser Razor è abbastanza intelligente da capire quando il simbolo @ deve essere usato come parte del codice, invece di far parte di qualcosa come un indirizzo email. Nell'esempio seguente, l'escape del segno @ non è necessario:

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

Tuttavia, in alcuni casi, l'utilizzo del simbolo @ è più ambiguo e deve essere esplicitamente evaso con @@ , come nell'esempio seguente:

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

In alternativa, possiamo usare un carattere HTML codificato @

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

Crea classi e metodi in linea usando le funzioni @

@functions parola chiave Razor @functions offre la possibilità di introdurre classi e metodi per l'uso in linea all'interno di un file Razor:

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

Lo stesso può essere fatto per le classi:

@functions
{
    class Helpers
    {
        //implementation
    }
}

Aggiunta di un attributo personalizzato con - (trattino) nel nome

Se è necessario aggiungere un attributo tramite il rasoio che ha un - (trattino) nel nome non si può semplicemente fare

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

non verrà compilato. Gli attributi data- * sono validi e comuni in html5 per aggiungere valori extra agli elementi.

Tuttavia, il seguente funzionerà

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

poiché "_" viene sostituito con "-" quando viene visualizzato.

Funziona correttamente in quanto i caratteri di sottolineatura non sono accettabili nei nomi degli attributi in html.

Modelli di editor

I modelli di editor sono un buon modo per riutilizzare il codice Razor. È possibile definire modelli di editor come Visualizzazioni parziali del Rasoio e quindi utilizzarli in altre viste.

I modelli di editor di solito esistono nella cartella Views/Shared/EditorTemplates/ , anche se possono essere salvati nella cartella Views/ControllerName/EditorTemplates/ . Il nome della vista è in genere il nome dell'oggetto per cui si desidera utilizzare il modello, come <type>.cshtml .

Ecco un semplice modello di editor per DateTime:

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

Salva il file come Views / Shared / EditorTemplate / DateTime.cshtml .

Quindi, utilizzare EditorFor per chiamare questo codice modello in un'altra vista:

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

C'è anche un attributo UIHint per specificare il nome del file:

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

Definisci questo modello di numero di telefono in Views / Shared / EditorTemplates / PhoneNumber.cshtml .

I modelli di editor possono essere definiti anche per i tipi personalizzati.

Ecco un tipo personalizzato chiamato 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; }
}

Questo è il EditorTemplate per 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>

Ora, la View for Model diventa semplicemente:

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

Passa il contenuto del rasoio a un @helper

Invia una parte Razor a un @helper, ad esempio un div HTML.

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

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

Condividi @ helper attraverso le visualizzazioni

@Helpers potrebbe essere condiviso tra le visualizzazioni.

Dovrebbero essere creati nella cartella App_Code

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

//call

@MenuHelpers.CreatePrimaryBootstrapButton("my button")

Le @Url globali @Url e @Html non sono disponibili per impostazione predefinita in @Helper definite in App_code. Puoi aggiungerli come segue (per ogni .cshtml nella tua cartella 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; }
    }
 }