Disposition MVC

ASP.NET MVC - Style et mise en page

Pour apprendre ASP.NET MVC, nous allons créer une application Internet.

Partie 3 : Ajouter du style et un look unifié (mise en page).

Ajouter une mise en page

Le fichier _Layout.cshtml représente la mise en page de chaque page de l'application. Il se trouve dans le dossier Partagé du dossier Vues.

Ouvrez le fichier _Layout.cshtml et remplacez le 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">
< li>@Html.ActionLink("Accueil", "Index", "Accueil")</li>
<li>@Html.ActionLink("Films", "Index", "Films")</li>
<li>@Html.ActionLink("À propos", "À propos", "Accueil")</li>
</ul>
<section id="main">
@RenderBody()
< ;p>Copyright W3CSchool 2012. Tous droits réservés.</p>
</section>
</body>
</html>

Helper HTML

Dans le code ci-dessus, l'assistant HTML est utilisé pour modifier la sortie HTML :

@Url.Content() - Le contenu de l'URL sera inséré ici.

@Html.ActionLink() - Le lien HTML sera inséré ici.

Vous en apprendrez davantage sur les assistants HTML dans les chapitres suivants de ce didacticiel.

Syntaxe Razor

Dans le code ci-dessus, le code marqué en rouge est C# utilisant le balisage Razor.

@ViewBag.Title - Le titre de la page sera inséré ici.

@RenderBody() - Le contenu de la page sera rendu ici.

Vous pouvez en apprendre davantage sur le balisage Razor pour C# et VB (Visual Basic) dans nos didacticiels Razor.

Ajouter des styles

La feuille de style de l'application est Site.css, située dans le dossier Contenu.

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

body
{
police : "Trebuchet MS", Verdana, sans-serif;
couleur d'arrière-plan : #5c87b2;
couleur : #696969;
}
h1
{
bordure inférieure : 3px solide #cc9900;
police : Georgia, serif;
couleur : #996600;
}
#main
{
padding : 20px;
couleur de fond : #ffffff;
rayon de bordure : 0 4px 4px 4px;
}
a
{
couleur : #034af3 ;
}
/* Styles de menu ----------------------------------*/
ul#menu
{
rembourrage : 0px;
position: relative;
marge: 0;
}
ul#menu li
{
affichage: inline;
}
ul#menu li a
{
background-color : #e8eef4;
padding : 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 propriétés*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Styles de formulaires ----------------------------------*/
fieldset
{
padding-left : 12px;
}
étiquette du jeu de champs
{
display: block;
padding: 4px;
}
input[type="text"], input[type= "mot de passe"]
{
largeur : 300px;
}
input[type="submit"]
{
remplissage : 4px;
}
/* Styles de données ----------------------------------*/
table.data
{
fond -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 Partagé (situé dans le dossier Vues) contient le contenu suivant :

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

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

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

Vous en apprendrez davantage sur les vues dans les chapitres suivants de ce didacticiel.