Puoi usare un layout anche scritto da qualcun altro in maniera molto semplice. Generalmente un layout html è fatto da una o piu pagine piu i file css e js. Ogni file html in realtà ha una parte fissa (l'header, il footer, la sezione head, ecc.) e una parte 'dinamica' che contiene il contenuto delle singole pagine (lo stesso concetto delle masterpage).
STEP 0:
Prepara il campo. Crea un applicazione asp.net mvc vuota, un controller Home e un action Index con relativa view. Copia i file accessori (img/css/js) del tuo template html in una cartella del tuo progetto per esempio: /Content/MioTemplate mantenendo intatta la struttura delle directory.
STEP1:
Prendi il contenuto del file html principale del template e copialo interamente nel file _Layout.cshtml
codice:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Parte fissa del template uguale a tutte le pagine!</h1>
Parte dinamica</p>
[img]img/immagine-dinamica.jpg[/img]
<h2>Footer Fisso</h2>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
STEP2:
Individua tutta la parte 'dinamica' del template. tagliala e incollala nel file Index.cshtml.
codice:
Parte dinamica</p>
[img]img/immagine-dinamica.jpg[/img]
STEP3:
In _Layout.cshtml inserisci il RenderBody al posto della parte dinamica:
codice:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Parte fissa del template uguale a tutte le pagine!</h1>
@RenderBody()
<h2>Footer Fisso</h2>
<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
STEP 4:
Cambia tutti i riferimenti relativi delle src del template con riferimenti dell'applicazione:
per esempio src="js/bootstrap.min.js" diventa src="~/content/miotemplate/js/bootstrap.min.js"
Se stai usando una versione inferiore a mvc 3 il tile(~) in razor non funziona e dovrai usare ll comando piu lungo: src="@Url.Content("/content/miotemplate/js/bootstrap.min.js")"
ESEGUI E VERIFICA CHE TUTTO FUNZIONI!
Per rendere dinamiche delle parti esterne alla sezione 'Body' abbiamo diversi modi:
STEP 5 (rendere dinamico il titolo di ogni pagina):
In Index.cshtml in una posizione qualsiasi del file (generalmente in cima)
codice:
@{
ViewBag.TitoloPagina = "Controller home Action Index!"
}
e nel _Layout.cshtml invece modifica il tag <title> cosi
codice:
<title>@ViewBag.TitoloPagina</title>
STEP 6 Aggiungere intere sezioni di codice in posizioni esterne al Body:
Se per esempio volessi aggiungere, solo per una pagina, una sezione di javascript aggiuntiva rispetto a quella del template posso prevedere uno spazio in fondo alla pagina prima della chiusura del tag body. Le sezioni possono essere aggiunte ovunque nel template.
codice:
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.TitoloPagina</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/content/miotemplate/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Parte fissa del template uguale a tutte le pagine!</h1>
@RenderBody()
<h2>Footer Fisso</h2>
<script src="//code.jquery.com/jquery.js"></script>
<script src="~/content/miotemplate/js/bootstrap.min.js"></script>
@RenderSection("ScriptAggiuntivi", false)
</body>
</html>
e in un punto qualsiasi del file Index.cshtml:
codice:
@section ScriptAggiuntivi {
<script>
//altro javascript solo per la home page
</script>
}
Il secondo parametro booleano indica se la sezione è obbligatoria per tutte le view.
STEP 7: Usare qua e la nel template @Html.Action per renderizzare pezzi di pagina con action che ritornano delle PartialView. Non scrivo l'esempio perche credo sia una cosa che c'è in tutte le guide di asp.net mvc
credo sia tutto.
Permessi di invio
Rispondi quotando