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.

Figura 6. Il markup generato
(clic per ingrandire)

Il markup generato

5 / 11

HTML, CSS e Javascript

I Video di HTML.it

Avanade, le opportunità del 2015 e la nuova unit sarda