Personalizando GridView en Visual Web Developer 2005 Parte I

Introducción

En las viejas versiones de Visual Basic era prácticamente imposible el tratar de personalizar controles, por ejemplo en la 3.0 creo que la mejor solución era adquirir controles de terceras empresas y aun en la versión 4.0 era tarea titánica el intentar personalizar un control. De la versión 5.0 en adelante Microsoft presento Visual Basic Control Creation Edition y los desarrolladores tenían ampliamente la posibilidad de personalizar muchos controles o crear controles desde cero, pero por supuesto siempre existía un grado de dificultad y que a medida con la nueva aparición de nuevas versiones de Visual Basic esos grados de dificultad se han ido disipando.

Hoy en día el adaptar controles de usuarios a tareas especificas de una aplicación, es parte importante, ya que esto permite el uso de elementos propios en una aplicación, reutilización de la mayor parte del código, una integración mayor de objetos de un mismo proveedor, hay menos posibilidad que sin la utilización de controles de terceros la aplicación no tenga fallo alguno, aunque muchos controles de terceros simplifican sobre manera muchas tareas de programación que son muy complicadas de llevar a la realidad.

Con el nacimiento de Netframework 2.0 muchas tareas de programación se reducen a prácticamente unas pocas líneas de código 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 aplicación de Web que permita el ingreso de registros, actualización y/o eliminación. Esto destaca características y/o apariencias muy practicas y parecidas al Grid común y corriente que conocemos en aplicaciones de Visual Basic 2005.

Este artículo trata básicamente en proporcionarle al GridView una mejor utilidad en aplicaciones de Web escalables. En esta primera presentación 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 aplicación en el lugar donde se desee. A continuación muestro la opción 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 página predeterminada el control de GridView para posteriormente personalizarlo e incorporarle los controles adecuados. A continuación especifico los pasos necesarios para proceder a colgar el control dentro de la página predeterminada:

1. En la ventana explorador de soluciones hacer doble clic en la página predeterminada.

2. Hacer clic en la opción diseño en la parte inferior izquierda del formulario Web.

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

4. En la sección data seleccionar el control GridView y arrastrarlo hasta el formulario Web.

5. Hacer clic derecho sobre el control GridView y luego clic en la opción 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 opción 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 número #7.

13. Hacer clic en Edit Templates.

14. Hacer clic con el botón derecho y seleccionar el submenú Edit Templete

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

16. En la sección ItemTemplate arrastrar y soltar un control de tipo Label.

17. Clic derecho sobre el control  y hacer clic en la opción Edit DataBinding.

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

19. En Code Expression escribir la siguiente instrucción 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 sección FooterTemplate arrastrar un control LinkButton.

22. Hacer clic derechos sobre el botón y modificar la propiedad Text al texto Grabar.

23. En la propiedad CommandName poner el nombre de Insert.

24. Repetir el paso número #14.

25. Seleccionar la columna (1) Nombres.

26. En la sección ItemTemplate arrastrar un control de tipo TextBox.

27. Repetir paso número #17.

28. Repetir paso número #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 sección de FooterTemplate.

32. Repetir paso número #14.

33. Seleccionar la columna (2) Apellidos.

34. Arrastrar un control de tipo TextBox en la sección ItemTemplate.

35. Repetir paso número #17.

36. Repetir paso número #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 sección de FooterTemplate.

40. Clic derecho sobre el control y hacer clic en la opción 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 permitirán los efectos de ingresar, actualizar. El control LinkButton titulado Grabar es el que nos permitirá con algunas cuantas líneas de código 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 razón el aspecto que se observa en la figura anterior no es el mismo, esto es, la posición 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 sección Style. Style permite ubicar el control en una posición predeterminada, así que se requerirá eliminar esta sección para que los controles estén en su posición 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 solución con Microsoft Visual Web Developer 2005

A continuación detallo los requerimientos necesarios para crear el proyecto, desarrollado en Visual Web Developer 2005, Edición 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 código

A continuación muestro la sección del código, 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.
''' Código 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 página.
    ''' </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 método ItemCommand permite identificar los controles que 
    ''' se encuentran incrustrados
    ''' en el Web Grid personalizado.
    ''' El método 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 código.

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

El procedimiento o método ItemCommand permite identificar que elementos del Grid son activados de manera automática o manual, esto es, al hacer clic en el hiper botón Grabar, este es identificado y ejecuta una serie de instrucciones gracias a un bloque de sentencia IF..THEN..END..IF.

El método 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 más 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 diseñado en funcionamiento y un poco de apariencia el WebGrid en algo más útil que usualmente se utiliza en la mayoría 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 más versátil y reutilizable en aplicaciones de Web de alto nivel y escalables.

Espacios de nombres usados en el código de este artículo:

System.Data
System.Data.SqlClient