Versi Bahasa Inggris: http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html
Dalam seri ini, saya akan memperkenalkan beberapa kontrol tingkat lanjut di Atlas Sys.UI.Data, termasuk:
Sys.UI.Data.ListView : Menampilkan data daftar menggunakan kontrol ASP.NET Atlas ListView
Sys.UI.Data.ItemView: Menampilkan data individual dari koleksi menggunakan kontrol ASP.NET Atlas ItemView
Sys.UI.Data.DataNavigator: Gunakan kontrol ASP.NET Atlas PageNavigator untuk mengimplementasikan navigasi paging sisi klien
Sys.UI.Data.SortBehavior: Bersambung
Sys.UI.Data.XSLTView: Bersambung Ini adalah artikel ketiga: Gunakan kontrol ASP.NET Atlas PageNavigator untuk mengimplementasikan navigasi halaman sisi klien dan meletakkan semua catatan pada satu halaman jelas bukan ide yang baik, terutama bila Anda memiliki ratusan atau ribuan catatan. Pengguna Anda harus terus menyeret bilah gulir atau bahkan menggunakan Control+F untuk menemukan konten yang mereka cari, yang akan memberikan pengalaman pengguna yang sangat buruk. Saat ini, akan lebih ramah pengguna untuk menampilkan data dalam paging. Beberapa kontrol sisi server ASP.NET memiliki kemampuan paging dan navigasi halaman bawaan, seperti DataGrid dan GridView. Demikian pula, kontrol klien Atlas Sys.UI.Data.DataNavigator juga menyediakan fungsi serupa, yang akan sangat meningkatkan efisiensi pengembangan kami.
Kontrol DataNavigator akan bekerja dengan kontrol DataView (lihat: Pengenalan kontrol di bawah namespace Atlas Sys.Data - DataView dan DataFilter). Kita tahu bahwa kontrol DataView tidak menyediakan metode terkait navigasi halaman, jadi kita hanya bisa langsung menyetel properti pageIndex-nya untuk mengimplementasikan navigasi. Meskipun tidak sulit, dalam banyak kasus hal ini bukanlah ide yang baik, karena banyak pengembang yang ceroboh seperti saya sering lupa memeriksa nilai batas pageIndex, sehingga menyebabkan masalah yang tidak perlu. Inilah salah satu alasan mengapa Atlas menyediakan kontrol DataNavigator. Kontrol DataNavigator akan berfungsi sebagai proksi untuk kontrol DataView dan menyediakan antarmuka navigasi halaman yang mudah digunakan.
Objek DataNavigator hanya memiliki satu atribut:
dataView: referensi ke objek DataView. DataNavigator ini akan menerapkan operasi navigasi halaman padanya. Anda harus selalu menentukan properti ini.
Selain itu, untuk menggunakan kontrol DataNavigator, Anda juga perlu menyediakan beberapa Tombol Atlas dengan beberapa properti commandName tertentu untuk memicu operasi navigasi halaman terkait. Properti induk dari Tombol ini harus disetel ke kontrol DataNavigator ini untuk memastikan bahwa DataNavigator dapat menangkap perintah yang dikeluarkan oleh Tombol ini.
Anda dapat menentukan atribut commandName Tombol Anda sebagai lima string berikut, masing-masing memiliki arti berbeda:
halaman: Mengonversi indeks halaman saat ini ke nilai yang ditentukan dalam argumen perintah. Dengan perintah ini kita dapat dengan cepat mengubah indeks halaman.
halaman berikutnya: Beralih ke halaman berikutnya (jika halaman berikutnya ada).
halaman sebelumnya: Beralih ke halaman sebelumnya (jika ada halaman sebelumnya).
halaman pertama: beralih ke halaman pertama.
halaman terakhir: beralih ke halaman terakhir.
Oke, pengenalan membosankan seperti MSDN sudah selesai di sini, mari kita mengenal penggunaan DataNavigator melalui sebuah contoh.
Pertama kita perlu mengekspos Layanan Web agar halaman Atlas dapat menggunakannya. Layanan Web akan mengembalikan 100 catatan. Berikut ini adalah kode Web Service ini yang sangat mudah dipahami dan tidak akan terulang kembali disini.
Layanan Web
menggunakan Sistem;
menggunakan Sistem.Koleksi;
menggunakan System.Collections.Generik;
menggunakan Sistem.ComponentModel;
menggunakan Sistem.IO;
menggunakan Sistem.Web;
menggunakan Sistem.Web.Caching;
menggunakan System.Web.Layanan;
menggunakan System.Web.Services.Protocols;
menggunakan Microsoft.Web.Layanan;
//
// Untuk mempermudah, contoh ini menunjukkan penyimpanan dan manipulasi
// objek data di memori. Database juga dapat digunakan.
//
[Layanan Web(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
kelas publik MyDataService : DataService
{
Daftar statis<Entri> _data;
objek statis _dataLock = objek baru();
Daftar statis pribadi<Entri> Data
{
mendapatkan
{
jika (_data == nol)
{
kunci(_dataKunci)
{
jika (_data == nol)
{
_data = Daftar baru<Entri>();
untuk (int saya = 0; saya < 100; saya++)
{
_data.Add(entri baru(i, "Dflying " + i.ToString(), string.Format(" Dflying{0}@dflying.net ", i.ToString())));
}
}
}
}
kembalikan _data;
}
}
[DataObjectMethod(DataObjectMethodType.Select)]
Entri publik[] SelectRows()
{
kembalikan MyDataService.Data.ToArray();
}
}
Entri kelas publik
{
string pribadi _nama;
string pribadi _email;
pribadi int _id;
[DataObjectField (benar, benar)]
Id int publik
{
dapatkan { kembalikan _id }
atur { _id = nilai;
}
[DataObjectField(salah)]
[Nilai Default("Baris baru")]
Nama string publik
{
dapatkan { kembalikan _nama }
setel { _nama = nilai }
}
[DataObjectField(salah)]
[Nilai Default("")]
string publik Email
{
dapatkan { kembalikan _email }
setel { _email = nilai;
}
Entri publik()
{
_id = -1;
}
Entri publik (int id, nama string, deskripsi string)
{
_id = identitas;
_nama = nama;
_email = deskripsi;
}
}
Kemudian, di halaman ASPX, kita perlu mempertimbangkan dan mendefinisikan empat bagian berikut:
kontrol ScriptManager berisi file skrip terkait Atlas Framework yang diperlukan untuk halaman tersebut. Biasanya, inilah yang harus disertakan dalam setiap halaman Atlas.
Div placeholder (id adalah dataContents, lihat kode). Atlas akan menempatkan ListView paginasi yang dirender di sini.
Div (kontrol DataNavigator) sebagai wadah, dan sekumpulan tombol (tombol perintah) yang terdapat di dalamnya, digunakan untuk mengimplementasikan fungsi navigasi halaman.
Div tersembunyi yang digunakan untuk menempatkan template ListView.
Berikut kode keempat bagian di atas. Mengenai template kontrol ListView, silakan merujuk ke artikel saya: Menggunakan kontrol ASP.NET Atlas ListView untuk menampilkan data daftar
<!-- Manajer Skrip -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- Elemen untuk halaman ListView (kontainer) -->
<div id="isi data">
</div>
<!-- PageNavigator -->
<div id="pageNavigator">
<masukan tipe="tombol" id="btnFirstPage" nilai="<<" />
<masukan tipe="tombol" id="btnPrevPage" nilai="<" />
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<masukan tipe="tombol" id="btnNextPage" nilai=">" />
<masukan tipe="tombol" id="btnLastPage" nilai=">>" />
</div>
<!-- Templat -->
<div style="visibilitas: tersembunyi; tampilan: tidak ada">
<tabel id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
<kepala>
<tr>
<td><span>Tidak.</span></td>
<td><span>Nama</span></td>
<td><span>Email</span></td>
</tr>
</kepala>
<!-- Ulangi Templat -->
<tbody id="myList_itemTemplateParent">
<!-- Ulangi Templat Item -->
<tr id="daftarsaya_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
</tbody>
</tabel>
<!-- Templat Kosong -->
<div id="daftarsaya_emptyTemplate">
Tidak Ada Data
</div>
</div>
Terakhir, sekarang saatnya menulis definisi skrip XML untuk Atlas, yang memiliki lima bagian berikut:
Bagian 1: Sumber Data kontrol klien Atlas, digunakan untuk memperoleh data dari Layanan Web yang kami definisikan di atas.
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
Bagian 2: Kontrol DataView (lihat: Pengenalan kontrol pada namespace Atlas Sys.Data - DataView dan DataFilter), digunakan untuk halaman 100 data yang diperoleh di bagian pertama.
<dataView id="lihat" pageSize="12">
<ikatan>
<mengikat dataContext="dataSource" dataPath="data" property="data" />
</binding>
</tampilan data>
Bagian 3: Kontrol ListView (lihat: Menggunakan kontrol ASP.NET Atlas ListView untuk menampilkan data daftar), digunakan untuk menampilkan data paginasi.
<listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
<ikatan>
<mengikat dataContext="view" dataPath="filteredData" property="data"/>
</binding>
<templat tata letak>
<template layoutElement="myList_layoutTemplate"/>
</tata letakTemplat>
<Templat Barang>
<template layoutElement="myList_itemTemplate">
<label id="lblIndex">
<ikatan>
<mengikat dataPath="$index" transform="Tambahkan" properti="teks"/>
</binding>
</label>
<label id="namalbl">
<ikatan>
<mengikat dataPath="Nama" properti="teks"/>
</binding>
</label>
<label id="lblEmail">
<ikatan>
<mengikat dataPath="Email" properti="teks"/>
</binding>
</label>
</templat>
</itemTemplat>
<Templat kosong>
<template layoutElement="myList_emptyTemplate"/>
</templat kosong>
</tampilandaftar>
Bagian 4: Tombol kontrol dan perintah DataNavigator. Perhatikan bahwa kita memiliki empat tombol di sini, masing-masing dengan atribut commandName berbeda, yang juga berhubungan dengan operasi DataNavigator di DataView. Pada saat yang sama, properti induk dari tombol-tombol ini disetel ke objek DataNavigator ini.
<dataNavigator id="pageNavigator" dataView="lihat"/>
<button id="btnFirstPage" parent="pageNavigator" command="FirstPage" />
<button id="btnPrevPage" parent="pageNavigator" command="PreviousPage">
<ikatan>
<mengikat properti="diaktifkan" dataPath="hasPreviousPage"/>
</binding>
</tombol>
<tombol id="btnNextPage" parent="pageNavigator" command="NextPage">
<ikatan>
<mengikat properti="diaktifkan" dataPath="hasNextPage"/>
</binding>
</tombol>
<button id="btnLastPage" parent="pageNavigator" command="LastPage" />
Bagian 5: Dua Label, masing-masing menunjukkan jumlah halaman dan nomor seri halaman saat ini.
<label id="lblPageNumber">
<ikatan>
<mengikat dataContext="view" property="text" dataPath="pageIndex" transform="Add"/>
</binding>
</label>
<label id="lblPageCount">
<ikatan>
<mengikat dataContext="view" property="text" dataPath="pageCount"/>
</binding>
</label>
Oke, tes di browser:
