Pentru a afla ASP.NET MVC, suntem Construirea unei aplicații pe Internet.
Partea a III -a : Stiluri Adăugarea și un aspect consecvent (Layout) .
Adăugarea unui aspect
Fișierul _Layout.cshtml reprezintă structura fiecărei pagini în cerere. Acesta este situat în folderul partajat din dosarul Vizualizări.
Deschideți fișierul și schimba conținutul cu acest lucru:
<!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 Helpers
În codul de mai sus, ajutoarele HTML sunt folosite pentru a modifica ieșire HTML:
@url. Content() - conținut de adresă URL va fi introdus aici.
@Html. ActionLink() - link - ul HTML va fi introdus aici.
Vei afla mai multe despre ajutoare HTML într-un capitol ulterior al acestui tutorial.
Razor Sintaxă
În codul de mai sus, codul marcat roșu sunt C # folosind Razor marcare.
@ ViewBag.Title - va fi inserat Titlul paginii aici.
@ RenderBody() - Conținutul paginii va fi redat aici.
Puteți afla mai multe despre Razor de (Visual Basic) Razor Razor de marcare pentru ambii C # și VB (Visual Basic) în nostru Razor tutorial .
Adăugarea Stiluri
Foaia de stil pentru aplicația se numește Site.css. Acesta este situat în dosarul de conținut.
Deschideți fișierul Site.css și swap conținutul cu acest lucru:
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;
}
Fișierul _ViewStart
Fișierul _ViewStart în dosarul comun (inside the Views folder) conține următorul conținut:
@{Layout = "~/Views/Shared/_Layout.cshtml";}Acest cod este adăugat automat la toate punctele de vedere afișate de aplicație.
Dacă eliminați acest fișier, trebuie să adăugați această linie la toate punctele de vedere.
Vei afla mai multe despre punctele de vedere într-un capitol ulterior al acestui tutorial.