Página 1 de 14
©2010 Microsoft Corporation. All rights reserved.
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 c ontenido.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 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 http://go.microsoft.com/fwlink/?LinkId=157234 ] . En este tutorial se muestran las siguientes tareas: Crear una página maestra Crear una página ASP.NET con contenido que des ea mostrar en la página maestra. Ejecutar las páginas maestras p ara mostrar contenido diferente. Seleccionar una página maestra en tiempo de ejecución.
Requisitos previos Para poder completar este tutorial, necesitará: Visual Studio o Microsoft Visual Web Developer Express. 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 maestra.De lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.
Para crear un sitio Web del sistema de archivos 1. Abr Abra a Visu Visual al Web Develo Developer per.. 2.
En el el me menú Archivo, Archivo, haga clic en NuevoSitio Web. Web. Aparece el cuadro de diálogo Nuevo sitio Web. Web .
3.
En Plantillas instaladas de Visual Studio , haga clic en Sitio Web de ASP.NET. ASP.NET .
4.
En el cuad cuadro ro Ubicación, Ubicación, escriba el nombre de la carpeta dónde desea conservar las páginas de su sitio Web. Por ejemplo, escriba el nombre de c arpeta C:\WebSites.
5.
En la lista sta Lenguaje, Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.
6.
Haga cl clic en en Aceptar. Aceptar.
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.
Para crear la página maestra 1.
En el Explorador de soluciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, haga clic en Agregarnuevo elemento.
2.
En Plantillas instaladas de Visual Studio , haga clic en Página maestra.
3.
En el cuadro Nombre, escriba Master1.
4. Active la casilla Colocar el código en un archivo independiente. 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 nueva página maestra se abre en la vista Código fuente. En la parte superior de la página hay una declaración @ Master [ http://msdn.microsoft.com/eses/library/ms228176.aspx ] en lugar de la declaración @ Page [ http://msdn.microsoft.com/eses/library/ydy4x04a.aspx ] que normalmente se encuentra en la parte superior de las páginas ASP.NET.El cuerpo de la página c ontiene un control ContentPlaceHolder [ http ://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.contentplaceholder.aspx ] , que es el área de la p ágina maestra donde se combinará el contenido reemplazable de las páginas en tiempo de ejecución.En el tutorial, trabajará después más con el marcador de posición de contenido.
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.
Para crear una tabla de diseño para la página maestra 1.
Con el archivo Master1.master seleccionado en la vista Código fuente, utilice la lista desplegable Esquema de destino para validación en la barra de herramientas para establecer el esquema de destino en Microsoft Internet Explorer 6.0.
2. Cambie a la vista Diseño. 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í.
Página 3 de 14
4.
Haga clic en la página donde desea colocar la tabla de diseño. Nota
No coloq e la tabla de diseño en el control ContentPlaceHolder [ http://msdn.microsoft.com/eses/library/system.web.u i.webcontrols.contentplaceholder.aspx ] .
5.
En el menú Tabla, haga clic en Insertar tabla.
6.
En el cu adro de diálogo Insertar tabla cree u na tabla con tres filas y na col mna y, a contin ación, haga clic en Aceptar.
7. Coloqu e el cu rsor dentro de la segu nda fila de la tabla. 8.
En el menú Tabla, en el s bmenú Modificar, haga clic en Dividir celdas.
9.
En el c adro de diálogo Dividir celdas, seleccione Dividir en columnas y, a continu ación, haga clic en Aceptar.
10.
Config re las opciones sig ientes: En la fila central, haga clic en la col mna situ ada más a la izqu ierda y, a continu ación, establezca s Ancho en 48 en la ventana Propiedades. Haga clic en la fila su perior y, a contin ación, establezca su Alto en 48 en la ventana Propiedades. Haga clic en la fila inferior y, a contin ación, establezca su
Alto 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 u n color diferente qu e el color de fondo. Despu és de diseñar la tabla, pu ede agregar el contenido a la página maestra qu e aparecerá en todas las páginas.Agregará u n mensaje de copyright como pie de página y, a continu ación, u n menú.Si tiene u n gráfico de logotipo disponible, también pu ede agregarlo.
Para agregar contenido estático a la página maestra 1.
Haga clic en la celda inferior y, a continu ación, escriba el texto del pie de página, por ejemplo Copyright 2007 Contoso Inc.
2.
En el Cuadro de herramientas, arrastre n control Menu [ http://msdn.microsoft.com/eses/library/system.web.u i.webcontrols.menu .aspx ] desde el gru po de controles Navegación hasta la celda s perior.
3. Cree n menú sigu iendo estos pasos: a. Establezca la propiedad Menu [ http://msdn.microsoft.com/eses/library/system.web.u i.webcontrols.men .aspx ] del control Orientation [ http://msdn.microsoft.com/es-es/library/system.web.u i.webcontrols.menu .orientation.aspx ] en Horizontal [ http://msdn.microsoft.com/eses/library/system.web.u i.webcontrols.orientation.horizontal.aspx ] . b.
4.
Haga clic en la etiqu eta inteligente en el control Menu [ http://msdn.microsoft.com/eses/library/system.web.u i.webcontrols.men .aspx ] y haga clic en Editar elementos de menú en el c adro de diálogo Tareas de menú.Aparecerá el cu adro de diálogo Editar elementos de menú.
En el c adro 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ú:
Página 4 de 14
5.
a.
Haga clic en el primer nodo y, a continuación, establezca Text en Página Principal y establezca NavigateUrl en Home.aspx.
b.
Haga clic en el segundo nodo y, a continuación, establezca Text en Acerca de y establezca NavigateUrl en About.aspx.
c.
Haga clic en Aceptar para cerrar el cuadro de diálogo Editor de elementos de menú.
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 solu ciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, seleccione Agregar elemento existente.
b.
Navegue a su archivo gráfico, selecciónelo y, a continuación, haga clic en Agregar.
c.
En el Cu adro de herramientas, arrastre un control Image [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.image.aspx ] desde el grupo Estándar hasta la columna central izquierda de la tabla.
d. Establezca la propiedad ImageUrl [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.image.imageurl.aspx ] del control Image [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.image.aspx ] en el nombre del archivo gráfico. 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.
Para mover el marcador de posición de contenido 1. Arrastre el control ContentPlaceHolder [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.contentplaceholder.aspx ] a la celda central derecha.Para mover el control, haga clic en su interior y, a continuación, arrástrelo por su etiqueta. La propiedad ID del control es ContentPlaceholder1.Puede dejar este nombre o cambiarlo.Si ca mbia el nombre, anótelo porque necesitará recordarlo más adelante. 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.
Para crear la página de inicio 1.
En el Explorador de sol ciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, haga clic en Agregar nu evo elemento.
2.
En Plantillas instaladas de Visu al Stu dio, haga clic en Web Forms.
3.
En el cuadro Nombre, escriba Página principal.
4.
En la lista Leng aje, haga clic en el lenguaje de programación con el que prefiera trabajar.
5. Active la casilla Seleccionar la página maestra y, a continuación, haga clic en Agregar. Aparece el cuadro de diálogo Seleccionar la página maestra.
Página 5 de 14
6.
Haga clic en Master1.master y en Aceptar. Se crea un nuevo archivo .aspx.La pág ina contiene una directiva @ Page [ http ://msdn.microsoft.com/eses/library/ydy4x04a.aspx ] que asocia la página ac tual 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 <%@ Page Language="VB" MasterPageFile="~/Master1.master" ...%>
[C#] Copiar código <%@ Page Language="C#" MasterPageFile="~/Master1.master" ...%>
La página también contiene un elemento de control Content [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.content.aspx ] con el que trabajará luego. 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.
Para agregar contenido a la página de inicio 1.
En la vista Código fuente, escriba Página principal de Contoso en el elemento Título de la directiva @ Page en la parte superior de la página. Puede establecer el título de ca da página de contenido de forma independiente a fin de que se muestre el título correcto en el explorador cuando el contenido se c ombine con la página maestra.La información del título se almacena en la directiva @ Page de la página de contenido.
2. Cambie a la vista Diseño. Los controles ContentPlaceHolder [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.contentplaceholder.aspx ] de la página maestra se muestran como controles Content [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.content.aspx ] en la nueva página de contenido.Se muestra el resto del contenido de la página maestra para que pueda ver el diseño.No obstante, aparece atenuado porque no se puede cambiar durante la edición de una página de contenido; el cursor pasa a ser una barra vertical únicamente cuando se puede agregar contenido. 3.
En el control Content [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.content.aspx ] que coincide con ContentPlaceHolder1 en la página maestra, escriba Bienvenido al sitio web de Contoso.
4.
Seleccione el texto y, a continuación, asígnele el formato de encabezado seleccionando Encabezado 1 en la lista desplegable Formato del bloque situada encima del Cuadro de herramientas.
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. Puede crear la página Acerca de tal como creó la página de inicio.
Para crear la página Acerca de
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.
2.
Cambie el título de la página a Página Acerca de Contoso.
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.
Para probar las páginas 1.
Cambie a la página Home.aspx y, a continuación, presione CTRL+F5. 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.
2. Haga clic en el vínculo About. Se muestra la página About.aspx.También se combina con la página Master1.master.
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. El primer paso es agregar una propiedad a la página maestra.
Para agregar una propiedad a la página maestra 1. Cambie a la página Master1.master o ábrala. 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 ] .
3.
En la definición de clase, escriba el código siguiente. Visual Basic
Copiar código
Página 7 de 14
class="tgtSentence" >Public Property CompanyName() As String Get Return CType(ViewState( "companyName" ), String) End Get Set(ByVal Value As String) ViewState("companyName" ) = Value End Set End Property
C#
Copiar código
public String CompanyName { get { return (String) ViewState["companyName" ]; } set { ViewState["companyName" ] = value; } }
El código crea una p ropiedad 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. Visual Basic
Copiar código
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Init Me.CompanyName = "Contoso" End Sub
C#
Copiar código
void Page_Init(Object sender, EventArgs e) { this.CompanyName = "Contoso"; }
En este ejemplo, integrará el valor de la propiedad CompanyName en la página. Ahora puede modificar la página de contenido para utilizar la propiedad CompanyName de la página maestra.
Para hacer referencia a la propiedad CompanyName en la página de contenido 1. Cambie a la página Home.aspx o ábrala. 2. Cambie a la vista Código fuente. 3.
En la parte superior de la página, bajo la directiva @ Page [ http://msdn.microsoft.com/eses/library/ydy4x04a.aspx ] , agregue la siguiente directiva @ MasterType [ http://msdn.microsoft.com/eses/library/ms228274.aspx ] : Copiar código <%@ MasterType virtualpath="~/Master1.master" %>
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. 4. Cambie a la vista Diseño. 5.
En el control Content [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.content.aspx ] , cambie el texto a Bienvenido al sitio web de.
6.
En el Cuadro de herramie tas, arrastre un control Label [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.label.aspx ] desde el grupo Está dar hasta el control Content [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.content.aspx ] y coloque después el texto estático siguiente: Welcome to the Web site of [Etiqueta]
7. Establezca la propiedad ID [ http://msdn.microsoft.com/es-es/library/system.web.ui.control.id.aspx ] del control Label [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.label.aspx ] en CompanyName. 8.
En el Explorador de solucion es, haga clic con el botón secundario en Home.aspx y seleccione Ver código para abrir el editor de código.
9.
En la definición de clase, agregue el código siguiente. Visual Basic
Copiar código
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Load CompanyName.Text = Master.CompanyName End Sub
C#
Copiar código
void Page_Load(Object sender, EventArgs e) { CompanyName.Text = Master.CompanyName; }
La propiedad Master [ http://msdn.microsoft.com/es-es/library/system.web.ui.page.master.aspx ] de la página de contenido devuelve una referencia a la página maestra tal como se define en la directiva @ MasterType [ http://msdn.microsoft.com/es-es/library/ms228274.aspx ] que agregó en el pa so 3. Ahora puede probar la página de contenido para asegurarse de que hace referencia correctamente a la propiedad CompanyName de la página maestra.
Para probar la refere cia a la propiedad de la págin a maestra 1.
Cambie a la página Home.aspx o ábrala y, a continuación, presione CTRL+F5 para ejecutarla. La página se muestra en el explorador con el texto Welcome to the Web site of Con toso
2. Cierre el explorador. 3.
Cambie a la página de código subyacente Master1.master o ábrala.
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.
Página 9 de 14
Visual Basic
Copiar código
Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.Init Me.CompanyName = "New Company Name" End Sub
C#
Copiar código
void Page_Init(Object sender, EventArgs e) { this.CompanyName = "New Company Name"; }
5.
Cambie a la página Home.aspx y, a continuación, presione CTRL+F5 para ejecutarla de nuevo. Esta vez, el nombre de la compañía actualizado aparece en la página.
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.
Para realizar una copia de la página maestra 1.
En el Explorador de soluciones, haga clic con el botón secundario en Master1.master y, a continuación, haga clic en Copiar.
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.
4.
Abra Master2.master y, en la directiva @ Master, cambie Master1 a Master2. La directiva de página finalizada tendrá una apariencia similar al ejemplo de c ódigo siguiente: Visual Basic
Copiar código
<%@ Master Language="VB" CodeFile="Master2.master.vb" Inherits="Master2" %>
C#
Copiar código
<%@ Master Language="C#" CodeFile="Master2.master.cs" Inherits="Master2" %>
5. Cambie a la vista Diseño.
Página 10 de 14
6.
En la ventana Propiedades, en la lista desplegable de la parte superior, haga clic en DOCUMENTO.
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.
8.
Abra el archivo de código de Master2.master y cambie el nombre de la clase en el archivo de código subyacente de la página maestra de Master1 a Master2 de manera que coincida con el valor del atributo Inherits de la directiva @ Master de la página. El código debe tener la apariencia del ejemplo siguiente: Visual Basic
Copiar código
Partial Class Master2
C#
Copiar código
public partial class Master2 : System.Web.UI.MasterPage
El paso siguiente es agregar a cada página maestra un botón que permita al usuario seleccionar la página maestra alternativa.
Para agregar los botones para seleccionar una página maestra alternativa 1. Cambie a la página Master2.master o ábrala. 2.
En el Cuadro de herramientas, arrastre un control LinkButton [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.linkbutton.aspx ] desde el nodo Estándar hasta la página y colóquelo bajo el menú de la celda superior de la tabla.
3. Establezca la propiedad Text [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.linkbutton.text.aspx ] del botón en Primer color. 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. Visual Basic
Copiar código
Protected Sub LinkButton1_Click( ByVal sender As Object, ByVal e As EventArgs)_ Handles LinkButton1.Click Session("masterpage") = "Master1.master" Response.Redirect(Request.Url.ToString()) End Sub
[C#] Copiar código
Página 11 de 14
void LinkButton1_Click(Object sender, EventArgs e) { Session["masterpage"] = "Master1.master"; Response.Redirect (Request.Url.ToString()); }
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. 5. Cambie a la página Master1.master o ábrala en la vista Diseño . 6. Agregue un control LinkButton [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.linkbutton.aspx ] tal y como hizo en los pasos 1 y 2 y, a continuación, establezca su propiedad Text [ http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.linkbutton.text.aspx ] en Segundo color. 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. Visual Basic
Copiar código
Protected Sub LinkButton1_Click( ByVal sender As Object, ByVal e As EventArgs)_ Handles LinkButton1.Click Session("masterpage") = "Master2.master" Response.Redirect(Request.Url.ToString()) End Sub
C#
Copiar código
void LinkButton1_Click(Object sender, EventArgs e) { Session["masterpage" ] = "Master2.master" ; Response.Redirect(Request.Url.ToString()); }
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.
Para escribir el código para seleccio ar di ámicamen te la pági a maestra 1. Cambie a la página About.aspx o ábrala. 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
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. 3. En la definición de clase, agregue el código siguiente. Visual Basic
Copiar código
Sub Page_PreInit(ByVal sender As Object, ByVal e As EventArgs) _ Handles Me.PreInit If Not Session("masterpage" ) Is Nothing Then Me.MasterPageFile = CType(Session( "masterpage" ), String) End If End Sub
C#
Copiar código
void Page_PreInit(Object sender, EventArgs e) { if(Session["masterpage" ] != null) { this.MasterPageFile = (String) Session[ "masterpage" ]; } }
El código establece el valor de la propiedad MasterPageFile [ http://msdn.microsoft.com/eses/library/system.web.ui.masterpage.masterpagefile.aspx ] de la página actual en el valor de la variable de sesión, si hay alguno.Este código se debe ejecutar en el controlador Page_PreInit; no se puede ejecutar en un controlador que se produzca después que Page_PreInit (por ejemplo, en el controlador Page_Init), porque la página maestra debe configurarse para poder crear una instancia de ella antes de que tenga lugar cualquier inicialización posterior. Ahora puede probar las páginas maestras dinámicas.
Para probar las páginas maestras dinámicas 1. En la página About.aspx, presione CTRL+F5 para ejecutar la página. La página se muestra en el explorador combinada con su página maestra predeterminada, Master1.master. 2. Haga clic en el vínculo Segundo color. Se vuelve a mostrar la página, esta vez combinada con Master2.master, que no tiene n ingún color de fondo. 3. Haga clic en el vínculo Primer color. La página se muestra de nuevo utilizando Master1.master. Notas sobre el uso de páginas maestras
Hay otros aspectos que debe tener en cuenta al trabajar con una página maestra: En una aplicación real, probablemente almacenaría la información similar al nombre de la compañía en el archivo de configuración y la leería directamente en las páginas de contenido.Sin embargo, el escenario
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/eses/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 tu torial 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/eses/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/eses/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. Definir marcadores de posición de contenido predeterminado.Si una página ASP.NET no proporciona el contenido para el marcador de posición, la página maestra muestra el contenido predeterminado. 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/eses/library/dct97kc3.aspx ] Otros recursos
Página 14 de 14
Páginas principales ASP.NET [ http://msdn.microsoft.com/es-es/library/wtxbf3hh.aspx ] Etiquetas:
Contenido de la comunidad
