Visão Geral sobre Páginas Mestre e Conteúdo

Páginas Mestre (Master Pages) consistem de duas partes:

  • Página Mestre (Master Page) - um arquivo ASP.NET com uma extensão .master. Uma "Master Page" contém um leiaute que inclui texto, HTML e controles de servidor. Em lugar de uma directiva "@ Page", ela contém uma directiva "@ Master". A página mestre contém todos os elementos HTML colocados no topo da página, incluindo <html>, <head> e <form>. Devemos incluir em nossa página mestre, tipicamente, a estrutura da página (usualmente uma tabela), nome da companhia, navegação de site, etc[...]. Para permitir inserção de conteúdos na página mestre devemos adicionar um ou mais controles <asp: ContentPlaceHolder />. Uma página mestre herda da classe MasterPage.
  • Conteúdo da Página (Content Page) - o conteúdo da página é definido pelo controle <asp: ContentPlaceHolder /> na página mestre. Um "Content Page" é usado em um arquivo .aspx e é fronteira para a página mestre usando o atributo MasterPageFile na directiva "@ Page".


Figura 01 - Páginas Mestre definem a estrutura e o conteúdo das páginas preenchidas em branco

A listagem abaixo demonstra uma página mestre com dois controles <asp:ContentPlaceHolder />.

'VB
<% @ Master Language="VB" %> <html> <head runat="server">
<title>Master page title</title> </head> <body>
<form id="form1" runat="server">
<table>
<tr>
<td><asp:contentplaceholder id="Principal_Pai" runat="server" /></td>
<td><asp:contentplaceholder id="Rodape_Pai" runat="server" /></td>
</tr>
</table>
</form> </body> </html>

//C#
<%@ Master Language="C#" %> <html> <head runat="server">
<title>Master page title</title> </head> <body>
<form id="form1" runat="server">
<table>
<tr>
<td><asp:contentplaceholder id="Principal_Pai" runat="server" /></td>
<td><asp:contentplaceholder id="Rodape_Pai" runat="server" /></td>
</tr>
</table>
</form> </body> </html>

Listagem 01 - Página Mestre com dois controles <asp:ContentPlaceHolder />

A seguinte listagem apresenta o conteúdo da página. Note que todo o texto e controles devem estar dentro do controle <asp:Content /> ou a página gerará um erro. Do contrário, a página comporta-se exatamente a uma página ASP.NET. Note também a diretiva "@ Page" e o atributo "MasterPageFile".

'VB
<% @ Page Language="VB" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Principal_Pai" Runat="Server"> Conteúdo Principal. </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Rodape_Pai" Runat="Server" > Conteúdo do Rodapé. </asp:content>

//C#
<% @ Page Language="C#" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Principal" Runat="Server"> Conteúdo Principal. </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Rodape" Runat="Server" > Conteúdo do Rodapé. </asp:content>

Listagem 02 - Conteúdo da página

Vantagens de páginas mestre incluem o seguinte:

  • Centralização de funcionalidades comuns de suas páginas, podendo ser atualizadas em um só lugar;
  • Facilidade de criar um conjunto de controles e código e aplicar os resultados para um conjunto de páginas. Por exemplo, podemos usar controles na página mestre para criar um menu que aplica para todas as páginas de conteúdo;
  • Controlar o leiaute final das páginas;
  • Fornecer um modelo de objeto que nos permite personalizar a página mestre de um conteúdo de página individual.

Processo de Criação de Páginas Mestre e Conteúdo

Vamos praticar. Siga os passos abaixo:

  • Adicione uma página mestre (master page) para seu site da Web com a extensão .master (Figura 02);
  • Para a página mestre, adicione tabelas, gráficos, informações registradas e outros conteúdos que aparecerão nas páginas de conteúdo. Adicione um ou mais controles <asp:ContentPlaceHolder /> (Figura 03);
  • Adicione um formulário para o site da Web com a extensão .aspx. Selecione a opção "Select Master Page" no momento de criação do formulário e selecione sua página mestre (Figura 04 e 05);
  • Para a página de conteúdo, adicione texto, gráficos, controles e etc [...] para cada controle <asp:Content /> para mapear o controle <asp:ContentPlaceHolder /> em nossa página mestre (Figura 06);
  • Veja o resultado (Figura 07).


Figura 02 - Adicionar a página mestra (master page) para seu site da Web


Figura 03 - Adicionar tabela, gráficos e etc[...] e um ou mais controles <asp:ContentPlaceHolder />


Figura 04 - Adicionar uma página .aspx para seu site da Web


Figura 05 - Selecionar página mestre


Figura 06 - Adicionar conteúdo para sua página de conteúdo (content page)


Figura 07 - Resultado

Na página mestre possuimos o controle <asp:ContentPlaceHolder /> que indicará onde o conteúdo será inserido. Já na página de conteúdo temos o controle <asp:Content /> que indica também onde será inserido o conteúdo da página. Percebeu! O que precisamos saber é que na página de conteúdo ao invés de <asp:ContentPlaceHolder /> possui um <asp:Content /> que faz referência a página mestre a partir do atributo ContentPlaceHolderID.

Referenciando Propriedades e Controles de Páginas Mestre

Algumas vezes temos a necessidade de manipular algumas propriedades de páginas mestres em nossas páginas de conteúdo. Por exemplo, suponhamos que nossa página mestre possui o nome de alguma companhia que, em alguns momentos, teremos que mudar o nome dos controles e etc[...] . Isso é possível seguindo os seguintes processos:

  • Criar uma propriedade na página mestre (Listagem 03);
  • Adicionar a declaração "@ MasterType" na página de conteúdo .aspx (Listagem 04);
  • Referenciar a propriedade da página de conteúdo usando Master.Nome_Da_Propriedade (Listagem 05);
'VB
Public Address As String = "123 Anywhere"
Public Property CompanyName() As String
Get
Return CType(ViewState("CompanyName"), String)
End Get
Set(ByVal value As String)
ViewState("CompanyName") = value
End Set
End Property

//C#
public String Address = "123 Anywhere";
public String CompanyName
{
get { return (String)ViewState["companyName"]; }
set { ViewState["companyName"] = value; }
}

Listagem 03 - Exemplo de Propriedade a ser colocada na Página Mestre

'VB
<%@ Page Language="VB" MasterPageFile="~/Master1.Master" CodeFile="Home.aspx.vb"
Inherits="Home" Title="Contoso Home Page" %>
<%@ MasterType virtualpath="~/Master1.master" %>

//C#
<%@ Page Language="C#" MasterPageFile="~/Master1.Master" CodeFile="Home.aspx.cs"
Inherits="Home" Title="Contoso Home Page" %>
<%@ MasterType virtualpath="~/Master1.master" %>

Listagem 04 - Exemplo de como adicionar referência na página de conteúdo

'VB
CompanyName.Text = Master.CompanyName

//C#
CompanyName.Text = Master.CompanyName;

Listagem 05 - Exemplo de como chamar a propriedade da página mestre

Junto com as propriedades, podemos também referênciar e atualizar controles na página mestre a partir da página de conteúdo, chamando o método Master.FindControl e aplicando o nome do controle. O método Master.FindControl retorna um objeto Control, que necessita ser modelado para o tipo que desejarmos. Veja como na Listagem 06.

'VB
Dim _Brand As Label = CType(Master.FindControl("Brand"), Label)
_Brand.Text = "Fabrikam"

//C#
Label _Brand = (Label)Master.FindControl("Brand");
_Brand.Text = "Fabrikam";

Listagem 06 - Exemplo de como manipular controles da página mestre

Páginas Mestre Aninhadas

Indo mais adiante, podemos ter uma página mestre sendo o conteúdo de outra página mestre. Em outras palavras, teremos páginas mestre aninhadas, onde uma página mestre herda o visual e a aparência de uma outra e a página de conteúdo herda desta segunda página (Figura 08). Para isso, basta referenciar a página mestre pai na página mestre filho e depois na página de conteúdo. A listagem a seguir apresenta como página mestre filho herdar o pai.

<%@ Master Language="C#" MasterPageFile="~/MasterPage_Pai.master" AutoEventWireup="true" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Principal_Pai" Runat="Server">
Coloque alguns outros conteúdos aqui...
<asp:ContentPlaceHolder ID="Principal_Filho" runat="server" />
</asp:Content>

Listagem 07 - Exemplo de página mestre filho herdando de página mestre pai

Lembra-se que: na página de conteúdo o controle <asp:Content /> vai apontar para o ID da página mestre filho, assim <asp:Content ContentPlaceHolderID="Principal_Filho">Insira o conteúdo aqui...</asp:Content>.


Figura 08 - Exemplo de página mestre filho herdando de página mestre pai

Páginas aninhadas são interessantes quando temos um leiaute com um trecho que não varia e outro que varia com pouca frequência. Podemos definir como página mestre pai a que não varia e a outra como filho. Um ponto negativo é que o Visual Studio não suporta edição de páginas mestre aninhadas no modo design. Ao invés de criar páginas aninhadas pode-se também criar User Controls e acessá-los por meio de propriedades.

Referências

Estou disponível para qualquer dúvida ou sugestão (kallebe.santos@gmail.com).

Um grande abraço e até a próxima...