20 de jan de 2012

[Parte 2] Capítulo 3: Criando blocos reutilizáveis de conteúdo


A maioria dos sitespossuem conteúdos que são exibidos em todas as páginas, como cabeçalho e rodapé, ou uma caixa que informa aos usuários onde estão e se estão logados. O ASP.NET permite que seja criado um arquivo separado com bloco de conteúdo que pode conter texto, marcação e código, assim como uma página web normal.

Pode-se então inserir o bloco de conteúdo em outras páginas no local onde queremos que as informações apareçam. Dessa forma, não teremos que copiar e colar o conteúdo em cada uma das páginas.

Essa estratégia é bastante comum e torna mais fácil a atualização do site. Se alguma mudança for necessária, basta alterar apenas um arquivo e essa mudança refletirá em todas as páginas que possuirem aquele bloco.

O diagrama a seguir mostra como blocs de conteúdo trabalham. Quando um navegador solicita uma página do servidor, o ASP.NET insere o bloco de conteúdo no ponto que o método RenderPage é chamado na página principal. A página com o bloco de conteúdo incorporado é então enviada ao navegador.

Neste procedimento, será criada uma ágina que faz referência a dois blocos de conteúdo (um cabeçalho e um rodapé) que estão localizados em arquivos separados. Poderemos utilizar esses blocos de conteúdo em quaisquer página do site. Quando estiver pronto, teremos uma página como esta:

1 - No diretório principal do seu site, crie um arquivo chamado index.cshtml
2 - Insira o código abaixo no lugar da marcação já existente

3 - Crie uma pasta chamada Shared. (É comum armazenar arquivos compartilhados entre páginas em uma pasta chamada "shared"). Para criar uma pasta, clique em "New", em seguida "New Folder".
4 - Dentro da pasta "shared", crie um arquivo chamado _cabecalho.cshtml
5 - Substitua o conteúdo da página pelo conteúdo a seguir:

Observe que o nome do arquivo possui um "_" como prefixo. As páginas prefixadas com underscore (_) não são enviadas ao navegador. Essa regra evita que as pessoas solicitem estas páginas, intencionalmente ou não. Normalmente utilizamos esse prefixo em páginas de blocos de conteúdo pois estas são páginas criadas para serem inseridas em outras páginas.

6 - Na pasta "shared", crie um arquivo chamado _rodape.cshtml e substitua o conteúdo pelo conteúdo a seguir:

7 - No arquivo index.cshtml, adicione o código abaixo, que faz duas chamadas ao método RenderPage:

O código acima exempliifca como inserir um bloco de código em uma página Web. Chamamos o método RenderPage e passamos por parâmetro o nome do arquivo que contém o conteúdo que desejamos inserir naquele ponto. Aqui, estamos inserindo o conteúdo de _cabecalho.cshtml e _rodape.cshtml no arquivo index.cshtml.

8 - Rode a página index.cshtml. Se abrirmos o código-fonte direto do navegador, poderemos observar que é exibida a marcação da página inteira, ocultando o fato de que os códigos vem de arquivos diferentes.

Nenhum comentário:

Postar um comentário

Sua crítica, sugestão ou comentário será muito bem vindo!