tutorial paginas maestras

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 ] .

En este tutorial se muestran las siguientes tareas:

Crear una página maestra

Crear una página ASP.NET con contenido que desea mostrar en la página maestra.

Ejecutar las páginas maestras para 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 lo contrario, cree un sitio Web y una página nuevos siguiendo estos pasos.

Para crear un sitio Web del sistema de archivos

1. Abra Visual Web Developer.

2. En el menú Archivo, haga clic en NuevoSitio Web.

Aparece el cuadro de diálogo Nuevo sitio Web.

3. En Plantillas instaladas de Visual Studio, haga clic en Sitio Web de ASP.NET.

4. En el cuadro 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 carpeta C:\WebSites.

5. En la lista Lenguaje, haga clic en el lenguaje de programación con el que prefiera trabajar.

6. Haga clic en Aceptar.

©2010 Microsoft Corporation. All rights reserved.

Página 1 de 14

29-09-2010

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.

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/es-es/library/ms228176.aspx ] en lugar de la declaración @ Page [ http://msdn.microsoft.com/es-es/library/ydy4x04a.aspx ] que normalmente se encuentra en la parte superior de las páginas ASP.NET.El cuerpo de la página contiene un control ContentPlaceHolder [ http://msdn.microsoft.com/es-es/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í.

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.

Página 2 de 14

29-09-2010

4. Haga clic en la página donde desea colocar la tabla de diseño.

5. En el menú Tabla, haga clic en Insertar tabla.

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.

7. Coloque el cursor dentro de la segunda fila de la tabla.

8. En el menú Tabla, en el submenú Modificar, haga clic en Dividir celdas.

9. En el cuadro de diálogo Dividir celdas, seleccione Dividir en columnas y, a continuación, haga clic en Aceptar.

10. Configure las opciones siguientes:

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.

Haga clic en la fila superior y, a continuación, establezca su Alto en 48 en la ventana Propiedades.

Haga clic en la fila inferior y, a continuación, establezca su Alto en 48 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.

Para agregar contenido estático a la página maestra

1. Haga clic en la celda inferior y, a continuación, escriba el texto del pie de página, por ejemplo Copyright 2007 Contoso Inc.

2. En el Cuadro de herramientas, arrastre un control Menu [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.menu.aspx ] desde el grupo de controles Navegación hasta la celda superior.

3. Cree un menú siguiendo estos pasos:

a. Establezca la propiedad Menu [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.menu.aspx ] del control Orientation[ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.menu.orientation.aspx ] en Horizontal [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.orientation.horizontal.aspx ] .

b. Haga clic en la etiqueta inteligente en el control Menu [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.menu.aspx ] y haga clic en Editar elementos de menú en el cuadro de diálogo Tareas de menú.Aparecerá el cuadro de diálogo Editar elementos de menú.

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ú:

Nota

No coloque la tabla de diseño en el control ContentPlaceHolder [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.contentplaceholder.aspx ] .

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.

Página 3 de 14

29-09-2010

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ú.

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.

b. Navegue a su archivo gráfico, selecciónelo y, a continuación, haga clic en Agregar.

c. En el Cuadro de herramientas, arrastre un control Image [ http://msdn.microsoft.com/es-es/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/es-es/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/es-es/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 cambia 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 soluciones, haga clic con el botón secundario en el nombre del sitio web y, a continuación, haga clic en Agregar nuevo elemento.

2. En Plantillas instaladas de Visual Studio, haga clic en Web Forms.

3. En el cuadro Nombre, escriba Página principal.

4. En la lista Lenguaje, 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 4 de 14

29-09-2010

6. Haga clic en Master1.master y en Aceptar.

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]

[C#]

La página también contiene un elemento de control Content [ http://msdn.microsoft.com/es-es/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 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.


Los controles ContentPlaceHolder [ http://msdn.microsoft.com/es-es/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.


Puede crear la página Acerca de tal como creó la página de inicio.

Para crear la página Acerca de

Copiar código

<%@ Page Language="VB" MasterPageFile="~/Master1.master" ...%>

Copiar código

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

Página 5 de 14

29-09-2010

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.


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.

3. En la definición de clase, escriba el código siguiente.

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 ] .

Visual Basic Copiar código

<span id="tgt151" sentenceid="dfcebe131bf22333438ad18e6c10d129"

Página 6 de 14

29-09-2010

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.

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/es-es/library/ydy4x04a.aspx ] , agregue la siguiente directiva @ MasterType [ http://msdn.microsoft.com/es-es/library/ms228274.aspx ] :

class="tgtSentence">Public Property CompanyName() As StringGet

Return CType(ViewState("companyName"), String)End GetSet(ByVal Value As String)

ViewState("companyName") = ValueEnd Set

End Property

C# Copiar código

public String CompanyName{

get { return (String) ViewState["companyName"]; }set { ViewState["companyName"] = value; }

}


Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _

Handles Me.InitMe.CompanyName = "Contoso"

End Sub

C# Copiar código

void Page_Init(Object sender, EventArgs e){

this.CompanyName = "Contoso";}

Copiar código

<%@ MasterType virtualpath="~/Master1.master" %>

Página 7 de 14

29-09-2010

La directiva enlaza la propiedad Master de la página de contenido, que utilizará en breve, a la página Master1.master.


5. En el control Content [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.content.aspx ] , cambie el texto a Bienvenido al sitio web de.

6. En el Cuadro de herramientas, arrastre un control Label [ http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.label.aspx ] desde el grupo Estándar 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 soluciones, 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.

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 paso 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 referencia a la propiedad de la página 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 Contoso

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.


Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) _

Handles Me.Load CompanyName.Text = Master.CompanyNameEnd Sub

C# Copiar código

void Page_Load(Object sender, EventArgs e){ CompanyName.Text = Master.CompanyName;}

Página 8 de 14

29-09-2010

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:



Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) _

Handles Me.InitMe.CompanyName = "New Company Name"

End Sub

C# Copiar código

void Page_Init(Object sender, EventArgs e){

this.CompanyName = "New Company Name";}


<%@ Master Language="VB" CodeFile="Master2.master.vb"Inherits="Master2" %>

C# Copiar código

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

Página 9 de 14

29-09-2010

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:

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/es-es/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/es-es/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.

[C#]


Partial Class Master2

C# Copiar código

public partial class Master2 : System.Web.UI.MasterPage


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

Copiar código

Página 10 de 14

29-09-2010

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/es-es/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/es-es/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.

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 seleccionar dinámicamente la página maestra

1. Cambie a la página About.aspx o ábrala.

void LinkButton1_Click(Object sender, EventArgs e){ Session["masterpage"] = "Master1.master"; Response.Redirect(Request.Url.ToString());}


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());}

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 11 de 14

29-09-2010

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.

El código establece el valor de la propiedad MasterPageFile [ http://msdn.microsoft.com/es-es/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 ningú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

maestras dinámicamente a la página de inicio y, en cambio, trabajará con otras páginas que ha creado.


Sub Page_PreInit(ByVal sender As Object, ByVal e AsEventArgs) _

Handles Me.PreInitIf 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"]; }}

Página 12 de 14

29-09-2010

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.

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/es-es/library/dct97kc3.aspx ] Otros recursos

Página 13 de 14

29-09-2010

Páginas principales ASP.NET [ http://msdn.microsoft.com/es-es/library/wtxbf3hh.aspx ]

Etiquetas:

Contenido de la comunidad

Página 14 de 14

29-09-2010

tutorial paginas maestras

Documents