Informe Técnico sobre Grillas de Asp.

Net 1

Informe Técnico sobre Grillas de Asp.Net

El Framework de .Net 2.0 posee más de un control mediante el cual implementar la
funcionalidad de una grilla, sin embargo el más usado y con mayor flexibilidad a la
hora de hacerlo es el GridView.

 Definición del Control GridView

Con el control GridView es posible:

• Enlazar datos automáticamente desde un control de origen de datos.

• Ordenar los datos de forma ascendente o descendente.
• Configurar la cantidad de filas que se muestran por página.
• Seleccionar una fila.
• Editar una fila haciendo que cada campo dentro de ésta se vuelva editable.
• Eliminar un fila reflejando la eliminar en la Base de datos

Además, para personalizar el aspecto y el comportamiento del control GridView,

se puede:

• Especificar columnas y estilos personalizados.

• Utilizar plantillas para crear elementos de interfaz de usuario personalizados.
• Agregar su propio código a la funcionalidad del control GridView
controlando eventos.

 Uso de un control GridView

Con el objetivo de explicar y a la vez ejemplificar el uso del control, se muestra un

ejemplo basado en una sencilla relación de dos tablas, Libro y Ejemplar.

Modelo:

Libro
Código int Ejemplar
1 Posee 0,n Código int
Nombre varchar
Descripción varchar Ubicacion varchar

Trabajar sobre una relación de uno a muchos, como en este caso, permite
visualizar que el control GridView sirve tanto para éste tipo de relaciones como
también para una relación de uno a uno.

Paso 1: Crear el Objeto gridView desde el menú de elementos de Visual

Studio

Secuencia: Menú >> datos >>gridView

A continuación se muestra el objeto GridView en pantalla acompañado de una

etiqueta inteligente con diversas opciones. Selecionar formato automático y agregar
un formato a elección.
 Informe Técnico sobre Grillas de Asp.Net 2

Para cualquier duda sobre este proceso consultar introducción al gridView en:
http://www.subgurim.net/articulos/ado-net-y-acceso-a-datos-articulo35.aspx

Pasó 2: Agregar Columnas al GridView

Una vez hecho esto debemos agregar las columnas que permitirán editar y eliminar
cada una de las filas de la grilla. Para lo cual debemos seguir los siguientes pasos
dentro de la etiqueta inteligente.

Secuencia: etiqueta inteligente >> Editar columnas

Veremos la siguiente pantalla.

Se desplegará una serie de campos disponibles a seleccionar y agregar, cada uno

de estos cumple funcionalidades diferentes, pero para este ejemplo se elegirá el
campo CommandField. Luego de agregar el campo seleccionado se debe seguir los
siguientes pasos:
 Informe Técnico sobre Grillas de Asp.Net 3

Ir a:
• Propiedad HeaderText e ingresar un nombre de cabecera de columna.
• Propiedad ButtonType y seleccionar Button.
• Propiedad ShowDeleteButon y seleccionar trae.
• Luego aceptar.

Con lo que se añadirá una nueva columna en la grilla con el nombre de Eliminar.

Para la agregar la columna Editar se debe realizar un par de pasos adicionales pero
básicamente es lo mismo que el anterior, dentro de la etiqueta inteligente en editar
columna crear un campo CommandField. Luego de agregar el campo seleccionado
se debe seguir los siguientes pasos:

Ir a:
• Propiedad HeaderText e ingresar un nombre de cabecera de columna.
• Propiedad ButtonType y seleccionar Button.
• Propiedad ShowEditButon y seleccionar True.

A diferencia de la columna Eliminar la columna Editar agrega dos botones más una
vez seleccionada la fila a editar, uno para actualizar la fila seleccionada y el otro
para cancelar la acción de editar, si se desea incluir imágenes o iconos a estos
botones ir a:

• Propiedad UpdateImageUrl e ingresar una ruta a una imagen que servirá

como fondo del botón.

• Propiedad DeleteImageUrl e ingresar una ruta a una imagen que servirá

como fondo del botón.

Veremos la siguiente pantalla.

Para cualquier duda sobre este proceso consultar columnas de gridView en:
 Informe Técnico sobre Grillas de Asp.Net 4

http://www.subgurim.net/articulos/ado-net-y-acceso-a-datos-articulo47.aspx

Ahora veremos como funcionan los eventos del objeto GridView, para adicionar
cualquier evento debemos seleccionar el GridView y luego en las propiedades que
se despliegan en la esquina inferior derecha de la pantalla seleccionar la figura de
rayo amarillo. A continuación se sugiere seguir la siguiente secuencia:

Ir a:

• Propiedad RowDeleting (encargada de manejar el evento eliminar) e ingresar

un nombre para el método que manejara el evento.

• Propiedad RowEditing (encargada de manejar el evento Editar) e ingresar un

nombre para el método que manejara el evento.

• Propiedad RowUpdating (encargada de manejar el evento Actualizar) e

ingresar un nombre para el método que manejara el evento.

• Propiedad RowCancel (encargada de manejar el evento Cancelar) e ingresar

un nombre para el método que manejara el evento.

Cada vez de se ingrese una de estas propiedades se creara el en archivo extensión

.vb asociado al .aspx un método para manejar los evento del GridView.

A continuación agregamos una lista desplegable mediante el objeto DropDownList con

el objetivo de seleccionar un libro determinado y desplegar todos los ejemplares
asociados a éste, es aquí en donde se refleja la relación de uno a muchos, dado que
al seleccionar un libro se despliegan todos sus ejemplares.
 Informe Técnico sobre Grillas de Asp.Net 5

Al crear el combobox se desplegara una etiqueta inteligente que por el momento no

ocuparemos. Terminado este proceso se pone fin a la etapa de diseño del gridView
y se comienza con la programación del objeto en forma manual.

Paso 3: Llenar el comboBox con lista de libros y seleccionar un libro

Para llenar el combo box se utilizara el evento Page_load en la pagina aspx.vb.

Este evento contiene los elementos que deben existir al momento de cargar la
pagina, en este caso se debe cargar los libros en el comboBox de manera que
estén disponibles para seleccionarlos. Se hará uso del método CargarLibros().
 Informe Técnico sobre Grillas de Asp.Net 6

Protected Sub Page_Load(…) Handles Me.Load

If Page.IsPostBack = False Then
Me.CargarLibros()
End If
End Sub

Public Sub CargarLibros()

Dim li As New Libro()
Dim ds As New DataSet()
ds = li.Listar()

If ds Is Nothing Then
MsgBox("No existen ejemplares registrados de este libro)
Else
For i As Integer = 0 To ds.tables(0).Rows.Count - 1
Dim elemento As New ListItem
elemento.Text = ds.tables(0).Rows(i)(1).ToString()
elemento.Value = ds.tables(0).Rows(i)(0).ToString()
Me.DropDownList1.Items.Add(elemento)
Next
End If
End Sub

Una vez publicada en la web esta pagina debe tener la siguiente funcionalidad:

Para seleccionar un libro agregaremos un evento proveniente del botón que indica
que al hacer clic en él, se dispare el método Click_Boton el cual va recuperar el
libro seleccionado en el comboBox y desplegara los ejemplares del libro dentro de
la grilla. Se hizo uso del método CargarEjemplares() con el objetivo de poder
reutilizarlo cada vez que se indique un diferente libro.
 Informe Técnico sobre Grillas de Asp.Net 7

Protected Sub BtnBuscarEjemplares_Click(…) Handles

BtnBuscarEjemplares.Click

CargarEjemplares()

End Sub

Public Sub CargarEjemplares()

Dim ej As New Ejemplar()

Dim ds As New DataSet()
Dim codigo_ejemplar As Integer =
Integer.Parse(Me.DropDownList1.SelectedItem.Value)
ds = ej.SeleccionarEjemplaresPorLibro(codigo_ejemplar)

If ds Is Nothing Then
MsgBox("No existen ejmplares registrados para este Libro")
Else
Me.GridView1.DataSource = ds
Me.GridView1.DataBind()
End If

End Sub

El resultado del ejercicio anterior será el siguiente:

Paso 3: Edición y Eliminación de un ejemplar de un libro

Antes de pasar al código se debe dar un par de explicaciones con respecto a como
manejar las claves primarias de la grilla, el objeto gridView maneja una propiedad
llamada DataKeyField mediante la cual se le indica a la grilla cuales son los
campos claves, es decir, todas las operaciones se realizan por medio de ellas por
ejemplo buscar cual es la fila que se va a eliminar o cual va hacer editada de igual
manera que un motor de base de datos.

A continuación se muestra cómo asignar DataKeyField a la grilla, pueden ser uno

o muchos campos. Ir a:

• Propiedades de la grilla
 Informe Técnico sobre Grillas de Asp.Net 8

• Propiedad DataKeyField
• Escribir el nombre de los campos claves de la grilla

Esto nos permite que al momento de editar una fila solo se editen los campos que
no son claves.

Eliminación de una fila de la grilla

Considerando que la grilla ya se encuentra llena procederemos a eliminar una fila.
Como se menciono anteriormente se usara del evento RowDelenting. En
resumen este método esta encargado de recuperar el id de la fila que se quiere
eliminar y de llamar al método de la entidad respectiva que se encarga de la
eliminación.

Protected Sub GridView1_RowDeleting(…) Handles GridView1.RowDeleting

Try
Dim codigo_ejemplar As Integer = Nothing
Dim liIndex As Integer = e.RowIndex
Dim ej As New Ejemplar()

cod_ejemplar = GridView1.DataKeys.Item(liIndex).Values.Item("cod_ej").ToInt()
ej.propiedad_codigo_ejemplar = codigo_ejemplar
ej.Eliminar()
CargarEjemplares()

Catch ex As Exception
MsgBox(ex.Message)
End Try
End Sub

Edición de una fila de la grilla

El proceso de editar una fila de la grilla se basa en el evento RowUpdating y en el

método del mismo nombre quien está encargado de:

• Identificar el id de la fila a editar

• Recuperar los nuevos datos de la fila a editar
• Llamar al método de la entidad que se encarga de realizar la edición

Protected Sub GridView1_RowUpdating(…) Handles GridView1.RowUpdating

Try

Dim codigo_ejemplar As Integer = Nothing

Dim liIndex As Integer = Me.GridView1.EditIndex
Dim ej As New Ejemplar()

cod_ej = GridView1.DataKeys.Item(liIndex).Values.Item("cod_ejem").ToInt()
ej.propiedad_codigo_ejemplar = cod_ej
ej.propiedad_codigo_libro = Me.Ddl_libros.SelectedItem.Value
ej.propiedad_ubicacion = GridView1.Rows().Item(liIndex).Cells(4).Text
ej.modificar()
CargarEjemplares()

Catch ex As Exception
MsgBox(ex.Message)
End Try

End Sub
 Informe Técnico sobre Grillas de Asp.Net 9

Inserción de una fila de la grilla

La última operación de mantenimiento es la inserción y aunque también es posible

realizarla dentro de la grilla para efectos del diseño se ha decidido hacerla fuera de
esta. Lo primero es crear una estructura que contenga los campos de la inserción
(tabla, panel, otra pagina, etc) en este caso se creo un panel y se agregaron los
campos mas un botón que cumple la función de desplegar o desaparecer el panel.

Nota: Todos los objetos de diseño en Asp pueden ser visibles o no al cargar la
pagina esto se realiza por medio del atributo Visible con un valor true o false.
Para este caso el panel debe estar como no visible al cargar la pagina.

En resumen, cada vez que se necesite agregar una fila se presionará el botón
Crear nuevo Ejemplar desplegando el panel para hacerlo. Luego que se presione
el botón Grabar para agregar la fila.

Me.Panel2.Visible = True
Dim codigo_ejemplar As Integer = Nothing
Dim ej As New Ejemplar()
Dim dt As New DataTable()

dt = ej.DevolverProximoCodigo().Tables(0)
codigo_ejemplar = dt.Rows(0)(0)

'Llenar tetxbox de ingreso de datos

Me.txtNombreLibro.Text = Me.DropDownList1.SelectedItem.Text
Me.txtCodEjemplar.Text = codigo_ejemplar

Nota:
Revisar Documentación del Objeto WebControl Panel.
http://msdn.microsoft.com/es-es/library/system.web.ui.webcontrols.panel(VS.80).aspx

Protected Sub BtnGrabarEjemplar_Click(ByVal sender As Object, ByVal e

As System.Web.UI.ImageClickEventArgs) Handles BtnGrabarEjemplar.Click

Dim codigo_ejemplar As Integer = Nothing

Dim ej As New Ejemplar()
Dim dt As New DataTable()
 Informe Técnico sobre Grillas de Asp.Net 10

'Recuperar el proximo codigo a insertar del ejemplar

dt = ej.DevolverProximoCodigo().Tables(0)
codigo_ejemplar = dt.Rows(0)(0)

'Llenar tetxbox de ingreso de datos

Me.txtNombreLibro.Text = Me.DropDownList1.SelectedItem.Text
Me.txtCodEjemplar.Text = codigo_ejemplar

'Llenar objeto ejemplar

ej.propiedad_codigo_ejemplar = codigo_ejemplar
ej.propiedad_codigo_libro =
Me.DropDownList1.SelectedItem.Value
ej.propiedad_ubicacion = Me.TxtUbicacion.Text
ej.insertar()

Me.Panel2.Visible = False
Me.CargarEjemplares()

End Sub