Paginación en un control de servidor Web DetailsView

Artículo
10/22/2014

Actualización: noviembre 2007

El control DetailsView de ASP.NET tiene una compatibilidad integrada que permite a los usuarios paginar los registros de uno en uno. El control también permite personalizar la interfaz de usuario de paginación. En el control DetailsView, una página de datos es un registro enlazado único.

Cómo funciona la paginación en el control DetailsView

El control DetailsView admite la paginación de los registros en su origen de datos. Para habilitar la función de paginación, establezca la propiedad AllowPaging en true.

Si el control DetailsView está enlazado con un control del origen de datos o con cualquier estructura de datos que implemente la interfaz ICollection (incluidos los conjuntos de datos), el control recibe todos los registros del origen de datos, muestra el registro de la página actual y descarta el resto. Cuando el usuario se desplaza a otra página, el control DetailsView repite el proceso, mostrando un registro diferente.

Nota:
Si el origen de datos no implementa la interfaz ICollection, el control DetailsView no puede paginar. Por ejemplo, si está utilizando un control SqlDataSource y ha establecido su propiedad DataSourceMode en DataReader, el control DetailsView no puede implementar la paginación.

Algunos orígenes de datos, como el control ObjectDataSource, proporcionan funciones de paginación más avanzadas. En estos casos, el control DetailsView aprovecha las funciones más avanzadas del origen de datos para mejorar el rendimiento y la flexibilidad en la paginación.

Personalizar la configuración de paginación y la interfaz de usuario

Puede personalizar la interfaz de usuario de paginación del control DetailsView de varias maneras.

Modos de paginación

La propiedad PagerSettings le permite personalizar el aspecto de la interfaz de usuario de paginación generada por el control DetailsView cuando establece la propiedad AllowPaging en true. El control DetailsView puede mostrar controles de dirección que permiten desplazarse hacia delante y hacia atrás, así como controles numéricos que permiten el desplazamiento del usuario a una página determinada.

La propiedad PagerSettings del control DetailsView se establece en una clase PagerSettings. Para personalizar el modo de paginación, puede establecer la propiedad Mode del control DetailsView en un valor PagerButtons. Por ejemplo, para personalizar el modo de la interfaz de usuario de paginación, puede definirlo como se muestra a continuación:

DetailsView1.PagerSettings.Mode = PagerButtons.NextPreviousFirstLast

Los modos disponibles son:

Apariencia del control de paginación

El control DetailsView tiene numerosas propiedades que se pueden utilizar para personalizar el texto y las imágenes en modos de paginación diferentes. Por ejemplo, si establece el modo de paginación de un control DetailsView en NextPrevious y desea personalizar el texto que se muestra, puede establecer las propiedades NextPageText y PreviousPageText en los valores que desee. De forma predeterminada, las propiedades PreviousPageText y NextPageText se establecen en "<" y ">", respectivamente.

También puede utilizar imágenes para personalizar el aspecto de los controles de paginación. La clase PagerSettings incluye las propiedades de la dirección URL de la imagen en los botones de comando de primera página, última página, página anterior y página siguiente.

Por último, puede controlar el aspecto de los comandos de paginación estableciendo la propiedad PagerStyle del control DetailsView en TableItemStyle.

Plantilla de paginación de los datos

Si establece la propiedad AllowPaging del control DetailsView en true, el control DetailsView automáticamente agrega controles de interfaz de usuario para la función de paginación. Puede personalizar la interfaz de usuario para la función de paginación agregando una plantilla PagerTemplate. Para especificar qué operación de paginación va a realizar, agregue un control Button a la plantilla y, a continuación, establezca su propiedad CommandName en Page y su propiedad CommandArgument en uno de los valores siguientes:

First para desplazarse a la primera página.
Last para desplazarse a la última página.
Prev para desplazarse a la página anterior.
Next para desplazarse a la página siguiente de datos.
Número para indicar una página específica.

El ejemplo de código siguiente incluye un control DetailsView configurado para proporcionar la función de paginación.

<%@ Page language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head >
    <title>DetailsView Example</title>
</head>
<body>
    <form id="form1" >
      <h3>DetailsView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:DetailsView ID="EmployeesDetailsView"
                DataSourceID="EmployeesSqlDataSource"
                AutoGenerateRows="false"
                AllowPaging="true"
                DataKeyNames="EmployeeID"     
                >

                <HeaderStyle forecolor="white" backcolor="Blue" />                

                <Fields>
                  <asp:BoundField Datafield="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
                  <asp:BoundField Datafield="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField Datafield="LastName"   HeaderText="Last Name"/>                    
                </Fields>

                <PagerSettings Mode="NextPreviousFirstLast"
                               FirstPageText="<<"
                               LastPageText=">>"
                               PageButtonCount="1"  
                               Position="Top"/> 
              </asp:DetailsView>

            </td>
          </tr>
        </table>

        <asp:SqlDataSource ID="EmployeesSqlDataSource" 
          SelectCommand="SELECT * FROM [Employees]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

      </form>
  </body>
</html>

<%@ Page language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head >
    <title>DetailsView Example</title>
</head>
<body>
    <form id="form1" >
      <h3>DetailsView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:DetailsView ID="EmployeesDetailsView"
                DataSourceID="EmployeesSqlDataSource"
                AutoGenerateRows="false"
                AllowPaging="true"
                DataKeyNames="EmployeeID"     
                >

                <HeaderStyle forecolor="white" backcolor="Blue" />                

                <Fields>
                  <asp:BoundField Datafield="EmployeeID" HeaderText="Employee ID" ReadOnly="true"/>                    
                  <asp:BoundField Datafield="FirstName"  HeaderText="First Name"/>
                  <asp:BoundField Datafield="LastName"   HeaderText="Last Name"/>                    
                </Fields>

                <PagerSettings Mode="NextPreviousFirstLast"
                               FirstPageText="<<"
                               LastPageText=">>"
                               PageButtonCount="1"  
                               Position="Top"/> 
              </asp:DetailsView>

            </td>
          </tr>
        </table>

        <asp:SqlDataSource ID="EmployeesSqlDataSource" 
          SelectCommand="SELECT * FROM [Employees]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

      </form>
  </body>
</html>

Vea también

Otros recursos

DetailsView (Control de servidor Web)