Desenvolvendo uma aplicação web com ASP.NET Master Pages
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.
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 - 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 - 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).
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 - Adicionando um novo item ao Web Site
Agora basta selecionar o recurso Master Page e nomea-lo como preferir (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"
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
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:
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).
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 - 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.
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
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo