Desenvolvendo uma aplicação web com ASP.NET Master Pages

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Pequeno tutorial que mostra para que serve e como utilizar os recursos de Master Pages em ASP.NET.

Master Pages é um recurso do ASP.NET que nos permite criar uma página padrão com conteúdo que será replicado às demais páginas do nosso website a partir do que podemos chamar de herança visual. Para endender melhor a utilização de Master Pages vamos construir uma pequena aplicação web.
Notem que irei utilizar o Visual Studio, porém o recurso de Master Pages está disponível também no Visual Web Developer.

Primeiro passo:
Crie um novo Web Site (figura 1) em File >> New >> Web Site.

figura 1
figura 1 - Criando um novo Web Site

Então selecione ASP.NET Web Site e a linguagem de sua preferência (figura 2). Para este tutorial a linguagem será indiferente.


figura 2
figura 2 - Selecionando o tipo de aplicação Web.

Segundo passo:
Agora que temos um novo Web Site criado, podemos por em prática a utilização dos recursos de Master Page. Para isso, basta ir até o Solution Explorer e clicar com o botão inverso do mouse no nosso Web Site e selecionar a opção Add New Item (figura 3).

figura 3
figura 3 - Adicionando um novo item ao Web Site

Agora basta selecionar o recurso Master Page e nomea-lo como preferir (figura 4).

figura 4
figura 4 - Incluindo uma Master Page em um Web Site

Ao incluir uma Master Page, um código automático será criado contendo as principais especificações que serão necessárias para a sua utilização. É importante observarmos as seguintes partes do código:

Veja que a identificação (id) do ContentPlaceHolder indica sua utilização no código. Basicamente os ContentPlaceHolder contidos na Master Page irão definir onde o conteúdo das outras páginas serão exibidos.
Para facilitar iremos apenas renomear a identificação do ContentPlaceHolder1 para "Conteudo"

Terceiro Passo:
Agora que já possuímos uma Master Page no nosso Web Site, veremos como relacionar as outras páginas da nossa aplicação para herdarem o visual da Master Page.
Primeiro vamos utilizar uma página .aspx normal, já existente no projeto. Exemplo: Default.aspx.
Observe no código a seguir como é simples incluir uma Master Page em um conteúdo já existente em nosso Web Site

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gerencial.aspx.cs" Inherits="Default" Title="Untitled Page" %>

Basta apenas incluir a tag MasterPageFile indicando qual a Master Page dessa página.

<%@ Page Language="C#" MasterPageFile="Master.master" AutoEventWireup="true" CodeFile="gerencial.aspx.cs" Inherits="Default" Title="Untitled Page" %>

Agora nossa página já sabe o caminho da sua Master Page, porém, ainda não relacionamos o conteúdo da página que será interpretado pelos ContentPlaceHolder da Master Page, lembram?
Vejam como é simples. Basta inserir o seguinte código:

Observem a tag ContentPlaceHolderID. Ela irá definir qual será o ContentPlaceHolder que irá exibir o código contido neste Content. No nosso caso, devemos inserir um Content para o ContentPlaceHolder "head" e outro para o ContentPlaceHolder "Conteudo"
Agora vamos criar um novo Form. Para isso, clique com o botão inverso do mouse no nosso projeto na aba Solution Explorer e selecione a opção Add New Item (figura 3) então escolha o template "Web Form". Observe que ao selecionar um novo Form, existe uma opção chamada Select Master Page, marque-a (figura 5).

figura 5
figura 5 - Incluindo um novo Form

Ao marcar "Select master page" será necessário escolher qual a master page que será carregada para este novo Form. Para isso basta selecionar na lista que se abre a nossa master page Master.master.
Feito isso, verifique que o código automático que é gerado, já contém o necessário para vincular este Form a nossa Master Page, como fizemos manualmente para o Form Default.aspx.
Pronto. Agora já temos duas páginas que utilizam os mesmos recursos visuais, estando este contido em um único código, a nossa Master Page. Então ao acessar as páginas Default.aspx ou Default2.aspx, iremos ver primeiramente o código da Master Page, seguido pelos seus códigos exatamente no local indicado pelos ContentPlaceHolder.
Para finalizar, basta incluir um bom layout para sua master page que ele será replicado para as duas páginas igualmente.

Aí está uma solução simples e que facilita muito o trabalho de desenvolvimento e manutenção de um Web Site, pois qualquer alteração feita na Master Page será refletida nas demais páginas que estiverem vinculadas a ela.
Espero que tenham gostado deste tutorial.

Até logo
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?