ASP.NET MVC - Stile und Layout


Um ASP.NET MVC zu lernen, werden wir eine Internetanwendung erstellen.

Teil 3: Hinzufügen von Stilen und einem einheitlichen Erscheinungsbild (Layout).

Layout hinzufügen

Die Datei _Layout.cshtml repräsentiert das Layout jeder Seite in der Anwendung. Sie befindet sich im Ordner Shared innerhalb des Ordners Views.

Öffnen Sie die Datei _Layout.cshtml und ersetzen Sie deren Inhalt durch:

<!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 EXAMPLE 2012. Alle Rechte vorbehalten.</p>
</section>
</body>
</html>

HTML-Helfer

Im obigen Code werden HTML-Helper verwendet, um die HTML-Ausgabe zu modifizieren:

@Url.Content() – URL-Inhalt wird hier eingefügt.

@Html.ActionLink() – HTML-Links werden hier eingefügt.

In späteren Kapiteln dieses Tutorials erfahren Sie mehr über HTML-Helper.

Razor-Syntax

Im obigen Code ist der rot markierte Code C# unter Verwendung von Razor-Markup.

@ViewBag.Title – Der Seitentitel wird hier eingefügt.

@RenderBody() – Der Seiteninhalt wird hier gerendert.

Sie können in unseremRazor-Tutorialmehr über Razor-Markup für C# und VB (Visual Basic) lernen.

Stile hinzufügen

Das Stylesheet der Anwendung ist Site.css und befindet sich im Content-Ordner.

Öffnen Sie die Datei Site.css und ersetzen Sie deren Inhalt durch:

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;
}
/* Menüstile ------------------------------*/
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 Eigenschaften*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Formularstile ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Datenstile ------------------------------*/
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;
}

_ViewStart-Datei

Die _ViewStart-Datei im Shared-Ordner (im Ordner Views befindlich) enthält den folgenden Inhalt:

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

Dieser Code wird automatisch zu allen von der Anwendung angezeigten Ansichten hinzugefügt.

Wenn Sie diese Datei löschen, müssen Sie diese Codezeile zu allen Ansichten hinzufügen.

In späteren Kapiteln dieses Tutorials erfahren Sie mehr über Ansichten.


Andere Erweiterungen