Tutorial: Usar páginas maestras anidadas en ASP.NET

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 maestras, vea Páginas maestras ASP.NET.

En este tutorial se muestran las tareas siguientes:

  • 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 maestra.

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.

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 Studio), puede utilizarlo y pasar a la siguiente sección, "Crear la página maestra". En caso contrario, cree un sitio web y una página nuevos.

En este tutorial se usa un proyecto de sitio web. No obstante, puede utilizar un proyecto de aplicación web si así lo desea. Para obtener información sobre la diferencia entre estos tipos de proyectos web, vea Proyectos de aplicación web frente a proyectos de sitio web.

Para crear un sitio web del sistema de archivos

  1. Abra Visual Web Developer.

  2. En el menú Archivo, haga clic en NuevoSitio Web.

    Se muestra el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, haga clic en Sitio web ASP.NET.

  4. 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

  5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

  6. Haga clic en Aceptar.

    Visual Web Developer crea la carpeta y una página nueva denominada Default.aspx.

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 maestra

  1. 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 Agregarnuevo elemento.

  2. En Plantillas instaladas de Visual Studio, haga clic en Página maestra.

  3. En el cuadro Nombre, escriba ParentMaster.

  4. Desactive la casilla Colocar el código en un archivo independiente.

  5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

  6. Haga clic en Agregar.

    La nueva página maestra se abre en la vista Código fuente.

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

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, seleccione Agregarelemento existente.

    Se mostrará el cuadro de diálogo Agregar elemento existente.

  2. Seleccione los archivos gráficos creados.

  3. 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

  1. 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>
    
  2. 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>
    
  3. 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.

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

  1. 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.

  2. En Plantillas instaladas de Visual Studio, haga clic en Página maestra.

  3. En el cuadro Nombre, escriba ChildMaster.

  4. Desactive la casilla Colocar el código en un archivo independiente.

  5. Active la casilla Seleccionar la página maestra.

  6. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

  7. Haga clic en Agregar.

    Aparece el cuadro de diálogo Seleccionar una página maestra.

  8. Seleccione la página maestra primaria creada anteriormente en este tutorial.

  9. 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

  1. Abra o cambie a la página maestra secundaria.

  2. Cambie a la vista Código fuente.

  3. 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" runat="server">
      </asp:ContentPlaceHolder>
      <asp:ContentPlaceHolder ID="rightcolumn" runat="server">
      </asp:ContentPlaceHolder>
    </div>
    
  4. 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.

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

  1. 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.

  2. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.

  3. En el cuadro Nombre, escriba Tasks.

  4. Active la casilla Colocar el código en un archivo independiente.

  5. Active la casilla Seleccionar la página maestra.

  6. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

  7. Haga clic en Agregar.

  8. En el cuadro de diálogo Seleccionar una página maestra, seleccione la página maestra secundaria creada anteriormente en este tutorial.

  9. Haga clic en Aceptar.

    La nueva página de contenido se abre en la vista Código fuente.

  10. Cambie el identificador del primer control Content a leftcolumn y el identificador del segundo control Content a rightcolumn.

  11. Agregue texto o elementos de página a los controles Content de la columna izquierda o derecha.

  12. 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.

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.

Mostrar: