Cette section présente la mise en page de chaque page de l'application ASP.NET MVC et comment définir le style.
Pour apprendre ASP.NET MVC, nous allons créer une application Internet.
Partie 3 : Ajouter du style et un look unifié (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>
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.
Dans le code ci-dessus, le code marqué en rouge est C# utilisant les balises 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.
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 :
corps { police : "Trebuchet MS", Verdana, sans-serif ; couleur d'arrière-plan : #5c87b2 ; couleur : #696969 ; } h1 { bordure inférieure : 3px solid #cc9900 ; } #main { padding : 20px ; couleur d'arrière-plan : #ffffff ; 4px 4px 4px; } a { couleur : #034af3 } /* Styles de menu --------------------------------- -*/ ul #menu { padding : 0px ; position : relative ; margin : 0 ; } ul#menu li { display : inline ; } ul#menu li a { background-color : #e8eef4 ; décoration de texte : aucun ; hauteur de ligne : 2,8em ; /*Propriétés CSS3*/ border-radius : 4px 4px 0 0 ; } ul#menu li a:hover { background-color : #ffffff } /* Styles de formulaires - -----------------------------*/ champset { padding-left : 12px ; } étiquette du jeu de champs { display : blocage : 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; %; } table.data th { background-color:#e8eef4; bordure:1px solide #c3c3c3; remplissage:3px; } table.data td { bordure:1px solide #c3c3c3;
Le fichier _ViewStart dans le dossier Partagé (situé dans le dossier Views) 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.
La vue ViewStart existe généralement directement sous la vue Vues. Bien entendu, il peut également y avoir des pages d'affichage ViewStart sous d'autres dossiers (à condition que ce dossier se trouve sous le dossier Views).