Englische Version: http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html
In dieser Serie werde ich einige der erweiterten Steuerelemente in Atlas Sys.UI.Data vorstellen, darunter:
Sys.UI.Data.ListView : Listendaten mithilfe des ASP.NET Atlas ListView-Steuerelements anzeigen
Sys.UI.Data.ItemView: Zeigen Sie einzelne Daten aus einer Sammlung mithilfe des ASP.NET Atlas ItemView-Steuerelements an
Sys.UI.Data.DataNavigator: Verwenden Sie das ASP.NET Atlas PageNavigator-Steuerelement, um die clientseitige Paging-Navigation zu implementieren
Sys.UI.Data.SortBehavior: Fortsetzung folgt
Sys.UI.Data.XSLTView: Fortsetzung folgt Dies ist der dritte Artikel: Verwenden Sie das ASP.NET Atlas PageNavigator-Steuerelement, um die clientseitige Paging-Navigation zu implementieren und alle Datensätze auf einer Seite zu platzieren ist definitiv keine gute Idee, insbesondere wenn Sie Hunderte oder Tausende von Datensätzen haben. Ihre Benutzer müssen ständig die Bildlaufleiste ziehen oder sogar Strg+F verwenden, um den gesuchten Inhalt zu finden, was zu einer sehr schlechten Benutzererfahrung führt. Zu diesem Zeitpunkt wird es viel benutzerfreundlicher sein, die Daten im Paging anzuzeigen. Einige serverseitige ASP.NET-Steuerelemente verfügen über integrierte Paging- und Seitennavigationsfunktionen, z. B. DataGrid und GridView. In ähnlicher Weise bietet auch das Atlas-Client-Steuerelement Sys.UI.Data.DataNavigator ähnliche Funktionen, was unsere Entwicklungseffizienz erheblich verbessern wird.
Das DataNavigator-Steuerelement funktioniert mit dem DataView-Steuerelement (siehe: Einführung in das Steuerelement im Atlas-Namespace Sys.Data – DataView und DataFilter). Wir wissen, dass das DataView-Steuerelement keine Methoden für die Seitennavigation bereitstellt, daher können wir nur seine pageIndex-Eigenschaft direkt festlegen, um die Navigation zu implementieren. Obwohl es nicht schwierig ist, ist dies in vielen Fällen keine gute Idee, da viele unvorsichtige Entwickler wie ich oft vergessen, den Grenzwert von pageIndex zu überprüfen, was unnötige Probleme verursacht. Dies ist einer der Gründe, warum Atlas das DataNavigator-Steuerelement bereitstellt. Das DataNavigator-Steuerelement dient als Proxy für das DataView-Steuerelement und bietet eine benutzerfreundliche Seitennavigationsschnittstelle.
Das DataNavigator-Objekt verfügt nur über ein Attribut:
dataView: eine Referenz auf ein DataView-Objekt. Dieses DataNavigator-Objekt wendet die Seitennavigationsoperation darauf an. Sie sollten diese Eigenschaft immer angeben.
Um das DataNavigator-Steuerelement verwenden zu können, müssen Sie außerdem einige Atlas-Schaltflächen mit bestimmten commandName-Eigenschaften bereitstellen, um die entsprechenden Seitennavigationsvorgänge auszulösen. Die übergeordnete Eigenschaft dieser Schaltflächen sollte auf dieses DataNavigator-Steuerelement festgelegt werden, um sicherzustellen, dass der DataNavigator die von diesen Schaltflächen ausgegebenen Befehle erfassen kann.
Sie können das commandName-Attribut Ihres Buttons in Form der folgenden fünf Zeichenfolgen mit jeweils unterschiedlicher Bedeutung angeben:
Seite: Konvertieren Sie den aktuellen Seitenindex in den im Befehlsargument angegebenen Wert. Mit diesem Befehl können wir schnell den Index der Seite ändern.
nextpage: Zur nächsten Seite wechseln (sofern die nächste Seite existiert).
previouspage: Zur vorherigen Seite wechseln (sofern eine vorherige Seite vorhanden ist).
firstpage: Zur ersten Seite wechseln.
letzte Seite: Zur letzten Seite wechseln.
Okay, die langweilige Einführung wie bei MSDN ist hier vorbei. Lassen Sie uns anhand eines Beispiels mit der Verwendung von DataNavigator vertraut werden.
Zuerst müssen wir einen Webdienst bereitstellen, damit die Atlas-Seite ihn verwenden kann. Der Webdienst gibt 100 Datensätze zurück. Das Folgende ist der Code dieses Webdienstes, der sehr leicht zu verstehen ist und hier nicht wiederholt wird.
Webdienst
Verwenden des Systems;
Verwenden von System.Collections;
mit System.Collections.Generic;
mit System.ComponentModel;
mit System.IO;
mit System.Web;
mit System.Web.Caching;
Verwenden von System.Web.Services;
mit System.Web.Services.Protocols;
mit Microsoft.Web.Services
;
// Der Einfachheit halber demonstriert dieses Beispiel das Speichern und Bearbeiten
// Die Datenobjekte im Speicher können ebenfalls verwendet werden.
//
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
öffentliche Klasse MyDataService: DataService
{
static List<Eintrag> _data;
statisches Objekt _dataLock = neues Objekt();
private statische Liste<Eintrag> Daten
{
erhalten
{
if (_data == null)
{
lock(_dataLock)
{
if (_data == null)
{
_data = new List<Entry>();
for (int i = 0; i < 100; i++)
{
_data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format(" Dflying{0}@dflying.net ", i.ToString())));
}
}
}
}
return _data;
}
}
[DataObjectMethod(DataObjectMethodType.Select)]
öffentlicher Eintrag[] SelectRows()
{
return MyDataService.Data.ToArray();
}
}
öffentlicher Klasseneintrag
{
private Zeichenfolge _name;
private Zeichenfolge _email;
private int _id;
[DataObjectField(true, true)]
öffentliche int-ID
{
get { return _id }
set { _id = value }
}
[DataObjectField(false)]
[DefaultValue("Neue Zeile")]
öffentlicher String-Name
{
get { return _name }
set { _name = value;
}
[DataObjectField(false)]
[Standardwert("")]
öffentliche Zeichenfolge E-Mail
{
get { return _email }
set { _email = value;
}
öffentlicher Eintrag()
{
_id = -1;
}
öffentlicher Eintrag (int id, String-Name, String-Beschreibung)
{
_id = id;
_name = Name;
_email = Beschreibung;
}
}
Dann müssen wir auf der ASPX-Seite die folgenden vier Teile berücksichtigen und definieren:
ein ScriptManager-Steuerelement, das die für die Seite erforderlichen Atlas Framework-bezogenen Skriptdateien enthält. Normalerweise muss dies auf jeder Atlas-Seite enthalten sein.
Ein Platzhalter-Div (ID ist dataContents, siehe Code). Atlas platziert die gerenderte paginierte ListView hier.
Ein div (DataNavigator-Steuerelement) als Container und eine darin enthaltene Reihe von Schaltflächen (Befehlsschaltflächen) werden zum Implementieren von Seitennavigationsfunktionen verwendet.
Ein verstecktes Div, das zum Platzieren der ListView-Vorlage verwendet wird.
Im Folgenden finden Sie den Code für die oben genannten vier Teile. Informationen zur Vorlage des ListView-Steuerelements finden Sie in meinem Artikel: Verwenden des ASP.NET Atlas ListView-Steuerelements zum Anzeigen von Listendaten
<!-- ScriptManager -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- Element für ausgelagerte ListView (Container) -->
<div id="dataContents">
</div>
<!-- PageNavigator -->
<div id="pageNavigator">
<input type="button" id="btnFirstPage" value="<<" />
<input type="button" id="btnPrevPage" value="<" />
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<input type="button" id="btnNextPage" value=">" />
<input type="button" id="btnLastPage" value=">>" />
</div>
<!-- Vorlagen -->
<div style="visibility: versteckt; display: none">
<table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
<thead>
<tr>
<td><span>Nr.</span></td>
<td><span>Name</span></td>
<td><span>E-Mail</span></td>
</tr>
</thead>
<!-- Wiederholungsvorlage -->
<tbody id="myList_itemTemplateParent">
<!-- Vorlage für Wiederholungselemente -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
</tbody>
</table>
<!-- Leere Vorlage -->
<div id="myList_emptyTemplate">
Keine Daten
</div>
</div>
Schließlich ist es an der Zeit, die XML-Skriptdefinition für Atlas zu schreiben, die aus den folgenden fünf Teilen besteht:
Teil 1: Atlas-Client-Steuerelement-DataSource, die zum Abrufen von Daten vom oben definierten Webdienst verwendet wird.
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
Teil 2: Ein DataView-Steuerelement (siehe: Einführung in Steuerelemente im Atlas-Namespace Sys.Data – DataView und DataFilter), das zum Paginieren der 100 im ersten Teil erhaltenen Daten verwendet wird.
<dataView id="view" pageSize="12">
<Bindungen>
<binding dataContext="dataSource" dataPath="data" property="data" />
</bindings>
</dataView>
Teil 3: Ein ListView-Steuerelement (siehe: Verwenden des ASP.NET Atlas ListView-Steuerelements zum Anzeigen von Listendaten), das zum Anzeigen paginierter Daten verwendet wird.
<listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
<Bindungen>
<binding dataContext="view" dataPath="filteredData" property="data"/>
</bindings>
<layoutTemplate>
<template layoutElement="myList_layoutTemplate"/>
</layoutTemplate>
<itemTemplate>
<template layoutElement="myList_itemTemplate">
<label id="lblIndex">
<Bindungen>
<binding dataPath="$index" transform="Add" property="text"/>
</bindings>
</label>
<label id="lblName">
<Bindungen>
<binding dataPath="Name" property="text"/>
</bindings>
</label>
<label id="lblEmail">
<Bindungen>
<binding dataPath="Email" property="text"/>
</bindings>
</label>
</template>
</itemTemplate>
<emptyTemplate>
<template layoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Teil 4: DataNavigator-Steuer- und Befehlsschaltflächen. Beachten Sie, dass wir hier vier Schaltflächen haben, jede mit einem anderen commandName-Attribut, was auch einer Operation von DataNavigator auf DataView entspricht. Gleichzeitig werden die übergeordneten Eigenschaften dieser Schaltflächen auf dieses DataNavigator-Objekt festgelegt.
<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage" parent="pageNavigator" command="PreviousPage">
<Bindungen>
<binding property="enabled" dataPath="hasPreviousPage"/>
</bindings>
</button>
<button id="btnNextPage" parent="pageNavigator" command="NextPage">
<Bindungen>
<binding property="enabled" dataPath="hasNextPage"/>
</bindings>
</button>
<button id="btnLastPage" parent="pageNavigator" command="LastPage" />
Teil 5: Zwei Etiketten, die jeweils die Gesamtzahl der Seiten und die Seriennummer der aktuellen Seite anzeigen.
<label id="lblPageNumber">
<Bindungen>
<binding dataContext="view" property="text" dataPath="pageIndex" transform="Add"/>
</bindings>
</label>
<label id="lblPageCount">
<Bindungen>
<binding dataContext="view" property="text" dataPath="pageCount"/>
</bindings>
</label>
OK, testen Sie es im Browser:
