Inicio>Tutorial de programación de red>Tutorial de ASP.NET

Explicación detallada de la página maestra en ASP.NET 2.0

Autor：Eve Cole Fecha de actualización：2009-06-30 16:37:05
Para reducir el problema de cambiar todo el sitio al cambiar una página durante el diseño web, se agregó el concepto de maestro después de que vs2003 se actualizó a vs2005.

Puede considerarlo como una "plantilla de página web". La diferencia es que ya no necesita actualizar cada página. Una vez que la modifique, todas las páginas web se cambiarán de una vez por todas.

Comencemos con una demostración de uso maestro simple:

1. Primero abra Visual Studio 2005, cree un nuevo sitio web asp.net, sistema de archivos, C#.

2. En el Explorador de soluciones, haga clic derecho para crear un nuevo elemento:



3. Seleccione la página maestra:



4. Abra MasterPage.master, hay un control de marcador de contenido dentro, tenga cuidado de no escribir nada en el control.

Vamos a la vista de diseño y agregamos texto de encabezado y pie de página fuera de este control.



5. Después de guardar, podemos usarlo para crear otras páginas. Hay dos métodos: 1. Haga clic derecho en cualquier lugar de la página maestra y haga clic en Agregar página de contenido. 2. Cree un nuevo elemento en el Explorador de soluciones y marque "Seleccionar página maestra" al generar la página aspx.



6. Seleccione la página maestra correspondiente.



7. Solo hay estas pocas oraciones en el código fuente de la página recién generada:


  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 un control de contenido, que corresponde al control ContentPlaceHolder1 de la página maestra y se convierte a la página de visualización:



8. El texto del encabezado y pie de página es gris y solo podemos editarlo en el contenido.

Después de guardar, visite la página default2.aspx, F5., vemos la página:


9. Como era de esperar, echemos un vistazo al código fuente:


  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 es el encabezado de la página＜br/＞
  13. el contenido de esta página: ¡hola, mundo!＜br/＞ este es el
  14. pie de página de la página＜/div＞
  15. forma＞
  16. ＜/cuerpo＞
  17. ＜/html＞

El contenido maestro se coloca en un div, pero la página de contenido no se coloca en un div separado, lo que significa que no se agregará ningún código redundante a las subpáginas del maestro. Esto nos brinda una gran flexibilidad en la programación y el diseño de páginas web. Podemos aprovechar al máximo el posicionamiento CSS + DIV y también podemos utilizar el posicionamiento de tablas. No es necesario modificar cada página al modificar.

10. Para un maestro que no es una pieza de contenido fijo, podemos usar múltiples ContentPlaceHolder1 para el diseño. El siguiente ejemplo usa una tabla para el posicionamiento:



11. Habrá dos contenidos en la subpágina correspondiente:



Código generado:


  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 es el encabezado de
  12. la página＜br/＞
  13. ＜table＞
  14. ＜tr＞
  15. ＜td＞
  16. ohmyContent1
  17. ＜/td＞
  18. ＜td＞
  19. himyContent2
  20. ＜/td＞
  21. ＜/tr＞
  22. ＜ /table＞
  23. este es el pie de página de la página
  24. ＜/div＞
  25. ＜/form＞
  26. ＜/body＞
  27. ＜/html＞

12. Úselo de manera flexible. Aunque CSS también puede usar DIV para resolver este problema, la apariencia de algunos controles no estándar es difícil de controlar con CSS. Si crea otro conjunto de maestros, MasterPage2.master, puede configurar la dinámica media:

Page_PreInit vacío protegido (remitente del objeto, EventArgs e)
{
MasterPageFile = "~/MasterPage2.master";
}

Vayamos aquí primero. Se dice que también se pueden usar aplicaciones anidadas, pero es suficiente por ahora, usémoslas junto con el tema la próxima vez.