Cargar datos en GridView a partir de un DataTable en ASP.Net C#

Podemos cargar datos en GridView a partir de un DataTable en ASP.Net C# para su visualización en la página web del cliente.

Partiendo de un DataTable creado manualmente o de una consulta SQL se envía la tabla al control GridView para desplegarlo.

Para los ejemplos utilizaremos los DataTables creados manualmente en post anteriores.

Agregar control GridView en página aspx

Creamos un proyecto en Visual Studio 2017 de tipo Web Form, en una página .aspx agregamos el siguiente contenido:

<asp:GridView ID="gvTablaUno" runat="server"></asp:GridView>

• Agregamos el control GridView.
• Colocamos un identificador al control.
• Implementamos el elemento runat para permitir trabajar desde el servidor.

Los títulos de las columnas son iguales a las columnas del DataTable.

Encabezados personalizados GridView

En el GridView declarado anteriormente los encabezados se colocan de forma automática, sin embargo, en ocasiones es necesario personalizar.

Podría interesarte Modificar datos de un DataTable en C#  

Para no mostrar encabezados unidos (NombreCompleto) el control GridView permite la personalización de la siguiente manera.

<asp:GridView ID="gvTablaUno" runat="server" >
    <Columns>
        <asp:BoundField DataField="Numero" HeaderText="Numero" />
        <asp:BoundField DataField="NombreCompleto" HeaderText="Nombre completo" />
    </Columns>
</asp:GridView>

• Entre las etiquetas Columns colocamos todas las columnas visibles.
• En la propiedad DataField colocamos el encabezado de las columnas del DataTable.
• HeaderText permite establecer la descripción del encabezado de la tabla que el usuario visualizara.

Si enviamos los datos de un DataTable en el GridView anterior nos aparecerán columnas repetidas:

Para evitar esto es necesario agregar una propiedad más a la etiqueta GridView, como se muestra a continuación:

<asp:GridView ID="gvTablaUno" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Numero" HeaderText="Numero" />
        <asp:BoundField DataField="NombreCompleto" HeaderText="Nombre completo" />
    </Columns>
</asp:GridView>

Agregando la propiedad de AutoGenerateColumns en false evitamos que las columnas del DataTable se repitan.

Podría interesarte Publicar aplicación web en Azure con Visual Studio 2017  

Cargar datos en GridView desde C#

Utilizando la clase DataTable es posible cargar datos a un GridView desde el servidor, utilizando el siguiente código.

gvTablaUno.DataSource = tablaUno;
gvTablaUno.DataBind();

• Agregamos el nombre del control insertado en el archivo .aspx
• Mediante el DataSourse le asignamos los datos del DataTable TablaUno.
• Por último, realizamos la carga en el control GridView.

Además de los DataTables también podemos cargar datos desde un DataSet, sin embargo, debemos de especificar la tabla.

En el código siguiente establecemos la tabla de un DataSet:

gvTablaUno.DataSource = dtsTablas.Tables[0];
gvTablaUno.DataBind();

Un DataSet puede contener más de una tabla, estas tablas están enumeradas de igual manera que las filas de un DataTable.