Como usar adecuadamente Master Pages y ContentPlaceHolder en ASP.NET

by zheref on February 6, 2012

4 Comments

Las plantillas siempre han sido algo muy importante en el momento de desarrollar una aplicación o sitio Web, ya que nos facilitan el proceso de separación de la visualización gráfica de nuestra lógica o contenido en si.
ASP.NET Web Forms es el framework base para desarrollo Web con ASP.NET y este nos ofrece una manera muy amena de separar estas dos cosas, siendo denominadas las plantillas como Master Pages por los de Microsoft.
Las Master Pages son paginas que nos permiten colocar todo el contenido estatico HTML predeterminado de cierta pagina y aplicarla a las paginas que manipulan la información, la lógica y el contenido dinámico.
Las Master Pages llevan la extensión .master y deberíamos cargar allí nuestro HTML estático y dejar los sockets o “huecos” para cargar el contenido dinámico. Mientras que en las paginas que cargan el contenido dinámico se aplica el dicho Master Page y se llama desde alli al contenido dinámico (desde las paginas con extensión .aspx).
A continuación mostrare en detalle como se lleva a cabo el proceso:

Nuestro primer paso: Crear la plantilla

Recordando que las plantillas en ASP.NET Web Forms se llaman Master Pages, y tienen extension .master, vamos a comenzar a ver paso a paso los elementos que debe tener una.

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

Primero definimos el lenguaje, el código fuente (C# en este caso) que usaremos para manipular los componentes del lado del servidor y definimos que el nombre clave que tendrá nuestra clase en la jerarquía de entidades de la aplicación.
Luego escribimos nuestro codigo HTML (que sera estatico en nuestras paginas), como si de una Web Page estatica se tratara.

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Master page title</title>
</head>
<body>
    <form id="form1" runat="server">
        <table>
           <tr>
               <td></td>
               <td></td>
           </tr>
        </table>
    </form>
</body>
</html>

Ese seria nuestro esquema basico. Ahora bien, si quisieramos decir que nuestro contenido dinamico lo vamos a colocar en las dos celdas td que creamos en el DOM, lo hariamos de la siguiente forma:

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Master page title</title>
</head>
<body>
    <form id="form1" runat="server">
        <table>
           <tr>
               <td><asp:ContentPlaceHolder ID="Main" runat="server"/></td>
               <td><asp:ContentPlaceHolder ID="Footer" runat="server"/></td>
           </tr>
        </table>
    </form>
</body>
</html>

Con esto cargaríamos contenido y/o lógica dinamicamente mediante la pagina .aspx que vaya a aplicar la plantilla. Y con esto la pagina .aspx que la aplique se ve obligada a determinar que contenido se va a cargar en estos dos espacios que creamos. Uno con el nombre “Main” y otro con el nombre “Footer”; nombres que se usaran en el momento de cargar el contenido dinámico en la pagina dinámica .aspx.

Segundo paso: Determinar el contenido dinamico que se va a cargar en los espacios dinamicos denominados ContentPlaceHolders

Lo primero que debemos hacer es escribir la directiva diciendo que la pagina .aspx utilizara la Master Page que creamos previamente (obviamente con el nombre que le establecimos):

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

Luego llamamos a los ContentPlaceHolders de la Master Page para luego colocarle el contenido que cargara dinamicamente:

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

<asp:Content ID="Content1" ContentPlaceHolderID="Main" Runat="Server">

</asp:Content>
    
<asp:Content ID="Content2" ContentPlaceHolderID="Footer" Runat="Server" >

</asp:content>

Si nos percatamos nos damos cuenta que el atributo ContentPlaceHolderID debe coincidir con el ID que le asignamos al ContentPlaceHolder en la Master Page. Mientras que el ID que le asignamos aca al Content es completamente independiente.
Ahora definimos cual es el contenido que vamos a cargar “dinamicamente” a la pagina en los sockets o “huecos” que dejamos con los ContentPlaceHolders en la Master Page. Aunque en este caso colocaremos contenido muy sencillo y poco dinamico para hacer practico el ejemplo:

<% @ 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>

Con esto termino el corto tutorial de introducción a esta maravillosa funcionalidad y facilidad que nos brinda el Framework ASP.NET Web Forms.

Saludos!

4 Comments

  1. Excelente explicación!!!…he usado asp.net un par de veces con motivos de estudio las máster page, pero ahora logro entender su funcionamiento. Ojalas puedes crear otro de estos tutoriales sobre master page, ya que son muy buenos, saludos.

    1. Muchas gracias Mario. Si, de hecho tengo muchos temas de los cuales hablar en mi Blog. Lamentablemente me queda muy poco tiempo libre para ello. No obstante en la medida en que pueda lo ire haciendo.

      Gracias por seguir mi blog y si gustas solo dime de que temas te gustaria que publicara proximamente. Tambien tengo la intencion de grabar algunos videos, subirlos a Youtube y publicarlos aqui.

      Saludos

  2. pana y si quiero cargar un formulario en ese ContentPlaceHolder y que me lo muestre en al ingresar a una opción de mi menú, lo estoy creando en el ContentPlaceHolder y no me deja, y la idea es que los pueda cargar desde mi menú de opciones, ayúdame amigo soy aprendiz :D

    1. Giovanny,

      El uso de masterpages no permite incluir mas formularios que el que tiene la pagina maestra.

      Debes poner los campos de tu formulario en una pagina de contenido que por ejemplo puede llamarse formulario.aspx.

      Para llamar a esa pagina, en tu menu puedes tener controles hyperlink que hagan el llamado a dicha pagina.

      Por mi parte tambien soy nuevo en asp.net y a decir verdad – salvo por unas cosas puntuales – no es tan complicado una vez que tienes claro que deseas hacer…

      Un tip para buscar info en internet es anteponer siempre lo siguiente a tus consultas:

      c# asp.net

      De esta forma tus resultados se aproximaran mas a lo que esperas encontrar.

      Saludos y gracias Zheref por aclarar el panorama de las paginas maestras :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>