RSS feed
ASP.NET MVC 3: Layouts e Seções com o Razor - ScottGu's Blog em Português

ASP.NET MVC 3: Layouts e Seções com o Razor


Este é outro post de uma série de posts que estou escrevendo, que cobrem alguns dos novos recursos da ASP.NET MVC 3:

No post de hoje eu vou entrar em mais detalhes sobre como páginas de Layout funcionam com o Razor. Em particular, eu cobrirei como você pode ter múltiplas "seções", não-contíguas, substituíveis dentro de um arquivo de layout - permitindo que as visões baseadas em layouts, opcionalmente, "preencham" estas diferentes seções no tempo de execução. A sintaxe do Razor para fazer isso é limpa e concisa.

Eu também mostrarei como você pode verificar dinamicamente no tempo de execução se uma seção de layout em especial foi definida, e como você pode fornecer conteúdo alternativo (ou mesmo um layout alternativo) no caso de uma seção não ter sido especificada dentro de um modelo de visão. Isso fornece uma maneira poderosa e fácil para personalizar a interface do usuário (UI) do seu site e torná-la limpa e DRY a partir de uma perspectiva de implementação.

O que são Layouts?

Você geralmente deseja manter uma aparência consistente em todas as páginas dentro do seu web-site/applicação. A ASP.NET 2.0 introduziu o conceito de "páginas-mestre", que ajudam a ativar esse recurso quando páginas .aspx ou modelos baseados em .aspx são usados. O Razor também suporta esse conceito com um recurso chamado "layouts" - que permite que você defina um template/modelo comum para o site, e então herde sua aparência em todas as visões/páginas do seu site.

Eu já escrevi sobre como funcionam os arquivos de layout com o Razor no meu post ASP.NET MVC 3: Layouts com Razor. O post de hoje vai mais fundo e detalha como você pode definir múltiplas regiões, não-contíguas, substituíveis em um arquivo de layout que você pode, opcionalmente, "preencher" no tempo de execução.

Cenário de Layout de um Site

Vejamos como podemos implementar um cenário comum de layout de um site com a ASP.NET MVC 3 e o Razor. Especificamente, vamos implementar alguma UI onde temos um cabeçalho e rodapé comuns em todas as nossas páginas. Também vamos adicionar uma seção "sidebar" (barra lateral) à direita do nosso layout comum do site. 

Em algumas páginas, vamos personalizar a barra lateral para incluir conteúdos específicos para a página que estamos visitando:

imagem

E em outras páginas (que não tenham conteúdo personalizado para a barra lateral), vamos recorrer a um "conteúdo padrão" para a barra lateral:

imagem

Nós vamos usar a ASP.NET MVC 3 e o Razor para permitir esta personalização de uma forma agradável e limpa. 

A seguir estão algumas instruções passo-a-passo sobre como criar o site acima com a ASP.NET MVC 3 e o Razor.

Parte 1: Criar um Novo Projeto com um Layout para a seção "Body"

Vamos começar usando o comando do menu "File->New Project" (Arquivo->Novo Projeto) dentro do Visual Studio para criar um novo projeto ASP.NET MVC 3. Nós vamos criar o novo projeto usando a opção de modelo "Empty" (Vazio):

imagem

Isso irá criar um novo projeto que não tem controladores padrão:

imagem

Criando um HomeController

Nós, então, clicaremos com o botão direito do mouse na pasta "Controllers" do nosso projeto recém-criado e escolheremos o comando do menu de contexto "Add-> Controller" (Adicionar->Controlador). Isso fará com que a janela de diálogo "Add Controller" (Adicionar Controlador) apareça:

imagem

Nós vamos nomear o novo controlador que criamos com "HomeController". Quando clicamos no botão "Add", o Visual Studio irá adicionar uma classe HomeController em nosso projeto com um método de ação "Index" padrão que retorna uma visão:

imagem

Nós não precisaremos escrever qualquer lógica no controlador para implementarmos este exemplo - então vamos deixar o código padrão como está. 

Criando um Modelo de Visão

Nosso próximo passo será implementar o modelo de visão associado ao método de ação Index do controlador HomeController. Para implementar o modelo de visão, vamos clicar com o botão direito do mouse no método "HomeController.Index()" e selecionaremos o comando "Add View" (Adicionar Visão) para criar um modelo de visão para a nossa home page:

imagem

Isso fará com que a janela de diálogo "Add View" (Adicionar Visão) apareça dentro do Visual Studio. 

imagem

Nós não precisamos alterar nenhuma das configurações padrão na janela de diálogo acima (o nome do modelo de visão foi preenchido automaticamente com Index porque invocamos o comando do menu de contexto "Add View" dentro do método Index). 

Quando clicamos no botão "Add" na janela de diálogo, um modelo de visão do Razor chamado "Index.cshtml" será adicionado na pasta \Views\Home\ dentro do nosso projeto. Vamos adicionar algum conteúdo padrão simples e estático nele:

imagem

Observe acima que não temos uma seção <html> ou <body> definida dentro do nosso modelo de visão. Isto é porque nós vamos contar com um modelo de layout para suprir esses elementos e o usaremos para definir o layout e estrutura comuns para o nosso site (garantindo que ele seja consistente em todas as páginas e URLs dentro do site). 

Personalizando/Customizando o nosso Arquivo de Layout

Vamos abrir e personalizar o arquivo padrão "_Layout.cshtml" que foi adicionado automaticamente na pasta \Views\Shared quando criamos o nosso novo projeto:

imagem

O arquivo de layout padrão (acima) é bastante básico e simplesmente exibe um título (se especificado no Controlador ou no modelo de Visão) e adiciona links para uma folha de estilo CSS e para a biblioteca jQuery. A chamada para o método "RenderBody()" indica onde o conteúdo do corpo (body) principal do nosso arquivo Index.cshtml será incorporado na saída enviada ao navegador.

Vamos modificar o modelo de layout para adicionar um cabeçalho, rodapé e barra lateral comum para o site:

imagem

Vamos então editar o arquivo "Site.css" dentro da pasta\Content do nosso projeto para adicionar 4 regras de CSS nele:

imagem

E agora, quando executamos o projeto e acessamos a URL da home page "/" do nosso projeto, veremos uma página como a mostrada a seguir:

imagem

Observe como o conteúdo da modelo de visão do método de ação Index do HomeController e o modelo de Layout Compartilhado do site foram unidos em uma única resposta HTML. 

A seguir está o código HTML enviado do servidor:

imagem

Parte 2: Adicionando uma Seção "sidebar" (Barra lateral)

Nosso site tem até agora um modelo de layout que tem apenas uma "seção" - a qual chamamos de seção principal "body" (corpo) da resposta. 

O Razor também suporta a capacidade de adicionar "named sections" (seções nomeadas) em modelos de layout. Essas seções podem ser definidas em qualquer parte do arquivo de layout (inclusive dentro da seção <head> da página HTML), e permitem que você gere conteúdo dinâmico em múltiplas regiões, não-contíguas da resposta final.

Definindo a seção "Sidebar" em nosso Layout

Vamos atualizar o nosso modelo de layout para definir uma seção de conteúdo adicional "Sidebar" que será renderizada/mostrada dentro da região <div id="sidebar"> presente em nosso código HTML. Podemos fazer isso chamando o método de ajuda RenderSection(string sectionName, bool required) dentro do nosso arquivo Layout.cshtml igual ao mostrado a seguir:

  imagem

O primeiro parâmetro para o método de ajuda "RenderSection()" especifica o nome da seção que queremos mostrar naquele local do modelo de layout. O segundo parâmetro é opcional, e nos permite definir se a seção que estamos mostrando é necessária ou não. Se a seção for "required" (necessária), o Razor lançará um erro em tempo de execução se aquela seção não estiver implementada dentro de um modelo de visão que é baseado no arquivo de layout (o que pode tornar mais fácil rastrear erros de conteúdo). Se uma seção não for exigida, então a sua presença dentro de um modelo de visão é opcional, e o código do método RenderSection() acima não mostrará nada no tempo de execução, se a seção não estiver definida.

Agora que fizemos as alterações acima no nosso arquivo de layout, vamos atualizar a página no nosso browser para vermos a aparência atual da nossa home page:

imagem

Observe como atualmente não temos nenhum conteúdo dentro do nosso <div> SideBar - isto se deve ao fato de o modelo de visão Index.cshtml ainda não implementar a nossa nova seção "sidebar".

Implementando a Seção "Sidebar" no nosso Modelo de Visão

Vamos mudar a nossa home-page para que ela tenha uma seção SideBar que mostra algum conteúdo personalizado. Podemos fazer isso abrindo o modelo de visão Index.cshtml, e acrescentando um nova seção "SiderBar" nele. Nós vamos fazer isso usando a sintaxe do Razor @section NomeDaSecao { }:

imagem

Poderíamos ter colocado nossa seção SideBar @section em qualquer lugar dentro do modelo de visão. Eu acho que o código parece ser mais limpo quando é definido na parte superior ou inferior do arquivo - mas isso é simplesmente preferência pessoal. 

Você pode incluir qualquer conteúdo ou código que você queira dentro de declarações @section. Observe acima como eu tenho um trecho de código C# que mostra a hora atual na parte inferior da seção SideBar. Eu poderia ter escrito também algum código que usasse métodos de ajuda HTML/AJAX da ASP.NET MVC ou que acessasse quaisquer objetos fortemente tipados do modelo passados para o modelo de visão Index.cshtml.

Agora que fizemos as alterações acima no modelo de visão, quando atualizarmos a página no browser novamente, veremos que o nosso conteúdo da barra lateral (SideBar) - que é específico para a página inicial do nosso site - está agora incluído na resposta da página enviada de volta para o cliente/usuário a partir do servidor:

imagem

O conteúdo da seção SideBar foi inserido/unido no local apropriado da resposta da página HTML:

imagem

Parte 3: Detectando Condicionalmente se uma Seção de Layout Foi Implementada

O Razor fornece a capacidade para você condicionalmente verificar (a partir de dentro de um arquivo de layout) se uma seção foi definida dentro de um modelo de visão, e te permite gerar um código de resposta alternativo, caso a seção não tenha sido definida. Isso fornece uma maneira conveniente para especificar uma interface de usuário UI padrão para seções de layout opcionais. 

Vamos modificar nosso arquivo de layout para tirarmos proveito dessa capacidade. A seguir nós estamos condicionalmente verificando se a seção "Sidebar" foi definida sem que o modelo de visão seja mostrado (usando o método IsSectionDefined()), e se ela estiver definida nós mostramos a seção. Se a seção não foi definida, então, agora nós mostramos algum conteúdo padrão na barra lateral: 

imagem

Nota: Você tem que ter certeza de prefixar as chamadas para o método RenderSection() com um caractere @ - o que informará o Razor para que ele execute o HelperResult que o método retorna e una/insira o conteúdo da seção no local apropriado do código de saída HTML. Observe como escrevi @RenderSection ("Sidebar") acima, em vez de apenas RenderSection("Sidebar"). Caso contrário, você obterá um erro.

Acima, estamos simplesmente mostrando uma string em linha estática (<p> Default SideBar Content </ p>) se a seção não estiver definida. Um site do mundo real mais provavelmente refatoraria este conteúdo padrão para que ele fosse armazenado dentro de um modelo parcial separado (o qual mostraríamos usando o método de ajuda Html.RenderPartial() dentro do bloco else) ou, alternativamente, utilizando o método de ajuda Html.Action() dentro do bloco else para encapsular tanto a lógica quanto a renderização da barra lateral padrão.

Quando atualizamos a página da nossa home-page no browser, ainda veremos o mesmo conteúdo da barra lateral que tínhamos antes. Isto é porque nós implementamos a seção SideBar dentro do nosso modelo de visão Index.cshtml (e assim nosso Layout mostrou a mesma):

imagem

Vamos agora implementar uma URL "/Home/About" URL para o nosso site, adicionando um novo método de ação "About" no nosso controlador HomeController:

imagem

O método de ação About() acima simplesmente mostra uma visão para o cliente/usuário quando é chamado. Podemos implementar o modelo de visão correspondente a esta ação clicando com o botão direito do mouse dentro do método "About()" e usando a opção do menu de comando "Add View" (como antes) para criar um novo modelo de visão About.cshtml. 

Nós vamos implementar o modelo de visão About.cshtml como a seguir. Repare que não estamos definindo uma seção "SideBar" dentro dele:

imagem

Quanto acessamos a URL /Home/About, veremos o conteúdo que fornecemos acima na seção principal (body) da nossa resposta, e o conteúdo padrão da SideBar será mostrado:

imagem

O arquivo de layout determinou no tempo de execução que uma seção SideBar customizada não estava presente no modelo de visão About.cshtml e, com isso ele mostrou o conteúdo padrão da barra lateral.

Um último Acerto...

Vamos supor que em um momento posterior nos decidimos que ao invés de mostrar o conteúdo padrão da barra lateral, nós só queremos esconder a barra lateral completamente nas páginas que não têm qualquer conteúdo personalizado definido para a barra lateral.  Poderíamos implementar essa alteração, simplesmente fazendo uma pequena modificação em nosso layout para que o conteúdo da barra lateral (e seu HTML do entorno) seja mostrado somente se a seção da barra lateral for definida. O código para fazer isso é mostrado a seguir:

imagem

O Razor é flexível o suficiente para que possamos fazer alterações como esta não necessitando modificar qualquer um dos nossos modelos de visão (nem fazer qualquer alteração na lógica dos Controladores) para acomodar isso. Podemos ao invés disso, fazer apenas esta modificação no nosso arquivo de layout e o resto acontece de forma limpa. Este tipo de flexibilidade torna o Razor incrivelmente poderoso e produtivo.

Resumo

As capacidades de layout do Razor permitem que você defina um modelo de layout comum para o site, e então herde a sua aparência em todas as visões/páginas do seu site.

O Razor te permite definir múltiplas seções não-contíguas dentro de modelos de layout que podem ser "preenchidas" por modelos de visão. A sintaxe @section { } para fazer isso é limpa e concisa. O Razor também suporta a habilidade para dinamicamente verificar no tempo de execução se uma seção especial foi definida, te permitindo fornecer um conteúdo alternativo (ou mesmo um layout alternativo) caso a seção não tenha sido especificada. Isso fornece uma maneira poderosa e fácil para personalizar a interface do usuário (UI) do seu site - tornando-o limpo e DRY a partir de uma perspectiva de implementação.

Espero que ajude,

Scott

PS Além do blog, eu também estou agora utilizando o Twitter para atualizações rápidas e para compartilhar links.Siga-me em: twitter.com/ScottGu

Texto traduzido do post original por Leniel Macaferi.

Published Thursday, December 30, 2010 2:27 AM by Leniel Macaferi
Filed under: , ,

Comments

# re: ASP.NET MVC 3: Layouts e Seções com o Razor

Friday, April 22, 2011 11:33 AM by Rafael Martins

Estou impressionado com a flexibilidade do MVC3 e como se pode criar uma legítima aplicação web da maneira que vc imaginar.

# re: ASP.NET MVC 3: Layouts e Seções com o Razor

Tuesday, November 8, 2011 6:25 PM by valter

Muito bom, bem simples mas objetivo.

Obrigado.