Bagikan melalui

Menampilkan Data dengan DataList dan Kontrol Pengulang (C#)

oleh Scott Mitchell

Unduh PDF

Dalam tutorial sebelumnya, kami telah menggunakan kontrol GridView untuk menampilkan data. Dimulai dengan tutorial ini, kita melihat membangun pola pelaporan umum dengan kontrol DataList dan Repeater, dimulai dengan dasar-dasar menampilkan data dengan kontrol ini.

Pendahuluan

Dalam semua contoh selama 28 tutorial terakhir, jika kita perlu menampilkan beberapa rekaman dari sumber data, kita beralih ke kontrol GridView. GridView merender baris untuk setiap rekaman di sumber data, menampilkan bidang data rekaman dalam kolom. Meskipun GridView menjadikannya snap untuk ditampilkan, halaman melalui, mengurutkan, mengedit, dan menghapus data, tampilannya agak kotak. Selain itu, markup yang bertanggung jawab atas struktur GridView diperbaiki termasuk HTML <table> dengan baris tabel (<tr>) untuk setiap rekaman dan sel tabel (<td>) untuk setiap bidang.

Untuk memberikan tingkat kustomisasi yang lebih besar dalam tampilan dan markup yang dirender saat menampilkan beberapa rekaman, ASP.NET 2.0 menawarkan kontrol DataList dan Repeater (keduanya juga tersedia di ASP.NET versi 1.x). Kontrol DataList dan Repeater merender kontennya menggunakan templat daripada BoundFields, CheckBoxFields, ButtonFields, dan sebagainya. Seperti GridView, DataList dirender sebagai HTML <table>, tetapi memungkinkan beberapa rekaman sumber data ditampilkan per baris tabel. Repeater, di sisi lain, tidak merender markup tambahan selain apa yang Anda tentukan secara eksplisit, dan merupakan kandidat yang ideal ketika Anda membutuhkan kontrol yang tepat atas markup yang dipancarkan.

Selama selusin tutorial berikutnya atau lebih, kita akan melihat membangun pola pelaporan umum dengan kontrol DataList dan Repeater, dimulai dengan dasar-dasar menampilkan data dengan templat kontrol ini. Kita akan melihat cara memformat kontrol ini, cara mengubah tata letak rekaman sumber data di DataList, skenario master/detail umum, cara mengedit dan menghapus data, cara halaman melalui rekaman, dan sebagainya.

Langkah 1: Menambahkan Halaman Web Tutorial DataList dan Repeater

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

  • Default.aspx
  • Basics.aspx
  • Formatting.aspx
  • RepeatColumnAndDirection.aspx
  • NestedControls.aspx

Membuat Folder DataListRepeaterBasics dan Menambahkan Tutorial ASP.NET Halaman

Gambar 1: Buat DataListRepeaterBasics Folder dan Tambahkan Tutorial ASP.NET Halaman

Default.aspx Buka halaman dan seret SectionLevelTutorialListing.ascx Kontrol Pengguna dari folder ke UserControls permukaan Desain. Kontrol Pengguna ini, yang kami buat dalam tutorial Halaman Master dan Navigasi Situs, menghitung peta situs dan menampilkan tutorial dari bagian saat ini dalam daftar berpoin.

Tambahkan Kontrol Pengguna SectionLevelTutorialListing.ascx ke Default.aspx

Gambar 2: Tambahkan SectionLevelTutorialListing.ascx Kontrol Pengguna ke Default.aspx (Klik untuk melihat gambar ukuran penuh)

Agar daftar berpoin menampilkan tutorial DataList dan Repeater yang akan kita buat, kita perlu menambahkannya ke peta situs. Web.sitemap Buka file dan tambahkan markup berikut setelah markup simpul peta situs Menambahkan Tombol Kustom:

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

Perbarui Peta Situs untuk Menyertakan Halaman ASP.NET Baru

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

Langkah 2: Menampilkan Informasi Produk dengan DataList

Mirip dengan FormView, output yang dirender kontrol DataList bergantung pada templat daripada BoundFields, CheckBoxFields, dan sebagainya. Tidak seperti FormView, DataList dirancang untuk menampilkan sekumpulan rekaman daripada yang soliter. Mari kita mulai tutorial ini dengan melihat informasi produk yang mengikat ke DataList. Mulailah dengan membuka Basics.aspx halaman di DataListRepeaterBasics folder. Selanjutnya, seret DataList dari Kotak Alat ke Perancang. Seperti yang diilustrasikan Gambar 4, sebelum menentukan templat DataList, Perancang menampilkannya sebagai kotak abu-abu.

Seret DataList Dari Kotak Alat Ke Perancang

Gambar 4: Seret Daftar Data Dari Kotak Alat Ke Perancang (Klik untuk melihat gambar ukuran penuh)

Dari tag pintar DataList, tambahkan ObjectDataSource baru dan konfigurasikan untuk menggunakan ProductsBLL metode kelas.GetProducts Karena kami membuat DataList baca-saja dalam tutorial ini, atur daftar drop-down ke (Tidak Ada) di tab INSERT, UPDATE, dan DELETE wizard.

Memilih untuk Membuat ObjectDataSource Baru

Gambar 5: Memilih untuk Membuat ObjectDataSource Baru (Klik untuk melihat gambar ukuran penuh)

Mengonfigurasi ObjectDataSource untuk Menggunakan Kelas ProductsBLL

Gambar 6: Konfigurasikan ObjectDataSource untuk Menggunakan ProductsBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Mengambil Informasi Tentang Semua Produk Menggunakan Metode GetProducts

Gambar 7: Ambil Informasi Tentang Semua Produk Menggunakan GetProducts Metode (Klik untuk melihat gambar ukuran penuh)

Setelah mengonfigurasi ObjectDataSource dan mengaitkannya dengan DataList melalui tag pintarnya, Visual Studio akan secara otomatis membuat ItemTemplate di DataList yang menampilkan nama dan nilai setiap bidang data yang dikembalikan oleh sumber data (lihat markup di bawah). Tampilan default ItemTemplate ini identik dengan templat yang dibuat secara otomatis saat mengikat sumber data ke FormView melalui Perancang.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Catatan

Ingat bahwa saat mengikat sumber data ke kontrol FormView melalui tag pintar FormView, Visual Studio membuat ItemTemplate, , InsertItemTemplatedan EditItemTemplate. Namun, dengan DataList, hanya yang ItemTemplate dibuat. Ini karena DataList tidak memiliki pengeditan bawaan dan menyisipkan dukungan yang sama yang ditawarkan oleh FormView. DataList memang berisi peristiwa terkait pengeditan dan penghapusan, serta mengedit dan menghapus dukungan dapat ditambahkan dengan sedikit kode, tetapi tidak ada dukungan out-of-the-box sederhana seperti halnya FormView. Kita akan melihat cara menyertakan pengeditan dan penghapusan dukungan dengan DataList dalam tutorial mendatang.

Mari kita luangkan waktu sejenak untuk meningkatkan tampilan templat ini. Daripada menampilkan semua bidang data, mari kita hanya menampilkan nama produk, pemasok, kategori, kuantitas per unit, dan harga satuan. Selain itu, mari kita tampilkan nama dalam <h4> judul dan letakkan bidang yang tersisa menggunakan <table> di bawah judul.

Untuk membuat perubahan ini, Anda dapat menggunakan fitur pengeditan templat di Perancang dari tag pintar DataList klik pada tautan Edit Templat atau Anda dapat memodifikasi templat secara manual melalui sintaks deklaratif halaman. Jika Anda menggunakan opsi Edit Templat di Perancang, markup hasil Anda mungkin tidak cocok dengan markup berikut dengan tepat, tetapi ketika dilihat melalui browser akan terlihat sangat mirip dengan cuplikan layar yang ditampilkan di Gambar 8.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Catatan

Contoh di atas menggunakan kontrol Label Web yang propertinya Text diberi nilai sintaks pengikatan data. Atau, kita bisa menghilangkan Label sama sekali, mengetik hanya dalam sintaks pengikatan data. Artinya, alih-alih menggunakan <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> kita bisa saja menggunakan sintaks <%# Eval("CategoryName") %>deklaratif .

Namun, meninggalkan kontrol Label Web menawarkan dua keuntungan. Pertama, ini menyediakan cara yang lebih mudah untuk memformat data berdasarkan data, seperti yang akan kita lihat di tutorial berikutnya. Kedua, opsi Edit Templat di Perancang tidak menampilkan sintaks pengikatan data deklaratif yang muncul di luar beberapa kontrol Web. Sebagai gantinya, antarmuka Edit Templat dirancang untuk memfasilitasi bekerja dengan markup statis dan kontrol Web dan mengasumsikan bahwa pengikatan data apa pun akan dilakukan melalui kotak dialog Edit DataBindings, yang dapat diakses dari tag pintar kontrol Web.

Oleh karena itu, ketika bekerja dengan DataList, yang menyediakan opsi untuk mengedit templat melalui Perancang, saya lebih suka menggunakan kontrol Label Web sehingga konten dapat diakses melalui antarmuka Edit Templat. Seperti yang akan segera kita lihat, Repeater mengharuskan konten templat diedit dari tampilan Sumber. Akibatnya, saat membuat templat Repeater saya akan sering menghilangkan kontrol Label Web kecuali saya tahu saya perlu memformat tampilan teks terikat data berdasarkan logika terprogram.

Setiap Output Produk Dirender Menggunakan DataList s ItemTemplate

Gambar 8: Setiap Output Produk Dirender Menggunakan Daftar Data ItemTemplate (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Meningkatkan Tampilan DataList

Seperti GridView, DataList menawarkan sejumlah properti terkait gaya, seperti Font, , ForeColor, BackColorCssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyledan sebagainya. Saat bekerja dengan kontrol GridView dan DetailsView, kami membuat file Skin dalam DataWebControls Tema yang telah ditentukan CssClass sebelumnya untuk kedua kontrol ini dan CssClass properti untuk beberapa subproperti mereka (RowStyle, , HeaderStyledan sebagainya). Mari kita lakukan hal yang sama untuk DataList.

Seperti yang dibahas dalam tutorial Menampilkan Data Dengan ObjectDataSource , file Skin menentukan properti terkait penampilan default untuk kontrol Web; Tema adalah kumpulan file Skin, CSS, image, dan JavaScript yang menentukan tampilan dan nuansa tertentu untuk situs web. Dalam tutorial Menampilkan Data Dengan ObjectDataSource, kami membuat DataWebControls Tema (yang diimplementasikan sebagai folder dalam App_Themes folder) yang memiliki, saat ini, dua file Skin - GridView.skin dan DetailsView.skin. Mari kita tambahkan file Skin ketiga untuk menentukan pengaturan gaya yang telah ditentukan sebelumnya untuk DataList.

Untuk menambahkan file Skin, klik kanan folder App_Themes/DataWebControls , pilih Tambahkan Item Baru, dan pilih opsi File Kulit dari daftar. Beri nama file DataList.skin.

Cuplikan layar memperlihatkan jendela Tambahkan Item Baru dengan Default.skin dimasukkan sebagai nama file Skin baru.

Gambar 9: Buat File Kulit Baru Bernama DataList.skin (Klik untuk melihat gambar ukuran penuh)

Gunakan markup berikut untuk DataList.skin file:

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

Pengaturan ini menetapkan kelas CSS yang sama ke properti DataList yang sesuai seperti yang digunakan dengan kontrol GridView dan DetailsView. Kelas CSS yang digunakan di sini DataWebControlStyle, , AlternatingRowStyleRowStyle, dan sebagainya didefinisikan dalam Styles.css file dan ditambahkan dalam tutorial sebelumnya.

Dengan penambahan file Skin ini, tampilan DataList diperbarui di Perancang (Anda mungkin perlu menyegarkan tampilan Desainer untuk melihat efek file Skin baru; dari menu Tampilan, pilih Refresh). Seperti yang ditunjukkan Gambar 10, setiap produk alternatif memiliki warna latar belakang merah muda muda.

Cuplikan layar memperlihatkan bagaimana file Skin baru memperbarui tampilan DataList di Perancang.

Gambar 10: Buat File Kulit Baru Bernama DataList.skin (Klik untuk melihat gambar ukuran penuh)

Langkah 4: Menjelajahi Templat Lain Daftar Data

Selain ItemTemplate, DataList mendukung enam templat opsional lainnya:

  • HeaderTemplate jika disediakan, menambahkan baris header ke output dan digunakan untuk merender baris ini
  • AlternatingItemTemplate digunakan untuk merender item alternatif
  • SelectedItemTemplatedigunakan untuk merender item yang dipilih; item yang dipilih adalah item yang indeksnya sesuai dengan properti DataList SelectedIndex
  • EditItemTemplate digunakan untuk merender item yang sedang diedit
  • SeparatorTemplate jika disediakan, menambahkan pemisah antara setiap item dan digunakan untuk merender pemisah ini
  • FooterTemplate - jika disediakan, menambahkan baris footer ke output dan digunakan untuk merender baris ini

Saat menentukan HeaderTemplate atau FooterTemplate, DataList menambahkan baris header atau footer tambahan ke output yang dirender. Seperti baris header dan footer GridView, header dan footer dalam DataList tidak terikat ke data. Oleh karena itu, sintaks pengikatan data apa pun dalam HeaderTemplate atau FooterTemplate yang mencoba mengakses data terikat akan mengembalikan string kosong.

Catatan

Seperti yang kita lihat dalam tutorial Menampilkan Informasi Ringkasan di Footer GridView, sementara baris header dan footer tidak mendukung sintaks pengikatan data, informasi khusus data dapat disuntikkan langsung ke baris ini dari penanganan aktivitas GridView RowDataBound . Teknik ini dapat digunakan untuk menghitung total yang berjalan atau informasi lain dari data yang terikat ke kontrol serta menetapkan informasi tersebut ke footer. Konsep yang sama ini dapat diterapkan ke kontrol DataList dan Repeater; satu-satunya perbedaan adalah bahwa untuk DataList dan Repeater membuat penanganan aktivitas untuk ItemDataBound peristiwa (bukan untuk RowDataBound peristiwa).

Misalnya, mari kita sebutkan Informasi Produk yang ditampilkan di bagian atas hasil DataList dalam judul <h3> . Untuk mencapai hal ini, tambahkan HeaderTemplate dengan markup yang sesuai. Dari Perancang, ini dapat dicapai dengan mengklik tautan Edit Templat di tag pintar DataList, memilih Templat Header dari daftar drop-down, dan mengetikkan teks setelah memilih opsi Judul 3 dari daftar drop-down gaya (lihat Gambar 11).

Menambahkan HeaderTemplate dengan Informasi Produk Teks

Gambar 11: Tambahkan HeaderTemplate dengan Informasi Produk Teks (Klik untuk melihat gambar ukuran penuh)

Atau, ini dapat ditambahkan secara deklaratif dengan memasukkan markup berikut dalam <asp:DataList> tag:

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

Untuk menambahkan sedikit ruang di antara setiap daftar produk, mari kita tambahkan SeparatorTemplate yang menyertakan baris di antara setiap bagian. Tag aturan horizontal (<hr>), menambahkan pembagi seperti itu. SeparatorTemplate Buat sehingga memiliki markup berikut:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Catatan

HeaderTemplate Seperti dan FooterTemplates, SeparatorTemplate tidak terikat ke rekaman apa pun dari sumber data dan oleh karena itu tidak dapat langsung mengakses rekaman sumber data yang terikat ke DataList.

Setelah membuat penambahan ini, saat melihat halaman melalui browser, halaman akan terlihat mirip dengan Gambar 12. Perhatikan baris header dan baris di antara setiap daftar produk.

Daftar Data Menyertakan Baris Header dan Aturan Horizontal Di Antara Setiap Daftar Produk

Gambar 12: Daftar Data Menyertakan Baris Header dan Aturan Horizontal Di Antara Setiap Daftar Produk (Klik untuk melihat gambar ukuran penuh)

Langkah 5: Merender Markup Tertentu dengan Kontrol Pengulang

Jika Anda melakukan Tampilan/Sumber dari browser Saat mengunjungi contoh DataList dari Gambar 12, Anda akan melihat bahwa DataList memancarkan HTML <table> yang berisi baris tabel (<tr>) dengan sel tabel tunggal (<td>) untuk setiap item yang terikat ke DataList. Output ini, pada kenyataannya, identik dengan apa yang akan dipancarkan dari GridView dengan satu TemplateField. Seperti yang akan kita lihat dalam tutorial di masa mendatang, DataList memang memungkinkan penyesuaian output lebih lanjut, memungkinkan kami menampilkan beberapa rekaman sumber data per baris tabel.

Bagaimana jika Anda tidak ingin memancarkan HTML <table>, meskipun? Untuk kontrol total dan lengkap atas markup yang dihasilkan oleh kontrol Web data, kita harus menggunakan kontrol Pengulang. Seperti DataList, Repeater dibangun berdasarkan templat. Namun, Repeater hanya menawarkan lima templat berikut:

  • HeaderTemplate jika disediakan, menambahkan markup yang ditentukan sebelum item
  • ItemTemplate digunakan untuk merender item
  • AlternatingItemTemplate jika disediakan, digunakan untuk merender item alternatif
  • SeparatorTemplate jika disediakan, menambahkan markup yang ditentukan di antara setiap item
  • FooterTemplate - jika disediakan, menambahkan markup yang ditentukan setelah item

Di ASP.NET 1.x, kontrol Repeater biasanya digunakan untuk menampilkan daftar berpoin yang datanya berasal dari beberapa sumber data. Dalam kasus seperti itu HeaderTemplate , dan FooterTemplates akan berisi tag pembuka dan penutup <ul> , masing-masing, sementara ItemTemplate akan berisi <li> elemen dengan sintaks pengikatan data. Pendekatan ini masih dapat digunakan dalam ASP.NET 2.0 seperti yang kita lihat dalam dua contoh dalam tutorial Halaman Master dan Navigasi Situs:

  • Site.master Di halaman master, Pengulang digunakan untuk menampilkan daftar berpoin isi peta situs tingkat atas (Pelaporan Dasar, Laporan Pemfilteran, Pemformatan yang Dikustomisasi, dan sebagainya); Pengulang berlapis lainnya digunakan untuk menampilkan bagian turunan dari bagian tingkat atas
  • Di SectionLevelTutorialListing.ascx, Pengulang digunakan untuk menampilkan daftar berpoin dari bagian anak-anak dari bagian peta situs saat ini

Catatan

ASP.NET 2.0 memperkenalkan kontrol BulletedList baru, yang dapat terikat ke kontrol sumber data untuk menampilkan daftar berpoin sederhana. Dengan kontrol BulletedList, kita tidak perlu menentukan HTML terkait daftar; sebagai gantinya, kami hanya menunjukkan bidang data untuk ditampilkan sebagai teks untuk setiap item daftar.

Repeater berfungsi sebagai menangkap semua kontrol Web data. Jika tidak ada kontrol yang menghasilkan markup yang diperlukan, kontrol Pengulang dapat digunakan. Untuk mengilustrasikan menggunakan Repeater, mari kita buat daftar kategori yang ditampilkan di atas Daftar Data Informasi Produk yang dibuat di Langkah 2. Secara khusus, mari kita memiliki kategori yang ditampilkan dalam HTML <table> baris tunggal dengan setiap kategori ditampilkan sebagai kolom dalam tabel.

Untuk mencapai hal ini, mulailah dengan menyeret kontrol Pengulang dari Kotak Alat ke Perancang, di atas Daftar Data Informasi Produk. Seperti halnya DataList, Repeater awalnya ditampilkan sebagai kotak abu-abu hingga templatnya telah ditentukan.

Menambahkan Pengulang ke Perancang

Gambar 13: Tambahkan Pengulang ke Perancang (Klik untuk melihat gambar ukuran penuh)

Hanya ada satu opsi di tag pintar Pengulang: Pilih Sumber Data. Pilih untuk membuat ObjectDataSource baru dan konfigurasikan untuk menggunakan CategoriesBLL metode kelas s GetCategories .

Membuat ObjectDataSource Baru

Gambar 14: Buat ObjectDataSource Baru (Klik untuk melihat gambar ukuran penuh)

Mengonfigurasi ObjectDataSource untuk Menggunakan Kelas CategoriesBLL

Gambar 15: Konfigurasikan ObjectDataSource untuk Menggunakan CategoriesBLL Kelas (Klik untuk melihat gambar ukuran penuh)

Mengambil Informasi Tentang Semua Kategori Menggunakan Metode GetCategories

Gambar 16: Ambil Informasi Tentang Semua Kategori Menggunakan GetCategories Metode (Klik untuk melihat gambar ukuran penuh)

Tidak seperti DataList, Visual Studio tidak secara otomatis membuat ItemTemplate untuk Repeater setelah mengikatnya ke sumber data. Selain itu, templat Repeater s tidak dapat dikonfigurasi melalui Perancang dan harus ditentukan secara deklaratif.

Untuk menampilkan kategori sebagai baris <table> tunggal dengan kolom untuk setiap kategori, kita memerlukan Repeater untuk memancarkan markup yang mirip dengan yang berikut ini:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

<td>Category X</td> Karena teks adalah bagian yang berulang, ini akan muncul di ItemTemplate Pengulang. Markup yang muncul sebelum <table><tr> - - akan ditempatkan di HeaderTemplate saat markup akhir - - </tr></table> akan ditempatkan di FooterTemplate. Untuk memasukkan pengaturan templat ini, buka bagian deklaratif halaman ASP.NET dengan mengklik tombol Sumber di sudut kiri bawah dan ketik sintaks berikut:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Repeater memancarkan markup yang tepat seperti yang ditentukan oleh templatnya, tidak lebih, tidak lebih dari itu. Gambar 17 menunjukkan output Repeater saat dilihat melalui browser.

Tabel< HTML >Baris Tunggal Mencantumkan Setiap Kategori dalam Kolom Terpisah

Gambar 17: HTML <table> Baris Tunggal Mencantumkan Setiap Kategori dalam Kolom Terpisah (Klik untuk melihat gambar ukuran penuh)

Langkah 6: Meningkatkan Penampilan Pengulang

Karena Repeater memancarkan dengan tepat markup yang ditentukan oleh templatnya, seharusnya tidak mengherankan bahwa tidak ada properti terkait gaya untuk Repeater. Untuk mengubah tampilan konten yang dihasilkan oleh Repeater, kita harus menambahkan konten HTML atau CSS yang diperlukan secara manual langsung ke templat Repeater s.

Misalnya, mari kita memiliki kolom kategori warna latar belakang alternatif, seperti dengan baris alternatif di DataList. Untuk mencapai hal ini, kita perlu menetapkan RowStyle kelas CSS ke setiap item Repeater dan AlternatingRowStyle kelas CSS ke setiap item Repeater alternatif melalui ItemTemplate templat dan AlternatingItemTemplate , seperti:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Mari kita tambahkan juga baris header ke output dengan teks Kategori Produk. Karena kita tidak tahu berapa banyak kolom yang dihasilkan <table> akan terdiri dari, cara paling sederhana untuk menghasilkan baris header yang dijamin untuk menjangkau semua kolom adalah dengan menggunakan dua<table> d. Baris pertama <table> akan berisi dua baris baris header dan baris yang akan berisi baris <table> tunggal kedua yang memiliki kolom untuk setiap kategori dalam sistem. Artinya, kita ingin memancarkan markup berikut:

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Berikut ini HeaderTemplate dan FooterTemplate menghasilkan markup yang diinginkan:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Gambar 18 memperlihatkan Pengulang setelah perubahan ini dibuat.

Kolom Kategori Bergantian dalam Warna Latar Belakang dan Menyertakan Baris Header

Gambar 18: Kolom Kategori Alternatif dalam Warna Latar Belakang dan Menyertakan Baris Header (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Meskipun kontrol GridView memudahkan untuk menampilkan, mengedit, menghapus, mengurutkan, dan halaman melalui data, tampilannya sangat kotak dan seperti kisi. Untuk kontrol lebih besar atas tampilan, kita perlu beralih ke kontrol DataList atau Repeater. Kedua kontrol ini menampilkan sekumpulan rekaman menggunakan templat alih-alih BoundFields, CheckBoxFields, dan sebagainya.

DataList dirender sebagai HTML <table> yang, secara default, menampilkan setiap rekaman sumber data dalam satu baris tabel, sama seperti GridView dengan satu TemplateField. Seperti yang akan kita lihat dalam tutorial di masa mendatang, namun, DataList mengizinkan beberapa rekaman ditampilkan per baris tabel. Repeater, di sisi lain, secara ketat memancarkan markup yang ditentukan dalam templatnya; ini tidak menambahkan markup tambahan dan oleh karena itu umumnya digunakan untuk menampilkan data dalam elemen HTML selain <table> (seperti dalam daftar berpoin).

Meskipun DataList dan Repeater menawarkan lebih banyak fleksibilitas dalam output yang dirender, mereka tidak memiliki banyak fitur bawaan yang ditemukan di GridView. Seperti yang akan kita periksa dalam tutorial mendatang, beberapa fitur ini dapat dicolokkan kembali tanpa terlalu banyak upaya, tetapi perlu diingat bahwa menggunakan DataList atau Repeater sebagai pengganti GridView membatasi fitur yang dapat Anda gunakan tanpa harus menerapkan fitur tersebut sendiri.

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.

Terima kasih khusus untuk

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Peninjau utama untuk tutorial ini adalah Yaakov Ellis, Liz Shulok, Randy Schmidt, dan Stacy Park. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

Berikutnya