Pemformatan Kustom Berdasarkan Data (VB)

oleh Scott Mitchell

Unduh PDF

Menyesuaikan format GridView, DetailsView, atau FormView berdasarkan data yang terikat dengannya dapat dicapai dengan berbagai cara. Dalam tutorial ini kita akan melihat cara mencapai pemformatan terikat data melalui penggunaan penanganan aktivitas DataBound dan RowDataBound.

Pendahuluan

Tampilan kontrol GridView, DetailsView, dan FormView dapat disesuaikan melalui segudang properti terkait gaya. Properti seperti CssClass, Font, BorderWidth, BorderStyle, BorderColor, Width, dan Height, antara lain, menentukan tampilan umum kontrol yang dirender. Properti termasuk HeaderStyle, RowStyle, AlternatingRowStyle, dan lainnya memungkinkan pengaturan gaya yang sama ini diterapkan ke bagian tertentu. Demikian juga, pengaturan gaya ini dapat diterapkan di tingkat bidang.

Dalam banyak skenario, persyaratan pemformatan bergantung pada nilai data yang ditampilkan. Contohnya, untuk menarik perhatian pada produk yang habis stoknya, laporan yang mencantumkan informasi produk mungkin mengatur warna latar belakang menjadi kuning untuk produk yang bidang UnitsInStock dan UnitsOnOrder keduanya sama dengan 0. Untuk menyoroti produk yang lebih mahal, kami mungkin ingin menampilkan harga produk tersebut dengan biaya lebih dari $ 75.00 dalam font tebal.

Menyesuaikan format GridView, DetailsView, atau FormView berdasarkan data yang terikat dengannya dapat dicapai dengan berbagai cara. Dalam tutorial ini, kita akan melihat cara mencapai pemformatan terikat data melalui penggunaan penangan kejadian DataBound dan RowDataBound. Dalam tutorial berikutnya kita akan menjelajahi pendekatan alternatif.

Menggunakan Pengendali Peristiwa DetailsView ControlDataBound

Ketika data terikat ke DetailsView, baik dari kontrol sumber data atau melalui penetapan data secara terprogram ke properti kontrol DataSource dan memanggil metodenya DataBind() , urutan langkah-langkah berikut terjadi:

1. Peristiwa kontrol DataBinding Web data diaktifkan.
2. Data terikat pada kontrol data Web.
3. Peristiwa kontrol DataBound Web data diaktifkan.

Logika kustom dapat disuntikkan segera setelah langkah 1 dan 3 melalui penanganan aktivitas. Dengan membuat penanganan aktivitas untuk peristiwa, DataBound kita dapat secara terprogram menentukan data yang telah terikat ke kontrol Web data dan menyesuaikan pemformatan sesuai kebutuhan. Untuk menggambarkan ini mari kita buat DetailsView yang akan mencantumkan informasi umum tentang produk, tetapi akan menampilkan UnitPrice nilai dalam font miring tebal jika melebihi $75,00.

Langkah 1: Menampilkan Informasi Produk dalam DetailView

Buka halaman CustomColors.aspx di folder CustomFormatting, seret kontrol DetailsView dari Kotak Alat ke Perancang, atur nilai properti ID menjadi ExpensiveProductsPriceInBoldItalic, dan hubungkan ke kontrol ObjectDataSource baru yang menggunakan metode ProductsBLL dari kelas GetProducts(). Langkah-langkah terperinci untuk mencapai hal ini dihilangkan di sini karena kami memeriksanya secara rinci dalam tutorial sebelumnya.

Setelah Anda mengikat ObjectDataSource ke DetailsView, luangkan waktu sejenak untuk memodifikasi daftar bidang. Saya telah memilih untuk menghapus ProductID, SupplierID, CategoryID, UnitsInStock, UnitsOnOrder, ReorderLevel, dan Discontinued BoundFields serta mengganti nama dan memformat ulang BoundFields yang tersisa. Saya juga membersihkan pengaturan Width dan Height. Karena DetailsView hanya menampilkan satu entri, kita perlu mengaktifkan paginasi agar pengguna akhir dapat melihat semua produk. Lakukan dengan mencentang kotak centang "Aktifkan Penomoran Halaman" di tag pintar DetailsView.

Gambar 1: Gambar 1: Centang kotak Aktifkan Penomor halaman di Tag Pintar DetailsView (Klik untuk melihat gambar ukuran penuh)

Setelah perubahan ini, markup DetailsView adalah:

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Fields>
</asp:DetailsView>

Luangkan waktu sejenak untuk menguji halaman ini di browser Anda.

Gambar 2: Kontrol Tampilan Detail Menampilkan Satu Produk pada satu waktu (Klik untuk melihat gambar ukuran penuh)

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

Untuk menampilkan harga dalam font miring tebal untuk produk-produk yang nilainya UnitPrice melebihi $75,00, kita harus terlebih dahulu dapat menentukan nilai secara UnitPrice terprogram. Untuk DetailsView, ini dapat dilakukan di penangan kejadian DataBound. Untuk membuat penangan kejadian, klik DetailView di Desainer lalu pergi ke jendela Properti. Tekan F4 untuk memunculkannya, jika tidak terlihat, atau buka menu Tampilan dan pilih opsi menu Jendela Properti. Dari jendela Properti, klik ikon petir untuk mencantumkan peristiwa DetailsView. Selanjutnya, klik dua kali DataBound peristiwa atau ketik nama penangan kejadian yang ingin Anda buat.

Gambar 3: Membuat Pengelola Peristiwa untuk DataBound Peristiwa

Nota

Anda juga dapat membuat penanganan aktivitas dari bagian kode halaman ASP.NET. Di sana Anda akan menemukan dua daftar drop-down di bagian atas halaman. Pilih objek dari daftar drop-down kiri dan peristiwa yang ingin Anda buat handler-nya dari daftar drop-down kanan dan Visual Studio akan secara otomatis membuat penanganan aktivitas yang sesuai.

Melakukannya akan secara otomatis membuat penanganan aktivitas dan membawa Anda ke bagian kode tempat file ditambahkan. Pada titik ini Anda akan melihat:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound
End Sub

Data yang terikat ke DetailsView dapat diakses melalui DataItem properti . Ingat bahwa kami menghubungkan kontrol ke DataTable bertipe kuat, yang terdiri dari kumpulan instans DataRow bertipe kuat. Saat DataTable terikat ke DetailsView, DataRow pertama di DataTable ditetapkan ke properti DataItem dari DetailsView. Secara khusus, DataItem properti diberikan suatu DataRowView objek. Kita dapat menggunakan properti DataRowView dari Row untuk mendapatkan akses ke objek DataRow yang mendasar, yang sebenarnya merupakan instance ProductsRow. Setelah kita memiliki instans ini ProductsRow , kita dapat membuat keputusan hanya dengan memeriksa nilai properti objek.

Kode berikut mengilustrasikan cara menentukan apakah nilai yang UnitPrice terikat ke kontrol DetailsView lebih besar dari $75,00:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
    End If
End Sub

Nota

Karena UnitPrice dapat memiliki nilai NULL di dalam database, pertama-tama kami memeriksa untuk memastikan kami tidak berurusan dengan nilai NULL sebelum mengakses properti ProductsRow milik UnitPrice. Pemeriksaan ini penting karena jika kita mencoba mengakses properti UnitPrice ketika memiliki nilai NULL, objek ProductsRow akan menghasilkan pengecualian StrongTypingException.

Langkah 3: Memformat Nilai UnitPrice di DetailsView

Pada titik ini kita dapat menentukan apakah UnitPrice nilai yang terikat ke DetailsView memiliki nilai yang melebihi $75,00, tetapi kita belum melihat cara menyesuaikan pemformatan DetailsView secara terprogram. Untuk mengubah pemformatan seluruh baris di DetailsView, akses baris secara terprogram menggunakan DetailsViewID.Rows(index); untuk memodifikasi sel tertentu, akses menggunakan DetailsViewID.Rows(index).Cells(index). Setelah kita memiliki referensi ke baris atau sel, kita kemudian dapat menyesuaikan tampilannya dengan mengatur properti terkait gayanya.

Mengakses baris secara terprogram mengharuskan Anda mengetahui indeks baris, yang dimulai dari 0. Baris UnitPrice ini adalah baris kelima dalam DetailsView, memberinya indeks 4 dan membuatnya dapat diakses secara terprogram menggunakan ExpensiveProductsPriceInBoldItalic.Rows(4). Pada titik ini kita bisa memiliki seluruh konten baris yang ditampilkan dalam font miring tebal dengan menggunakan kode berikut:

ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Italic = True

Namun, ini akan membuat baik label (Harga) maupun nilai menjadi tebal dan miring. Jika kita ingin membuat hanya nilai tebal dan miring, kita perlu menerapkan pemformatan ini ke sel kedua dalam baris, yang dapat dicapai menggunakan yang berikut ini:

ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Italic = True

Karena tutorial kami sejauh ini telah menggunakan lembar gaya untuk mempertahankan pemisahan yang bersih antara markup yang dirender dan informasi terkait gaya, daripada mengatur properti gaya tertentu seperti yang ditunjukkan di atas mari kita gunakan kelas CSS. Styles.css Buka lembar gaya dan tambahkan kelas CSS baru bernama ExpensivePriceEmphasis dengan definisi berikut:

.ExpensivePriceEmphasis
{
    font-weight: bold;
    font-style: italic;
}

Kemudian, di penanganan DataBound aktivitas, atur properti sel CssClass ke ExpensivePriceEmphasis. Kode berikut menunjukkan penanganan DataBound aktivitas secara keseluruhan:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
       ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).CssClass = _
            "ExpensivePriceEmphasis"
    End If
End Sub

Saat melihat Chai, yang harganya kurang dari $ 75.00, harga ditampilkan dalam font normal (lihat Gambar 4). Namun, ketika melihat Mishi Kobe Niku, yang memiliki harga $ 97.00, harga ditampilkan dalam font miring tebal (lihat Gambar 5).

Gambar 4: Harga Kurang dari $75,00 Ditampilkan dalam Font Normal (Klik untuk melihat gambar ukuran penuh)

Gambar 5: Harga Produk Mahal Ditampilkan dalam Font Tebal Dan Miring (Klik untuk melihat gambar ukuran penuh)

Menggunakan Penanganan Aktivitas KontrolDataBoundFormView

Langkah-langkah untuk menentukan data dasar yang terikat pada FormView identik dengan yang untuk DetailsView, membuat DataBound penangan kejadian, mengubah tipe properti DataItem ke jenis objek yang sesuai yang terikat pada kontrol, dan menentukan langkah selanjutnya. FormView dan DetailsView berbeda, bagaimana tampilan antarmuka pengguna mereka diperbarui.

FormView tidak berisi BoundFields apa pun dan karenanya tidak memiliki Rows koleksi. Sebagai gantinya, FormView terdiri dari templat, yang dapat berisi campuran HTML statis, kontrol Web, dan sintaks pengikatan data. Menyesuaikan gaya FormView biasanya melibatkan penyesuaian gaya satu atau beberapa kontrol Web dalam templat FormView.

Untuk mengilustrasikan hal ini, mari kita gunakan FormView untuk mencantumkan produk seperti dalam contoh sebelumnya, tetapi kali ini mari kita tampilkan hanya nama produk dan unit dalam stok dengan unit dalam stok yang ditampilkan dalam font merah jika kurang dari atau sama dengan 10.

Langkah 4: Menampilkan Informasi Produk dalam FormView

Tambahkan FormView ke CustomColors.aspx halaman di bawah DetailsView dan atur propertinya ID ke LowStockedProductsInRed. Ikat FormView ke kontrol ObjectDataSource yang dibuat dari langkah sebelumnya. Ini akan membuat ItemTemplate, EditItemTemplate, dan InsertItemTemplate untuk FormView. Hapus EditItemTemplate dan InsertItemTemplate dan sederhanakan ItemTemplate untuk menyertakan hanya nilai ProductName dan UnitsInStock, masing-masing dalam kontrol Label dengan nama yang tepat. Seperti halnya DetailsView dari contoh sebelumnya, centang kotak Aktifkan Pemutaran Halaman pada tag pintar FormView.

Setelah pengeditan ini, markup FormView Anda akan terlihat mirip dengan yang berikut ini:

<asp:FormView ID="LowStockedProductsInRed" runat="server"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <b>Product:</b>
        <asp:Label ID="ProductNameLabel" runat="server"
         Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        <b>Units In Stock:</b>
        <asp:Label ID="UnitsInStockLabel" runat="server"
          Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:FormView>

Perhatikan bahwa berisi ItemTemplate :

• HTML statis teks "Product:" dan "Units In Stock:" bersama dengan elemen <br /> dan <b>.
• Kontrol web dua kontrol Label, ProductNameLabel dan UnitsInStockLabel.
• Sintaks pengikatan data, yaitu sintaks <%# Bind("ProductName") %> dan <%# Bind("UnitsInStock") %>, yang menetapkan nilai dari bidang ini ke properti Text pada kontrol Label.

Langkah 5: Menentukan Nilai Data secara Terprogram di DataBound Event Handler

Dengan markup FormView selesai, langkah selanjutnya adalah menentukan secara terprogram apakah UnitsInStock nilainya kurang dari atau sama dengan 10. Ini dicapai dengan cara yang sama persis dengan FormView seperti halnya dengan DetailsView. Mulailah dengan membuat penanganan aktivitas untuk peristiwa FormView DataBound .

Gambar 6: Buat DataBound Pengendali Acara

Dalam penanganan aktivitas, transmisikan properti FormView DataItem ke ProductsRow instans dan tentukan apakah UnitsInPrice nilainya sedemikian rupa sehingga kita perlu menampilkannya dalam font merah.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
        End If
    End If
End Sub

Langkah 6: Memformat Kontrol Label UnitsInStockLabel di ItemTemplate FormView

Langkah terakhir adalah memformat nilai yang ditampilkan UnitsInStock dalam font merah jika nilainya adalah 10 atau kurang. Untuk mencapai hal ini, kita perlu mengakses UnitsInStockLabel kontrol secara terprogram di ItemTemplate dan mengatur properti gayanya sehingga teksnya ditampilkan dengan warna merah. Untuk mengakses kontrol Web dalam templat, gunakan FindControl("controlID") metode seperti ini:

Dim someName As WebControlType = _
    CType(FormViewID.FindControl("controlID"), WebControlType)

Untuk contoh kami, kami ingin mengakses kontrol Label yang nilainya ID , UnitsInStockLabeljadi kami akan menggunakan:

Dim unitsInStock As Label = _
    CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

Setelah kita memiliki referensi terprogram ke kontrol Web, kita dapat memodifikasi properti terkait gayanya sesuai kebutuhan. Seperti contoh sebelumnya, saya telah membuat kelas CSS di Styles.css bernama LowUnitsInStockEmphasis. Untuk menerapkan gaya ini ke kontrol Label Web, atur properti CssClass sesuai.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
            unitsInStock.CssClass = "LowUnitsInStockEmphasis"
        End If
    End If
End Sub

Nota

Sintaks untuk memformat templat secara terprogram mengakses kontrol Web menggunakan FindControl("controlID") lalu mengatur properti terkait gayanya juga dapat digunakan saat menggunakan TemplateFields di kontrol DetailsView atau GridView. Kami akan memeriksa TemplateFields dalam tutorial berikutnya.

Gambar 7 menunjukkan FormView saat melihat produk yang nilainya UnitsInStock lebih besar dari 10, sedangkan produk di Gambar 8 memiliki nilai kurang dari 10.

Gambar 7: Untuk Produk Dengan Unit Yang Cukup Besar Dalam Stok, Tidak Ada Pemformatan Kustom yang Diterapkan (Klik untuk melihat gambar ukuran penuh)

Gambar 8: Unit dalam Jumlah Stok Ditampilkan dalam Warna Merah untuk Produk Tersebut Dengan Nilai 10 atau Kurang (Klik untuk melihat gambar ukuran penuh)

Pemformatan dengan Peristiwa GridViewRowDataBound

Sebelumnya, kami memeriksa urutan langkah-langkah yang dilalui kontrol DetailsView dan FormView selama pengikatan data. Mari kita tinjau kembali langkah-langkah ini sebagai penyegaran.

1. Peristiwa kontrol DataBinding Web data diaktifkan.
2. Data terikat pada kontrol data Web.
3. Peristiwa kontrol DataBound Web data diaktifkan.

Ketiga langkah sederhana ini cukup untuk DetailsView dan FormView karena hanya menampilkan satu rekaman. Untuk GridView, yang menampilkan semua rekaman yang terikat padanya (bukan hanya yang pertama), langkah 2 sedikit lebih rumit.

Pada langkah 2, GridView menghitung sumber data dan, untuk setiap rekaman, membuat instans GridViewRow dan mengikat rekaman saat ini ke dalamnya. Untuk setiap GridViewRow ditambahkan ke GridView, dua peristiwa dinaikkan:

• RowCreated api setelah GridViewRow dibuat
• RowDataBound diaktifkan setelah rekaman saat ini terikat ke GridViewRow.

Untuk GridView, maka, pengikatan data lebih akurat dijelaskan oleh urutan langkah-langkah berikut:

1. Peristiwa GridView DataBinding diaktifkan.

2. Data terikat ke GridView.

   Untuk setiap rekaman di sumber data

   1. Membuat GridViewRow objek
   2. Aktifkan RowCreated peristiwa
   3. Mengikat rekaman ke GridViewRow
   4. Aktifkan RowDataBound peristiwa
   5. Tambahkan GridViewRow ke koleksi Rows

3. Peristiwa GridView DataBound diaktifkan.

Untuk menyesuaikan format rekaman individual GridView, kita perlu membuat pengendali acara untuk RowDataBound acara tersebut. Untuk mengilustrasikan hal ini, mari kita tambahkan GridView ke CustomColors.aspx halaman yang mencantumkan nama, kategori, dan harga untuk setiap produk, menyoroti produk yang harganya kurang dari $ 10,00 dengan warna latar belakang kuning.

Langkah 7: Menampilkan Informasi Produk dalam GridView

Tambahkan GridView di bawah FormView dari contoh sebelumnya dan atur propertinya ID ke HighlightCheapProducts. Karena kita sudah memiliki ObjectDataSource yang mengembalikan semua produk di halaman, ikat GridView ke dalamnya. Terakhir, edit BoundFields GridView untuk menyertakan hanya nama, kategori, dan harga produk. Setelah pengeditan ini, markup GridView akan terlihat seperti:

<asp:GridView ID="HighlightCheapProducts" 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"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Gambar 9 menunjukkan kemajuan kami ke titik ini ketika dilihat melalui browser.

Gambar 9: GridView Mencantumkan Nama, Kategori, dan Harga Untuk Setiap Produk (Klik untuk melihat gambar ukuran penuh)

Langkah 8: Menentukan Nilai Data secara Terprogram di RowDataBound Event Handler

Ketika ProductsDataTable terikat ke GridView, instans ProductsRow dijumlahkan dan untuk setiap ProductsRow, sebuah GridViewRow dibuat. Properti GridViewRow dari DataItem ditetapkan ke ProductRow yang tertentu, setelah itu penangan kejadian GridView RowDataBound dipicu. Untuk menentukan nilai UnitPrice untuk setiap produk yang terikat ke GridView, kita perlu membuat penangan kejadian untuk peristiwa RowDataBound GridView. Dalam penanganan kejadian ini kita dapat memeriksa nilai UnitPrice untuk GridViewRow saat ini dan memutuskan pemformatan untuk baris tersebut.

Penanganan aktivitas ini dapat dibuat menggunakan serangkaian langkah yang sama seperti dengan FormView dan DetailsView.

Gambar 10: Membuat Penanganan Aktivitas untuk Peristiwa GridView RowDataBound

Membuat penanganan aktivitas dengan cara ini akan menyebabkan kode berikut ditambahkan secara otomatis ke bagian kode halaman ASP.NET:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

End Sub

Ketika peristiwa RowDataBound dipicu, penangan peristiwa diteruskan sebagai parameter kedua berupa objek tipe GridViewRowEventArgs, yang memiliki properti bernama Row. Properti ini mengembalikan referensi ke GridViewRow yang hanya terikat data. Untuk mengakses instans yang terikat dengan ProductsRow, kami menggunakan properti GridViewRow seperti:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
    End If
End Sub

Saat bekerja dengan penanganan RowDataBound aktivitas, penting untuk diingat bahwa GridView terdiri dari berbagai jenis baris dan bahwa peristiwa ini diaktifkan untuk semua jenis baris. Jenis dari GridViewRow dapat ditentukan oleh properti RowType, dan dapat memiliki salah satu dari nilai yang mungkin:

• DataRow baris yang terkait dengan catatan dari GridView DataSource
• EmptyDataRow baris ditampilkan jika GridView DataSource kosong
• Footer baris footer; ditampilkan jika properti GridView ShowFooter diatur ke True
• Header baris header; ditampilkan jika properti ShowHeader GridView diatur ke True (default)
• Pager untuk GridView yang mengimplementasikan paginasi, baris yang menampilkan antarmuka paginasi
• Separator tidak digunakan untuk GridView, tetapi digunakan oleh RowType properti untuk kontrol DataList dan Repeater, dua kontrol Web data yang akan kita bahas dalam tutorial mendatang

Karena baris EmptyDataRow, Header, Footer, dan Pager tidak terkait dengan catatan DataSource, baris tersebut akan selalu memiliki nilai Nothing untuk properti mereka DataItem. Untuk alasan ini, sebelum mencoba bekerja dengan properti GridViewRow dari DataItem saat ini, pertama-tama kita harus memastikan bahwa kita berurusan dengan DataRow. Ini dapat dicapai dengan memeriksa properti GridViewRow's RowType seperti berikut:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
        End If
    End If
End Sub

Langkah 9: Menyoroti Baris dengan Warna Kuning Saat Harga Satuan Kurang dari $10,00

Langkah terakhir adalah menyoroti seluruh GridViewRow secara terprogram jika nilai UnitPrice untuk baris tersebut kurang dari $10,00. Sintaks untuk mengakses baris atau sel GridView sama dengan DetailsView GridViewID.Rows(index) untuk mengakses seluruh baris, GridViewID.Rows(index).Cells(index) untuk mengakses sel tertentu. Namun, ketika RowDataBound penanganan peristiwa dipicu, data yang terikat GridViewRow belum ditambahkan ke dalam koleksi GridView Rows. Oleh karena itu, Anda tidak dapat mengakses instans saat ini GridViewRow dari penangan kejadian RowDataBound menggunakan koleksi baris.

Alih-alih GridViewID.Rows(index), kita dapat mereferensi instans saat ini GridViewRow di pengendali acara RowDataBound menggunakan e.Row. Artinya, untuk menyoroti instans saat ini GridViewRow dari penanganan acara RowDataBound kami akan menggunakan:

e.Row.BackColor = System.Drawing.Color.Yellow

Daripada secara langsung mengatur properti GridViewRow, mari kita berpegang pada penggunaan kelas CSS. Saya telah membuat kelas CSS bernama AffordablePriceEmphasis yang mengatur warna latar belakang menjadi kuning. Penanganan peristiwa yang telah selesai RowDataBound adalah sebagai berikut:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
            e.Row.CssClass = "AffordablePriceEmphasis"
        End If
    End If
End Sub

Gambar 11: Produk Yang Paling Terjangkau Disorot Berwarna Kuning (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Dalam tutorial ini kita melihat cara memformat GridView, DetailsView, dan FormView berdasarkan data yang terikat ke kontrol. Untuk mencapai hal ini, kami membuat penangan kejadian untuk DataBound atau RowDataBound peristiwa, di mana data yang mendasar diperiksa dan perubahan pemformatan dilakukan, jika diperlukan. Untuk mengakses data yang terikat ke DetailsView atau FormView, kami menggunakan properti DataItem dalam penangan acara DataBound; untuk GridView, masing-masing instans GridViewRow memiliki properti DataItem yang berisi data yang terikat ke baris tersebut, yang tersedia dalam penangan acara RowDataBound.

Sintaks untuk menyesuaikan pemformatan kontrol Web data secara terprogram bergantung pada kontrol Web dan bagaimana data yang akan diformat ditampilkan. Untuk kontrol DetailsView dan GridView, baris dan sel dapat diakses oleh indeks ordinal. Untuk FormView, yang menggunakan templat, FindControl("controlID") metode ini biasanya digunakan untuk menemukan kontrol Web dari dalam templat.

Dalam tutorial berikutnya kita akan melihat cara menggunakan templat dengan GridView dan DetailsView. Selain itu, kita akan melihat teknik lain untuk menyesuaikan pemformatan berdasarkan data yang mendasar.

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 E.R. Gilmore, Dennis Patterson, dan Dan Jagers. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, hubungi saya di mitchell@4GuysFromRolla.com.

SebelumnyaBerikutnya