Esta seção apresenta o layout de cada página no aplicativo ASP.NET MVC e como definir o estilo.
Para aprender ASP.NET MVC, construiremos uma aplicação para Internet.
Parte 3: Adicione estilo e uma aparência unificada (layout).
O arquivo _Layout.cshtml representa o layout de cada página da aplicação. Ele está localizado na pasta Compartilhada da pasta Visualizações.
Abra o arquivo _Layout.cshtml e substitua o conteúdo por:
<!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("Filmes", "Índice", "Filmes") </li> <li>@Html.ActionLink("Sobre", "Sobre", "Home") </li> </ul> <section id="main"> @RenderBody() <p>Direitos autorais W3CSchool 2012. Todos os direitos reservados.</p> </section> </body> </html>No código acima, o auxiliar HTML é usado para modificar a saída HTML:
@Url.Content() - o conteúdo da URL será inserido aqui.
@Html.ActionLink() - o link HTML será inserido aqui.
Você aprenderá mais sobre auxiliares HTML em capítulos posteriores deste tutorial.
No código acima, o código marcado em vermelho é C# usando tags Razor.
@ViewBag.Title – O título da página será inserido aqui.
@RenderBody() – O conteúdo da página será renderizado aqui.
Você pode aprender sobre a marcação do Razor para C# e VB (Visual Basic) em nossos tutoriais do Razor.
A folha de estilo da aplicação é Site.css, localizada na pasta Content.
Abra o arquivo Site.css e substitua o conteúdo por:
corpo {fonte: "Trebuchet MS", Verdana, sans-serif; cor de fundo: #5c87b2; cor: #696969; } #main { preenchimento: 20px; cor de fundo: #ffffff; raio da borda: 0 4px 4px 4px } a { color: #034af3 } /* Estilos de menu --------------------------------- -*/ ul #menu { preenchimento: 0px; posição: relativa; margem: 0; ul#menu li { display: inline; ul#menu li a { cor de fundo: #e8eef4; decoração de texto: nenhum; altura da linha: 2.8em; /*Propriedades CSS3*/ raio da borda: 4px 4px 0 0 } ul#menu li a:hover { background-color: #ffffff } /* Estilos de formulários - -----------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block: 4px; ; input[type="text"], input[type="password"] { largura: 300px; } input[type="submit"] { preenchimento: 4px } /* Estilos de dados --------- ---------------------*/ table.data { background-color:#ffffff; border:1px solid #c3c3c3; %; } table.data th { cor de fundo:#e8eef4; borda:1px sólido #c3c3c3; preenchimento:3px;O arquivo _ViewStart na pasta Compartilhada (localizada na pasta Visualizações) contém o seguinte conteúdo:
@{Layout = "~/Views/Shared/_Layout.cshtml";}Este código é adicionado automaticamente a todas as visualizações exibidas pelo aplicativo.
Se você excluir esse arquivo, deverá adicionar esta linha de código a todas as visualizações.
Você aprenderá mais sobre visualizações em capítulos posteriores deste tutorial.
A visualização ViewStart geralmente existe diretamente sob a visualização Views. Claro, também pode haver páginas de visualização do ViewStart em outras pastas (desde que esta pasta esteja na pasta Visualizações).