Version anglaise : http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html
Dans cette série, je présenterai certains des contrôles les plus avancés d'Atlas Sys.UI.Data, notamment :
Sys.UI.Data.ListView : Afficher les données de la liste à l'aide du contrôle ASP.NET Atlas ListView
Sys.UI.Data.ItemView : affichez les données individuelles d'une collection à l'aide du contrôle ASP.NET Atlas ItemView
Sys.UI.Data.DataNavigator : utilisez le contrôle ASP.NET Atlas PageNavigator pour implémenter la navigation par pagination côté client
Sys.UI.Data.SortBehavior : à suivre
Sys.UI.Data.XSLTView : à suivre Il s'agit du troisième article : Utilisez le contrôle ASP.NET Atlas PageNavigator pour implémenter la navigation par pagination côté client et placer tous les enregistrements sur une seule page. n'est certainement pas une bonne idée, surtout lorsque vous avez des centaines ou des milliers d'enregistrements. Vos utilisateurs doivent continuer à faire glisser la barre de défilement ou même utiliser Ctrl+F pour trouver le contenu qu'ils recherchent, ce qui entraînera une très mauvaise expérience utilisateur. À l’heure actuelle, il sera beaucoup plus convivial d’afficher les données sous forme de pagination. Certains contrôles côté serveur ASP.NET disposent de fonctionnalités intégrées de pagination et de navigation dans les pages, telles que DataGrid et GridView. De même, le contrôle client Atlas Sys.UI.Data.DataNavigator fournit également des fonctions similaires, ce qui améliorera considérablement notre efficacité de développement.
Le contrôle DataNavigator fonctionnera avec le contrôle DataView (veuillez vous référer à : Introduction au contrôle sous l'espace de noms Atlas Sys.Data - DataView et DataFilter). Nous savons que le contrôle DataView ne fournit pas de méthodes liées à la navigation dans les pages, nous pouvons donc uniquement définir directement sa propriété pageIndex pour implémenter la navigation. Bien que ce ne soit pas difficile, dans de nombreux cas, ce n'est pas une bonne idée, car de nombreux développeurs négligents comme moi oublient souvent de vérifier la valeur limite de pageIndex, provoquant ainsi des problèmes inutiles. C'est l'une des raisons pour lesquelles Atlas fournit le contrôle DataNavigator. Le contrôle DataNavigator servira de proxy pour le contrôle DataView et fournira une interface de navigation de page facile à utiliser.
L'objet DataNavigator n'a qu'un seul attribut :
dataView : une référence à un objet DataView qui lui appliquera l'opération de navigation de page. Vous devez toujours spécifier cette propriété.
De plus, pour utiliser le contrôle DataNavigator, vous devez également fournir à certains boutons Atlas certaines propriétés commandName spécifiées pour déclencher les opérations de navigation dans les pages correspondantes. La propriété parent de ces boutons doit être définie sur ce contrôle DataNavigator pour garantir que DataNavigator peut capturer les commandes émises par ces boutons.
Vous pouvez spécifier l'attribut commandName de votre bouton sous la forme des cinq chaînes suivantes, chacune avec une signification différente :
page : convertit l'index de la page actuelle en la valeur spécifiée dans l'argument de la commande. Avec cette commande, nous pouvons modifier rapidement l'index de la page.
nextpage : Passer à la page suivante (si la page suivante existe).
page précédente : Passer à la page précédente (si une page précédente existe).
firstpage : passer à la première page.
lastpage : passer à la dernière page.
OK, l'introduction ennuyeuse comme MSDN est par ici, familiarisons-nous avec l'utilisation de DataNavigator à travers un exemple.
Nous devons d'abord exposer un service Web afin que la page Atlas puisse l'utiliser. Le service Web renverra 100 enregistrements. Voici le code de ce Web Service, qui est très simple à comprendre et ne sera pas répété ici.
Service Web
utiliser le système ;
en utilisant System.Collections ;
en utilisant System.Collections.Generic ;
en utilisant System.ComponentModel ;
en utilisant System.IO ;
en utilisant System.Web ;
en utilisant System.Web.Caching ;
en utilisant System.Web.Services ;
en utilisant System.Web.Services.Protocols ;
en utilisant Microsoft.Web.Services ;
//
// Par souci de simplicité, cet exemple montre le stockage et la manipulation
// les objets de données en mémoire. Une base de données peut également être utilisée.
//
[WebService (Espace de noms = " http://tempuri.org/ ")]
[WebServiceBinding (ConformsTo = WsiProfiles.BasicProfile1_1)]
classe publique MyDataService : DataService
{
liste statique<Entry> _data ;
objet statique _dataLock = new object();
liste statique privée<Entrée> Données
{
obtenir
{
si (_data == nul)
{
verrouiller(_dataLock)
{
si (_data == nul)
{
_data = new List<Entrée>();
pour (int i = 0; i < 100; i++)
{
_data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format(" Dflying{0}@dflying.net ", i.ToString())));
}
}
}
}
renvoyer _data ;
}
}
[DataObjectMethod(DataObjectMethodType.Select)]
entrée publique[] SelectRows()
{
return MyDataService.Data.ToArray();
}
}
entrée de classe publique
{
chaîne privée _name ;
chaîne privée _email ;
private int _id ;
[DataObjectField (vrai, vrai)]
identifiant public int
{
obtenir { return _id }
définir { _id = valeur }
}
[DataObjectField (faux)]
[DefaultValue("Nouvelle ligne")]
chaîne publique Nom
{
obtenir { return _name }
définir { _nom = valeur }
}
[DataObjectField (faux)]
[Valeur par défaut("")]
chaîne publique Email
{
obtenir {return_email}
définir { _email = valeur }
}
entrée publique()
{
_id = -1 ;
}
entrée publique (identifiant int, nom de chaîne, description de chaîne)
{
_id = identifiant;
_nom = nom ;
_email = description ;
}
}
Ensuite, dans la page ASPX, nous devons considérer et définir les quatre parties suivantes :
un contrôle ScriptManager pour contenir les fichiers de script liés à Atlas Framework nécessaires à la page. En règle générale, c'est ce que chaque page de l'Atlas doit inclure.
Un div d'espace réservé (l'identifiant est dataContents, voir le code). Atlas placera ici le ListView paginé rendu.
Un div (contrôle DataNavigator) en tant que conteneur et un ensemble de boutons (boutons de commande) qu'il contient sont utilisés pour implémenter les fonctions de navigation dans les pages.
Un div caché utilisé pour placer le modèle ListView.
Voici le code des quatre parties ci-dessus. Concernant le modèle du contrôle ListView, veuillez vous référer à mon article : Utilisation du contrôle ASP.NET Atlas ListView pour afficher les données de la liste.
<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- Élément pour ListView paginé (conteneur) -->
<div id="dataContents">
</div>
<!-- PageNavigator -->
<div id="pageNavigator">
<input type="bouton" id="btnFirstPage" value="<<" />
<input type="bouton" id="btnPrevPage" value="<" />
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<input type="bouton" id="btnNextPage" value=">" />
<input type="bouton" id="btnLastPage" value=">>" />
</div>
<!-- Modèles -->
<div style="visibilité : caché ; affichage : aucun">
<table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
<tête>
<tr>
<td><span>Non.</span></td>
<td><span>Nom</span></td>
<td><span>E-mail</span></td>
</tr>
</tête>
<!-- Répéter le modèle -->
<tbody id="myList_itemTemplateParent">
<!-- Répéter le modèle d'élément -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
</tbody>
</table>
<!-- Modèle vide -->
<div id="myList_emptyTemplate">
Aucune donnée
</div>
</div>
Enfin, il est temps d'écrire la définition du script XML pour Atlas, qui comprend les cinq parties suivantes :
Partie 1 : Contrôle client Atlas DataSource, utilisé pour obtenir des données du service Web que nous avons défini ci-dessus.
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
Partie 2 : Un contrôle DataView (veuillez vous référer à : Introduction aux contrôles sous l'espace de noms Atlas Sys.Data - DataView et DataFilter), utilisé pour paginer les 100 données obtenues dans la première partie.
<dataView id="view" pageSize="12">
<liaisons>
<binding dataContext="dataSource" dataPath="data" property="data" />
</liaisons>
</dataView>
Partie 3 : Un contrôle ListView (veuillez vous référer à : Utilisation du contrôle ASP.NET Atlas ListView pour afficher les données de liste), utilisé pour afficher des données paginées.
<listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
<liaisons>
<binding dataContext="view" dataPath="filteredData" property="data"/>
</liaisons>
<modèle de mise en page>
<template layoutElement="myList_layoutTemplate"/>
</layoutTemplate>
<modèle d'élément>
<template layoutElement="myList_itemTemplate">
<ID d'étiquette="lblIndex">
<liaisons>
<binding dataPath="$index" transform="Add" property="text"/>
</liaisons>
</étiquette>
<ID d'étiquette="lblName">
<liaisons>
<binding dataPath="Name" property="text"/>
</liaisons>
</étiquette>
<ID d'étiquette="lblEmail">
<liaisons>
<binding dataPath="Email" property="text"/>
</liaisons>
</étiquette>
</modèle>
</itemTemplate>
<Modèle vide>
<template layoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Partie 4 : Boutons de contrôle et de commande DataNavigator. Notez que nous avons ici quatre boutons, chacun avec un attribut commandName différent, qui correspond également à une opération de DataNavigator sur DataView. Dans le même temps, les propriétés parentes de ces boutons sont définies sur cet objet DataNavigator.
<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage" parent="pageNavigator" command="PreviousPage">
<liaisons>
<binding property="enabled" dataPath="hasPreviousPage"/>
</liaisons>
</bouton>
<button id="btnNextPage" parent="pageNavigator" command="NextPage">
<liaisons>
<binding property="enabled" dataPath="hasNextPage"/>
</liaisons>
</bouton>
<button id="btnLastPage" parent="pageNavigator" command="LastPage" />
Partie 5 : Deux étiquettes, indiquant respectivement le nombre total de pages et le numéro de série de la page actuelle.
<ID d'étiquette="lblPageNumber">
<liaisons>
<binding dataContext="view" property="text" dataPath="pageIndex" transform="Add"/>
</liaisons>
</étiquette>
<ID d'étiquette="lblPageCount">
<liaisons>
<binding dataContext="view" property="text" dataPath="pageCount"/>
</liaisons>
</étiquette>
OK, teste-le dans le navigateur :
