DreamwaverMX y ASP.NET(4)

Autor：Eve Cole Fecha de actualización：2009-05-31 21:06:17

4. Utilice el componente DataList para mostrar el conjunto de datos.

Introducción relacionada:

DataList es un control de Repetidor mejorado Además de las funciones originales de Repetidor, también puede establecer la cantidad de datos que se muestran en una sola línea (RepeatColumn), la plantilla seleccionada (SelectedItemTemple) y la plantilla del elemento editado (EditTemplate). Sin embargo, DataList organizará los datos de salida en una tabla y los generará, mientras que Repetidor es más fiel a la definición de la plantilla y no agregará ninguna etiqueta HTML. (Nota: para mostrar el código, todos los códigos siguientes tienen espacios después de "<" y antes de ">". ¡Disculpe las molestias!)

PASO 1Crear página

La página que queremos crear es la que se muestra a continuación. Cuando hacemos clic en el hipervínculo de Detalle, aparecerá la información detallada, como se muestra en el primer elemento. Al hacer clic en Cerrar, los detalles se cerrarán y restaurarán a su apariencia original.

[Figura 1-1 Página de demostración]

Comience seleccionando los datos que desea mostrar. Para mostrar los datos de Europa (es decir, Region_ID=3), podemos optar por filtrar los datos de Region_ID=3 en la configuración del conjunto de datos.

[Figura 1-2 Detección de datos]

Utilice el control Lista de datos para crear una página que muestre datos brevemente. Primero creemos una página sin datos. Luego seleccione Comportamiento del servidor en el panel Aplicación. Haga clic en "+" y seleccione Lista de datos.

[Figura 1-3 Página de selección de Lista de datos]

En el cuadro de diálogo que aparece, podemos agregar plantillas de página cuando sea necesario.

u Encabezado: plantilla de encabezado

u Elemento: plantilla de elemento de datos

u Elemento alternativo: plantilla de visualización cruzada

u Editar elemento: modifica la plantilla ((no se muestra de forma predeterminada, debe mostrarse a través de la respuesta al evento)

u Elemento seleccionado: la plantilla que se muestra después de la selección (también debe mostrarse a través de la respuesta al evento)

u Separador: plantilla separada

u Pie de página: plantilla de la parte inferior de la tabla

[Figura 1-4 Cuadro de diálogo Editar lista de datos]
Podemos crear la plantilla requerida agregando código HTML a Contenidos y también podemos hacer clic en

Botón para agregar elementos de datos. Después de hacer clic en el botón, aparecerá el cuadro de diálogo del elemento de datos que le permitirá seleccionar los datos requeridos. Y agréguelo en el cuadro de entrada Contenido.

< %# DataBinder.Eval(Container.DataItem, "elemento de datos") % >

El código se utiliza para mostrar los datos.

[Figura 1-5 Agregar elementos de datos]

Para lograr el efecto de vista previa, primero agregue el código: Nombre de la ubicación al encabezado. Se utiliza para mostrar el título. Agregar código al artículo:

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >, utilice Location_name como título de cada elemento.

Agregar código al artículo alternativo

< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >

Muestra datos en diferentes colores de fuente.

Aunque el elemento seleccionado no se puede mostrar inmediatamente, también debemos anotar el código para llamarlo más tarde. como sigue:

DIRECCIÓN:

< %# DataSet1.FieldValue("DIRECCIÓN", Contenedor) % >

 

Ciudad:

< %# DataSet1.FieldValue("CIUDAD", Contenedor) % >

 

Teléfono:

< %# DataSet1.FieldValue("TELÉFONO", Contenedor) % >

 

Haga clic en Aceptar y luego obtenga una vista previa de la página. La siguiente imagen es el efecto del código anterior. Implementaremos el efecto de mostrar el elemento seleccionado en un momento.

[Figura 1-6 vista previa inicial]
Una diferencia entre DataList y Repetidor es que puede configurar una sola fila para mostrar múltiples datos, que se pueden configurar en la ventana de edición de DataList.

[Figura 1-7 Configure una sola línea para mostrar múltiples datos]

Seleccionar la opción Usar saltos de línea simplemente tiene una etiqueta para separar los datos. Seleccione Usar una tabla para generar en forma de tabla y podrá determinar la cantidad de datos que se muestran en una sola fila configurando Columnas de tabla.

PASO 2 Escribir código

El elemento seleccionado debe mostrarse a través de eventos, por lo que debemos crear un botón para iniciar el evento.

j Agregue LinkButton para generar eventos. Mueva el cursor entre <ItemTemplate> y </ItemTemplate> en la ventana del código fuente, haga clic en más etiquetas

, seleccione el control asp:LinkButton en el cuadro de diálogo emergente.

[Figura 2-1 Cuadro de diálogo Selector de etiquetas]

En el cuadro de diálogo Editar LinkButton, establezca las propiedades del LinkButton. Ingrese el nombre: Detalle en el cuadro de entrada de ID.

Ingrese "Detalle" en el Nombre del comando para el comando que genera el evento e ingrese Detalle en el cuadro de diálogo Texto (se mostrará)

[Figura 2-2 Cuadro de edición de LinkButton]

Luego seleccione el color deseado en Diseño y haga clic en Aceptar para generar código.

< asp:LinkButton BackColor="#FFFFFF" CommandName="Detalle" ForeColor="#000000" ID="Detalle" runat="servidor" Text="Detalle" >< /asp:LinkButton >

Para tener este efecto en la visualización cruzada, necesitamos insertar el mismo código en <AlternatingItemTemplate> y </AlternatingItemTemplate>.
Al mismo tiempo, para cerrar la plantilla de selección emergente, también es necesario generar un comando, por lo que es necesario agregar un botón de enlace más. Esto requiere insertar código en <SelectedItemTemplate></SelectedItemTemplate>:

< asp:LinkButton BackColor="#FFFFFF" CommandName="Cerrar" ForeColor="#000000" ID="Cerrar" runat="servidor" Text="Cerrar" >< /asp:LinkButton >

kCon el comando, también necesitamos usar un programa para interpretar el comando. De hecho, el proceso no es complicado y solo es necesario agregar una pequeña cantidad de código. Agregue el siguiente código en < head >> /head >:

< script language="VB" runat="servidor" >

Sub DataList_ItemCommand (remitente como objeto, e como DataListCommandEventArgs)

Si e.CommandSource.CommandName="Detalle" Entonces

DataList1.SelectedIndex=e.Item.ItemIndex

De lo contrario, e.CommandSource.CommandName="Cerrar" Entonces

Lista de datos1.SelectedIndex=-1

Terminar si

Lista de datos1.DataBind()

Fin sub

</ /guión >

El programa puede obtener el comando (CommandName) cuando hace clic en LinkButton para determinar el programa que se ejecutará. Cuando la propiedad SelectedIndex de DataList se establece en e.Item.ItemIndex, se abrirá la página SelectedItemTemplate. Si el comando es Cerrar y la propiedad SelectedIndex de DataList se establece en -1 (es decir, no se selecciona ningún elemento de datos), DataList utilizará la plantilla de elementos ItemTemplate para mostrar este elemento de datos.

Agregue también el fragmento de código en < asp:DataList >

OnItemCommand="DataList_ItemCommand"

Declarar la relación con el segmento del programa DataList_ItemCommand.

Presione "F12" para obtener una vista previa y la página mostrará el efecto esperado.

[Figura 2-3 Versión preliminar final]
Adjunto el código fuente del segmento principal del programa:

Sub DataList_ItemCommand (remitente como objeto, e como DataListCommandEventArgs)

Si e.CommandSource.CommandName="Detalle" Entonces

DataList1.SelectedIndex=e.Item.ItemIndex

De lo contrario, e.CommandSource.CommandName="Cerrar" Entonces

Lista de datos1.SelectedIndex=-1

Terminar si

Lista de datos1.DataBind()

Fin sub

< formulario runat="servidor" >

< asp:Lista de datos id="Lista de datos1"

runat="servidor"

RepetirColumnas="1"

RepetirDirección="Vertical"

RepetirLayout="Flujo"

DataSource="< %# DataSet1.DefaultView % >"

OnItemCommand="DataList_ItemCommand" >

<Plantilla de encabezado>

Nombre de la ubicación < /HeaderTemplate >

<Plantilla de artículo>

< %# DataSet1.FieldValue("LOCATION_NAME", Contenedor) % >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detalle" ForeColor="#000000" ID="Detalle" runat="servidor" Text="Detalle" >< /asp:linkbutton >

< /Plantilla de elemento >

< Plantilla de elemento alternativo >< color de fuente="#0000FF" >

< %# DataSet1.FieldValue("LOCATION_NAME", Contenedor) % >

< /fuente >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detalle" ForeColor="#000000" ID="Detalle" runat="servidor" Text="Detalle" >< /asp:linkbutton >< /AlternatingItemTemplate >

<Plantilla de elemento seleccionado>Dirección:

< %# DataSet1.FieldValue("DIRECCIÓN", Contenedor) % >

 

Ciudad:

< %# DataSet1.FieldValue("CIUDAD", Contenedor) % >

 

Teléfono:

< %# DataSet1.FieldValue("TELÉFONO", Contenedor) % >

 

< asp:LinkButton BackColor="#FFFFFF" CommandName="Cerrar" ForeColor="#000000" ID="Cerrar" runat="servidor" Text="Cerrar" >< /asp:LinkButton >

< /Plantilla de elemento seleccionado >

< /asp:Lista de datos >

< /formulario>

DataList también tiene una plantilla para Editar elemento, que se utiliza principalmente para actualizaciones de datos. Este libro se presentará en una sección posterior.