Página Inicial>Tutorial de programação de redes>Tutorial ASP.NET

Explicação detalhada da página mestra no ASP.NET 2.0

Autor：Eve Cole Data da Última Atualização：2009-06-30 16:37:05
Para reduzir o problema de alterar o site inteiro ao alterar uma página durante o web design, o conceito de master foi adicionado após a atualização do vs2003 para vs2005.

Você pode pensar nisso como um “modelo de página da web”. A diferença é que você não precisa mais atualizar todas as páginas. Depois de modificá-lo, todas as páginas da web serão alteradas de uma vez por todas.

Vamos começar com uma demonstração simples de uso mestre:

1. Primeiro abra o Visual Studio 2005, crie um novo site asp.net, sistema de arquivos, C#.

2. No Solution Explorer, clique com o botão direito para criar um novo item:



3. Selecione a página mestra:



4. Abra MasterPage.master, há um controle contentplaceholder dentro, tome cuidado para não escrever nada no controle.

Vamos para a visualização de design e adicionamos texto de cabeçalho e rodapé fora desse controle.



5. Depois de salvar, podemos usá-lo para criar outras páginas. Existem dois métodos: 1. Clique com o botão direito em qualquer lugar da página mestra e clique em Adicionar página de conteúdo. 2. Crie um novo item no Solution Explorer e marque "Selecionar página mestra" ao gerar a página aspx;



6. Selecione a página mestra correspondente



7. Existem apenas estas poucas frases no código-fonte da página recém-gerado:


  1. ＜%@PageLanguage="C#"MasterPageFile="~/MasterPage.master"AutoEventWireup="true"
    CodeFile="Default2.aspx.cs"Inherits="Default2"Title="UntitledPage"%＞
  2. ＜asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server"＞
  3. ＜/asp:Content＞

Podemos ver um controle de conteúdo, que corresponde ao controle ContentPlaceHolder1 da página mestra e é convertido na página de visualização:



8. O texto do cabeçalho e rodapé fica cinza e só podemos editá-lo no conteúdo.

Depois de salvar, visite a página default2.aspx, F5., vemos a página:


9. Como esperado, vamos dar uma olhada no código-fonte:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm"method="post"action="Default2.aspx"id="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwULLTEwMDUyNjYzMjhkZASHJAhe9XmxUHPbOeONMX2y6XYi"/＞
  10. ＜/div＞
  11. ＜div＞
  12. este é o cabeçalho da página＜ br/＞
  13. conteúdo desta página: olá, mundo!＜ br/
  14. ＞ este é o rodapé da página＜/div＞
  15. ＜/forma＞
  16. ＜/corpo＞
  17. ＜/html＞

O conteúdo mestre é colocado em uma div, mas a página de conteúdo não é colocada em uma div separada, o que significa que nenhum código redundante será adicionado às subpáginas da mestre. Isso nos traz grande flexibilidade na programação e no layout da página web. Podemos fazer uso total do posicionamento CSS + DIV, e também podemos usar o posicionamento de tabela. Não é necessário modificar todas as páginas durante a modificação.

10. Para um mestre que não é um conteúdo fixo, podemos usar vários ContentPlaceHolder1 para layout. O exemplo a seguir usa tabela para posicionamento:



11. Haverá dois conteúdos na subpágina correspondente:



Código gerado:


  1. ＜!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
  2. ＜htmlxmlns="http://www .w3.org/1999/xhtml"＞
  3. ＜head＞＜title＞
  4. UntitledPage
  5. ＜/title＞＜/head＞
  6. ＜body＞
  7. ＜formname="aspnetForm"method="post"action="Default3.aspx"id="aspnetForm "＞
  8. ＜div＞
  9. ＜inputtype="hidden"name="__VIEWSTATE"id="__VIEWSTATE"
    value="/wEPDwUKMTY1NDU2MTA1MmRkPjWLPyqA5JXcW5ivHc0NiYajQTU="/＞
  10. ＜/div＞
  11. ＜div＞
  12. este é o cabeçalho da página＜br/＞
  13. ＜tabela＞
  14. ＜tr＞
  15. ＜td＞
  16. ohmyContent1
  17. ＜/td＞
  18. ＜td＞
  19. himyContent2
  20. ＜/td＞
  21. ＜/tr＞
  22. ＜ /table＞
  23. thisisthepage'sfooter&nbsp
  24. ＜/div＞
  25. ＜/form＞
  26. ＜/body＞
  27. ＜/html＞

12. Use-o de maneira flexível. Embora o CSS também possa usar DIV para resolver esse problema, a aparência de alguns controles não padrão é difícil de controlar com CSS. Se você fizer outro conjunto de mestres, MasterPage2.master, poderá usar configurações dinâmicas médias:

protegido void Page_PreInit (remetente do objeto, EventArgs e)
{
MasterPageFile = "~/MasterPage2.master";
}

Vamos aqui primeiro. Diz-se que aplicativos aninhados também podem ser usados, mas por enquanto vamos usá-los em conjunto com o tema.
Artigos Relacionados