¿Cómo crear y llenar dinámicamente un DataTable con ASP.NET?

curso de desarrollo web, crea tu pagina web

En este artículo voy a explicar cómo crear y llenar dinámicamente (mediante programación) un DataTable y posteriormente enlazarlo a un GridView para mostrar la información con ASP.NET.

En primer lugar tienes que crear un objeto DataTable y su esquema (estructura de tablas y columnas) se define mediante programación. Una vez que se definen las columnas, se añaden filas (registros) a la DataTable generado dinámicamente.

Una vez que el DataTable está lleno con los registros, se enlaza a un control GridView ASP.Net.

Código HTML

El código HTML se compone de un ASP.Net GridView con tres columnas. Estas columnas las debe tener el DataTable generado dinámicamente.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="DataTable_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
                runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
                    <asp:BoundField DataField="Nombre" HeaderText="Nombre" ItemStyle-Width="150" />
                    <asp:BoundField DataField="Ciudad" HeaderText="Ciudad" ItemStyle-Width="150" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Crear dinámicamente DataTable y enlazarlo al GridView en ASP.Net

En el evento donde se carga de página “Page_Load” hay crear una nueva instancia de DataTable. Entonces añadimos las tres columnas a la colección Columns DataTable utilizando el AddRange método de la DataTable.

El método AddRange es una buena manera de reemplazar la tradicional forma de añadir una columna a la vez mediante el método Add. En el método AddRange tenemos que pasar un array de objetos de tipo DataColumn.

Y tenemos que especificar el nombre y el tipo de datos es decir, el tipo de datos que tendrá la columna.

Una vez que el esquema está listo es decir, se definen todas las columnas, podemos añadir filas a DataTable dinámicamente y enlazarlo al control ASP.Net GridView.

Te pongo el código fuente en VB.NET y C#, para que escojas con el que más te acomodes

VB.NET

Imports System.Data
Partial Class DataTable_Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn() {New DataColumn("Id", GetType(Integer)), _
                                                   New DataColumn("Nombre", GetType(String)), _
                                                   New DataColumn("Ciudad", GetType(String))})
            dt.Rows.Add(1, "Jonathan Orozco", "Monterrey")
            dt.Rows.Add(2, "Jesus Corona", "México")
            dt.Rows.Add(3, "Cirilo Zaucedo", "Tijuana")
            dt.Rows.Add(4, "Humberto Suazo", "Chile")
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub
End Class

C#

using System.Data;
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                            new DataColumn("Name", typeof(string)),
                            new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "Jonathan Orozco", "Monterrey");
        dt.Rows.Add(2, "Jesus Corona", "México");
        dt.Rows.Add(3, "Cirilo Zaucedo", "Tijuana");
        dt.Rows.Add(4, "Humberto Suazo", "Chile");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}