Figura 3.11: Criando uma nova View
Agora, na janela onde informaremos os detalhes acerca de nossa nova view, uti-
lizaremos o nome _ViewStart. Ainda nesta janela, desmarque também a opção
Use a layout or Master Page, e clique em Ok.
Note que, novamente, a Convenção sobre Configuração nos ajuda neste caso. Por
quê? Uma view chamada _ViewStart será executada no início da renderização
de todas as views da aplicação.
Voltando à configuração, vamos configurar a
propriedade Layout na nossa _ViewStart, conforme apresenta a listagem 2.
Listagem 3.2 - Propriedade que define a master page:
@{
33
3.4. Criando o layout da aplicação
Casa do Código
Layout = "~/Views/Layout.cshtml";
}
Podemos voltar agora e definir a estrutura padrão de layout da aplicação
no arquivo Layout.cshtml.
Já utilizamos um pouco de Razor na criação da
_ViewStart e agora iremos avançar um pouco mais. A listagem 3 apresenta o
layout padrão da nossa aplicação.
Listagem 3.3 - Layout padrão da aplicação:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="viewport" content="width=device-width" />
<title>Cade meu medico? - @ViewBag.Title</title>
<link href="@Url.Content("~/Content/bootstrap/bootstrap.min.css")"
rel="stylesheet" />
<style>
body {
padding-top: 60px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cade meu medico?</a>
</div>
<div
class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li id="menuPaises">
@Html.ActionLink("Países", "Index", "Paises")
</li>
</ul>
</div>
</div>
</div>
<div class="container">
34
Casa do Código
Capítulo 3. Projetando a aplicação Cadê meu médico?
@RenderBody()
</div>
<script src="@Url.Content("~/Scripts/jquery-2.0.2.min.js")">
</script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")">
</script>
@RenderSection("script", required: false);
</body>
</html>
Além de básico, o HTML de nossa estrutura contém a referência às bibliotecas
de CSS e JavaScript que utilizaremos na aplicação. Além disso, você deve ter notado que em alguns pontos utilizamos o caractere "@. Pois saiba que é exatamente nestes pontos que estamos utilizando o ASP.NET Razor.
Outro aspecto a ser notado reside na definição do título das páginas de
nossa aplicação.
Estamos concatenando o texto Cadê meu médico?
com
"@ViewBag.Title". Como você deve se lembrar, quando personalizamos a mensagem da nossa primeira aplicação, utilizamos a propriedade ViewBag para enviar nossa mensagem para a view. Agora estamos utilizando novamente a ViewBag, mas
para mostrar nas páginas os valores predefinidos.
O Razor possui uma grande quantidade de métodos que auxiliam os desenvol-
vedores em grande escala no processo de construção de aplicações. Um deles é o
"@Url.Content(), que converte um diretório virtual relativo para um diretório absoluto na aplicação. Através disso, podemos vincular nossos arquivos .css e .js (por exemplo) sem nos preocuparmos com a estrutura de publicação da aplicação no IIS
(Internet Information Services).
Lembre-se que todas as paginas irão utilizar o layout padrão, portanto, não precisamos repetir alguns códigos comuns, mas é preciso definir em nosso layout onde o código das páginas será renderizado em nosso layout padrão. É isso que estamos fazendo ao utilizarmos o método "@RenderBody() do ASP.NET Razor. Quando uma view for renderizada, seu código será adicionado naquele ponto da página HTML.
Um outro truque muito interessante do Razor são as Sections. Através delas,
podemos definir seções onde determinados códigos serão renderizados. As futuras views de nossa aplicação possuirão código JavaScript próprio, e eles precisam ser renderizados após a definição das bibliotecas JavaScript que estamos utilizando. Desta forma, com o @RenderSection("script", required:false), criamos uma
35
3.4. Criando o layout da aplicação
Casa do Código
seção onde os scripts serão renderizados. Como nem toda página possuirá algum
script, essa seção não é obrigatória e por isso, utilizamos o "required:false.
Layout padrão criado, é hora então de testar o mesmo com uma página de teste
em nossa aplicação. Na Solution Explorer, clique com o botão direito na pasta Controllers e navegue até as opções Add > Controller. A figura 3.12 ilustra este processo.
Figura 3.12: Adicionando um novo Controller
Na janela que será exibida a seguir, defina o nome do controller como Teste-
LayoutController. Lembre-se, todo controller deve possuir o sufixo Controller (mais uma vez o CoC atuando). A figura 3.13 representa isso.
Figura 3.13: Adicionando um novo Controller
Após executarmos a criação do controller, o Visual Studio abrirá o código do
36
Casa do Código
Capítulo 3. Projetando a aplicação Cadê meu médico?
arquivo. Evidentemente, ele deverá se parecer com o código da listagem 4.
Listagem 3.4 - Controller do teste do layout: