Para saber ASP.NET MVC, estamos construindo uma aplicação Internet.
Parte III: Estilos Adicionando e uma aparência consistente (Layout) .
Adicionando um Layout
O arquivo _Layout.cshtml representam o layout de cada página no aplicativo. Ele está localizado na pasta compartilhada dentro da pasta Views.
Abra o arquivo e trocar o conteúdo com isto:
<!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>Helpers HTML
No código acima, auxiliares HTML são usados para modificar a saída HTML:
@url. Content() - conteúdo URL será inserida aqui.
@Html. ActionLink() - link HTML será inserido aqui.
Você vai aprender mais sobre métodos de ajuda HTML em um capítulo posterior deste tutorial.
Razor Sintaxe
No código acima, o código marcado a vermelho são C # utilizando Razor de marcação.
@ ViewBag.Title - O título da página será inserida aqui.
@ RenderBody() - O conteúdo da página será processado aqui.
Você pode aprender sobre Razor marcação para C # e VB (Visual Basic) em nossa Razor tutorial .
adicionando Styles
A folha de estilo para a aplicação é chamado Site.css. Ele está localizado na pasta de conteúdo.
Abra o arquivo Site.css e trocar o conteúdo com isto:
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;
}
O Arquivo _ViewStart
O arquivo _ViewStart na pasta compartilhada (inside the Views folder) contém o seguinte conteúdo:
@{Layout = "~/Views/Shared/_Layout.cshtml";}Este código é automaticamente adicionado a todos os pontos de vista apresentados pela aplicação.
Se você remover esse arquivo, você deve adicionar esta linha para todos os pontos de vista.
Você vai aprender mais sobre pontos de vista em um capítulo posterior deste tutorial.