ASP.NET - Master Page - Aninhadas - Incluindo conteúdo adicional de outras páginas

Você criou uma Master Page que fornece o conteúdo básico para as páginas do seu site mas gostaria de estender esta Master Page para incluir conteúdo adicional para outras páginas.

Um exemplo clássico que podemos citar é a página de login exibindo o conteúdo da sua Master página e as demais páginas apresentarem outra aparência com informações adicionais. No Visual Studio 2005 você teria que criar mais de uma master pager e encadeando-as via código, no VS 2008 as coisas ficaram mais fáceis pois podemos crias Master Page aninhadas com recurso Visual.

Na verdade o conceito já existia na versão 2.0 mas era difícil de manter pois devia ser feito via código. A versão 3.5 do ASP.NET apresenta o recurso da herança visual de Master Page dentro de outra Master Page permitindo usar Master Pages aninhadas com recurso disponível no editor Visual.

Abaixo temos um desenho mostrando o aninhamento de Master Pages que irei aplicar neste artigo:

Teremos então no nosso projeto 3 Master Pages:

  1. MasterPagePrincipal.master;
  2. MasterPage1.master - aninhada com MasterPagePrincipal.master com uma coluna e uma linha;
  3. MasterPage2.master - aninhada com MasterPagePrincipal.master com duas colunas e um alinha;

Você vai precisar ter instalado o Visual Web Developer 2008 Express Edition.

Abra o VWD 2008 e no menu File opção New Web site crie um novo web site com o nome : MasterPageAninhadas;

Vamos remover a página Default.aspx criada e no menu WebSite opção Add New Item e selecione o item Master Page informando o nome MasterPagePrincipal.master;

Vamos incluir na MasterPagePrincipal.master duas tabelas : uma para o cabeçalho e outra para o rodapé e vamos colocar no meio o ContentPlaceHolder;

Para incluir a tabela no menu Table opção Insert Table defina uma tabela conforme as configurações abaixo para o cabeçalho;

Repita o processo para incluir uma tabela para o rodapé alterando apenas a cor de fundo. O resultado final , já com o contentPlaceHolder com o ID alterado para Principal inserido entre as duas tabelas é visto abaixo:

Pois agora vamos incluir uma outra Master Page com uma coluna na MasterPagePrincipal.master;

No menu WebSite opção Add New Item e selecione o item Master Page informando o nome MasterPage1.master e marcando a opção

E selecionando na próxima tela a MasterPagePrincipal.master criada inicialmente;

Ao final do processo veremos no Solution Explorer a nova Master Page herdando da Master Page Principal;

Agora vamos inserir no interior do ContentPlacerHolder com ID=Principal um novo ContentPlaceHolder a partir da ToolBox:

Agora vamos incluir uma nova tabela via menu Table opção Insert Table com uma coluna e uma linha e fundo laranja no interior do ContentPlaceHolder com ID=Principal e incluir um compnente ContentPlaceHolder no interior da tabela conforme mostrado na figura acima:

O próximo passo é incluir uma outra Master Page com duas colunas no da MasterPagePrincipal.master;

No menu WebSite opção Add New Item e selecione o item Master Page informando o nome MasterPage2.master e marcando a opção Select Master Page;

E selecionando na próxima tela a MasterPagePrincipal.master criada inicialmente;

Vamos repetir o procedimento feito para a MasterPage1.master para a MasterPage2.master e incluir uma nova tabela via menu Table opção Insert Table com duas coluna e uma linha e fundo branco no interior do ContentPlaceHolder com ID=Principal, vamos alterar a cor de fundo (propriedade bgcolor) de cada uma das colunas da tabela conforme mostrado abaixo:

O próximo passo é incluir, a partir da ToolBox dois controles ContentPlaceHolder, ID=Esquerdo e ID=Direito, no interior da tabela, um em cada coluna, conforme mostrado abaixo:

Com isso encerramos a etapa de criação de cada uma das Master Pages usadas no projeto. Se você olhar para a janela Solution Explorer deverá ver o seguinte resultado;

Tudo esta pronto vamos então mostrar como podemos trabalhar com as Master Pages aninhadas.

Agora vamos incluir uma nova página no projeto para isso no menu WebSite opção Add New Item e selecione o item Web Forms e aceite o nome padrão : Default.aspx marcando a opção : Select Master Page e clicando no botão Add;

Esta página irá herdar da nossa Master Page - MasterPage1.master - portanto selecione esta Master Page e clique em OK;

Repita a operação feita anteriormente e incluir uma nova página no projeto para isso no menu WebSite opção Add New Item e selecione o item Web Forms e informe o nome : Default2.aspx marcando a opção : Select Master Page e clicando no botão Add;

Desta vez a nossa página irá herdar de MasterPage2.master, então selecione esta opção e clique no botão OK;

E com isso encerramos o processo de construção das páginas que utilizam as Master Pages aninhadas.

Vamos ver como funciona:

Executando o projeto e exibindo a página Default.aspx com um coluna temos:

Executando a segunda página Default2.aspx iremos obter:

Com isso podemos alternar entre as páginas obtendo um resultado diferente de exibição usando Master Pages aninhadas.

Pegue o projeto completo aqui: MasterPageAninhadas.zip

Eu sei , é apenas ASP .NET , mas eu gosto...

José Carlos Macoratti