ASP.NET MVC und Seitenlayout
Um ASP.NET MVC zu lernen, werden wir eine Internet-Anwendung zu bauen.
Teil 3: Hinzufügen von Stilen und einheitliches Erscheinungsbild (Layout).
In Layout
_Layout.cshtml Datei stellt die Anwendung das Layout jeder Seite. Es wird in Ordner Ansichten Gemeinsame Ordner befindet.
Öffnen Sie die Datei _Layout.cshtml, zu ersetzen, um den Inhalt:
<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 W3CSchool 2012. All Rights Reserved.</p>
</section>
</body>
</html>
HTML Helper
In dem obigen Code wird der HTML-Hilfe zu ändern, um die HTML-Ausgabe verwendet:
@ Url.Content () - URL-Inhalt wird hier eingefügt.
@ Html.ActionLink () - HTML-Link wird hier eingefügt.
In einem späteren Kapitel dieses Tutorial werden Sie mehr über HTML-Hilfs Wissen lernen.
Razor-Syntax
mit Razor C # In dem obigen Code, wird der Code in den roten Markierungen gekennzeichnet.
@ ViewBag.Title - Seitentitel wird hier eingefügt.
@RenderBody () - Seite Inhalt werden hier präsentiert.
Sie können in unserem Razor Tutorial über Razor C # und VB (Visual Basic) von dem Tag lernen.
Stylen
Anwendung Stylesheet ist Site.css, in Content-Ordner.
Öffnen Sie die Datei Site.css, zu ersetzen, um den Inhalt:
{
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;
}
_ViewStart Datei
Gemeinsam genutzte Ordner (befindet sich im Ordner Sichten) in _ViewStart Datei enthält folgende Komponenten:
Dieser Code wird automatisch hinzugefügt, um alle Ansichten von der Anwendung angezeigt.
Wenn Sie diese Datei löschen, müssen Sie diese Codezeile zu allen Ansichten hinzuzufügen.
In späteren Kapiteln dieses Tutorial werden Sie mehr über die Aussicht zu lernen.