Bagikan melalui

Memperlihatkan Beberapa Rekaman per Baris dengan Kontrol Daftar Data (VB)

oleh Scott Mitchell

Unduh PDF

Dalam tutorial singkat ini kita akan menjelajahi cara menyesuaikan tata letak DataList melalui properti RepeatColumns dan RepeatDirection-nya.

Pendahuluan

Contoh DataList yang telah kita lihat dalam dua tutorial terakhir telah merender setiap rekaman dari sumber datanya sebagai baris dalam kolom tunggal HTML <table>. Meskipun ini adalah perilaku DataList default, sangat mudah untuk menyesuaikan tampilan DataList sehingga item sumber data tersebar di tabel multi-kolom dan multi-baris. Selain itu, dimungkinkan untuk menampilkan semua item sumber data dalam DataList satu baris dengan multi-kolom.

Kita dapat menyesuaikan tata letak DataList melalui RepeatColumns properti dan RepeatDirection , yang, masing-masing, menunjukkan berapa banyak kolom yang dirender dan apakah item tersebut ditata secara vertikal atau horizontal. Gambar 1, misalnya, memperlihatkan DataList yang menampilkan informasi produk dalam tabel dengan tiga kolom.

Daftar Data Memperlihatkan Tiga Produk per Baris

Gambar 1: Daftar Data Menunjukkan Tiga Produk per Baris (Klik untuk melihat gambar ukuran penuh)

Dengan memperlihatkan beberapa item sumber data per baris, DataList dapat lebih efektif menggunakan ruang layar horizontal. Dalam tutorial singkat ini kita akan menjelajahi dua properti DataList ini.

Langkah 1: Menampilkan Informasi Produk dalam DataList

Sebelum kita memeriksa properti RepeatColumns dan RepeatDirection, pertama-tama mari kita buat DataList di halaman kami yang mencantumkan informasi produk menggunakan tata letak tabel standar satu kolom dan multi-baris. Untuk contoh ini, mari kita tampilkan nama produk, kategori, dan harga menggunakan markup berikut:

<h4>Product Name</h4>
Available in the Category Name store for Price

Kami telah melihat cara mengikat data ke DataList dalam contoh sebelumnya, jadi saya akan menelusuri langkah-langkah ini dengan cepat. Mulailah dengan membuka halaman RepeatColumnAndDirection.aspx di folder DataListRepeaterBasics dan seret DataList dari Toolbox ke Designer. Dari tag pintar dari DataList, pilih untuk membuat ObjectDataSource baru dan konfigurasikan agar mengambil datanya dari metode ProductsBLL dari kelas GetProducts, dengan memilih opsi (Tidak Ada) dari tab INSERT, UPDATE, dan DELETE di wizard.

Setelah membuat dan mengikat ObjectDataSource baru ke DataList, Visual Studio akan secara otomatis membuat ItemTemplate yang menampilkan nama dan nilai untuk setiap bidang data produk. ItemTemplate Sesuaikan baik secara langsung melalui markup deklaratif atau dari opsi Edit Templat di tag pintar DataList sehingga menggunakan markup yang ditunjukkan di atas, mengganti teks Nama Produk, Nama Kategori, dan Harga dengan kontrol Label yang menggunakan sintaks pengikatan data yang sesuai untuk menetapkan nilai ke propertinyaText. Setelah memperbarui ItemTemplatemarkup deklaratif halaman Anda akan terlihat mirip dengan yang berikut ini:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h4>
        Available in the
            <asp:Label runat="server" ID="CategoryNameLabel"
                Text='<%# Eval("CategoryName") %>' />
        store for
            <asp:Label runat="server" ID="UnitPriceLabel"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Perhatikan bahwa saya telah menyertakan penentu format dalam Eval sintaks pengikatan data untuk UnitPrice, memformat nilai yang dikembalikan sebagai mata uang - Eval("UnitPrice", "{0:C}").

Luangkan waktu sejenak untuk mengunjungi halaman Anda di browser. Seperti yang ditunjukkan Gambar 2, DataList ditampilkan sebagai tabel kolom tunggal dengan banyak baris produk.

Secara Default, DataList Ditampilkan sebagai Tabel Kolom Tunggal dengan Beberapa Baris

Gambar 2: Secara bawaan, DataList merender sebagai tabel kolom tunggal, multi-baris (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Mengubah Arah Tata Letak Daftar Data

Meskipun perilaku default untuk DataList adalah menjabarkan itemnya secara vertikal dalam tabel multi-baris kolom tunggal, perilaku ini dapat dengan mudah diubah melalui properti DataList.RepeatDirection Properti RepeatDirection dapat menerima salah satu dari dua nilai yang mungkin: Horizontal atau Vertical (default).

Dengan mengubah RepeatDirection properti dari Vertical ke Horizontal, DataList merender rekamannya dalam satu baris, membuat satu kolom per item sumber data. Untuk mengilustrasikan efek ini, klik DataList di Perancang lalu, dari jendela Properti, ubah RepeatDirection properti dari Vertical ke Horizontal. Segera setelah melakukannya, Perancang menyesuaikan tata letak DataList, membuat antarmuka multikolom satu baris (lihat Gambar 3).

Properti RepeatDirection Menentukan Arah Penataan Item pada DataList

Gambar 3: RepeatDirection Properti Menentukan Bagaimana Arah Item Daftar Data Ditata (Klik untuk melihat gambar ukuran penuh)

Saat menampilkan data dalam jumlah kecil, tabel multikolom satu baris mungkin merupakan cara ideal untuk memaksimalkan real estat layar. Namun, untuk volume data yang lebih besar, satu baris akan memerlukan banyak kolom, yang mendorong item yang tidak dapat pas di layar ke kanan. Gambar 4 memperlihatkan produk saat dirender dalam DataList satu baris. Karena ada banyak produk (lebih dari 80), pengguna harus menggulir jauh ke kanan untuk melihat informasi tentang setiap produk.

Untuk Sumber Data yang Cukup Besar, Daftar Data Kolom Tunggal Akan Memerlukan Pengguliran Horizontal

Gambar 4: Untuk Sumber Data yang Cukup Besar, Daftar Data Kolom Tunggal Akan Memerlukan Pengguliran Horizontal (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menampilkan Data dalam Tabel Multi-Kolom, Multi-Baris

Untuk membuat DataList dengan banyak kolom dan baris, kita perlu menyetel RepeatColumns properti ke jumlah kolom yang akan ditampilkan. Secara default, RepeatColumns properti diatur ke 0, yang akan menyebabkan DataList menampilkan semua itemnya dalam satu baris atau kolom (tergantung pada nilai RepeatDirection properti).

Misalnya, mari kita tampilkan tiga produk per baris tabel. Oleh karena itu, atur properti ke RepeatColumns 3. Setelah membuat perubahan ini, luangkan waktu sejenak untuk melihat hasilnya di browser. Seperti yang ditunjukkan Gambar 5, produk sekarang tercantum dalam tabel multi-baris tiga kolom.

Tiga Produk Ditampilkan per Baris

Gambar 5: Tiga Produk Ditampilkan per Baris (Klik untuk melihat gambar ukuran penuh)

Properti RepeatDirection memengaruhi bagaimana item dalam DataList ditata. Gambar 5 menunjukkan hasil dengan properti RepeatDirection yang disetel ke Horizontal. Perhatikan bahwa tiga produk pertama Chai, Chang, dan Aniseed Syrup ditata dari kiri ke kanan, atas ke bawah. Tiga produk berikutnya (dimulai dengan Chef Anton s Cajun Seasoning) muncul berturut-turut di bawah tiga pertama. Mengubah RepeatDirection properti kembali ke Vertical namun menjabarkan produk-produk ini dari atas ke bawah, kiri ke kanan, seperti yang diilustrasikan Gambar 6.

Di sini, Produk ditata Secara Vertikal

Gambar 6: Di sini, Produk ditata Secara Vertikal (Klik untuk melihat gambar ukuran penuh)

Jumlah baris yang ditampilkan dalam tabel yang dihasilkan bergantung pada jumlah total rekaman yang terikat ke DataList. Tepat sekali, itu adalah batas maksimum dari jumlah total item sumber data yang dibagi dengan properti nilai RepeatColumns. Products Karena tabel saat ini memiliki 84 produk, yang dapat dibagi 3, ada 28 baris. Jika jumlah item dalam sumber data dan RepeatColumns nilai properti tidak dapat dibagi, maka baris atau kolom terakhir akan memiliki sel kosong. RepeatDirection Jika diatur ke Vertical, maka kolom terakhir akan memiliki sel kosong; jika RepeatDirection adalah Horizontal, maka baris terakhir akan memiliki sel kosong.

Ringkasan

DataList, secara default, mencantumkan itemnya dalam tabel kolom tunggal, multi-baris, yang meniru tata letak GridView dengan satu TemplateField. Meskipun tata letak default ini dapat diterima, kita dapat memaksimalkan real estat layar dengan menampilkan beberapa item sumber data per baris. Menyelesaikan ini hanya masalah pengaturan properti DataList RepeatColumns ke jumlah kolom yang akan ditampilkan per baris. Selain itu, properti DataList dapat RepeatDirection digunakan untuk menunjukkan apakah konten tabel multi-kolom, multi-baris harus ditata secara horizontal dari kiri ke kanan, atas ke bawah atau vertikal dari atas ke bawah, kiri ke kanan.

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.

Ucapan terima kasih khusus kepada

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau utama untuk tutorial ini adalah John Suru. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

SebelumnyaBerikutnya