Cómo crear una página maestra

La página maestra es una herramienta que se utiliza para suprimir la apariencia de páginas web de la misma serie. El uso de la página maestra ASP.NET puede crear un diseño consistente para las páginas de nuestra aplicación. En esta técnica, las páginas web se dividen en dos categorías: las páginas web que describen una apariencia coherente se denominan páginas maestras y las páginas web que hacen referencia a la página maestra se denominan páginas de contenido.

El uso de temas y máscaras permite a los desarrolladores de aplicaciones almacenar información de estilo y diseño en un conjunto de archivos independientes. Este conjunto de archivos se denomina colectivamente tema. El tema puede ser independiente de las páginas de la aplicación y proporcionar configuraciones de estilo unificadas para las páginas, incluidos controles, etc.

Ventajas de los temas: Los temas nos permiten ignorar los estilos al desarrollar aplicaciones, y no hay necesidad de actualizar o cambiar el código al aplicar estilos en el futuro. El tema es independiente de la aplicación web, lo que lo hace extremadamente fácil de mantener.

1. Página maestra

La página maestra es un tipo muy distintivo de control ASP.NET, que puede proporcionar un diseño unificado para toda la aplicación. Aprendamos sobre el conocimiento relevante de las páginas maestras aprendiendo y dominando los métodos básicos de creación y uso de páginas maestras, así como el uso anidado de páginas maestras más complejas, el cambio automático y la llamada de páginas maestras con el mismo tema.

1． Comprender la página maestra

En primer lugar, tan pronto como ingresamos al estudio de la página maestra, siempre debemos recordar que la página se divide en dos partes, a saber, la página maestra en sí y la página de contenido que usa una determinada página maestra.

Las páginas maestras permiten a los desarrolladores crear plantillas de sitio unificadas y áreas editables designadas. El área editable en la página maestra o mostrada a través del control ContentPlaceHolder. Una página maestra puede contener uno o más controles ContentPlaceHolder, que se muestran como controles de contenido en la página de contenido.

El contenido fuera del control ContentPlaceHolder aparece gris en la página que llama a la página maestra, porque el contenido no se puede cambiar al editar la página de contenido. De esta manera, en realidad solo llenamos el área editable especificada en la página maestra con contenido de acuerdo con las necesidades reales en la página de contenido. Esto significa que el contenido de la página de contenido proviene de dos partes. Una es el área no editable de la página de contenido en sí. Esta área en realidad se llenó con el contenido de la página maestra cuando especificamos la página maestra de la página de contenido. , la otra parte del contenido es la página de contenido en sí, todos están dentro del área editable dividida por la página maestra.

A modo de analogía, el escritorio de nuestra mesa de comedor es nuestra página web, por lo que ahora necesitamos poner algunos patrones y elementos en el escritorio. Podemos elegir el mantel que nos guste extender sobre él, que contiene nuestro favorito. patrones y elementos, como cajas azules y gatitos blancos. Cavamos un agujero en el mantel, para que cuando pongamos las cosas sobre la mesa después de colocar el mantel, solo puedan colocarlas en el agujero. Tenga en cuenta que no permitimos que se coloquen artículos sobre el mantel para evitar manchar el mantel.

1.1 Crear una página maestra

Creemos una página maestra en detalle. Domine y comprenda la estructura básica y el uso de las páginas maestras creando esta sencilla página maestra. Crear una página maestra es realmente muy simple, solo debemos seguir los pasos a continuación.

(1) Abra VS2008 y cree un nuevo proyecto.

(2) Haga clic derecho en el nombre del proyecto en "Explorador de soluciones", haga clic en el comando "Agregar nuevo elemento" en el menú de acceso directo emergente y aparecerá la ventana "Agregar nuevo elemento".

(3) Seleccione la opción "Página maestra" en la ventana "Agregar nuevo elemento" y asigne a la página maestra que desea crear un nombre adecuado y significativo (recuerde, para el proyecto, el nombre es muy importante para su posterior mantenimiento e identificación), el sufijo del nombre de la página maestra debe ser ".master", esta es una regla.

(4) Haga clic en el botón "Agregar" y luego se completará la creación de la página maestra. A continuación, podrá diseñar la página maestra agregada. El método de diseño es exactamente el mismo que nuestro método de diseño de páginas, porque la página maestra puede considerarse como una hoja de papel en blanco al igual que la página. Es solo que hay un control ContentPlaceHolder en la página maestra, por lo que puedes editar el área.

Echemos un vistazo a la página maestra creada mediante los pasos anteriores. Contiene un archivo .master y su correspondiente archivo .master.cs (se ve muy similar a la página). Echemos un vistazo al código del archivo .master que creamos:

<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPageTestOne.master.cs"Inherits="MasterPageTestOne"% >

Podemos ver que solo hay dos controles ContentPlaceHolder más en el código. Esta es en realidad el área editable que queda para la página de contenido. , y es el agujero en nuestro mantel. Ahora diseñemos nuestra página maestra y coloquemos algunas cosas en ella, lo que significa que comenzaremos a rociar nuestro mantel. Agreguemos algunos hipervínculos.

<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPageTestOne.master.cs"Inherits="MasterPageTestOne"%>

< / p>

Pego todo el código aquí para que todos vean los elementos cuando diseñamos la página de contenido, es decir, spray el mantel donde está ubicado, no se puede colocar en el hueco (área editable de la página de contenido). Esto es algo natural, porque eso está reservado para el escritorio (página de contenido). He aquí un presagio de las complejas operaciones que seguirán y algunas cosas que decir por adelantado.

Para los elementos que colocamos en la página maestra, también necesito colocar algún procesamiento de eventos correspondiente en la página maestra para responder. También debemos prestar atención al hecho de que el procesamiento de eventos de elementos en la página de contenido debe colocarse en la página maestra y todos deben ocuparse de sus propios asuntos y limpiar la nieve al frente. de su propia puerta.

Hacemos clic en la vista de diseño del editor. En este momento ya podemos ver los elementos que colocamos en la página, pero aún no podemos visualizarlos en el navegador. Puede hacer clic con el botón derecho en la página maestra en el explorador de soluciones. Encontrará que este elemento del menú no está disponible en el navegador, pero nuestro archivo de formulario sí. Porque solo hemos creado la página maestra y no le hemos asignado una página de contenido. Todo lo que podemos ver en el navegador es la página de contenido, y la página maestra, cuando se hace referencia a ella, en realidad no es más que un control en la página web. ¿Cómo se puede ver un control en el navegador? Eso es para mirar la página web. :)

Vale, como no lo hemos visto hasta ahora, veámoslo ahora. No es difícil verlo, solo necesita especificar una página de contenido. Los pasos específicos son:

(1) Haga clic con el botón derecho en el nombre del proyecto en "Explorador de soluciones", haga clic en el comando "Agregar nuevo elemento" en el menú contextual emergente y haga clic en "Agregar nuevo elemento". aparece una ventana.

(2) Seleccione la opción "Formulario web" en la ventana "Agregar nuevo elemento" y asigne al formulario web que desea crear un nombre apropiado y significativo. Una cosa es muy importante. Al crear un nuevo formulario web, debido a que queremos hacer referencia a la página maestra, debemos marcar la casilla de verificación "Seleccionar página maestra" en la esquina inferior derecha de la ventana superior y luego hacer clic en Aceptar.

De esta manera, hemos completado la creación de una página de contenido. Vayamos al navegador y echemos un vistazo. Bueno, sí, puedes ver tu página maestra anterior en el navegador. ¿Qué quiere decir esto? Esto equivale a que visitemos la cámara (navegador) directamente encima del escritorio. Cuando rociaste el mantel, probablemente estabas en una fábrica de pintura y solo te llevaste el mantel rociado a casa y lo pusiste en el escritorio. con tu cámara. Eso sí, debes recordar que nuestro mantel tiene agujeros para evitar que se manche, rociarlo una vez sale muy caro. En el futuro, los platos y cuencos deben colocarse sobre la mesa y no sobre el mantel.

Aquí quiero contaros otra cosa. Cuando estamos haciendo proyectos, todos tenemos preferencias personales. Por lo general, primero creo una página Test.aspx para probar y escribir código. Este es un buen hábito para los niños que están comenzando a aprender. Intentamos no probarlo en nuestros archivos de proyecto. Podemos eliminar todos los problemas posibles y colocar todos los intentos y experimentos en Test.aspx.

Veamos ahora cómo se ve el código en la página de contenido que agregamos.

<%@PageLanguage="C#"MasterPageFile="~/MasterPageTestOne.master"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2"Title="Página sin título" % >

Podemos ver dos cosas:

Primero , es diferente del código del archivo de formulario normal que creamos. No hay elementos HTML;

En segundo lugar, el código es muy pequeño, con solo un comando de página y dos controles de contenido.

¿A qué se debe esto?

La primera pregunta: ¿A dónde fue a parar el material HTML?

Segunda pregunta: ¿Para qué sirve este código único?

De hecho, todos los códigos HTML están en la página maestra. Como dijimos antes, cuando se encuentra la página maestra, la página tradicional se divide en dos partes, a saber, la página maestra y la página de contenido. Debido a que está dividido en dos partes, el código de la página tradicional también debe estar dentro de estos dos tipos de archivos, de modo que estos dos tipos de archivos se empalmen en el formulario web original. . de. Todos esos códigos html están en la página maestra. En la página de contenido, solo está la información de la página maestra a la que se hace referencia a través de la directiva Página. Al mismo tiempo, el control ContentPlaceHolder (los dos agujeros) en la página maestra se convierte en un control de Contenido en la página de contenido. la página maestra. Se explica en la página y no se puede repetir, por lo que hay muy poco código en la página de contenido. Menos no da miedo, menos es más claro, ¿no? Podemos agregar nuestras cosas nosotros mismos. Vamos, agreguemos algo a la página de contenido. Escribamos algunas palabras debajo del formulario de diseño. Echemos un vistazo al código después de escribir algunas palabras:

<%@PageLanguage="C#"MasterPageFile="~/MasterPageTestOne.master" AutoEventWireup=. "true"CodeFile="Default2.aspx.cs"Inherits="Default2"Title="Página sin título"%>

Soy de la página de contenido, no de la página maestra.

Pegué todos estos códigos. Bueno, podemos ver claramente que nuestra operación actual se lleva a cabo en ese agujero. Entonces, ¿por qué no hay nada escrito en el agujero con la cabeza de identificación en la parte superior? ¿Te acuerdas? Ese agujero está en , no en . Por supuesto, ese agujero también tiene su propósito. Podemos procesar algo en ese agujero, al igual que cuando creamos una página web, a veces escribimos algo en . Simplemente escribe allí cuando lo necesites y siéntete libre de hacer garabatos. Créame, eso es correcto.

También encontraremos una cosa en la vista de diseño. Es editable solo en el control de Contenido, pero no en otros lugares. Debido a que otros lugares están cubiertos por el mantel, no puedes tocar la mesa directamente. Si tienes que tocarla, lo único que puedes tocar es el mantel, así que regresa a la página de contenido y hazlo.

Tal vez preguntes, hemos seguido lo que dijiste y ahora podemos ver estas cosas en el navegador, pero las fuentes y otras cosas de estas cosas no se han configurado, lo cual es muy feo. Jaja, no te preocupes, ahora solo estamos diseñando el diseño. Este es el beneficio de las páginas maestras y los temas. Separan completamente estas tareas, algo que haremos en el futuro. No se apresure a configurarlo todavía, porque la configuración que está realizando ahora será en vano y descubrirá que si lo configura, le causará problemas. Esta es una tendencia en la creación de páginas web, y también es el principio de la palabra "separación de código" que se enfatiza al crear cosas ahora. El "desacoplamiento" que mencionaste más adelante cuando estudiabas el análisis de sistemas es similar a esta idea.

Puedes configurarlo tú mismo primero y probarlo. No es nada. Se trata de practicar y aprender. No importa, probar más sólo te hará bien y no mal.

Seguimos aprendiendo. Acabamos de decir que las respuestas a eventos de los controles en la página maestra y la página de contenido son diferentes, entonces, ¿podemos controlar las cosas en la página maestra en la página de contenido? De hecho, es posible. Intentémoslo. (Se recomienda que cree un nuevo Test.master y Test.aspx. Esto es realmente bueno para que pruebe y practique)

Agreguemos otra cosa a la página maestra, agreguemos una etiqueta, específicamente The El código es el siguiente:

Puedes preguntar, ¿por qué no especificaste el atributo de texto? De hecho, esto está bien, no hay problema. No es necesario mostrarlo al principio. ¿Por qué es necesario especificarlo? El texto es solo un atributo. ¿No especifiqué la fuente del enlace cuando coloqué el control de hipervínculo? ¿En este momento? Ningún problema.

Después de agregar la línea de código anterior a la página maestra, a continuación colocamos un botón en la página de contenido. Ahora queremos hacer algo como esto: al hacer clic en el botón en la página de contenido, dejamos que The. El texto de la etiqueta en la página maestra cambia al nombre de mi estudio. Hagámoslo paso a paso.

Primero colocamos un botón en la página de contenido. Puede arrastrar y soltar, o puede pegar directamente mi código a continuación, el efecto es el mismo.

Bien, hemos colocado nuestro código y ahora podemos hacer doble clic en el botón, agregarle código de evento. Después de hacer doble clic, la pantalla se ubicará en el siguiente código en el archivo .aspx.cs correspondiente:

protectedvoidbutton1_Click(object sender, EventArgs e)

{

}

No subestimes tu doble clic. Es muy casual hacer clic con el mouse dos veces. De hecho, el editor hace más trabajo detrás de escena que simplemente agregar el código anterior. no lo crees, mira nuevamente tu archivo .aspx, el código correspondiente al control del botón que acabas de colocar mediante código escrito a mano ha cambiado. Ahora el programa se ve como el siguiente, con uno extra: onclick="button1_Click", ¿bien? La línea de código adaptada es:

Jaja, no t Miedo, has vuelto a progresar, ¿te has dado cuenta? Si no hace doble clic, solo necesita especificar el atributo onclick y luego crear un método con el nombre correspondiente en el atributo en .aspx.cs para jugar con el botón. Ahora ya no necesita hacer doble clic. el botón cada vez para agregarlo. Bien, escribamos el cuerpo del método específico ahora. ¿No olvides lo que queremos hacer? Para cambiar la propiedad Texto del control de etiqueta en la página maestra. Bien, solucionémoslo.

protectedvoidbutton1_Click(remitente del objeto, EventArgs e)

{

Labellb1 = this.Master.FindControl("label1") asLabel;

lb1.Text = "Xiao Tang Studio";

}

Agregamos dos líneas de código a button1_Click. Permítanme hablar sobre estas dos líneas de código. La segunda línea no es nada, especificamos el atributo Texto de lb1.

¿Qué pasa con la primera línea de código? En la primera línea de código, usamos FindControl, un método proporcionado por la clase Master, para encontrar el control que especificamos, porque devuelve un tipo de control general. Si queremos usarlo, necesitamos convertir el objeto devuelto. FindControl en el tipo de control correspondiente, normalmente el control se convierte a ese tipo para que podamos usarlo.

Aquí hay otro problema. Nuestro objeto lb1 se crea en la página de contenido. No es lo mismo que label1 en la página maestra. ¿Cómo es que se cambia la propiedad label1.Text cuando se cambia el atributo lb1.Text? Esto no parece correcto. Recuerde, hablé sobre las características de los tipos de referencia cuando les hablé antes sobre los tipos de datos de C#. ¿Es diferente de los datos de tipo valor? Sí, el tipo de referencia pasa la dirección. Si todavía tienes problemas aquí, debes revisar el material de esa clase, lo que significa que aún no has pasado el examen. ¿Has descubierto la importancia de la base ahora? Parece simple, ¡pero es crucial que entiendas los altos edificios que hay detrás!

Del mismo modo, también es importante comprender "objectsender, EventArgs e". Ya hablé de ello. Eche un vistazo al PPT en la sección sobre eventos y delegación de la que hablé.

Bien, ahora que hemos terminado de escribir el método, echemos un vistazo al efecto a través del navegador. Progresarás rápidamente, solo recuerda repasar con frecuencia y comprender que este es solo el primer nivel de aprendizaje, solo la etapa preliminar. Aprendamos de un ejemplo y practiquemos cómo cambiar otras cosas en la página maestra. Preste atención a la diferencia entre datos de tipo de referencia y datos de tipo de valor, ¡recuerde!

2． Anidamiento de páginas maestras

Las páginas maestras se pueden anidar, es decir, una página maestra puede hacer referencia a otra página como su página maestra. Las páginas maestras con componentes se pueden crear utilizando páginas maestras anidadas. Por ejemplo, podemos usarlo para implementar páginas maestras secundarias para los contenidos respectivos de diferentes subsitios de un sitio grande. Estas páginas alfabéticas hacen referencia a la página maestra del sitio para presentar el efecto que queremos.

El sufijo de la página maestra secundaria también es .master, y la página maestra secundaria también tiene su propio marcador de posición de contenido.

Método de agregar: cree una nueva página maestra, marque la casilla "Seleccionar página maestra", seleccione una página principal y haga clic en Aceptar. En este momento, nuestra página maestra secundaria ya existe. En este momento, encontrará que la página maestra que creamos antes y su página de contenido correspondiente ahora están disponibles y, extrañamente, el código en la página maestra recién creada se ve así:

< %@MasterLanguage=" C#"MasterPageFile="~/MasterPageTestOne.master"AutoEventWireup="false"CodeFile="MasterPagesun.master.cs"Inherits="MasterPagesun"%>

¿No es una página de contenido a primera vista? Jaja, en realidad, se puede entender así.

A continuación agregamos algunas líneas de código dentro:

El contenido de la página maestra secundaria

El contenido de la página maestra secundaria

Después de agregarlo, el código queda como sigue:

<%@MasterLanguage="C#"MasterPageFile="~/MasterPageTestOne.master"AutoEventWireup="false"CodeFile="MasterPagesun.master.cs"Inherits="MasterPagesun"%>

Contenido de la página maestra secundaria

El contenido de la página maestra secundaria

Ahora agreguemos la página de contenido de esta página maestra secundaria. El método para crear contenido es el mismo que el anterior, excepto que al seleccionar la página maestra, seleccionamos nuestra página maestra secundaria recién creada. Después de agregarlo, el código de nuestra nueva página de contenido es:

<%@PageLanguage="C#"MasterPageFile="~/MasterPagesun.master"AutoEventWireup="true"CodeFile="Default3.aspx.cs" Hereda ="Default3"Title="Página sin título"%>

Es sorprendente, ahora aparece el control ContentPlaceHolder2 que escribimos antes. Todo está bien, oh, entonces eso es lo que pasó. Ahora agregamos una línea de código a esta página de contenido:

El contenido de la página de contenido de la página maestra secundaria

Luego ejecutamos esta página de contenido, tenemos ¿lo leíste? Ha visto todos los contenidos de la página principal y de la página maestra secundaria, incluidas las páginas de contenido correspondientes a la página maestra secundaria. Puede preguntar: ¿dónde están las páginas de contenido que hacen referencia a la página principal? Lo que quiero decir es que es otra página. De hecho, los marcadores de posición de contenido en la página principal se han llenado con el contenido de la página maestra secundaria y la página de contenido correspondiente de la página maestra secundaria es la misma. de la página principal. La página de contenido no tiene nada que ver con eso.

A estas alturas ya se siente cómodo utilizando páginas maestras. Ahora hablemos un poco más profundo.

Las páginas maestras no sólo se pueden anidar, sino que también se pueden cambiar dinámicamente. Es posible, pero debe basarse en el mecanismo de carga de la página maestra.

De hecho, cuando se carga la página maestra, el atributo MasterPageFile del comando de página se usa para especificar qué página maestra cargar. Ahora mire hacia atrás y vea si especificamos la ruta del archivo de la página maestra aquí cuando creamos la página de contenido de la página maestra anteriormente. Como puede ver, es así. Bueno, entonces solo podemos hacer artículos aquí. Dado que podemos especificar qué página maestra usar configurando la propiedad "MasterPageFile", podemos cambiarla para lograr el efecto de cambio dinámico que queremos, lo cual en teoría no es un problema. Sin embargo, hay un pequeño problema. Este problema proviene del ciclo de vida de la página. La carga de la página maestra se realiza antes de que se inicialice la página en el caso del ciclo de vida de la página. ¿Recuerda qué evento acompaña a la inicialización de la página? ? Sí, es Page_Init, entonces, ¿qué evento es el evento correspondiente antes de que se inicialice la página? Sí, es el evento Page_PreInit. Por lo tanto, sólo podemos configurar la propiedad MasterPageFile durante o antes del evento "Page_PreInit". Sin embargo, aquí viene el problema. Antes o después del evento Page_PreInit, los objetos contenidos en la página actual no se han generado y no se puede acceder a ellos, por lo tanto, si desea cambiar dinámicamente la página maestra según el valor de un control en el. página actual, no se puede hacer, entonces, ¿qué hacer? Lo que podemos hacer es implementar un cambio dinámico basado en variables como Session o QueryString que se han asignado antes de abrir la página. Dejemos estos a un lado por ahora y entendámoslos un poco. En el proceso de aprendizaje futuro, comprenderá mejor la sesión y la cadena de consulta. Los estudiantes interesados ​​también pueden verificar la información relevante por sí mismos primero.

Oh, por cierto, cuando creamos el proyecto, solo se nos escribió un Page_Load vacío de forma predeterminada. No vimos Page_PreInit, pero como dije, todos estos eventos están en el ciclo de vida de. la página. De hecho, puede escribir este evento manualmente usted mismo y agregar el procesamiento que desee. Lo mismo ocurre con otros eventos de la página en el ciclo de vida de la página.

Little Tang

El octavo día de marzo del año de la Serpiente