Tombol Kustom di DataList dan Repeater (C#)

2025-05-03

Dalam tutorial ini kita akan membangun antarmuka yang menggunakan Repeater untuk mencantumkan kategori dalam sistem, dengan setiap kategori menyediakan tombol untuk menampilkan produk terkait menggunakan kontrol BulletedList.

Pendahuluan

Sepanjang tujuh belas tutorial DataList dan Repeater sebelumnya, kami telah membuat contoh yang hanya dapat dibaca serta contoh yang dapat diedit dan dihapus. Untuk memfasilitasi kemampuan pengeditan dan penghapusan dalam DataList, kami menambahkan tombol ke DataList ItemTemplate yang, ketika diklik, menyebabkan postback dan memicu peristiwa DataList yang sesuai dengan properti tombol CommandName. Misalnya, menambahkan tombol ke ItemTemplate dengan nilai properti CommandName bernilai "Edit" menyebabkan EditCommand pada DataList akan diaktifkan saat postback; satu dengan nilai properti CommandName bernilai "Hapus" akan memunculkan DeleteCommand.

Selain tombol Edit dan Hapus, kontrol DataList dan Repeater juga dapat menyertakan Tombol, LinkButtons, atau ImageButtons yang, saat diklik, melakukan beberapa logika sisi server kustom. Dalam tutorial ini kita akan membangun antarmuka yang menggunakan Repeater untuk mencantumkan kategori dalam sistem. Untuk setiap kategori, Repeater akan menyertakan tombol untuk menampilkan kategori produk terkait menggunakan kontrol BulletedList (lihat Gambar 1).

Gambar 1: Mengklik Tautan Tampilkan Produk Menampilkan Produk Kategori dalam Daftar Berpoin (Klik untuk melihat gambar ukuran penuh)

Langkah 1: Menambahkan Halaman Web Tutorial Tombol Kustom

Sebelum kita melihat cara menambahkan tombol kustom, mari kita luangkan waktu sejenak untuk membuat halaman ASP.NET dalam proyek situs web kita yang akan kita butuhkan untuk tutorial ini. Mulailah dengan menambahkan folder baru bernama CustomButtonsDataListRepeater. Selanjutnya, tambahkan dua halaman ASP.NET berikut ke folder tersebut Site.master , pastikan untuk mengaitkan setiap halaman dengan halaman master:

Default.aspx
CustomButtons.aspx

Menambahkan Halaman ASP.NET untuk Tutorial Buttons-Related Kustom

Gambar 2: Tambahkan Halaman ASP.NET untuk Tutorial Buttons-Related Kustom

Seperti di folder lain, Default.aspx di CustomButtonsDataListRepeater folder akan mencantumkan tutorial di bagiannya. Ingat bahwa SectionLevelTutorialListing.ascx Kontrol Pengguna menyediakan fungsionalitas ini. Tambahkan Kontrol Pengguna ini ke Default.aspx dengan menyeretnya dari Penjelajah Solusi ke tampilan Desain halaman.

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

Terakhir, tambahkan halaman sebagai entri ke Web.sitemap file. Secara khusus, tambahkan markup berikut setelah Penomoran dan Pengurutan dengan DataList dan Repeater <siteMapNode>:

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</siteMapNode>

Setelah memperbarui Web.sitemap, luangkan waktu sejenak untuk melihat situs web tutorial melalui browser. Menu di sebelah kiri sekarang menyertakan item untuk tutorial pengeditan, penyisipan, dan penghapusan.

Peta Situs Sekarang Menyertakan Entri untuk Tutorial Tombol Kustom

Gambar 4: Peta Situs Sekarang Menyertakan Entri untuk Tutorial Tombol Kustom

Langkah 2: Menambahkan Daftar Kategori

Untuk tutorial ini, kita perlu membuat Pengulang yang mencantumkan semua kategori bersama dengan tombol LinkButton "Tampilkan Produk" yang, ketika diklik, menampilkan produk dari kategori terkait dalam daftar berpoin. Mari kita pertama-tama buat Repeater sederhana yang mencantumkan kategori dalam sistem. Mulailah dengan membuka CustomButtons.aspx halaman di CustomButtonsDataListRepeater folder. Seret Repeater dari Kotak Alat ke Perancang dan atur propertinya ID ke Categories. Selanjutnya, buat kontrol sumber data baru dari tag pintar Repeater. Secara khusus, buat kontrol ObjectDataSource baru bernama CategoriesDataSource yang memilih datanya dari CategoriesBLL metode kelas s GetCategories() .

Gambar 5: Konfigurasikan ObjectDataSource untuk Menggunakan CategoriesBLL Kelas s Metode GetCategories()Klik untuk melihat gambar ukuran penuh

Tidak seperti kontrol DataList, di mana Visual Studio membuat default ItemTemplate berdasarkan sumber data, templat Repeater harus ditentukan secara manual. Selain itu, templat Repeater s harus dibuat dan diedit secara deklaratif (yaitu, tidak ada opsi Edit Templat di tag pintar Repeater).

Klik tab Sumber di sudut kiri bawah dan tambahkan ItemTemplate yang menampilkan nama kategori dalam <h3> elemen dan deskripsinya dalam tag paragraf; sertakan SeparatorTemplate yang menampilkan aturan horizontal (<hr />) di antara setiap kategori. Tambahkan juga LinkButton dengan propertinya Text diatur menjadi Tampilkan Produk. Setelah menyelesaikan langkah-langkah ini, markup deklaratif halaman Anda akan terlihat seperti berikut ini:

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

Gambar 6 memperlihatkan halaman saat ditampilkan melalui browser. Setiap nama dan deskripsi kategori tercantum. Tombol Tampilkan Produk, saat diklik, menyebabkan postback tetapi belum melakukan tindakan apa pun.

Gambar 6: Setiap Nama dan Deskripsi Kategori Ditampilkan, Bersama dengan Tampilkan Produk LinkButton (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menjalankan Logika Server-Side Saat LinkButton Tampilkan Produk Diklik

Setiap kali Tombol, LinkButton, atau ImageButton dalam templat dalam DataList atau Repeater diklik, postback terjadi dan peristiwa DataList atau Repeater ItemCommand diaktifkan. Selain ItemCommand event, kontrol DataList juga dapat memicu event lain yang lebih spesifik jika properti tombol CommandName diatur ke salah satu string yang dipesan ( Hapus, Edit, Batal, Perbarui, atau Pilih ), tetapi ItemCommand event selalu diaktifkan.

Ketika tombol diklik dalam DataList atau Repeater, sering kali kita perlu meneruskan tombol mana yang diklik (jika mungkin ada beberapa tombol dalam kontrol, seperti tombol Edit dan Hapus) dan mungkin beberapa informasi tambahan (seperti nilai kunci utama item yang tombolnya diklik). Tombol, LinkButton, dan ImageButton menyediakan dua properti yang nilainya diteruskan ke penanganan ItemCommand aktivitas:

CommandName string yang biasanya digunakan untuk mengidentifikasi setiap tombol dalam templat
CommandArgument umumnya digunakan untuk menahan nilai beberapa bidang data, seperti nilai kunci primer

Untuk contoh ini, atur properti CommandName pada LinkButton ke ShowProducts dan ikat nilai kunci primer CategoryID pada rekaman saat ini ke properti CommandArgument menggunakan sintaks CategoryArgument='<%# Eval("CategoryID") %>' pengikatan data. Setelah menentukan kedua properti ini, sintaksis deklaratif LinkButton akan terlihat seperti berikut ini:

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

Saat tombol diklik, postback terjadi dan peristiwa DataList atau Repeater diaktifkan ItemCommand . Pengendali acara diberikan nilai tombol CommandName dan CommandArgument.

Buat penangan kejadian untuk peristiwa ItemCommand dari Repeater dan catat parameter kedua yang diteruskan ke penangan kejadian tersebut (bernama e). Parameter kedua ini berjenis RepeaterCommandEventArgs dan memiliki empat properti berikut:

CommandArgument nilai dari properti tombol yang diklik CommandArgument
CommandNamenilai properti tombol CommandName
CommandSource referensi ke kontrol tombol yang diklik
Item referensi ke RepeaterItem yang berisi tombol yang diklik; setiap catatan yang terikat ke Repeater ditampilkan sebagai RepeaterItem

Karena kategori CategoryID yang dipilih diteruskan melalui properti CommandArgument, kita bisa mendapatkan kumpulan produk yang terkait dengan kategori tersebut di penanganan acara ItemCommand. Produk-produk ini kemudian dapat terhubung ke kontrol BulletedList di ItemTemplate (yang masih belum kami tambahkan). Yang tersisa, kemudian, adalah menambahkan BulletedList, mereferensikan dalam pengendali acara ItemCommand, dan mengaitkan kumpulan produk untuk kategori yang dipilih, yang akan kita atasi di Langkah 4.

Nota

Penangkap peristiwa DataList ItemCommand diberi objek tipe DataListCommandEventArgs, yang menawarkan empat properti yang sama dengan kelas RepeaterCommandEventArgs.

Langkah 4: Menampilkan Produk Kategori terpilih dalam Daftar Berpoin

Produk dari kategori yang dipilih dapat ditampilkan dalam Repeater menggunakan ItemTemplate beragam kontrol. Kita dapat menambahkan Repeater berlapis lainnya, DataList, DropDownList, GridView, dan sebagainya. Karena kita ingin menampilkan produk dalam bentuk daftar berpoin, maka kita akan menggunakan kontrol BulletedList. Kembali ke markup deklaratif halaman CustomButtons.aspx, tambahkan kontrol BulletedList ke ItemTemplate setelah tombol Tautan Produk. Atur BulletedLists ID ke ProductsInCategory. BulletedList menampilkan nilai bidang data yang ditentukan melalui DataTextField properti ; karena kontrol ini akan memiliki informasi produk yang terikat padanya, atur DataTextField properti ke ProductName.

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

Di penanganan ItemCommand aktivitas, referensikan kontrol ini menggunakan e.Item.FindControl("ProductsInCategory") dan ikat ke kumpulan produk yang terkait dengan kategori yang dipilih.

protected void Categories_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "ShowProducts")
    {
        // Determine the CategoryID
        int categoryID = Convert.ToInt32(e.CommandArgument);
        // Get the associated products from the ProudctsBLL and bind
        // them to the BulletedList
        BulletedList products =
            (BulletedList)e.Item.FindControl("ProductsInCategory");
        ProductsBLL productsAPI = new ProductsBLL();
        products.DataSource =
            productsAPI.GetProductsByCategoryID(categoryID);
        products.DataBind());
    }
}

Sebelum melakukan tindakan apa pun di penangan acara ItemCommand, bijaksana untuk terlebih dahulu memeriksa nilai dari CommandName yang masuk. Karena pengendali ItemCommand acara diaktifkan ketika tombol apapun diklik, jika ada beberapa tombol dalam templat, gunakan nilai CommandName untuk membedakan tindakan apa yang harus diambil. Memeriksa CommandName di sini tidak relevan, karena kita hanya memiliki satu tombol, tetapi adalah kebiasaan baik yang perlu dibentuk. Selanjutnya, CategoryID dari kategori yang dipilih diambil dari properti CommandArgument. Kontrol BulletedList dalam templat kemudian direferensikan dan terikat ke hasil dari metode kelas ProductsBLLGetProductsByCategoryID(categoryID).

Dalam tutorial sebelumnya yang menggunakan tombol dalam DataList, seperti Gambaran Umum Pengeditan dan Penghapusan Data dalam DataList, kami menentukan nilai kunci utama item tertentu melalui DataKeys koleksi. Meskipun pendekatan ini berfungsi dengan baik dengan DataList, Repeater tidak memiliki properti DataKeys. Sebagai gantinya, kita harus menggunakan pendekatan alternatif untuk menyediakan nilai kunci utama, seperti melalui properti tombol s CommandArgument atau dengan menetapkan nilai kunci utama ke kontrol Web Label tersembunyi dalam templat dan membaca nilainya kembali di ItemCommand penanganan aktivitas menggunakan e.Item.FindControl("LabelID").

Setelah menyelesaikan ItemCommand penanganan aktivitas, luangkan waktu sejenak untuk menguji halaman ini di browser. Seperti yang ditunjukkan Gambar 7, mengklik tautan Tampilkan Produk menyebabkan postback dan menampilkan produk untuk kategori yang dipilih dalam Daftar Poin. Selain itu, perhatikan bahwa informasi produk ini tetap ada, bahkan jika tautan Tampilkan Produk di kategori lain diklik.

Nota

Jika Anda ingin mengubah perilaku laporan ini, sehingga produk dari satu kategori tercantum satu per satu, cukup atur properti kontrol EnableViewState BulletedList ke False.

Gambar 7: Daftar Berpoin digunakan untuk Menampilkan Produk Kategori yang Dipilih (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Kontrol DataList dan Repeater dapat menyertakan sejumlah Tombol, LinkButtons, atau ImageButtons dalam templat mereka. Tombol tersebut, ketika diklik, menyebabkan postback dan memicu peristiwa ItemCommand. Untuk mengaitkan tindakan sisi server kustom dengan tombol yang sedang diklik, buat penanganan aktivitas untuk peristiwa tersebut ItemCommand . Dalam penanganan aktivitas ini, pertama-tama periksa nilai masuk CommandName untuk menentukan tombol mana yang diklik. Informasi tambahan secara opsional dapat disediakan melalui properti tombol s CommandArgument .

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.

Ucapan terima kasih khusus kepada

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

Berikutnya

Bagikan melalui