Master Pages no Visual Studio .NET 2005

Neste tutorial mostrarei o novo componente do VS2005 (Visual Studio .NET 2005), que é o Master Pages.

Este recurso é utilizado para utilizar em websites que conterão uma mesma estrutura de páginas, evitando com que tenha que ficar copiando e colando a estrutura ou tendo diversos arquivos, HTML por exemplo, para representar cada parte da página.

A ferramenta utilizada para desenvolver este exemplo é o Microsoft Visual Web Developer 2005 Express Edition, que é a versão de estudos totalmente gratuita da Microsoft.

Então vamos abrir o software, clique em Iniciar -> Programas -> Microsoft Visual Web Developer 2005 Express Edition.

Figura 1 – Tela Inicial do Visual Web Developer 2005 Express Edition

Vamos criar um projeto do tipo webform (projeto para páginas na internet), então clique em File -> New Web Site, (caso utilize a versão comercial do Visual Studio.NET 2005, acesse File -> New -> Web Site), a seguinte tela será aberta:

Figura 2 – Janela para criação do projeto web.

Escolhemos ASP .NET Web Site, damos um nome para o nosso projeto abaixo, por exemplo Master_Pages_URCAMP e clicamos em OK.

A página será aberta direto no Source (código-fonte da nossa página), mas não entrem em pânico, pois com este componente nenhuma linha de código é necessária, o código que aparece é padrão para todas as novas páginas pois é o mínimo necessário pra página ser executada no Navegador (Browser).

Figura 3 – Código-fonte inicial do site.

Então vamos começar a criar nossa Master Page e a página filha que servirá de exemplo pra notarmos a diferença.

Clique no Menu File -> New File (Ctrl + N), na janela que se abrirá, clique em Master Page e clique em Add.

Figura 4 – Janela Add New Item

Clicando em Design aparecerá o layout da Master Page, que contem um retângulo, que é o componente ContentPlaceHolder, que será o local onde poderá ser inserido o conteúdo de cada página, e o que tiver fora desse retângulo será mostrado em todas as páginas, caso não tenha ficado claro, iremos a prática para enxergarmos melhor isto.

Agora clicamos no Menu File -> New Item, clicamos em Web Form e marcamos a opção Select Master Page e clique em Add.

Na janela que aparecerá, clique em MasterPage.master que é nosso arquivo da MasterPage e clique em OK.

Agora clique em Design e já teremos o Content para inserirmos o conteúdo da página principal.

Dentro do content escrevemos Esta é a minha página principal.

Figura 5 – Componente Content da Página Principal

Agora vamos criar outra página, com os mesmos passos que criamos a anterior, clique em File -> New Item, escolha Web Form e marque select master page (por padrão já estará marcado), clique em Add, depois marque a MasterPage.master e clique em OK.

Clique em Design e digite no Content, Esta é minha segunda página.

Agora na Solution Explorer damos duplo clique em MasterPage.master, clicamos em Design, e fora do ContentPlaceHolder colocaremos 2 componentes HyperLink que está em ToolBox na Standard, apenas clicamos e arrastamos e ficará como a figura abaixo.

Figura 6 – Componente HyperLink

Selecione o primeiro HyperLink e em Properties (propriedades), mudamos o Text, para Página Principal, e em NavigationUrl, clicamos nas reticências (...) e na janela que abrirá, selecione Default2.aspx, que é nossa página principal, e clique em OK.

Figura 7 – Selecionar a URL

Agora faremos os mesmos passos para o outro HyperLink, selecionamos, mudamos a propriedade Text para Segunda Página, em NavigateUrl, selecionamos Default3.aspx e clicamos em OK.

Feito isto basta setarmos qual página vai iniciar primeiro ao compilarmos, então em Solution Explorer selecione Default2.aspx e clique com o botão direito do mouse e clique em Set as Start Page, agora apertamos F5 e clicamos em OK na janela que se abrirá.

Está pronto o nosso projeto, até a próxima pessoal.