Tutorial: Usar páginas maestras anidadas en ASP.NET
Actualización: noviembre 2007
Este tutorial describe cómo crear una página maestra que está anidada dentro de otra página maestra. Las páginas maestras funcionan como plantillas que especifican el aspecto de las páginas.
Puede anidar las páginas maestras de forma que cada una de ellas tenga un diseño flexible pero, al mismo tiempo, mantengan un aspecto uniforme en un sitio web. Por ejemplo, podría crear una página maestra primaria que tenga una pancarta de la compañía en la parte superior y controles de navegación en una columna lateral. A continuación, podría crear una página maestra secundaria para un departamento o producto concreto que utiliza la página maestra primaria. También podría actuar como página maestra para todas las demás páginas de departamento o de producto relacionadas. De esta manera, cada línea del producto o departamento tiene un aspecto uniforme y todas las páginas tienen un aspecto general uniforme gracias a la utilización de la página maestra primaria. Para obtener más información sobre las páginas principales, vea Información general sobre las páginas principales ASP.NET.
En este tutorial se muestran las siguientes tareas:
Crear una página maestra
Crear una página maestra que está anidada dentro de otra página maestra.
Crear una página ASP.NET con contenido que desea mostrar en la página principal.
Requisitos previos
Para completar este tutorial, necesitará lo siguiente:
Visual Studio 2008 o Microsoft Visual Web Developer Express. Para obtener información sobre las descargas, visite el sitio web Visual Studio Developer Center.
.NET Framework versión 3.5.
Opcionalmente, un archivo .jpg, .gif u otro archivo gráfico que pueda utilizar como pancarta en la página maestra. Se recomienda que la pancarta no tenga más de 780 píxeles de ancho y 150 píxeles de alto. Sin embargo, mostrar un logotipo es opcional y el tamaño exacto del gráfico no es importante para completar el tutorial.
Crear un sitio Web
Si ya ha creado un sitio web en Visual Web Developer (por ejemplo, según los pasos indicados en Tutorial: Crear una página Web básica en Visual Web Developer), puede utilizarlo y pasar a la siguiente sección, "Crear la página maestra". De lo contrario, cree un sitio web y una página nuevos siguiendo estos pasos.
Para crear un sitio web de sistema de archivos
Abra Visual Web Developer.
En el menú Archivo, haga clic en NuevoSitio Web.
Se muestra el cuadro de diálogo Nuevo sitio Web.
En Plantillas instaladas de Visual Studio, haga clic en Sitio Web ASP.NET.
En el cuadro Ubicación, especifique el nombre de la carpeta en la que desea guardar las páginas de su sitio web.
Por ejemplo, podría escribir lo siguiente: C:\Tasks
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Aceptar.
Visual Web Developer crea la carpeta y una página nueva denominada Default.aspx.
Crear una página maestra primaria
En esta sección se crea una página maestra primaria. Esta página contiene una pancarta y controles de navegación que se pueden utilizar en todo el sitio. Después, creará otra página maestra que se utilizará dentro de esta página maestra primaria. Las páginas maestras secundarias proporcionan diferentes diseños a las páginas, manteniendo al mismo tiempo la apariencia establecida por la página maestra primaria.
Para crear la página principal
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio web y, a continuación, haga clic en AgregarNuevo elemento.
Se abrirá el cuadro de diálogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Página principal.
En el cuadro Nombre, escriba ParentMaster.
Desactive la casilla Colocar el código en un archivo independiente.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Agregar.
La nueva página maestra se abre en la vista Código fuente.
Agregar elementos a la página maestra primaria
En la parte superior de la página maestra hay una declaración @ Master en lugar de la declaración @ Page que normalmente se encuentra en la parte superior de las páginas ASP.NET. El cuerpo de la página contiene un control ContentPlaceHolder, que es el área de la página maestra donde se combinará el contenido reemplazable con las páginas de contenido en tiempo de ejecución. En el tutorial, más adelante volverá a trabajar con los marcadores de posición de contenido.
Agregar gráficos a la página maestra primaria
Antes de poder incorporar gráficos a la página maestra primaria, tiene que agregar los archivos gráficos al sitio web.
Cree un gráfico de 780 píxeles de ancho y 150 píxeles de alto para la pancarta y un gráfico de 780 píxeles de ancho y 50 píxeles de alto para el pie de página. Estos gráficos se utilizan para mostrar cómo aparecerán los gráficos de la página maestra primaria en una página maestra anidada. Si no tiene estos gráficos, puede crearlos en Microsoft Paint u otro programa de gráficos.
Para agregar un archivo gráfico existente al sitio web
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio web y, a continuación, seleccione Agregar elemento existente.
Se mostrará el cuadro de diálogo Agregar elemento existente.
Seleccione los archivos gráficos creados.
Haga clic en Agregar.
En la página maestra primaria, agregue dos gráficos simples, uno para la pancarta y el otro para el pie de página. Estos gráficos permiten ver que la página maestra primaria se está utilizando en las páginas maestras anidadas que creará más adelante en este tutorial.
Para agregar a la página maestra primaria los gráficos para la pancarta y pie de página
En vista Código fuente, inmediatamente después de la etiqueta de apertura <form>, agregue un elemento div que contiene un elemento img para el gráfico de la pancarta.
Por ejemplo, si creó un gráfico denominado Banner.gif, el marcado para agregar este gráfico sería como éste:
<div id="banner"> <img src="banner.gif" alt="banner graphic" /> </div>Inmediatamente antes de la etiqueta de cierre </form>, agregue un elemento div que contiene un elemento img para el gráfico del pie de página.
Por ejemplo, si creó un gráfico denominado Footer.gif, el marcado para agregar este gráfico sería como éste:
<div id="banner"> <img src="footer.gif" alt="footer graphic" /> </div>Guarde la página maestra.
Observe que no ha agregado nada dentro del control ContentPlaceHolder. El conjunto siguiente de páginas maestras que cree estará dentro del control ContentPlaceHolder.
Crear una página maestra secundaria
Para anidar una página maestra dentro de otra, debe crear otra página maestra. La nueva página maestra estará dentro del marcador de posición de contenido de la página maestra primaria. La página maestra secundaria permite organizar la página de maneras diferentes manteniendo un aspecto uniforme establecido por la página maestra primaria.
Para crear la página maestra secundaria
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio web y, a continuación, haga clic en AgregarNuevo elemento.
Se abrirá el cuadro de diálogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Página principal.
En el cuadro Nombre, escriba ChildMaster.
Desactive la casilla Colocar el código en un archivo independiente.
Active la casilla Seleccionar la página principal.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Agregar.
Aparece el cuadro de diálogo Seleccionar una página maestra.
Seleccione la página maestra primaria creada anteriormente en este tutorial.
Haga clic en Aceptar.
La nueva página maestra se abre en la vista Código fuente.
Observe que la declaración @ Master situada en la parte superior de la nueva página maestra indica que hace referencia a una página maestra.
Agregar controles ContentPlaceHolder a la página maestra secundaria
Debido a que la página maestra secundaria tiene otra página maestra asociada a ella, contiene dos controles Content. El primer marcador de posición de contenido se puede utilizar para agregar a la página información que normalmente aparecería en el elemento head, como un elemento script. Dentro del segundo control Content puede agregar un control ContentPlaceHolder. Esto permite a una página ASP.NET que utiliza la página maestra secundaria proporcionar el contenido de la página. Puede agregar otros elementos de página dentro del control Content. La página maestra secundaria puede contener elementos de página adicionales para dar un aspecto uniforme a las páginas que utilizan esta página maestra secundaria.
Para agregar controles ContentPlaceHolder a la página maestra secundaria
Abra o cambie a la página maestra secundaria.
Cambie a la vista Código fuente.
Agregue el siguiente marcado dentro de la sección del segundo control Content para crear los controles ContentPlaceHolder:
<div id="2col"> <asp:ContentPlaceHolder ID="leftcolumn" > </asp:ContentPlaceHolder> <asp:ContentPlaceHolder ID="rightcolumn" > </asp:ContentPlaceHolder> </div>Guarde el archivo.
Ahora, la página maestra secundaria tiene controles ContentPlaceHolder que contiene el marcado de una página ASP.NET que utiliza la página maestra secundaria.
Crear una página de contenido que utiliza la página maestra secundaria
En los pasos anteriores, se creó una página maestra que está anidada dentro de otra página maestra. La página maestra secundaria resultante permite utilizar los elementos de la interfaz de usuario de la página maestra primaria. También proporciona los elementos adicionales de la interfaz de usuario de la segunda página maestra. En este tutorial, se agregaron gráficos a la página maestra primaria y marcadores de posición a la segunda página maestra. Para ver las páginas maestra anidadas en acción, tiene que crear una página web ASP.NET que utilice la página maestra secundaria. La nueva página creada que utiliza la página maestra secundaria contendrá automáticamente un control Content para cada control ContentPlaceHolder creado en la página maestra secundaria.
Para crear una página que utiliza la página maestra secundaria
En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del sitio web y, a continuación, haga clic en AgregarNuevo elemento.
Se abrirá el cuadro de diálogo Agregar nuevo elemento.
En Plantillas instaladas de Visual Studio, haga clic en Web Forms.
En el cuadro Nombre, escriba Tasks.
Active la casilla Colocar el código en un archivo independiente.
Active la casilla Seleccionar la página principal.
En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
Haga clic en Agregar.
En el cuadro de diálogo Seleccionar una página maestra, seleccione la página maestra secundaria creada anteriormente en este tutorial.
Haga clic en Aceptar.
La nueva página de contenido se abre en la vista Código fuente.
Cambie el identificador del primer control Content a leftcolumn y cambie el identificador del segundo control Content a rightcolumn.
Agregue texto o elementos de página a los controles Content de la columna izquierda o derecha.
Presione CTRL+F5 para ejecutar el sitio Web.
Observe que la página Tasks.aspx muestra una combinación de todos los elementos creados en este tutorial. Se incluyen los gráficos en la página maestra primaria, el diseño de dos columnas en la página maestra secundaria y el texto y los controles agregados a la página Tasks.aspx.
Pasos siguientes
Ahora que ha visto cómo funcionan las páginas maestras anidadas, puede crear otras páginas maestras secundarias que utilicen la página maestra primaria. La página maestra secundaria creada en este tutorial ofrece un diseño de dos columnas. Otra página maestra secundaria que cree para la página maestra primaria podría ofrecer un diseño de una sola columna o algún otro diseño.