Pour en savoir ASP.NET MVC, nous construisons une application Internet.
Partie III: Ajout de styles et un aspect cohérent (Layout) en (Layout) .
Ajout d'une mise en page
Le fichier _Layout.cshtml représente la mise en page de chaque page dans l'application. Il est situé dans le dossier partagé dans le dossier Vues.
Ouvrez le fichier et échanger le contenu avec ceci:
<!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("Home", "Index", "Home") </li>
<li> @Html.ActionLink("Movies",
"Index", "Movies") </li>
<li> @Html.ActionLink("About", "About",
"Home") </li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright w3ii 2012. All Rights Reserved.</p>
</section>
</body>
</html>HTML Helpers
Dans le code ci-dessus, les aides HTML sont utilisés pour modifier la sortie HTML:
@url. Content() - contenu URL sera inséré ici.
@Html. ActionLink() - lien HTML sera inséré ici.
Vous en apprendrez plus sur les aides HTML dans un chapitre de ce tutoriel.
Razor Syntaxe
Dans le code ci - dessus, le code marqué en rouge sont C # en utilisant Razor balisage.
@ 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 Razor balisage pour C # et VB (Visual Basic) dans notre Razor tutoriel .
Ajout de styles
La feuille de style pour l'application est appelée Site.css. Il est situé dans le dossier Contenu.
Ouvrez le fichier Site.css et échanger le contenu avec ceci:
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;
}
/* Menu Styles
------------------------------*/
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;
/*CSS3
properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Forms Styles
------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Data Styles
------------------------------*/
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;
}
Le fichier _ViewStart
Le fichier _ViewStart dans le dossier partagé (inside the Views folder) 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 à toutes les vues.
Vous en apprendrez plus sur les vues dans un chapitre de ce tutoriel.