Receta. Paginas maestras con ASP NET 2.0

Hola, esta vez mostrare de manera sencilla como escribir nuestras aplicaciones ASP.NET usando las nuevas características que nos proporciona este en su versión 2.0.

En esta ocasión veremos como acelerar el diseño de nuestras aplicaciones usando lo que se conoce como "Master Pages" lo cual nos permite realizar "Herencia Visual" (un nuevo concepto dentro de Asp .Net) mismo que consiste en Heredar componentes visuales de manera rápida, sencilla y transparente para facilitar el proceso de desarrollo de la parte visual (Vista en el modelo MVC) de nuestras aplicaciones Web.

Lo necesario.

Por supuesto necesitamos la ultima version de Mono (http://www.mono-project.com) puedes descargar la ultima version en la seccion "Downloads" de acuerdo a tu Sistema operativo.

Iniciando.

Hace un tiempo cuando prevalecía la versión 1 de ASP.NET no contábamos con mecanismos cómodos para construir la interfaz de manera cómoda. Si bien la arquitectura basada en componentes de ASP.NET nos proporciona la libertad de escribir Controles Web personalizados para crear la vista de nuestras aplicaciones, no era tan cómodo como se requería. Por alguna razón los diseñadores de la arquitectura (de ASP.NET) obviaron un mecanismo mas sencillo para esta parte tan importante de nuestras aplicaciones.

Afortunadamente, en la versión 2.0 de la plataforma contamos con un mecanismo simple, eficaz y robusto para resolver esta incomodidad con el nuevo concepto ASP.NET Master Pages.

Como funciona?

Si bien sabemos que la plataforma .NET esta totalmente orientada a objetos, pero, es particularmente interesante implementar esta característica en la parte visual de nuestras aplicaciones (la vista en MVC), es decir, podemos escribir platillas que no son mas archivos "especiales" en los cuales podemos definiremos la estructura de nuestro sitio Web. Esta estructura contendrá elementos (Contenedores) que podremos sobreescribir en nuestras Página hijas (que heredaran de la pagina maestra) pero manteniendo la estructura contenida en la Pagina Maestra.

Una vez definida la platilla, podremos "reescribir" los controles que definamos allá (mediante una pagina aspx), que no es mas que la sobreposicion (overriding) de nuestros elementos ante los elementos definidos en la platilla denomida "Pagina Maestra" (Master Page).

Para ilustrar de mejor manera su funcionamiento escribiremos un ejemplo, en el cual definiremos una cabezera (header), un contenido y un pie de pagina (footer).

Un ejemplo.

Primero que nada debemos escribir un archivo (que en nuestro caso llevara por nombre "pagina.master") el cual definirá la estructura visual de nuestra aplicacion y en la que agregaremos elementos para su posible modificación en las paginas ".aspx".

Pensando en la resolución del tí­pico sitio con una cabecera, el contenido y un pie de pagina el archivo pagina.master quedará así:

HTML:
  1. <% @Master %>
  2. <asp:ContentPlaceHolder id=cabecera runat=server>
  3.     Esta es la cabecera
  4. </asp:ContentPlaceHolder>
  5. </p>
  6.  
  7. <asp:ContentPlaceHolder id=cuerpo runat=server>
  8.     Este es el cuerpo
  9. </asp:ContentPlaceHolder>
  10.  
  11. </p>
  12. <asp:ContentPlaceHolder id=piedepagina runat=server>
  13.     <div style="background: #DDFFDD; border: solid 1px #999999; text-align:right;">
  14.         <small>
  15.         Sientete libre de usar, modificar y redistribuir bajo los
  16.         terminos de la GNU/GPL.
  17.         </small>
  18.     </div>
  19. </asp:ContentPlaceHolder>

Como puedes ver el archivo pagina.master empieza con la directiva @Master que simplemente indica al motor de ASP .NET que este archivo definirá la estructura de una página. Originalmente estos archivos no son contemplados para desplegar información, solo son archivos que definen la platilla o estructura de una página.

En los archivos .master podremos agregar elementos HTML y componentes de servidor de ASP.NET.

Como vemos en la página maestra definida en el ejemplo de arriba, tenemos 3 elementos de servidor llamados asp:ContentPlaceHolder los cuales pueden contener embebidos a la vez elementos HTML y otros elementos de servidor de ASP.NET.

Los elementos asp:ContentPlaceHolder juegan un papel muy importante en la implementacion de un esquema de Páginas Maestras, pues estos elementos serán heredados por las Páginas hijas del esquema y su contenido podrá ser reescrito en ellas usando el nombre asignado en el archivo .master (en este caso "pagina.master").

Ahora solo nos resta implementar nuestra pagina.aspx quien se encargara de modificar los elementos contenidos en pagina.master

Para hacerlo creamos el archivo pagina.aspx que contendrá lo siguiente:

HTML:
  1. <% @Page Language="C#" MasterPageFile="pagina.master" %>
  2.  
  3. <asp:Content ContentPlaceHolderID="cabecera" runat=server>
  4. <div style="border: solid 1px #999999;">
  5. <h2> Hola, Mundo Paginas Maestras!</h2>
  6. </center>
  7. </div>
  8. </asp:Content>
  9.  
  10. <asp:Content ContentPlaceHolderID="cuerpo" runat=server>
  11. <div style="height: 350px; background: #DDDDFF; border: solid 1px #999999";>
  12. Este es un peque&#241;o ejemplo de demostraci&#243;n de como funcionan las paginas maestras.
  13. </p>
  14. --<br />
  15. Ricardo Medina (ricki@dana-ide.org)<br />
  16. http://ricki.dana-ide.org
  17.  
  18. </div>
  19. </asp:Content>
  20.  
  21. <!-- Descomenta el siguiente código para modificar el pie de pagina  -->
  22. <!--
  23. <asp:Content ContentPlaceHolderID="piedepagina" runat=server>
  24. Reescribiendo pie de pagina
  25. </asp:Content>
  26. -->

Ambos archivos deberán ser guardados en el mismo directorio (para esta demostración).

Como puedes el archivo no es mas que una pagina de ASP.NET y eso lo sabemos al mirar la directiva @Page con un atributo nuevo MasterPageFile el cual describe el archivo del cual se tomara la estructura del sition (es decir, se heredara) visualmente de la platilla pagina.aspx.

Tambien vemos los elementos asp:Content que usaremos para contener los asp:ContentPlaceHolder definidos en el archivo pagina.master y ahora solo bastara con asignar al atributo ContentPlaceHolderID de asp:Content el valor de cualquiera de los asp:ContentPlaceHolder definidos en el archivo pagina.master y reescribir su contenido poniendo dentro los elementos deseados, que pueden ser directamente codigo HTML o controles de servidor de ASP.NET.

Vayamos al directorio donde guardamos el archivo pagina.master y pagina.aspx y ahora lanzemos el servidor web xsp2 que viene con mono.

xsp2_masterpages

Ahora solo resta ver el resultado de nuestra pequeña demostración usando tu navegador favorito (en mi caso el mejor Mozilla Firefox) accesando a la siguiente URL:

http://127.0.0.1:8080/pagina.aspx

El resultado debe ser el siguiente:

firefox_masterpages

Bueno eso es todo por este post, espero te sirva para adentrarte cada vez mas en la tecnologí­a .NET desde luego sobre la implementación libre Mono.

Saludos!


--
Ricardo Medina <ricki@dana-ide.org>

5 Responses to “Receta. Paginas maestras con ASP NET 2.0”

  1. paquirrin Says:

    buen articulo y un diseño web bastante currado

  2. Ju4npE Says:

    Excelente articulo ricki.

    Podrias decirme que plugin estas usando para mostrar codigo?

  3. Charlie Says:

    Soporta capas, usando DIV? Intenté con un control ajax, que en html común muestra un calendario que pasa por encima de los otros controles, pero en una página hija de una página maestra, desplaza todo el contenido para abajo al ser activado. Me pregunto si será por eso.

  4. Ricardo Says:

    sip, claro, pero deberias hechar un ojo al codigo que genera tu control, igual y genera un div con posicion absoluta..

  5. Car Loans Says:

    Miss STEFFEY was given an car loan with ease with www.nfsautoloan.com

Leave a Reply