ASP.NET MVC e layout de página
A fim de aprender ASP.NET MVC, vamos construir um aplicativo de Internet.
Parte 3: Adição de estilos e aparência uniforme (layout).
Adicionar o layout
_Layout.cshtml File representa o esquema de aplicação de cada página. Ele está localizado na exibição de pasta pastas compartilhadas.
Abra o arquivo _Layout.cshtml, para substituir o conteúdo para:
<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>
Helper HTML
No código acima, Help HTML é usado para modificar a saída HTML:
@ Url.Content () - conteúdo URL será inserida aqui.
@ Html.ActionLink () - link HTML será inserido aqui.
Em um capítulo posterior deste tutorial, você vai aprender mais sobre o conhecimento auxiliar HTML.
navalha Sintaxe
No código acima, o código é marcado nos marcadores vermelhos usando Navalha C #.
@ ViewBag.Title - título da página será inserida aqui.
@RenderBody () - O conteúdo da página será apresentado aqui.
Você pode em nosso tutorial Navalha aprender sobre Navalha C # e VB (Visual Basic) da tag.
adicionando Estilo
folha de estilo de aplicação é Site.css, localizado na pasta de conteúdo.
Abra o arquivo Site.css, para substituir o conteúdo para:
{
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;
}
Arquivo _ViewStart
pasta compartilhada (localizado na pasta Vistas) no arquivo _ViewStart contém o seguinte:
Este código é automaticamente adicionado a todos os pontos de vista apresentados pela aplicação.
Se você excluir este arquivo, você deve adicionar esta linha de código para todas as vistas.
Nos próximos capítulos deste tutorial, você vai aprender mais sobre a vista.