- Learn
- Guida WebMatrix
- I file di layout (Don’t Repeat Yourself)
I file di layout (Don’t Repeat Yourself)
Abbiamo impostato i prerequisiti necessari allo sviluppo della nostra applicazione web, ora dobbiamo ripetere tutto da capo: le impostazioni che abbiamo definito sono infatti presenti solo all’interno della pagina web index.cshtml
e dovrebbero essere replicate anche in dettaglio.cshtml
. Questa pratica però introdurrebbe duplicazione e un aumento dello sforzo in fase di manutenzione. Senza contare che se al posto di 2 pagine ne dovessimo gestire 200 il problema si acuirebbe in modo sensibile.
Niente paura, possiamo spostare questi elementi comuni alle due pagine in un terzo documento, detto ‘layout‘ e poi includere nella pagine un riferimento al layout. In questo modo al momento opportuno la pagina verrà composta con le informazioni prelevate dal layout indicato.
Per fare questo utilizzeremo Razor: una sintassi di scripting server side che, come abbiamo accennato nella precedente lezione, serve proprio per dettare le regole su come una pagina debba essere composta prima di venir inviata al browser.
Per prima cosa creiamo una nuova cartella ‘shared’ e, all’interno di questa, un file ‘layout.cshtml’ nel quale inseriremo il contenuto comune alle pagine della nostra applicazione:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Find Your Language</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/default.css" type="text/css">
<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/resetmin.css" type="text/css">
<link rel="stylesheet" href="css/frontend.css" type="text/css">
</head>
<body>
@RenderBody()
</body>
</html>
L’istruzione @RenderBody() verrà sostituita con il contenuto della pagina richiesta dal browser.
Completiamo l’opera indicando alle pagine index.cshtml
e dettaglio.cshtml
di utilizzare il layout appena creato e rimuovendo da queste tutto quanto già presente in layout.cshtml
. Sostituiamo quindi il contenuto delle due pagine con:
@{
Layout = "~/shared/layout.cshtml";
}
<!-- qui andra il contenuto della nostra pagina -->
Premiamo ora il pulsante esegui
e chiediamo al browser di mostrarci il sorgente della pagina web caricata: noteremo come l’HTML sia il risultato della composizione tra la pagina di layout ed index.cshtml
.
Se vuoi aggiornamenti su I file di layout (Don't Repeat Yourself) inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Come velocizzare il download da uTorrent
uTorrent è uno dei client P2P per il protocolli Torrent più conosciuti e apprezzati. Nel tutorial seguiremo i consigli di […]