Sintassi Razor di base

In questo capitolo daremo un'occhiata a tutti i principi di base della sintassi Razor

La cosa più semplice che potete fare tramite la sintassi Razor è accedere a qualche elemento lato server prefissando una variabile o il nome di una funzione con il carattere @ (carattere-at). Abbiamo già visto un paio di esempi nel capitolo precedente, dove univamo HTML, testo e variabili lato server tutto insieme come qui sotto:

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

L'espressione qui sopra emette testo mischiandolo con la variabile name (che deve essere definita da qualche altra parte) e quindi legge la data corrente dalla proprietà Now dalla struttura DateTime. Grazie alla semplice sintassi il codice è effettivamente abbastanza semplice da leggere.

Ma il prefisso @ non serve solo per accedere a variabili o proprietà di una classe. E' usato praticamente dappertutto in Razor, incluse le istruzioni di controllo, blocchi di codice, commenti e tanto altro così come vedrete nei prossimi esempi.

Codifica HTML

Dovete essere consapevoli che quando usata la sintassi Razor in una espressione come sopra, l'output sarà automaticamente codificato in HTML. Questo è il comportamento che si desidera (solitamente), ma in alcuni casi vorreste essere in grado di emettere HTML e fare in modo che sia interpretato dal browser invece che trasmesso direttamente in output. Per questa situazione si può utilizzare il metodo Raw() presente nella classe Html e qui ecco un esempio dove potete vedere la differenza:

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

Il risultato sarà come il seguente, dove potete vedere che nella prima linea, il codice HTML nella stringa è emesso come testo (è stato codificato come HTML), mentre nella seconda linea il codice è interpretato e pertanto il testo appare in grassetto.

<b>Hello, world!</b>

Hello, world!

Espressioni esplicite

Nel primo esempio qui sopra, abbiamo utilizzato una cosidetta espressione "implicita", ma alcune situazioni, per chiarire al "parser" esattamente le vostre intenzioni, richiedono una variante più "esplicita". Razor dispone di una sintassi esplicita proprio per questi casi ed è semplicemente un metodo per includere tutta l'espressione in un paio di parentesi. Questo farà in modo che per il "parser" sia più semplice comprendere quello che state facendo e consente cose come calcoli o modifiche all'interno di una espressione Razor.

Ecco un esempio

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

Notate la sintassi, dove il carattere @ è seguito da una coppia di parentesi (graffe o tonde). Utilizziamo questa sintassi due volte, la prima per accedere al metodo Substring sulla variabile string e quindi per eseguire una operazione matematica molto semplice direttamente nell'espressione Razor. L'output risultante è il seguente:

Hello, John. Your age is: 42.

Blocchi Razor multi istruzioni

Se avete bisogno di fare di più che un semplice accesso ad una variabile, Razor vi permette di eseguire un blocco di codice composto da più linee inserendo una parentesi graffa aperta subito dopo l'operatore @. Ecco un esempio:

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

Notate come sia possibile scrivere del normale codice C# all'interno di un blocco di codice che comprende loops, istruzioni condizionali e qualsiasi altra cosa di cui possiate avere bisogno dal linguaggio C#. Una cosa importante da ricordare sempre però è che dovete inserire le parentesi graffe sempre interno alle vostre istruzioni di controllo, anche se sono composte da una singola linea. Altrimenti il "parser" andrà in confusione.

Notate anche come possiamo definire una variabile all'interno di un blocco di codice, modificarla se necessario e quindi utilizzarla all'esterno del blocco di codice

Tag HTML e testo semplice all'interno dei blocchi di codice

Così, all'interno di un blocco di codice, come mostrato nell'esempio qui sopra, potreste comunque aver bisogno di emettere del testo - infatti, è abbastanza normale che sia così. Ma invece di forzarvi a chiudere e riaprire il blocco di codice, Razor vi permette di inserire direttamente i tag HTML nel vostro blocco di codice. Come nell'esempio seguente:

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

Razor vede i vostri tag HTML e semplicemente assume che gli stiate dando del markup per l'output invece che del codice da elaborare. Ma come fare se non volete includere il vostro testo all'interno di tag HTML? Razor ha una opzione anche per fare questo, basta usare l'operatore @:

@:This is plain text!

Se avete bisogno di più di una linea di testo, potete circondare il testo all'interno di una coppia di tag <text> Ecco un esempio più completo dove vi mostriamo entrambe le sintassi:

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

Notate come possiamo mescolare codice, HTML e semplice testo molto facilmente!

Commenti lato server in Razor

A volte vorrete lasciare dei commenti nel vostro codice, o eliminare righe di codice temporaneamente per fare dei test. Pertanto, quasi tutti i linguaggi di programmazione includono una sintassi per commentare il codice e così è anche per Razor. Potreste utilizzare semplicemente i commenti HTML, ma come sappiamo, questi commenti vengono inviati al browser e possono essere visti se si utilizza l'opzione "View Source" del vostro browser. I commenti Razor invece non sono mai inviati al browser ma semplicemente ignorati quando la pagina viene processata dal "parser"

Ecco un esempio di come sia possibile avere un commento Razor nelle vostre Views:

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

Se siete all'interno di blocco di codice Razor, potete utilizzare anche i commenti standard del C#

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

    // C# style single-line comment

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

Riepilogo

Queste sono le cose più elementari che dovreste conoscere a proposito di Razor e dovrebbero consentirvi di iniziare. Nel prossimo capitolo, daremo un'occhiata a cose più avanzate.