Passo-a-passo: Usando páginas mestras aninhados no ASP.NET
Essa explicação passo a passo descreve como criar um página mestra que está aninhada em outra página mestra.Páginas mestras funcionam como modelos que especificam como será a aparência das páginas.
Você pode aninhar páginas mestras para que cada página possa ter um layout flexível mas também manter uma aparência consistente em um site da Web.Por exemplo, você pode criar um página mestra pai que tem uma faixa da empresa em controles de navegação superior e site em uma coluna lateral.Em seguida, você pode criar um página mestra filha de um departamento específico ou produto que usa a página mestra pai.Ele também pode agir como uma página mestra para todos os outros os departamento relacionados ou páginas de produtos.Dessa maneira, cada linha de produto ou departamento poderia ter uma aparência consistente, e todas as páginas teriam uma aparência consistente geral usando a página mestra pai.Para obter mais informações sobre Mestre páginas, consulte Visão Geral de Páginas Mestras ASP.NET.
Essa explicação passo-a-passo ilustra as seguintes tarefas:
Criando uma página mestra.
Criando um página mestra que está aninhado em outra página mestra.
Criando uma página ASP.NET com conteúdo que você deseja exibir na página mestra.
Pré-requisitos
Para concluir esta explicação passo-a-passo, você precisará do seguinte:
ou Microsoft Visual Web Developer Express Edition.Para Baixar informações, consulte o Visual Studio Developer Center Site da Web.
O .
Opcionalmente, um .jpg, .gif, ou outro arquivo gráfico que você possa usar como um banner na página mestra.É recomendável que a faixa não tenha mais de 780 pixels de largura e 150 pixels de altura.Entretanto, a exibição de um logotipo é opcional e o tamanho exato do gráfico não será importante para completar a explicação passo a passo.
Criando um site da Web
Se você tiver AL Pronto criou um site da Web em Visual Web Developer (Por exemplo, seguindo as etapas em Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer, você pode usar esse site e Ir para a Avançar seção, "Criando a página mestra". Caso contrário, crie um site e uma página novos, seguindo estas etapas.
Para criar um site do sistema de arquivos
Abrir Visual Web Developer.
Na File Menu, clique em NovoSite.
O Novo Site da Web caixa de diálogo é exibida.
Em Modelos Visual Studio instaladoClique em Web Site ASP.NET.
Na Local caixa, tipo o nome da pasta onde você deseja manter as páginas do site da Web.
Por exemplo, você poderia digitar o seguinte: C:\Tasks
Na Linguagem lista, clique no linguagem de programação que você prefere trabalhar com.
Clique em OK.
Visual Web Developer Cria a pasta e um Nova Página chamado Default.aspx.
Criando uma página mestra pai
Nesta seção, você cria uma página mestra pai.Esta página contém uma faixa e controles de navegação que podem ser usados em todo o site.Posteriormente, você criará outra página mestra que será usada dentro desta página mestra pai.Páginas mestre filhas podem fornecer vários layouts para páginas enquanto mantém a aparência que é estabelecida pela página mestra pai.
Para criar a página mestra
Em Explorer soluçãoClique com botão direito do mouse o nome do site da Web e em seguida, clique em AdicionarNovo item.
O AdicionarNovo item caixa de diálogo é exibida.
Em Modelos Visual Studio instaladoClique em Master Page.
Na Name (Nome) caixa, digite ParentMaster.
Limpar o Coloque o código no arquivo separado caixa de seleção.
Na Linguagem lista, clique no linguagem de programação que você prefere trabalhar com.
Clique em Adicionar.
O novo página mestra é aberto em Origem Exiba.
Adicionando elementos à página mestra pai
Na parte superior do página mestra é um @ Mestre Declaração em vez da @ Page Declaração que normalmente encontra na parte superior de páginas ASP.NET.O Mensagem da página contém um ContentPlaceHolder Controlar, qual é a área do página mestra onde substituível conteúdo será mesclado com páginas de conteúdo em tempo de execução.Você trabalhará mais com espaço reservado para conteúdo posteriormente nessa explicação passo-a-passo.
Adicionando elementos gráficos à página mestra pai
Antes que você possa incorporar os elementos gráficos à página mestra pai, você precisa adicionar os arquivos gráficos ao site da Web.
Crie um elemento gráfico que tenha 780 pixels de largura e 150 pixels de altura para a faixa e um elemento gráfico que tenha 780 pixels de largura e 50 pixels de altura para o rodapé.Os elementos gráficos são usados para mostrar como elementos gráficos da página mestra pai serão exibidas em um página mestra aninhada.Se você não tiver esses elementos gráficos, você pode criá-los no Microsoft Paint ou outro programa de elementos gráficos.
Para adicionar um arquivo gráfico existente ao site da Web
Em Explorer soluçãoClique com botão direito do mouse o nome do site da Web e em seguida, clique em AdicionarItem existente.
O Adicionar item existente caixa de diálogo é exibida.
Selecione os arquivos gráficos que você criou.
Clique em Adicionar.
Sobre a página mestra pai, adicione dois gráficos simples, um para um cabeçalho e o outro para um rodapé.Esses elementos gráficos permitem ver que a página mestra pai está sendo usado nas páginas mestras aninhadas que você criará posteriormente nessa explicação passo a passo.
Para adicionar elementos gráficos de cabeçalho e rodapé à página mestra pai
Em Origem Exibir, imediatamente após a abertura < formulário > Marca, Adicionar um DIV elemento que contém um IMG Elemento para o gráfico de faixa.
Por exemplo, se você tiver criado um gráfico chamado Banner.gif, a marcação para adicionar este gráfico seria semelhante isso:
< DIV ID = "faixa" > < img src="banner.gif " ALT = "faixa gráfico" / ≫ < / DIV >Imediatamente antes de fechar. < / formulário > Marca, Adicionar um DIV elemento que contém um IMG Elemento para o gráfico do rodapé.
Por exemplo, se você tiver criado um gráfico chamado Footer.gif, a marcação para adicionar este gráfico seria semelhante isso:
< DIV ID = "faixa" > < img src="Rodapé.gif " ALT = "Rodapé gráfico" / ≫ < / DIV >Salve a página mestra.
Observe que você não tiver Adicionado tudo dentro de ContentPlaceHolder o controle.O próximo conjunto de mestre páginas que você Criar será dentro de ContentPlaceHolder o controle.
Criando uma Página Mestra Filha
Para aninhar uma página mestra em outra, você deve criar outra página mestra.A nova página mestra será dentro do espaço reservado de conteúdo da página mestra pai.A página mestra filha permite organizar a página de maneiras diferentes, mantendo uma aparência consistente que é estabelecida pela página mestra pai.
Para criar a página mestra filha
Em Explorer soluçãoClique com botão direito do mouse o nome do site da Web e em seguida, clique em AdicionarNovo item.
O Adicionar novo item caixa de diálogo é exibida.
Em Modelos Visual Studio instaladoClique em Master Page.
Na Name (Nome) caixa, digite ChildMaster.
Limpar o Coloque o código no arquivo separado caixa de seleção.
Selecione o Selecione Mestre de página caixa de seleção.
Na Linguagem lista, clique no linguagem de programação que você prefere trabalhar com.
Clique em Adicionar.
O Selecione uma página mestra caixa de diálogo é exibida.
Selecione a página mestra pai que você criou anteriormente nessa explicação passo a passo.
Clique em OK.
O novo página mestra é aberto em Origem Exiba.
Observe que o @ Mestre Declaração na parte superior do novo página mestra indica que ela Referências um página mestra.
Adicionando Controles ContentPlaceHolder à Página Mestra Filha
Como a página mestra filho tem outro página mestra associado a ele, ele contém dois Content Controles.O primeiro espaço reservado para conteúdo pode ser usado para adicionar informações para a página que normalmente apareceriam na Cabeça elemento, como um Script Elemento.Dentro de segundo. Content Controlarar que você pode adicionar um ContentPlaceHolder o controle.Isto permite que um página ASP.NET que usa a página mestra filha fornecer o conteúdo para a página.Você pode adicionar outros elementos de página dentro de Content o controle.A página mestra filha pode conter elementos da página adicional para fornecer uma aparência consistente às páginas que usam a página mestra filha.
Para adicionar controles ContentPlaceHolder à pagina mestra filha
Abra ou alterne para a página mestra filha
Switch Para Origem Exiba.
Adicionar marcação a seguir dentro da segunda Content Controle seção Ordem para criar ContentPlaceHolder Controles:
< DIV ID = "2col" > < ASP:ContentPlaceHolder ID = "LeftColuna" runat = "Servidor" > < / ASP:ContentPlaceHolder > < ASP:ContentPlaceHolder ID = "rightcolumn" runat = "server" > < / ASP:ContentPlaceHolder > < / DIV >Salve o arquivo.
Agora tem o página mestra filho ContentPlaceHolder Os controles que contêm a marcação de um página ASP.NET que usa a página mestra filho.
Criando uma Página de Conteúdo que Usa a Página Mestra Filha
Nas etapas anteriores, você criou uma página mestra que está aninhada em outra página mestra.A página mestra filha resultante permite que você use os elementos de interface do usuário da página mestra pai.Ela também fornece elementos adicionais de interface do usuário na segundo mestra.Nessa explicação passo a passo, você adicionou elementos gráficos aos espaços reservados e à página mestra pai na segunda página mestra pai.Para ver as páginas mestre aninhadas em ação, você precisa criar um página da Web do ASP.NET que usa a página mestra filha.O Nova Página que você crie que usa o página mestra filho automaticamente conterá um Content o controle para cada ContentPlaceHolder controle que você Criado in a página mestra filho.
Para criar uma página que usa a página mestra filha
Em Explorer soluçãoClique com botão direito do mouse o nome do site da Web e em seguida, clique em AdicionarNovo item.
O Adicionar novo item caixa de diálogo é exibida.
Em Modelos Visual Studio instaladoClique em Web Form.
Na Name (Nome) caixa, digite Tarefas.
Selecione o Coloque o código no arquivo separado caixa de seleção.
Selecione o Selecione Mestre de página caixa de seleção.
Na Linguagem lista, clique no linguagem de programação que você prefere trabalhar com.
Clique em Adicionar.
Na Selecione uma página mestra caixa de diálogo, Selecionar o página mestra filho que você criou anteriormente neste exame Através.
Clique em OK.
O novo página de conteúdo é aberto em Origem Exiba.
Alterar a identificação do primeiro Content Controlar a LeftColumn e alterar a identificação da segunda Content Controlar a rightcolumn.
Adicionar elementos de texto ou página à esquerda ou Direito de coluna Content Controles.
Pressione CTRL+F5 para executar o site Web.
Observe que a página Tarefas.aspx exibe uma combinação de todos os elementos que você criou nessa explicação passo a passo.Isso inclui os elementos gráficos na página mestra pai, o layout de duas colunas da página mestra filha e o texto e controles que são adicionados à página Tarefas.aspx.
Próximas etapas
Agora que você viu como funcionam páginas mestras aninhadas, você poderá criar outras páginas mestras filhas que usem a página mestra pai.A página mestra filha que você criou nessa explicação passo a passo criou um layout de duas colunas.Outra página mestra filha que você criar para a página mestra pai poderia criar um layout de coluna única ou algum outro layout.