Páginas maestras

de Microsoft

Uno de los componentes clave de un sitio web exitoso es una apariencia coherente. En ASP.NET 1.x, los desarrolladores usaron controles de usuario para replicar elementos de página comunes en una aplicación web. Aunque es ciertamente una solución que se puede trabajar, el uso de controles de usuario tiene algunas desventajas. Por ejemplo, un cambio en la posición de un control de usuario requiere un cambio en varias páginas de un sitio. Los controles de usuario tampoco se representan en la vista Diseño después de insertarse en una página.

Uno de los componentes clave de un sitio web exitoso es una apariencia coherente. En ASP.NET 1.x, los desarrolladores usaron controles de usuario para replicar elementos de página comunes en una aplicación web. Aunque es ciertamente una solución que se puede trabajar, el uso de controles de usuario tiene algunas desventajas. Por ejemplo, un cambio en la posición de un control de usuario requiere un cambio en varias páginas de un sitio. Los controles de usuario tampoco se representan en la vista Diseño después de insertarse en una página.

ASP.NET 2.0 presenta las páginas maestras como una manera de mantener un aspecto coherente, y como pronto verá, las páginas maestras representan una mejora significativa sobre el método de control de usuario.

¿Por qué usar páginas maestras?

Es posible que se pregunte por qué se necesitaban páginas maestras en ASP.NET 2.0. Al fin y al cabo, los desarrolladores de sitios web ya usan controles de usuario en ASP.NET 1.x para compartir áreas de contenido entre páginas. En realidad, hay varias razones por las que los controles de usuario son una solución menos óptima para crear un diseño común.

Los controles de usuario no definen realmente el diseño de página. En su lugar, definen el diseño y la funcionalidad de una parte de una página. La distinción entre estos dos es importante porque hace que la manejabilidad de una solución de control de usuario sea mucho más difícil. Por ejemplo, si quiere cambiar la posición de un control de usuario en la página, debe editar la página real en la que aparece el control de usuario. Esto está bien si solo tiene unas pocas páginas, pero en sitios grandes, se convierte rápidamente en un problema de administración del sitio.

Otro inconveniente de usar controles de usuario para definir un diseño común se basa en la propia arquitectura de ASP.NET. Si se cambia algún miembro público de un control de usuario, es necesario volver a compilar todas las páginas que usan el control de usuario. A su vez, ASP.NET volverá a compilar con JIT las páginas cuando se acceda por primera vez. Esto, una vez más, genera una arquitectura no escalable y un problema de administración del sitio para los sitios más grandes.

Estos problemas (y muchos más) se solucionan con las páginas maestras en ASP.NET 2.0.

Funcionamiento de las páginas maestras

Una página maestra es análoga a una plantilla para otras páginas. Los elementos de página que se deben compartir entre otras páginas (por ejemplo, menús, bordes, etc.) se agregan a la página maestra. Cuando se agregan nuevas páginas al sitio, puede asociarlas a una página maestra. Una página asociada a una página maestra se denomina página de contenido. De forma predeterminada, las páginas de contenido toman la apariencia de la página maestra. Sin embargo, al crear una página maestra, puede definir partes de la página que la página de contenido puede reemplazar por su propio contenido. Estas partes se definen mediante un nuevo control introducido en ASP.NET 2.0; el control ContentPlaceHolder.

Una página maestra puede contener cualquier número de controles ContentPlaceHolder (o ninguno). En la página de contenido, el contenido de los controles ContentPlaceHolder aparece dentro de los controles Content, otro nuevo control en ASP.NET 2.0. De forma predeterminada, los controles Content de las páginas de contenido están vacíos para que pueda proporcionar su propio contenido. Si quiere usar el contenido de la página maestra dentro de los controles Content, puede hacerlo como verá más adelante en este módulo. El control Content se asigna al control ContentPlaceHolder mediante el atributo ContentPlaceHolderID del control Content. El código siguiente asigna un control Content a un control ContentPlaceHolder denominado mainBody en una página maestra.

<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">

Nota:

A menudo oirá a la gente describir las páginas maestras como una clase base para otras páginas. Esto no es así. La relación entre las páginas maestras y las páginas de contenido no es de herencia.

En la Figura 1 se muestra una página maestra y una página de contenido asociada tal como aparecen en Visual Studio 2005. Puede ver el control ContentPlaceHolder en la página maestra y el control Content correspondiente en la página de contenido. Observe que el contenido de las páginas maestras que está fuera de ContentPlaceHolder está visible pero atenuado en la página de contenido. Solo la página de contenido puede suplantar el contenido dentro de ContentPlaceHolder. El resto de contenido procedente de la página maestra es inmutable.

Figura 1: una página maestra y su página de contenido asociada

Creación de una página maestra

Para crear una página maestra nueva:

1. Abra Visual Studio 2005 y cree un nuevo sitio web.
2. Haga clic en Archivo, Nuevo, Archivo.
3. Elija Archivo maestro en el cuadro de diálogo Agregar nuevo elemento como se muestra en la figura 2.
4. Haga clic en Agregar.

Figura 2: creación de una nueva página maestra

Observe que la extensión de archivo de una página maestra es .master. Esta es una de las formas en que una página maestra difiere de una página normal. La otra diferencia principal es que, en lugar de una directiva @Page, la página maestra contiene una directiva @Master. Cambie a Vista de origen para la página maestra que acaba de crear y revise el código.

Una página maestra nueva tendrá un control ContentPlaceHolder de forma predeterminada. En la mayoría de los casos, tiene más sentido crear primero los elementos de página comunes y, a continuación, insertar controles ContentPlaceHolder donde se quiera añadir contenido personalizado. En esos casos, los desarrolladores querrán eliminar el control ContentPlaceHolder predeterminado e insertar otros nuevos a medida que se desarrolla la página. Los controles ContentPlaceHolder no se pueden cambiar de tamaño a pesar del hecho de que muestran controladores de tamaño. El control ContentPlaceHolder se redimensiona automáticamente basándose en el contenido que contiene con una excepción; si coloca un control ContentPlaceHolder dentro de un elemento de bloque, como una celda de tabla, se ajustará según el tamaño del elemento.

Laboratorio 1 Trabajo con páginas maestras

En este laboratorio, creará una página maestra nueva y definirá tres controles ContentPlaceHolder. A continuación, creará una nueva página de contenido y reemplazará el contenido de al menos uno de los controles ContentPlaceHolder.

1. Cree una página maestra e inserte controles ContentPlaceHolder.

   1. Cree una página maestra como se describió anteriormente.
   2. Elimine el control ContentPlaceHolder predeterminado.
   3. Seleccione el control ContentPlaceHolder haciendo clic en el borde superior sombreado del control y, a continuación, elimínelo pulsando la tecla SUPR en el teclado.
   4. Inserte una nueva tabla con la plantilla Encabezado y lateral, como se muestra en la figura 3. Cambie el ancho y el alto a un 90 % cada uno para que toda la tabla esté visible en el diseñador.

Ilustración 3

1. Coloque el cursor en cada celda de la tabla y establezca la propiedad valign en la parte superior.
2. En el Cuadro de herramientas, inserte un control ContentPlaceHolder en la celda superior de la tabla (la celda de encabezado).
3. Al insertar este control ContentPlaceHolder, observará que la altura de fila ocupará casi toda la página, como se muestra en la figura 4. No se preocupe por esto ahora.

Figura 4: el espacio vacío está en la misma celda que ContentPlaceHolder

1. Coloque un control ContentPlaceHolder en las otras dos celdas. Una vez insertados los demás controles ContentPlaceHolder, el tamaño de las celdas de la tabla debe ser el esperado. La página debería tener ahora un aspecto similar a la página que se muestra en la figura 5.

Figura 5: página principal con todos los controles ContentPlaceHolder. Observe que la altura de la celda de encabezado es ahora el adecuado

1. Escriba algún texto de su elección en cada uno de los tres controles ContentPlaceHolder.
2. Guarde la página maestra como ejercicio1.master.
3. Cree un formulario web nuevo y asócielo a la página maestra ejercicio1.master.
4. En Visual Studio 2005, seleccione Archivo, Nuevo, Archivo.
5. Seleccione Formulario web en el cuadro de diálogo Agregar nuevo elemento.
6. Asegúrese de que la casilla Seleccionar página maestra esté activada como se muestra en la figura 6.

Figura 6: Adición de una nueva página de contenido

1. Haga clic en Agregar.
2. Seleccione ejercicio1.master en el cuadro de diálogo Seleccionar una página maestra como se muestra en la figura 7.
3. Haga clic en Aceptar para agregar la página de contenido nueva.

La nueva página de contenido aparece en Visual Studio con un control Content para cada control ContentPlaceHolder de la página maestra. De forma predeterminada, los controles Content están vacíos para que pueda añadir su propio contenido. Si quiere que usen el contenido del control ContentPlaceHolder en la página maestra, simplemente haga clic en el símbolo de etiqueta inteligente (la flecha negra pequeña en la esquina superior derecha del control) y elija Default to Masters Content (Usar como predeterminado el contenido del principal) de la etiqueta inteligente como se muestra en la figura 8. Al hacerlo, el elemento de menú cambia a Crear contenido personalizado. Al hacer clic en él, se quita el contenido de la página maestra, lo que le permite definir contenido personalizado para ese control de contenido concreto.

Figura 7: establecimiento de un control de contenido en Predeterminado para el contenido de las páginas maestras

Conexión de página maestra con páginas de contenido

La asociación entre una página maestra y una página de contenido se puede configurar de cuatro maneras diferentes:

• Atributo MasterPageFile de la directiva @Page
• Estableciendo la propiedad Page.MasterPageFile en el código.
• Elemento <pages> del archivo de configuración de la aplicación (web.config en la carpeta raíz de la aplicación)
• Elemento <pages> de un archivo de configuración de una subcarpeta (web.config en una subcarpeta)

Atributo MasterPageFile

El atributo MasterPageFile facilita la aplicación de una página maestra a una página ASP.NET determinada. También es el método que se usa para aplicar la página maestra al activar la casilla Seleccionar página maestra como hizo en el ejercicio 1.

Establecimiento de Page.MasterPageFile en el código

Al establecer la propiedad MasterPageFile en el código, puede aplicar una página maestra determinada al contenido en tiempo de ejecución. Esto es útil en los casos en los que es posible que necesite aplicar una página maestra específica basada en un rol de usuario o en algún otro criterio. La propiedad MasterPageFile debe establecerse en el método PreInit. Si se establece después del método PreInit, se producirá una excepción InvalidOperationException. La página en la que se establece esta propiedad también debe tener un control Content como control de nivel superior para la página. De lo contrario, se producirá una excepción HttpException cuando se establezca la propiedad MasterPageFile.

Uso del elemento <pages>

Puede configurar una página maestra para las páginas estableciendo el atributo masterPageFile en el elemento <pages> del archivo web.config. Al usar este método, tenga en cuenta que los archivos web.config inferiores en la estructura de la aplicación pueden invalidar esta configuración. Cualquier atributo MasterPageFile establecido en una directiva @Page también invalidará esta configuración. El uso del elemento <pages> facilita la creación de una página maestra master que se puede invalidar si es necesario en carpetas o archivos concretos.

Propiedades en páginas maestras

Una página maestra puede exponer propiedades simplemente haciendo que esas propiedades sean públicas dentro de la página maestra. Por ejemplo, el código siguiente define una propiedad denominada SomeProperty:

private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }

Para acceder a la propiedad SomeProperty desde la página Contenido, deberá usar la propiedad Master de la siguiente manera:

void Page_Load() { Master.SomeProperty = "Master Page Property"; }

Anidación de páginas maestras

Las páginas maestras son la solución perfecta para garantizar una apariencia común en una aplicación web grande. Sin embargo, no es raro que ciertas partes de un sitio grande compartan una interfaz común, mientras que otras partes comparten una interfaz diferente. Para solucionar esa necesidad, la solución perfecta es utilizar múltiples páginas maestras. Sin embargo, esto todavía no aborda el hecho de que una aplicación grande puede tener determinados componentes (por ejemplo, un menú) que se comparten entre todas las páginas y otros componentes que se comparten solo entre determinadas secciones del sitio. Para ese tipo de situación, las páginas maestras anidadas cumplen esta necesidad. Como ha visto, una página maestra normal consta de una página maestra y una página de contenido. En una situación de página maestra anidada, hay dos páginas maestras; una página maestra principal y una secundaria. La página maestra secundaria también es una página de contenido y su página maestra es la página maestra principal.

Este es el código de una página maestra típica:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>

En un escenario en el que hay una página maestra anidada, sería la página maestra principal. Otra página maestra usaría esta página como página maestra y ese código tendría este aspecto:

<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>

Tenga en cuenta que, en este escenario, la página maestra secundaria también es una página de contenido para la página maestra principal. Todo el contenido de la página maestra secundaria aparece dentro de un control Content que obtiene su contenido del control ContentPlaceHolder de la página principal.

Nota:

El diseñador no es compatible con las páginas maestras anidadas. Al desarrollar mediante patrones anidados, deberá usar la vista de origen.

En este vídeo se muestra un tutorial sobre el uso de páginas maestras anidadas.

Abrir vídeo en pantalla completa

Figura 8: Selección de una página maestra