En todas las tecnologías de desarrollo podemos encontrar mecanismos para evitar el problema de la repetición de código; algunas sencillas, como los includes de PHP y otras más sofisticadas, como Tiles o las Master page (Página principal, en Español) de ASP.NET. En esta entrada explicaremos qué son las Master Page y cómo utilizarlas.
Una Master Page o Página principal es como una plantilla que contiene todos los elementos comunes en un grupo de páginas. Supongamos que tenemos que desarrollar una aplicación donde se muestran los productos y servicios de una empresa. La aplicación Web estará compuesta por una página para productos y otra para servicios. Las dos páginas tienen en común la cabecerá, el pié, el menú horizontal, y parte del menú Vertical. Pues bien, todos estos elementos se colocarán en la página principal, en la que se dejarán huecos para las partes específicas de las páginas de productos y servicios.
Una vez que tenemos la Página principal, creamos las páginas de productos y servicios que sólo contrendrán el contenido espécifico. Cuando un cliente solicita, por ejemplo, la página de productos, .NET se encarga de fusionar la Página Principal con la de productos y se la entrega al cliente.
Ya hemos visto el funcionamiento de paginas principales. A continuación veremos un ejemplo práctico de su uso.
Paso 1: Crear un nuevo sitio Web.
Para ello abrimos Visual Studio 2008 y pulsamos sobre crear Sitio Web. Le damos un nombre y pulsamos aceptar
Paso 2: Crear página principal
Hacemos click con el botón derecho sobre el explorador de soluciones y selecionamos la opción Agregar nuevo elemento.... Elegimos la opción de página principal, le damos un nombre, y pulsamos agregar.
Si le hechamos un vistazo al código de la página principal, comprobaremos que no es más que código HTML con dos controles ASP.NET(ContentPlaceHolder) que sirven para especificar los huecos. Por defecto, al crear una página principal se crean dos huecos, uno en la sección head y otro en el body.
Paso 3: Crear estructura del sitio
Ahora modificaremos la página principal para crear una estructura similar a la que vimos en la primera imagen. Además, de los dos huecos que aparecen en dicha imagen, mantendremos la que se crea por defecto en el HEAD, ya que siempre nos puede venir bien.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Página sin título</title>
<!--Elementos de cabecera comunes -->
<asp:ContentPlaceHolder id="head" runat="server">
<!--Elementos de cabecera específicos --> </asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="contenedor">
<div id="cabecera">
<!-- Cabecera -->
</div>
<div id="menuHorizontal">
<!-- Menu Horizontal -->
</div>
<div id="cuerpo">
<div id="menuVertical">
<!-- Parte común del Menu Vertical -->
<asp:ContentPlaceHolder ID="hueco1" runat="server">
<!-- Parte específica del Menu Vertical--> </asp:ContentPlaceHolder>
</div>
<div id="contenido">
<asp:ContentPlaceHolder id="hueco2" runat="server">
<!-- Contenido específico-->
</asp:ContentPlaceHolder>
</div>
</div>
<div id="pie">
<!-- pie -->
</div>
</div>
</form>
</body>
</html>
<head runat="server">
<title>Página sin título</title>
<!--Elementos de cabecera comunes -->
<asp:ContentPlaceHolder id="head" runat="server">
<!--Elementos de cabecera específicos --> </asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="contenedor">
<div id="cabecera">
<!-- Cabecera -->
</div>
<div id="menuHorizontal">
<!-- Menu Horizontal -->
</div>
<div id="cuerpo">
<div id="menuVertical">
<!-- Parte común del Menu Vertical -->
<asp:ContentPlaceHolder ID="hueco1" runat="server">
<!-- Parte específica del Menu Vertical--> </asp:ContentPlaceHolder>
</div>
<div id="contenido">
<asp:ContentPlaceHolder id="hueco2" runat="server">
<!-- Contenido específico-->
</asp:ContentPlaceHolder>
</div>
</div>
<div id="pie">
<!-- pie -->
</div>
</div>
</form>
</body>
</html>
Paso 4: Creamos las páginas de contenido
Volvemos a hacer click con el botón derecho sobre el explorador de soluciones y selecionamos la opción Agregar nuevo elemento.... Elegimos la opción de Web Forms, le ponemos productos.aspx de nombre, marcamos la opción seleccionar la página principal.
En la siguiente pantalla seleccionamos la pagina principal que queremos asociar a la página productos.aspx y aceptamos.
Si analizamos el código de la página productos.aspx vemos que sólo contiene 3 controles ContentPlaceHolder, uno por cada hueco que creamos en la Página principal.
<%@ Page Language="VB" MasterPageFile="~/PaginaPrincipal.master" AutoEventWireup="false" CodeFile="productos.aspx.vb" Inherits="productos" title="Página sin título" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<!-- Elementos de cabecera específico de productos -->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="hueco1" Runat="Server">
<!-- Elementos de menú vertical específicos de productos -->
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="hueco2" Runat="Server">
<!-- Contenido especifico de productos -->
</asp:Content>
La creación de la página servicios.aspx es análoga a la creación de la página productos.
Con esto ya tendríamos creada la estructura de nuestro sitio Web.... Ya podemos comenzar a programar¡¡
