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();
}
}
