Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Contraer todoExpandir todo Código: Todos Código: Múltiple Código: Visual Basic Código: C# Código: Visual
C++ Código: F# Código: JScript
Tutorial: Crear y usar páginas maestras ASP.NET en Visual Web
Developer
Este tutorial muestra cómo crear una página maestra y varias páginas de contenido.Las páginas maestras permiten
crear un diseño de página (una plantilla) y, a continuación, crear páginas independientes con contenido que se
combina con la página maestra en tiempo de ejecución.Para obtener más información sobre las páginas maestras,
vea Páginas principales ASP.NET [ http://msdn.microsoft.com/es-es/library/wtxbf3hh.aspx ] .
Hay un proyecto de Visual Studio con código fuente disponible para este tema: Descargar
[ http://go.microsoft.com/fwlink/?LinkId=157234 ] .
Crear una página ASP.NET con contenido que desea mostrar en la página maestra.
Requisitos previos
Opcionalmente, un archivo .jpg, .gif u otro archivo gráfico que pueda utilizar como logotipo en su página
principal.Se recomienda que el logotipo no tenga más de 48 píxeles de ancho.Sin embargo, mostrar un
logotipo es opcional y el tamaño exacto del gráfico no es importante para el tutorial.
Si ya ha creado un sitio web en Visual Web Developer (por ejemplo, según los pasos indicados en Tutorial: Crear
una página Web básica en Visual Web Developer [ http://msdn.microsoft.com/es-es/library/k4cbh4dh.aspx ] ),
puede usar dicho sitio web y pasar a la siguiente sección, Crear la página maestra.De lo contrario, cree un sitio
Web y una página nuevos siguiendo estos pasos.
4. En el cuadro Ubicación, escriba el nombre de la carpeta dónde desea conservar las páginas de su sitio
Web.
5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
29-09-2010
Página 2 de 14
Visual Web Developer crea la carpeta y una página nueva denominada Default.aspx.
La página maestra es la plantilla que define la apariencia que tendrán las páginas.En esta sección, creará primero
una página maestra.A continuación, utilizará una tabla para diseñar la página maestra con un menú, un logotipo
y un pie que aparecerán en todas las páginas del sitio.También trabajará con un marcador de posición de
contenido, que es un área de la página que se puede reemplazar por información en una página de contenido.
Nota
En este tutorial se supone que está utilizando archivos de código subyacente para todas las
páginas.Si utiliza una página ASP.NET de un único archivo, el código que se muestra en el tutorial
funcionará, pero aparecerá en la vista Código fuente, no en un archivo de código independiente.
5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar y, a
continuación, haga clic en Agregar.
La página maestra define la apariencia de las páginas del sitio.Puede contener cualquier combinación de texto
estático y controles.Una página maestra también contiene uno o más marcadores de posición de contenido que
indican dónde aparecerá el contenido dinámico cuando se muestren las páginas.
En este tutorial, utilizará una tabla como ayuda para colocar los elementos en la página.Empezará por crear una
tabla de diseño para alojar los elementos de la página maestra.Más adelante en esta sección colocará el control
de marcador de posición de contenido que ya está en la página.
3. Para seleccionar la página, haga clic en el centro de la misma.En la ventana Propiedades, establezca la
propiedad BgColor en un color distintivo, como el azul.
El color que selecciona no es importante.Más adelante en este tutorial creará una segunda página maestra
sin color, que contrastará con lo que seleccione aquí.
29-09-2010
Página 3 de 14
Nota
6. En el cuadro de diálogo Insertar tabla cree una tabla con tres filas y una columna y, a continuación,
haga clic en Aceptar.
9. En el cuadro de diálogo Dividir celdas, seleccione Dividir en columnas y, a continuación, haga clic en
Aceptar.
En la fila central, haga clic en la columna situada más a la izquierda y, a continuación, establezca su
Ancho en 48 en la ventana Propiedades.
Nota
Para establecer el alto y ancho, arrastre los bordes de la celda o seleccione la celda y
establezca los valores en la ventana Propiedades.
11. Seleccione todas las celdas en la tabla y establezca BgColor en un color diferente que el color de fondo.
Después de diseñar la tabla, puede agregar el contenido a la página maestra que aparecerá en todas las
páginas.Agregará un mensaje de copyright como pie de página y, a continuación, un menú.Si tiene un gráfico de
logotipo disponible, también puede agregarlo.
4. En el cuadro de diálogo Editar elementos de menú, en la sección Elementos, haga dos veces clic en el
icono Agregar un nodo raíz para agregar dos elementos de menú:
29-09-2010
Página 4 de 14
a. Haga clic en el primer nodo y, a continuación, establezca Text en Página Principal y establezca
NavigateUrl en Home.aspx.
c. Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de elementos de menú.
5. Si tiene un archivo gráfico disponible para utilizarlo como logotipo, siga estos pasos para colocarlo en la
página maestra:
a. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web y, a
continuación, seleccione Agregar elemento existente.
Ahora puede colocar el marcador de posición de contenido para especificar dónde puede mostrar contenido la
página maestra en tiempo de ejecución.
2. Guarde la página.
La página maestra proporciona la plantilla para el contenido.El contenido de la página maestra se define creando
una página ASP.NET que se asocia a la página maestra.La página de contenido es un formulario especializado de
una página ASP.NET que incluye sólo el contenido que se va a combinar con la página maestra.En la página de
contenido, agregará el texto y los controles que desee mostrar cuando los usuarios soliciten la página.
En este tutorial, agregará dos páginas con contenido para la página maestra.La primera es una página de inicio y
la segunda es una página Acerca de.
4. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
29-09-2010
Página 5 de 14
Se crea un nuevo archivo .aspx.La página contiene una directiva @ Page [ http://msdn.microsoft.com/es-
es/library/ydy4x04a.aspx ] que asocia la página actual a la página maestra seleccionada con el atributo
MasterPageFile, tal como se muestra en el ejemplo de código siguiente.
[Visual Basic]
Copiar código
[C#]
Copiar código
Una página de contenido no tiene los elementos usuales que constituyen una página ASP.NET, como html, body o
form.En su lugar, el contenido que se desea mostrar en la página maestra se agrega reemplazando las áreas de
marcador de posición creadas en dicha página.
Puede establecer el título de cada página de contenido de forma independiente a fin de que se muestre el
título correcto en el explorador cuando el contenido se combine con la página maestra.La información del
título se almacena en la directiva @ Page de la página de contenido.
5. Presione ENTRAR para crear una nueva línea en blanco en el control Content
[ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.content.aspx ] y, a continuación,
escriba Gracias por visitar nuestro sitio.
El texto que agrega aquí no es importante; puede escribir cualquier texto que le ayude a reconocer que es
la página de inicio.
6. Guarde la página.
29-09-2010
Página 6 de 14
1. Utilice los mismos pasos que al crear la página de inicio para agregar una nueva página de contenido
denominada About.aspx.
Asegúrese de asociar la nueva página a la página Master1.master como hizo con la página de inicio.
3. En el área de contenido, escriba Acerca de Contoso y, a continuación, para dar formato al texto como
Encabezado 2, seleccione el texto y seleccione Encabezado 1 en la lista desplegable Formato del
bloque situada encima del Cuadro de herramientas.
4. Presione ENTRAR para crear una nueva línea y, a continuación, escriba Desde 1982, Contoso ha
proporcionado servicios de software de gran calidad.
5. Guarde la página.
Puede probar las páginas ejecutándolas tal como haría con cualquier página ASP.NET.
ASP.NET combina el contenido de la página Home.aspx con el diseño de la página Master1.master en una
sola página y muestra el resultado en el explorador.Observe que la dirección URL de la página es
Home.aspx; no hay ninguna referencia en el explorador a la página maestra.
El código de las páginas de contenido puede hacer referencia a miembros de la página maestra, como
propiedades o métodos públicos y controles de la página maestra.En esta parte del tutorial, creará una propiedad
en la página maestra y, a continuación, utilizará el valor de la propiedad en las páginas de contenido.La premisa
es que el nombre de la compañía para el sitio Web está almacenado como una propiedad en la página maestra y
cualquier referencia a él en las páginas de contenido se basa en la propiedad de la página maestra.
2. En el Explorador de soluciones, haga clic con el botón secundario en Master1.master y haga clic en Ver
código para abrir el editor de código.
Nota
De forma predeterminada, Visual Web Developer crea páginas que utilizan el modelo de código
subyacente.Si lo prefiere, puede crear el código utilizando el modelo de un solo archivo.Para
obtener más información, vea Modelo de código de las páginas Web ASP.NET
[ http://msdn.microsoft.com/es-es/library/015103yb.aspx ] .
29-09-2010
Página 7 de 14
C# Copiar código
El código crea una propiedad denominada CompanyName para la página maestra.El valor se almacena en
estado de vista para que se conserve entre las devoluciones de datos.
4. En la definición de clase (pero no dentro del código de la propiedad), agregue el código siguiente.
C# Copiar código
Ahora puede modificar la página de contenido para utilizar la propiedad CompanyName de la página maestra.
Copiar código
29-09-2010
Página 8 de 14
La directiva enlaza la propiedad Master de la página de contenido, que utilizará en breve, a la página
Master1.master.
8. En el Explorador de soluciones, haga clic con el botón secundario en Home.aspx y seleccione Ver
código para abrir el editor de código.
C# Copiar código
Ahora puede probar la página de contenido para asegurarse de que hace referencia correctamente a la propiedad
CompanyName de la página maestra.
La página se muestra en el explorador con el texto Welcome to the Web site of Contoso
2. Cierre el explorador.
4. Cambie el controlador Page_Init para asignar un nombre de compañía diferente a la propiedad, como en el
ejemplo de código siguiente.
29-09-2010
Página 9 de 14
C# Copiar código
Bajo ciertas circunstancias, quizás desee poder cambiar las páginas maestras dinámicamente; es decir, utilizar
código que establezca la página maestra para una página de contenido.Por ejemplo, es posible que desee
permitir a los usuarios seleccionar entre varios diseños y establecer la página maestra según sus preferencias.
En esta parte del tutorial, agregará una segunda página maestra al sitio Web y creará botones que permitan al
usuario cambiar entre dos páginas maestras.Como ambas páginas maestras serán muy similares, hará una copia
de la primera y la modificará para que actúe como la segunda.
2. Haga clic con el botón secundario del mouse en el nombre del sitio Web y, a continuación, haga clic en
Pegar.
Se agrega al sitio Web una página maestra con el nombre Copia de master1.master.
3. Haga clic con el botón secundario del mouse en Copia de master1.master, haga clic en Cambiar
nombre y, a continuación, asigne el nombre Master2.master a la nueva página maestra.
La directiva de página finalizada tendrá una apariencia similar al ejemplo de código siguiente:
C# Copiar código
29-09-2010
Página 10 de 14
7. Cambie la propiedad BgColor a un color visiblemente diferente del color que eligió para Master1.
La nueva página maestra tendrá la misma apariencia y funcionamiento que Master1.master, pero tendrá
un color de fondo diferente.
C# Copiar código
El paso siguiente es agregar a cada página maestra un botón que permita al usuario seleccionar la página
maestra alternativa.
4. Haga doble clic en el botón a fin de crear un controlador para su evento Click
[ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.linkbutton.click.aspx ] y, a
continuación, agregue el código resaltado siguiente.
[C#]
Copiar código
29-09-2010
Página 11 de 14
El código carga el nombre de archivo de la página maestra alternativa en una variable de sesión
persistente y, a continuación, vuelve a cargar la página actual.(La propiedad Url
[ http://msdn.microsoft.com/es-es/library/system.web.httprequest.url.aspx ] devuelve un objeto Uri
[ http://msdn.microsoft.com/es-es/library/system.uri.aspx ] que hace referencia a la página actual.) En
un momento, creará el código de la página de contenido que utilizará el nombre de la página maestra.
7. Haga doble clic en el botón Plain a fin de crear un controlador para su evento Click
[ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.linkbutton.click.aspx ] y, a
continuación, agregue el código resaltado siguiente.
C# Copiar código
Este código es igual que el del botón de la página Master2.master, excepto en que carga una página
maestra alternativa.
Ahora puede escribir el código en la página de contenido que cargará dinámicamente la página maestra
seleccionada por el usuario.
Nota
La página de inicio que ya ha creado contiene una directiva @ MasterType que la enlaza
efectivamente a una página maestra única (Master1.master).Por tanto, no podrá asignar páginas
29-09-2010
Página 12 de 14
maestras dinámicamente a la página de inicio y, en cambio, trabajará con otras páginas que ha
creado.
2. En el Explorador de soluciones, haga clic con el botón secundario en About.aspx y haga clic en Ver
código para abrir el editor de código.
C# Copiar código
Se vuelve a mostrar la página, esta vez combinada con Master2.master, que no tiene ningún color de
fondo.
Hay otros aspectos que debe tener en cuenta al trabajar con una página maestra:
29-09-2010
Página 13 de 14
descrito aquí proporciona una ilustración simple de cómo hacer referencia a los miembros de página
maestra en páginas de contenido.
Incluso puede tener acceso a los miembros de la página maestra sin utilizar una directiva @ MasterType
[ http://msdn.microsoft.com/es-es/library/ms228274.aspx ] .Sin embargo, para hacerlo debe convertir la
propiedad Page.Master [ http://msdn.microsoft.com/es-es/library/system.web.ui.page.master.aspx ] en el
tipo de página maestra apropiado (la propiedad Master [ http://msdn.microsoft.com/es-
es/library/system.web.ui.page.master.aspx ] es null si una página no tiene su correspondiente página
maestra).Para obtener más información, vea Trabajar con las páginas maestras ASP.NET mediante
programación [ http://msdn.microsoft.com/es-es/library/c8y19k6h.aspx ] .
Puede hacer referencia a los controles en la página maestra utilizando el método Master.FindControls.Para
obtener más información, vea Trabajar con las páginas maestras ASP.NET mediante programación
[ http://msdn.microsoft.com/es-es/library/c8y19k6h.aspx ] .
Hay otros aspectos que debe tener en cuenta al trabajar con páginas maestras dinámicas:
El escenario de esta sección para cambiar las páginas maestras se ha simplificado para mantener el tutorial
centrado en las páginas maestras.En una aplicación real, probablemente mostraría varios diseños y, a
continuación, almacenaría las preferencias del usuario utilizando perfiles.Para obtener información detallada,
vea Información general sobre las propiedades de perfil de ASP.NET [ http://msdn.microsoft.com/es-
es/library/2y3fs9xs.aspx ] .
Puede configurar el sitio Web para que todas las páginas utilicen la misma página maestra.Quizás tenga
unas cuantas páginas que deberían utilizar una página maestra alternativa; puede configurarlas en el código
de una forma similar a la mostrada en esta sección del tutorial.Para obtener más información, vea "Ámbito
de las páginas maestras" en Páginas principales ASP.NET [ http://msdn.microsoft.com/es-
es/library/wtxbf3hh.aspx ] .
Tiene que agregar el código de la página Home.aspx a cada página donde desee reemplazar la página
maestra predeterminada.
Este tutorial muestra la funcionalidad básica de páginas maestras.Quizás desee probar otras características de las
páginas maestras.Por ejemplo, podría:
Crear páginas maestras que tienen varios marcadores de posición de contenido.Puede llenar a continuación
uno o más marcadores de posición de contenido para cada página que muestre.
Tener acceso a los miembros de la página maestra desde las páginas de contenido mediante
programación.Esto permite cambiar dinámicamente la apariencia de la página maestra en tiempo de
ejecución.Para obtener información detallada, vea Cómo: Hacer referencia al contenido de la página
maestra ASP.NET [ http://msdn.microsoft.com/es-es/library/xxwa0ff0.aspx ] .
Utilizar el filtrado de dispositivos con las páginas maestras a fin de crear diferentes diseños para distintos
dispositivos, por ejemplo un diseño para exploradores y otro para un tipo de teléfono concreto.Para obtener
información detallada, vea Información general sobre el filtrado de dispositivos de ASP.NET
[ http://msdn.microsoft.com/es-es/library/ms178620.aspx ] .
Obtener información sobre cómo puede colocar unas páginas maestras dentro de otras para crear partes
divididas en componentes.Para obtener información detallada, vea Páginas maestras ASP.NET anidadas
[ http://msdn.microsoft.com/es-es/library/x2b3ktt7.aspx ] .
Conceptos
Eventos en páginas maestras y páginas de contenido ASP.NET [ http://msdn.microsoft.com/es-
es/library/dct97kc3.aspx ]
Otros recursos
29-09-2010
Página 14 de 14
Etiquetas:
Contenido de la comunidad
29-09-2010