Master pages é um recurso que permite criar templates pré-definidos para criação do layout de um website ou aplicação web-based, o que facilita em muito o desenvolvimento, uma vez que não é necessário repetir os passos de desenho da aplicação em cada uma das páginas.

Começando, criamos um novo projeto, neste caso File > New Website. Em seguida inserimos uma Master Page. Botão direito do mouse na raiz do site (Solution Explorer), Add new Item e selecionamos Master Page.

Damos o nome, que poderá ficar mesmo “Master Page” e OK. Será criado um novo arquivo ou página com a extensão .master. Esta será o template da nossa aplicação.

Depois de termos algumas imagens e mesmo CSS no nosso projeto, podemos começar a adicionar elementos à página que servirá de modelo ao site.

No modo Design podemos ver que existe um novo elemento, o ContentPlaceHolder1. Este elemento é o local dentro do qual é colocado o conteúdo que difere de página para página, ou melhor, todos os elementos que ficarem fora desta tag serão comuns a todas as páginas que utilizarem a Master Page.

Agora poderemos adicionar à página todos os elementos de layout. Neste exemplo adicionei uma tabela para construção de uma página “starndart” para um site ou aplicação com header, footer, menu e o local onde irá estar o conteúdo (ao centro).

O ContentPlaceHolder pode ser arrastado para o local pretendido.

Agora que temos a nossa Master Page criada, podemos adicioná-la a outras páginas existentes ou que se venham a criar.

No caso de uma página já existente, como é o caso da Default.aspx fazemos da seguinte forma:

Abrimos a página em modo de code view (Source), apagamos todo o código HTML e na tag do ASP colocamos a indicação da Master page:

MasterPageFile="~/MasterPage.master"

A tag deverá ficar assim:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

Se visualizar a página em Design view, deverá ver desta forma:

Caso pretenda adicionar nova página com o template criado (Master page), basta clicar com o botão direito do mouse no arquivo MasterPage.master (Solution Explorer) e selecionar Add Content Page. Será criada uma página com a Master Page agregada.

Agora falta apenas o conteúdo, que difere de página para página e que deverá ser inserido no ContentPlaceHolder.

Podemos também inserir novos Content Place Holder em diferentes locais da página. Para isso vamos ao painel de ferramentas (Standart) e arrastamos um ContentPlaceHolder para o local desejado.

Abraços!

TechCaffe