Facilite a navegação em seu site: MasterPage – Parte 1

Neste primeiro artigo da série, o autor demonstra como facilitar a navegação dos usuários no site com a utilização do controle MasterPage disponível no Visual Studio.

por Leandro Braçaroto

Ter uma página dividida de forma bem ordenada, atrativa e principalmente de fácil manutenção é o sonho de todos os desenvolvedores.
Vamos criar uma nova solução para fazermos um exemplo básico:

Abra o Visual Studio .NET ( no meu caso estou utilizando o 2008 beta 2 ), selecione o menu File / New / Web Site e crie um novo projeto, conforme demonstra a figura 01:

Figura 01 – Criação do novo WebSite

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 como ilustra a figura 02.

Figura 02 – Criação da MasterPage

Veja como é montada uma Master Page na figura 03. 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.

Figura 03 – Exibição do ContentPlaceHolder

Veja o conteúdo HTML desta página MasterPage na figura 04. 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>.

Figura 04 – Código HTML do MasterPage

Observe na figura 05 eu coloquei na MasterPage o texto padrão que e quer que seja exibido para todas as páginas, poderia ser um menu, logo da empresa, enquete, ou qualquer outro tipo de informação. Note que não foi adicionado nada dentro da tag <asp:ContentPlaceHolder> como diferencio em vermelho no código HTML.

Figura 05 – Adicionando informação na MasterPage

Uma vez definida a estrutura da Master Page, vamos agora criar um novo item que será nossa página Inicial ( Default.aspx ), ou seja, este item que ficará dentro do ContentPlaceHolders.

É válido dizer que você pode arrastar quantos ContentPlaceHolders forem precisos para a página Master.

Adicione um novo Item (Add New Item) no Solution Explorer, sendo um Web Form chamado SubPagina.aspx. Certifique-se de deixar selecionado o checkbox "Select master page". Clique em Add conforme demonstrado na figura 06.

Figura 06 – Adicionando um novo Item

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

Figura 07 – Escolhendo a MasterPage

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 como ilustra a figura 08.

Figura 08 – Nova Página dentro da MasterPage

Escreva agora um texto qualquer dentro do Content da página SubPagina.aspx que acabamos de criar como é demonstrado na figura 09.

Figura 09 – Adicionando conteúdo na Sub Página

Salve a página e pressione CTRL + F5 para executar no Browser. Teremos o resultado da figura 10.

Figura 10 – Resultado do que foi desenvolvido

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

Usar o recurso de Master Pages ajuda muito no gerenciamento e administração de sua aplicação, sem contar que padroniza e facilita e muito a manutenção, não necessitando que seja alterado em cada página individualmente. É 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. Dentro dos controles de ContentPlaceHolder, digo no plural porque podem haver vários, use sua criatividade e componha uma aplicação com Lay-out e sem mágicas.

Até a próxima.