Um zu erfahren, ASP.NET MVC, bauen wir eine Internet-Anwendung.
Teil III: Hinzufügen von Styles und ein einheitliches Erscheinungsbild (Layout) .
Hinzufügen eines Layouts
Die Datei _Layout.cshtml das Layout jeder Seite in der Anwendung darstellen. Es wird in der gemeinsam genutzten Ordner innerhalb des Views Ordner.
Öffnen Sie die Datei und tauschen den Inhalt mit diesem:
<!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-Helfer
In dem obigen Code, werden HTML-Helfer verwenden HTML-Ausgabe zu ändern:
@Url. Content() - URL - Inhalt wird hier eingefügt.
@Html. ActionLink() - HTML - Link wird hier eingefügt.
Sie werden mehr über HTML-Helfer in einem späteren Kapitel dieses Tutorials lernen.
Razor - Syntax
In dem obigen Code, sind der Code rot markiert mit C # Razor Markup.
@ ViewBag.Title - Der Seitentitel hier eingefügt wird.
@ RenderBody() - Der Seiteninhalt wird hier wiedergegeben werden.
Sie erfahren Näheres zu Razor für C # und VB - Markup (Visual Basic) in unserem Razor Tutorial .
Hinzufügen von Styles
Das Stylesheet für die Anwendung ist Site.css genannt. Es wird im Content-Ordner.
Öffnen Sie die Datei Site.css und tauschen den Inhalt mit diesem:
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;
}
Die _ViewStart Datei
Die _ViewStart Datei im freigegebenen Ordner (inside the Views folder) enthält den folgenden Inhalt:
@{Layout = "~/Views/Shared/_Layout.cshtml";}Dieser Code wird automatisch hinzugefügt, um alle Ansichten von der Anwendung angezeigt.
Wenn Sie diese Datei entfernen, müssen Sie die folgende Zeile in allen Ansichten hinzuzufügen.
Sie werden mehr über Ansichten in einem späteren Kapitel dieses Tutorials lernen.