Comenzando con la vista de cuadrícula
Vincular un GridView con un DataSource, p. Tabla de datos
Paso 1: haga un diseño de GridView para mostrar sus datos (Código HTML):
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblId" runat="server" Text='<% #Bind("id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NAME">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<% #Bind("name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="COUNTRY">
<ItemTemplate>
<asp:Label ID="lblCountry" runat="server" Text='<% #Bind("country") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Paso 2: vincula tu GridView con DataTable (.Código CS):
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Create a datatable as a DataSource of your GridView
DataTable dt = new DataTable();
// Add three columns in datatable and their names and data types
dt.Columns.Add(new DataColumn("id", typeof(int)));
dt.Columns.Add(new DataColumn("name", typeof(string)));
dt.Columns.Add(new DataColumn("country", typeof(string)));
// Add five records in datatable
for (int i = 0; i < 5; i++)
{
dt.Rows.Add(i, "Name" + i, "Country" + i);
}
GridView1.DataSource = dt; // set your datatable to your gridview as datasource
GridView1.DataBind(); // bind the gridview with datasource
}
}
Después de vincular su GridView se ve así:
Nota: También puede vincular su GridView desde la base de datos.
Instalación o configuración
GridView
es un control de servidor ASP.NET y, como tal, simplemente requiere cualquier versión de .Net instalada en su computadora junto con un entorno de desarrollo de .Net, generalmente cualquier versión de Visual Studio.
Suponiendo que tiene un entorno de desarrollo .Net, cree cualquier proyecto de aplicación de formularios web o aplicación MVC.
Los controles GridView
se pueden agregar arrastrando y soltando desde la caja de herramientas del diseñador o manualmente en el marcado html en el formulario web/vista MVC.
Un control GridView vacío:
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>