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

http://www.elguille.info/colabora/NET2006/gcuadra_GridViewPersonalizando_ParteI.htm