Escuela de Informática y Telecomunicaciones

“Programación Web ASP .Net – C#”

LDP2501-2010 / DUOC-AV

Actividades:
Conexión a una Fuente de Datos con ADO.Net mediante controles. ............................... 1
Elementos iniciales .....................................................................................................................1
Conexión a la Base de Datos.......................................................................................................1
Presentando los datos en la página con GridView .....................................................................5
Mejorando la presentación de Datos en el GridView .................................................................5
Mantención de los datos en el GridView ....................................................................................6
Filtrar los datos en el GridView ..................................................................................................8
Escuela de Informática y Telecomunicaciones

Conexión a una Fuente de Datos con ADO.Net mediante controles.

En esta actividad haremos uso del control de fuente de datos SqlDataSource, que nos permitirá conectar a
nuestra fuente de datos; y el control de enlace a datos GridView, que nos permitirá mostrar la información
recuperada en la interfaz de usuario (nuestra página). Esta actividad se basa en la misma solución creada en
la actividad anterior por lo tanto los nuevos elementos serán agregados a ella.

Elementos iniciales

1. Abra la solución “Solución Acceso Datos”

2. En el Web Site de acceso a datos, agregue una página de nombre AccesoSqlDataSource.

Conexión a la Base de Datos

1. En la página creada, agregue un control SqlDatSource desde la barra de herramientas en el grupo Datos
(Data), al cual daremos el nombre EmpleadoDS.

2. Ahora debemos configurar el acceso a datos mediante las propiedades y opciones del control. Para ello
accedemos al menú del control donde nos indica Configurar Fuente de Datos (Configure Data Source).

3. Como no se ha creado ninguna a conexión a una Base de Datos, debemos crear una. Haga clic en Nueva
Conexión (New Connection). En el cuadro de diálogo de la conexión, buscamos o ingresamos el nombre
de nuestro servidor de SQL y seleccionamos la base de datos “Empresa” que hemos creado:

Página 1
Escuela de Informática y Telecomunicaciones

4. Para verificar que todo está correcto, damos clic al botón que nos permite probar la conexión:

5. Habiendo terminado la configuración de nuestra conexión, esta se agrega a la lista de conexiones y

podemos continuar.

Página 2
Escuela de Informática y Telecomunicaciones

6. El siguiente diálogo nos solicita el nombre con el cual se almacenará, este string de conexión en el
archivo de configuración.

7. La ventana siguiente nos presenta un listado de las tablas de nuestra base de datos, de la cual
seleccionamos la tabla Empleado, y de la lista de campos marcamos la casilla que nos indica “*”, esto es
el equivalente a hacer “SELECT * FROM EMPLEADO”.

Página 3
Escuela de Informática y Telecomunicaciones

8. Damos clic en siguiente y se nos presenta una nueva ventana para poder probar la consulta generada, si
realizamos el test, se nos presentará el resultado de las columnas y las filas recuperadas desde la tabla
Empleado, como se muestra en la figura:

9. Damos clic en Terminar (Finish) y con ello ya tenemos la conexión y recuperación de los datos que
presentaremos en la interfaz.

10. Puede verificar en el archivo web.config, que se ha agregado una entrada para el string de conexión a
nuestra base de datos.

Página 4
Escuela de Informática y Telecomunicaciones

Presentando los datos en la página con GridView

1. Agregue un control GridView a la página, asignándole el nombre gvEmpleados y le damos un formato a

nuestro gusto con la opción AutoFormat del control.

2. Desde las tareas comunes del control en la opción Data Source, seleccionaremos EmpleadoDS, que es el
Data Source que hemos creado anteriormente.

3. Con estos pasos ya tenemos nuestro Gridview listo para presentar los datos en la interfaz. Ejecute la
aplicación y obtendrá un resultado como el que se muestra en la siguiente figura:

Mejorando la presentación de Datos en el GridView

El control GridView, nos permite hacer una serie de ajustes para mejorar la presentación realizada, a
continuación realizaremos cambios para poder paginar y ordenar los datos presentados.

1. De retorno en el diseño, seleccionamos el GridView y marcamos la opción Enable Pagging de las tareas
o cambiamos la propiedad AllowPaging a True, que activa la paginación de los resultados e indicamos
en la propiedad PageSize el número de filas que deseamos presentar en cada ocasión (por defecto 10).

2. Otra característica que utilizaremos es el ordenamiento, para ello marcamos la opción Enable Sorting
de las tareas o cambiamos la propiedad AllowSorting a True, esto activa el ordenamiento en la interfaz,
notaremos que los nombres de las columnas ahora se encuentran subrayados.
3. Nuestra aplicación tendrá ahora un aspecto similar al mostrado en la figura:

Página 5
Escuela de Informática y Telecomunicaciones

Ordenamiento

Paginación

Mantención de los datos en el GridView

La presentación de la información requiere de las tareas de mantención general: creación, edición,
actualización y borrado los datos presentados. A continuación incorporaremos estas capacidades a nuestra
interfaz.

1. Dentro de las tareas del GridView, seleccionaremos Configurar Fuente de Datos (Configure Data
Source), damos clic en siguiente y luego usamos el botón Avanzado (Advanced) en la nueva ventana
marcamos la opción para generar las sentencias de mantención (como muestra la figura), damos Ok y
finalizamos la configuración.

Página 6
Escuela de Informática y Telecomunicaciones

2. El paso anterior ha generado las sentencias de mantención en el GridView, lo podemos verificar

accediendo al código fuente (Source) de la página.

3. Para habilitar estas opciones debemos marcar las opciones Permitir Editar (Enable Editing), Permitir
Eliminar (Enable Deleting) y Permitir Seleccionar (Enable Selection) en las tareas del GridView.

4. Al ejecutar la aplicación deberemos obtener una interfaz como se muestra en la siguiente figura:

Registro en Edición

Opciones de Mantención

3. Para que el control tenga la referencia adecuada al registro que se desea intervenir, es requerido indicar
la Llave Primaria (PK) del registro. Esto se define en la propiedad DataKeyNames mediante el botón
ellipse (…). Aquí debe seleccionar el campo Rut y agregarlo como indica la figura:

Página 7
Escuela de Informática y Telecomunicaciones

Filtrar los datos en el GridView

Para poder realizar un filtro de la información presentada deberemos hacer algunas implementaciones, ya
que la plataforma no provee de una opción directa como lo hemos visto hasta el momento. La idea es filtrar
la lista de empleados en base a la empresa a la cual pertenecen. Se agregará una lista desplegable
(DropDownList) con el listado de empresas, para que el usuario seleccione cual desea ver.

1. Primero agregaremos un nuevo SQLDataSource, para obtener la información de la tabla Empresa, cuyo
nombre será EmpresaDS. Este control utilizará la misma conexión creada anteriormente, recupere solo
los campos Rut y RazonSocial de la tabla.

2. A continuación, agregamos desde la barra de herramientas un control DropDownList, cuyo nombre será
ddlEmpresas, desde las tareas del control marcamos la opción para que se genere un PostBack de
manera automática y seleccionaremos la fuente de datos indicando EmpresaDS, para el despliegue
usaremos el campo RazonSocial y para el valor el campo Rut. La siguiente figura ejemplifica este paso:

3. Esta acción permitirá seleccionar la empresa que deseamos filtrar desde la lista desplegable.

4. Ahora debemos indicar al GridView que filtre la data en base a la selección de la lista, para ello
accedemos a la tarea de Configuración del Data Source (Configure Data Source), damos clic en
Siguiente.

5. En la siguiente ventana damos clic al botón WHERE, dentro de la página de configuración de la clausula
Where indicaremos: En Columna el valor Empresa, que es el filtro deseado en la tabla Empleado; el
Operador será “=”; En fuente o Source indicaremos que se trata de un Control, para poder indicar que

Página 8
Escuela de Informática y Telecomunicaciones

es la lista creada; Se activará entonces el área de propiedades del parámetro, allí seleccionamos
ddlEmpresas. Esta configuración estará acorde a la figura que se muestra a continuación:

6. Damos clic en Agregar (Add) y se incorporará el filtro creado a la consulta de datos. Damos Ok y
finalizamos con el asistente, opcionalmente podemos probar la consulta indicando un valor para el
filtro.

7. Podemos ahora ejecutar nuevamente la aplicación y ver los efectos de los cambios realizados.

Página 9