ASP.NET
Vista en cuadrícula

El enlace de datos

Hay dos formas de enlazar un GridView. Puede hacerlo manualmente configurando la propiedad DataSource y llamando a DataBind() , o puede usar un DataSourceControl como un SqlDataSource .

Encuadernación manual

Crea tu GridView:

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

Primero cree o recupere los datos de origen para el GridView. A continuación, asigne los datos a la propiedad DataSource de GridView. Finalmente, llame a DataBind() .

List<string> colors = new List<string>();
colors.Add("Red");
colors.Add("Green");
colors.Add("Blue");

gvColors.DataSource = colors;
gvColors.DataBind();

DataSourceControl

Crea tu DataSourceControl:

<asp:SqlDataSource ID="sdsColors"
    runat="server"
    ConnectionString="<%$ MyConnectionString %>"
    SelectCommand="SELECT Color_Name FROM Colors">
</asp:SqlDataSource>

Crea tu GridView y establece la propiedad DataSourceID :

<asp:GridView ID="gvColors"
    runat="server"
    DataSourceID="sdsColors">
</asp:GridView> 

Columnas

Hay siete tipos de columnas diferentes que pueden usarse dentro de un GridView.

<asp:GridView ID="GridView1" runat="server">
    <Columns>
        ...
    </Columns>
</asp:GridView> 

BoundField:

<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />

ButtonField:

<asp:ButtonField ButtonType="Button" HeaderText="Select Employee" Text="Select"/>

CheckBoxField:

<asp:CheckBoxField DataField="IsActive" HeaderText="Is Active" />

CommandField:

<asp:CommandField ShowDeleteButton="true" 
    ShowEditButton="true" 
    ShowInsertButton="true" 
    ShowSelectButton="true" />

HyperLinkField:

<asp:HyperLinkField HeaderText="Employee Profile"
    DataNavigateUrlFields="EmployeeID"
    DataNavigateUrlFormatString="EmployeeProfile.aspx?EmployeeID={0}" />

ImageField:

<asp:ImageField HeaderText="Photo"
    DataImageUrlField="EmployeeID"
    DataImageUrlFormatString="/images/{0}" />

TemplateField:

<asp:TemplateField>
    <HeaderTemplate>
        Name
    </HeaderTemplate>
    <ItemTemplate>
        <asp:Label ID="lblEmployeeName"
            runat="server"
            Text='<&# Eval("EmployeeName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

GridView fuertemente tipado

Comenzando con Asp.net 4.5, los controles web pueden aprovechar el enlace fuertemente tipado para obtener soporte de IntelliSense y errores de tiempo de compilación.

Crea una clase que contenga tu modelo:

public class Album
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Artist { get; set; }
}

Defina el control GridView en su página:

<asp:GridView ID="Grid" runat="server" AutoGenerateColumns="false" ItemType="YourNamespace.Album">
    <Columns>
        <asp:TemplateField HeaderText="Id">
            <ItemTemplate>
                <asp:Label ID="lblName" runat="server" Text="<%# Item.Id %>"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:Label ID="lblName" runat="server" Text="<%# Item.Name %>"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Artist">
            <ItemTemplate>
                <asp:Label ID="lblCity" runat="server" Text="<%# Item.Artist %>"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Cargar los datos y enlazarlos:

var albumList = new List<Album>
{
    new Album {Id = 1, Artist = "Icing (a Cake cover band)", Name = "Toppings Vol. 1"},
    new Album {Id = 2, Artist = "Fleetwood PC", Name = "Best of Windows"},
    new Album {Id = 3, Artist = "this.Bandnames", Name = "TH_ (Pronounced \"Thunderscore\")"},
};

Grid.DataSource = albumList;
Grid.DataBind();

Manejo de evento de comando

GridViews permite enviar comandos desde una fila de GridView. Esto es útil para pasar información específica de una fila a un controlador de eventos como argumentos de comando.

Para suscribirse a un evento de comando:

<asp:GridView ID="GridView1" ... OnRowCommand="GridView1_RowCommand">

Los botones son la forma más común de elevar comandos. También admiten una forma de especificar argumentos de comando. En este ejemplo, el argumento es un ID del elemento que representa la fila.

<TemplateField>
    <ItemTemplate>
        <asp:LinkButton ID="LinkButton1" runat="server"
                        CommandName="SampleCmd"
                        CommandArgument='<%# Eval("ID") %>'>
        </asp:LinkButton>
    </ItemTemplate>
</TemplateField>

Alternativamente, uno puede usar una plantilla de columna CommandField que proporciona los controles de comando más comunes.

Manejo del evento en código detrás:

protected void GridView1_RowCommand(object source, GridViewCommandEventArgs e)
{
    if (e.CommandName == "SampleCmd")
    {
        var id = e.CommandArgument;
    }
}

Tenga en cuenta que el CommandName utilizado en este ejemplo es arbitrario y es una opción del desarrollador. Sin embargo, hay un conjunto de nombres predefinidos que el propio GridView reconoce. Los eventos correspondientes se generan cuando se activan estos comandos.

Paginacion

ObjectDataSource

Si usas un ObjectDataSource, casi todo se maneja por ti, simplemente dile a GridView a AllowPaging y dale un PageSize .

<asp:GridView ID="gvColors"
    runat="server"
    DataSourceID="sdsColors"
    AllowPaging="True"
    PageSize="5">
</asp:GridView>

<asp:SqlDataSource ID="sdsColors"
    runat="server"
    ConnectionString="<%$ MyConnectionString %>"
    SelectCommand="SELECT Color_ID, Color_Name FROM Colors">
</asp:SqlDataSource>

Encuadernación manual

Si se vincula manualmente, debe manejar el evento PageIndexChanging . Simplemente configure DataSource y PageIndex y vuelva a enlazar el GridView.

<asp:GridView ID="gvColors"
    runat="server"
    AllowPaging="True"
    PageSize="5"
    OnPageIndexChanging="gvColors_PageIndexChanging">
</asp:GridView>

DO#

protected void gvColors_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    gvColors.DataSource = // Method to retrieve DataSource
    gvColors.PageIndex = e.NewPageIndex;
    gvColors.DataBind();
}

VB.NET

Protected Sub gvColors_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
{
    gvColors.DataSource = // Method to retrieve DataSource
    gvColors.PageIndex = e.NewPageIndex
    gvColors.DataBind()
}

Actualizar Gridview en la fila de clic

Las vistas en cuadrícula son más útiles si podemos actualizar la vista según nuestras necesidades. Considere una vista con una función de bloqueo / desbloqueo en cada fila. Se puede hacer como:

Añadir un panel de actualización:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> </asp:UpdatePanel>

Agregue un ContentTemplate y un Trigger dentro de su UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate>
    </ContentTemplate>

    <Triggers>
    </Triggers>
</asp:UpdatePanel>

Agregue su GridView dentro de ContentTemplate:

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server">
          <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
                            CommandName="togglelock"
                            CommandArgument='<%#Container.DataItemIndex%>'/>
                        
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>

</ContentTemplate>

Aquí estamos dando a nuestra columna constante GridView1, para el botón de bloqueo. Eso sí, el databind no ha tenido lugar hasta ahora.

Tiempo para DataBind: (en PageLoad)

using (SqlConnection con= new SqlConnection(connectionString)) 
{
            SqlCommand sqlCommand = new SqlCommand(" ... ", con);
            SqlDataReader reader = sqlCommand.ExecuteReader();
            GridView1.DataSource = reader;
            GridView1.DataBind();
}

La imagen de bloqueo / desbloqueo será diferente según el valor de una determinada columna en su GridView. Considere un caso en el que su tabla contenga un atributo / columna titulado "Estado de bloqueo". Ahora desea (1) ocultar esa columna justo después de DataBind y justo antes de la representación de la página y (2) asignar diferentes imágenes a cada fila en base a ese valor de columna oculto, es decir, si el estado de bloqueo de una fila es 0, asígnele el "bloqueo". jpg ", si el estado es 1, asignalo" unlock.jpg ". Para hacer esto, OnRowDataBound opción OnRowDataBound de GridView, se mezcla con su GridView, justo antes de representar cada fila a la página HTML.

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound"> ...

En archivo cs

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Cells[8].Visible = false; //hiding the desired column which is column number 8 in this case
            GridView1.HeaderRow.Cells[8].Visible = false; //hiding its header
            ImageButton imgDownload = (ImageButton)e.Row.FindControl("imgDownload");
            string lstate = ((CheckBox)e.Row.Cells[8].Controls[0]).Checked.ToString();
            if (lstate == "True")
            { imgDownload.ImageUrl = "images/lock.png"; }
            else
            {
                imgDownload.ImageUrl = "images/unlock.png";
            }
        }
    }

Ahora el GridView se procesará como queramos, ahora implementemos eventos de clic de botón en el botón Bloquear / Desbloquear imagen. Comprenda que para realizar una operación específica en una fila específica, se debe dar un comando a esa fila y GridView nos proporciona la misma funcionalidad llamada OnRowCommand .

<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" OnRowCommand="GridView1_RowCommand">
...
</ContentTemplate>

e.CommandArgument una función en el archivo cs que toma un object sender y GridViewCommandEventArgs e Con e.CommandArgument podemos obtener el índice de la fila que dio el comando Punto que se debe señalar aquí es que, una fila puede tener varios botones y el cs el código necesita saber qué botón de esa fila dio el comando. Así que usaremos CommandName

<asp:ImageButton ID="imgDownload" runat="server" OnClientClick="return confirm('Are you sure want to Lock/Unlock ?');"
                            CommandName="togglelock"
                            CommandArgument='<%#Container.DataItemIndex%>'/>

Ahora en el backend uno puede distinguir comandos de diferentes filas y diferentes botones.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName == "togglelock")
        {
            using (SqlConnection con= new SqlConnection(connectionString)) 
            {
               int index = Convert.ToInt32(e.CommandArgument);
               SqlCommand sqlCommand = new SqlCommand(" ... ", con);
               SqlDataReader reader = sqlCommand.ExecuteReader();
               GridView1.DataSource = reader;
               GridView1.DataBind();
            }
        }
    }

Agregue <asp:PostBackTrigger ControlID="GridView1"/> al Trigger y actualizará el GridView una vez que se complete el DataBind.

Use HorizontalAlign="Center" para colocar GridView en el centro de la página.