Penomoran dan Pengurutan Data Laporan (VB)

oleh Scott Mitchell

Unduh PDF

Penomoran dan pengurutan adalah dua fitur yang sangat umum saat menampilkan data dalam aplikasi online. Dalam tutorial ini kita akan melihat terlebih dahulu menambahkan pengurutan dan penomoran ke laporan kita, yang kemudian akan kita bangun di tutorial mendatang.

Pendahuluan

Penomoran dan pengurutan adalah dua fitur yang sangat umum saat menampilkan data dalam aplikasi online. Misalnya, saat mencari buku ASP.NET di toko buku online, mungkin ada ratusan buku tersebut, tetapi laporan yang mencantumkan hasil pencarian hanya mencantumkan sepuluh kecocokan per halaman. Selain itu, hasilnya dapat diurutkan berdasarkan judul, harga, jumlah halaman, nama penulis, dan sebagainya. Sementara 23 tutorial terakhir telah memeriksa cara membuat berbagai laporan, termasuk antarmuka yang mengizinkan penambahan, pengeditan, dan penghapusan data, kami belum melihat cara mengurutkan data dan satu-satunya contoh halaman yang telah kami lihat telah dengan kontrol DetailsView dan FormView.

Dalam tutorial ini kita akan melihat cara menambahkan pengurutan dan penomoran ke laporan kita, yang dapat dicapai hanya dengan memeriksa beberapa kotak centang. Sayangnya, implementasi sederhana ini memiliki kelemahan; antarmuka pengurutan masih kurang memuaskan dan rutinitas pengaturan halaman tidak dirancang untuk efisiensi dalam menavigasi set hasil yang besar. Tutorial di masa mendatang akan mengeksplorasi cara mengatasi keterbatasan solusi paging dan pengurutan bawaan.

Langkah 1: Menambahkan Halaman Web Tutorial Penomoran dan Pengurutan

Sebelum kita memulai tutorial ini, mari kita luangkan waktu sejenak untuk menambahkan halaman ASP.NET yang akan kita butuhkan untuk tutorial ini dan tiga berikutnya. Mulailah dengan membuat folder baru dalam proyek bernama PagingAndSorting. Selanjutnya, tambahkan lima halaman ASP.NET berikut ke folder ini, yang semuanya dikonfigurasi untuk menggunakan halaman Site.mastermaster :

• Default.aspx
• SimplePagingSorting.aspx
• EfficientPaging.aspx
• SortParameter.aspx
• CustomSortingUI.aspx

Gambar 1: Buat folder PagingAndSorting dan tambahkan halaman tutorial ASP.NET

Selanjutnya, buka halaman Default.aspx dan seret Kontrol Pengguna SectionLevelTutorialListing.ascx dari folder UserControls ke area desain. Kontrol Pengguna ini, yang kami buat dalam tutorial Halaman Master dan Navigasi Situs , menghitung peta situs dan menampilkan tutorial tersebut di bagian saat ini dalam daftar berpoin.

Gambar 2: Tambahkan Kontrol Pengguna SectionLevelTutorialListing.ascx ke Default.aspx

Agar daftar berpoin menampilkan tutorial pemrosesan halaman dan pengurutan yang kita akan buat, kita perlu menambahkannya ke peta situs. Buka file Web.sitemap dan tambahkan markup berikut setelah markup node peta situs untuk Editing, Inserting, dan Deleting.

<siteMapNode title="Paging and Sorting" url="~/PagingAndSorting/Default.aspx"
    description="Samples of Reports that Provide Paging and Sorting Capabilities">
    <siteMapNode url="~/PagingAndSorting/SimplePagingSorting.aspx"
        title="Simple Paging & Sorting Examples"
        description="Examines how to add simple paging and sorting support." />
    <siteMapNode url="~/PagingAndSorting/EfficientPaging.aspx"
        title="Efficiently Paging Through Large Result Sets"
        description="Learn how to efficiently page through large result sets." />
    <siteMapNode url="~/PagingAndSorting/SortParameter.aspx"
        title="Sorting Data at the BLL or DAL"
        description="Illustrates how to perform sorting logic in the Business Logic
        Layer or Data Access Layer." />
    <siteMapNode url="~/PagingAndSorting/CustomSortingUI.aspx"
        title="Customizing the Sorting User Interface"
        description="Learn how to customize and improve the sorting user interface." />
</siteMapNode>

Gambar 3: Perbarui Peta Situs untuk Menyertakan Halaman ASP.NET Baru

Langkah 2: Menampilkan Informasi Produk di GridView

Sebelum kita menerapkan secara penuh kemampuan pemisahan halaman dan pengurutan, mari kita terlebih dahulu membuat GridView standar yang tidak dapat diurutkan dan tidak dapat dipisahkan yang mencantumkan informasi produk. Ini adalah tugas yang telah kami lakukan berkali-kali sebelum seluruh seri tutorial ini sehingga langkah-langkah ini harus akrab. Mulailah dengan membuka SimplePagingSorting.aspx halaman dan seret kontrol GridView dari Kotak Alat ke Perancang, atur propertinya ID ke Products. Selanjutnya, buat ObjectDataSource baru yang menggunakan metode kelas GetProducts() ProductsBLL untuk mengembalikan semua informasi produk.

Gambar 4: Ambil Informasi Tentang Semua Produk Menggunakan Metode GetProducts()

Karena laporan ini adalah laporan baca-saja, tidak perlu memetakan metode ObjectDataSource s Insert(), , Update()atau Delete() ke metode yang sesuai ProductsBLL ; oleh karena itu, pilih (Tidak Ada) dari daftar drop-down untuk tab PERBARUI, SISIPKAN, dan HAPUS.

Gambar 5: Pilih Opsi (Tidak Ada) di Daftar Drop-Down di Tab PERBARUI, SISIPKAN, dan HAPUS

Selanjutnya, mari kita sesuaikan bidang GridView sehingga hanya nama produk, pemasok, kategori, harga, dan status yang dihentikan yang ditampilkan. Selain itu, jangan ragu untuk membuat perubahan pemformatan tingkat bidang mana pun, seperti mengatur properti dari HeaderText atau memformat harga dalam format mata uang. Setelah perubahan ini, markup deklaratif GridView Anda akan terlihat mirip dengan yang berikut ini:

<asp:GridView ID="Products" AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
            SortExpression="CategoryName" ReadOnly="True" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
            SortExpression="SupplierName" ReadOnly="True" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

Gambar 6 menunjukkan kemajuan kami sejauh ini ketika dilihat melalui browser. Perhatikan bahwa halaman mencantumkan semua produk dalam satu layar, memperlihatkan setiap nama produk, kategori, pemasok, harga, dan status yang dihentikan.

Gambar 6: Setiap Produk Tercantum (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menambahkan Dukungan Paginasi

Mencantumkan semua produk di satu layar dapat menyebabkan informasi kelebihan beban bagi pengguna yang menggunakan data. Untuk membantu membuat hasilnya lebih mudah dikelola, kita dapat memecah data menjadi halaman data yang lebih kecil dan memungkinkan pengguna untuk menelusuri data satu halaman pada satu waktu. Untuk mencapainya, cukup centang kotak centang "Aktifkan Pemintalan" dari tag pintar GridView (ini menetapkan properti GridView AllowPaging ke true).

Gambar 7: Centang Kotak Aktifkan Halaman untuk Menambahkan Fitur Penomoran Halaman (Klik untuk melihat gambar ukuran penuh)

Mengaktifkan penghalaman membatasi jumlah rekaman yang ditampilkan per halaman dan menambahkan antarmuka penghalaman ke GridView. Antarmuka halaman default, yang ditunjukkan pada Gambar 7, adalah serangkaian nomor halaman, yang memungkinkan pengguna untuk menavigasi dengan cepat dari satu halaman data ke halaman lain. Antarmuka halaman ini akan terlihat akrab, seperti yang telah kita lihat saat menambahkan dukungan halaman ke kontrol DetailsView dan FormView di tutorial sebelumnya.

Kontrol DetailsView dan FormView hanya menampilkan satu rekaman per halaman. GridView, bagaimanapun, berkonsultasi dengan propertinyaPageSize untuk menentukan berapa banyak rekaman yang ditampilkan per halaman (properti ini default ke nilai 10).

Antarmuka halaman GridView, DetailsView, dan FormView ini dapat disesuaikan menggunakan properti berikut:

• PagerStylemenunjukkan informasi gaya untuk antarmuka halaman; dapat menentukan pengaturan seperti BackColor, , ForeColorCssClass, HorizontalAlign, dan sebagainya.

• PagerSettings berisi sejumlah properti yang dapat menyesuaikan fungsionalitas antarmuka penomor; PageButtonCount menunjukkan jumlah maksimum nomor halaman numerik yang ditampilkan di antarmuka penomoran halaman (defaultnya adalah 10); Mode properti menunjukkan bagaimana antarmuka penomoran beroperasi dan dapat diatur ke:

  • NextPrevious memperlihatkan tombol Berikutnya dan Sebelumnya, memungkinkan pengguna untuk melangkah maju atau mundur satu halaman pada satu waktu
  • NextPreviousFirstLast selain tombol Berikutnya dan Sebelumnya, tombol Pertama dan Terakhir juga disertakan, memungkinkan pengguna untuk dengan cepat berpindah ke halaman pertama atau terakhir data
  • Numeric memperlihatkan serangkaian nomor halaman, yang memungkinkan pengguna untuk segera melompat ke halaman mana pun
  • NumericFirstLast selain nomor halaman, termasuk tombol Pertama dan Terakhir, memungkinkan pengguna untuk dengan cepat berpindah ke halaman pertama atau terakhir data; tombol Pertama/Terakhir hanya ditampilkan jika semua nomor halaman numerik tidak pas

Selain itu, GridView, DetailsView, dan FormView semuanya menawarkan properti PageIndex dan PageCount, yang menunjukkan halaman saat ini yang dilihat dan jumlah total halaman data. Properti PageIndex diindeks mulai dari 0, yang berarti bahwa saat melihat halaman pertama data PageIndex akan sama dengan 0. PageCount, di sisi lain, mulai dihitung pada 1, yang berarti bahwa PageIndex terbatas pada nilai antara 0 dan PageCount - 1.

Mari kita luangkan waktu sejenak untuk meningkatkan tampilan default antarmuka halaman GridView kami. Secara khusus, mari kita memiliki antarmuka halaman penelusuran yang diposisikan di sebelah kanan dengan latar belakang abu-abu muda. Daripada mengatur properti ini langsung melalui properti PagerStyle di GridView, mari kita buat kelas CSS di Styles.css bernama PagerRowStyle, lalu tetapkan properti PagerStyle dari CssClass melalui Tema kami. Mulailah dengan membuka Styles.css dan menambahkan definisi kelas CSS berikut:

.PagerRowStyle
{
    background-color: #ddd;
    text-align: right;
}

Selanjutnya, buka GridView.skin file di DataWebControls folder dalam App_Themes folder . Seperti yang kita bahas dalam tutorial Halaman Master dan Navigasi Situs , file Kulit dapat digunakan untuk menentukan nilai properti default untuk kontrol Web. Oleh karena itu, tingkatkan pengaturan yang ada dengan menyertakan pengaturan properti PagerStyle s CssClass menjadi PagerRowStyle. Selain itu, mari kita konfigurasikan antarmuka halaman untuk menampilkan paling banyak lima tombol halaman numerik menggunakan NumericFirstLast antarmuka halaman.

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
   <PagerStyle CssClass="PagerRowStyle" />
   <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

Pengalaman Pengguna Navigasi Halaman

Gambar 8 memperlihatkan halaman web saat dikunjungi melalui browser setelah kotak centang "Aktifkan Penghalaman" di GridView telah dicentang dan konfigurasi PagerStyle serta PagerSettings telah dibuat melalui file GridView.skin. Perhatikan bagaimana hanya sepuluh rekaman yang ditampilkan, dan antarmuka halaman menunjukkan bahwa kita melihat halaman pertama data.

Dengan Pagination Diaktifkan, Hanya Sebagian Rekaman yang Ditampilkan Sekaligus

Gambar 8: Dengan Halaman Diaktifkan, Hanya Subset Rekaman yang Ditampilkan pada Satu Waktu (Klik untuk melihat gambar ukuran penuh)

Ketika pengguna mengklik salah satu nomor halaman di antarmuka paging, terjadi postback dan halaman dimuat ulang untuk menampilkan data dari halaman yang diminta. Gambar 9 memperlihatkan hasil setelah memilih untuk melihat halaman akhir data. Perhatikan bahwa halaman terakhir hanya memiliki satu catatan; ini karena total ada 81 catatan, menghasilkan delapan halaman dengan 10 catatan per halaman, ditambah satu halaman dengan satu catatan tunggal.

Gambar 9: Mengklik Nomor Halaman Menyebabkan Postback dan Menampilkan Subset Rekaman yang Sesuai (Klik untuk melihat gambar ukuran penuh)

Alur Kerja Pemanggilan Server-Side

Saat pengguna akhir mengklik tombol di antarmuka halaman, postback akan muncul dan alur kerja sisi server berikut dimulai:

1. Peristiwa GridView s (atau DetailsView atau FormView) PageIndexChanging diaktifkan
2. ObjectDataSource meminta kembali semua data dari BLL; nilai properti PageIndex dan PageSize dari GridView digunakan untuk menentukan rekaman apa yang dikembalikan dari BLL yang perlu ditampilkan di GridView.
3. Peristiwa GridView PageIndexChanged diaktifkan

Di Langkah 2, ObjectDataSource meminta kembali semua data dari sumber datanya. Gaya pemindahan halaman ini biasanya disebut sebagai halaman bawaan, karena ini adalah perilaku halaman yang digunakan secara default saat mengatur AllowPaging properti ke true. Dengan paginasi default, kontrol Web data secara sembarangan mengambil semua rekaman untuk setiap halaman data, meskipun hanya sebagian dari rekaman tersebut yang benar-benar dirender ke HTML yang dikirim ke browser. Kecuali data database di-cache oleh BLL atau ObjectDataSource, pagination default tidak efektif untuk kumpulan hasil yang cukup besar atau untuk aplikasi web dengan banyak pengguna bersamaan waktu.

Dalam tutorial berikutnya kita akan memeriksa cara mengimplementasikan halaman kustom. Dengan halaman kustom, Anda dapat secara khusus menginstruksikan ObjectDataSource untuk hanya mengambil kumpulan rekaman yang tepat yang diperlukan untuk halaman data yang diminta. Seperti yang dapat Anda bayangkan, pengambilan halaman khusus sangat meningkatkan efisiensi dalam melewati kumpulan hasil yang besar.

Nota

Meskipun penomoran halaman default tidak cocok ketika mengatur hasil yang cukup besar atau untuk situs dengan banyak pengguna yang melakukan akses secara bersamaan, sadar bahwa penomoran halaman kustom membutuhkan lebih banyak perubahan dan usaha untuk diterapkan dan tidak sesederhana mencentang kotak centang (seperti penomoran halaman default). Oleh karena itu, pemrosesan halaman default mungkin merupakan pilihan ideal untuk situs web kecil dengan lalu lintas rendah atau saat menggunakan pemrosesan halaman pada kumpulan hasil yang relatif kecil, karena jauh lebih mudah dan lebih cepat untuk diterapkan.

Misalnya, jika kami tahu bahwa kami tidak akan pernah memiliki lebih dari 100 produk dalam basis data kami, peningkatan kinerja minimal yang diperoleh dari paging kustom mungkin tidak sebanding dengan usaha yang diperlukan untuk mengimplementasikannya. Namun, jika suatu hari kita memiliki ribuan atau puluhan ribu produk, tidak menerapkan penomoran halaman kustom akan sangat menghambat skalabilitas aplikasi kita.

Langkah 4: Menyesuaikan Pengalaman Memuat Halaman

Kontrol web data menyediakan sejumlah properti yang dapat digunakan untuk meningkatkan pengalaman pengguna dalam menjelajah halaman. Properti PageCount , misalnya, menunjukkan berapa banyak total halaman yang ada, sementara PageIndex properti menunjukkan halaman saat ini yang dikunjungi dan dapat diatur untuk memindahkan pengguna dengan cepat ke halaman tertentu. Untuk mengilustrasikan cara menggunakan properti ini untuk meningkatkan pengalaman halaman pengguna, mari kita tambahkan kontrol Label Web ke halaman kami yang memberi tahu pengguna halaman apa yang saat ini mereka kunjungi, bersama dengan kontrol DropDownList yang memungkinkan mereka untuk dengan cepat melompat ke halaman tertentu.

Pertama, tambahkan kontrol Web Label ke halaman Anda, atur propertinya ID ke PagingInformation, dan hapus propertinya Text . Selanjutnya, buat pengendali acara untuk acara GridView DataBound dan tambahkan kode berikut:

Protected Sub Products_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Products.DataBound
    PagingInformation.Text = String.Format("You are viewing page {0} of {1}...", _
        Products.PageIndex + 1, Products.PageCount)
End Sub

Penanganan aktivitas ini menetapkan PagingInformation properti Label s Text ke pesan yang memberi tahu pengguna halaman yang saat ini mereka kunjungi Products.PageIndex + 1 dari berapa banyak halaman Products.PageCount total (kami menambahkan 1 ke Products.PageIndex properti karena PageIndex diindeks mulai dari 0). Saya memilih untuk menetapkan Label ini Text di penanganan peristiwa DataBound dibandingkan dengan penanganan peristiwa PageIndexChanged karena peristiwa DataBound diaktivasi setiap kali data terikat ke GridView, sedangkan penanganan peristiwa PageIndexChanged hanya diaktivasi saat indeks halaman diubah. Ketika GridView awalnya terikat data pada kunjungan halaman pertama, PageIndexChanging peristiwa tidak diaktifkan (sedangkan DataBound peristiwa itu terjadi).

Dengan penambahan ini, pengguna sekarang ditampilkan pesan yang menunjukkan halaman apa yang mereka kunjungi dan berapa banyak total halaman data yang ada.

Gambar 10: Nomor Halaman Saat Ini dan Jumlah Total Halaman Ditampilkan (Klik untuk melihat gambar ukuran penuh)

Selain kontrol Label, mari kita tambahkan juga kontrol DropDownList yang mencantumkan nomor halaman di GridView dengan halaman yang saat ini dilihat dipilih. Idenya di sini adalah bahwa pengguna dapat dengan cepat melompat dari halaman saat ini ke halaman lain hanya dengan memilih indeks halaman baru dari DropDownList. Mulailah dengan menambahkan DropDownList ke Desainer, atur propertinya ID ke PageList dan centang opsi Aktifkan AutoPostBack dari smart tag-nya.

Selanjutnya, kembali ke penanganan DataBound aktivitas dan tambahkan kode berikut:

' Clear out all of the items in the DropDownList
PageList.Items.Clear()
' Add a ListItem for each page
For i As Integer = 0 To Products.PageCount - 1
    ' Add the new ListItem
    Dim pageListItem As New ListItem(String.Concat("Page ", i + 1), i.ToString())
    PageList.Items.Add(pageListItem)
    ' select the current item, if needed
    If i = Products.PageIndex Then
        pageListItem.Selected = True
    End If
Next

Kode ini dimulai dengan menghapus item di PageList DropDownList. Ini mungkin tampak berlebihan, karena seseorang tidak akan mengharapkan jumlah halaman berubah, tetapi pengguna lain mungkin menggunakan sistem secara bersamaan, menambahkan atau menghapus rekaman dari Products tabel. Penyisipan atau penghapusan tersebut dapat mengubah jumlah halaman data.

Selanjutnya, kita perlu membuat penomoran halaman lagi dan memastikan nomor yang sesuai dengan GridView PageIndex saat ini terpilih secara default. Kami menyelesaikan ini dengan perulangan dari 0 ke PageCount - 1, menambahkan baru ListItem di setiap iterasi dan mengatur propertinya Selected ke true jika indeks iterasi saat ini sama dengan properti GridView s PageIndex .

Terakhir, kita perlu membuat penanganan aktivitas untuk peristiwa DropDownList SelectedIndexChanged , yang diaktifkan setiap kali pengguna memilih item yang berbeda dari daftar. Untuk membuat penanganan aktivitas ini, cukup klik dua kali DropDownList di Perancang, lalu tambahkan kode berikut:

Protected Sub PageList_SelectedIndexChanged(sender As Object, e As System.EventArgs) _
    Handles PageList.SelectedIndexChanged
        ' Jump to the specified page
        Products.PageIndex = Convert.ToInt32(PageList.SelectedValue)
End Sub

Seperti yang ditunjukkan Gambar 11, hanya mengubah properti PageIndex pada GridView menyebabkan data dimuat ulang ke GridView. Di penanganan aktivitas GridView DataBound , DropDownList ListItem yang sesuai dipilih.

Gambar 11: Pengguna Secara Otomatis Dibawa ke Halaman Keenam Saat Memilih Item Daftar halaman 6 Drop-Down (Klik untuk melihat gambar ukuran penuh)

Langkah 5: Menambahkan Dukungan Pengurutan Bi-Directional

Menambahkan dukungan pengurutan dua arah sesederhana menambahkan dukungan paging; cukup centang opsi Aktifkan Pengurutan dari tag pintar GridView (yang mengatur properti GridView AllowSorting ke true). Ini merender setiap header dari bidang-bidang GridView sebagai LinkButton yang, ketika diklik, akan menyebabkan postback dan mengembalikan data yang diurutkan berdasarkan kolom yang diklik dalam urutan naik. Dengan mengeklik ulang LinkButton pada header yang sama, data akan diurutkan ulang dalam urutan menurun.

Nota

Jika Anda menggunakan Lapisan Akses Data kustom daripada Typed DataSet, Anda mungkin tidak memiliki opsi Aktifkan Pengurutan di dalam tag cerdas GridView. Hanya GridViews yang terikat ke sumber data yang secara asli mendukung pengurutan memiliki kotak centang ini yang tersedia. Kumpulan Data yang Diketik menyediakan dukungan pengurutan langsung karena ADO.NET DataTable menyediakan Sort metode yang, saat dipanggil, mengurutkan DataRows dari DataTable menggunakan kriteria yang ditentukan.

Jika DAL Anda tidak mengembalikan objek yang secara asli mendukung pengurutan, Anda harus mengonfigurasi ObjectDataSource untuk meneruskan informasi pengurutan ke Lapisan Logika Bisnis, yang dapat mengurutkan data atau data diurutkan oleh DAL. Kita akan menjelajahi cara mengurutkan data di Logika Bisnis dan Lapisan Akses Data dalam tutorial mendatang.

LinkButton pengurutan dirender sebagai hyperlink HTML, yang warnanya saat ini (biru untuk tautan yang tidak dikunjungi dan merah tua untuk tautan yang dikunjungi) berbenturan dengan warna latar belakang baris header. Sebagai gantinya, mari kita memiliki semua tautan baris header yang ditampilkan dalam warna putih, terlepas dari apakah mereka telah dikunjungi atau tidak. Ini dapat dicapai dengan menambahkan yang berikut ke Styles.css kelas :

.HeaderStyle a, .HeaderStyle a:visited
{
    color: White;
}

Sintaks ini menunjukkan untuk menggunakan teks putih saat menampilkan hyperlink tersebut dalam elemen yang menggunakan kelas HeaderStyle.

Setelah penambahan CSS ini, saat mengunjungi halaman melalui browser, layar Anda akan terlihat mirip dengan Gambar 12. Secara khusus, Gambar 12 memperlihatkan hasil setelah tautan header bidang Harga telah diklik.

Gambar 12: Hasil Telah Diurutkan berdasarkan UnitPrice dalam Urutan Naik (Klik untuk melihat gambar ukuran penuh)

Memeriksa Alur Kerja Pengurutan

Semua bidang GridView BoundField, CheckBoxField, TemplateField, dan sebagainya memiliki SortExpression properti yang menunjukkan ekspresi yang harus digunakan untuk mengurutkan data saat tautan header pengurutan bidang tersebut diklik. GridView juga memiliki SortExpression properti. Saat header pengurutan LinkButton diklik, GridView menetapkan nilai bidang tersebut SortExpression ke propertinya SortExpression . Selanjutnya, data diambil kembali dari ObjectDataSource dan diurutkan sesuai dengan properti GridView.SortExpression Daftar berikut ini merinci urutan langkah-langkah yang terjadi saat pengguna akhir mengurutkan data dalam GridView.

1. Peristiwa Pengurutan GridView diaktifkan
2. Properti GridView disetel ke bidang yang header pengurutannya diklik menggunakan LinkButton.
3. ObjectDataSource mengambil kembali semua data dari BLL lalu mengurutkan data menggunakan GridView s SortExpression
4. Properti GridView diatur ulang PageIndex ke 0, yang berarti bahwa saat mengurutkan, pengguna dikembalikan ke halaman pertama dari data (dengan asumsi dukungan pembagian halaman telah diterapkan)
5. Peristiwa GridView Sorted diaktifkan

Seperti pada pengambilan halaman default, opsi pengurutan default akan menampilkan kembali semua catatan dari BLL. Saat menggunakan pengurutan tanpa pemanggilan halaman atau saat menggunakan pengurutan dengan pemanggilan halaman default, tidak ada cara untuk menghindari penurunan kinerja ini (kecuali dengan penyimpanan di cache data database). Namun, seperti yang akan kita lihat dalam tutorial di masa mendatang, dimungkinkan untuk mengurutkan data secara efisien saat menggunakan penomoran halaman kustom.

Saat mengikat ObjectDataSource ke GridView melalui daftar drop-down di tag pintar GridView, setiap bidang dalam GridView secara otomatis akan memiliki propertinya yang SortExpression disesuaikan dengan nama bidang data yang terdapat dalam kelas ProductsRow. Misalnya, ProductName BoundField s SortExpression diatur ke ProductName, seperti yang ditunjukkan dalam markup deklaratif berikut:

<asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />

Bidang dapat dikonfigurasi sehingga tidak dapat diurutkan dengan menghapus propertinya SortExpression (menetapkannya ke string kosong). Untuk menggambarkan hal ini, bayangkan bahwa kami tidak ingin membiarkan pelanggan kami mengurutkan produk kami berdasarkan harga. Properti UnitPrice BoundField dapat dihapus baik dari markup deklaratif maupun melalui kotak dialog Fields (yang dapat diakses dengan mengklik tautan Edit Kolom pada tag pintar GridView).

Gambar 13: Hasilnya Telah Diurutkan berdasarkan UnitPrice dalam Urutan Naik

Setelah properti SortExpression dihapus pada UnitPrice BoundField, header dirender sebagai teks alih-alih sebagai tautan, karena itu mencegah pengguna mengurutkan data berdasarkan harga.

Gambar 14: Dengan Menghapus Properti SortExpression, Pengguna Tidak Dapat Lagi Mengurutkan Produk Berdasarkan Harga (Klik untuk melihat gambar ukuran penuh)

Mengurutkan GridView secara Terprogram

Anda juga dapat mengurutkan konten GridView secara terprogram dengan menggunakan metode GridView.Sort Cukup teruskan nilai SortExpression untuk mengurutkannya berdasarkan, bersama SortDirection (Ascending atau Descending), dan data GridView akan diurut lagi.

Bayangkan bahwa alasan kami mematikan pemilahan oleh UnitPrice itu karena kami khawatir bahwa pelanggan kami hanya akan membeli produk dengan harga terendah. Namun, kami ingin mendorong mereka untuk membeli produk termahal, jadi kami ingin mereka dapat mengurutkan produk berdasarkan harga, tetapi hanya dari harga termahal hingga yang paling murah.

Untuk menyelesaikan ini, tambahkan kontrol Tombol Web ke halaman, atur propertinya ID ke SortPriceDescending, dan propertinya Text ke Urutkan menurut Harga. Selanjutnya, buat penanganan aktivitas untuk peristiwa Tombol dengan Click mengklik ganda kontrol Tombol di Perancang. Tambahkan kode berikut ke penanganan aktivitas ini:

Protected Sub SortPriceDescending_Click(sender As Object, e As System.EventArgs) _
    Handles SortPriceDescending.Click
        'Sort by UnitPrice in descending order
        Products.Sort("UnitPrice", SortDirection.Descending)
End Sub

Mengklik Tombol ini mengembalikan pengguna ke halaman pertama dengan produk yang diurutkan berdasarkan harga, dari yang paling mahal hingga paling murah (lihat Gambar 15).

Gambar 15: Mengklik Tombol Pesan Produk Dari yang Paling Mahal ke Paling Murah (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Dalam tutorial ini kita melihat cara menerapkan kemampuan pemrosesan halaman dan pengurutan default, yang keduanya semudah memeriksa kotak pilihan! Saat pengguna mengurutkan atau menelusuri data, alur kerja serupa dapat terlihat.

1. Postback akan berlaku
2. Peristiwa tingkat awal kendali Web data dipicu (PageIndexChanging atau Sorting)
3. Semua data diambil kembali oleh ObjectDataSource
4. Peristiwa pasca-tingkat kontrol Web data diaktifkan (PageIndexChanged atau Sorted)

Meskipun menerapkan penomoran dan pengurutan dasar sangat mudah, lebih banyak upaya harus dilakukan untuk memanfaatkan penomoran kustom yang lebih efisien atau untuk lebih meningkatkan antarmuka penomoran atau pengurutan. Tutorial di masa mendatang akan menjelajahi topik-topik ini.

Selamat Pemrograman!

Tentang Penulis

Scott Mitchell, penulis tujuh buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja sama dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 2.0 dalam 24 Jam. Dia dapat dijangkau di mitchell@4GuysFromRolla.com.

Berikutnya Sebelumnya