Kontrol Terikat Data

2023-07-13

Sebagian besar aplikasi ASP.NET mengandalkan beberapa tingkat presentasi data dari sumber data back-end. Kontrol terikat data telah menjadi bagian penting dari berinteraksi dengan data dalam aplikasi Web dinamis. ASP.NET 2.0 memperkenalkan beberapa peningkatan besar pada kontrol terikat data, termasuk kelas BaseDataBoundControl baru dan sintaks deklaratif.

Sebagian besar aplikasi ASP.NET mengandalkan beberapa tingkat presentasi data dari sumber data back-end. Kontrol terikat data telah menjadi bagian penting dari berinteraksi dengan data dalam aplikasi Web dinamis. ASP.NET 2.0 memperkenalkan beberapa peningkatan besar pada kontrol terikat data, termasuk kelas BaseDataBoundControl baru dan sintaks deklaratif.

BaseDataBoundControl bertindak sebagai kelas dasar untuk kelas DataBoundControl dan kelas HierarchicalDataBoundControl. Dalam modul ini, kita akan membahas kelas berikut yang berasal dari DataBoundControl:

AdRotator
Kontrol daftar
GridView
FormView
DetailView

Kami juga akan membahas kelas berikut yang berasal dari kelas HierarchicalDataBoundControl:

TreeView
Menu
SiteMapPath

Kelas DataBoundControl

Kelas DataBoundControl adalah kelas abstrak (bertanda MustInherit di VB) yang digunakan untuk berinteraksi dengan data tabular atau gaya daftar. Kontrol berikut adalah beberapa kontrol yang berasal dari DataBoundControl.

AdRotator

Kontrol AdRotator memungkinkan Anda menampilkan banner grafik di halaman Web yang ditautkan ke URL tertentu. Grafik yang ditampilkan diputar menggunakan properti untuk kontrol. Frekuensi iklan tertentu yang ditampilkan di halaman dapat dikonfigurasi menggunakan properti Tayangan dan iklan dapat difilter menggunakan pemfilteran kata kunci.

Kontrol AdRotator menggunakan file XML atau tabel dalam database untuk data. Atribut berikut digunakan dalam file XML untuk mengonfigurasi kontrol AdRotator.

ImageUrl

URL gambar yang akan ditampilkan untuk iklan.

NavigateUrl

URL yang harus dibawa pengguna saat iklan diklik. Ini harus dikodekan URL.

Teks Alternatif

Teks alternatif yang ditampilkan dalam tipsalat dan dibaca oleh pembaca layar. Juga ditampilkan ketika gambar yang ditentukan oleh ImageUrl tidak tersedia.

Kata kunci

Menentukan kata kunci yang dapat digunakan saat menggunakan pemfilteran kata kunci. Jika ditentukan, hanya iklan dengan kata kunci yang cocok dengan filter kata kunci yang akan ditampilkan.

Tayangan

Nomor pembobotan yang menentukan seberapa sering iklan tertentu kemungkinan akan muncul. Ini relatif terhadap tayangan iklan lain dalam file yang sama. Nilai maksimum tayangan kolektif untuk semua iklan dalam file XML adalah 2.048.000.000 1.

Tinggi

Tinggi iklan dalam piksel.

Lebar

Lebar iklan dalam piksel.

Catatan

Atribut Tinggi dan Lebar mengambil alih tinggi dan lebar untuk kontrol AdRotator itu sendiri.

File XML umum mungkin terlihat seperti berikut ini:

<?xml version="1.0" encoding="utf-8" ?> <Advertisements xmlns="http://schemas.microsoft.com/AspNet/AdRotator-Schedule-File"> <Ad> <ImageUrl>~/images/Contoso_ad.gif</ImageUrl> <NavigateUrl>http://www.contoso-ltd.com</NavigateUrl> <AlternateText>Ad for Contoso, Ltd. Web site</AlternateText> <Impressions>100</Impressions> </Ad> <Ad> <ImageUrl>~/images/Aspnet_ad.gif</ImageUrl> <NavigateUrl>http://www.asp.net</NavigateUrl> <AlternateText>Ad for ASP.NET Web site</AlternateText> <Impressions>50</Impressions> </Ad> </Advertisements>

Dalam contoh di atas, iklan untuk Contoso dua kali lebih mungkin muncul sebagai iklan untuk situs Web ASP.NET karena nilai untuk atribut Tayangan.

Untuk menampilkan iklan dari file XML di atas, tambahkan kontrol AdRotator ke halaman dan atur properti AdvertisementFile untuk menunjuk ke file XML seperti yang ditunjukkan di bawah ini:

<asp:AdRotator ID="AdRotator1" runat="server" AdvertisementFile="App_Data/Ads.xml" />

Jika Anda memilih untuk menggunakan tabel database sebagai sumber data untuk kontrol AdRotator, Anda harus terlebih dahulu menyiapkan database menggunakan skema berikut:

Nama kolom	Jenis data	Deskripsi
ID	int	Kunci primer. Kolom ini dapat memiliki nama apa pun.
ImageUrl	nvarchar(length)	URL relatif atau absolut gambar yang akan ditampilkan untuk iklan.
NavigateUrl	nvarchar(length)	URL target untuk iklan. Jika Anda tidak memberikan nilai, iklan tersebut bukan hyperlink.
Teks Alternatif	nvarchar(length)	Teks ditampilkan jika gambar tidak dapat ditemukan. Di beberapa browser, teks ditampilkan sebagai TipsAlat. Teks alternatif juga digunakan untuk aksesibilitas sehingga pengguna yang tidak dapat melihat grafik dapat mendengar deskripsinya dibaca dengan keras.
Kata kunci	nvarchar(length)	Kategori untuk iklan tempat halaman dapat memfilter.
Tayangan	int(4)	Angka yang menunjukkan kemungkinan seberapa sering iklan ditampilkan. Semakin besar jumlahnya, semakin sering iklan akan ditampilkan. Total semua nilai tayangan dalam file XML mungkin tidak melebihi 2.048.000.000 - 1.
Lebar	int(4)	Lebar gambar dalam piksel.
Tinggi	int(4)	Tinggi gambar dalam piksel.

Dalam kasus di mana Anda sudah memiliki database dengan skema yang berbeda, Anda dapat menggunakan properti AlternateTextField, ImageUrlField, dan NavigateUrlField untuk memetakan atribut AdRotator ke database Anda yang sudah ada. Untuk menampilkan data dari database di kontrol AdRotator, tambahkan kontrol sumber data ke halaman, konfigurasikan string koneksi untuk kontrol sumber data untuk menunjuk ke database Anda, dan atur properti DataSourceID kontrol AdRotator ke ID kontrol sumber data. Jika Anda memiliki kebutuhan untuk mengonfigurasi iklan AdRotator secara terprogram, gunakan peristiwa AdCreated. Peristiwa AdCreated mengambil dua parameter; satu objek, dan yang lainnya adalah instans AdCreatedEventArgs. AdCreatedEventArgs adalah referensi ke iklan yang sedang dibuat.

Cuplikan kode berikut mengatur ImageUrl, NavigateUrl, dan AlternateText untuk iklan secara terprogram:

protected void AdRotator1_AdCreated(object sender, System.Web.UI.WebControls.AdCreatedEventArgs e) { e.ImageUrl = "images/contoso_ad.gif"; e.NavigateUrl = "http://www.contoso-ltd.com/"; e.AlternateText = "Ad for Contoso, Ltd Web site"; }

Kontrol Daftar

Kontrol daftar mencakup ListBox, DropDownList, CheckBoxList, RadioButtonList, dan BulletedList. Masing-masing kontrol ini dapat berupa data yang terikat ke sumber data. Mereka menggunakan satu bidang di sumber data sebagai teks tampilan dan secara opsional dapat menggunakan bidang kedua sebagai nilai item. Item juga dapat ditambahkan secara statis pada waktu desain, dan Anda dapat mencampur item statis dan item dinamis yang ditambahkan dari sumber data.

Untuk data mengikat kontrol daftar, tambahkan kontrol sumber data ke halaman. Tentukan perintah SELECT untuk kontrol sumber data lalu atur properti DataSourceID dari kontrol daftar ke ID kontrol sumber data. Gunakan properti DataTextField dan DataValueField untuk menentukan teks tampilan dan nilai untuk kontrol. Selain itu, Anda dapat menggunakan properti DataTextFormatString untuk mengontrol tampilan teks tampilan sebagai berikut:

Ekspresi	Deskripsi
Harga: {0:C}	Untuk data numerik/desimal. Menampilkan literal "Harga:" diikuti dengan angka dalam format mata uang. Format mata uang tergantung pada pengaturan budaya yang ditentukan dalam atribut budaya pada direktif Halaman atau dalam file Web.config.
{0:D4}	Untuk data bilangan bulat. Tidak dapat digunakan dengan angka desimal. Bilangan bulat ditampilkan dalam bidang berlapis nol yang lebarnya empat karakter.
{0:N2}%	Untuk data numerik. Menampilkan angka dengan presisi 2-desimal diikuti dengan literal "%".
{0:000.0}	Untuk data numerik/desimal. Angka dibulatkan ke satu tempat desimal. Angka kurang dari tiga digit dilapisi nol.
{0:D}	Untuk data tanggal/waktu. Menampilkan format tanggal panjang ("Kamis, 06 Agustus 1996"). Format tanggal tergantung pada pengaturan budaya halaman atau file Web.config.
{0:d}	Untuk data tanggal/waktu. Menampilkan format tanggal pendek ("31/12/99").
{0:yyy-MM-dd}	Untuk data tanggal/waktu. Menampilkan tanggal dalam format numerik tahun-bulan-hari (96-08-06)

GridView

Kontrol GridView memungkinkan tampilan dan pengeditan data tabular menggunakan pendekatan deklaratif dan merupakan penerus kontrol DataGrid. Fitur berikut tersedia di kontrol GridView.

Pengikatan ke kontrol sumber data, seperti SqlDataSource.
Kemampuan pengurutan bawaan.
Kemampuan pembaruan dan penghapusan bawaan.
Kemampuan halaman bawaan.
Kapabilitas pemilihan baris bawaan.
Akses terprogram ke model objek GridView untuk mengatur properti secara dinamis, menangani peristiwa, dan sebagainya.
Beberapa bidang kunci.
Beberapa bidang data untuk kolom hyperlink.
Tampilan yang dapat disesuaikan melalui tema dan gaya.

Bidang Kolom

Setiap kolom dalam kontrol GridView diwakili oleh objek DataControlField. Secara default, properti AutoGenerateColumns diatur ke true, yang membuat objek AutoGeneratedField untuk setiap bidang di sumber data. Setiap bidang kemudian dirender sebagai kolom dalam kontrol GridView dalam urutan setiap bidang muncul di sumber data. Anda juga dapat mengontrol bidang kolom mana yang muncul secara manual di kontrol GridView dengan mengatur properti AutoGenerateColumns ke false lalu menentukan koleksi bidang kolom Anda sendiri. Jenis bidang kolom yang berbeda menentukan perilaku kolom dalam kontrol.

Tabel berikut ini mencantumkan tipe bidang kolom berbeda yang bisa digunakan.

Jenis bidang kolom	Deskripsi
BoundField	Menampilkan nilai bidang dalam sumber data. Ini adalah jenis kolom default kontrol GridView.
Bidang Tombol	Menampilkan tombol perintah untuk setiap item dalam kontrol GridView. Ini memungkinkan Anda membuat kolom kontrol tombol kustom, seperti tombol Tambahkan atau Hapus.
CheckBoxField	Menampilkan kotak centang untuk setiap item dalam kontrol GridView. Jenis bidang kolom ini umumnya digunakan untuk menampilkan bidang dengan nilai Boolean.
CommandField	Menampilkan tombol perintah yang telah ditentukan sebelumnya untuk melakukan operasi pemilihan, pengeditan, atau penghapusan.
HyperLinkField	Menampilkan nilai bidang dalam sumber data sebagai hyperlink. Tipe bidang kolom ini memungkinkan Anda mengikat bidang kedua ke URL hyperlink.
ImageField	Menampilkan gambar untuk setiap item dalam kontrol GridView.
Bidang Templat	Menampilkan konten yang ditentukan pengguna untuk setiap item dalam kontrol GridView sesuai dengan templat yang ditentukan. Jenis bidang kolom ini memungkinkan Anda membuat bidang kolom kustom.

Untuk menentukan kumpulan bidang kolom secara deklaratif, pertama-tama tambahkan tag Kolom> pembuka dan penutup< antara tag pembuka dan penutup kontrol GridView. Selanjutnya, cantumkan bidang kolom yang ingin Anda sertakan di antara tag Kolom> pembuka dan penutup<. Kolom yang ditentukan ditambahkan ke koleksi Kolom dalam urutan yang tercantum. Koleksi Kolom menyimpan semua bidang kolom dalam kontrol dan memungkinkan Anda mengelola bidang kolom secara terprogram dalam kontrol GridView.

Bidang kolom yang dideklarasikan secara eksplisit dapat ditampilkan dalam kombinasi dengan bidang kolom yang dihasilkan secara otomatis. Saat keduanya digunakan, bidang kolom yang dinyatakan secara eksplisit dirender terlebih dahulu, diikuti oleh bidang kolom yang dihasilkan secara otomatis.

Mengikat ke Kontrol Sumber Data

Kontrol GridView dapat terikat ke kontrol sumber data (seperti SqlDataSource, ObjectDataSource, dan sebagainya), serta sumber data apa pun yang mengimplementasikan antarmuka System.Collections.IEnumerable (seperti System.Data.DataView, System.Collections.ArrayList, atau System.Collections.Hashtable). Gunakan salah satu metode berikut untuk mengikat kontrol GridView ke jenis sumber data yang sesuai:

Untuk mengikat ke kontrol sumber data, atur properti DataSourceID kontrol GridView ke nilai ID kontrol sumber data. Kontrol GridView secara otomatis mengikat kontrol sumber data yang ditentukan dan dapat memanfaatkan kemampuan kontrol sumber data untuk melakukan fungsi pengurutan, pembaruan, penghapusan, dan penomoran halaman. Ini adalah metode yang disukai untuk mengikat data.
Untuk mengikat ke sumber data yang mengimplementasikan antarmuka System.Collections.IEnumerable, atur properti DataSource secara terprogram dari kontrol GridView ke sumber data lalu panggil metode DataBind. Saat menggunakan metode ini, kontrol GridView tidak menyediakan fungsionalitas pengurutan, pembaruan, penghapusan, dan penomoran bawaan. Anda perlu menyediakan fungsionalitas ini sendiri.

Operasi Kontrol GridView

Kontrol GridView menyediakan banyak kemampuan bawaan yang memungkinkan pengguna mengurutkan, memperbarui, menghapus, memilih, dan halaman melalui item dalam kontrol. Ketika kontrol GridView terikat ke kontrol sumber data, kontrol GridView dapat memanfaatkan kemampuan kontrol sumber data dan menyediakan fungsi pengurutan, pembaruan, dan penghapusan otomatis.

Catatan

Kontrol GridView dapat memberikan dukungan untuk mengurutkan, memperbarui, dan menghapus dengan jenis sumber data lainnya; namun, Anda harus menyediakan penanganan aktivitas yang sesuai dengan implementasi untuk operasi ini.

Pengurutan memungkinkan pengguna untuk mengurutkan item dalam kontrol GridView sehubungan dengan kolom tertentu dengan mengklik header kolom. Untuk mengaktifkan pengurutan, atur properti AllowSorting ke true.

Fungsionalitas pembaruan, penghapusan, dan pemilihan otomatis diaktifkan saat tombol di bidang kolom ButtonField atau TemplateField , dengan nama perintah masing-masing "Edit", "Hapus", dan "Pilih", diklik. Kontrol GridView dapat secara otomatis menambahkan bidang kolom CommandField dengan tombol Edit, Hapus, atau Pilih jika properti AutoGenerateEditButton, AutoGenerateDeleteButton, atau AutoGenerateSelectButton masing-masing diatur ke true.

Catatan

Menyisipkan rekaman ke dalam sumber data tidak didukung secara langsung oleh kontrol GridView. Namun, dimungkinkan untuk menyisipkan rekaman dengan menggunakan kontrol GridView bersama dengan kontrol DetailsView atau FormView.

Alih-alih menampilkan semua rekaman di sumber data secara bersamaan, kontrol GridView dapat secara otomatis memecah rekaman menjadi halaman. Untuk mengaktifkan halaman, atur properti AllowPaging ke true.

Menyesuaikan Tampilan GridView

Anda dapat menyesuaikan tampilan kontrol GridView dengan mengatur properti gaya untuk berbagai bagian kontrol. Tabel berikut ini mencantumkan properti gaya yang berbeda.

Properti gaya	Deskripsi
AlternatingRowStyle	Pengaturan gaya untuk baris data alternatif di kontrol GridView. Saat properti ini diatur, baris data ditampilkan bergantian antara pengaturan RowStyle dan pengaturan AlternatingRowStyle .
EditRowStyle	Pengaturan gaya untuk baris yang sedang diedit di kontrol GridView.
EmptyDataRowStyle	Pengaturan gaya untuk baris data kosong yang ditampilkan dalam kontrol GridView saat sumber data tidak berisi rekaman apa pun.
FooterStyle	Pengaturan gaya untuk baris footer kontrol GridView.
HeaderStyle	Pengaturan gaya untuk baris header kontrol GridView.
PagerStyle	Pengaturan gaya untuk baris pager kontrol GridView.
Gaya Baris	Pengaturan gaya untuk baris data di kontrol GridView. Saat properti AlternatingRowStyle juga diatur, baris data ditampilkan bergantian antara pengaturan RowStyle dan pengaturan AlternatingRowStyle .
SelectedRowStyle	Pengaturan gaya untuk baris yang dipilih di kontrol GridView.

Anda juga dapat menampilkan atau menyembunyikan bagian kontrol yang berbeda. Tabel berikut ini mencantumkan properti yang mengontrol bagian mana yang diperlihatkan atau disembunyikan.

Properti	Deskripsi
TampilkanFooter	Memperlihatkan atau menyembunyikan bagian footer kontrol GridView.
ShowHeader	Memperlihatkan atau menyembunyikan bagian header kontrol GridView.

Acara

Kontrol GridView menyediakan beberapa peristiwa yang dapat Anda programkan. Ini memungkinkan Anda menjalankan rutinitas kustom setiap kali peristiwa terjadi. Tabel berikut mencantumkan peristiwa yang didukung oleh kontrol GridView.

Kejadian	Deskripsi
PageIndexChanged	Terjadi ketika salah satu tombol pager diklik, tetapi setelah kontrol GridView menangani operasi halaman. Kejadian ini biasanya digunakan saat Anda perlu melakukan tugas setelah pengguna menavigasi ke halaman lain dalam kontrol.
PageIndexChanging	Terjadi ketika salah satu tombol pager diklik, tetapi sebelum kontrol GridView menangani operasi halaman. Kejadian ini sering digunakan untuk membatalkan operasi paging.
RowCancelingEdit	Terjadi saat tombol Batalkan baris diklik, tetapi sebelum kontrol GridView keluar dari mode edit. Kejadian ini sering digunakan untuk menghentikan operasi pembatalan.
RowCommand	Terjadi ketika tombol diklik di kontrol GridView. Kejadian ini sering digunakan untuk melakukan tugas ketika tombol diklik di kontrol.
RowCreated	Terjadi saat baris baru dibuat di kontrol GridView. Kejadian ini sering digunakan untuk memodifikasi konten baris saat baris dibuat.
RowDataBound	Terjadi saat baris data terikat ke data di kontrol GridView. Kejadian ini sering digunakan untuk memodifikasi konten baris saat baris terikat ke data.
RowDeleted	Terjadi saat tombol Hapus baris diklik, tetapi setelah kontrol GridView menghapus rekaman dari sumber data. Kejadian ini sering digunakan untuk memeriksa hasil operasi penghapusan.
RowDeleting	Terjadi saat tombol Hapus baris diklik, tetapi sebelum kontrol GridView menghapus rekaman dari sumber data. Kejadian ini sering digunakan untuk membatalkan operasi penghapusan.
RowEditing	Terjadi saat tombol Edit baris diklik, tetapi sebelum kontrol GridView memasuki mode edit. Kejadian ini sering digunakan untuk membatalkan operasi pengeditan.
RowUpdated	Terjadi saat tombol Perbarui baris diklik, tetapi setelah kontrol GridView memperbarui baris. Kejadian ini sering digunakan untuk memeriksa hasil operasi pembaruan.
RowUpdating	Terjadi saat tombol Perbarui baris diklik, tetapi sebelum kontrol GridView memperbarui baris. Kejadian ini sering digunakan untuk membatalkan operasi pembaruan.
SelectedIndexChanged	Terjadi saat tombol Pilih baris diklik, tetapi setelah kontrol GridView menangani operasi pemilihan. Kejadian ini sering digunakan untuk melakukan tugas setelah baris dipilih dalam kontrol.
SelectedIndexChanging	Terjadi saat tombol Pilih baris diklik, tetapi sebelum kontrol GridView menangani operasi pilih. Kejadian ini sering digunakan untuk membatalkan operasi pemilihan.
Diurutkan	Terjadi saat hyperlink untuk mengurutkan kolom diklik, tetapi setelah kontrol GridView menangani operasi pengurutan. Kejadian ini biasanya digunakan untuk melakukan tugas setelah pengguna mengklik hyperlink untuk mengurutkan kolom.
Pengurutan	Terjadi saat hyperlink untuk mengurutkan kolom diklik, tetapi sebelum kontrol GridView menangani operasi pengurutan. Kejadian ini sering digunakan untuk membatalkan operasi pengurutan atau untuk melakukan rutinitas pengurutan kustom.

FormView

Kontrol FormView digunakan untuk menampilkan satu rekaman dari sumber data. Ini mirip dengan kontrol DetailsView, kecuali menampilkan templat yang ditentukan pengguna alih-alih bidang baris. Membuat templat Anda sendiri memberi Anda fleksibilitas yang lebih besar dalam mengontrol bagaimana data ditampilkan. Kontrol FormView mendukung fitur-fitur berikut:

Pengikatan ke kontrol sumber data, seperti SqlDataSource dan ObjectDataSource.
Kemampuan penyisipan bawaan.
Kemampuan pembaruan dan penghapusan bawaan.
Kemampuan halaman bawaan.
Akses terprogram ke model objek FormView untuk mengatur properti secara dinamis, menangani peristiwa, dan sebagainya.
Tampilan yang dapat disesuaikan melalui templat, tema, dan gaya yang ditentukan pengguna.

Templat

Agar kontrol FormView menampilkan konten, Anda perlu membuat templat untuk berbagai bagian kontrol. Sebagian besar templat bersifat opsional; namun, Anda harus membuat templat untuk mode di mana kontrol dikonfigurasi. Misalnya, kontrol FormView yang mendukung penyisipan rekaman harus memiliki templat sisipkan item yang ditentukan. Tabel berikut ini mencantumkan templat berbeda yang bisa Anda buat.

Jenis templat	Deskripsi
EditItemTemplate	Menentukan konten untuk baris data saat kontrol FormView berada dalam mode edit. Templat ini biasanya berisi kontrol input dan tombol perintah yang dapat digunakan pengguna untuk mengedit rekaman yang sudah ada.
EmptyDataTemplate	Menentukan konten untuk baris data kosong yang ditampilkan saat kontrol FormView terikat ke sumber data yang tidak berisi rekaman apa pun. Templat ini biasanya berisi konten untuk memperingatkan pengguna bahwa sumber data tidak berisi rekaman apa pun.
FooterTemplate	Menentukan konten untuk baris footer. Templat ini biasanya berisi konten tambahan yang ingin Anda tampilkan di baris footer. Sebagai alternatif, Anda cukup menentukan teks untuk ditampilkan di baris footer dengan mengatur properti FooterText.
HeaderTemplate	Menentukan konten untuk baris header. Templat ini biasanya berisi konten tambahan yang ingin Anda tampilkan di baris header. Sebagai alternatif, Anda cukup menentukan teks untuk ditampilkan di baris header dengan mengatur properti HeaderText.
ItemTemplate	Menentukan konten untuk baris data saat kontrol FormView berada dalam mode baca-saja. Templat ini biasanya berisi konten untuk menampilkan nilai rekaman yang sudah ada.
SisipkanItemTemplate	Menentukan konten untuk baris data saat kontrol FormView berada dalam mode sisipkan. Templat ini biasanya berisi kontrol input dan tombol perintah yang dengannya pengguna dapat menambahkan rekaman baru.
PagerTemplate	Menentukan konten untuk baris pager yang ditampilkan saat fitur halaman diaktifkan (saat properti AllowPaging diatur ke true). Templat ini biasanya berisi kontrol yang dapat dinavigasi pengguna ke rekaman lain.

Kontrol input dalam templat edit item dan templat sisipkan item dapat terikat ke bidang sumber data dengan menggunakan ekspresi pengikatan dua arah. Ini memungkinkan kontrol FormView untuk secara otomatis mengekstrak nilai kontrol input untuk operasi pembaruan atau penyisipan. Ekspresi pengikatan dua arah juga memungkinkan kontrol input dalam templat item edit untuk secara otomatis menampilkan nilai bidang asli.

Pengikatan ke Data

Kontrol FormView dapat terikat ke kontrol sumber data (seperti SqlDataSource, AccessDataSource, ObjectDataSource dan sebagainya), atau ke sumber data apa pun yang mengimplementasikan antarmuka System.Collections.IEnumerable (seperti System.Data.DataView, System.Collections.ArrayList, dan System.Collections.Hashtable). Gunakan salah satu metode berikut untuk mengikat kontrol FormView ke jenis sumber data yang sesuai:

Untuk mengikat ke kontrol sumber data, atur properti DataSourceID kontrol FormView ke nilai ID kontrol sumber data. Kontrol FormView secara otomatis mengikat kontrol sumber data yang ditentukan dan dapat memanfaatkan kemampuan kontrol sumber data untuk melakukan fungsionalitas menyisipkan, memperbarui, menghapus, dan membuat halaman. Ini adalah metode yang disukai untuk mengikat data.
Untuk mengikat sumber data yang mengimplementasikan antarmuka System.Collections.IEnumerable , atur properti DataSource secara terprogram dari kontrol FormView ke sumber data lalu panggil metode DataBind. Saat menggunakan metode ini, kontrol FormView tidak menyediakan fungsionalitas penyisipan, pembaruan, penghapusan, dan halaman bawaan. Anda perlu menyediakan fungsionalitas ini dengan menggunakan peristiwa yang sesuai.

Operasi Kontrol FormView

Kontrol FormView menyediakan banyak kemampuan bawaan yang memungkinkan pengguna memperbarui, menghapus, menyisipkan, dan halaman melalui item dalam kontrol. Saat kontrol FormView terikat ke kontrol sumber data, kontrol FormView dapat memanfaatkan kemampuan kontrol sumber data dan menyediakan fungsionalitas pembaruan, penghapusan, penyisipan, dan penomor otomatis. Kontrol FormView dapat menyediakan dukungan untuk memperbarui, menghapus, menyisipkan, dan membuat halaman operasi dengan jenis sumber data lainnya; namun, Anda harus menyediakan penanganan aktivitas yang sesuai dengan implementasi untuk operasi ini.

Karena kontrol FormView menggunakan templat, kontrol FormView tidak menyediakan cara untuk menghasilkan tombol perintah secara otomatis untuk melakukan operasi pembaruan, penghapusan, atau penyisipan. Anda harus menyertakan tombol perintah ini secara manual dalam templat yang sesuai. Kontrol FormView mengenali tombol tertentu yang properti CommandName-nya diatur ke nilai tertentu. Tabel berikut mencantumkan tombol perintah yang dikenali kontrol FormView.

Tombol	Nilai nama perintah	Deskripsi
Batalkan	"Batal"	Digunakan dalam memperbarui atau menyisipkan operasi untuk membatalkan operasi dan untuk membuang nilai yang dimasukkan oleh pengguna. Kontrol FormView kemudian kembali ke mode yang ditentukan oleh properti DefaultMode.
Hapus	"Hapus"	Digunakan dalam menghapus operasi untuk menghapus rekaman yang ditampilkan dari sumber data. Menaikkan peristiwa ItemDeleting dan ItemDeleted.
Edit	"Edit"	Digunakan dalam memperbarui operasi untuk menempatkan kontrol FormView dalam mode edit. Konten yang ditentukan dalam properti EditItemTemplate ditampilkan untuk baris data.
Sisipkan	"Sisipkan"	Digunakan dalam menyisipkan operasi untuk mencoba menyisipkan rekaman baru di sumber data menggunakan nilai yang disediakan oleh pengguna. Menaikkan peristiwa ItemInserting dan ItemInserted.
Baru	"Baru"	Digunakan dalam menyisipkan operasi untuk menempatkan kontrol FormView dalam mode sisipkan. Konten yang ditentukan dalam properti InsertItemTemplate ditampilkan untuk baris data.
Halaman	"Halaman"	Digunakan dalam operasi paging untuk mewakili tombol di baris pager yang melakukan paging. Untuk menentukan operasi penomoran halaman, atur properti CommandArgument tombol ke "Berikutnya", "Sebelumnya", "Pertama", "Terakhir", atau indeks halaman yang akan dinavigasi. Menaikkan peristiwa PageIndexChanging dan PageIndexChanged.
Pembaruan	"Perbarui"	Digunakan dalam memperbarui operasi untuk mencoba memperbarui rekaman yang ditampilkan di sumber data dengan nilai yang disediakan oleh pengguna. Menaikkan peristiwa ItemUpdating dan ItemUpdated.

Tidak seperti tombol Hapus (yang segera menghapus rekaman yang ditampilkan), ketika tombol Edit atau Baru diklik, kontrol FormView masing-masing masuk ke mode edit atau sisipkan. Dalam mode edit, konten yang terkandung dalam properti EditItemTemplate ditampilkan untuk item data saat ini. Biasanya, templat edit item didefinisikan sedih sehingga tombol Edit diganti dengan tombol Perbarui dan Batal. Kontrol input yang sesuai untuk jenis data bidang (seperti TextBox atau kontrol Kotak Centang) juga biasanya ditampilkan dengan nilai bidang untuk dimodifikasi pengguna. Mengklik tombol Perbarui memperbarui rekaman di sumber data, sambil mengklik tombol Batalkan meninggalkan perubahan apa pun.

Demikian juga, konten yang terkandung dalam properti InsertItemTemplate ditampilkan untuk item data saat kontrol berada dalam mode sisipkan. Templat sisipkan item biasanya didefinisikan sed sehingga tombol Baru diganti dengan tombol Sisipkan dan Batal, dan kontrol input kosong ditampilkan bagi pengguna untuk memasukkan nilai untuk rekaman baru. Mengklik tombol Sisipkan menyisipkan rekaman di sumber data, sambil mengklik tombol Batal meninggalkan perubahan apa pun.

Kontrol FormView menyediakan fitur halaman, yang memungkinkan pengguna untuk menavigasi ke rekaman lain di sumber data. Saat diaktifkan, baris pager ditampilkan dalam kontrol FormView yang berisi kontrol navigasi halaman. Untuk mengaktifkan halaman, atur properti AllowPaging ke true. Anda dapat mengkustomisasi baris pager dengan mengatur properti objek yang terkandung dalam PagerStyle dan properti PagerSettings. Alih-alih menggunakan antarmuka pengguna baris pager bawaan, Anda dapat membuat UI Anda sendiri dengan menggunakan properti PagerTemplate .

Menyesuaikan Tampilan FormView

Anda dapat menyesuaikan tampilan kontrol FormView dengan mengatur properti gaya untuk berbagai bagian kontrol. Tabel berikut ini mencantumkan properti gaya yang berbeda.

Properti gaya	Deskripsi
EditRowStyle	Pengaturan gaya untuk baris data saat kontrol FormView berada dalam mode edit.
EmptyDataRowStyle	Pengaturan gaya untuk baris data kosong yang ditampilkan dalam kontrol FormView saat sumber data tidak berisi rekaman apa pun.
FooterStyle	Pengaturan gaya untuk baris footer kontrol FormView.
HeaderStyle	Pengaturan gaya untuk baris header kontrol FormView.
InsertRowStyle	Pengaturan gaya untuk baris data saat kontrol FormView berada dalam mode sisipkan.
PagerStyle	Pengaturan gaya untuk baris pager ditampilkan dalam kontrol FormView saat fitur paging diaktifkan.
Gaya Baris	Pengaturan gaya untuk baris data saat kontrol FormView berada dalam mode baca-saja.

Peristiwa FormView

Kontrol FormView menyediakan beberapa peristiwa yang dapat Anda programkan. Ini memungkinkan Anda menjalankan rutinitas kustom setiap kali peristiwa terjadi. Tabel berikut mencantumkan peristiwa yang didukung oleh kontrol FormView.

Kejadian	Deskripsi
Perintah Item	Terjadi ketika tombol dalam kontrol FormView diklik. Kejadian ini sering digunakan untuk melakukan tugas ketika tombol diklik di kontrol.
Item Dibuat	Terjadi setelah semua objek FormViewRow dibuat di kontrol FormView. Kejadian ini sering digunakan untuk memodifikasi nilai rekaman sebelum ditampilkan.
ItemDeleted	Terjadi ketika tombol Hapus (tombol dengan properti CommandName-nya diatur ke "Hapus") diklik, tetapi setelah kontrol FormView menghapus rekaman dari sumber data. Kejadian ini sering digunakan untuk memeriksa hasil operasi penghapusan.
ItemDeleting	Terjadi saat tombol Hapus diklik, tetapi sebelum kontrol FormView menghapus rekaman dari sumber data. Kejadian ini sering digunakan untuk membatalkan operasi penghapusan.
ItemInserted	Terjadi ketika tombol Sisipkan (tombol dengan properti CommandName-nya diatur ke "Sisipkan") diklik, tetapi setelah kontrol FormView menyisipkan rekaman. Kejadian ini sering digunakan untuk memeriksa hasil operasi penyisipan.
ItemInserting	Terjadi saat tombol Sisipkan diklik, tetapi sebelum kontrol FormView menyisipkan rekaman. Kejadian ini sering digunakan untuk membatalkan operasi penyisipan.
ItemDiupdated	Terjadi ketika tombol Perbarui (tombol dengan properti CommandName-nya diatur ke "Perbarui") diklik, tetapi setelah kontrol FormView memperbarui baris. Kejadian ini sering digunakan untuk memeriksa hasil operasi pembaruan.
ItemUpdating	Terjadi saat tombol Perbarui diklik, tetapi sebelum kontrol FormView memperbarui rekaman. Kejadian ini sering digunakan untuk membatalkan operasi pembaruan.
Mode Berubah	Terjadi setelah mode perubahan kontrol FormView (untuk mengedit, menyisipkan, atau membaca-saja mode). Kejadian ini sering digunakan untuk melakukan tugas ketika kontrol FormView berubah mode.
ModeChanging	Terjadi sebelum mode perubahan kontrol FormView (untuk mengedit, menyisipkan, atau membaca-saja mode). Kejadian ini sering digunakan untuk membatalkan perubahan mode.
PageIndexChanged	Terjadi ketika salah satu tombol pager diklik, tetapi setelah kontrol FormView menangani operasi halaman. Kejadian ini biasanya digunakan saat Anda perlu melakukan tugas setelah pengguna menavigasi ke rekaman lain dalam kontrol.
PageIndexChanging	Terjadi ketika salah satu tombol pager diklik, tetapi sebelum kontrol FormView menangani operasi halaman. Kejadian ini sering digunakan untuk membatalkan operasi paging.

DetailView

Kontrol DetailsView digunakan untuk menampilkan satu rekaman dari sumber data dalam tabel, di mana setiap bidang rekaman ditampilkan dalam baris tabel. Ini dapat digunakan dalam kombinasi dengan kontrol GridView untuk skenario detail master. Kontrol DetailsView mendukung fitur-fitur berikut:

Pengikatan ke kontrol sumber data, seperti SqlDataSource.
Kemampuan penyisipan bawaan.
Kemampuan pembaruan dan penghapusan bawaan.
Kemampuan halaman bawaan.
Akses terprogram ke model objek DetailsView untuk mengatur properti secara dinamis, menangani peristiwa, dan sebagainya.
Tampilan yang dapat disesuaikan melalui tema dan gaya.

Bidang Baris

Setiap baris data dalam kontrol DetailsView dibuat dengan mendeklarasikan kontrol bidang. Jenis bidang baris yang berbeda menentukan perilaku baris dalam kontrol. Kontrol bidang berasal dari DataControlField. Tabel berikut ini mencantumkan tipe bidang baris berbeda yang bisa digunakan.

Jenis bidang kolom	Deskripsi
BoundField	Menampilkan nilai bidang dalam sumber data sebagai teks.
Bidang Tombol	Menampilkan tombol perintah di kontrol DetailsView. Ini memungkinkan Anda menampilkan baris dengan kontrol tombol kustom, seperti tombol Tambahkan atau Hapus.
CheckBoxField	Menampilkan kotak centang dalam kontrol DetailsView. Tipe bidang baris ini umumnya digunakan untuk menampilkan bidang dengan nilai Boolean.
CommandField	Menampilkan tombol perintah bawaan untuk melakukan operasi edit, sisipkan, atau hapus di kontrol DetailsView.
HyperLinkField	Menampilkan nilai bidang dalam sumber data sebagai hyperlink. Tipe bidang baris ini memungkinkan Anda mengikat bidang kedua ke URL hyperlink.
ImageField	Menampilkan gambar dalam kontrol DetailsView.
Bidang Templat	Menampilkan konten yang ditentukan pengguna untuk baris dalam kontrol DetailsView sesuai dengan templat tertentu. Tipe bidang baris ini memungkinkan Anda membuat bidang baris kustom.

Secara default, properti AutoGenerateRows diatur ke true, yang secara otomatis menghasilkan objek bidang baris terikat untuk setiap bidang jenis yang dapat diikat di sumber data. Jenis yang dapat diikat yang valid adalah String, DateTime, Decimal, Guid, dan set jenis primitif. Setiap bidang kemudian ditampilkan dalam baris sebagai teks, dalam urutan setiap bidang muncul di sumber data.

Membuat baris secara otomatis menyediakan cara cepat dan mudah untuk menampilkan setiap bidang dalam rekaman. Namun, untuk menggunakan kemampuan tingkat lanjut kontrol DetailsView, Anda harus secara eksplisit mendeklarasikan bidang baris untuk disertakan dalam kontrol DetailsView. Untuk mendeklarasikan bidang baris, pertama-tama atur properti AutoGenerateRows ke false. Selanjutnya, tambahkan tag Bidang> pembuka dan penutupan< antara tag pembuka dan penutup kontrol DetailsView. Terakhir, cantumkan bidang baris yang ingin Anda sertakan antara tag Bidang> pembuka dan penutup<. Bidang baris yang ditentukan ditambahkan ke kumpulan Bidang dalam urutan yang tercantum. Koleksi Bidang memungkinkan Anda mengelola bidang baris secara terprogram di kontrol DetailsView.

Catatan

Bidang baris yang dihasilkan secara otomatis tidak ditambahkan ke kumpulan Bidang.

Mengikat data dengan DetailsView

Kontrol DetailsView dapat terikat ke kontrol sumber data, seperti SqlDataSource atau AccessDataSource, atau ke sumber data apa pun yang mengimplementasikan antarmuka System.Collections.IEnumerable, seperti System.Data.DataView, System.Collections.ArrayList dan System.Collections.Hashtable.

Gunakan salah satu metode berikut untuk mengikat kontrol DetailsView ke jenis sumber data yang sesuai:

Untuk mengikat kontrol sumber data, atur properti DataSourceID dari kontrol DetailsView ke nilai ID kontrol sumber data. Kontrol DetailsView secara otomatis mengikat kontrol sumber data yang ditentukan. Ini adalah metode yang disukai untuk mengikat data.
Untuk mengikat ke sumber data yang mengimplementasikan antarmuka System.Collections.IEnumerable , atur properti DataSource secara terprogram dari kontrol DetailsView ke sumber data lalu panggil metode DataBind.

Keamanan

Kontrol ini dapat digunakan untuk menampilkan input pengguna, yang mungkin menyertakan skrip klien berbahaya. Periksa informasi apa pun yang dikirim dari klien untuk skrip yang dapat dieksekusi, pernyataan SQL, atau kode lain sebelum menampilkannya di aplikasi Anda. ASP.NET menyediakan fitur validasi permintaan input untuk memblokir skrip dan HTML dalam input pengguna.

Operasi Data di DetailsView

Kontrol DetailsView menyediakan kemampuan bawaan yang memungkinkan pengguna memperbarui, menghapus, menyisipkan, dan halaman melalui item dalam kontrol. Saat kontrol DetailsView terikat ke kontrol sumber data, kontrol DetailsView dapat memanfaatkan kemampuan kontrol sumber data dan menyediakan fungsionalitas pembaruan, penghapusan, penyisipan, dan halaman otomatis.

Kontrol DetailsView dapat menyediakan dukungan untuk memperbarui, menghapus, menyisipkan, dan membuat halaman operasi dengan jenis sumber data lainnya; namun, Anda harus menyediakan implementasi untuk operasi ini dalam penanganan aktivitas yang sesuai.

Kontrol DetailsView dapat secara otomatis menambahkan bidang baris CommandField dengan tombol Edit, Hapus, atau Baru dengan mengatur properti AutoGenerateEditButton, AutoGenerateDeleteButton, atau AutoGenerateInsertButton ke true. Tidak seperti tombol Hapus (yang segera menghapus rekaman yang dipilih), ketika tombol Edit atau Baru diklik, kontrol DetailsView masing-masing masuk ke mode edit atau sisipkan. Dalam mode edit, tombol Edit diganti dengan tombol Perbarui dan Batal. Kontrol input yang sesuai untuk tipe data bidang (seperti TextBox atau kontrol Kotak Centang) ditampilkan dengan nilai bidang untuk dimodifikasi pengguna. Mengklik tombol Perbarui memperbarui rekaman di sumber data, sambil mengklik tombol Batalkan meninggalkan perubahan apa pun. Demikian juga, dalam mode sisipkan, tombol Baru diganti dengan tombol Sisipkan dan Batal, dan kontrol input kosong ditampilkan bagi pengguna untuk memasukkan nilai untuk rekaman baru.

Kontrol DetailsView menyediakan fitur halaman, yang memungkinkan pengguna untuk menavigasi ke rekaman lain di sumber data. Saat diaktifkan, kontrol navigasi halaman ditampilkan dalam baris pager. Untuk mengaktifkan halaman, atur properti AllowPaging ke true. Baris pager dapat dikustomisasi menggunakan properti PagerStyle dan PagerSettings.

Menyesuaikan Tampilan DetailsView

Anda dapat menyesuaikan tampilan kontrol DetailsView dengan mengatur properti gaya untuk berbagai bagian kontrol. Tabel berikut ini mencantumkan properti gaya yang berbeda.

Properti gaya	Deskripsi
AlternatingRowStyle	Pengaturan gaya untuk baris data alternatif di kontrol DetailsView. Ketika properti ini diatur, baris data ditampilkan bergantian antara pengaturan RowStyle dan pengaturan AlternatingRowStyle .
CommandRowStyle	Pengaturan gaya untuk baris yang berisi tombol perintah bawaan di kontrol DetailsView.
EditRowStyle	Pengaturan gaya untuk baris data saat kontrol DetailsView berada dalam mode edit.
EmptyDataRowStyle	Pengaturan gaya untuk baris data kosong yang ditampilkan dalam kontrol DetailsView saat sumber data tidak berisi rekaman apa pun.
FooterStyle	Pengaturan gaya untuk baris footer kontrol DetailsView.
HeaderStyle	Pengaturan gaya untuk baris header kontrol DetailsView.
InsertRowStyle	Pengaturan gaya untuk baris data saat kontrol DetailsView berada dalam mode sisipkan.
PagerStyle	Pengaturan gaya untuk baris pager kontrol DetailsView.
Gaya Baris	Pengaturan gaya untuk baris data di kontrol DetailsView. Saat properti AlternatingRowStyle juga diatur, baris data ditampilkan bergantian antara pengaturan RowStyle dan pengaturan AlternatingRowStyle .
FieldHeaderStyle	Pengaturan gaya untuk kolom header kontrol DetailsView.

Peristiwa di DetailsView

Kontrol DetailsView menyediakan beberapa peristiwa yang dapat Anda programkan. Ini memungkinkan Anda menjalankan rutinitas kustom setiap kali peristiwa terjadi. Tabel berikut mencantumkan peristiwa yang didukung oleh kontrol DetailsView. Kontrol DetailsView juga mewarisi peristiwa ini dari kelas dasarnya: DataBinding, DataBound, Disposed, Init, Load, PreRender, dan Render.

Kejadian	Deskripsi
Perintah Item	Terjadi saat tombol diklik di kontrol DetailsView.
ItemBuat	Terjadi setelah semua objek DetailsViewRow dibuat di kontrol DetailsView. Kejadian ini sering digunakan untuk memodifikasi nilai rekaman sebelum ditampilkan.
Item Dihapus	Terjadi saat tombol Hapus diklik, tetapi setelah kontrol DetailsView menghapus rekaman dari sumber data. Kejadian ini sering digunakan untuk memeriksa hasil operasi penghapusan.
Penghapusan Item	Terjadi saat tombol Hapus diklik, tetapi sebelum kontrol DetailsView menghapus rekaman dari sumber data. Kejadian ini sering digunakan untuk membatalkan operasi penghapusan.
ItemInserted	Terjadi ketika tombol Sisipkan diklik, tetapi setelah kontrol DetailsView menyisipkan rekaman. Kejadian ini sering digunakan untuk memeriksa hasil operasi penyisipan.
ItemInserting	Terjadi saat tombol Sisipkan diklik, tetapi sebelum kontrol DetailsView menyisipkan rekaman. Kejadian ini sering digunakan untuk membatalkan operasi penyisipan.
ItemDiupdated	Terjadi saat tombol Perbarui diklik, tetapi setelah kontrol DetailsView memperbarui baris. Kejadian ini sering digunakan untuk memeriksa hasil operasi pembaruan.
Pembaruan Item	Terjadi saat tombol Perbarui diklik, tetapi sebelum kontrol DetailsView memperbarui rekaman. Event ini sering digunakan untuk membatalkan operasi pembaruan.
Mode Berubah	Terjadi setelah mode perubahan kontrol DetailsView (edit, sisipkan, atau mode baca-saja). Kejadian ini sering digunakan untuk melakukan tugas ketika kontrol DetailsView berubah mode.
Pertukaran Mode	Terjadi sebelum mode kontrol DetailsView berubah (edit, sisipkan, atau mode baca-saja). Kejadian ini sering digunakan untuk membatalkan perubahan mode.
PageIndexChanged	Terjadi ketika salah satu tombol pager diklik, tetapi setelah kontrol DetailsView menangani operasi paging. Kejadian ini biasanya digunakan saat Anda perlu melakukan tugas setelah pengguna menavigasi ke rekaman lain dalam kontrol.
PageIndexChanging	Terjadi ketika salah satu tombol pager diklik, tetapi sebelum kontrol DetailsView menangani operasi paging. Event ini sering digunakan untuk membatalkan operasi paging.

Kontrol Menu di ASP.NET 2.0 dirancang untuk menjadi sistem navigasi berfungsi lengkap. Ini dapat dengan mudah terikat data ke sumber data hierarkis seperti SiteMapDataSource.

Struktur kontrol Menu dapat didefinisikan secara deklaratif atau dinamis dan terdiri dari satu simpul akar dan sejumlah sub-simpul. Kode berikut secara deklaratif mendefinisikan menu untuk kontrol Menu.

<asp:menu id="NavigationMenu" disappearafter="2000" staticdisplaylevels="2" staticsubmenuindent="10" orientation="Vertical" font-names="Arial" target="_blank" runat="server"> <staticmenuitemstyle backcolor="LightSteelBlue" forecolor="Black"/> <statichoverstyle backcolor="LightSkyBlue"/> <dynamicmenuitemstyle backcolor="Black" forecolor="Silver"/> <dynamichoverstyle backcolor="LightSkyBlue" forecolor="Black"/> <items> <asp:menuitem navigateurl="Home.aspx" text="Home" tooltip="Home"> <asp:menuitem navigateurl="Music.aspx" text="Music" tooltip="Music"> <asp:menuitem navigateurl="Classical.aspx" text="Classical" tooltip="Classical"/> <asp:menuitem navigateurl="Rock.aspx" text="Rock" tooltip="Rock"/> <asp:menuitem navigateurl="Jazz.aspx" text="Jazz" tooltip="Jazz"/> </asp:menuitem> <asp:menuitem navigateurl="Movies.aspx" text="Movies" tooltip="Movies"> <asp:menuitem navigateurl="Action.aspx" text="Action" tooltip="Action"/> <asp:menuitem navigateurl="Drama.aspx" text="Drama" tooltip="Drama"/> <asp:menuitem navigateurl="Musical.aspx" text="Musical" tooltip="Musical"/> </asp:menuitem> </asp:menuitem> </items> </asp:menu>

Dalam contoh di atas, node Home.aspx adalah simpul akar. Semua simpul lain disarangkan dalam simpul akar di berbagai tingkatan.

Ada dua jenis menu yang dapat dirender oleh kontrol Menu; menu statis dan menu dinamis. Menu statis terdiri dari item menu yang selalu terlihat. Menu dinamis terdiri dari item menu yang hanya terlihat saat pengguna mengarahkan kursor ke atasnya dengan mouse. Pelanggan mungkin sering membingungkan menu statis dengan menu yang ditentukan secara deklaratif dan dinamis dengan menu yang terikat data saat runtime. Bahkan, menu dinamis dan statis tidak terkait dengan metode populasi. Istilah statis dan dinamis hanya mengacu pada apakah menu ditampilkan secara statis atau hanya ditampilkan saat pengguna mengambil beberapa tindakan.

Properti StaticDisplayLevels digunakan untuk mengonfigurasi berapa banyak tingkat menu yang statis dan karenanya ditampilkan secara default. Dalam contoh di atas, mengatur properti StaticDisplayLevels ke nilai 2 akan menyebabkan menu secara statis menampilkan node Home, node Music, dan node Movies. Semua simpul lain akan ditampilkan secara dinamis ketika pengguna mengarahkan kumparan ke simpul induk.

Properti MaximumDynamicDisplayLevels mengonfigurasi jumlah maksimum tingkat dinamis yang mampu ditampilkan menu. Setiap menu dinamis pada tingkat yang lebih tinggi dari nilai yang ditentukan oleh properti MaximumDynamicDisplayLevels dibuang.

Catatan

Hampir dipastikan bahwa Anda mungkin mengalami situasi di mana menu tampaknya tidak dirender karena properti MaximumDynamicDisplayLevels. Dalam kasus tersebut, pastikan bahwa properti diatur dengan cukup untuk memungkinkan tampilan menu pelanggan.

Kontrol Menu dapat terikat ke sumber data hierarkis apa pun seperti SiteMapDataSource atau XMLDataSource. SiteMapDataSource adalah metode yang paling umum digunakan untuk pengikatan data ke kontrol Menu karena menyalurkan file Web.sitemap dan skemanya menyediakan API yang diketahui ke kontrol Menu. Daftar di bawah ini memperlihatkan file Web.sitemap sederhana.

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" > <siteMapNode url="~/default.aspx" description="Our Home Page" title="Home"> <siteMapNode url="~/products/default.aspx" title="Products" description="Our Products"> <siteMapNode url="~/products/winprods.aspx" title="Windows Products" description="Windows Products" /> <siteMapNode url="~/products/webprods.aspx" title="Web Products" description="Web Products" /> </siteMapNode> <siteMapNode url="~/services/default.aspx" title="Services" description="Our Services"> <siteMapNode url="~/services/consulting.aspx" title="Consulting Services" description="Consulting Services" /> <siteMapNode url="~/services/develop.aspx" title="Development Services" description="Development Services" /> </siteMapNode> </siteMapNode> </siteMap>

Perhatikan bahwa hanya ada satu elemen siteMapNode akar, dalam hal ini, elemen Home. Beberapa atribut dapat dikonfigurasi untuk setiap siteMapNode. Atribut yang paling umum digunakan adalah:

Url Menentukan URL yang akan ditampilkan ketika pengguna mengklik item menu. Jika atribut ini tidak ada, simpul hanya akan memposting kembali saat diklik.
Judul Menentukan teks yang ditampilkan pada item menu.
Deskripsi Digunakan sebagai dokumentasi untuk simpul. Juga ditampilkan sebagai tip alat ketika mouse diarahkan ke simpul.
siteMapFile Memungkinkan peta situs berlapis. Atribut ini harus menunjuk ke file peta situs ASP.NET yang terbentuk dengan baik.
Peran Memungkinkan munculnya simpul dikontrol oleh pemangkasan keamanan ASP.NET.

Perhatikan bahwa meskipun atribut ini bersifat opsional, perilaku menu mungkin tidak seperti yang diharapkan jika tidak ditentukan. Misalnya, jika atribut url ditentukan tetapi atribut deskripsi tidak, node tidak akan terlihat dan tidak akan ada cara untuk menavigasi ke URL yang ditentukan.

Mengontrol Operasi Menu

Ada beberapa properti yang memengaruhi pengoperasian kontrol Menu ASP.NET; properti Orientasi , properti DisappearAfter , properti StaticItemFormatString , dan properti StaticPopoutImageUrl hanyalah beberapa dari ini.

Orientasi dapat diatur ke horizontal atau vertikal dan mengontrol apakah item menu statis ditata secara horizontal dalam baris atau vertikal dan ditumpuk satu sama lain. Properti ini tidak mempengaruhi menu dinamis.
Properti DisappearAfter mengonfigurasi berapa lama menu dinamis harus tetap terlihat setelah mouse dipindahkan darinya. Nilai ditentukan dalam milidetik dan defaultnya adalah 500. Mengatur properti ini ke nilai -1 akan menyebabkan menu tidak pernah hilang secara otomatis. Dalam hal ini, menu hanya akan hilang ketika pengguna mengklik di luar menu.
Properti StaticItemFormatString memudahkan untuk mempertahankan verbiage yang konsisten di sistem menu Anda. Saat menentukan properti ini, {0} harus dimasukkan sebagai pengganti deskripsi yang muncul di sumber data. Misalnya, agar item menu dari latihan 1 mengatakan Kunjungi Halaman Produk Kami, dll., Anda akan menentukan Kunjungi Halaman Kami {0} untuk StaticItemFormatString. Pada runtime, ASP.NET akan menggantikan kemunculan {0} apa pun dengan deskripsi yang benar untuk item menu.
Properti StaticPopoutImageUrl menentukan gambar yang digunakan untuk menunjukkan bahwa simpul menu tertentu memiliki simpul anak yang dapat diakses dengan mengarahkan kubah ke atasnya. Menu dinamis akan terus menggunakan gambar default.

Kontrol Menu adalah kontrol bertemplat dan memungkinkan dua ItemTemplates yang berbeda; StaticItemTemplate dan DynamicItemTemplate. Dengan menggunakan templat ini, Anda dapat dengan mudah menambahkan kontrol server atau kontrol pengguna ke menu Anda.

Untuk mengedit templat di Visual Studio .NET, klik tombol Tag Pintar pada menu dan pilih Edit Templat. Anda kemudian dapat memilih antara mengedit StaticItemTemplate atau DynamicItemTemplate.

Kontrol apa pun yang ditambahkan ke StaticItemTemplate akan muncul di menu statis saat halaman dimuat. Kontrol apa pun yang ditambahkan ke DynamicItemTemplate akan muncul di semua menu pop-up.

Kontrol Menu memiliki dua peristiwa yang unik untuk itu; MenuItemClicked dan peristiwa MenuItemDatabound .

Acara MenuItemClicked dinaikkan saat item menu diklik. Peristiwa MenuItemDatabound dinaikkan saat item menu terikat data. MenuEventArgs yang diteruskan ke penanganan aktivitas menyediakan akses ke item menu melalui properti Item.

Mengontrol Tampilan Menu

Anda juga dapat memengaruhi tampilan kontrol menu menggunakan satu atau beberapa gaya yang tersedia untuk memformat menu. Di antaranya adalah StaticMenuStyle, DynamicMenuStyle, DynamicMenuItemStyle, DynamicSelectedStyle, dan DynamicHoverStyle. Properti ini dikonfigurasi menggunakan string Gaya HTML standar. Misalnya, berikut ini akan memengaruhi gaya untuk menu dinamis.

<DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px"
    BackColor="#D6D3CE" />

Catatan

Jika Anda menggunakan salah satu gaya Hover, Anda harus menambahkan <elemen head> ke halaman dengan elemen runat diatur ke server.

Kontrol menu juga mendukung penggunaan tema ASP.NET 2.0.

Kontrol TreeView

Kontrol TreeView menampilkan data dalam struktur seperti pohon. Seperti halnya kontrol Menu, data dapat dengan mudah terikat ke sumber data hierarkis apa pun seperti SiteMapDataSource.

Pertanyaan pertama yang mungkin ditanyakan pelanggan tentang kontrol TreeView di ASP.NET 2.0 adalah apakah itu terkait dengan TreeView IE WebControl yang tersedia untuk ASP.NET 1.x atau tidak. Hal ini tidak. Kontrol TreeView ASP.NET 2.0 ditulis dari bawah ke atas dan menawarkan peningkatan signifikan atas IE TreeView WebControl yang sebelumnya tersedia.

Saya tidak akan masuk ke detail tentang cara mengikat kontrol TreeView ke peta situs karena dilakukan dengan cara yang sama persis dengan kontrol Menu. Namun, kontrol TreeView memiliki beberapa perbedaan berbeda dalam cara operasinya.

Secara default, kontrol TreeView muncul sepenuhnya diperluas. Untuk mengubah tingkat ekspansi saat beban awal, ubah properti ExpandDepth kontrol. Ini sangat penting dalam kasus di mana TreeView terikat data setelah memperluas simpul tertentu.

DataBinding Kontrol TreeView

Tidak seperti kontrol Menu, TreeView meminjamkan dirinya dengan baik untuk menangani data dalam jumlah besar. Oleh karena itu, selain pengikatan data ke SiteMapDataSource atau XMLDataSource, TreeView sering terikat data ke Himpunan Data atau data relasional lainnya. Dalam kasus di mana kontrol TreeView terikat dengan data dalam jumlah besar, yang terbaik adalah hanya mengikat data yang benar-benar terlihat dalam kontrol. Anda kemudian dapat mengikat data ke data tambahan saat simpul TreeView diperluas.

Dalam kasus ini, properti PopulateOnDemand dari TreeView harus diatur ke true. Anda kemudian perlu memberikan implementasi untuk metode TreeNodePopulate .

Pengikatan Data Tanpa PostBack

Perhatikan bahwa ketika Anda memperluas simpul dalam contoh sebelumnya untuk pertama kalinya, halaman memposting kembali dan me-refresh. Itu bukan masalah dalam contoh ini, tetapi Anda dapat membayangkan bahwa itu mungkin berada di lingkungan produksi dengan sejumlah besar data. Skenario yang lebih baik adalah skenario di mana TreeView masih akan mengisi simpulnya secara dinamis, tetapi tanpa posting kembali ke server.

Dengan mengatur properti PopulateNodesFromClient dan PopulateOnDemand ke true, kontrol ASP.NET TreeView akan mengisi simpul secara dinamis tanpa posting kembali. Saat simpul induk diperluas, permintaan XMLHttp dibuat dari klien dan peristiwa OnTreeNodePopulate diaktifkan. Server merespons dengan pulau data XML yang kemudian digunakan untuk mengikat data simpul anak.

ASP.NET secara dinamis membuat kode klien yang mengimplementasikan fungsionalitas ini. Tag <skrip> yang berisi skrip dihasilkan menunjuk ke file AXD. Misalnya, daftar di bawah ini memperlihatkan tautan skrip untuk kode skrip yang menghasilkan permintaan XMLHttp.

<script src="/WebSite1/WebResource.axd?d=QQG9vSdBi4_k2y9AeP_iww2&
    amp;t=632514255396426531"
    type="text/javascript"></script>

Jika Anda menelusuri file AXD di atas di browser Anda dan membukanya, Anda akan melihat kode yang mengimplementasikan permintaan XMLHttp. Metode ini mencegah pelanggan memodifikasi file skrip.

Mengontrol Pengoperasian Kontrol TreeView

Kontrol TreeView memiliki beberapa properti yang memengaruhi pengoperasian kontrol. Properti yang paling jelas adalah ShowCheckBoxes, ShowExpandCollapse, dan ShowLines.

Properti ShowCheckBoxes memengaruhi apakah simpul menampilkan kotak centang saat dirender atau tidak. Nilai yang valid untuk properti ini adalah None, Root, Parent, Leaf, dan All. Ini mempengaruhi kontrol TreeView sebagai berikut:

Nilai Properti	Efek
Tidak ada	Kotak centang tidak ditampilkan pada simpul apa pun. Ini adalah pengaturan default.
Root	Kotak centang hanya ditampilkan pada simpul akar.
Parent	Kotak centang hanya ditampilkan pada simpul yang memiliki simpul anak. Simpul anak tersebut dapat berupa simpul induk atau simpul daun.
Daun	Kotak centang hanya ditampilkan pada simpul yang tidak memiliki simpul anak.
Semua	Kotak centang ditampilkan pada semua simpul.

Saat kotak centang digunakan, properti CheckedNodes akan mengembalikan kumpulan simpul TreeView yang dicentang saat postback.

Properti ShowExpandCollapse mengontrol tampilan gambar perluas/ciutkan di samping simpul root dan induk. Jika properti ini diatur ke false, simpul TreeView dirender sebagai hyperlink dan diperluas/diciutkan dengan mengklik tautan.

Properti ShowLines mengontrol apakah baris ditampilkan atau tidak menyambungkan simpul induk ke simpul anak. Ketika false (default), tidak ada baris yang ditampilkan. Jika true, kontrol TreeView akan menggunakan gambar baris dalam folder yang ditentukan oleh properti LineImagesFolder .

Untuk menyesuaikan tampilan baris TreeView, Visual Studio .NET 2005 menyertakan alat Line Designer. Anda dapat mengakses alat ini menggunakan tombol Tag Pintar pada kontrol TreeView seperti di bawah ini.

Cuplikan layar alat perancang garis Visual Studio. Kursor mengarahkan kursor ke atas pilihan Sesuaikan Gambar Garis.

Gambar 1

Saat memilih opsi menu Sesuaikan Gambar Garis, alat Line Designer akan diluncurkan yang memungkinkan Anda mengonfigurasi tampilan baris TreeView.

Peristiwa TreeView

Kontrol TreeView memiliki peristiwa unik berikut:

SelectedNodeChanged Terjadi ketika simpul dipilih berdasarkan properti SelectAction .
TreeNodeCheckChanged Terjadi saat status kotak centang simpul diubah.
TreeNodeExpanded Terjadi ketika node diperluas berdasarkan properti SelectAction .
TreeNodeCollapsed Terjadi ketika node diciutkan.
TreeNodeDataBound Terjadi ketika simpul terikat data.
TreeNodePopulate Terjadi ketika node diisi.

Properti SelectAction memungkinkan Anda mengonfigurasi peristiwa mana yang diaktifkan saat simpul dipilih. Properti SelectAction menyediakan tindakan berikut:

TreeNodeSelectAction.Expand Raises TreeNodeExpanded saat simpul dipilih.
TreeNodeSelectAction.None Tidak menimbulkan peristiwa saat simpul dipilih.
TreeNodeSelectAction.Select Menaikkan peristiwa SelectedNodeChanged saat simpul dipilih.
TreeNodeSelectAction.SelectExpand Meningkatkan peristiwa SelectedNodeChanged dan peristiwa TreeNodeExpanded saat simpul dipilih.

Mengontrol Tampilan dengan TreeView

Kontrol TreeView menyediakan banyak properti untuk mengontrol tampilan kontrol dengan gaya. Properti berikut ini tersedia.

Nama Properti	Kontrol
HoverNodeStyle	Mengontrol gaya simpul saat mouse diarahkan ke atasnya.
LeafNodeStyle	Mengontrol gaya simpul daun.
NodeStyle	Mengontrol gaya untuk semua simpul. Gaya simpul tertentu (seperti LeafNodeStyle) mengambil alih gaya ini.
ParentNodeStyle	Mengontrol gaya untuk semua simpul induk.
RootNodeStyle	Mengontrol gaya untuk simpul akar.
SelectedNodeStyle	Mengontrol gaya untuk simpul terpilih.

Masing-masing properti ini bersifat baca-saja. Namun, mereka masing-masing akan mengembalikan objek TreeNodeStyle , dan properti objek tersebut dapat dimodifikasi menggunakan format properti-subproperti . Misalnya, untuk mengatur properti ForeColor dari SelectedNodeStyle, Anda akan menggunakan sintaks berikut:

<asp:TreeView id=sampleTreeView
    SelectedNodeStyle-ForeColor=Blue
    runat=server>

Perhatikan bahwa tag di atas tidak ditutup. Itu karena saat menggunakan sintaks deklaratif yang ditunjukkan di sini, Anda juga akan menyertakan simpul TreeViews dalam kode HTML.

Properti gaya juga dapat ditentukan dalam kode menggunakan format property.subproperty . Misalnya, untuk mengatur properti ForeColor dari RootNodeStyle dalam kode, Anda akan menggunakan sintaks berikut:

treeView1.RootNodeStyle.ForeColor = System.Drawing.Color.Red;

Catatan

Untuk daftar lengkap properti gaya yang berbeda, lihat dokumentasi MSDN pada objek TreeNodeStyle.

Kontrol SiteMapPath

Kontrol SiteMapPath menyediakan kontrol navigasi remah roti untuk pengembang ASP.NET. Seperti kontrol navigasi lainnya, dapat dengan mudah terikat data ke sumber data hierarkis seperti SiteMapDataSource atau XmlDataSource.

Kontrol SiteMapPath terdiri dari objek SiteMapNodeItem. Ada tiga jenis simpul; simpul Akar, simpul Induk, dan simpul Saat Ini. Simpul akar adalah simpul di bagian atas struktur hierarkis. Simpul saat ini mewakili halaman saat ini. Semua simpul lainnya adalah simpul induk.

Mengontrol Operasi Kontrol SiteMapPath

Properti yang mengontrol operasi kontrol SiteMapPath adalah sebagai berikut:

Properti	Deskripsi Properti
ParentLevelsDisplayed	Mengontrol berapa banyak simpul induk yang ditampilkan. Defaultnya adalah -1 yang tidak memberlakukan batasan pada jumlah simpul induk yang ditampilkan.
PathDirection	Mengontrol arah SiteMapPath. Nilai yang valid adalah RootToCurrent (default) dan CurrentToRoot.
PathSeparator	String yang mengontrol karakter yang memisahkan simpul dalam kontrol SiteMapPath. Nilai defaultnya adalah :.
RenderCurrentNodeAsLink	Nilai Boolean yang mengontrol apakah simpul saat ini dirender sebagai tautan atau tidak. Defaultnya adalah False.
SkipLinkText	Membantu aksesibilitas saat halaman dilihat oleh pembaca layar. Properti ini memungkinkan pembaca layar untuk melewati kontrol SiteMapPath. Untuk menonaktifkan fitur ini, atur properti ke String.Empty.

Kontrol SiteMapPath Templat

SiteMapControl adalah kontrol templat, dan dengan demikian, Anda dapat menentukan templat yang berbeda untuk digunakan dalam menampilkan kontrol. Untuk mengedit templat dalam kontrol SiteMapPath, klik tombol Tag Pintar pada kontrol dan pilih Edit Templat dari menu. Ini menampilkan menu SiteMapTasks seperti yang ditunjukkan di bawah ini di mana Anda dapat memilih di antara templat berbeda yang tersedia.

Cuplikan layar menu mode pengeditan templat SiteMapControl. NodeTemplate disorot.

Figur 2

Templat NodeTemplate mengacu pada simpul apa pun di SiteMapPath. Jika simpul adalah simpul akar atau simpul saat ini dan RootNodeTemplate atau CurrentNodeTemplate dikonfigurasi, NodeTemplate akan ditimpa.

Peristiwa SiteMapPath

Kontrol SiteMapPath memiliki dua peristiwa yang tidak berasal dari kelas Kontrol; peristiwa ItemCreated dan peristiwa ItemDataBound . Peristiwa ItemCreated dimunculkan saat item SiteMapPath dibuat. ItemDataBound dimunculkan ketika metode DataBind dipanggil selama pengikatan data simpul SiteMapPath. Objek SiteMapNodeItemEventArgs menyediakan akses ke SiteMapNodeItem tertentu melalui properti Item.

Mengontrol Penampilan dengan SiteMapPath

Gaya berikut ini tersedia untuk pemformatan kontrol SiteMapPath.

Nama Properti	Kontrol
CurrentNodeStyle	Mengontrol gaya teks untuk simpul saat ini.
RootNodeStyle	Mengontrol gaya teks untuk simpul akar.
NodeStyle	Mengontrol gaya teks untuk semua simpul dengan asumsi bahwa CurrentNodeStyle atau RootNodeStyle tidak berlaku.

Properti NodeStyle ditimpa oleh CurrentNodeStyle atau RootNodeStyle. Masing-masing properti ini bersifat baca-saja dan mengembalikan objek Gaya . Untuk memengaruhi tampilan simpul menggunakan salah satu properti ini, Anda harus mengatur properti objek Gaya yang dikembalikan. Misalnya, kode di bawah ini mengubah properti forecolor dari simpul saat ini.

<asp:SiteMapPath runat="server" ID="SiteMapPath1"
  CurrentNodeStyle-ForeColor="Orange"/>

Properti juga dapat diterapkan secara terprogram sebagai berikut:

this.SiteMapPath1.CurrentNodeStyle.ForeColor =
    System.Drawing.Color.Orange;

Catatan

Jika templat diterapkan, gaya tidak akan diterapkan.

Buat situs Web baru.
Tambahkan file Peta Situs dengan memilih File, Baru, File dan memilih Peta Situs dari daftar templat file.

Buka peta situs (Web.sitemap secara default) dan ubah agar terlihat seperti daftar di bawah ini. Halaman yang Anda tautkan dalam file peta situs tidak benar-benar ada, tetapi itu tidak akan menjadi masalah untuk latihan ini.

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="~/default.aspx">
        <siteMapNode url="~/products/default.aspx"
          title="Products" description="Our Products">
            <siteMapNode url="~/products/winprods.aspx"
              title="Windows Products" description="Windows Products" />
            <siteMapNode url="~/products/webprods.aspx"
              title="Web Products" description="Web Products" />
        </siteMapNode>
        <siteMapNode url="~/services/default.aspx"
          title="Services" description="Our Services">
            <siteMapNode url="~/services/consulting.aspx"
              title="Consulting Services"
              description="Consulting Services" />
            <siteMapNode url="~/services/develop.aspx"
              title="Development Services"
              description="Development Services" />
        </siteMapNode>
    </siteMapNode>
</siteMap>

Buka formulir Web default dalam tampilan Desain.
Dari bagian Navigasi Kotak Alat, tambahkan kontrol Menu baru ke halaman.
Dari bagian Data kotak Alat, tambahkan SiteMapDataSource baru. SiteMapDataSource akan secara otomatis menggunakan file Web.sitemap di situs Anda. (File Web.sitemap harus berada di folder akar situs.)
Klik kontrol Menu lalu klik tombol Tag Pintar untuk menampilkan dialog Tugas Menu.
Di menu drop-down Pilih Sumber Data, pilih SiteMapDataSource1.
Klik tautan FormatOtomatis dan pilih format untuk Menu.
Di panel Properti, atur properti StaticDisplayLevels ke 2. Kontrol Menu sekarang harus menampilkan simpul Beranda, Produk, dan Layanan di Designer.
Telusuri halaman di browser Anda untuk menggunakan menu. (Karena halaman yang Anda tambahkan ke peta situs tidak benar-benar ada, Anda akan melihat kesalahan saat mencoba dan menelusurinya.)

Bereksperimenlah dengan mengubah staticDisplayLevels dan properti MaximumDynamicDisplayLevels dan lihat bagaimana efeknya terhadap cara menu dirender.

Lab 2: Mengikat Kontrol TreeView Secara Dinamis

Latihan ini mengasumsikan bahwa Anda telah SQL Server berjalan secara lokal dan database Northwind ada pada instans SQL Server. Jika kondisi ini tidak terpenuhi, silakan ubah string koneksi dalam sampel. Perhatikan bahwa Anda mungkin juga perlu menentukan autentikasi SQL Server alih-alih koneksi tepercaya.

Buat situs Web baru.

Beralih ke tampilan Kode untuk Default.aspx dan ganti semua kode dengan kode yang tercantum di bawah ini.

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">
    void PopulateNode(Object sender, TreeNodeEventArgs e) {
        // Call the appropriate method to populate a node at a particular level.
        switch (e.Node.Depth) {
            case 0:
                // Populate the first-level nodes.
                PopulateCategories(e.Node);
                break;
            case 1:
                // Populate the second-level nodes.
                PopulateProducts(e.Node);
                break;
            default:
                // Do nothing.
                break;
        }

    }
    void PopulateCategories(TreeNode node) {

        // Query for the product categories. These are the values
        // for the second-level nodes.
        DataSet ResultSet = RunQuery("Select CategoryID, CategoryName From Categories");
        // Create the second-level nodes.
        if (ResultSet.Tables.Count > 0) {

            // Iterate through and create a new node for each row in the query results.
            // Notice that the query results are stored in the table of the DataSet.
            foreach (DataRow row in ResultSet.Tables[0].Rows) {

                // Create the new node. Notice that the CategoryId is stored in the Value property
                // of the node. This will make querying for items in a specific category easier when
                // the third-level nodes are created.
                TreeNode newNode = new TreeNode();
                newNode.Text = row["CategoryName"].ToString();
                newNode.Value = row["CategoryID"].ToString();
                // Set the PopulateOnDemand property to true so that the child nodes can be
                // dynamically populated.
                newNode.PopulateOnDemand = true;

                // Set additional properties for the node.
                newNode.SelectAction = TreeNodeSelectAction.Expand;

                // Add the new node to the ChildNodes collection of the parent node.
                node.ChildNodes.Add(newNode);

            }

        }

    }
    void PopulateProducts(TreeNode node) {
        // Query for the products of the current category. These are the values
        // for the third-level nodes.
        DataSet ResultSet = RunQuery("Select ProductName From Products Where CategoryID=" + node.Value);
        // Create the third-level nodes.
        if (ResultSet.Tables.Count > 0) {

            // Iterate through and create a new node for each row in the query results.
            // Notice that the query results are stored in the table of the DataSet.
            foreach (DataRow row in ResultSet.Tables[0].Rows) {

                // Create the new node.
                TreeNode NewNode = new TreeNode(row["ProductName"].ToString());

                // Set the PopulateOnDemand property to false, because these are leaf nodes and
                // do not need to be populated.
                NewNode.PopulateOnDemand = false;

                // Set additional properties for the node.
                NewNode.SelectAction = TreeNodeSelectAction.None;

                // Add the new node to the ChildNodes collection of the parent node.
                node.ChildNodes.Add(NewNode);

            }

        }
    }
    DataSet RunQuery(String QueryString) {
        // Declare the connection string. This example uses Microsoft SQL Server
        // and connects to the Northwind sample database.
        String ConnectionString = "server=localhost;database=NorthWind;Integrated Security=SSPI";
        SqlConnection DBConnection = new SqlConnection(ConnectionString);
        SqlDataAdapter DBAdapter;
        DataSet ResultsDataSet = new DataSet();
        try {
            // Run the query and create a DataSet.
            DBAdapter = new SqlDataAdapter(QueryString, DBConnection);
            DBAdapter.Fill(ResultsDataSet);
            // Close the database connection.
            DBConnection.Close();
        } catch (Exception ex) {
            // Close the database connection if it is still open.
            if (DBConnection.State == ConnectionState.Open) {
                DBConnection.Close();
            }

            Message.Text = "Unable to connect to the database.";
        }
        return ResultsDataSet;
    }
</script>

<html>
<body>
    <form id="Form1" runat="server">
        <h3>
            TreeView PopulateNodesFromClient Example</h3>
        <asp:TreeView ID="LinksTreeView" 
          Font-Name="Arial" ForeColor="Blue" EnableClientScript="true"
          PopulateNodesFromClient="false" 
          OnTreeNodePopulate="PopulateNode" runat="server"
            ExpandDepth="0">
            <Nodes>
                <asp:TreeNode Text="Inventory" SelectAction="Expand"
                              PopulateOnDemand="True" Value="Inventory" />
            </Nodes>
        </asp:TreeView>
        <br>
        <br>
        <asp:Label ID="Message" runat="server" />
    </form>
</body>
</html>

Simpan halaman sebagai treeview.aspx.
Telusuri halaman.
Saat halaman pertama kali ditampilkan, lihat sumber halaman di browser Anda. Perhatikan bahwa hanya simpul yang terlihat yang dikirim ke klien.
Klik tanda plus di samping simpul apa pun.
Lihat sumber pada halaman lagi. Perhatikan bahwa simpul yang baru ditampilkan sekarang ada.

Lab 3: Tampilan Detail dan Pengeditan Data Menggunakan GridView dan DetailsView

Buat situs Web baru.
Tambahkan web.config baru ke situs Web.

Tambahkan string koneksi ke file web.config seperti yang ditunjukkan di bawah ini:

<connectionStrings>
    <add name="Northwind"
         providerName="System.Data.SqlClient"
         connectionString="Data Source=localhost;Integrated Security=SSPI;
         Initial Catalog=Northwind;"/>
</connectionStrings>

Catatan

Anda mungkin perlu mengubah string koneksi berdasarkan lingkungan Anda.

Simpan dan tutup file web.config.
Buka Default.aspx dan tambahkan kontrol SqlDataSource baru.
Ubah ID kontrol SqlDataSource menjadi Products.
Di menu SqlDataSource Tasks , klik KonfigurasiKan Sumber Data.
Pilih Northwind di menu dropdown koneksi dan klik Berikutnya.
Pilih Produk dari menu dropdown Nama dan centang kotak ProductID, ProductName, UnitPrice, dan UnitsInStock seperti yang ditunjukkan di bawah ini.

Cuplikan layar layar konfigurasi produk sumber data.

Figur 3

Klik Berikutnya.
Klik Selesai.
Beralih ke tampilan Sumber dan periksa kode yang dihasilkan. Perhatikan SelectCommand, DeleteCommand, InsertCommand, dan UpdateCommand yang ditambahkan ke kontrol SqlDataSource. Perhatikan juga parameter yang ditambahkan.
Beralih ke tampilan Desain dan tambahkan kontrol GridView baru ke halaman.
Pilih Produk dari menu dropdown Pilih Sumber Data .
Centang Aktifkan Halaman dan Aktifkan Pilihan seperti yang ditunjukkan di bawah ini.

Cuplikan layar menu Tugas GridView.

Gambar 4

Klik tautan Edit Kolom dan pastikan bidang Buat otomatis dicentang.
Klik OK.
Dengan kontrol GridView dipilih, klik tombol di samping properti DataKeyNames di panel Properti.
Pilih ProductID dari daftar Bidang data yang tersedia dan klik tombol > untuk menambahkannya.
Klik OK.
Tambahkan kontrol SqlDataSource baru ke halaman.
Ubah ID kontrol SqlDataSource menjadi Detail.
Dari menu Tugas SqlDataSource, pilih KonfigurasiKan Sumber Data.
Pilih Northwind dari menu drop-down dan klik Berikutnya.
Pilih Produk dari menu dropdown Nama dan centang <kotak centang /strong>* di kotak daftar Kolom .

Klik tombol WHERE .

Pilih ProductID dari menu dropdown Kolom .

Pilih = di menu dropdown Operator.

Pilih Kontrol dari menu drop-down Sumber .

Pilih GridView1 dari menu dropdown ID Kontrol .

Klik tombol Tambahkan untuk menambahkan klausa WHERE.

Klik OK.

Klik tombol Tingkat Lanjut dan centang kotak buat pernyataan INSERT, UPDATE, dan DELETE .

Klik OK.

Klik Berikutnya dan klik Selesai.

Tambahkan kontrol DetailsView ke halaman.

Di menu drop-down Pilih Sumber Data , pilih Detail.

Centang kotak aktifkan Pengeditan seperti yang ditunjukkan di bawah ini.

Gambar 5 39. Simpan halaman dan telusuri Default.aspx. 40. Klik tautan Pilih di samping rekaman yang berbeda untuk melihat DetailTampilan pembaruan secara otomatis. 41. Klik tautan Edit di kontrol DetailsView. 42. Buat perubahan pada rekaman dan klik Perbarui.

Bagikan melalui

Kontrol Terikat Data

Kelas DataBoundControl

AdRotator

ImageUrl

NavigateUrl

Teks Alternatif

Kata kunci

Tayangan

Tinggi

Lebar

Kontrol Daftar

GridView

Mengikat ke Kontrol Sumber Data

Operasi Kontrol GridView

Menyesuaikan Tampilan GridView

Acara

FormView

Templat

Pengikatan ke Data

Operasi Kontrol FormView

Menyesuaikan Tampilan FormView

Peristiwa FormView

DetailView

Bidang Baris

Mengikat data dengan DetailsView

Keamanan

Operasi Data di DetailsView

Menyesuaikan Tampilan DetailsView

Peristiwa di DetailsView

Kontrol Menu

Data Yang Mengikat Kontrol Menu

Mengontrol Operasi Menu

Kontrol Menu Templat

Menu Acara

Mengontrol Tampilan Menu

Kontrol TreeView

DataBinding Kontrol TreeView

Pengikatan Data Tanpa PostBack

Mengontrol Pengoperasian Kontrol TreeView

Peristiwa TreeView

Mengontrol Tampilan dengan TreeView

Kontrol SiteMapPath

Mengontrol Operasi Kontrol SiteMapPath

Kontrol SiteMapPath Templat

Peristiwa SiteMapPath

Mengontrol Penampilan dengan SiteMapPath

Lab 1: Mengonfigurasi Kontrol Menu ASP.NET

Lab 2: Mengikat Kontrol TreeView Secara Dinamis

Lab 3: Tampilan Detail dan Pengeditan Data Menggunakan GridView dan DetailsView

Saran dan Komentar

Sumber Daya Tambahan: