3. Master Pages y Content Pages. Objetivo: * Manejar Master Pages

Transcripción

1 3. Master Pages y Content Pages Objetivo: * Manejar Master Pages La definición de una Master Page es como la de cualquier página. Las Master Pages pueden contener marcar, controles, código o cualquier combinación de estos elementos. Sin embargo, una Master Page puede contener un tipo especial de control llamado ContentPlaceHolder. Un ContentPlaceHolder define una región de la representación de la master page que puede substituirse por el contenido de una página asociada a la maestra. Un ContentPaceHolder también puede contener información por defecto, por si la página derivada no necesita sobre escribir este contenido. La sintaxis de un control ContentPlaceHolder es como sigue: Para diferenciar una Master Page de una página normal, la Master Page se guarda con una extensión.master. Una página puede derivar de una Master Page simplemente con definir un atributo MasterPageFile en su directiva Page, de la forma vista arriba. Una página que se asocia a una Master Page se llama Content Page (Página de Contenido). <%@ Page MasterPageFile="Site.master" %> Una Content Page puede declarar controles Content que sobrescriban específicamente el contenido de las secciones marcadas en la Master Page. Un control Content se asocia a un control ContentPlaceHolder particular a través de la propiedad ContentPlaceHolderID. Una Content Page debe contener marcas y controles sólo dentro de los controles Content; no puede tener ningún contenido de alto nivel por sí misma. Puede, sin embargo, tener directivas o código del lado del servidor. Accediendo a una Master Page desde Código Además de sobre escribir el contenido, es posible que la Content Page acceda de forma programada a su Master Page. Una Content Page crea una referencia fuertemente tipada a la Master Page mediante la directiva <%@ MasterType %>, especificando la ruta virtual de la página maestra: <%@ MasterType VirtualPath="Site.master" %>

2 Por lo tanto, la Content Page puede referenciar la Master Page mediante la propiedad Master de la clase Page: Master.FooterText = "This is a custom footer"; AdRotator ad = (AdRotator)Master.FindControl("MyAdRotator"); En el ejemplo de código anterior, FooterText es una propiedad pública expuesta en la Master Page, mientras que MyAdRotator es un control de la Master Page. Anidando Master Pages Las Content Pages también pueden ser Master Pages. Esto quiere decir que es posible derivar una Master Page a partir de otra Master Page. Por ejemplo, podríamos tener una Master Page de primer nivel que represente la cabecera/pie de página y la navegación global del sitio, y después Master Pages separadas que deriven de esta Master para definir los aspectos de las diferentes sub-secciones del sitio. Las Content Pages derivarán de la página maestra correspondiente a la sección a la que pertenece la Content Page. Ejemplo: Para empezar crearemos un sitio web, y lo primero que haremos es crear una página maestra y le pondremos de nombre site, este quedara como site.master Al crear la site.master, nos creara una división que tendrá de nombre ContentPlaceHolder1, en esta área se desarrollan todas los formularios que se crean. Posteriormente se creara un tabla de 2 x 2 abajo del ContentPlaceHolder1.

3 Ahora con el mouse trasladaremos el ContentPlaceHolder1 a la celda inferior derecha y se mostrara según la siguiente figura. Esto lo hacemos para dejar espacio para el diseño del master page, en la celda inferior izquierda incorporaremos un menú, a partir del control de herramienta, pestaña Navegación, opción menu. Ahora dejaremos por un momento el site.master y comenzaremos a crear formularios para incorporarlos al master page.

4 Ahora empezaremos a crear los formularios, para esto debemos, crear un formulario y activar un check box que está abajo que dice Seleccionar página maestra, dejaremos el nombre de Default.aspx a este formulario. Al crearlo le pedirá a que Master Page quieren relacionarlo. Toman la opción de site.master. Al crear el formulario tendrá el nombre de Default.aspx con la siguiente configuración. En la cual especifica que esta relacionado al site.master

5 La vista diseño se vera de la siguiente forma: El script Default.aspx muestra la forma en que definimos el site master, pero solo me da la opción de cambiar el ContentPlaceHolder1 nos aparece personalizado, allí crearemos un formulario cualquiera para poder realizar el ejemplo. Aquí tienen uno. Una vez creado este formulario diseñaremos dos más con el nombre Default2.aspx y Default3.sapx los cuales incorporaremos posteriormente al page master: site.master. Ahora en el script site.master le incorporaremos un poco de diseño para ver el comportamiento de las paginas maestras..

6 Ahora configuraremos el menú para que llamen a los tres formularios. Configuraremos, cada opción para que llame a los tres script que creamos, en la opción text le pondremos el nombre a la opción, y en la propiedad NavigateUrl seleccionare un script para cada opción. Una vez estén todas las opciones configuras el script site.master tendrá este aspecto. Ahora prueben el resultado.

7 Ejercicio: 1. Cree un Master Page con un diseño con imágenes de internet y cree 3 formularios aplicando validación y que uno de ellos se puedan subir imágenes. 2. Cree un Master Page usando sola barra vertical izquierda, y también cree 3 formularios aplicando todo lo aprendido hasta hoy. 3. En ambos incluya también un menú. 4. Cree un Master Page, donde el menú este compuesto de imágenes y no menú para seleccionar formularios.