laboratorio asp.net – 4

Sistemas UNI. Instructor: V. Carlos, Segura P.

UNIVERSIDAD NACIONAL DE INGENIERIA FACULTAD DE INGENIERIA INDUSTRIAL Y DE SISTEMAS

1

LABORATORIO ASP.NET – 4.

Derechos Reservados, solo para ser usados dentro de la institución.

Derechos de Autor

El contenido de este laboratorio tiene todos los derechos reservados, por lo tanto no se puede reproducir, transcribir, almacenar a un sistema de recuperación o de alteración, asimismo la traducción a otro idioma de ninguna forma o por ningún medio mecánico, manual, electrónico, magnético, óptico o de otro modo.

La persecución de una reproducción no autorizada tiene como consecuencia la cárcel y/o multas.



2

4ASP.NET

1 Controles con enlace a Datos.

1.1 Control de datos Repeater.

Este control crea una lista con enlace de datos que permite especificar un diseño personalizado aplicando la misma plantilla a cada uno de los elementos mostrados en la lista, es un control compuesto: un control que aloja otros controles. Permite especificar un control repetidor y, cuando está enlazado, muestra el control seleccionado para cada registro obtenido.

El control Repeater se usa siempre para crear una lista básica con enlace de datos basada en plantilla la cual ella misma proporciona elementos para crear dichas plantillas. Este control no tiene estilos ni diseños integrados, por lo que se deben declarar explícitamente todas las etiquetas de diseño, formato y estilo HTML en las plantillas del control. El Repeater se diferencia de los demás controles de lista de datos ya que permite colocar fragmentos HTML en sus plantillas. Con lo cual podemos crear una estructura HTML compleja, como una tabla.

Este control se ubica en el sector de controles de Datos

Antes de aprender a usar este control primero agregaremos un Web Forms con el nombre Clientes y del cuadro de herramientas seleccionar el control Repeater en el cual el ID= reptClientes y lo arrastramos al formulario como se muestra en el siguiente diseño:



3

Estructura de un Repeater: Los elementos de un Control de datos se puede dividir en HeaderText, ItemTemplate, FooterTemplate y AlternatingItemTemplate

HeaderTemplate: Son los elementos que se procesan una sola vez antes de haberse procesado todas las filas enlazadas a datos para ser mostrados como cabecera del listado. Esta plantilla se suele utilizar para iniciar un elemento contenedor, como una tabla. Este elemento HeaderTemplate no se puede enlazar a datos. Acá se colocara la cabecera del listado de información a mostrar.

ItemTemplate:

Estos elementos se muestran una sola vez para cada fila del origen de datos. Para mostrar datos en ItemTemplate, declare uno o varios controles de servidor Web y establezca sus expresiones de enlace de datos que se van a evaluar en un campo de DataSource del control Repeater. En este ejemplo se colocara los campos a mostrar de una tabla, para logra esto debemos usar el comando Container.DataItem, por ejemplo si la tabla es Customers y uno de los campos se llama CompanyName, ContactName se tendrá lo siguiente para agregar un elemento con la palabra clave Container.DataItem(“Nombre del Campo”):

HeaderText

AlternatingItemTemplate ItemTemplate

FooterTemplate

Para escribir secuencias de comando de servidor se debe usar la palabra clave indicada.



4

De igual forma también podemos mostrar información desde un control asp.net, colocando el enlace dentro del atributo Text:

AlternatingItemTemplate: Al igual que el elemento ItemTemplate, pero este se procesa alternando cada fila del control Repeater. Se usa para poder especificar otra apariencia para el elemento AlternatingItemTemplate estableciendo sus propiedades de estilo. En este ejemplo se colocara el texto o elemento de separación entre registros, para realizar mayormente cambio de estilos por alternación de registros:



5

FooterTemplate:

Estos elementos se procesan una sola vez pero después de haberse procesado todas las filas enlazadas a datos. En esta plantilla se suele utilizar para cerrar un elemento abierto en el elemento HeaderTemplate (con una etiqueta como </table>). Este elemento FooterTemplate no se puede enlazar a datos. Acá se colocara el resumen de la información a mostrar.

SeparatorTemplate Elementos que se van a procesar entre cada fila, normalmente saltos de línea (etiquetas <br>), líneas horizontales (etiquetas <hr>), etc. Este elemento SeparatorTemplate no se puede enlazar a datos.

Realizando el Enlace de Datos I.- Empecemos a usar el control con enlace a datos, primero agregar un los imports para los objetos de ADO.NET



6

II.- Dentro del clase del formulario colocamos lo siguiente, como variables generales:

III.- En el formulario en el evento Page load de la página escribimos lo siguiente:

IV.- Ahora entremos a ver el código Html generado de la página y ubicamos el control Repeater.

V.- Dentro de estas etiquetas colocamos lo siguiente:

VI.- Ejecutar y probar el ejemplo desarrollado.

Realiza el enlace con la información obtenida por el SqlCommand



7

Laboratorio Desarrollado I.- Se le proporcionara el siguiente Master Pages para trabajar sobre este:

II.- Dentro del área de la pagina colocamos el siguiente diseño:

III.- Luego en la parte de los elementos en la hoja de estilos agregaremos dos elementos siguientes, igualmente estos cambios serán proporcionados:



8

IV.- Luego en el código HTML escribimos lo siguiente:

V.- Al ejecutar dicha pagina se vera la siguiente información:



9

1.2 Control DataList.

Este control es un poco mas dinámico, en el cual muestra los elementos de un origen de datos mediante plantillas. Se realiza para personalizar la apariencia y el contenido del control, se puede manipular las plantillas que forman los diferentes componentes del control DataList, como el ItemTemplate y HeaderTemplate.

AlternatingItemTemplate Al igual que el elemento ItemTemplate, pero este se procesa alternando cada fila del control Repeater. Se usa para poder especificar otra apariencia para el elemento AlternatingItemTemplate estableciendo sus propiedades de estilo.

EditItemTemplate

Permite realizar el diseño de un elemento cuando está en modo de edición. Esta plantilla contiene normalmente controles de edición (como controles TextBox). Se invoca EditItemTemplate para una fila del control DataList cuando EditItemIndex tiene como valor el número ordinal de dicha fila.

FooterTemplate Puede contener texto y controles que se van a procesar en la parte inferior del control DataList.

HeaderTemplate

Puede contener texto y controles que se van a procesar en la parte superior del control DataList.

ItemTemplate Son los elementos que se van a procesar una vez para cada fila del origen de datos.

SelectedItemTemplate

Estos elementos se van a procesar cuando el usuario selecciona un elemento del control DataList. Se utiliza normalmente para aumentar el número de campos de datos que se muestran y marcar visualmente la fila resaltándola.

SeparatorTemplate

Son los elementos que se van a procesar entre cada elemento.

El control DataList permite mostrar los datos obtenidos en un cuadro de lista desplegable.

I.- Crear un archivo XML con el nombre Discos.xml, el cual contendrá información sobre discografía de cantantes.



10

II.- Luego completar con la siguiente información que se muestra en el siguiente listados:

III.- Crear una nueva pagina con el nombre Discos, con el siguiente diseño dentro de ella (el ID del DataList será dtlProveedores).

IV.- Luego seleccionamos el DataList y le indicamos en Editar plantilla y en ellos colocamos un label como se ve en la figura:

V.- Dentro de la hoja de estilos modificamos así como se muestra a continuación:



11

VI.- Y en el HTML modificamos los siguientes atributos para asignarles los nuevos elementos copmo se m muestra en el grafico siguiente:

Que al ejecutar tendríamos lo siguiente:

VII.- Para un ejemplo mas real este diseño lo podemos cambiar de la forma siguiente:



12

VIII.- Luego en el código HTML crearíamos lo siguiente:

VIII.- Al ejecutar tendríamos lo siguiente:



13

LABORATORIO I.- Primero Creamos una carpeta en el explorador de soluciones con el nombre Imágenes, luego buscamos unas 7 imágenes con extensión jpg y las colocamos en la carpeta creada.

II.- Desde el analizador de consultas creamos lo siguiente:

III.- Dentro del load de la página crearemos lo siguiente:

IV.- Ahora vemos como es el diseño de un DataList, en le diseño de la pagina seleccionamos el DataList clic derecho � Editar Plantilla � Plantilla de Elementos.

Realiza el enlace con la información obtenida por el SqlCommand

Del cuadro de herramientas seleccionamos el control TextBox y lo colocamos donde indican las flechas



14

V.- Después de agregar la referencia a la hoja de estilos, dentro del DataList en el código Html escribimos lo siguiente:

VI.- Al probar el ejemplo se tendrá lo siguiente:

VII.- Ahora modifiquemos nuestro diseño como se muestra en el siguiente figura:



15

VIII.- Para el elemento ItemTemplate debería asociarse al los siguientes campos, además de la referencia al elemento de la hoja de estilos “normal”:

IX.- Para el elemento ItemTemplate debería asociarse al los siguientes campos, además de la referencia al elemento de la hoja de estilos “select”:



16

X.- Al ejecutar tendremos lo siguiente:

laboratorio asp.net – 4

Documents