Colabora .NET
Personalizando GridView en
Visual Web Developer 2005
Parte I
Insertando y Editando Datos en GridView
2005
!!!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.
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:
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:
2. Hacer clic en la opcin diseo en la parte inferior izquierda del formulario Web.
Web.
5. Hacer clic derecho sobre el control GridView y luego clic en la opcin de auto
formato.
aceptar.
7. Nuevamente hacer clic derecho sobre el control GridView y luego clic en la opcin
Smart Tag.
8. Hacer clic en Property Builder.
1. Id. Empleado
2. Nombres
3. Apellidos
14. Hacer clic con el botn derecho y seleccionar el submen Edit Templete
17. Clic derecho sobre el control y hacer clic en la opcin Edit DataBinding.
el campo Id. del empleado el cual se imprimir dentro de cada celda del GridView.
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.
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.
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()
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.
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.