Ordenar, paginar y filtrar datos con enlace de modelos y formularios web

Artículo
03/25/2024

En esta serie de tutoriales se muestran aspectos básicos del uso del enlace de modelos con un proyecto de ASP.NET Web Forms. El enlace de modelos hace que la interacción de datos sea más sencilla que tratar con objetos de origen de datos (como ObjectDataSource o SqlDataSource). Esta serie comienza con material introductorio y pasa a conceptos más avanzados en tutoriales posteriores.

En este tutorial se muestra cómo agregar ordenación, paginación y filtrado de los datos a través del enlace de modelos.

Este tutorial se basa en el proyecto creado en la primera parte de la serie.

Puede descargar el proyecto completo en C# o VB. El código descargable funciona con Visual Studio 2012 o Visual Studio 2013. Usa la plantilla de Visual Studio 2012, que es ligeramente diferente de la plantilla de Visual Studio 2013 que se muestra en este tutorial.

Qué va a crear

En este tutorial, hará lo siguiente:

Habilitar la ordenación y el paginación de los datos
Habilitar el filtrado de los datos en función de una selección por parte del usuario

Adición de ordenación

Habilitar la ordenación en GridView es muy fácil. En el archivo Student.aspx, simplemente establezca AllowSorting en true en GridView. No es necesario establecer un valor SortExpression para cada columna, ya que DataField se usa automáticamente. GridView modifica la consulta para incluir la ordenación de los datos por el valor seleccionado. El código resaltado siguiente muestra la adición que debe realizar para habilitar la ordenación.

<asp:GridView runat="server" ID="studentsGrid"
    ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
    SelectMethod="studentsGrid_GetData"
    UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
    AllowSorting="true" 
    AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"  
    AutoGenerateColumns="false">
  <Columns>
    <asp:DynamicField DataField="StudentID" />
    <asp:DynamicField DataField="LastName" />
    <asp:DynamicField DataField="FirstName" />
    <asp:DynamicField DataField="Year" />
    <asp:TemplateField HeaderText="Total Credits">
      <ItemTemplate>
        <asp:Label Text="<%# Item.Enrollments.Sum(en => en.Course.Credits) %>"
            runat="server" />
      </ItemTemplate>
    </asp:TemplateField>        
  </Columns>
</asp:GridView>

Ejecute la aplicación web y pruebe la ordenación de registros de alumnos por los valores de columnas diferentes.

sort students

Adición de paginación

Habilitar la paginación también es muy fácil. En GridView, establezca la propiedad AllowPaging en true y establezca la propiedad PageSize en el número de registros que desea mostrar en cada página. En este tutorial puede establecerlo en 4.

<asp:GridView runat="server" ID="studentsGrid"
    ItemType="ContosoUniversity.Models.Student" DataKeyNames="StudentID"
    SelectMethod="studentsGrid_GetData"
    UpdateMethod="studentsGrid_UpdateItem" DeleteMethod="studentsGrid_DeleteItem"
    AllowSorting="true" AllowPaging="true" PageSize="4"
    AutoGenerateEditButton="true" AutoGenerateDeleteButton="true"  
    AutoGenerateColumns="false">

Ejecute la aplicación web y observe que ahora los registros se dividen en varias páginas sin más de cuatro registros mostrados en una sola página.

add paging

La ejecución diferida de consultas mejora la eficacia de la aplicación. En lugar de recuperar todo el conjunto de datos, GridView modifica la consulta para recuperar solo los registros de la página actual.

Filtrar registros por selección de usuario

El enlace de modelos agrega varios atributos que le permiten designar cómo establecer el valor de un parámetro en un método de enlace de modelos. Estos atributos están en el espacio de nombres System.Web.ModelBinding. Incluyen:

Control
Cookie
Formulario
Perfil
QueryString
RouteData
Sesión
UserProfile
ViewState

En este tutorial usará el valor de un control para filtrar qué registros se muestran en GridView. Agregará el atributo Control al método de consulta que creó anteriormente. En un tutorial posterior, aplicará el atributo QueryString a un parámetro para especificar que el valor del parámetro procede de un valor de cadena de consulta.

En primer lugar, encima de ValidationSummary, agregue una lista desplegable para filtrar qué alumnos se muestran.

<asp:HyperLink runat="server" NavigateUrl="~/AddStudent" Text="Add New Student" />

<br /><br />
<asp:Label runat="server" Text="Show:" />
<asp:DropDownList runat="server" AutoPostBack="true" ID="DisplayYear">
    <asp:ListItem Text="All" Value="" />
    <asp:ListItem Text="Freshman" />
    <asp:ListItem Text="Sophomore" />
    <asp:ListItem Text="Junior" />
    <asp:ListItem Text="Senior" />
</asp:DropDownList>

<asp:ValidationSummary runat="server" ShowModelStateErrors="true"/>

En el archivo de código subyacente, modifique el método Select para recibir un valor del control y establezca el nombre del parámetro en el nombre del control que proporciona el valor.

Debe agregar una instrucción using para el espacio de nombres System.Web.ModelBinding para resolver el atributo Control.

using System.Web.ModelBinding;

El código siguiente muestra el método select reelaborado para filtrar los datos devueltos en función del valor de la lista desplegable. Agregar un atributo de control antes de un parámetro especifica que el valor de este parámetro procede de un control con el mismo nombre.

public IQueryable<Student> studentsGrid_GetData([Control] AcademicYear? displayYear)
{
    SchoolContext db = new SchoolContext();
    var query = db.Students.Include(s => s.Enrollments.Select(e => e.Course));

    if (displayYear != null)
    {
        query = query.Where(s => s.Year == displayYear);   
    }

    return query;    
}

Ejecute la aplicación web y seleccione valores diferentes en la lista desplegable para filtrar la lista de alumnos.

filter students

Conclusión

En este tutorial ha habilitado la ordenación y paginación de los datos. También ha habilitado el filtrado de los datos por el valor de un control.

En el siguiente tutorial mejorará la interfaz de usuario mediante la integración de un widget de JQuery UI en la plantilla de datos dinámica.

Anterior Siguiente