Tri, pagination et filtrage des données avec la liaison de modèle et les formulaires web

par Tom FitzMacken

Cette série de tutoriels présente les aspects de base de l’utilisation de la liaison de modèle avec un projet ASP.NET Web Forms. La liaison de modèle rend l’interaction des données plus simple que la gestion des objets sources de données (par exemple, ObjectDataSource ou SqlDataSource). Cette série commence par des documents d’introduction et passe à des concepts plus avancés dans les didacticiels ultérieurs.

Ce tutoriel montre comment ajouter le tri, la pagination et le filtrage des données via la liaison de modèle.

Ce tutoriel s’appuie sur le projet créé dans la première partie de la série.

Vous pouvez télécharger le projet complet en C# ou VB. Le code téléchargeable fonctionne avec Visual Studio 2012 ou Visual Studio 2013. Il utilise le modèle Visual Studio 2012, qui est légèrement différent du modèle Visual Studio 2013 présenté dans ce tutoriel.

Ce que vous allez créer

Dans ce didacticiel, vous allez :

1. Activer le tri et la pagination des données
2. Activer le filtrage des données en fonction d’une sélection par l’utilisateur

Ajouter la fonctionnalité de tri

L’activation du tri dans GridView est très simple. Dans le fichier Student.aspx, définissez simplement AllowSorting sur true dans GridView. Vous n’avez pas besoin de définir une valeur SortExpression pour chaque colonne, car dataField est automatiquement utilisé. GridView modifie la requête pour inclure le classement des données en fonction de la valeur sélectionnée. Le code mis en surbrillance ci-dessous montre l’ajout que vous devez effectuer pour activer le tri.

<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>

Exécutez l’application web et testez le tri des enregistrements des étudiants en fonction des valeurs de différentes colonnes.

Ajouter la fonctionnalité de pagination

L’activation de la pagination est également très facile. Dans GridView, définissez la propriété AllowPaging sur true et définissez la propriété PageSize sur le nombre d’enregistrements que vous souhaitez afficher sur chaque page. Dans ce tutoriel, vous pouvez le définir sur 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">

Exécutez l’application web et notez que maintenant les enregistrements sont divisés en plusieurs pages avec pas plus de 4 enregistrements affichés sur une seule page.

L’exécution différée des requêtes améliore l’efficacité de l’application. Au lieu de récupérer l’ensemble du jeu de données, GridView modifie la requête pour récupérer uniquement les enregistrements de la page active.

Filtrer les enregistrements par sélection de l’utilisateur

La liaison de modèle ajoute plusieurs attributs qui vous permettent de désigner comment définir la valeur d’un paramètre dans une méthode de liaison de modèle. Ces attributs se trouvent dans l’espace de noms System.Web.ModelBinding . Notamment :

• Control
• Cookie
• Formulaire
• Profil
• QueryString
• Routedata
• session
• UserProfile
• ViewState

Dans ce tutoriel, vous allez utiliser la valeur d’un contrôle pour filtrer les enregistrements affichés dans GridView. Vous allez ajouter l’attribut Control à la méthode de requête que vous avez créée précédemment. Dans un didacticiel ultérieur , vous allez appliquer l’attribut QueryString à un paramètre pour spécifier que la valeur du paramètre provient d’une valeur de chaîne de requête.

Tout d’abord, au-dessus de ValidationSummary, ajoutez une liste déroulante pour filtrer les étudiants qui s’affichent.

<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"/>

Dans le fichier code-behind, modifiez la méthode select pour recevoir une valeur du contrôle et définissez le nom du paramètre sur le nom du contrôle qui fournit la valeur.

Vous devez ajouter une instruction using pour l’espace de noms System.Web.ModelBinding afin de résoudre l’attribut Control.

using System.Web.ModelBinding;

Le code suivant montre la méthode select re-travaillée pour filtrer les données retournées en fonction de la valeur de la liste déroulante. Ajout d’un attribut de contrôle avant qu’un paramètre spécifie que la valeur de ce paramètre provient d’un contrôle portant le même nom.

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;    
}

Exécutez l’application web et sélectionnez différentes valeurs dans la liste déroulante pour filtrer la liste des étudiants.

Conclusion

Dans ce tutoriel, vous avez activé le tri et la pagination des données. Vous avez également activé le filtrage des données en fonction de la valeur d’un contrôle.

Dans le tutoriel suivant, vous allez améliorer l’interface utilisateur en intégrant un widget d’interface utilisateur JQuery dans le modèle de données dynamiques.

PrécédentSuivant