Mantener estado de CheckBox mientras se pagina un Control GridView

El control GridView permite al usuario navegar fácilmente a través de los registros usando paginación. Los usuarios pueden simplemente haga clic en el número de página o el botón personalizado y la página correspondiente se muestra. En algunas aplicaciones, el usuario desea conservar el estado de los controles de paginación especialmente durante el control de casilla de verificación. En este artículo vamos a demostrar cómo conservar el estado de la casilla de control mientras se pagina el control GridView.

¿Porque hacer persistente el estado de selección de los CheckBox durante la búsqueda?

Hay muchos escenarios donde esto puede ser un requisito fundamental. Considere una situación en la que un usuario tiene que seleccionar varios usuarios de una lista de 100 usuarios. La lista se muestra con un control GridView con la paginación habilitado. Si no hay ninguna opción para conservar el estado de las filas seleccionadas, el usuario nunca será capaz de buscar a mano varios usuarios del control GridView.    

1. Rellenar el control GridView: 

Nuestra primera tarea es llenar el control GridView. Se puede realizar esto de muchas maneras diferentes. Hemos utilizado LINQ to SQL como fuente de datos y la va a utilizar para rellenar el control GridView. El código HTML para el control GridView se muestra a continuación:

01
 <asp:GridView ID="gvCustomers" PageSize="5" AllowPaging="true" 

OnPageIndexChanging="gvCustomersPageChanging" runat="server" 

AutoGenerateColumns="false">




02
     




03
    <Columns>




04
     




05
    <asp:TemplateField>




06
    <ItemTemplate>




07
    <asp:CheckBox ID="chkSelect" runat="server" />




08
    </ItemTemplate>




09
    </asp:TemplateField>




10
     




11
    <asp:TemplateField HeaderText="First Name">




12
    <ItemTemplate>




13
    <%# Eval("FirstName") %>




14
    </ItemTemplate>




15
    </asp:TemplateField>




16
     




17
     <asp:TemplateField HeaderText="Last Name">




18
    <ItemTemplate>




19
    <%# Eval("LastName") %>




20
    </ItemTemplate>




21
    </asp:TemplateField>




22
     




23
    </Columns>




24
     




25
    </asp:GridView>

Observe que la primera columna es una columna TemplateField que contiene el control de casilla de verificación. La localización también está habilitada en el control GridView estableciendo la propiedad AllowPaging a "true".

El código del lado del servidor que rellena el control GridView se muestra a continuación:

private void BindData()

2

{

3	using(var db = new NorthwindDataContext())

4

{

5	gvCustomers.DataSource = from c in db.Customers

6

select c;

7	gvCustomers.DataBind();

8

}

9

}

Ejecute la aplicación y podrás ver una salida similar: 

Todavía no hemos implementado el código de paginación GridView. Vamos a hacer eso para que podamos ir a través de las distintas páginas del control GridView.

1	protected void gvCustomersPageChanging(object sender, GridViewPageEventArgs e)

2

{

3

4	gvCustomers.PageIndex = e.NewPageIndex;

5	BindData();

6

}

Ahora ejecute de nuevo la página y haga clic en el número de la página que muestra el GridView. 


Si selecciona cualquier casilla y pasar a otra página te darás cuenta de que la casilla de selección está desactivada cuando regreses a la página original. La razón principal es que cada vez un número de página se hace clic en GridView se enlaza de nuevo a la fuente y nuestra selección pierde. Necesitamos una manera de almacenar nuestra selección y luego, después de la GridView se enlaza a la fuente de repoblar las casillas seleccionadas.  

Selección CheckBox persistente:

Hay muchos lugares para almacenar la casilla seleccionada, pero probablemente lo mejor es ViewState. La razón es que durante la búsqueda de la página se solicita la misma varias veces. ViewState es capaz de mantener el estado de un objeto en la misma página. El mejor lugar para empezar es en el interior del evento paginación GridView. Nuestro objetivo es retrive el índice casilla fila seleccionada y la tienda que en el diccionario de ViewState. Aquí está la actualización gvCustomersPageChanging evento: