Paginación en un control de servidor Web FormView

Artículo
10/22/2014

Actualización: noviembre 2007

El control FormView 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 FormView, una página de datos es un registro enlazado único.

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

El control FormView admite la paginación de los elementos en su origen de datos. Para habilitar la función de paginación, puede establecer la propiedad AllowPaging en true.

Si el control FormView 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 FormView repite el proceso, mostrando un registro diferente.

Nota:
Si el origen de datos no implementa la interfaz ICollection, el control FormView no puede paginar. Por ejemplo, si está utilizando un control SqlDataSource y ha establecido su propiedad DataSourceMode en DataReader, el control FormView 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 FormView 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 FormView 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 FormView cuando establece la propiedad AllowPaging en true. El control FormView 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 FormView se establece en una clase PagerSettings. Para personalizar el modo de paginación, puede establecer la propiedad Mode del control FormView 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:

FormView1.PagerSettings.Mode = PagerButtons.NextPreviousFirstLast

Los modos disponibles son:

Apariencia del control de paginación

El control FormView 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 FormView 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 FormView en TableItemStyle.

Plantilla de paginación de los datos

Si establece la propiedad AllowPaging del control FormView en true, el control FormView 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 FormView 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>FormView Example</title>
</head>
<body>
    <form id="form1" >
      <h3>FormView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:FormView ID="ProductsFormView"
                DataSourceID="ProductsSqlDataSource"
                AllowPaging="true"
                >

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

                <ItemTemplate>
                  <table>
                    <tr>
                      <td align="right"><b>Product ID:</b></td>
                      <td><asp:Label id="ProductIDLabel"  Text='<%# Eval("ProductID") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Product Name:</b></td>
                      <td><asp:Label id="ProductNameLabel"  Text='<%# Eval("ProductName") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Category ID:</b></td>
                      <td><asp:Label id="CategoryIDLabel"  Text='<%# Eval("CategoryID") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Quantity Per Unit:</b></td>
                      <td><asp:Label id="QuantityPerUnitLabel"  Text='<%# Eval("QuantityPerUnit") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Unit Price:</b></td>
                      <td><asp:Label id="UnitPriceLabel"  Text='<%# Eval("UnitPrice") %>' /></td>
                    </tr>
                  </table>                 
                </ItemTemplate>

                <PagerTemplate>
                  <table>
                    <tr>
                      <td><asp:LinkButton ID="FirstButton" CommandName="Page" CommandArgument="First" Text="<<" RunAt="server"/></td>
                      <td><asp:LinkButton ID="PrevButton"  CommandName="Page" CommandArgument="Prev"  Text="<"  RunAt="server"/></td>
                      <td><asp:LinkButton ID="NextButton"  CommandName="Page" CommandArgument="Next"  Text=">"  RunAt="server"/></td>
                      <td><asp:LinkButton ID="LastButton"  CommandName="Page" CommandArgument="Last"  Text=">>" RunAt="server"/></td>
                    </tr>
                  </table>
                </PagerTemplate>

              </asp:FormView>

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

        <asp:SqlDataSource ID="ProductsSqlDataSource" 
          SelectCommand="SELECT * FROM [Products]" 
          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>FormView Example</title>
</head>
<body>
    <form id="form1" >
      <h3>FormView Example</h3>
        <table cellspacing="10"> 
          <tr>               
            <td valign="top">

              <asp:FormView ID="ProductsFormView"
                DataSourceID="ProductsSqlDataSource"
                AllowPaging="true"
                >

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

                <ItemTemplate>
                  <table>
                    <tr>
                      <td align="right"><b>Product ID:</b></td>
                      <td><asp:Label id="ProductIDLabel"  Text='<%# Eval("ProductID") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Product Name:</b></td>
                      <td><asp:Label id="ProductNameLabel"  Text='<%# Eval("ProductName") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Category ID:</b></td>
                      <td><asp:Label id="CategoryIDLabel"  Text='<%# Eval("CategoryID") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Quantity Per Unit:</b></td>
                      <td><asp:Label id="QuantityPerUnitLabel"  Text='<%# Eval("QuantityPerUnit") %>' /></td>
                    </tr>
                    <tr>
                      <td align="right"><b>Unit Price:</b></td>
                      <td><asp:Label id="UnitPriceLabel"  Text='<%# Eval("UnitPrice") %>' /></td>
                    </tr>
                  </table>                 
                </ItemTemplate>

                <PagerTemplate>
                  <table>
                    <tr>
                      <td><asp:LinkButton ID="FirstButton" CommandName="Page" CommandArgument="First" Text="<<" RunAt="server"/></td>
                      <td><asp:LinkButton ID="PrevButton"  CommandName="Page" CommandArgument="Prev"  Text="<"  RunAt="server"/></td>
                      <td><asp:LinkButton ID="NextButton"  CommandName="Page" CommandArgument="Next"  Text=">"  RunAt="server"/></td>
                      <td><asp:LinkButton ID="LastButton"  CommandName="Page" CommandArgument="Last"  Text=">>" RunAt="server"/></td>
                    </tr>
                  </table>
                </PagerTemplate>

              </asp:FormView>

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

        <asp:SqlDataSource ID="ProductsSqlDataSource" 
          SelectCommand="SELECT ProductID, ProductName, CategoryID, QuantityPerUnit, UnitPrice FROM [Products]" 
          connectionstring="<%$ ConnectionStrings:NorthwindConnection %>" 
          RunAt="server"/>

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

Vea también

Conceptos

Información general sobre FormView (Control de servidor Web)

Compartir a través de