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

Estrada Web Group
Administrador
¿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();
    }
}
Compartir artículo:

Más artículos geniales

Cómo paginar una tabla html con ASPNET MVC, ajax, jquery y javascript

Cómo paginar una tabla html con ASPNET MVC, ajax, jquery y javascript

En este video aprenderás a paginar un listado de productos con la utilización de jQuery para hacer las llamadas Ajax y cargar la pagina de resultados. Este video es parte del curso gratis para crear un Sistema de Inventarios con ASPNET MVC

Ver artículo completo
Qué es MVC y cómo utilizarlo en ASP.NET Core

Qué es MVC y cómo utilizarlo en ASP.NET Core

En este tutorial, aprenderas qué es MVC y en el tutorial posterior, aprenderás cómo usar el patrón de diseño MVC en ASP.NET Core

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla