Master Pages no ASP.NET 2.0

Por Renato Haddad, Microsoft Most Valuable Professional .NET Mobile Devices. Editor da revista MSDN Magazine Brasil, autor de diversos livros e ministra palestras e treinamentos sobre a tecnologia .NET.

Tecnologias Utilizadas
- ASP.NET 2.0

O recurso de Master Pages, sem nenhuma dúvida é uma facilidade que todo desenvolvedor sonhava em ter nos projetos. Com uma Master Page você consegue desenvolver uma página padrão que será utilizada em todo o site, ou seja, é como se fosse uma página default contendo menus, cabeçalhos e rodapés. Qualquer outra página criada, pode herdar a Master Page, o qual você poderá apenas utilizar a área que não seja a da Master Page. Como isto é feito em tempo de execução, você adotar qualque tipo de manutenção na página, e em tempo de execução é que o .NET monta as duas páginas em apenas uma.

A grande vantagem nisto é que você não terá que dar manutenção em diversas páginas ou User Controls, uma vez criada ou alterada a Master Page, todas as mudanças são enxergadas imediatamente nas demais páginas que a utilizam.

Abra o Visual Studio .NET 2005, selecione o menu File / New / Web Site e crie um novo projeto com as seguintes características:

Cc580600.MasterPagesASPNET01(pt-br,MSDN.10).jpg

Clique em OK para criar o projeto. Abra o Solution Explorer, clique com o botão direito sobre a solução e selecione Add New Item. Deixe o nome do arquivo como MasterPage.master e certifique-se de selecionar o checkbox "Place code in separate file". Clique em Add.

Cc580600.MasterPagesASPNET02(pt-br,MSDN.10).jpg

Veja como é montada uma Master Page. Contém um ou vários controles ContentPlaceHolder, o qual é o local onde você poderá inserir qualquer controle para as demais páginas. Lembre-se que isto será montado em tempo de execução.

Cc580600.MasterPagesASPNET03(pt-br,MSDN.10).jpg

Veja o conteúdo HTML desta página. Note que existe a diretiva @Master, que o head roda no servidor e que o body contém o <div> com o namespace asp:contentplaceholder.

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" AutoEventWireup="false" Inherits="MasterPage_master" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

No layout, adicione um parágrafo (Shift+ CTRL) antes do placeHolder, selecione o menu Layout / Insert Table, o Template Header and side e clique em OK. Aqui vale uma observação sobre a criação de tabelas no ASP.NET 2.0. Criar e ajustar as configurações de uma tabela ficou extremamente fácil e rápido, pois esta nova interface de tabelas permite uma produtividade como nunca visto anteriormente nas versões.

Cc580600.MasterPagesASPNET04(pt-br,MSDN.10).jpg

Mova o ContentPlaceHolder para área central da tabela, inclua uma imagem (logotipo da empresa) na parte superior da tabela e formate com algumas cores de acordo a sua necessidade. É válido dizer que você pode arrastar quantos ContentPlaceHolders forem precisos para a página Master.

Para inserir a figura, vamos à algumas facilidades do ASP.NET 2.0. No Solution Explorer, crie um novo Folder chamado Images. Abra o Windows Explorer na pasta que contém as imagens a serem adicionadas ao projeto. Agora, basta arrastar as imagens para a pasta Images no VS.NET 2005. Pronto, nunca foi tão fácil, é apenas um drag and drop!!!

Cc580600.MasterPagesASPNET05(pt-br,MSDN.10).jpg

Em seguida arraste a figura do Solution Explorer para o cabeçalho da tabela e adicione um texto no ContentPlaceHolder. Na parte esquerda da tabela, arraste um TreeView, o qual contém algumas opções para ilustrar o uso (mas isto é tópico para outro artigo).

Cc580600.MasterPagesASPNET06(pt-br,MSDN.10).jpg

Uma vez definida a estrutura da Master Page, adicione um novo Item (Add New Item) no Solution Explorer, sendo um Web Form chamado FilhodaMaster.aspx. Certifique-se de deixar selecionado o checkbox "Select master page". Clique em Add.

Cc580600.MasterPagesASPNET07(pt-br,MSDN.10).jpg

Selecione a página MasterPage.master e clique em ok.

Cc580600.MasterPagesASPNET08(pt-br,MSDN.10).jpg

Note que a região correspondente à Master Page aparece com uma cor cinzenta, demonstrando que você não tem acesso a esta região, restando apenas o Controle Content para você inserir controles.

Cc580600.MasterPagesASPNET09(pt-br,MSDN.10).jpg

Veja o conteúdo HTML desta página. Note que todas as diretivas de definição da página, corpo e head estão na Master. A tag MastePageFile indica qual é a páginas Master desta atual.

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" 
CodeFile="PaginaFilhodaMaster.aspx.vb" Inherits="PaginaFilhodaMaster_aspx" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <font face="Verdana" color="blue"> Esta é uma página baseada na Master Page.</font><br />
    Categoria:
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <br />
    <asp:Button ID="Button1" runat="server" Text="Enviar" /><br />
    <asp:Label ID="Label1" runat="server"></asp:Label>
</asp:Content>

Para colocarmos um pouco de código, dê um duplo clique no botão e digite o código para capturar o dado digitado e exibí-lo no Label. Note a diferença em relação ao ASP.NET 1.1, veja que a tela de códigos está mais limpa e de fácil entendimento.

Partial Class PaginaFilhodaMaster_aspx
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Label1.Text = TextBox1.Text.Trim()
    End Sub
End Class

Salve a página e pressione CTRL + F5 para executar no Browser.

Cc580600.MasterPagesASPNET10(pt-br,MSDN.10).jpg

Note que o ASP.NET não precisa mais do IIS instalado na sua máquina, pois ele cria um IIS virtual para executar a página. Note ainda que o conteúdo da Master Page foi inserido em tempo de execução.

Conclusão

O uso do recurso de Master Pages facilita a produtividade e manutenção das aplicações, além de prover um padrão na equipe e para sites de conteúdos departamentais. É importante ressaltar que o ASP.NET contém mais de 50 novos controles e o uso desta técnica proporciona páginas mais elaboradas, por exemplo, você pode usar WebParts, GridView e outros controles nos blocos dos ContentPlaceHolders.

Bons estudos e lembre-se: No Stress, think ASP.NET 2.0

Renato Haddad (rehaddad@msn.com) é MVP, editor da revista MSDN Magazine Brasil, ministra treinamentos e palestras sobre .NETe autor de diversos livros e treinamentos em CD multimídia de ASP.NET, SQL Reporting Services, Visual Studio .NET 2003 e Aplicações Móveis para celulares e Pocket PC, tanto no Brasil como em outros países da América Latina.

Mostrar: