Razor è un view engine, introduce cioè una sintassi studiata per descrivere come il server debba produrre HTML dinamicamente a fronte di una richiesta HTTP. Ad esempio se inseriamo questo codice all'interno di una pagina prova.cshtml:
<!doctype html>
<html>
<body>
@DateTime.Now
</body>
</html>e premiamo il pulsante Esegui. La pagina Web prodotta contiene la data e l'ora attuali, che cambiano ad ogni refresh del browser. Questo funzionamento è possibile perché il codice preceduto dal simbolo @ viene elaborato dal server ad ogni richiesta ed il suo risultato inserito all'interno della pagina alla posizione specificata.
Quando una singola istruzione dinamica non è sufficiente ad ottenere il comportamento desiderato possiamo avvalerci delle parentesi graffe per delimitare l'area nella quale vogliamo eseguire codice server-side:
<!doctype html>
<html>
<body>
@{
DateTime today = DateTime.Now;
DateTime tomorrow = today.AddDays(1);
}
domani: @tomorrow
</body>
</html>Una delle chicche di questo view engine è la presenza al suo interno di un parser capace di riconoscere automaticamente la sintassi del linguaggio dinamico dall'HTML, questa peculiarità si rivela molto comoda nella creazione di costrutti come questo:
@for(int i = 99; i >= 0; i--){
<p>@i bottiglie di rum </p>
}Notiamo come all'interno del ciclo for si alternino HTML e sintassi Razor senza necessità di esplicitare il cambio di linguaggio. Nei rari casi in cui ci si trovi in una situazione come la successiva, nella quale il render engine non ha modo di discriminare il linguaggio utilizzato, è possibile beneficiare di alcuni marcatori fittizzi: <text>, che verranno poi rimossi automaticamente in fase di produzione dell'HTML:
@for(int i =99; i > 0; i --){
<text>
@i nanetti ballavano sui tetti
1 cade giu e @(i-1) restan su.<br/>
</text>
}In questo esempio è presentata anche la sintassi @(), utile nel qual caso l'istruzione da elaborare sia composta da più particelle.
Rendering
Razor supporta svariati linguaggi; tipicamente il suo utilizzo si coniuga alla scelta del C# ma si potrebbero benissimo stendere gli esempi precedenti con la sintassi VB. A prescindere dal linguaggio utilizzato questo render engine introduce alcune semplici facilitazioni per la gestione di template e di documenti parziali con i quali comporre il la pagina HTML.
Un esempio efficace di questa tecnica è già stato implementato qualche lezione fa per gestire le pagine del progetto FindYourLanguage: il file di template (shared/layout.cshtml) esplicita con l'istruzione RenderBody il punto nel quale inserire l'html specifico della pagina richiesta in quel momento. A sua volta la pagina chiede di essere incorniciata all'interno del layout impostando la variabile Layout.
Ma le potenzialità di Razor in questo frangente non sono finite, è possibile infatti esplicitare anche altre sezioni all'interno del template alle quali associare specifiche porzioni della pagina, facciamo un esempio modificando il file layout.cshtml:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
@RenderSection("meta", false)
<!-- ... resto della pagina ... -->
Con questa istruzione stiamo indicando a Razor di inserire subito dopo il tag <meta
charset='utf-8'> il contenuto di una specifica sezione di nome 'meta'. Il secondo parametro
impostato a false sottolinea che questa sezione è facoltativa. Ora modifichiamo il file index.cshtml
e aggiungiamo la sezione 'meta':
@{
Layout = "~/shared/layout.cshtml";
}
@section meta{
<meta name="title" content="Find Your Language, motore di ricerca e classifiche dei
linguaggio di programmazionet" />
<meta name="description" content="Una piccola applicazione per sperimentare la potenza di
WebMatrix e della sintassi Razor" >
<meta name="keywords" content="WebMatrix, Razor" />
}
<!-- ... resto della pagina ... -->Eseguendo il progetto ed analizzandone il sorgente HTML generato noteremo la corretta collocazione della sezione all'interno della pagina.
Helper
Tra le potenzialità di Razor va sicuramente citata la possibilità di creare delle piccole funzioni (helper) nelle quali racchiudere porzioni di codice riutilizzabili. Queste funzioni possono poi essere invocate in fase di generazione della pagina contribuendo anch'esse alla creazione dell'HTML.
Incapsuliamo in un helper il ciclo for di stampa della classifica; per prima cosa creiamo la cartella speciale App_Code all'interno del nostro progetto; questa cartella viene riconosciuta dal sistema come particolare e trattata in modo diverso dalle altre (ad esempio non può essere raggiunta direttamente via web). All'interno della cartella specifichiamo quindi un file dal nome utility.cshtml con questo contenuto:
@helper StampaLinguaggi()
{
var db= Database.Open("FindYourLanguage");
var query = "select top 10 linguaggio, count(*) as conteggio from ricerche group
by linguaggio order by conteggio desc;";
var elementi = db.Query(query);
foreach(var elemento in elementi)
{
<li><a href="dettaglio.cshtml?box_ricerca=@elemento.linguaggio">@elemento.linguaggio</a></li>
}
}Notiamo che al di là della sintassi con la quale abbiamo definito l'helper, il resto del listato è riconducibile a quanto fatto nelle precedenti lezioni. Ora possiamo rimuovere tutto il codice non più necessario dal file index.cshtml e sostituirlo con l'invocazione a StampaLinguaggi:
<!-- ... resto della pagina ... -->
Ecco i linguaggi più ricercati:
</p>
<ol>
@utility.StampaLinguaggi()
</ol>
<!-- ... resto della pagina ... -->Eseguiamo il progetto per sincerarci del buon funzionamento di quanto sviluppato.