Soporte de Master Pages jerarquizadas en VS 2008

El soporte de Master Pages fué una de las características más populares que se introdujeron con ASP.NET 2.0, y una de esas características que casi todos los proyectos ASP.NET usan para mostrar una interfaz consistente en todo un sitio web.

Uno de los escenarios más interesantes es el soporte que ASP.NET 2.0 tiene para permitir "jerarquizar master pages" - de forma que podemos crear una master raíz para un sitio web, y crear master pages jerarquizadas basadas en la raíz y personalizarla (por ejemplo: podríamos crear una master SingleColumn.Master y otra TwoColumn.Master que definan dos estructuras generales de una y dos columnas para visualizar el sitio basadas en el template raíz). Esta jerarquía de master pages es realemente flexible, y permite a los desarrolladores y diseñadores para realizar cambios rápidamente a la visualización y a la organización del sitio con cambios mínimos en el código y sin duplicación contenidos. El único ( y gran) problema, es que VS 2005 no soporta realmente el uso de master pages jerarquizadas, y páginas basadas en estas jerarquías de master pages no pueden ser editadas con el diseñador WYSIWYG de VS 2005.

Las buenas noticias son que VS 2008 soporta esta jerarquía de master pages, y hace que su uso sea realmente fácil. Volviendo atrás, recomiendo que casi todos los proyectos ASP.NET deberían usar esta características - ya que da unas posibilidades increíbles para las interfaces de nuestros proyectos.

Uso de jerarquías de master pages con VS 2008

Os recomiendo que le veáis esta web http://www.opensourcetemplates.org/. Es un respositorio online y gratuito de templates HTML que podéis ver, descargar y usar. Los templates del sitio son HTML puros ( es decir, podéis usarlos con cualquier tecnología de servidor), fueron creados con CSS limpios y marcas XHTML:

Para ayudar a escribir este post, he cogido uno de los templates que me gustaban. Podéis verlo online aquí, y descargarlo aquí.

Como la mayoría de los web-sites, este template tiene páginas que usan diferentes layouts parar mostrar los contenidos. Por ejemplo, incluye una página que usa varias columnas para mostrar los contenidos:

También hay páginas que usan una sola columna que llena todo el ancho de la página para mostrar el contenido:

Usando el template HTML/CSS anterior con master pages jerarquizadas.

Convertir el template anterior con ASP.NET y el soporte para master pages jerarquizadas es realmente fácil con VS 2008.

Paso 1: Crear el template Site.Master

Para empezar tenemos que crear una master page que usaremos para definir toda la estructura para todas las páginas del sitio. La llamaremos "Site.Master" y copiaremos/pegaremos el HTML "outer chrome" del template que nos descargamos. Añadiremos  un <asp:contentplaceholder> en la seccion de contenido en la mitad que llenaremos con el contenido específico de la página. Llamaremos a este control <asp:contentplaceholder> "MainContent":

Paso 2: Creación del template SingleColumn.Master

Usamos el template Site.Master para definir el "template outer chrome" del sitio en el que estamos trabajando. Ahora vamos a crear unas cuantas master pages jerarquizadas para permitir la personalización de la sección "MainContent".

Para ello hacemos clic con el boton derecho en el explorador de soluciones y elegimos "Add new item". Crearemos una nueva master page llamada "SingleColumn.Master" y marcamos la casilla de que queremos que esta master tenga una master también:

VS 2008 nos permitirá seleccionar una master en la que basar nuestro template SingleColumn.master:

VS 2008 creará un archivo SingleColumn.master como el siguiente:

VS 2008 ha tomado el control <asp:contentplaceholder> de Site.Master que llamamos "MainContent" - y ha añadido automáticamente un control <asp:content> en blanco en esta master page jerarquizada de forma que podemos sobreescribir y personalizar la región de contenido.

También podemos usar el nuevo soporte de "Split View" de VS2008 para poder ver tanto el código HTML y el diseñador WYSIWYG a la vez. Podemos hacer cambios en una de esas dos vistas y ver los cambios en la otra (nota: aseguraos de enseñarle esto a vuestro jefe cuando le pidáis un nuevo  monitor).

Va a ser muy sencillo usar nuestro  template SingleColumn.Master para empezar a trabajar, y añadirán las reglas CSS para definir el ancho de la columna de contenido - y entonces añadir su propio control <asp:contentplaceholder> para que las páginas que se basen en esta master la puedan rellenar:

Paso 3: Crear el template TwoColumn.Master

A parte de tener el template SingleColumn.Master, crearemos una segunda master para tener dos columnas. Repetiremos los pasos anteriores - pero esta vez llamaremos al archivo: "TwoColumn.Master". Definiremos el layout del archivo e la siguiente forma:

Fijáos cómo hamos añadido los dos controles <asp:contentplaceholder> - uno llamado "MainColumn" (como en SingleColumn.Master), y el otro llamado "LeftColumn" (para mostrar una columna menor a la izquierda). Usaremos HTML estándar y CSS para posicionar estas dos columnas.

Paso 4: Crear páginas con contenido usando las master pages jerárquiquas.

Ahora que hemos definido las master paginas para controlar la estructura de nuestro sitio, podemos empezar a añadir páginas al sitio.

Vamos a crear una nueva página que llamaremos "HomePage.aspx" -  y le indicaremos que queremos basarla en una master page:

Y ahora elegiremos la master page en la que queremos basarnos. Para la página de inicio usaremos la de dos columnas:

VS 2008 basará la página HomePage.aspx en esta master jerárquica, y añadiremos dos controles <asp:content> que nos permitan rellenar las columnas izquierda y la principal de la página:

No sólo tenemos soporte WYSIWYG, sino que también tenemos la vista split-view.

Podemos rellenar el contenido específico que de cada región <asp:content>, y añadir cualquier código que queramos al code-behind:

Y ya podemos añadir más páginas al proyecto, y basarlas en cualquiera de las dos master que tenemos.

Ya que ambos templates están basados en la raíz Site.Master, si hacemos cualquier cambio en esa master (por ejemplo: si queremos cambiar el logo o la estructura de la navegación), se aplicará automáticamente a todas las páginas del sitio sin tener que modificarlas.

También tenemos la flexibilidad de cambiar el layout de los templates SingleColumn o TwoColumn (por ejemplo: ajustar el ancho) y todas las páginas que se basen en esas masters también cambiarán.

Resumen

VS 2008 tiene soporte completo para master pages jerárquicas (también está soportado en Visual Web Developer Express 2008). Esto hará que crear interfaces web sea mucho más fácil.

Lo mejor de todo es que VS 2008 tiene soporte multi-targeting seremos capaces de usar esta característica sin tener que instalar la versión 3.5 en nuestros servidores. Podemos abrir proyectos existentes de ASP.NET 2.0 con VS 2008, y aprovecharnos de esta característica.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos. Microsoft Student Partner.

toH tlhIngan Hol DajatlhlaH ‘e’ DaneH’a’?

20 pensamientos en “Soporte de Master Pages jerarquizadas en VS 2008

  1. Pingback: VS 2008 Web Designer y el soporte CSS « Thinking in .NET

  2. isidro

    Muy bueno el manual pero me pierdo en el primer paso hacerca de donde pegar el codigo, si tubieras unas imagenas fuera muy bueno, gracias.

    Responder
  3. Enrique

    Me parece fantástico el tuto, sin embargo como dice isidro, el primer paso es bastante confuso. Haciendo gala de mi ignorancia preguntaré: ¿Qué demonios es el “outer chrome”? ¿De dónde se corta y dónde se pega?
    Me encantaría poder hacer uso de la versatilidad de VS2008 en relación a la integración de templates css, este es el único sitio que encuentro relcionado directamente al tema. Agradezco de antemano su atención.

    Saludos desde Latinoamérica.

    Responder
  4. Vio

    Perdon por tardar tanto.

    Con outer chrome nos referimos al html que queremos establecer como parte de la master page que queremos crear. Una vez que descarguéis los ejemplos, en el código html, css y demás.
    Por ejemplo, de la página Index.html del template, copiaremos y pegaremos todo. Luego, en visual Studio modificaremos ese html en el Div que se llama , por ejemplo.
    Espero que sirva

    Responder
  5. jander

    Señor, tengo instalado vs2005 + .net 3.0, quería saber si instalo vs2008+ .net 3.5 si habría algún problema con los proyectos windows y asp.net 2.0 que tengo en mi equipo.

    Saludos. Respondan a mi correo también por favor, que no hay notificación de respuestas.

    Responder
  6. Vio

    Hola Jander:
    Te comento que no debes tener ningún problema en instalar los dos. De hecho yo lo tengo así. No sé muy bien porqué, ya que con VS 2008 puedo trabajar para .NET 3.0 igual que VS 2005.
    Un saludo.

    Responder
  7. Jesús

    Buenas, lo siento por ser tan cazurro, pero tengo dudas en el primer paso cuando tenemos que copiar el código html.
    Cuando genero el Site1.master el VS2008 me genera un código con unas etiquetas , ¿dentro de esa etiqueta es dónde pegamos el código html de la plantilla o borramos todo lo que genera el VS y pegamos todo el código de la plantilla html en el VS y luego insertamos el control ?

    muchísimas gracias.

    Responder
  8. Maria Ines

    Amigos, favor su ayuda.

    En asp.net 2005 tengo una página (A) diseñada en base a una master page, estoy llamando desde la página A a un popup, pregunto … cómo puedo retornar por ejemplo el código de una empresa y que fue obtenido desde un grid del popup y colocar este valor en una caja de texto que tengo en la ventana A?

    Les adjunto el código que tengo y no me funciona en la página diseñada en base a una master page, pues no cierra el popup y tampoco coloca el código seleccionado en la caja de Texto de la página A.

    Este gridview esta en el popup.

    Protected Sub GridAyuda_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridAyuda.RowCommand

    Try
    Dim url As String = String.Empty

    If e.CommandName = “Page” OrElse e.CommandName = “Sort” Then Exit Sub
    Dim index As Integer = Convert.ToInt32(e.CommandArgument)
    Dim Row As GridViewRow = GridAyuda.Rows(index)
    Dim lbl_empresa As Label = CType(Row.FindControl(“LblNIdentifica”), Label)

    Dim codigo As String = Request.QueryString(“codigo”)

    url = “../Pages/Pagos.aspx?” & lbl_empresa.Text

    Dim script As New System.Text.StringBuilder
    script.Append(“”)
    ‘ aqui retorno cada registro que necesito al control enviado por parámetro
    script.Append(“window.opener.”).Append(codigo).Append(“.value=”).Append(lbl_empresa.Text).Append(“;”)

    script.Append(” window.close();”)

    ‘//Cierra el popup
    Response.Write(script.ToString)

    Catch ex As Exception

    End Try

    End Sub

    Les comento que probé la misma funcionalidad llamando al popup desde una página que no fue diseñada en base a una master page y aqui me funciona bien el código.

    Please su ayuda.

    Saludos,

    Responder
  9. Gsus

    Hola amigos… les escribo con el fin de hacerles una consulta.
    Tengo una página maestra, en la cabecera he colocado un elemento Silverlight junto con un Accordion de Ajax Control ToolKit para el menú…
    en la página principal de la aplicación web que ha sido heredada de mi master page funciona normalmente
    Pero cuando navego a través del menú y voy a otra página tambien heredada, me sale un error Javascript y no muestra el elemento Silverlight de la cabecera…

    Alguien podría aconsejarme para resolver mi problema? Se los agradeceré infinitamente.

    gracias… Atte. Jesús

    Responder
  10. Pingback: ASP.NET MVC Framework (Primera parte) « Thinking in .NET

  11. susana

    el problema que yo tengo es que no puedo visualizar las master pages en mi lap, y pues es necesario para ir viendo el funcionamiento de mi sitio.por fa quien sepa como hacerle,le agradecere mucho

    Responder
  12. Felix Campos

    *** Paso 1: Crear el template Site.Master ****

    Mi estimado, sinceramente, no pude seguir desde el paso 1, ya que la Template que usas no esta en el link y por consiguiente no puedo seguir cuando dices…copiaremos/pegaremos el HTML “outer chrome” del template que nos descargamos. si puede darme mas profundidad a esto de ante mano te lo agradesco….

    Esta interenzante el tema de Asp.net estoy iniciando y para mi es algo complejo….

    Responder
  13. liztarin

    gracias , si me pudieras ayudar en una cosita , yo quisiera cargar un formulario ya hecho en una columna del master page , ¿como tendria que hacer?

    Responder
  14. Miguel

    Excelente el post que hiciste!..
    yo las vengo usando, pero tengo un problema que no se resolver..

    Los SRC de las imagenes que un sitio hereda, cuando uso masterpage anidadas y voy escalando en profundidad en carpetas.. se me pierden!. es decir si tengo una imagen en ../images/ …. y despues estoy por ejemplo en intranet… no me las muestra, como deberia ser el src?
    gracias

    Responder
  15. Luna

    Hola buenos dias yo quiesiera saber como puedo hacer un tag cloud 3d, tengo un sitio web hecho en visual studio 2008, utilizo lenguaje visual basic.. gracias

    Responder

Deja un comentario