Tutorial de ASP.NET
Vista Previa de ASP.NET 2.0

Creación de un Diseño Mediante Master Pages

Lo Nuevo en 2.0

  • Master Pages (Páginas Maestras) - La característica de las "Master Pages" nos proporciona la habilidad de definir una estructura y unos elementos de interfaz comunes para nuestro sitio, tales como la cabecera de página o la barra de navegación, en una ubicación común denominada "master page", para ser compartidos por varias páginas del sitio. Ésto mejora la mantenibilidad de nuestro sitio y evita la duplicación innecesaria de código para estructuras o comportamientos del sitio que son compartidos.
Esta sección habla de la característica de las "Master Pages" en ASP.NET 2.0.


Al igual que los Temas y Skins nos permiten factorizar las definiciones de estilo para el código de nuestra página y mantenerlos en un fichero común, las Master Pages o Páginas Maestras nos permiten lo mismo para el diseño de la página. Una Master Page es una página que contiene marcas y controles que deben ser compartidas a través de páginas múltiples de nuestro sitio. Por ejemplo, si todas las págins deben tener los mismos banners de cabecera y pie de página o el mismo menú de navegación, podemos definir ésto en una Master Page una vez, de forma que todas las páginas asociadas a dicha Master Page heredarán estos elementos comunes. La ventaja de definir la cabecera, el pie de página y la navegación en una Master Page es que estos elementos sólo tendrán que ser definidos una vez, en lugar de muchas veces y en código duplicado en las diferentes páginas del sitio.

Master Pages y Content Pages

La definición de una Master Page es como la de cualquir página. Las Master Pages pueden contener marcar, controles, código o cualquier combinación de estos elementos. Sin embargo, una Master Page puede contener un tipo especial de control llamado ContentPlaceHolder. Un ContentPlaceHolder define una región de la representación de la master page que puede substituirse por el contenido de una página asociada a la maestra. Un ContentPaceHolder también puede contener contenido por defecto, por si la página derivada no necesita sobreescribir este contenido. La sintaxis de un control ContentPlaceHolder es como sigue:

<%-- ContentPlaceHolder control --%>
<asp:contentplaceholder id="FlowerText" runat="server"/>

<%-- ContentPlaceHolder with default content --%>
<asp:contentplaceholder id="FlowerText" runat="server">
<h3>Welcome to my florist website!</h3>
</asp:contentplaceholder>

Para diferenciar una Master Page de una página normal, la Master Page se guarda con una extensión .master. Una página puede derivar de una Master Page simplemente con definir un atributo MasterPageFile en su directiva Page, de la forma vista arriba. Una página que se asocia a una Master Page se llama Content Page (Página de Contenido)

<%@ Page MasterPageFile="Site.master" %>

Una Content Page puede declarar controles Content que sobreescriban específicamente el contenido de las secciones marcadas en la Master Page. Un control Content se asocia a un control ContentPlaceHolder particular a través de la propiedad ContentPlaceHolderID. Una Content Page debe contener marcas y controles sólo dentro de los controles Content; no puede tener ningún contenido de alto nivel por si misma. Puede, sin embargo, tener directivas o código del lado del servidor.

<%@ Page MasterPageFile="Site.master" %>

<asp:content id="Content1" contentplaceholderid="FlowerText" runat="server">
With sunshine, water, and careful tending, roses will bloom several times in a season.
</asp:content>
<asp:content id="Content2" contentplaceholderid="FlowerPicture" runat="server">
<asp:Image id="image1" imageurl="~/images/rose.jpg" runat="server"/>
</asp:content>

El siguiente ejemplo muestra la relación entre las Master Pages y las Content Pages. La Master Page define, en este caso, dos regiones ContentPlaceHolder llamadas FlowerPicture y FlowerText, con algo de contenido por defecto para dichas regiones. Las páginas individuales de contenido del sitio heredan el diseño común de sitio y el "ambiente" de la Master Page, pero sobreescriben el contenido por defecto de las regiones ContentPlaceHolder con su propio contenido. Observad que la página Default.aspx del sitio no define ningún control Content, de forma que heredo el contenido por defecto de la Master Page.

C# Master Pages y Content Pages


"URL Rebasing" en Master Pages

Una cosa a observar sobre los ejemplos anteriores es que hay varias páginas en una Master Page que hacen referencia a recursos URL, como imágenes, hojas de estilo o referencias a páginas, mediante la sintaxis de rutas relativas, por ejemplo:

<head>
<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
</head>
...
<a href="daffodil.aspx">Daffodil</a>
...
<img alt="water lilies" src="Images/waterlilies.jpg"/>

Ésto funciona cuando la Master Page y la Content Page se encuentran en el mismo directorio, pero cuanto la Content Page se encuantra en una ubicación distina, la ruta relativa no será correcta. Para solucionar este problema, podemos escoger una de las siguientes propuestas:
  • Utilizar rutas URL absolutas en la Master Page, por ejemplo <img src="/myapplication/images/banner.gif" />
  • Utilizar URLS relativas o URLs relativas de aplicación en los controles de servidor en lugar de marcas estáticas, por ejemplo <asp:Image ImageUrl="~/images/banner.gif" runat="server" />
El siguiente ejemplo muestra esta técnica. Las Páginas de Contenido han sido movidas el subdirectorio "Pages" bajo el directorio que contiene la Página Maestra. La Página Maestra se ha actualizado para utilizar controles de servidor en lugar de HTML:

<head runat="server">
<link rel="stylesheet" href="StyleSheet.css" type="text/css" />
</head>
...
<a id="A1" href="pages/daffodil.aspx" runat="server">Daffodil</a/>
...
<asp:Image ID="Image1" AlternateText="Water Lillies" ImageUrl="~/Images/Waterlilies.jpg" runat="server"/>

C# Mapeo de URL en Master Pages


Accediendo a una Master Page desde Código

Además de sobreescribir el contenido, es posible que la Content Page acceda de forma programada a su Master Page. Una Content Page crea una referencia fuertemente tipada a la Master Page mediante la directiva <%@ MasterType %>, especificando la ruta virtual de la página maestra:
<%@ MasterType VirtualPath="Site.master" %>
Por lo tanto, la Content Page puede referenciar la Master Page mediante la propiedad Master de la clase Page:

Master.FooterText = "This is a custom footer";
AdRotator ad = (AdRotator)Master.FindControl("MyAdRotator");

En el ejemplo de código anterior, FooterText es una propiedad publica expuesta en la Master Page, mientras que MyAdRotator es un control de la Master Page. El siguiente ejemplo muestra este código en acción:

C# Accessing Master Pages in Code


Anidando Master Pages

Las Content Pages también pueden ser Master Pages. Ésto quiere decir que es posible derivar una Master Page a partir de otra Master Page. Por ejemplo, podríamos tener una Master Page de primer nivel que represente la cabecera/pie de página y la navegación global del sitio, y después Master Pages separadas que deriven de esta Master para definir los aspectos de las diferentes sub-secciones del sitio. Las Content Pages derivarán de la página maestra correspondiente a la sección a la que pertenece la Content Page. El siguiente ejemplo muestra esta idea, dividiendo el sitio de ejemplo de en dos secciones, Annuals y Perrennials.

C# Nested Master Pages