¿Cómo llenar un control GridView en ASP NET?

El ejemplo siguiente se trabaja sobre Visual Studio 2012 pero el código utilizado es compatible con versiones anteriores probados hasta Visual Studio 2005.

El control Gridview de ASP NET es utilizado para mostrar datos en filas y columnas; podemos también realizar operaciones de edición y eliminación. El control Gridview soporta diferentes orígenes de datos entre los que podemos incluir ACCES, SQL, XML, MY SQL, ORACLE, entre muchos otros

Fill_GridView

El control Gridview es bastante extenso por lo que dividiré el tema en muchos otros temas específicos; en esta sección en concreto veremos cómo llenar el control Gridview desde un origen de dato System.Data.OleDb conectándonos hacia una base de datos Microsoft SQL Server.

Para este ejemplo deberemos agregar el control UpdatePanel de tal forma que podamos hacer uso de AJAX. A su vez agregaremos el atributo “EnableEventValidation” en nuestra página.

<%@ Page Language="vb" EnableEventValidation="true" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Protecto.WebForm" %>
 
<head>
...
</head>
<body>
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
</form>
</body>

Empezaremos ahora a trabajar nuestro respectivo código asp para construir el diseño de nuestro gridview.

Colocaremos entre las etiquetas <form></form> y debajo de asp:ScriptManager el siguiente código:

<div class="divGrid">
    <div class="grid">
 
    </div><!-- grid -->
</div><!-- divGrid -->

Estos dos paneles div nos servirán para ubicar y formatear el Gridview utilizando clases CSS como veremos más adelante.

El paso siguiente es colocar el control UpdatePanel que dará la funcionalidad AJAX al Gridview.

<div class="divGrid">
    <div class="grid">
 
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
 
            </ContentTemplate>
        </asp:UpdatePanel>
 
    </div><!-- grid -->
</div><!-- divGrid -->

Ahora colocaremos nuestro Gridview dentro del control UpdatePanel estructurando cada columna a recuperar de la base de datos.

<div class="divGrid">
    <div class="grid">
 
        <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
 
                <asp:GridView 
                    ID="GridViewOne"
                    runat="server"
                    CssClass="datatable"
                    CellPadding="0" 
                    CellSpacing="0"
                    GridLines="None"
                    AutoGenerateColumns="False">
 
                    <RowStyle CssClass="even"/>
                    <HeaderStyle CssClass="header" />
                    <AlternatingRowStyle CssClass="odd"/>
 
                </asp:GridView>
 
            </ContentTemplate>
        </asp:UpdatePanel>
 
    </div><!-- grid -->
</div><!-- divGrid -->

Como puede apreciarse en el código anterior hemos colocado algunos atributos en el Gridview los cuales servirán mayormente para formatear el control.

CssClass: Clase CSS que será aplicada al Gridview
CellPadding: Separación del contenido de cada celda con su respectivo borde.
CellSpacing: Separación entre cada celda.
GridLines: Especifica la orientación de líneas que serán visibles en el Gridview.
AutoGenerateColumns: Especifica si las columnas serán creadas dinámicamente desde el origen de datos.

Una vez tenemos definido el diseño de nuestro Gridview es hora de colocar las columnas que poblaran nuestro control.

<asp:GridView 
    ID="GridViewOne"
    runat="server"
    CssClass="datatable"
    CellPadding="0" 
    CellSpacing="0"
    GridLines="None"
    AutoGenerateColumns="False"
    DataKeyNames="id_del_registro">
 
    <RowStyle CssClass="even"/>
    <HeaderStyle CssClass="header" />
    <AlternatingRowStyle CssClass="odd"/>
 
    <Columns>
        <asp:BoundField HeaderText="Nombre-de-Columna" DataField="Campo-del-DataSource"/>
    </Columns>
 
</asp:GridView>

Como se aprecia en el código anterior hemos agregado un atributo DataKeyNames en el Gridview, este atributo debe tener como valor el nombre del ID que representa el registro que poblara cada fila en el control; es decir, el nombre ID de la tabla que estamos recuperando en nuestro origen de datos.

Otra parte importante del código es la incorporación de los elementos:

Columns: Encapsula las columnas que serán visualizadas en el Gridview
BoundField: Cada columna con su respectivo texto de cabecera y campo llamado desde el origen de datos. Cabe mencionar que podemos agregar tantos BoundField como necesitemos pero es recomendable no poblar demasiado el control.

Vallamos ahora a nuestro code behind en donde colocaremos el código Visual Basic para llenar nuestro control Gridview.

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            Llenar_GridView()
        End If
    End Sub
 
    Private Sub Llenar_GridView()
        ' CREAMOS NUESTRO ELEMENTO CONNCTION PARA TENER ACCESO A LA BASE DE DATOS
        Dim dbCon As New System.Data.OleDb.OleDbConnection("CADENA DE CONEXION HACIA SQL SERVER")
 
        Try
            'ABRIMOS LA CONEXION HACIA SQL
            If dbCon.State = ConnectionState.Closed Then
                dbCon.Open()
            End If
 
            Dim SQL As String = String.Empty
 
            SQL = "CONSULTA O PRECEDIMIENTO ALMACENADO QUE DEVOLVERA VALORES DESDE SQL"
            ' LAS COLUMNAS DE LA CONSULTA DEBEN TENER LOS MISMOS NOMBRE QUE SE DECLARAN EN EL BoundField
 
            'RECUPERAMOS LOS DATOS DESDE SQL
            Dim da As New System.Data.OleDb.OleDbDataAdapter(SQL, dbCon)
            'CREAMOS UN DATATABLE
            Dim dt As New DataTable("NOMBRE_DEL_DATATABLE")
            'LLENAMOS EL DATATABLE
            da.Fill(dt)
 
            'AGREGAMOS EL ORIGEN DE DATOS A NUESTRO GRIDVIEW
            Me.GridViewOne.DataSource = dt
 
            'POBLAMOS LA TABLA
            Me.GridViewOne.DataBind()
 
            'LIMPIAMOS LA MEMORIA DEL SERVIDOR
            dt.Dispose()
 
        Catch ex As Exception
            'CAPTRAR MENSAJE DE ERROR
 
        Finally
            If dbCon.State = ConnectionState.Open Then
                dbCon.Close()
            End If
 
        End Try
    End Sub

Esto debería bastar para poblar un control Gridview ahora solo el toque final que sería incluir nuestro estilo CSS para darle una apariencia mejorada a nuestro control.

div.divGrid{width:98%; margin:1.5% 1%;}
 
.scroll{overflow: scroll; overflow-y: hidden;}
 
.grid{font-size:10pt; font-weight: normal; width:100%;}
 
.grid .datatable{width:100%; border:none; padding:0px; margin:0px; color:#333;}
 
.grid .datatable th
, .grid .datatable td
{
    padding:10px 7px; 
    font-weight:bold; 
    text-align:left; 
    font-size:10pt; 
    border-bottom:solid 1px #BDBDBD;
    vertical-align:middle;
}
 
    .grid .datatable th a{color:inherit; text-decoration:none;}
 
    .grid .datatable th a:hover{color:#0B0B3B;}
 
.grid .datatable td{font-weight:normal; font-size:9pt; }
 
.grid .datatable tr:hover{cursor:pointer;}
 
/* FILAS DE LA TABLA */
.grid .datatable tr.even {background-color:#F2F2F2;}
 
/* FILAS ALTERNATIVAS */
.grid .datatable tr.odd {background-color:#FFF;}
 
/* PAGINACION DEL GRIDIVIEW */
.grid .pager{width:100%; overflow:hidden;}
 
.grid .pager input[type=submit]
{
    float:left;
    margin:0px;
    padding:5px 7px;
    border:solid 1px #BDBDBD;
    font-size:8pt;
    font-weight:bold;
    background:none;
    background-color:#FFF;
    border-right:none;
    cursor:pointer;
}
 
.grid .pager input[type=submit]:hover{color:#0080FF;}
 
.grid .pager .ultimo{border:solid 1px #BDBDBD !important;}
 
.PagerLabel{display:inline-block; padding:7px 0 0 0;}
 
.SelectedRow{background-color:#EFFBFB; opacity: 0.8;}
 
/* ORDEN DE COLUMNAS */
th.Ascending
, th.Descending
{
    background-position:left center;
    background-repeat:no-repeat;
    padding-left: 20px !important;
}
 
/* Imagen que se mostrara para las columnas que permiten orden */
 
th.Ascending{background-image:URL(../img/Ascending.png);} 
 
th.Descending{background-image:URL(../img/Descending.png);}

Espero les sea de utilidad, pueden colocar cualquier duda en la caja de comentarios, en próximos temas estaremos hablando de otras funcionalidades que podemos realizar con este poderoso control.

Puede que te interese también

¿Cómo seleccionar una fila en un Gridview en ASP NET?
¿Cómo obtener el valor de cualquier celda de un Gridview en ASP NET?

Suscribir
Notificar a
guest
4 Comentarios
Comentarios en línea
Ver todos los comentarios
Carlos gomez

Excelente aporte, sigan con la iniciativa

trackback

[…] El control GridView se utiliza para mostrar los datos en una tabla. Con el control GridView, puede mostrar, editar, eliminar, ordenar y recorrer los datos de tablas de muchos tipos diferentes de orígenes de datos, entre los que se incluyen bases de datos, archivos XML y objetos comerciales que exponen los datos… Sigue Leyendo […]

Marcos

Gracias, el code behind yo lo necesitaba para C# pero ya es ventaja 🙂

Yader

Hola me podria ayudar, estoy tratando de llenar un grid desde otro grid, es decir que al seleccionar una fila de grid1 se elimine de este pero se agregue al grid2, estoy trabajando con asp.net y c#.