Instituto Gubernamental España Jesús Milla Selva
Centro de Informática
II SEMESTRE
Asignatura: Programación IV
UNIDAD Nº 2: TEMA:
Acceso a una Base de Control GridView
Datos con [Link]
Objetivos:
• Utilizar el control GridView para visualizar datos.
• Configurar de forma correcta el control GridView.
• Editar, modificar y consultar datos a partir de un GridView.
Introducción
El control GridView de [Link] permite visualizar datos en una tabla en pantalla, editar,
modificar y borrar registros del mismo.
El GridView es un control extremadamente flexible para mostrar tablas multicolumna.
Cada registro de una consulta de un select configurado en un SqlDataSource genera una fila
en la grilla. Cada campo en el registro representa una columna en la grilla.
El GridView es el control más poderoso que provee el [Link]. Veremos que este control
trae funcionalidades ya implementadas para paginación, ordenamiento y edición de sus datos.
GridView
Datos de una tabla
Crearemos un proyecto para probar el control GridView y las diferentes opciones que
nos brinda.
Crear un sitio web en el Visual Studio llamado ejercicio014.
Agregar un Web Form llamado [Link]. Iremos al Explorador de servidores y
seleccionaremos la tabla “rubros” y la arrastraremos al formulario web. Veremos que se
generan dos objetos sobre la página:
Control GridView
Un objeto de la clase GridView llamado GridView1.
Un objeto de la clase SqlDataSource llamado SqlDataSource1.
Si seleccionamos el objeto SqlDataSource1 y observamos el contenido de la propiedad
SelectQuery, veremos que ya está configurado el comando SELECT:
SELECT [codigo], [descripcion] FROM [rubros]
[Link] y C#
Página 2 de 14
Control GridView
El comando SELECT indica rescatar todas las filas de la tabla rubros.
Podemos ver también que se han configurado automáticamente las propiedades InsertQuery,
DeleteQuery y UpdateQuery con los valores:
INSERT INTO [rubros] ([descripcion]) VALUES (@descripcion)
DELETE FROM [rubros] WHERE [codigo] = @codigo
UPDATE [rubros] SET [descripcion] = @descripcion WHERE [codigo]
= @codigo
Como podemos ver hasta este momento la herramienta Visual Studio .Net nos ha configurado
en forma automática el control SqlDataSource1, sólo nos queda configurar el control
GridView1.
Seleccionamos el control GridView y presionamos el botón presente en la parte superior
derecha, el mismo nos muestra una serie de funcionalidades básicas del control:
[Link] y C#
Página 3 de 14
Control GridView
Como podemos ver ya está configurado el origen de datos con el objeto SqlDataSource1.
Habilitemos la paginación, ordenamiento, edición y eliminación.
Ejecutemos el proyecto y comprobaremos que tenemos en la página los datos de la tabla
“rubros” con la capacidad de modificar y borrar registros. Además, está activa la paginación
y ordenamiento por cualquiera de las dos columnas de la tabla (cambiemos la propiedad
PageSize del objeto GridView por el valor 3)
[Link] y C#
Página 4 de 14
Control GridView
Sin escribir una sola línea de código tenemos el mantenimiento de la tabla rubros (con la
excepción del alta).
Veamos otras características que podemos configurar en forma visual del control GridView.
Desde el botón “>” que se encuentra en la parte superior derecha del control GridView1
podemos seleccionar la opción “Formato Automático...” para definir la presentación de la
tabla con plantillas predefinidas de color y fuente:
Luego de seleccionar el esquema para el GridView, presionamos aceptar y tenemos ya
definido el nuevo formato de la grilla.
Desde la ventana de propiedades configuraremos las propiedades:
Caption: Es un título que aparece en la parte superior del GridView.
PageSize: Cantidad de registros a mostrar por página.
Luego de esto ejecutamos nuevamente y tenemos como resultado:
[Link] y C#
Página 5 de 14
Control GridView
Datos de varias tablas
Continuamos con las tablas:
Tabla: articulos
codigo int Clave primaria e identidad.
descripcion varchar(50)
precio float
codigorubro int
Tabla: rubros
codigo int Clave primaria e identidad
descripcion varchar(50
Crearemos un nuevo Sitio Web llamado "ejercicio015" y agregaremos un webform llamado
[Link]. Seleccionamos desde el Explorador de servidores la tabla articulos y la
disponemos dentro del webform. El entorno del Visual Studio .Net nos genera un objeto de la
clase GridView y otro de la clase SqlDataSource.
El objetivo final es mostrar el código del artículo, su descripción, su precio y finalmente la
descripción del rubro (no el código de rubro).
[Link] y C#
Página 6 de 14
Control GridView
1. Primero seleccionamos el control SqlDataSource1 y configuramos la propiedad
SelectQuery con el comando Select que rescata los datos haciendo el emparejamiento
por la columna codigorubro de la tabla articulos y codigo de la tabla rubros:
SELECT [Link],
[Link] as descriarticulo,
precio,
[Link] as descrirubro
from articulos as ar
join rubros as ru on [Link]=[Link]
2. Luego de configurar la propiedad SelectQuery debemos actualizar el esquema del
SqlDataSource1, esto lo hacemos seleccionando el objeto sobre el formulario y
seleccionamos la opción “Actualizar esquema”.
Con esto logramos que se refresquen las columnas a mostrar en el GridView1.
Si ejecutamos, podemos ver que ya tenemos la tabla que rescata todos los artículos y asociado
a cada artículo la descripción del rubro al que pertenece:
[Link] y C#
Página 7 de 14
Control GridView
Ahora configuraremos algunas propiedades para dar un formato y presentación más adecuada
de los datos:
A. Ya vimos que seleccionando el GridView1 y mediante la opción “Formato
automático...” podemos definir el estilo de presentación de la grilla.
B. Ahora entramos a la opción “Editar columnas...” y seleccionamos el campo a
configurar:
[Link] y C#
Página 8 de 14
Control GridView
Cambiemos los títulos de las columnas de cada campo (por ejemplo, en el campo
descriarticulo mostraremos el título “Descripción del Art.” Modificando la propiedad
HeaderText.
De forma similar cambiar los otros títulos de las columnas de la grilla:
[Link] y C#
Página 9 de 14
Control GridView
C. La propiedad Visible de cada columna nos permite configurar si la columna se muestra
o no.
D. La propiedad DataFormatString nos permite configurar la apariencia de números y
fechas. Por ejemplo, si queremos que el precio aparezca con el símbolo de moneda
debemos configurar la propiedad DataFormatString con el valor: {0:C}
[Link] y C#
Página 10 de 14
Control GridView
Algunos ejemplos de formato de campos:
Formato de filas individuales de acuerdo con ciertas condiciones
Cuando se grafica la tabla podemos capturar el evento RowDataBound y configurar
como mostrar dicha fila de la tabla.
A modo de ejemplo mostraremos de color amarillo las filas de los artículos con precio superior
a 8. Para esto codificamos el evento RowDataBound del GridView1.
[Link] y C#
Página 11 de 14
Control GridView
using System;
using [Link];
using [Link];
using [Link];
using [Link];
using [Link];
public partial class _Default : [Link]
{
protected void Page_Load(object sender, EventArgs e)
{
protected void GridView1_RowDataBound(object sender,
GridViewRowEventArgs e)
{
if ([Link] == [Link])
{
double precio;
precio = (double)[Link]([Link],
"precio");
if (precio > 8)
{
[Link] = [Link];
[Link] =
[Link];
[Link] = true;
}
}
}
}
Con el if verificamos si el evento se disparó para una fila de datos de la grilla (ya que este
método se dispara cuando dibuja la cabecera ([Link]), el pie de grilla
([Link]) etc.
Luego rescatamos el valor del campo precio y verificamos con un nuevo if si el precio supera
8, en caso afirmativo modificamos el color de fondo (BackColor) y de frente de la fila.
[Link] y C#
Página 12 de 14
Control GridView
Selección de una fila del GridView y posterior extracción de sus datos
En muchas situaciones es necesario que el usuario seleccione una fila de la grilla para reflejar
dicho dato en otra parte de la página o hacer otra consulta.
Para poder implementar esta característica del GridView llevaremos a cabo los siguientes
pasos:
1. Cambiaremos el valor de la propiedad [Link] por amarillo (es
decir que cuando seleccionemos la fila el color de fondo de la misma se activará con
este valor)
2. En el menú de opciones que se despliega en la parte derecha del GridView1
activaremos el CheckBox “Habilitar selección”
3. Dispondremos una Label en el webform para mostrar el valor seleccionado de la grilla
(solo a modo de ejemplo)
4. Para el evento SelectedIndexChanged del GridView1 codificaremos el siguiente
código:
[Link] y C#
Página 13 de 14
Control GridView
protected void GridView1_SelectedIndexChanged(object sender,
EventArgs e)
{
[Link] =
[Link][[Link]].Cells[1].Text;
}
El objeto Rows del GridView almacena una colección de filas, mediante el valor devuelto por
la propiedad SelectedIndex de la grilla podemos acceder a la celda que almacena el código
del artículo.
Esta información nos es muy útil para mostrar información adicional sobre el registro en otro
control, por ejemplo.
[Link] y C#
Página 14 de 14
