Bagikan melalui

Menggunakan Kontrol Toolkit Kontrol AJAX dan Control Extenders (C#)

oleh Microsoft

Pelajari cara menambahkan kontrol dan extender AJAX Control Toolkit ke halaman ASP.NET Anda.

Toolkit Kontrol AJAX berisi sekumpulan kontrol dan extender kontrol. Dalam tutorial singkat ini, Anda mempelajari cara menambahkan kontrol dan kontrol extender ke halaman ASP.NET.

Catatan

Untuk instruksi tentang menginstal Toolkit Kontrol AJAX dan menambahkan Toolkit Kontrol AJAX ke kotak alat Visual Studio/Visual Web Developer, lihat tutorial Memulai Toolkit Kontrol AJAX.

Menggunakan Kontrol Toolkit Kontrol AJAX

Kontrol Toolkit Kontrol AJAX berfungsi seperti kontrol ASP.NET normal. Anda dapat menyeret kontrol dari kotak alat ke halaman ASP.NET. Anda dapat menambahkan kontrol ke halaman dalam tampilan Desain atau tampilan Sumber.

Ada satu persyaratan khusus saat menggunakan kontrol dari Toolkit Kontrol AJAX. Halaman harus berisi kontrol ScriptManager. Kontrol ScriptManager bertanggung jawab untuk menyertakan semua JavaScript yang diperlukan oleh kontrol Toolkit Kontrol AJAX.

Misalnya, tab Toolkit Kontrol AJAX menyertakan kontrol bernama kontrol Editor. Kontrol ini menampilkan editor HTML yang kaya. Ikuti langkah-langkah berikut untuk menambahkan kontrol Editor ke halaman:

  1. Buat halaman ASP.NET baru bernama ShowEditor.aspx
  2. Pilih kontrol ScriptManager dari bawah tab Ekstensi AJAX di kotak alat dan seret kontrol ke halaman.
  3. Pilih kontrol Editor dari bawah tab Toolkit Kontrol AJAX di kotak alat dan seret kontrol ke halaman (lihat Gambar 1). Designer akan terlihat seperti Gambar 2.
  4. Jalankan situs web dengan memilih opsi menu Debug, Mulai Debugging , atau tekan tombol F5.
  5. Anda akan melihat halaman di Gambar 3.

Memilih kontrol Editor HTML

Gambar 01: Memilih kontrol Editor HTML (Klik untuk melihat gambar ukuran penuh)

Visual Studio Designer dengan kontrol ScriptManager dan Edit

Gambar 02: Visual Studio Designer dengan kontrol ScriptManager dan Edit (Klik untuk melihat gambar ukuran penuh)

Halaman DisplayEditor.aspx

Gambar 03: Halaman DisplayEditor.aspx (Klik untuk melihat gambar ukuran penuh)

Menggunakan AJAX Control Toolkit Control Extenders

Toolkit Kontrol AJAX juga berisi extender kontrol. Seperti namanya, extender kontrol memperluas fungsionalitas kontrol yang ada. Misalnya, extender kontrol ConfirmButton memperluas kontrol tombol ASP.NET standar. Extender mengubah perilaku kontrol Tombol sehingga Tombol menampilkan dialog konfirmasi saat Anda mengkliknya.

Extender kontrol, sama seperti kontrol Toolkit Kontrol AJAX, memerlukan kontrol ScriptManager. Anda harus menambahkan kontrol ScriptManager ke halaman sebelum mulai menggunakan perluas kontrol di halaman.

Ikuti langkah-langkah berikut untuk menggunakan extender kontrol ConfirmButton:

  1. Buat halaman ASP.NET baru bernama ShowConfirmButton.aspx
  2. Tambahkan kontrol ScriptManager ke halaman dengan menyeret kontrol ke halaman dari bawah tab Ekstensi AJAX.
  3. Tambahkan kontrol Tombol standar ke halaman dengan menyeret Tombol dari bawah tab Standar di kotak alat ke permukaan Designer.
  4. Klik opsi Tambahkan tugas Extender (lihat Gambar 4).
  5. Dalam dialog Pilih Extender, pilih KonfirmasiButtonExtender (lihat Gambar 5) dan klik tombol OK.
  6. Pilih kontrol Tombol di Designer dan perluas simpul Extenders, Button1_ConfirmButtonExtender di jendela Properti (lihat Gambar 6). Tetapkan nilai 'Benar?' ke properti ConfirmText.
  7. Jalankan halaman dengan memilih opsi menu Debug, Mulai Debugging , atau tekan tombol F5.

Opsi Tambahkan tugas Extender

Gambar 04: Opsi Tambahkan tugas Extender (Klik untuk melihat gambar ukuran penuh)

Memilih extender kontrol ConfirmButton

Gambar 05: Memilih extender kontrol ConfirmButton (Klik untuk melihat gambar ukuran penuh)

Mengatur properti ConfirmButton

Gambar 06: Mengatur properti ConfirmButton (Klik untuk melihat gambar ukuran penuh)

Saat halaman terbuka, Anda akan melihat tombol. Saat Anda mengklik tombol , Anda mendapatkan dialog konfirmasi di Gambar 7.

Menampilkan dialog konfirmasi

Gambar 07: Menampilkan dialog konfirmasi (Klik untuk melihat gambar ukuran penuh)

Perhatikan bahwa Anda biasanya tidak menyeret extender kontrol ke halaman. Sebagai gantinya, Anda menggunakan opsi Tambahkan tugas Extender untuk menambahkan extender ke kontrol yang telah Anda tambahkan ke halaman. Perhatikan, selanjutnya, bahwa Anda mengatur properti extender kontrol dengan membuka lembar properti untuk kontrol yang diperluas.

Satu kontrol ASP.NET dapat diperluas oleh beberapa extender kontrol. Lembar properti untuk kontrol yang diperluas akan mencantumkan semua extender kontrol yang terkait dengan kontrol.

SebelumnyaBerikutnya