Bagikan melalui

Memformat Ulang DataList dan Repeater Berdasarkan Data (C#)

oleh Scott Mitchell

Unduh PDF

Dalam tutorial ini kita akan menelusuri contoh bagaimana kita memformat tampilan kontrol DataList dan Repeater, baik dengan menggunakan fungsi pemformatan dalam templat atau dengan menangani peristiwa DataBound.

Pendahuluan

Seperti yang kita lihat dalam tutorial sebelumnya, DataList menawarkan sejumlah properti terkait gaya yang memengaruhi penampilannya. Secara khusus, kita melihat cara menetapkan kelas CSS default ke properti DataList s HeaderStyle, , ItemStyleAlternatingItemStyle, dan SelectedItemStyle . Selain keempat properti ini, DataList menyertakan sejumlah properti lain yang terkait gaya, seperti Font, ForeColor, BackColor, dan BorderWidth, di antaranya. Kontrol Repeater tidak berisi properti terkait gaya apa pun. Pengaturan gaya tersebut harus dibuat langsung dalam markup di templat Repeater s.

Namun, seringkali, bagaimana data harus diformat tergantung pada data itu sendiri. Misalnya, saat mencantumkan produk, kami mungkin ingin menampilkan informasi produk dengan warna huruf abu-abu muda jika produk tersebut sudah tidak tersedia, atau kami mungkin ingin menyoroti nilai UnitsInStock jika nol. Seperti yang kita lihat dalam tutorial sebelumnya, GridView, DetailsView, dan FormView menawarkan dua cara berbeda untuk memformat penampilan mereka berdasarkan data mereka:

  • Peristiwa DataBound membuat penanganan aktivitas untuk peristiwa yang sesuaiDataBound, yang diaktifkan setelah data terikat ke setiap item (untuk GridView itu adalah RowDataBound peristiwa; untuk DataList dan Repeater itu adalah ItemDataBound peristiwa). Dalam penanganan acara tersebut, data yang baru saja terikat dapat diperiksa dan keputusan tentang pemformatan dapat dibuat. Kami memeriksa teknik ini dalam tutorial Pemformatan Kustom Berdasarkan Data .
  • Fungsi Pemformatan dalam Templat saat menggunakan TemplateFields di kontrol DetailsView atau GridView, atau templat dalam kontrol FormView, kita dapat menambahkan fungsi pemformatan ke kelas code-behind halaman ASP.NET, Lapisan Logika Bisnis, atau pustaka kelas lain yang dapat diakses dari aplikasi web. Fungsi pemformatan ini dapat menerima jumlah parameter input secara sembarang, tetapi harus mengembalikan HTML yang akan dirender di dalam templat. Fungsi pemformatan pertama kali diperiksa dalam tutorial Menggunakan TemplateFields dalam GridView Control .

Kedua teknik pemformatan ini tersedia dengan kontrol DataList dan Repeater. Dalam tutorial ini kita akan menelusuri contoh menggunakan kedua teknik untuk kedua kontrol.

ItemDataBoundMenggunakan Pengendali Acara

Saat data dihubungkan ke DataList, baik melalui kontrol sumber data atau penetapan data secara terprogram ke properti kontrol dan DataSource memanggil metodenya DataBind(), peristiwa DataList DataBinding terpicu, data pada sumber dihitung, dan setiap rekaman data dihubungkan ke DataList. Untuk setiap rekaman di sumber data, DataList membuat DataListItem objek yang kemudian terikat ke rekaman saat ini. Selama proses ini, DataList memunculkan dua peristiwa:

  • ItemCreated api setelah DataListItem dibuat
  • ItemDataBound dipicu setelah rekaman saat ini telah terikat ke DataListItem

Langkah-langkah berikut menguraikan proses pengikatan data untuk kontrol DataList.

  1. Peristiwa DataList DataBinding diaktifkan

  2. Data terikat ke DataList

    Untuk setiap rekaman di sumber data

    1. Membuat DataListItem objek
    2. Aktifkan ItemCreated peristiwa
    3. Mengikat rekaman ke DataListItem
    4. Aktifkan ItemDataBound peristiwa
    5. Tambahkan DataListItem ke koleksi Items

Saat mengikat data ke kontrol Repeater, data akan berkembang melalui urutan langkah yang sama persis. Satu-satunya perbedaan adalah alih-alih DataListItem instance dibuat, Repeater menggunakan RepeaterItems.

Nota

Pembaca yang cermat mungkin telah melihat sedikit anomali antara urutan langkah-langkah yang terjadi ketika DataList dan Repeater terhubung dengan data dibandingkan dengan ketika GridView terhubung dengan data. Pada akhir proses pengikatan data, GridView memicu DataBound event; namun, kontrol DataList maupun Repeater tidak memiliki event seperti itu. Ini karena kontrol DataList dan Repeater dibuat kembali dalam jangka waktu ASP.NET 1.x, sebelum pola penanganan peristiwa pra-dan pasca-tingkat menjadi umum.

Seperti halnya GridView, salah satu opsi untuk pemformatan berdasarkan data adalah membuat penanganan aktivitas untuk peristiwa tersebut ItemDataBound . Penanganan aktivitas ini akan memeriksa data yang baru saja terikat ke DataListItem atau RepeaterItem dan memengaruhi pemformatan kontrol sesuai kebutuhan.

Untuk kontrol DataList, perubahan pemformatan untuk seluruh item dapat diimplementasikan menggunakan properti terkait gaya DataListItem, yang mencakup standar Font, ForeColor, BackColor, CssClass, dan sebagainya. Untuk memengaruhi pemformatan kontrol Web tertentu dalam templat DataList, kita perlu mengakses dan memodifikasi gaya kontrol Web tersebut secara terprogram. Kami melihat cara menyelesaikan ini kembali dalam tutorial Pemformatan Kustom Berdasarkan Data . Seperti kontrol Repeater, kelas RepeaterItem tidak memiliki properti berhubungan dengan gaya; oleh karena itu, semua perubahan terkait gaya yang dilakukan pada penangan aktivitas RepeaterItem harus dilakukan dengan mengakses dan memperbarui kontrol Web secara terprogram dalam templat.

ItemDataBound Karena teknik pemformatan untuk DataList dan Repeater hampir identik, contoh kami akan berfokus pada penggunaan DataList.

Langkah 1: Menampilkan Informasi Produk di DataList

Sebelum kita khawatir tentang pemformatan, mari kita terlebih dahulu membuat halaman yang menggunakan DataList untuk menampilkan informasi produk. Dalam tutorial sebelumnya kami membuat DataList yang ItemTemplate menampilkan setiap nama produk, kategori, pemasok, kuantitas per unit, dan harga. Mari kita ulangi fungsionalitas ini di sini dalam tutorial ini. Untuk mencapai hal ini, Anda dapat membuat ulang DataList dan ObjectDataSource dari awal, atau Anda dapat menyalin kontrol tersebut dari halaman yang dibuat di tutorial sebelumnya (Basics.aspx) dan menempelkannya ke halaman untuk tutorial ini (Formatting.aspx).

Setelah Anda mereplikasi fungsionalitas DataList dan ObjectDataSource dari Basics.aspx ke Formatting.aspx, luangkan waktu sejenak untuk mengubah properti DataList ID dari DataList1 ke ItemDataBoundFormattingExample yang lebih deskriptif. Selanjutnya, lihat DataList di browser. Seperti yang ditunjukkan Gambar 1, satu-satunya perbedaan pemformatan antara setiap produk adalah warna latar belakang bergantian.

Produk Tercantum dalam Kontrol Daftar Data

Gambar 1: Produk Tercantum dalam Kontrol Daftar Data (Klik untuk melihat gambar ukuran penuh)

Untuk tutorial ini, mari kita format DataList sehingga produk apa pun dengan harga kurang dari $ 20.00 akan memiliki nama dan harga unit disorot kuning.

Langkah 2: Menentukan Nilai Data secara Terprogram di ItemDataBound Event Handler

Karena hanya produk dengan harga di bawah $20,00 yang akan menerapkan pemformatan kustom, kita harus dapat menentukan setiap harga produk. Saat mengikat data ke DataList, DataList menghitung rekaman di sumber datanya dan, untuk setiap rekaman, membuat instans DataListItem , mengikat rekaman sumber data ke DataListItem. Setelah data catatan tertentu terikat ke objek saat ini DataListItem, event DataList ItemDataBound diaktifkan. Kita dapat membuat penanganan aktivitas untuk peristiwa ini untuk memeriksa nilai data untuk saat ini DataListItem dan, berdasarkan nilai tersebut, membuat perubahan pemformatan apa pun yang diperlukan.

Buat ItemDataBound event untuk DataList dan tambahkan kode berikut:

protected void ItemDataBoundFormattingExample_ItemDataBound
    (object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item ||
        e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // Programmatically reference the ProductsRow instance bound
        // to this DataListItem
        Northwind.ProductsRow product =
            (Northwind.ProductsRow)((System.Data.DataRowView)e.Item.DataItem).Row;
        // See if the UnitPrice is not NULL and less than $20.00
        if (!product.IsUnitPriceNull() && product.UnitPrice < 20)
        {
            // TODO: Highlight the product's name and price
        }
    }
}

Meskipun konsep dan semantik di belakang penanganan aktivitas DataList ItemDataBound sama dengan yang digunakan oleh penanganan aktivitas GridView RowDataBound dalam tutorial Pemformatan Kustom Berdasarkan Data , sintaksnya sedikit berbeda. ItemDataBound Ketika peristiwa diaktifkan, DataListItem yang baru saja terikat ke data diteruskan ke penanganan aktivitas yang sesuai melalui e.Item (alih-alih e.Row, seperti halnya penanganan aktivitas GridViewRowDataBound). Penanganan aktivitas DataList ItemDataBound diaktifkan untuk setiap baris yang ditambahkan ke DataList, termasuk baris header, baris footer, dan baris pemisah. Namun, informasi produk hanya terikat ke baris data. Oleh karena itu, saat menggunakan ItemDataBound event untuk memeriksa data yang terikat ke DataList, kita perlu terlebih dahulu memastikan bahwa kita sedang bekerja dengan item data. Ini dapat dicapai dengan memeriksa DataListItem properti sItemType, yang dapat memiliki salah satu dari delapan nilai berikut:

  • AlternatingItem
  • EditItem
  • Footer
  • Header
  • Item
  • Pager
  • SelectedItem
  • Separator

Item dan AlternatingItem``DataListItem bersama-sama membentuk item data DataList. Dengan asumsi kami bekerja dengan Item atau AlternatingItem, kami mengakses instans aktual ProductsRow yang saat ini terikat ke DataListItem. Properti DataListItem dari DataItem berisi referensi ke objek DataRowView, yang propertinya Row menyediakan referensi ke objek ProductsRow yang sebenarnya.

Selanjutnya, kita memeriksa properti ProductsRow pada instans UnitPrice. Karena bidang Tabel produk UnitPrice memungkinkan NULL nilai, sebelum mencoba mengakses properti UnitPrice, pertama-tama kita harus memeriksa apakah bidang tersebut memiliki nilai NULL menggunakan metode IsUnitPriceNull(). UnitPrice Jika nilainya bukan NULL, kami kemudian memeriksa untuk melihat apakah nilainya kurang dari $20,00. Jika memang di bawah $20,00, maka kita perlu menerapkan pemformatan kustom.

Langkah 3: Menyoroti Nama dan Harga Produk

Setelah kita tahu bahwa harga produk kurang dari $ 20.00, yang tersisa adalah menyoroti nama dan harganya. Untuk mencapai hal ini, kita harus terlebih dahulu mereferensikan kontrol Label secara terprogram dalam ItemTemplate yang menampilkan nama dan harga produk. Selanjutnya, kita perlu membuatnya menampilkan latar belakang kuning. Informasi pemformatan ini dapat diterapkan dengan langsung memodifikasi properti Label BackColor (LabelID.BackColor = Color.Yellow); idealnya, meskipun, semua hal terkait tampilan harus diekspresikan melalui lembar gaya berjenjang. Bahkan, kita sudah memiliki lembar gaya yang menyediakan pemformatan yang diinginkan yang ditentukan dalam Styles.css - AffordablePriceEmphasis, yang dibuat dan dibahas dalam tutorial Pemformatan Kustom Berdasarkan Data .

Untuk menerapkan pemformatan, cukup atur dua properti kontrol CssClass Web Label ke AffordablePriceEmphasis, seperti yang diperlihatkan dalam kode berikut:

// Highlight the product name and unit price Labels
// First, get a reference to the two Label Web controls
Label ProductNameLabel = (Label)e.Item.FindControl("ProductNameLabel");
Label UnitPriceLabel = (Label)e.Item.FindControl("UnitPriceLabel");
// Next, set their CssClass properties
if (ProductNameLabel != null)
    ProductNameLabel.CssClass = "AffordablePriceEmphasis";
if (UnitPriceLabel != null)
    UnitPriceLabel.CssClass = "AffordablePriceEmphasis";

Setelah penanganan acara ItemDataBound selesai, kunjungi kembali halaman Formatting.aspx di browser. Seperti yang ditunjukkan dalam Gambar 2, produk dengan harga di bawah $20,00 namanya dan harganya disorot.

Produk Yang Kurang dari $20,00 disorot

Gambar 2: Produk Yang Kurang dari $20,00 disorot (Klik untuk melihat gambar ukuran penuh)

Nota

Karena DataList dirender sebagai HTML <table>, instansnya DataListItem memiliki properti terkait gaya yang dapat diatur untuk menerapkan gaya tertentu ke seluruh item. Misalnya, jika kita ingin menyoroti seluruh item berwarna kuning ketika harganya kurang dari $20,00, kita bisa mengganti kode yang mereferensikan Label dan mengatur propertinya CssClass dengan baris kode berikut: e.Item.CssClass = "AffordablePriceEmphasis" (lihat Gambar 3).

Elemen-elemen RepeaterItem yang membentuk kontrol Repeater, namun, tidak menawarkan properti tingkat gaya seperti itu. Oleh karena itu, untuk menerapkan pemformatan kustom pada Repeater, diperlukan penerapan properti gaya pada kontrol Web di dalam templat Repeater, seperti yang kami lakukan di Gambar 2.

Seluruh Item Produk Disorot untuk Produk di Bawah $20,00

Gambar 3: Seluruh Item Produk Disorot untuk Produk Di Bawah $20,00 (Klik untuk melihat gambar ukuran penuh)

Menggunakan Fungsi Pemformatan dari Dalam Templat

Dalam tutorial Menggunakan TemplateFields di GridView Control , kami melihat cara menggunakan fungsi pemformatan dalam GridView TemplateField untuk menerapkan pemformatan kustom berdasarkan data yang terikat ke baris GridView. Fungsi pemformatan adalah metode yang dapat dipanggil dari templat dan mengembalikan HTML yang akan dihasilkan di tempatnya. Fungsi pemformatan dapat ditempatkan di kelas code-behind halaman ASP.NET atau dapat dipusatkan ke dalam file kelas di folder App_Code atau dalam proyek Pustaka Kelas yang terpisah. Memindahkan fungsi pemformatan dari kelas code-behind halaman ASP.NET sangat ideal jika Anda berencana menggunakan fungsi pemformatan yang sama di beberapa halaman ASP.NET atau di aplikasi web ASP.NET lainnya.

Untuk menunjukkan fungsi pemformatan, mari kita memiliki informasi produk yang mencantumkan teks [TIDAK LAGI TERSEDIA] di samping nama produk jika produk tersebut tidak lagi tersedia. Selain itu, mari kita sorot harga dengan warna kuning jika kurang dari $20.00 (seperti yang kita lakukan dalam contoh penanganan aktivitas ItemDataBound); jika harganya $20.00 atau lebih tinggi, jangan tampilkan harga sebenarnya, tetapi tampilkan teks, Silakan hubungi untuk mendapatkan penawaran harga. Gambar 4 memperlihatkan cuplikan layar daftar produk dengan aturan pemformatan ini diterapkan.

Cuplikan layar memperlihatkan produk yang tercantum dalam kontrol DataList, dengan harga produk yang harganya lebih dari $20,00 diganti dengan teks, 'Silakan panggil untuk penawaran harga.'

Gambar 4: Untuk Produk Mahal, Harga Diganti dengan Teks, Silakan panggil penawaran harga (Klik untuk melihat gambar ukuran penuh)

Langkah 1: Membuat Fungsi Pemformatan

Untuk contoh ini, kita memerlukan dua fungsi pemformatan, satu yang menampilkan nama produk bersama dengan teks [DISCONTINUED], jika diperlukan, dan yang lain yang menampilkan harga yang disorot jika kurang dari $20,00 atau teks "Silakan hubungi kami untuk penawaran harga" jika tidak. Mari kita buat fungsi-fungsi ini di kelas code-behind halaman ASP.NET dan beri nama DisplayProductNameAndDiscontinuedStatus dan DisplayPrice. Kedua metode perlu mengembalikan HTML untuk dirender sebagai string dan keduanya perlu ditandai Protected (atau Public) untuk dipanggil dari bagian sintaks deklaratif halaman ASP.NET. Kode untuk kedua metode ini mengikuti:

protected string DisplayProductNameAndDiscontinuedStatus
    (string productName, bool discontinued)
{
    // Return just the productName if discontinued is false
    if (!discontinued)
        return productName;
    else
        // otherwise, return the productName appended with the text "[DISCONTINUED]"
        return string.Concat(productName, " [DISCONTINUED]");
}
protected string DisplayPrice(Northwind.ProductsRow product)
{
    // If price is less than $20.00, return the price, highlighted
    if (!product.IsUnitPriceNull() && product.UnitPrice < 20)
        return string.Concat("<span class=\"AffordablePriceEmphasis\">",
                              product.UnitPrice.ToString("C"), "</span>");
    else
        // Otherwise return the text, "Please call for a price quote"
        return "<span>Please call for a price quote</span>";
}

Perhatikan bahwa DisplayProductNameAndDiscontinuedStatus metode menerima nilai productName bidang data dan discontinued sebagai nilai skalar, sedangkan DisplayPrice metode menerima instans ProductsRow (bukan unitPrice nilai skalar). Salah satu pendekatan akan berfungsi; namun, jika fungsi pemformatan bekerja dengan nilai skalar yang dapat berisi nilai database NULL (seperti UnitPrice, di mana ProductName dan Discontinued tidak mengizinkan nilai NULL), perhatian khusus harus diberikan dalam menangani input skalar ini.

Secara khusus, parameter input harus berjenis Object karena nilai masuk mungkin merupakan DBNull instans alih-alih jenis data yang diharapkan. Selain itu, pemeriksaan harus dilakukan untuk menentukan apakah nilai masuk adalah nilai database NULL atau tidak. Artinya, jika kita ingin DisplayPrice metode menerima harga sebagai nilai skalar, kita harus menggunakan kode berikut:

protected string DisplayPrice(object unitPrice)
{
    // If price is less than $20.00, return the price, highlighted
    if (!Convert.IsDBNull(unitPrice) && ((decimal) unitPrice) < 20)
        return string.Concat("<span class=\"AffordablePriceEmphasis\">",
                              ((decimal) unitPrice).ToString("C"), "</span>");
    else
        // Otherwise return the text, "Please call for a price quote"
        return "<span>Please call for a price quote</span>";
}

Perhatikan bahwa unitPrice parameter input berjenis Object dan bahwa pernyataan kondisional telah dimodifikasi untuk memastikan apakah unitPrice adalah DBNull atau tidak. Selain itu, karena unitPrice parameter input diteruskan sebagai Object, parameter harus ditransmisikan ke nilai desimal.

Langkah 2: Memanggil Fungsi Pemformatan dari DataList s ItemTemplate

Dengan fungsi pemformatan ditambahkan ke halaman ASP.NET kami s code-behind class, yang tersisa adalah memanggil fungsi pemformatan ini dari DataList s ItemTemplate. Untuk memanggil fungsi pemformatan dari templat, lakukan panggilan fungsi dalam sintaks pengikatan data:

<%# MethodName(inputParameter1, inputParameter2, ...) %>

Dalam DataList ItemTemplate, kontrol Web Label ProductNameLabel saat ini menampilkan nama produk dengan menetapkan properti Text dengan hasil dari <%# Eval("ProductName") %>. Untuk menampilkan nama ditambah teks [DISCONTINUED], jika diperlukan, perbarui sintaks deklaratif agar menetapkan properti Text dengan nilai dari metode DisplayProductNameAndDiscontinuedStatus. Ketika melakukannya, kita harus meneruskan nama produk dan nilai yang dihentikan menggunakan sintaksis Eval("columnName"). Eval mengembalikan nilai jenis Object, tetapi DisplayProductNameAndDiscontinuedStatus metode mengharapkan parameter input jenis String dan Boolean; oleh karena itu, kita harus mentransmisikan nilai yang dikembalikan oleh Eval metode ke jenis parameter input yang diharapkan, seperti:

<h4>
    <asp:Label ID="ProductNameLabel" runat="server"
        Text='<%# DisplayProductNameAndDiscontinuedStatus((string) Eval("ProductName"),
              (bool) Eval("Discontinued")) %>'>
    </asp:Label>
</h4>

Untuk menampilkan harga, kita cukup mengatur UnitPriceLabel properti Label s Text ke nilai yang dikembalikan oleh DisplayPrice metode , seperti yang kita lakukan untuk menampilkan nama produk dan teks [DISCONTINUED]. Namun, alih-alih meneruskan UnitPrice sebagai parameter input skalar, kita malah meneruskan seluruh ProductsRow instans:

<asp:Label ID="UnitPriceLabel" runat="server"
    Text='<%# DisplayPrice((Northwind.ProductsRow)
          ((System.Data.DataRowView) Container.DataItem).Row) %>'>
</asp:Label>

Setelah panggilan ke fungsi pemformatan dilakukan, luangkan waktu sejenak untuk melihat perkembangan kami di browser. Layar Anda akan terlihat mirip dengan Gambar 5, di mana produk yang dihentikan termasuk teks [DISCONTINUED] dan produk yang harganya lebih dari $20,00 akan harganya diganti dengan teks Harap hubungi untuk mendapatkan penawaran harga.

Cuplikan layar memperlihatkan produk yang tercantum dalam kontrol DataList, dengan harga produk yang harganya lebih dari $20,00 diganti dengan teks, 'Silakan panggil untuk penawaran harga', dan teks '[DISCONTINUED]' ditambahkan ke nama produk yang dihentikan.

Gambar 5: Untuk Produk Mahal, Harga Diganti dengan Teks, Silakan panggil untuk penawaran harga (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Memformat konten kontrol DataList atau Repeater berdasarkan data dapat dicapai menggunakan dua teknik. Teknik pertama adalah membuat penangan peristiwa untuk peristiwa ItemDataBound, yang dipicu saat setiap rekaman di sumber data terikat ke DataListItem baru atau RepeaterItem baru. Dalam penanganan acara ItemDataBound, data item saat ini dapat diperiksa dan kemudian pemformatan dapat diterapkan pada konten template, atau untuk DataListItem ini, ke seluruh item itu sendiri.

Atau, pemformatan kustom dapat diwujudkan melalui fungsi pemformatan. Fungsi pemformatan adalah metode yang dapat dipanggil dari templat DataList atau Repeater s yang mengembalikan HTML untuk dipancarkan di tempatnya. Seringkali, HTML yang dikembalikan oleh fungsi pemformatan ditentukan oleh nilai yang terikat ke item saat ini. Nilai-nilai ini dapat diteruskan ke fungsi pemformatan, baik sebagai nilai skalar atau dengan meneruskan seluruh objek yang terikat ke item (seperti ProductsRow instans).

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 Yaakov Ellis, Randy Schmidt, dan Liz Shulok. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

Berikutnya Sebelumnya