Compartir a través de

Paginar y ordenar datos de informes (VB)

de Scott Mitchell

Descargar PDF

La paginación y la ordenación son dos características muy comunes al mostrar datos en una aplicación en línea. En este tutorial, daremos un primer vistazo a cómo añadir la ordenación y paginación a nuestros informes, sobre lo cual seguiremos trabajando en futuros tutoriales.

Introducción

La paginación y la ordenación son dos características muy comunes al mostrar datos en una aplicación en línea. Por ejemplo, al buscar libros sobre ASP.NET en una librería en línea, puede haber cientos de libros de este tipo, pero en el informe que enumera los resultados de la búsqueda solo se muestran diez coincidencias por página. Además, los resultados se pueden ordenar por título, precio, número de páginas, nombre del autor, etc. Aunque los últimos 23 tutoriales han examinado cómo crear una variedad de informes, incluidas las interfaces que permiten agregar, editar y eliminar datos, no hemos examinado cómo ordenar datos y los únicos ejemplos de paginación que hemos visto han sido con los controles DetailsView y FormView.

En este tutorial veremos cómo agregar ordenación y paginación a nuestros informes, lo que se puede lograr simplemente marcando algunas casillas. Desafortunadamente, esta implementación simplista tiene sus inconvenientes, la interfaz de ordenación deja un poco de ser deseada y las rutinas de paginación no están diseñadas para paginar eficazmente a través de grandes conjuntos de resultados. Los tutoriales futuros explorarán cómo superar las limitaciones de las soluciones de paginación y ordenación integradas.

Paso 1: Adición de las páginas web del tutorial de paginación y ordenación

Antes de comenzar este tutorial, vamos a tardar un momento en agregar las páginas de ASP.NET que necesitaremos para este tutorial y las tres siguientes. Para empezar, cree una carpeta en el proyecto con el nombre PagingAndSorting. A continuación, agregue las cinco páginas ASP.NET siguientes a esta carpeta, todas ellas configuradas para usar la página maestra Site.master:

  • Default.aspx
  • SimplePagingSorting.aspx
  • EfficientPaging.aspx
  • SortParameter.aspx
  • CustomSortingUI.aspx

Crear una carpeta PagingAndSorting y agregar las páginas del tutorial ASP.NET

Figura 1: Crear una carpeta PagingAndSorting y Agregar el tutorial ASP.NET Pages

A continuación, abra la página Default.aspx y arrastre el Control de usuario SectionLevelTutorialListing.ascx desde la carpeta UserControls a la superficie Diseño. Este control de usuario, que creamos en el tutorial páginas maestras y navegación del sitio , enumera el mapa del sitio y muestra esos tutoriales en la sección actual de una lista con viñetas.

Agregue el control de usuario SectionLevelTutorialListing.ascx a Default.aspx

Figura 2: Agregar el control de usuario SectionLevelTutorialListing.ascx a Default.aspx

Para que la lista con viñetas muestre los tutoriales de paginación y ordenación que se van a crear, es necesario agregarlos al mapa del sitio. Abra el Web.sitemap archivo y agregue el marcado siguiente después del marcado editar, insertar y eliminar el nodo de mapa del sitio:

<siteMapNode title="Paging and Sorting" url="~/PagingAndSorting/Default.aspx"
    description="Samples of Reports that Provide Paging and Sorting Capabilities">
    <siteMapNode url="~/PagingAndSorting/SimplePagingSorting.aspx"
        title="Simple Paging & Sorting Examples"
        description="Examines how to add simple paging and sorting support." />
    <siteMapNode url="~/PagingAndSorting/EfficientPaging.aspx"
        title="Efficiently Paging Through Large Result Sets"
        description="Learn how to efficiently page through large result sets." />
    <siteMapNode url="~/PagingAndSorting/SortParameter.aspx"
        title="Sorting Data at the BLL or DAL"
        description="Illustrates how to perform sorting logic in the Business Logic
        Layer or Data Access Layer." />
    <siteMapNode url="~/PagingAndSorting/CustomSortingUI.aspx"
        title="Customizing the Sorting User Interface"
        description="Learn how to customize and improve the sorting user interface." />
</siteMapNode>

Actualizar el mapa del sitio para incluir las nuevas páginas de ASP.NET

Figura 3: Actualizar el mapa del sitio para incluir las nuevas páginas de ASP.NET

Paso 2: Mostrar información del producto en gridView

Antes de implementar funcionalidades de paginación y ordenación, primero vamos a crear una clase GridView no clasificable y no paginable estándar que muestra la información del producto. Esta es una tarea que hemos realizado muchas veces antes en esta serie de tutoriales, por lo que estos pasos deben estar familiarizados. Comience abriendo la SimplePagingSorting.aspx página y arrastrando un control GridView desde el Cuadro de Herramientas hasta el Diseñador, estableciendo la propiedad ID a Products. A continuación, cree un objeto ObjectDataSource que use el método s GetProducts() de la clase ProductsBLL para devolver toda la información del producto.

Recuperar información sobre todos los productos mediante el método GetProducts()

Figura 4: Recuperar información sobre todos los productos mediante el método GetProducts()

Dado que este informe es un informe de solo lectura, no es necesario asignar los métodos ObjectDataSource s Insert(), Update()o Delete() a los métodos correspondientes ProductsBLL ; por lo tanto, elija (Ninguno) en la lista desplegable para las pestañas UPDATE, INSERT y DELETE.

Elija la opción (Ninguno) en la lista de Drop-Down en las pestañas UPDATE, INSERT y DELETE.

Figura 5: Elegir la opción (Ninguno) en la lista de Drop-Down en las pestañas UPDATE, INSERT y DELETE

A continuación, vamos a personalizar los campos de GridView para que solo se muestren los nombres de productos, proveedores, categorías, precios y estados discontinuos. Además, no dude en realizar cualquier cambio de formato de nivel de campo, como ajustar las HeaderText propiedades o dar formato al precio como moneda. Después de estos cambios, el marcado declarativo de GridView debe ser similar al siguiente:

<asp:GridView ID="Products" AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            SortExpression="CategoryName" ReadOnly="True" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            SortExpression="SupplierName" ReadOnly="True" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

En la figura 6 se muestra nuestro progreso hasta ahora cuando se ve en un explorador. Tenga en cuenta que la página muestra todos los productos en una pantalla, mostrando cada nombre de producto, categoría, proveedor, precio y estado descontinuado.

Cada uno de los productos se enumera

Figura 6: Cada uno de los productos aparece en la lista (haga clic para ver la imagen de tamaño completo)

Paso 3: Agregar soporte de paginación

Enumerar todos los productos en una pantalla puede provocar una sobrecarga de información para el usuario que examina los datos. Para ayudar a que los resultados sean más fáciles de administrar, podemos dividir los datos en páginas más pequeñas de datos y permitir que el usuario recorra los datos una página cada vez. Para ello, simplemente active la casilla Habilitar paginación de la etiqueta inteligente gridView (esto establece la propiedad GridView s AllowPaging en true).

Marque la casilla Habilitar paginación para agregar soporte para paginación.

Figura 7: Active la casilla Habilitar paginación para agregar compatibilidad con paginación (haga clic para ver la imagen de tamaño completo)

Habilitar la paginación limita el número de registros mostrados por página y agrega una interfaz de paginación a GridView. La interfaz de paginación predeterminada, que se muestra en la figura 7, es una serie de números de página, lo que permite al usuario navegar rápidamente de una página de datos a otra. Esta interfaz de paginación debe ser familiar, como hemos visto al agregar compatibilidad de paginación a los controles DetailsView y FormView en los tutoriales anteriores.

Los controles DetailsView y FormView solo muestran un único registro por página. Sin embargo, GridView consulta su PageSize propiedad para determinar cuántos registros se van a mostrar por página (esta propiedad tiene como valor predeterminado un valor de 10).

Esta interfaz de paginación de GridView, DetailsView y FormView se puede personalizar mediante las siguientes propiedades:

  • PagerStyle indica la información de estilo de la interfaz de paginación; puede especificar valores como BackColor, ForeColor, CssClass, HorizontalAlignetc.

  • PagerSettings contiene una bevy de propiedades que pueden personalizar la funcionalidad de la interfaz de paginación; PageButtonCount indica el número máximo de números de página numéricos mostrados en la interfaz de paginación (el valor predeterminado es 10); la Mode propiedad indica cómo funciona la interfaz de paginación y se puede establecer en:

    • NextPrevious muestra los botones Siguiente y Anterior, lo que permite al usuario avanzar o retroceder una página a la vez
    • NextPreviousFirstLast además de los botones Siguiente y Anterior, también se incluyen los botones First y Last, lo que permite al usuario pasar rápidamente a la primera o última página de datos.
    • Numeric muestra una serie de números de página, lo que permite al usuario saltar inmediatamente a cualquier página.
    • NumericFirstLast además de los números de página, incluye los botones First y Last, lo que permite al usuario pasar rápidamente a la primera o última página de datos; Los botones First/Last solo se muestran si todos los números de página numéricos no se pueden ajustar

Además, GridView, DetailsView y FormView ofrecen las PageIndex propiedades y PageCount , que indican la página actual que se está viendo y el número total de páginas de datos, respectivamente. La PageIndex propiedad se indexa a partir de 0, lo que significa que al ver la primera página de datos PageIndex será igual a 0. PageCountPor otro lado, comienza a contar en 1, lo que significa que PageIndex se limita a los valores entre 0 y PageCount - 1.

Dediquemos un momento a mejorar la apariencia predeterminada de nuestra interfaz de paginación de GridView. En concreto, vamos a tener la interfaz de paginación alineada a la derecha con un fondo gris claro. En lugar de establecer estas propiedades directamente mediante la propiedad PagerStyle del GridView, vamos a crear una clase CSS llamada Styles.css en PagerRowStyle y luego asignar la propiedad PagerStyle de CssClass a través de nuestro Tema. Comience abriendo Styles.css y agregando la siguiente definición de clase CSS:

.PagerRowStyle
{
    background-color: #ddd;
    text-align: right;
}

A continuación, abra el GridView.skin archivo en la DataWebControls carpeta dentro de la App_Themes carpeta . Como se describe en el tutorial páginas maestras y navegación del sitio , los archivos skin se pueden usar para especificar los valores de propiedad predeterminados para un control web. Por lo tanto, amplíe la configuración existente para incluir la propiedad PagerStyle s CssClass en PagerRowStyle. Además, vamos a configurar la interfaz de paginación para mostrar como máximo cinco botones numéricos de página mediante la NumericFirstLast interfaz de paginación.

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
   <PagerStyle CssClass="PagerRowStyle" />
   <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

Experiencia del usuario de paginación

La figura 8 muestra la página web cuando se visita desde un navegador después de activar la casilla Habilitar paginación de GridView y las configuraciones PagerStyle y PagerSettings se han realizado a través del archivo GridView.skin. Observe cómo solo se muestran diez registros y la interfaz de paginación indica que estamos viendo la primera página de datos.

Con la paginación habilitada, solo se muestra un subconjunto de los registros a la vez.

Figura 8: Con la paginación habilitada, solo se muestra un subconjunto de los registros a la vez (haga clic para ver la imagen de tamaño completo).

Cuando el usuario hace clic en uno de los números de página de la interfaz de paginación, se produce un postback y la página se vuelve a cargar mostrando los registros de la página solicitada. En la figura 9 se muestran los resultados después de optar por ver la página final de los datos. Observe que la página final solo tiene un registro; esto se debe a que hay 81 registros en total, lo que da como resultado ocho páginas de 10 registros por página más una página con un registro solitario.

Al hacer clic en un número de página, se produce un postback y se muestra el subconjunto adecuado de registros.

Figura 9: Al hacer clic en un número de página, se produce un postback y se muestra el subconjunto adecuado de registros (haga clic para ver la imagen de tamaño completo)

Flujo de trabajo de paginación de Server-Side

Cuando el usuario final hace clic en un botón de la interfaz de paginación, se produce un postback y comienza el siguiente flujo de trabajo del lado del servidor:

  1. Se desencadena el evento GridView s (o DetailsView o FormView) PageIndexChanging
  2. ObjectDataSource vuelve a solicitar todos los datos del BLL; los valores de las propiedades PageIndex y PageSize del GridView se usan para determinar qué registros devueltos de la BLL deben mostrarse en el GridView.
  3. El evento PageIndexChanged de GridView se desencadena

En el paso 2, ObjectDataSource vuelve a solicitar todos los datos de su origen de datos. Este estilo de paginación se conoce normalmente como paginación predeterminada, ya que es el comportamiento de paginación usado de forma predeterminada al establecer la propiedad AllowPaging a true. Con la paginación predeterminada, el control web de datos recupera de forma ingenua todos los registros de cada página de datos, aunque solo un subconjunto de registros se represente realmente en el HTML que se envía al explorador. A menos que BLL o ObjectDataSource almacenen en caché los datos de la base de datos, la paginación predeterminada no se puede trabajar para conjuntos de resultados suficientemente grandes o para aplicaciones web con muchos usuarios simultáneos.

En el siguiente tutorial examinaremos cómo implementar la paginación personalizada. Con la paginación personalizada, puede indicar específicamente a ObjectDataSource que solo recupere el conjunto preciso de registros necesarios para la página de datos solicitada. Como puede imaginar, la paginación personalizada mejora considerablemente la eficacia de la paginación a través de grandes conjuntos de resultados.

Nota:

Aunque la paginación predeterminada no es adecuada al paginar a través de conjuntos de resultados suficientemente grandes o para sitios con muchos usuarios simultáneos, tenga en cuenta que la paginación personalizada requiere más cambios y esfuerzo para implementar y no es tan simple como marcar una casilla (como es la paginación predeterminada). Por lo tanto, la paginación predeterminada puede ser la opción ideal para sitios web pequeños y de poco tráfico o al paginar a través de conjuntos de resultados relativamente pequeños, ya que es mucho más fácil y rápido de implementar.

Por ejemplo, si sabemos que nunca tendremos más de 100 productos en nuestra base de datos, es probable que el esfuerzo necesario para implementarlo sea compensado por el mínimo aumento de rendimiento que ofrece la paginación personalizada. Sin embargo, si es posible que un día tengamos miles o decenas de miles de productos, no implementar la paginación personalizada dificultaría considerablemente la escalabilidad de nuestra aplicación.

Paso 4: Personalizar la experiencia de paginación

Los controles web de datos proporcionan una serie de propiedades que se pueden usar para mejorar la experiencia de paginación del usuario. La PageCount propiedad, por ejemplo, indica cuántas páginas totales hay, mientras que la PageIndex propiedad indica la página actual que se está visitando y se puede establecer para mover rápidamente un usuario a una página específica. Para ilustrar cómo usar estas propiedades para mejorar la experiencia de paginación del usuario, vamos a agregar un control Web label a nuestra página que informa al usuario de qué página está visitando actualmente, junto con un control DropDownList que les permite saltar rápidamente a cualquier página determinada.

En primer lugar, agregue un control Web Label a la página, establezca su propiedad ID a PagingInformation y borre su propiedad Text. A continuación, cree un controlador de eventos para el evento de GridView DataBound y agregue el código siguiente.

Protected Sub Products_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Products.DataBound
    PagingInformation.Text = String.Format("You are viewing page {0} of {1}...", _
        Products.PageIndex + 1, Products.PageCount)
End Sub

Este controlador de eventos asigna la PagingInformation propiedad Label s Text a un mensaje que informa al usuario de la página que está visitando Products.PageIndex + 1 actualmente de cuántas páginas Products.PageCount totales (agregamos 1 a la Products.PageIndex propiedad porque PageIndex se indexa a partir de 0). Elegí la asignación de esta propiedad Label s Text en el DataBound controlador de eventos en lugar del PageIndexChanged controlador de eventos porque el evento se desencadena cada vez que los DataBound datos están enlazados a GridView, mientras que el PageIndexChanged controlador de eventos solo se activa cuando se cambia el índice de página. Cuando GridView está inicialmente vinculado a datos en la primera visita de la página, el evento PageIndexChanging no se desencadena (mientras que, el evento DataBound sí).

Con esta adición, el usuario ahora muestra un mensaje que indica qué página está visitando y cuántas páginas totales de datos hay.

Se muestran el número de página actual y el número total de páginas.

Figura 10: Se muestran el número de página actual y el número total de páginas (haga clic para ver la imagen de tamaño completo).

Además del control Label, vamos a agregar también un control DropDownList que enumera los números de página en GridView con la página actualmente vista seleccionada. La idea aquí es que el usuario pueda saltar rápidamente de la página actual a otra simplemente seleccionando el nuevo índice de página en DropDownList. Empieza agregando un DropDownList al Diseñador, configurando su propiedad ID en PageList y seleccionando la opción Habilitar AutoPostBack desde su cuadro inteligente.

A continuación, vuelva al DataBound controlador de eventos y agregue el código siguiente:

' Clear out all of the items in the DropDownList
PageList.Items.Clear()
' Add a ListItem for each page
For i As Integer = 0 To Products.PageCount - 1
    ' Add the new ListItem
    Dim pageListItem As New ListItem(String.Concat("Page ", i + 1), i.ToString())
    PageList.Items.Add(pageListItem)
    ' select the current item, if needed
    If i = Products.PageIndex Then
        pageListItem.Selected = True
    End If
Next

Este código comienza borrando los elementos de DropDownList PageList . Esto puede parecer superfluo, ya que no se espera que cambie el número de páginas, pero otros usuarios pueden estar usando el sistema simultáneamente, agregando o quitando registros de la Products tabla. Estas inserciones o eliminaciones podrían modificar el número de páginas de datos.

A continuación, debemos volver a crear los números de página y seleccionar automáticamente el número de página que se asigna a la clase GridView PageIndex actual. Esto se logra con un bucle de 0 a PageCount - 1, agregando un nuevo ListItem en cada iteración y estableciendo su Selected propiedad en true si el índice de iteración actual es igual a la propiedad GridView s PageIndex .

Por último, es necesario crear un controlador de eventos para el evento DropDownList SelectedIndexChanged , que se activa cada vez que el usuario elige un elemento diferente de la lista. Para crear este controlador de eventos, simplemente haga doble clic en DropDownList en el Diseñador y agregue el código siguiente:

Protected Sub PageList_SelectedIndexChanged(sender As Object, e As System.EventArgs) _
    Handles PageList.SelectedIndexChanged
        ' Jump to the specified page
        Products.PageIndex = Convert.ToInt32(PageList.SelectedValue)
End Sub

Como se muestra en la figura 11, simplemente cambiar la propiedad del GridView PageIndex provoca que los datos se vuelvan a vincular con el GridView. En el controlador de eventos de GridView DataBound, se selecciona el DropDownList ListItem adecuado.

El usuario se lleva automáticamente a la sexta página al seleccionar la página 6 Drop-Down elemento de lista

Figura 11: El usuario se lleva automáticamente a la sexta página al seleccionar la página 6 Drop-Down elemento de lista (haga clic para ver la imagen de tamaño completo)

Paso 5: Añadir soporte para la ordenación Bi-Directional

Agregar compatibilidad con la ordenación bidireccional es tan simple como agregar compatibilidad con la paginación simplemente compruebe la opción Habilitar ordenación de la etiqueta inteligente gridView s (que establece la propiedad GridView s AllowSorting en true). Esto renderiza cada uno de los encabezados de los campos de GridView como LinkButtons que, al hacer clic en ellos, provocan un postback y devuelven los datos ordenados por la columna clicada en orden ascendente. Al hacer clic en el mismo encabezado LinkButton, se vuelven a ordenar los datos en orden descendente.

Nota:

Si está utilizando una capa de acceso a datos personalizada en lugar de un conjunto de datos tipado, es posible que no tenga una opción para habilitar la clasificación en la etiqueta de acciones inteligentes de GridView. Solo los GridViews enlazados a orígenes de datos que admiten de forma nativa la ordenación tienen esta casilla disponible. El Typed DataSet brinda compatibilidad para ordenación inmediata, ya que la DataTable de ADO.NET proporciona un Sort método que, cuando se invoca, ordena las DataRows de DataTable según los criterios especificados.

Si el DAL no devuelve objetos que admitan de forma nativa la ordenación, deberá configurar el ObjectDataSource para pasar información de ordenación a la Capa de Lógica de Negocios, que puede ordenar los datos o hacer que los datos sean ordenados por el DAL. Exploraremos cómo ordenar los datos en las capas de lógica de negocios y acceso a datos en un tutorial futuro.

Los LinkButtons de ordenación se representan como hipervínculos HTML, cuyos colores actuales (azul para un vínculo no visualizado y un rojo oscuro para un vínculo visitado) se enfrentan al color de fondo de la fila de encabezado. En su lugar, hagamos que todos los enlaces de la fila del encabezado se muestren en blanco, independientemente de si se han visitado o no. Esto se puede lograr agregando lo siguiente a la Styles.css clase :

.HeaderStyle a, .HeaderStyle a:visited
{
    color: White;
}

Esta sintaxis indica que se usa texto blanco al mostrar esos hipervínculos dentro de un elemento que usa la clase HeaderStyle.

Después de esta adición de CSS, al visitar la página a través de un explorador, la pantalla debe ser similar a la figura 12. En concreto, la figura 12 muestra los resultados después de hacer clic en el vínculo de encabezado del campo Precio.

Captura de pantalla de Trabajar con tutoriales de datos en la página Paginación y ordenación simple que muestra los resultados ordenados por la columna Precio en orden ascendente.

Figura 12: Los resultados se han ordenado por unitPrice en orden ascendente (haga clic para ver la imagen de tamaño completo)

Examen del flujo de trabajo de ordenación

Todos los campos GridView boundField, CheckBoxField, TemplateField, etc. tienen una SortExpression propiedad que indica la expresión que se debe usar para ordenar los datos cuando se hace clic en el vínculo de encabezado de ordenación de ese campo. GridView también tiene una propiedad SortExpression. Cuando se hace clic en un LinkButton del encabezado de ordenación, el GridView asigna el valor de ese campo SortExpression a su propiedad SortExpression. A continuación, los datos se vuelven a recuperar de ObjectDataSource y se ordenan según la propiedad GridView s SortExpression . En la lista siguiente se detalla la secuencia de pasos que se muestran cuando un usuario final ordena los datos en una clase GridView:

  1. Se desencadena el evento de ordenación de GridView
  2. La propiedad SortExpression se establece en el del campo cuyo encabezado de ordenación fue clicado en el LinkButton.
  3. ObjectDataSource vuelve a recuperar todos los datos de BLL y, a continuación, ordena los datos mediante GridView s. SortExpression
  4. La propiedad GridView s PageIndex se restablece a 0, lo que significa que al ordenar el usuario se devuelve a la primera página de datos (suponiendo que se ha implementado la compatibilidad de paginación)
  5. El Sortedevento GridView se desencadena

Al igual que con la paginación predeterminada, la opción de ordenación predeterminada vuelve a recuperar todos los registros de la BLL. Cuando se usa la ordenación sin paginación o cuando se usa la ordenación con paginación predeterminada, no hay ninguna manera de eludir este impacto de rendimiento (corto de almacenar en caché los datos de la base de datos). Sin embargo, como veremos en un tutorial futuro, es posible ordenar de forma eficaz los datos al usar la paginación personalizada.

Al enlazar un ObjectDataSource a GridView a través de la lista desplegable de la etiqueta inteligente de GridView, cada campo de GridView tiene automáticamente su propiedad SortExpression asignada al nombre del campo de datos en la clase ProductsRow. Por ejemplo, el ProductName BoundField s SortExpression se establece en ProductName, como se muestra en el siguiente marcado declarativo:

<asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />

Se puede configurar un campo para que no se pueda ordenar borrando su SortExpression propiedad (asignarlo a una cadena vacía). Para ilustrar esto, imagine que no queríamos permitir a nuestros clientes ordenar nuestros productos por precio. La propiedad UnitPrice BoundField SortExpression se puede quitar del marcado declarativo o a través del cuadro de diálogo de campos (al que se puede acceder haciendo clic en el enlace 'Editar columnas' en la etiqueta inteligente de GridView).

Captura de pantalla de la ventana Campos donde está seleccionado el campo Precio y la propiedad SortExpression está resaltada.

Figura 13: Los resultados se han ordenado por unitPrice en orden ascendente

Una vez que la SortExpression propiedad se ha quitado para UnitPrice BoundField, el encabezado se representa como texto en lugar de como un vínculo, lo que impide que los usuarios ordenen los datos por precio.

Al quitar la propiedad SortExpression, los usuarios ya no pueden ordenar los productos por precio

Figura 14: Al quitar la propiedad SortExpression, los usuarios ya no pueden ordenar los productos por precio (haga clic para ver la imagen de tamaño completo)

Ordenación mediante programación de GridView

También puede ordenar el contenido de GridView mediante programación mediante el método GridView sSort. Simplemente pase el valor SortExpression para ordenar por junto con SortDirection (Ascending o Descending), y los datos del GridView se reordenarán.

Imagine que la razón por la que desactivemos la UnitPrice ordenación era porque nos preocupaba que nuestros clientes simplemente compraran solo los productos de menor precio. Sin embargo, queremos animarlos a comprar los productos más caros, por lo que nos gustaría que pudieran ordenar los productos por precio, pero solo del precio más caro al menos.

Para ello, agregue un control Web Button a la página, establezca su propiedad ID en SortPriceDescending, y su propiedad Text en Ordenar por precio. A continuación, cree un controlador de eventos para el evento Button s Click haciendo doble clic en el control Button en el Diseñador. Agregue el código siguiente a este controlador de eventos:

Protected Sub SortPriceDescending_Click(sender As Object, e As System.EventArgs) _
    Handles SortPriceDescending.Click
        'Sort by UnitPrice in descending order
        Products.Sort("UnitPrice", SortDirection.Descending)
End Sub

Al hacer clic en este botón, el usuario vuelve a la primera página con los productos ordenados por precio, de más caro a menos caro (consulte la figura 15).

Hacer clic en el botón ordena los productos del más caro al más barato

Figura 15: Hacer clic en el botón organiza los productos del más caro al menos caro (Haz clic para ver la imagen en tamaño completo)

Resumen

En este tutorial hemos visto cómo implementar funcionalidades de paginación y ordenación predeterminadas, ambas que eran tan fáciles como comprobar una casilla. Cuando un usuario ordena o navega por los datos, se desarrolla un flujo de trabajo similar.

  1. Se produce un postback
  2. El evento de nivel previo del control de datos en la Web se dispara (PageIndexChanging o Sorting)
  3. ObjectDataSource vuelve a recuperar todos los datos.
  4. El control web de datos del evento posterior se desencadena (PageIndexChanged o Sorted)

Aunque la implementación básica de paginación y ordenación es muy fácil, se requiere más esfuerzo para utilizar la paginación personalizada más eficaz o para optimizar la interfaz de paginación y ordenación. Los tutoriales futuros explorarán estos temas.

¡Feliz programación!

Acerca del autor

Scott Mitchell, autor de siete libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, entrenador y escritor. Su último libro es Sams Teach Yourself ASP.NET 2.0 en 24 horas. Se puede contactar con él en mitchell@4GuysFromRolla.com.

Siguiente anterior