ASP.NET MVC - Styles et mise en page

Pour apprendre ASP.NET MVC, nous construirons une application Internet.

Partie 3 :Ajouter des styles et une apparence uniforme (gabarit).

Ajouter un gabarit

Le fichier _Layout.cshtml représente le gabarit de mise en page pour chaque page de l'application. Il se trouve dans le dossier Shared du dossier Views.

Ouvrez ce fichier et remplacez son contenu par :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
@Html.ActionLink("Home", "Index", "Home")
@Html.ActionLink("Movies", "Index", "Movies")
<li>@Html.ActionLink("À propos", "About", "Home")</li>
</ul> 
<section id="main">
@RenderBody()
<p>Copyright W3school 2012. Tous droits réservés.</p>
</section>
</body>
</html>

Assistants HTML

Dans le code ci-dessus, les assistants HTML sont utilisés pour modifier la sortie HTML :

@Url.Content() - Insérez le contenu URL ici.

@Html.ActionLink() - Insérez un lien HTML ici.

Nous expliquerons les assistants HTML dans un chapitre ultérieur de ce tutoriel.

Grammaire Razor

Dans le code ci-dessus, le code marqué en rouge est en C# avec des balises Razor.

@ViewBag.Title - Insérez le titre de la page ici.

@RenderBody() - Ici est présenté le contenu de la page.

Vous pouvez trouver nos Tutoriel RazorApprenez à écrire des balises Razor en C# et VB (Visual Basic).

Ajouter un style

La feuille de style de l'application est Site.css. Elle se trouve dans le dossier Content.

Ouvrez le fichier Site.css et remplacez son contenu par :

body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3; 
}
/* Style du menu ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a 
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/* Propriétés CSS3 */
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
} 
/* Styles de formulaire ------------------------------*/
fieldset
{
padding-left: 12px;
} 
label fieldset
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Styles de données ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td 
{
border:1px solid #c3c3c3;
padding:3px;
}

Fichier _ViewStart

Le fichier _ViewStart dans le dossier Shared (situé dans le dossier Views) contient le contenu suivant :

@{Layout = "~/Views/Shared/_Layout.cshtml";}

Ce code est ajouté automatiquement à toutes les vues affichées par l'application.

Si vous supprimez ce fichier, vous devez ajouter ce code à toutes les vues.

Vous apprendrez plus sur les vues dans les chapitres ultérieurs de ce tutoriel.