In diesem Abschnitt wird das Layout jeder Seite in der ASP.NET MVC-Anwendung vorgestellt und wie der Stil festgelegt wird.
Um ASP.NET MVC zu lernen, erstellen wir eine Internetanwendung.
Teil 3: Stil und ein einheitliches Erscheinungsbild (Layout) hinzufügen.
Die Datei _Layout.cshtml stellt das Layout jeder Seite in der Anwendung dar. Es befindet sich im Ordner „Freigegeben“ im Ordner „Ansichten“.
Öffnen Sie die Datei _Layout.cshtml und ersetzen Sie den 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("Filme", "Index", "Filme") </li> <li>@Html.ActionLink("About", "About", "Home") </li> </ul> <section id="main"> @RenderBody() <p>Copyright W3CSchool 2012. Alle Rechte vorbehalten.</p> </section> </body> </html>Im obigen Code wird der HTML-Helfer verwendet, um die HTML-Ausgabe zu ändern:
@Url.Content() – URL-Inhalt wird hier eingefügt.
@Html.ActionLink() – HTML-Link wird hier eingefügt.
In späteren Kapiteln dieses Tutorials erfahren Sie mehr über HTML-Helfer.
Im obigen Code handelt es sich bei dem rot markierten Code um C# mit Razor-Tags.
@ViewBag.Title – Der Seitentitel wird hier eingefügt.
@RenderBody() – Der Seiteninhalt wird hier gerendert.
In unseren Razor-Tutorials erfahren Sie mehr über Razor-Markup für C# und VB (Visual Basic).
Das Stylesheet der Anwendung ist Site.css und befindet sich im Ordner „Content“.
Öffnen Sie die Datei Site.css und ersetzen Sie den Inhalt durch:
body { Schriftart: „Trebuchet MS“, Verdana, serifenlos; Hintergrundfarbe: #696969; } #main { padding: 20px; Hintergrundfarbe: #ffffff; 4px 4px 4px; } a { color: #034af3 } /* Menüstile --------------------------------- -*/ ul #menu { padding: 0px; position: relative; margin: 0; ul#menu li { display: inline; text-decoration: none; line-height: 2.8em; /*CSS3-Eigenschaften*/ border-radius: 4px 4px 0 0; ul#menu li a:hover { background-color: #ffffff; -------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; ; } input[type="text"], input[type="password"] { width: 300px } input[type="submit"] { padding: 4px } /* Datenstile --------- ---------------------*/ table.data { background-color:#ffffff; border:1px solid #c3c3c3; %; } table.data th { Hintergrundfarbe:#e8eef4; border:1px solid #c3c3c3; padding:3px } table.data td { border:1px solid #c3c3c3;Die Datei „_ViewStart“ im Ordner „Shared“ (im Ordner „Views“) 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 allen Ansichten hinzufügen.
In späteren Kapiteln dieses Tutorials erfahren Sie mehr über Ansichten.
Die Ansicht „ViewStart“ befindet sich im Allgemeinen direkt unter der Ansicht „Ansichten“. Natürlich können ViewStart-Ansichtsseiten auch unter anderen Ordnern vorhanden sein (vorausgesetzt, dieser Ordner befindet sich unter dem Ordner „Ansichten“).