ASP.NET MVC - Stile und Layout

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

Teil 3:Fügen Sie Stile und einheitliches Erscheinungsbild (Layout) hinzu.

Layout hinzufügen

Datei _Layout.cshtml stellt die Layout für jede Seite der Anwendung dar. Sie befindet sich im Ordner Shared im Verzeichnis Views.

Öffnen Sie diese Datei und ersetzen Sie ihren 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("Startseite", "Index", "Startseite")</li>
<li>@Html.ActionLink("Filme", "Index", "Filme")</li>
<li>@Html.ActionLink("Über", "Über", "Home")</li>
</ul> 
<section id="main">
@RenderBody()
<p>Copyright W3school 2012. Alle Rechte vorbehalten.</p>
</section>
</body>
</html>

HTML-Helfer

Im obigen Code werden HTML-Helfer verwendet, um die HTML-Ausgabe zu ändern:

@Url.Content() - Hier wird der URL-Inhalt eingefügt.

@Html.ActionLink() - Hier wird der HTML-Link eingefügt.

Wir werden den HTML-Helfer in einem späteren Kapitel dieses Tutorials erklären.

Razor-Syntax

Im obigen Code ist der rote markierte Code mit Razor-Syntax geschriebener C#.

@ViewBag.Title - Hier wird der Titel der Seite eingefügt.

@RenderBody() - Hier wird der Inhalt der Seite dargestellt.

Sie können unsere Razor-TutorialLernen Sie C# und VB (Visual Basic) geschriebene Razor-Syntax.

Stil hinzufügen

Die Stylesheet der Anwendung ist Site.css. Sie befindet sich im Content-Ordner.

Öffnen Sie die Datei Site.css und ersetzen Sie ihren 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; 
}
/* Menu Style ------------------------------*/
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;
} 
/* Formularstil ------------------------------*/
fieldset
{
padding-left: 12px;
} 
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Datenstil ------------------------------*/
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

Der _ViewStart-Datei im Shared-Verzeichnis (im Views-Verzeichnis) 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 diesen Code allen Ansichten hinzufügen.

Sie werden in den späteren Kapiteln dieses Tutorials mehr über Ansichten lernen.