Blog del Leo

Este pequeño tutorial, es para el uso de Master Page en nuestras aplicaciones web. Antes que todo, debemos entender que encierra el concepto de Master Page o Página Maestra en español, la idea principal es encerrar en una sola plantilla las características generales de nuestra aplicación web tales como un diseño uniforme para todas las páginas de la aplicación, funcionalidades, etc. las cuales serán heredadas a las demás páginas que usen como base nuestra Master Page.

Todo eso suena bonito, pero ¿cómo lo hacemos?
Primero, ejecutamos Microsoft Visual Studio 20XX, seleccionamos Nuevo Proyecto->Nuevo Sitio Web.

Ya creado nuestro proyecto web, vamos a añadir un nuevo ítem llamado Master Page. Seleccionamos nuestro proyecto web con el botón secundario del mouse y seleccionamos la opción ‘Añadir Nuevo Ítem‘.
Se nos abrirá una nueva ventana donde seleccionaremos Master Page, le otorgamos un nombre y aceptar.

Una vez ya creado el Master Page, comenzamos a diseñar como será la plantilla de nuestro sitio web como si fuese una página web más. Al crear esta página web debemos dejar un espacio donde irá el contenido que agregaran las otras páginas web, este contenido se llama ContentPlaceHolder y es desde aquí donde comenzarán a trabajar las páginas que hereden de nuestra MasterPage.

En el lado diseño, se verá asi el ContentPlaceHolder

Con esto ya tendriamos lista nuestra Página Maestra (MasterPage), ahora vamos a usarla creando una nueva página web que herederará su diseño.

Para ello vamos a ‘Añadir Nuevo Ítem‘ -> ‘Web Form Using Master Page‘

Al elegir esta opción nos preguntará que MasterPage queremos usar, podemos tener n-MasterPage en nuestro proyecto web, y presionamos OK.

El código que nos generará para esta nueva página web, no es el mismo que generá para una nueva página web estándar. Sólo tendremos la declaración de la página y a que Master Page referencia más el ContentPlaceHolder. Agregamos un mensaje dentro del ContentPlaceHolder. ver imagen a continuación.

Pero si pasamos a la vista de diseño veremos algo totalmente diferente y veremos como queda el mensaje que colocamos dentro del ContentPlaceHolder.

Al pasar a la vista de diseño vemos que el unico lugar donde podemos colocar información es dentro del ContentPlaceHolder lo demás está bloqueado pero heredamos todo el diseño del MasterPage.

Si ejecutamos la aplicación, nuestra página web se vería así.

Espero les sirva,
saludos.

Descargar código

PD: Jano espero haber sido claro con el tutorial