3. Utilice el componente Repetidor para mostrar el conjunto de datos.
Introducción relacionada
Hay varias formas de mostrar datos en ASP.NET, entre las cuales el Repetidor es otro componente existente. DataGrid siempre mostrará los datos en una "tabla". Cuando queramos mostrar los datos de una manera más libre, definitivamente usaremos el control Repetidor.
Define el formato de salida de datos en forma de Plantilla.
PASO 1. Crear una página Podemos crear un componente Repetidor para mostrar datos cambiando la página original. Cambie el nombre de Ubicación1.htm a Ubicación1.aspx. Elimina la parte original de la página y crea un Dataset como en el capítulo anterior, filtrando Region_IDEnterValue=1. Usemos el control Repetidor para crear páginas dinámicas.
jPara utilizar plantillas para definir el formato de salida, primero cree una tabla. Podemos verlo a través de la página ApplicationàDatabases.
La estructura de la base de datos.
[Figura 3-1 Estructura de la base de datos]
Con base en la estructura de la base de datos, diseñe las siguientes tablas.
[Figura 3-2 Diagrama de plantilla]
kLos datos deben estar vinculados a la siguiente tabla. Arrastre el elemento de datos desde Enlaces en el panel Aplicación a su posición.
[Figura 3-3 Cuadro de diálogo Enlace]
Después del enlace de datos, obtendrá la siguiente página:
[Figura 3-4 Página después del enlace de datos]
Se siente un poco como un déjà vu, ya que Dreamwaver MX continúa la tradición UltraDev de resaltar datos. ③ El formulario de representación de datos también se puede seleccionar en el cuadro de diálogo Enlace. Después de hacer clic en el elemento de datos en la página, se puede seleccionar el formulario de representación de datos para los datos correspondientes en el Enlace.
[Figura 3-5 Formulario de representación de datos]
Si desea utilizar esta tabla como plantilla para mostrar todos los elementos de datos, debe seleccionar toda esta tabla. Haga clic en "+" en el elemento Comportamiento del servidor en el panel Aplicación y seleccione el elemento Repetir región
[Figura 3-6 Seleccionar región de repetición] [Figura 3-7 Seleccionar método de repetición]
Determine el método que desea repetir en Repetir región y haga clic en Aceptar. Ahora puedes presionar "F12" para obtener una vista previa de la página.
PASO 2 Analice el código (Nota: para mostrar el código, todos los códigos siguientes tienen espacios después de "<" y antes de ">". ¡Disculpe las molestias!)
< ASP:Repeater runat="servidor" DataSource='< %# DataSet1.DefaultView % >' >
<Plantilla de artículo>
< ancho de tabla="75%" borde="0" >
<tr>
< td width="18%" >Nombre de ubicación< /td >
< td colspan="3" > < %# DataSet1.FieldValue("LOCATION_NAME", Contenedor) % > </ /td >
< /tr >
<tr>
< td >Ciudad< /td >
< td width="35%" > < %# DataSet1.FieldValue("CIUDAD", Contenedor) % > </ /td >
< td width="19%" >Dirección</td >
< td width="28%" > < %# DataSet1.FieldValue("DIRECCIÓN", Contenedor) % > </ /td >
< /tr >
<tr>
< td >Estado</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Contenedor) % > < /td >
< td >Código< /td >
< td > < %# DataSet1.FieldValue("CÓDIGO", Contenedor) % > < /td >
< /tr >
<tr>
< td >Teléfono< /td >
< td > < %# DataSet1.FieldValue("TELÉFONO", Contenedor) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Contenedor) % > < /td >
< /tr >
< /tabla >
< /Plantilla de artículo >
< /ASP:Repetidor >
ASP.net muestra todos los datos repetidamente creando una plantilla ItemTemple, por lo que si desea configurar el estilo del Repetidor, puede hacerlo configurando la plantilla.
También podemos añadir otras plantillas para conseguir el efecto que queramos.
AlternatingItemTemplate: implementa datos de visualización cruzada. Datos de visualización cruzada con la plantilla del ItemTemplate original
SepartorTemplate: Plantilla separadora. Se puede utilizar para separar filas de datos.
HeaderTemplate: plantilla de encabezado. Se muestra en la parte superior con todos los datos.
FooterTemplate: plantilla de pie de página. Se muestra en la parte inferior con todos los datos.
Su forma de diseño es la misma que la de ItemTemplate. Simplemente rodee la parte que desea modelar con marcadores.
Hay atajos para insertar código a través de Dreamwaver MX. Haga clic en la pestaña ASP.NET del panel Insertar y luego haga clic en marca, aparecerá el cuadro de diálogo para agregar marcas. Seleccione el proyecto Plantillas en Etiquetas ASP.NET. Luego puede seleccionar el código que desea agregar. Dreamwaver MX agregará el código en la posición donde estaba el cursor de entrada original.
[Figura 2-1 Cuadro de diálogo Agregar marcador]
El siguiente es el código para AlternatingItemTemplate, SepartorTemplate, HeaderTemplate y FooterTemplate, que se puede insertar en < ASP:Repeater > < /ASP:Repeater >.
< headertemplate >< font color="#666666" size="4" >Todos
Ubicación< /font >< /headertemplate >
<Plantilla de elemento alternativo>
< ancho de tabla="75%" borde="0" bgcolor="#CCCCCC" >
<tr>
< td width="17%" >Nombre de ubicación< /td >
< td colspan="3" bgcolor="#CCCCCC" >
< %# DataSet1.FieldValue("LOCATION_NAME", Contenedor) % >
</ /td >
< /tr >
<tr>
< td >Ciudad< /td >
< td width="34%" > < %# DataSet1.FieldValue("CIUDAD", Contenedor) % > </ /td >
< td width="24%" >Dirección</td >
< td ancho="25%" > < %# DataSet1.FieldValue("DIRECCIÓN", Contenedor) % > </ /td >
< /tr >
<tr>
< td >Estado</ /td >
< td > < %# DataSet1.FieldValue("STATE_COUNTRY", Contenedor) % > < /td >
< td >Código< /td >
< td > < %# DataSet1.FieldValue("CÓDIGO", Contenedor) % > < /td >
< /tr >
<tr>
< td >Teléfono< /td >
< td > < %# DataSet1.FieldValue("TELÉFONO", Contenedor) % > < /td >
< td >Fax< /td >
< td > < %# DataSet1.FieldValue("FAX", Contenedor) % > < /td >
< /tr >
< /tabla >
< /Plantilla de elemento alternativo >
< plantilla separadora >< hr width="70%" align="left" >
< /separatortemplate >
< footertemplate >< font color="#666666" size="4" >Fin</font >< /footertemplate >
Cuando IIS analiza el código, colocará la plantilla en la posición relativa según las palabras clave y obtendrá la página solicitada originalmente.
La página generada por el programa anterior es la siguiente:
[Figura 2-1 Página final]
El componente Repetidor puede crear una página más libre, pero cada fila solo puede mostrar un conjunto de datos. Si desea crear una página más gratuita, vayamos a la siguiente sección y usemos el control DataList para mostrar datos.