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.