el Guille, la Web del Visual Basic,

C#, .NET y ms...

Lo+ - WinFX - .NET - ADO.NET - ASP.NET - Cmo... -
Colabora - VB6 - API - HTML - Vista - Links - Foros

OFERTA alojamiento .NET 2.0, SQL Server

4.95 Eur al mes
Ahora con el doble de casi todo !!!

Colabora .NET

Personalizando GridView en
Visual Web Developer 2005
Parte I
Insertando y Editando Datos en GridView
2005

Fecha: 02/Ago/2006 (2 de Agosto de 2006)

Autor: Giovanni Cuadra - giovanni_cuadra@hotmail.com

!!!Tecnologa de la Programacin!!!

Managua, Nicaragua.

Introduccin
En las viejas versiones de Visual Basic era prcticamente imposible el tratar de personalizar
controles, por ejemplo en la 3.0 creo que la mejor solucin era adquirir controles de
terceras empresas y aun en la versin 4.0 era tarea titnica el intentar personalizar un
control. De la versin 5.0 en adelante Microsoft presento Visual Basic Control Creation
Edition y los desarrolladores tenan ampliamente la posibilidad de personalizar muchos
controles o crear controles desde cero, pero por supuesto siempre exista un grado de
dificultad y que a medida con la nueva aparicin de nuevas versiones de Visual Basic esos
grados de dificultad se han ido disipando.

Hoy en da el adaptar controles de usuarios a tareas especificas de una aplicacin, es parte

importante, ya que esto permite el uso de elementos propios en una aplicacin,
reutilizacin de la mayor parte del cdigo, una integracin mayor de objetos de un mismo
proveedor, hay menos posibilidad que sin la utilizacin de controles de terceros la
aplicacin no tenga fallo alguno, aunque muchos controles de terceros simplifican sobre
manera muchas tareas de programacin que son muy complicadas de llevar a la realidad.

Con el nacimiento de Netframework 2.0 muchas tareas de programacin se reducen a

prcticamente unas pocas lneas de cdigo que es lo que realmente el desarrollador
cotidiano necesita, y esto equivale a decir menos complicaciones mayor productividad.

Muchos desarrolladores que conozco me han consultado la forma de como poder

personalizar en control GridView o el tradicional DataGrid en una aplicacin de Web que
permita el ingreso de registros, actualizacin y/o eliminacin. Esto destaca caractersticas
y/o apariencias muy practicas y parecidas al Grid comn y corriente que conocemos en
aplicaciones de Visual Basic 2005.

Este artculo trata bsicamente en proporcionarle al GridView una mejor utilidad en

aplicaciones de Web escalables. En esta primera presentacin veremos de manera este
importante control de Web permite al usuario final obtener una facilidad de manipular datos
sin costo alguno.

Primeros Pasos
En el men de Visual Studio 2005 hacer clic donde dice nuevo proyecto Web. Luego en el
asistente de plantillas de Web o proyectos, hacer clic en el icono ASP.NET Web Site, ubicar
el directorio de la aplicacin en el lugar donde se desee. A continuacin muestro la opcin
de men y el formulario del asistente:

Figura 1.0 Proyecto Web

 Figura 2.0 Asistente de proyectos Web

Personalizando el GridView.
Una vez creado el proyecto procederemos a colgar en la pgina predeterminada el control
de GridView para posteriormente personalizarlo e incorporarle los controles adecuados. A
continuacin especifico los pasos necesarios para proceder a colgar el control dentro de la
pgina predeterminada:

1. En la ventana explorador de soluciones hacer doble clic en la pgina predeterminada.

2. Hacer clic en la opcin diseo en la parte inferior izquierda del formulario Web.

3. Hacer clic en el icono el cual presenta el toolbox de controles.

4. En la seccin data seleccionar el control GridView y arrastrarlo hasta el formulario

Web.

5. Hacer clic derecho sobre el control GridView y luego clic en la opcin de auto

formato.

6. Seleccionar Colorful en el asistente de auto formato y luego hacer clic en aplicar y

aceptar.

7. Nuevamente hacer clic derecho sobre el control GridView y luego clic en la opcin

Smart Tag.
8. Hacer clic en Property Builder.

9. En las propiedades del control seleccionar Columns.

10. Insertar 5 columnas de datos de tipo Template Columns.

11. Modificar el Header Text con los siguientes titulos:

1. Id. Empleado

2. Nombres

3. Apellidos

12. Repetir el paso nmero #7.

13. Hacer clic en Edit Templates.

14. Hacer clic con el botn derecho y seleccionar el submen Edit Templete

15. Seleccionar la columna (0) o Id. Empleado.

16. En la seccin ItemTemplate arrastrar y soltar un control de tipo Label.

17. Clic derecho sobre el control y hacer clic en la opcin Edit DataBinding.

18. En la propiedad Text del control seleccionar Custom Binding.

19. En Code Expression escribir la siguiente instruccin la cual permite vincular el

campo con el control. DataBinder.Eval(Container, "DataItem.EmployeeID"). Este es

el campo Id. del empleado el cual se imprimir dentro de cada celda del GridView.

20. Hacer clic en aceptar.

21. En la seccin FooterTemplate arrastrar un control LinkButton.

22. Hacer clic derechos sobre el botn y modificar la propiedad Text al texto Grabar.
23. En la propiedad CommandName poner el nombre de Insert.

24. Repetir el paso nmero #14.

25. Seleccionar la columna (1) Nombres.

26. En la seccin ItemTemplate arrastrar un control de tipo TextBox.

27. Repetir paso nmero #17.

28. Repetir paso nmero #18.

29. En Code Expression escribir DataBinder.Eval(Container, "DataItem.FirstName").

30. Hacer clic en aceptar.

31. Arrastrar un control de tipo TextBox a la seccin de FooterTemplate.

32. Repetir paso nmero #14.

33. Seleccionar la columna (2) Apellidos.

34. Arrastrar un control de tipo TextBox en la seccin ItemTemplate.

35. Repetir paso nmero #17.

36. Repetir paso nmero #18.

37. En Code Expression escribir DataBinder.Eval(Container, "DataItem.LastName").

38. Hacer clic en aceptar.

39. Arrastrar un control de tipo TextBox a la seccin de FooterTemplate.

40. Clic derecho sobre el control y hacer clic en la opcin End Template Editing.
 Figura 3.0 GridView Personalizado.

Los recuadros que se observan en las columnas Nombres y Apellidos son los controles
TextBox, que son los que permitirn los efectos de ingresar, actualizar. El control
LinkButton titulado Grabar es el que nos permitir con algunas cuantas lneas de cdigo
insertar y visualizar de manera inmediata los registro en la base de datos. En la columna
ID. Empleado no se muestra recuadro alguno ya que es un control Label el que permitir
sobre manera mostrar el ID nico del empleado.

Si por alguna razn el aspecto que se observa en la figura anterior no es el mismo, esto es,
la posicin de los controles no aparecen tal y como se muestra, se requerir cambiar a la
vista Source del documento o formulario Web y eliminar de todos los Tag de los controles
insertados la seccin Style. Style permite ubicar el control en una posicin predeterminada,
as que se requerir eliminar esta seccin para que los controles estn en su posicin
original.

Cada uno de los nombres de campos insertados en los controles correspondientes, son los
campos que vienen de una base de datos de SQL Server 2000 y que son enlazados con el
objetivo de mostrar y manipular los registros desde el GridView.

Implementando una solucin con Microsoft Visual Web

Developer 2005
A continuacin detallo los requerimientos necesarios para crear el proyecto, desarrollado en
Visual Web Developer 2005, Edicin Profesional:

Microsoft SQL Server 2000

Microsoft Visual Studio 2005

Microsoft Windows Xp SP 2.0

IIS 5.0 Instalado.

 Computadora Petium o superior.

Memoria RAM 128 o superior.

Monitor de 15'' o superior.

El cdigo
A continuacin muestro la seccin del cdigo, por el cual en esta primera entrega solo es
funcional para insertar datos.

Imports System.Data
Imports System.Data.SqlClient
''' <summary>
''' Personalizando el Web GridView 2005.
''' Cdigo compatible con Web DataGrid.
''' </summary>
''' <remarks></remarks>
Partial Class _Default
Inherits System.Web.UI.Page
Dim strConnection As String = "User ID=sa;Initial Catalog=Northwind;Data
Source=SERVER"
''' <summary>
''' El procedimiento BindGridView permite cargar los datos de
''' la tabla empleados.
''' </summary>
''' <remarks></remarks>
Private Sub BindGridView()
Dim cntDB As New SqlConnection(strConnection)
Dim DA_Empleados As New SqlDataAdapter("SELECT employeeid," & _
"firstname,lastname FROM employees", cntDB)
Dim DAT_Empleados As New DataSet()

DAT_Empleados.Clear()
DA_Empleados.Fill(DAT_Empleados, "employees")

DataGrid1.DataSource = DAT_Empleados
DataGrid1.DataBind()
End Sub
''' <summary>
''' Muestra el GridView al cargar la pgina.
''' </summary>
 ''' <param name="sender"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
If Not Page.IsPostBack Then
Call BindGridView()
End If
End Sub
''' <summary>
''' El mtodo ItemCommand permite identificar los controles que
''' se encuentran incrustrados
''' en el Web Grid personalizado.
''' El mtodo FindControl permite indentificar los dos controles de
''' tipo TextBox que se utilizaran
''' con el objetivo de insertar los datos desde el Grid.
''' </summary>
''' <param name="source"></param>
''' <param name="e"></param>
''' <remarks></remarks>
Protected Sub DataGrid1_ItemCommand(ByVal source As Object, ByVal e _
As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles
DataGrid1.ItemCommand
If e.CommandName = "Insert" Then
Dim cntDB As New SqlConnection(strConnection)
Dim tNombres As TextBox = e.Item.FindControl("txtNombres")
Dim tApellidos As TextBox = e.Item.FindControl("txtApellidos")
cntDB.Open()

Dim cmdInsert As New SqlCommand("insert into

employees(firstname,lastname) " & _
"values('" & tNombres.Text & "','" & tApellidos.Text & "')", cntDB)
cmdInsert.ExecuteNonQuery()

cntDB.Close()
Call BindGridView()
End If
End Sub
End Class

Explicando el cdigo.
El procedimiento privado BindGridView permite ejecutar el WebGrid y cargar los datos
desde el instante en que la pgina es ejecutada desde el explorador de Web. Esto es
efectuada gracias al procedimiento evento Page_Load del formulario Web.

El procedimiento o mtodo ItemCommand permite identificar que elementos del Grid son
activados de manera automtica o manual, esto es, al hacer clic en el hiper botn Grabar,
este es identificado y ejecuta una serie de instrucciones gracias a un bloque de sentencia
IF..THEN..END..IF.

El mtodo FindControl permite identificar dentro del Grid dos controles con los nombres
txtNombres y txtApellidos los cuales son definidos en dos variables del mismo tipo de clase
y que posteriormente permiten enviar sus respectivos valores a la tabla de empleados de la
base de datos SQL Server 2000. Esto es ejecutado gracias aun comando de tipo
SqlCommand.

Finalmente se carga nuevamente el GridView con sus datos ms recientes mediante la

llamada del procedimiento privado BindGridView().

Conclusiones
En esta primera entrega hemos traspasado una barrera muy importante el insertar
registros en un WebGrid de ASP.NET 2.0. Tal y como el modelo de los Grid de Visual Basic,
hemos diseado en funcionamiento y un poco de apariencia el WebGrid en algo ms til
que usualmente se utiliza en la mayora de aplicaciones de Web. Si recordamos un poco
acerca de los Grid de Visual Basic, estos permiten el ingreso de datos en la ltima fila. De
la misma forma hemos personalizado el WebGrid de ASP.NET.

En la segunda entrega, veremos como poder eliminar y/o modificar datos existente dentro
del WebGrid. Esto permitir sobre manera obtener un control ms verstil y reutilizable en
aplicaciones de Web de alto nivel y escalables.

Espacios de nombres usados en el cdigo de este artculo:

System.Data
System.Data.SqlClient

Cdigo de ejemplo (ZIP):

Fichero con el cdigo de ejemplo: gcuadra_GridViewI.zip - 4 KB

(MD5 checksum: DFB7A99E56111CBAE17D17E55B42448A)