Información general sobre las páginas principales ASP.NET

  • Artículo

Actualización: noviembre 2007

Las páginas principales de ASP.NET permiten crear un diseño coherente para las páginas de la aplicación. Puede definir el aspecto, el diseño y el comportamiento estándar que desea que tengan todas las páginas (o un grupo de páginas) de la aplicación en una sola página principal. A continuación, puede crear páginas de contenido individuales que incluyan el contenido que desea mostrar. Cuando los usuarios solicitan las páginas de contenido, éstas se combinan con la página principal para dar como resultado una página con el diseño de la página principal y el contenido de la página de contenido.

Cómo funcionan las páginas principales

Las páginas principales se componen en realidad de dos partes, la propia página principal y una o varias páginas de contenido.

Nota:

También se pueden anidar páginas principales. Para obtener información detallada, vea Páginas principales ASP.NET anidadas.

Páginas principales

Una página principal es un archivo de ASP.NET con la extensión .master (por ejemplo, MySite.master) que tiene un diseño predefinido que puede incluir texto estático, elementos HTML y controles de servidor. La página principal se identifica mediante una directiva @ Master especial que reemplaza la directiva @ Page utilizada en las páginas .aspx ordinarias. El aspecto de la directiva es el siguiente:

<%@ Master Language="VB" %>

<%@ Master Language="C#" %>

La directiva @ Master puede contener prácticamente las mismas directivas que una directiva @ Control. Por ejemplo, la directiva de la página principal siguiente incluye el nombre de un archivo de código subyacente y asigna un nombre de clase a la página principal.

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

Además de la directiva @ Master, la página principal también incluye todos los elementos HTML de nivel superior de una página, como html, head y form. Por ejemplo, en una página principal podría utilizar una tabla HTML para el diseño, un elemento img para el logotipo de la compañía, texto estático para el aviso de copyright y controles de servidor para crear la navegación estándar en el sitio. Puede utilizar cualquier elemento HTML y ASP.NET en la página principal.

Marcadores de posición de contenido reemplazables

Además del texto estático y los controles que aparecerán en todas las páginas, la página principal también incluye uno o varios controles ContentPlaceHolder. Estos controles PlaceHolder definen las regiones que incluirán contenido reemplazable. A su vez, el contenido reemplazable se define en las páginas de contenido. Tras definir los controles ContentPlaceHolder, una página principal tendría el siguiente aspecto:

<% @ Master Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
    1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head  >
    <title>Master page title</title>
</head>
<body>
    <form id="form1" >
        <table>
            <tr>
                <td><asp:contentplaceholder id="Main"  /></td>
                <td><asp:contentplaceholder id="Footer"  /></td>
            </tr>
        </table>
    </form>
</body>
</html>

<%@ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 
    1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head  >
    <title>Master page title</title>
</head>
<body>
    <form id="form1" >
        <table>
           <tr>
               <td><asp:contentplaceholder id="Main"  /></td>
               <td><asp:contentplaceholder id="Footer"  /></td>
           </tr>
        </table>
    </form>
</body>
</html>

Páginas de contenido

Para definir el contenido de los controles PlaceHolder de la página principal, cree páginas de contenido individuales, que son páginas ASP.NET (archivos .aspx y, opcionalmente, archivos de código subyacente) que están enlazadas a una página principal concreta. El enlace se establece en la directiva @ Page de la página de contenido al incluir un atributo MasterPageFile que apunta a la página principal que se va a utilizar. Por ejemplo, una página de contenido podría tener la siguiente directiva @ Page, que la enlaza con la página Master1.master.

<%@ Page Language="VB" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page" %>

<%@ Page Language="C#" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page"%>

En la página de contenido, cree el contenido agregando los controles Content y asignándolos a los controles ContentPlaceHolder de la página principal. Por ejemplo, la página principal podría tener marcadores de posición de contenido denominados Main y Footer. En la página de contenido, puede crear dos controles Content, uno asignado al control ContentPlaceHolderMain y el otro asignado al control ContentPlaceHolderFooter, como se muestra en la ilustración siguiente.

Reemplazar el contenido del marcador de posición

Después de crear los controles Content, agrégueles texto y controles. En una página de contenido, todo lo que no esté dentro de los controles Content (excepto los bloques de script del código del servidor) producirá un error. En una página de contenido puede realizar las mismas tareas que en una página de ASP.NET. Por ejemplo, puede generar el contenido de un control Content utilizando controles de servidor y consultas de base de datos u otros mecanismos dinámicos.

Una página de contenido podría tener el siguiente aspecto:

<% @ Page Language="VB" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    Main content.
</asp:Content>
    
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >
    Footer content.
</asp:content>

[C#]

<% @ Page Language="C#" MasterPageFile="~/Master.master" Title="Content Page 1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">
    Main content.
</asp:Content>
    
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >
    Footer content.
</asp:content>

La directiva @ Page enlaza la página de contenido a una página principal concreta y define un título para la página que se combinará en la página principal. Tenga en cuenta que la página de contenido no incluye otro marcado fuera de los controles Content. (La página principal debe contener un elemento head con el atributo para que se pueda combinar la configuración del título en tiempo de ejecución.)

Puede crear varias páginas principales para definir diseños distintos para partes diferentes del sitio, y un conjunto diferente de páginas de contenido para cada página principal.

Ventajas de las páginas principales

Las páginas principales proporcionan una funcionalidad que tradicionalmente los programadores creaban copiando el código, el texto y los elementos de control existentes repetidamente, mediante conjuntos de marcos, archivos de inclusión de elementos comunes, controles de usuario de ASP.NET, etc. Entre las ventajas de las páginas principales se incluyen las siguientes:

  • Permiten centralizar las funciones comunes de las páginas para que las actualizaciones puedan llevarse a cabo en un solo lugar.

  • Facilitan la creación de un conjunto de controles y código, y aplican los resultados en un conjunto de páginas. Por ejemplo, puede utilizar los controles en la página principal para crear un menú que se aplique a todas las páginas.

  • Proporcionan un control más preciso sobre el diseño de la página final al permitir controlar el modo en que se representan los controles PlaceHolder.

  • Proporcionan un modelo de objetos que permite personalizar la página principal a partir de páginas de contenido individuales.

Comportamiento en tiempo de ejecución de las páginas principales

En tiempo de ejecución, las páginas principales se controlan en la secuencia siguiente:

  1. Los usuarios solicitan una página escribiendo la dirección URL de la página de contenido.

  2. Cuando se obtiene la página, se lee la directiva @ Page. Si la directiva hace referencia a una página principal, también se lee la página principal. Si las páginas se solicitan por primera vez, se compilan las dos páginas.

  3. La página principal con el contenido actualizado se combina en el árbol de control de la página de contenido.

  4. El contenido de los controles Content individuales se combina en el control ContentPlaceHolder correspondiente de la página principal.

  5. La página combinada resultante se representa en el explorador.

Este proceso se describe en el diagrama siguiente:

Páginas principales en tiempo de ejecución

Desde la perspectiva del usuario, la combinación de las páginas principales y de contenido da como resultado una única página. La dirección URL de esta página es la de la página de contenido.

Desde la perspectiva del programador, las dos páginas actúan como contenedores diferentes para sus respectivos controles. La página de contenido actúa como un contenedor de la página principal. Sin embargo, se puede hacer referencia a los miembros públicos de una página principal a partir del código de la página de contenido, tal y como se describe en la sección siguiente.

Tenga en cuenta que la página principal pasa a formar parte de la página de contenido. De hecho, la página principal actúa fundamentalmente de igual forma que un control de usuario: como un elemento secundario de la página de contenido y como un contenedor dentro de esa página. En este caso, sin embargo, la página principal es el contenedor de todos los controles de servidor representados en el explorador. El árbol de control de una página principal y una página de contenido combinadas tendrá un aspecto similar a:

Page
    Master Page
        (Master page markup and controls)
        ContentPlaceHolder
            Content page markup and server controls
        (Master page markup and controls)
        ContentPlaceHolder
            Content page markup and server controls
        (Master page markup and controls)

Esta diagrama está simplificado; si la página de contenido no tiene los controles Content correspondientes, la página principal también podría tener marcado y controles en los controles ContentPlaceHolder.

En general, esta estructura no tiene ningún efecto sobre el modo en que se crean o se programan las páginas. Sin embargo, en algunos casos, si establece una propiedad de toda la página en la página principal, puede verse afectado el comportamiento de la página de contenido, porque la página principal es el elemento principal más inmediato para los controles de la página. Por ejemplo, si establece la propiedad EnableViewState de la página de contenido en true pero establece la misma propiedad en false en la página principal, el estado de vista se deshabilitará porque la configuración de la página principal tendrá prioridad.

Rutas de acceso de la página principal y la página de contenido

Cuando se solicita una página de contenido, su contenido se combina con la página principal, y la página se ejecuta en el contexto de la página de contenido. Por ejemplo, si obtiene la propiedad CurrentExecutionFilePath del objeto HttpRequest ya sea en el código de la página de contenido o en el código de la página principal, la ruta de acceso representa la ubicación de la página de contenido.

La página principal y la página de contenido no tienen que estar en la misma carpeta. Siempre que el atributo MasterPageFile de la directiva @ Page de la página de contenido se resuelva como una página .master, ASP.NET puede combinar el contenido y las páginas principales en una sola página representada.

Referencias a recursos externos

La página de contenido y la página principal pueden contener controles y elementos que hagan referencia a recursos externos. Por ejemplo, las dos podrían contener controles de imagen que hicieran referencia a archivos de imágenes o podrían contener delimitadores que hicieran referencia a otras páginas.

El contexto de las páginas principales y de contenido combinadas es el de la página de contenido. Esto puede afectar al modo en que se especifican las direcciones URL de los recursos, como archivos de imágenes y páginas de destino, en los delimitadores.

Controles de servidor

En los controles de servidor de las páginas principales, ASP.NET modifica dinámicamente las direcciones URL de las propiedades que hacen referencia a recursos externos. Por ejemplo, podría situar un control Image en una página principal y establecer su propiedad ImageUrl para que hiciera referencia a la página principal. En tiempo de ejecución, ASP.NET modificará la dirección URL para que se resuelva correctamente en el contexto de la página de contenido.

ASP.NET puede modificar las direcciones URL en los casos siguientes:

  • La dirección URL es una propiedad de un control de servidor ASP.NET.

  • La propiedad se marca internamente en el control como una dirección URL. (La propiedad se marca con el atributo UrlPropertyAttribute.) Por cuestiones prácticas, las propiedades de los controles de servidor ASP.NET que se utilizan normalmente para hacer referencia a recursos externos se marcan de este modo.

Otros elementos

ASP.NET no puede modificar las direcciones URL de los elementos que no son controles de servidor. Por ejemplo, si utiliza un elemento img en una página principal y establece su atributo src en una dirección URL, ASP.NET no modificará esta dirección URL. En ese caso, la dirección URL se resolverá en el contexto de la página de contenido y se creará la dirección URL convenientemente.

En general, al trabajar con elementos en las páginas principales, resulta recomendable utilizar un control de servidor incluso para los elementos que no requieren código de servidor. Por ejemplo, en lugar de utilizar un elemento img, utilice un control de servidor Image. De este modo, ASP.NET puede resolver las direcciones URL correctamente y puede evitar los problemas de mantenimiento que podrían surgir al mover la página principal o la página de contenido.

Para obtener más información sobre cómo especificar las rutas de acceso en los controles de servidor ASP.NET, vea Rutas de acceso a sitios Web ASP.NET.

Páginas principales y temas

No puede aplicar directamente un tema de ASP.NET a una página principal. Si agrega un atributo de tema a la directiva @ Master, se producirá un error en la página cuando se ejecute.

Sin embargo, los temas se aplican a las páginas principales bajo estas circunstancias:

  • Si un tema está definido en la página de contenido. Las páginas principales se resuelven en el contexto de las páginas de contenido, por lo que el tema de la página de contenido también se aplica a la página principal.

  • Si todo el sitio se ha configurado para que utilice un tema incluyendo la definición de un tema en el elemento Elemento pages (Esquema de configuración de ASP.NET).

Para obtener más información, vea Información general sobre temas y máscaras de ASP.NET.

Ámbito de las páginas principales

Puede adjuntar páginas de contenido a una página principal en tres niveles:

  • En el nivel de la página   Puede utilizar una directiva de página en cada página de contenido para enlazarla a una página principal, como en el ejemplo de código siguiente.

    <%@ Page Language="VB" MasterPageFile="MySite.Master" %> 

    <%@ Page Language="C#" MasterPageFile="MySite.Master" %>

  • En el nivel de la aplicación   Al establecer la configuración del elemento pages del archivo de configuración de la aplicación (Web.config), puede especificar que todas las páginas de ASP.NET (archivos .aspx) de la aplicación se enlacen automáticamente a una página principal. El elemento podría tener el aspecto siguiente:

    <pages masterPageFile="MySite.Master" />

    Si utiliza esta estrategia, todas las páginas de ASP.NET de la aplicación que tengan controles Content se combinarán con la página principal especificada. (Si una página de ASP.NET no contiene controles Content, no se aplica la página principal.)

  • En el nivel de la carpeta   Esta estrategia es igual que la estrategia de definir enlaces en el nivel de la aplicación excepto en que la configuración se define en un archivo Web.config en una única carpeta. Los enlaces de la página principal se aplican a continuación a las páginas ASP.NET de dicha carpeta.

Vea también

Tareas

Cómo: Hacer referencia al contenido de la página principal ASP.NET

Cómo: Hacer referencia al contenido de la página principal ASP.NET

Conceptos

Eventos en páginas principales y páginas de contenido ASP.NET

Páginas principales ASP.NET anidadas